[fix] make webcontainer integration more robust (sveltejs#109)

- some console logs to help debugging if needed
- add the wait time with the "reset iframe" hack for each time we (re)set the adapter
- listen to server-ready event during reset, because for some reason it's fired then, too. This avoid a race condition where Vite could be requested too early, resulting in a timeout

Author: dummdidumm

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

@@ -26,24 +26,34 @@ export async function create(stubs) {
 
 	const base = await new Promise(async (fulfil, reject) => {
 		setTimeout(() => {
-			reject(new Error('Timed out'));
+			reject(new Error('Timed out starting WebContainer'));
 		}, 15000);
 
+		console.log('loading webcontainer');
+
 		const WebContainer = await load();
 
+		console.log('booting webcontainer');
+
 		vm = await WebContainer.boot();
 
-		vm.on('error', (error) => {
+		const error_unsub = vm.on('error', (error) => {
+			error_unsub();
 			reject(new Error(error.message));
 		});
 
-		vm.on('server-ready', (port, base) => {
+		const ready_unsub = vm.on('server-ready', (port, base) => {
+			ready_unsub();
 			console.log(`server ready on port ${port} at ${performance.now()}: ${base}`);
 			fulfil(base);
 		});
 
+		console.log('loading files');
+
 		await vm.loadFiles(tree);
 
+		console.log('unpacking modules');
+
 		const unzip = await vm.run(
 			{
 				command: 'node',
@@ -60,6 +70,8 @@ export async function create(stubs) {
 			reject(new Error('Failed to initialize WebContainer'));
 		}
 
+		console.log('starting dev server');
+
 		await vm.run({ command: 'chmod', args: ['a+x', 'node_modules/vite/bin/vite.js'] });
 
 		await vm.run(
@@ -86,6 +98,24 @@ export async function create(stubs) {
 				}
 			}
 
+			// 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();
+					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}`);
+					fulfil(undefined);
+				});
+
+				setTimeout(() => reject(new Error('Timed out resetting WebContainer')), 10000);
+			});
+
 			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')
@@ -107,6 +137,8 @@ export async function create(stubs) {
 
 			await vm.loadFiles(convert_stubs_to_tree(stubs));
 
+			await promise;
+
 			await new Promise((f) => setTimeout(f, 200)); // wait for chokidar
 		},
 

src/routes/tutorial/[slug]/+page.svelte

@@ -120,62 +120,68 @@
 
 		completed = false;
 
-		load_adapter();
+		load_exercise();
 	});
 
-	async function load_adapter() {
-		clearTimeout(timeout);
-		loading = true;
-
+	/**
+	 * Loads the adapter initially or resets it. This method can throw.
+	 * @param {import('$lib/types').Stub[]} stubs
+	 */
+	async function reset_adapter(stubs) {
 		if (adapter) {
-			await adapter.reset(Object.values(b));
+			await adapter.reset(stubs);
+			return adapter;
 		} else {
 			const module = import.meta.env.VITE_USE_FILESYSTEM
 				? await import('$lib/client/adapters/filesystem/index.js')
 				: await import('$lib/client/adapters/webcontainer/index.js');
 
-			try {
-				adapter = await module.create(Object.values(b));
-			} catch (e) {
-				error = /** @type {Error} */ (e);
-				return;
-			}
+			adapter = await module.create(stubs);
 		}
 
 		set_iframe_src(adapter.base);
 
-		try {
-			await new Promise((fulfil, reject) => {
-				let called = false;
-
-				window.addEventListener('message', function handler(e) {
-					if (e.origin !== adapter?.base) return;
-					if (e.data.type === 'ping') {
-						window.removeEventListener('message', handler);
-						called = true;
-						fulfil(undefined);
-					}
-				});
-
-				setTimeout(() => {
-					if (!called && adapter) {
-						// Updating the iframe too soon sometimes results in a blank screen,
-						// so we try again after a short delay if we haven't heard back
-						set_iframe_src(adapter.base);
-					}
-				}, 5000);
+		await new Promise((fulfil, reject) => {
+			let called = false;
 
-				setTimeout(() => {
-					if (!called) {
-						reject(new Error('Timed out'));
-					}
-				}, 10000);
+			window.addEventListener('message', function handler(e) {
+				if (e.origin !== adapter?.base) return;
+				if (e.data.type === 'ping') {
+					window.removeEventListener('message', handler);
+					called = true;
+					fulfil(undefined);
+				}
 			});
 
+			setTimeout(() => {
+				if (!called && adapter) {
+					// Updating the iframe too soon sometimes results in a blank screen,
+					// so we try again after a short delay if we haven't heard back
+					set_iframe_src(adapter.base);
+				}
+			}, 5000);
+
+			setTimeout(() => {
+				if (!called) {
+					reject(new Error('Timed out (re)setting adapter'));
+				}
+			}, 10000);
+		});
+
+		return adapter;
+	}
+
+	async function load_exercise() {
+		try {
+			clearTimeout(timeout);
+			loading = true;
+
+			// Load expected output first so we can compare it to the actual output to determine when it's completed
+			let adapter = await reset_adapter(Object.values(b));
 			expected = await get_transformed_modules(data.section.scope.prefix, Object.values(b));
 
 			const stubs = Object.values(data.section.a);
-			await adapter.reset(stubs);
+			adapter = await reset_adapter(stubs);
 			const actual = await get_transformed_modules(data.section.scope.prefix, stubs);
 
 			for (const [name, transformed] of expected.entries()) {
@@ -187,6 +193,7 @@
 			loading = false;
 			initial = false;
 		} catch (e) {
+			loading = false;
 			error = /** @type {Error} */ (e);
 			console.error(e);
 		}
@@ -241,7 +248,7 @@
 			});
 
 			setTimeout(() => {
-				reject(new Error('Timed out'));
+				reject(new Error('Timed out fetching files from Vite'));
 			}, 5000);
 		});
 	}
@@ -426,7 +433,7 @@
 								{error}
 								on:reload={async () => {
 									error = null;
-									load_adapter();
+									load_exercise();
 								}}
 							/>
 						{/if}