[fix] more robust web container init

guard against people switching the tutorial chapter while the web container boots

Author: dummdidumm

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

@@ -2,12 +2,20 @@ import { load } from '@webcontainer/api';
 import base64 from 'base64-js';
 import { ready } from '../common/index.js';
 
-/** @type {import('@webcontainer/api').WebContainer} */
+/** @type {import('@webcontainer/api').WebContainer} Web container singleton */
 let vm;
 /** Keep track of startup progress, so we don't repeat previous steps in case of a timeout */
 let step = 0;
-/** @type {string} */
+/** @type {string} path to the web container server instance */
 let base;
+/**
+ * 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)
+ * @type {Promise<any> | undefined}
+ */
+let running;
+/** @type {Set<string>} Paths of the currently loaded file stubs */
+let current = new Set();
 
 /**
  * @param {import('$lib/types').Stub[]} stubs
@@ -28,7 +36,9 @@ export async function create(stubs) {
 		throw new Error('WebContainers are not supported by Safari');
 	}
 
-	base = await new Promise(async (fulfil, reject) => {
+	await running; // wait for any previous create to finish
+
+	const init = new Promise(async (fulfil, reject) => {
 		if (base) {
 			// startup was successful in the meantime
 			fulfil(base);
@@ -75,6 +85,8 @@ export async function create(stubs) {
 			console.log('loading files');
 
 			await vm.loadFiles(tree);
+
+			current = new Set(stub_filenames(stubs));
 		}
 
 		if (step < 2) {
@@ -120,131 +132,131 @@ export async function create(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 = Promise.resolve();
+	running = init.catch(() => {});
+	base = await init;
 
-	return {
-		base,
+	if (stub_filenames(stubs).some((name) => !current.has(name))) {
+		await reset(stubs);
+	}
 
-		/**
-		 * Deletes old files and adds new ones
-		 * @param {import('$lib/types').Stub[]} stubs
-		 */
-		async reset(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') {
-					old.delete(stub.name);
-				}
+	/**
+	 * Deletes old files and adds new ones
+	 * @param {import('$lib/types').Stub[]} stubs
+	 */
+	async function reset(stubs) {
+		await running;
+		/** @type {Function} */
+		let resolve = () => {};
+		running = new Promise((fulfil) => (resolve = fulfil));
+
+		const old = current;
+		current = new Set(stub_filenames(stubs));
+
+		for (const stub of stubs) {
+			if (stub.type === 'file') {
+				old.delete(stub.name);
 			}
+		}
 
-			// For some reason, server-ready is fired again on resetting the files here.
-			// We need to wait for it to finish before we can continue, else we might
-			// request files from Vite before it's ready, leading to a timeout.
-			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);
-				});
+		// For some reason, server-ready is fired again on resetting the files here.
+		// We need to wait for it to finish before we can continue, else we might
+		// request files from Vite before it's ready, leading to a timeout.
+		const promise = new Promise((fulfil, reject) => {
+			const error_unsub = vm.on('error', (error) => {
+				error_unsub();
+				resolve();
+				reject(new Error(error.message));
+			});
 
-				setTimeout(() => {
-					resolve();
-					reject(new Error('Timed out resetting WebContainer'));
-				}, 10000);
+			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);
 			});
 
-			for (const file of old) {
-				// TODO this fails with a cryptic error
-				// index.svelte:155 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'rmSync')
-				// at Object.rm (webcontainer.e2e246a845f9e80283581d6b944116e399af6950.js:6:121171)
-				// at MessagePort._0x4ec3f4 (webcontainer.e2e246a845f9e80283581d6b944116e399af6950.js:6:110957)
-				// at MessagePort.nrWrapper (headless:5:29785)
-				// await vm.fs.rm(file);
-
-				// temporary workaround
-				try {
-					await vm.run({
-						command: 'node',
-						args: ['-e', `fs.rmSync('${file.slice(1)}')`]
-					});
-				} catch (e) {
-					console.error(e);
-				}
-			}
+			setTimeout(() => {
+				resolve();
+				reject(new Error('Timed out resetting WebContainer'));
+			}, 10000);
+		});
 
-			await vm.loadFiles(convert_stubs_to_tree(stubs));
+		for (const file of old) {
+			// TODO this fails with a cryptic error
+			// index.svelte:155 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'rmSync')
+			// at Object.rm (webcontainer.e2e246a845f9e80283581d6b944116e399af6950.js:6:121171)
+			// at MessagePort._0x4ec3f4 (webcontainer.e2e246a845f9e80283581d6b944116e399af6950.js:6:110957)
+			// at MessagePort.nrWrapper (headless:5:29785)
+			// await vm.fs.rm(file);
+
+			// temporary workaround
+			try {
+				await vm.run({
+					command: 'node',
+					args: ['-e', `fs.rmSync('${file.slice(1)}')`]
+				});
+			} catch (e) {
+				console.error(e);
+			}
+		}
 
-			await promise;
+		await vm.loadFiles(convert_stubs_to_tree(stubs));
 
-			await new Promise((f) => setTimeout(f, 200)); // wait for chokidar
+		await promise;
 
-			resolve();
-		},
+		await new Promise((f) => setTimeout(f, 200)); // wait for chokidar
 
-		/**
-		 * Loads new files but keeps the old ones
-		 * @param {import('$lib/types').FileStub[]} stubs
-		 */
-		async update(stubs) {
-			await running;
+		resolve();
+	}
 
-			/** @type {import('@webcontainer/api').FileSystemTree} */
-			const root = {};
+	/**
+	 * Loads new files but keeps the old ones
+	 * @param {import('$lib/types').FileStub[]} stubs
+	 */
+	async function update(stubs) {
+		await running;
 
-			for (const stub of stubs) {
-				let tree = root;
+		/** @type {import('@webcontainer/api').FileSystemTree} */
+		const root = {};
 
-				const path = stub.name.split('/').slice(1);
-				const basename = /** @type {string} */ (path.pop());
+		for (const stub of stubs) {
+			let tree = root;
 
-				for (const part of path) {
-					if (!tree[part]) {
-						/** @type {import('@webcontainer/api').FileSystemTree} */
-						const directory = {};
+			const path = stub.name.split('/').slice(1);
+			const basename = /** @type {string} */ (path.pop());
 
-						tree[part] = {
-							directory
-						};
-					}
+			for (const part of path) {
+				if (!tree[part]) {
+					/** @type {import('@webcontainer/api').FileSystemTree} */
+					const directory = {};
 
-					tree = /** @type {import('@webcontainer/api').DirectoryEntry} */ (tree[part]).directory;
+					tree[part] = {
+						directory
+					};
 				}
 
-				tree[basename] = to_file(stub);
+				tree = /** @type {import('@webcontainer/api').DirectoryEntry} */ (tree[part]).directory;
 			}
 
-			await vm.loadFiles(root);
+			tree[basename] = to_file(stub);
+		}
 
-			await new Promise((f) => setTimeout(f, 200)); // wait for chokidar
-		},
+		await vm.loadFiles(root);
 
-		async destroy() {
-			vm.teardown();
-			// @ts-ignore
-			vm = null;
-		}
+		await new Promise((f) => setTimeout(f, 200)); // wait for chokidar
+	}
+
+	async function destroy() {
+		vm.teardown();
+		// @ts-ignore
+		vm = null;
+	}
+
+	return {
+		base,
+		reset,
+		update,
+		destroy
 	};
 }
 
@@ -293,3 +305,11 @@ function to_file(stub) {
 		file: { contents }
 	};
 }
+
+/**
+ *
+ * @param {import('$lib/types').Stub[]} stubs
+ */
+function stub_filenames(stubs) {
+	return stubs.filter((stub) => stub.type === 'file').map((stub) => stub.name);
+}