[fix] more robust monaco integration

- Move logic into monaco file
- Better reuse of existing models + fix solve/reset
- Fix initial select

Author: dummdidumm

content/tutorial/02-sveltekit/meta.json

@@ -5,5 +5,5 @@
 		"depth": 0,
 		"name": "project"
 	},
-	"focus": "/src/routes/index.svelte"
+	"focus": "/src/routes/+page.svelte"
 }

content/tutorial/04-advanced-sveltekit/meta.json

@@ -5,5 +5,5 @@
 		"depth": 0,
 		"name": "project"
 	},
-	"focus": "/src/routes/index.svelte"
+	"focus": "/src/routes/+page.svelte"
 }

src/lib/client/adapters/webcontainer/index.js

@@ -2,6 +2,9 @@ import { load } from '@webcontainer/api';
 import base64 from 'base64-js';
 import { ready } from '../common/index.js';
 
+/** @type {import('@webcontainer/api').WebContainer} */
+let vm;
+
 /**
  * @param {import('$lib/types').Stub[]} stubs
  * @returns {Promise<import('$lib/types').Adapter>}
@@ -21,14 +24,13 @@ export async function create(stubs) {
 		throw new Error('WebContainers are not supported by Safari');
 	}
 
-	/** @type {import('@webcontainer/api').WebContainer} */
-	let vm;
-
 	const base = await new Promise(async (fulfil, reject) => {
 		setTimeout(() => {
 			reject(new Error('Timed out starting WebContainer'));
 		}, 15000);
 
+		// There can only be one instance, else it throws an error - guard against this case
+		// if there was an error later on or a timeout and the user tries again
 		if (!vm) {
 			console.log('loading webcontainer');
 
@@ -84,15 +86,31 @@ export async function create(stubs) {
 		);
 	});
 
-	let current = stubs;
+	/**
+	 * Paths of the currently loaded file stubs
+	 */
+	let current = new Set(stubs.filter((stub) => stub.type === 'file').map((stub) => stub.name));
+	/**
+	 * Keeps track of the latest create/reset to ensure things are not processed in parallel.
+	 * (if this turns out to be insufficient, we can use a queue)
+	 */
+	let running = base;
 
 	return {
 		base,
 
-		/** @param {import('$lib/types').Stub[]} stubs */
+		/**
+		 * Deletes old files and adds new ones
+		 * @param {import('$lib/types').Stub[]} stubs
+		 */
 		async reset(stubs) {
-			const old = new Set(current.filter((stub) => stub.type === 'file').map((stub) => stub.name));
-			current = stubs;
+			await running;
+			/** @type {Function} */
+			let resolve = () => {};
+			running = new Promise((fulfil) => (resolve = fulfil));
+
+			const old = current;
+			current = new Set(stubs.filter((stub) => stub.type === 'file').map((stub) => stub.name));
 
 			for (const stub of stubs) {
 				if (stub.type === 'file') {
@@ -106,16 +124,21 @@ export async function create(stubs) {
 			const promise = new Promise((fulfil, reject) => {
 				const error_unsub = vm.on('error', (error) => {
 					error_unsub();
+					resolve();
 					reject(new Error(error.message));
 				});
 
 				const ready_unsub = vm.on('server-ready', (port, base) => {
 					ready_unsub();
 					console.log(`server ready on port ${port} at ${performance.now()}: ${base}`);
+					resolve();
 					fulfil(undefined);
 				});
 
-				setTimeout(() => reject(new Error('Timed out resetting WebContainer')), 10000);
+				setTimeout(() => {
+					resolve();
+					reject(new Error('Timed out resetting WebContainer'));
+				}, 10000);
 			});
 
 			for (const file of old) {
@@ -142,10 +165,17 @@ export async function create(stubs) {
 			await promise;
 
 			await new Promise((f) => setTimeout(f, 200)); // wait for chokidar
+
+			resolve();
 		},
 
-		/** @param {import('$lib/types').FileStub[]} stubs */
+		/**
+		 * Loads new files but keeps the old ones
+		 * @param {import('$lib/types').FileStub[]} stubs
+		 */
 		async update(stubs) {
+			await running;
+
 			/** @type {import('@webcontainer/api').FileSystemTree} */
 			const root = {};
 
@@ -178,6 +208,8 @@ export async function create(stubs) {
 
 		async destroy() {
 			vm.teardown();
+			// @ts-ignore
+			vm = null;
 		}
 	};
 }

src/lib/client/monaco/monaco.js

@@ -1,4 +1,4 @@
-import { browser } from '$app/environment';
+import { browser, dev } from '$app/environment';
 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';
@@ -9,6 +9,12 @@ import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
 let monaco;
 
 if (browser) {
+	if (dev && !/chrome/i.test(navigator.userAgent)) {
+		throw new Error(
+			'The code editor requires Chrome during development, as it uses module workers'
+		);
+	}
+
 	// @ts-expect-error
 	self.MonacoEnvironment = {
 		/**
@@ -37,4 +43,101 @@ if (browser) {
 	monaco = await import('monaco-editor');
 }
 
-export { monaco };
+/**
+ * file extension -> monaco language
+ * @type {Record<string, string>}
+ * */
+const types = {
+	js: 'javascript',
+	ts: 'typescript',
+	svelte: 'html' // TODO
+};
+
+/**
+ * URL -> model
+ * @type {Map<string, import('monaco-editor').editor.ITextModel>}
+ * */
+const models = new Map();
+
+let notify_adapter = true;
+
+/**
+ *
+ * @param {import('$lib/types').Stub[]} stubs
+ * @param {() => import('$lib/types').Adapter} adapter
+ * @param {boolean} [notify]
+ */
+function update_files(stubs, adapter, notify = true) {
+	notify_adapter = notify;
+	for (const stub of stubs) {
+		if (stub.type === 'directory') {
+			continue;
+		}
+
+		const model = models.get(stub.name);
+
+		if (model) {
+			const value = model.getValue();
+
+			if (stub.contents !== value) {
+				model.pushEditOperations(
+					[],
+					[
+						{
+							range: model.getFullModelRange(),
+							text: stub.contents
+						}
+					],
+					() => null
+				);
+			}
+		} else {
+			create_file(stub, adapter);
+		}
+	}
+
+	for (const [name, model] of models) {
+		if (!stubs.some((stub) => stub.name === name)) {
+			model.dispose();
+			models.delete(name);
+		}
+	}
+	notify = true;
+}
+
+/**
+ * @param {import('$lib/types').FileStub} stub
+ * @param {() => import('$lib/types').Adapter} adapter
+ */
+function create_file(stub, adapter) {
+	// deep-copy stub so we can mutate it and not create a memory leak
+	stub = JSON.parse(JSON.stringify(stub));
+
+	const type = /** @type {string} */ (stub.basename.split('.').pop());
+
+	const model = monaco.editor.createModel(
+		stub.contents,
+		types[type] || type,
+		new monaco.Uri().with({ path: stub.name })
+	);
+
+	model.updateOptions({ tabSize: 2 });
+
+	model.onDidChangeContent(() => {
+		const contents = model.getValue();
+
+		if (notify_adapter) {
+			stub.contents = contents;
+			adapter()?.update([stub]);
+		}
+	});
+
+	models.set(stub.name, model);
+}
+
+/** @param {string} name */
+function get_model(name) {
+	return models.get(name);
+}
+
+export { monaco, get_model, create_file, update_files };