get stuff basically working

Author: Rich-Harris

src/lib/client/monaco/monaco.js

@@ -9,10 +9,8 @@ import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 let monaco;
 
 if (browser) {
-	monaco = await import('monaco-editor');
-
 	// @ts-expect-error
-	window.monacoEnvironment = {
+	self.MonacoEnvironment = {
 		/**
 		 * @param {string} _moduleId
 		 * @param {string} label
@@ -35,6 +33,8 @@ if (browser) {
 			}
 		}
 	};
+
+	monaco = await import('monaco-editor');
 }
 
 export { monaco };

src/lib/client/viewer/Editor.svelte

@@ -1,66 +1,27 @@
 <script>
-	import { onMount, createEventDispatcher } from 'svelte';
-	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';
+	import { onMount } from 'svelte';
+	import { monaco } from '$lib/client/monaco/monaco.js';
 
-	/** @type {import('$lib/types').FileStub | null} */
-	export let file;
-
-	const dispatch = createEventDispatcher();
+	/** @type {import('monaco-editor').editor.ITextModel} */
+	export let model;
 
 	/** @type {HTMLDivElement} */
 	let container;
 
-	/** @type {import('monaco-editor')} */
-	let monaco;
-
 	/** @type {import('monaco-editor').editor.IStandaloneCodeEditor}*/
 	let editor;
 
 	onMount(() => {
-		let destroyed = false;
-
-		import('monaco-editor').then((module) => {
-			if (destroyed) return;
-
-			monaco = module;
-
-			// @ts-ignore
-			self.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();
-					}
-				}
-			};
-
-			editor = monaco.editor.create(container);
-		});
+		editor = monaco.editor.create(container);
 
 		return () => {
-			if (editor) editor.dispose();
-			destroyed = true;
+			editor.dispose();
 		};
 	});
+
+	$: if (editor) {
+		editor.setModel(model);
+	}
 </script>
 
 <div bind:this={container} />
@@ -72,7 +33,6 @@
 		height: 100%;
 		resize: none;
 		border: none;
-		padding: 1rem;
 		box-sizing: border-box;
 		tab-size: 2;
 	}

src/lib/client/viewer/Viewer.svelte

@@ -4,7 +4,7 @@
 	import Editor from './Editor.svelte';
 	import Folder from './FileTree/Folder.svelte';
 
-	const { files, current, selected, started, base, update } = getContext('filetree');
+	const { files, current, active, started, base, update } = getContext('filetree');
 </script>
 
 <div class="viewer">
@@ -18,16 +18,7 @@
 				</section>
 
 				<section slot="b">
-					<Editor
-						file={$selected}
-						on:change={(e) => {
-							if ($selected) {
-								// @ts-ignore for now
-								$selected.contents = e.detail.value;
-								update([$selected]);
-							}
-						}}
-					/>
+					<Editor model={$active} />
 				</section>
 			</SplitPane>
 		</section>

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

@@ -17,6 +17,7 @@
 	import Viewer from '$lib/client/viewer/Viewer.svelte';
 	import TableOfContents from './_/TableOfContents.svelte';
 	import { monaco } from '$lib/client/monaco/monaco.js';
+	import { browser } from '$app/env';
 
 	/** @type {import('$lib/types').SectionIndex} */
 	export let index;
@@ -34,8 +35,8 @@
 	/** @type {import('svelte/store').Writable<import('$lib/types').Stub[]>} */
 	const files = writable([]);
 
-	/** @type {import('svelte/store').Writable<import('monaco-editor').editor.ITextModel[]>} */
-	const models = writable([]);
+	/** @type {import('svelte/store').Writable<import('monaco-editor').editor.ITextModel>} */
+	const active = writable();
 
 	/** @type {import('svelte/store').Writable<import('$lib/types').Stub | null>} */
 	const selected = writable(null);
@@ -44,17 +45,21 @@
 
 	const base = writable('');
 
-	setContext('filetree', {
+	/** @type {Map<import('$lib/types').FileStub, import('monaco-editor').editor.ITextModel>} */
+	const models = new Map();
+
+	const { select } = setContext('filetree', {
 		/** @param {import('$lib/types').FileStub} file */
 		select: (file) => {
-			selected.set(file);
+			$selected = file;
+			$active = /** @type {import('monaco-editor').editor.ITextModel} */ (models.get(file));
 		},
 
 		current,
 
 		files,
 
-		models,
+		active,
 
 		selected,
 
@@ -95,6 +100,13 @@
 	/** @type {import('$lib/types').Adapter} */
 	let adapter;
 
+	/** @type {Record<string, string>}*/
+	const types = {
+		js: 'javascript',
+		ts: 'typescript',
+		svelte: 'html' // TODO
+	};
+
 	onMount(() => {
 		let destroyed = false;
 
@@ -110,48 +122,51 @@
 			if (adapter) {
 				adapter.destroy();
 			}
+
+			clearInterval(interval);
 		};
 	});
 
 	afterNavigate(async () => {
-		const data = Object.values(section.a);
+		const stubs = Object.values(section.a);
 
-		console.log(section.a);
+		files.set(stubs);
 
-		files.set(data);
+		models.forEach((model) => {
+			model.dispose();
+		});
+		models.clear();
 
-		for (const model of $models) model.dispose();
-		$models = [];
+		stubs.forEach((stub) => {
+			if (stub.type === 'file') {
+				const type = /** @type {string} */ (stub.basename.split('.').pop());
 
-		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 })
+					stub.contents,
+					types[type] || type,
+					new monaco.Uri().with({ path: stub.name })
 				);
 
 				model.onDidChangeContent(() => {
 					const value = model.getValue();
-					file.contents = value;
-					adapter.update([file]);
+					stub.contents = value;
+					adapter.update([stub]);
 				});
 
-				$models.push(model);
+				models.set(stub, model);
 			}
 		});
 
-		selected.set(
+		select(
 			/** @type {import('$lib/types').FileStub} */ (
-				data.find((file) => file.name === section.chapter.focus)
+				stubs.find((stub) => stub.name === section.chapter.focus)
 			)
 		);
 
 		current.set(section);
 
 		await ready;
-		await adapter.update(data);
+		await adapter.update(stubs);
 
 		while (!$started) {
 			try {