chore: make adapter interaction more robust

..to timing specific things by keeping track of current and next task

Author: dummdidumm

Diff for: src/lib/client/adapters/filesystem/index.js

@@ -1,8 +1,9 @@
 /**
  * @param {import('$lib/types').Stub[]} stubs
- * @returns {Promise<import('$lib/types').Adapter>}
+ * @param {(progress: number, status: string) => void} cb
+ * @returns {Promise<import('$lib/types').AdapterInternal>}
  */
-export async function create(stubs) {
+export async function create(stubs, cb) {
 	const res = await fetch('/backend', {
 		method: 'post',
 		headers: {
@@ -22,6 +23,8 @@ export async function create(stubs) {
 		}
 	});
 
+	cb(100, 'Ready');
+
 	return {
 		base: `http://localhost:${port}`,
 

Diff for: src/lib/client/adapters/webcontainer/index.js

@@ -6,13 +6,10 @@ import { ready } from '../common/index.js';
 /** @type {import('@webcontainer/api').WebContainer} Web container singleton */
 let vm;
 
-/** @type {Promise<import('$lib/types').Adapter>} */
-let promise;
-
 /**
  * @param {import('$lib/types').Stub[]} stubs
  * @param {(progress: number, status: string) => void} callback
- * @returns {Promise<import('$lib/types').Adapter>}
+ * @returns {Promise<import('$lib/types').AdapterInternal>}
  */
 export async function create(stubs, callback) {
 	if (/safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent)) {
@@ -21,22 +18,6 @@ export async function create(stubs, callback) {
 
 	callback(0, 'loading files');
 
-	if (!promise) {
-		promise = _create(stubs, callback);
-	} else {
-		const adapter = await promise;
-		await adapter.reset(stubs);
-	}
-
-	return promise;
-}
-
-/**
- * @param {import('$lib/types').Stub[]} stubs
- * @param {(progress: number, status: string) => void} callback
- * @returns {Promise<import('$lib/types').Adapter>}
- */
-async function _create(stubs, callback) {
 	/**
 	 * 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)

Diff for: src/lib/types/index.d.ts

@@ -16,14 +16,20 @@ export interface DirectoryStub {
 
 export type Stub = FileStub | DirectoryStub;
 
-export interface Adapter {
+export interface AdapterInternal {
 	base: string;
 	/** Returns `false` if the reset was in such a way that a reload of the iframe isn't needed */
 	reset(files: Array<Stub>): Promise<boolean>;
 	update(file: Array<FileStub>): Promise<boolean>;
 	destroy(): Promise<void>;
 }
 
+export interface Adapter extends AdapterInternal {
+	reset(files: Array<Stub>): Promise<boolean | 'cancelled'>;
+	update(file: Array<FileStub>): Promise<boolean | 'cancelled'>;
+	init: Promise<void>;
+}
+
 export interface Scope {
 	prefix: string;
 	depth: number;

Diff for: src/routes/tutorial/[slug]/+page.svelte

@@ -13,6 +13,7 @@
 	import Loading from './Loading.svelte';
 	import ScreenToggle from './ScreenToggle.svelte';
 	import Filetree from '$lib/components/filetree/Filetree.svelte';
+	import { create_adapter } from './adapter';
 
 	/** @type {import('./$types').PageData} */
 	export let data;
@@ -93,7 +94,7 @@
 		}
 	}
 
-	/** @type {import('$lib/types').Adapter | undefined} */
+	/** @type {import('$lib/types').Adapter} Will be defined after first afterNavigate */
 	let adapter;
 	/** @type {string[]} */
 	let history_bwd = [];
@@ -141,7 +142,7 @@
 
 			await reset_adapter($files);
 
-			if (adapter && path !== data.exercise.path) {
+			if (path !== data.exercise.path) {
 				path = data.exercise.path;
 				set_iframe_src(adapter.base + path);
 			}
@@ -162,14 +163,19 @@
 	async function reset_adapter(stubs) {
 		let reload_iframe = true;
 		if (adapter) {
-			reload_iframe = await adapter.reset(stubs);
+			const result = await adapter.reset(stubs);
+			if (result === 'cancelled') {
+				return;
+			} else {
+				reload_iframe = result;
+			}
 		} else {
-			const module = await import('$lib/client/adapters/webcontainer/index.js');
-
-			adapter = await module.create(stubs, (p, s) => {
+			const _adapter = create_adapter(stubs, (p, s) => {
 				progress = p;
 				status = s;
 			});
+			adapter = _adapter;
+			await _adapter.init;
 
 			set_iframe_src(adapter.base + path);
 		}
@@ -178,7 +184,7 @@
 			let called = false;
 
 			window.addEventListener('message', function handler(e) {
-				if (e.origin !== adapter?.base) return;
+				if (e.origin !== adapter.base) return;
 				if (e.data.type === 'ping') {
 					window.removeEventListener('message', handler);
 					called = true;
@@ -187,7 +193,7 @@
 			});
 
 			setTimeout(() => {
-				if (!called && adapter) {
+				if (!called) {
 					// 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 + path);
@@ -216,7 +222,7 @@
 		const stub = event.detail;
 		const index = $files.findIndex((s) => s.name === stub.name);
 		$files[index] = stub;
-		adapter?.update([stub]).then((reload) => {
+		adapter.update([stub]).then((reload) => {
 			if (reload) {
 				schedule_iframe_reload();
 			}
@@ -229,9 +235,7 @@
 	function schedule_iframe_reload() {
 		clearTimeout(reload_timeout);
 		reload_timeout = setTimeout(() => {
-			if (adapter) {
-				set_iframe_src(adapter.base + path);
-			}
+			set_iframe_src(adapter.base + path);
 		}, 1000);
 	}
 
@@ -283,7 +287,7 @@
 
 			clearTimeout(timeout);
 			timeout = setTimeout(() => {
-				if ((dev && !iframe) || !adapter) return;
+				if (dev && !iframe) return;
 
 				// we lost contact, refresh the page
 				loading = true;
@@ -330,11 +334,9 @@
 
 	/** @param {string} path */
 	function route_to(path) {
-		if (adapter) {
-			const url = new URL(path, adapter.base);
-			path = url.pathname + url.search + url.hash;
-			set_iframe_src(adapter.base + path);
-		}
+		const url = new URL(path, adapter.base);
+		path = url.pathname + url.search + url.hash;
+		set_iframe_src(adapter.base + path);
 	}
 
 	/** @param {string | null} new_path */
@@ -467,9 +469,7 @@
 						{path}
 						{loading}
 						on:refresh={() => {
-							if (adapter) {
-								set_iframe_src(adapter.base + path);
-							}
+							set_iframe_src(adapter.base + path);
 						}}
 						on:change={(e) => nav_to(e.detail.value)}
 						on:back={go_bwd}

Diff for: src/routes/tutorial/[slug]/adapter.js

@@ -0,0 +1,77 @@
+/**
+ * @param {import('$lib/types').Stub[]} initial_stubs
+ * @param {(progress: number, status: string) => void} callback
+ * @returns {import('$lib/types').Adapter}
+ */
+export function create_adapter(initial_stubs, callback) {
+	/**
+	 * @typedef {{ type: 'reset'; stubs: import('$lib/types').Stub[]; } | { type: 'update'; stubs: import('$lib/types').FileStub[]; }} State
+	 */
+
+	/** @type {State | undefined} */
+	let state;
+	/** @type {Promise<import('$lib/types').AdapterInternal>} */
+	let adapter_promise;
+	let adapter_base = '';
+
+	async function init() {
+		const module = await import('$lib/client/adapters/webcontainer/index.js');
+		adapter_promise = module.create(initial_stubs, callback);
+		adapter_base = (await adapter_promise).base;
+	}
+
+	// Keep track of what's currently running, and what's next
+	/** @type {Promise<boolean>} */
+	let current;
+	let token = {};
+	async function next() {
+		const current_token = (token = {});
+		await current;
+		if (current_token !== token || !state) return 'cancelled';
+
+		const _state = state;
+		state = undefined;
+		current = (async () => {
+			if (_state.type === 'reset') {
+				const adapter = await adapter_promise;
+				return await adapter.reset(_state.stubs);
+			} else {
+				const adapter = await adapter_promise;
+				return await adapter.update(_state.stubs);
+			}
+		})();
+
+		return current;
+	}
+
+	current = init().then(() => true);
+
+	return {
+		init: current.then(() => {}),
+		get base() {
+			return adapter_base;
+		},
+		update: async (stubs) => {
+			if (state) {
+				// add new stubs (which have up-to-date content) to existing stubs
+				const new_stubs = new Set(stubs.map((stub) => stub.name));
+				state = {
+					...state,
+					// @ts-expect-error TS doesn't understand that the union type will be well-formed
+					stubs: state.stubs.filter((stub) => !new_stubs.has(stub.name)).concat(stubs)
+				};
+			} else {
+				state = { type: 'update', stubs };
+			}
+			return next();
+		},
+		reset: async (stubs) => {
+			state = { type: 'reset', stubs };
+			return next();
+		},
+		destroy: async () => {
+			const adapter = await adapter_promise;
+			return adapter.destroy();
+		}
+	};
+}