create models at root

Author: Rich-Harris

jsconfig.json

@@ -7,11 +7,11 @@
 		"forceConsistentCasingInFileNames": true,
 		"lib": ["es2020", "DOM"],
 		"moduleResolution": "node",
-		"module": "es2020",
+		"module": "es2022",
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"target": "es2020"
+		"target": "es2022"
 	}
 }

src/lib/client/monaco/monaco.js

@@ -0,0 +1,40 @@
+import { browser } from '$app/env';
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+/** @type {import('monaco-editor')} */
+let monaco;
+
+if (browser) {
+	monaco = await import('monaco-editor');
+
+	// @ts-expect-error
+	window.monacoEnvironment = {
+		/**
+		 * @param {string} _moduleId
+		 * @param {string} label
+		 */
+		getWorker: function (_moduleId, label) {
+			switch (label) {
+				case 'json':
+					return new jsonWorker();
+				case 'css':
+				case 'scss':
+				case 'less':
+					return new cssWorker();
+				case 'html':
+					return new htmlWorker();
+				case 'javascript':
+				case 'typescript':
+					return new tsWorker();
+				default:
+					return new editorWorker();
+			}
+		}
+	};
+}
+
+export { monaco };

src/lib/client/viewer/Editor.svelte

@@ -20,12 +20,6 @@
 	/** @type {import('monaco-editor').editor.IStandaloneCodeEditor}*/
 	let editor;
 
-	/** @type {import('monaco-editor').editor.ITextModel}*/
-	let model;
-
-	/** @type {import('$lib/types').File | null} */
-	let active;
-
 	onMount(() => {
 		let destroyed = false;
 
@@ -67,29 +61,6 @@
 			destroyed = true;
 		};
 	});
-
-	$: if (editor && file) {
-		if (file === active) {
-			// model.setValue(file.contents);
-		} else {
-			const type = file.basename.split('.').pop();
-
-			model = monaco.editor.createModel(
-				file.contents,
-				type === 'svelte' ? 'html' : type, // TODO figure out how to do Svelte files with monaco.languages.register
-				new monaco.Uri().with({ path: file.name })
-			);
-
-			model.onDidChangeContent(() => {
-				dispatch('change', {
-					value: model.getValue()
-				});
-			});
-
-			editor.setModel(model);
-			active = file;
-		}
-	}
 </script>
 
 <div bind:this={container} />

src/routes/tutorial/[slug]/index.svelte

@@ -16,6 +16,7 @@
 	import { writable } from 'svelte/store';
 	import Viewer from '$lib/client/viewer/Viewer.svelte';
 	import TableOfContents from './_/TableOfContents.svelte';
+	import { monaco } from '$lib/client/monaco/monaco.js';
 
 	/** @type {import('$lib/types').SectionIndex} */
 	export let index;
@@ -33,6 +34,9 @@
 	/** @type {import('svelte/store').Writable<Array<import('$lib/types').File | import('$lib/types').Directory>>} */
 	const files = writable([]);
 
+	/** @type {import('svelte/store').Writable<import('monaco-editor').editor.ITextModel[]>} */
+	const models = writable([]);
+
 	/** @type {import('svelte/store').Writable<import('$lib/types').File | null>} */
 	const selected = writable(null);
 
@@ -50,6 +54,8 @@
 
 		files,
 
+		models,
+
 		selected,
 
 		started,
@@ -112,6 +118,28 @@
 
 		files.set(data);
 
+		for (const model of $models) model.dispose();
+		$models = [];
+
+		data.forEach((file) => {
+			if (file.type === 'file') {
+				const type = file.basename.split('.').pop();
+				const model = monaco.editor.createModel(
+					file.contents,
+					type,
+					new monaco.Uri().with({ path: file.name })
+				);
+
+				model.onDidChangeContent(() => {
+					const value = model.getValue();
+					file.contents = value;
+					adapter.update([file]);
+				});
+
+				$models.push(model);
+			}
+		});
+
 		selected.set(
 			/** @type {import('$lib/types').File} */ (
 				data.find((file) => file.name === section.chapter.focus)