From b9ffe7ffa0d99471aecf33844e853e9051bc2522 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Fri, 10 Mar 2023 12:51:44 -0500
Subject: [PATCH 01/28] tidy up

---
 src/routes/tutorial/[slug]/Output.svelte | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte
index 7e9152b42..0a3d9bc68 100644
--- a/src/routes/tutorial/[slug]/Output.svelte
+++ b/src/routes/tutorial/[slug]/Output.svelte
@@ -76,12 +76,11 @@
 				reload_iframe = result || state.status === 'switch';
 			}
 		} else {
-			const _adapter = create_adapter(state.stubs, (p, s) => {
+			adapter = create_adapter(state.stubs, (p, s) => {
 				progress = p;
 				status = s;
 			});
-			adapter = _adapter;
-			await _adapter.init;
+			await adapter.init;
 
 			set_iframe_src(adapter.base + path);
 		}

From ffde120ae3f3c17cc36ac453d6f3ab4e63cc0451 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Fri, 10 Mar 2023 14:53:30 -0500
Subject: [PATCH 02/28] restart process immediately when it dies

---
 src/lib/client/adapters/webcontainer/index.js | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/lib/client/adapters/webcontainer/index.js b/src/lib/client/adapters/webcontainer/index.js
index 0ef49a1d4..927f95aa3 100644
--- a/src/lib/client/adapters/webcontainer/index.js
+++ b/src/lib/client/adapters/webcontainer/index.js
@@ -89,13 +89,7 @@ export async function create(stubs, callback) {
 			process.output.pipeTo(console_stream('dev'));
 
 			// keep restarting dev server (can crash in case of illegal +files for example)
-			process.exit.then((code) => {
-				if (code !== 0) {
-					setTimeout(() => {
-						run_dev();
-					}, 2000);
-				}
-			});
+			process.exit.then(run_dev);
 		}
 	});
 

From cfe1d2f4ac87b863cdfb34ab326ea5549c786fc5 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Fri, 10 Mar 2023 15:12:40 -0500
Subject: [PATCH 03/28] create adapter in onMount

---
 .../tutorial/common/src/routes/+page.svelte   |  0
 src/lib/client/adapters/webcontainer/index.js |  8 +++----
 src/routes/tutorial/[slug]/Output.svelte      | 24 ++++++++-----------
 src/routes/tutorial/[slug]/adapter.js         |  5 ++--
 4 files changed, 15 insertions(+), 22 deletions(-)
 create mode 100644 content/tutorial/common/src/routes/+page.svelte

diff --git a/content/tutorial/common/src/routes/+page.svelte b/content/tutorial/common/src/routes/+page.svelte
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/lib/client/adapters/webcontainer/index.js b/src/lib/client/adapters/webcontainer/index.js
index 927f95aa3..4906994c8 100644
--- a/src/lib/client/adapters/webcontainer/index.js
+++ b/src/lib/client/adapters/webcontainer/index.js
@@ -16,11 +16,10 @@ function console_stream(label) {
 }
 
 /**
- * @param {import('$lib/types').Stub[]} stubs
  * @param {(progress: number, status: string) => void} callback
  * @returns {Promise<import('$lib/types').AdapterInternal>}
  */
-export async function create(stubs, callback) {
+export async function create(callback) {
 	if (/safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent)) {
 		throw new Error('WebContainers are not supported by Safari');
 	}
@@ -35,7 +34,7 @@ export async function create(stubs, callback) {
 	let running;
 
 	/** Paths and contents of the currently loaded file stubs */
-	let current_stubs = stubs_to_map(stubs);
+	let current_stubs = stubs_to_map([]);
 
 	/** @type {boolean} Track whether there was an error from vite dev server */
 	let vite_error = false;
@@ -51,8 +50,7 @@ export async function create(stubs, callback) {
 		},
 		'unzip.cjs': {
 			file: { contents: common.unzip }
-		},
-		...convert_stubs_to_tree(stubs)
+		}
 	});
 
 	callback(3 / 5, 'unzipping files');
diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte
index 0a3d9bc68..6328eeb41 100644
--- a/src/routes/tutorial/[slug]/Output.svelte
+++ b/src/routes/tutorial/[slug]/Output.svelte
@@ -25,6 +25,11 @@
 	let adapter;
 
 	onMount(() => {
+		adapter = create_adapter((p, s) => {
+			progress = p;
+			status = s;
+		});
+
 		const unsub = state.subscribe(async (state) => {
 			if (state.status === 'set' || state.status === 'switch') {
 				loading = true;
@@ -68,21 +73,12 @@
 	 */
 	async function reset_adapter(state) {
 		let reload_iframe = true;
-		if (adapter) {
-			const result = await adapter.reset(state.stubs);
-			if (result === 'cancelled') {
-				return;
-			} else {
-				reload_iframe = result || state.status === 'switch';
-			}
-		} else {
-			adapter = create_adapter(state.stubs, (p, s) => {
-				progress = p;
-				status = s;
-			});
-			await adapter.init;
 
-			set_iframe_src(adapter.base + path);
+		const result = await adapter.reset(state.stubs);
+		if (result === 'cancelled') {
+			return;
+		} else {
+			reload_iframe = result || state.status === 'switch';
 		}
 
 		await new Promise((fulfil, reject) => {
diff --git a/src/routes/tutorial/[slug]/adapter.js b/src/routes/tutorial/[slug]/adapter.js
index d9124ffe3..88168a4ab 100644
--- a/src/routes/tutorial/[slug]/adapter.js
+++ b/src/routes/tutorial/[slug]/adapter.js
@@ -1,9 +1,8 @@
 /**
- * @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) {
+export function create_adapter(callback) {
 	/**
 	 * @typedef {{ type: 'reset'; stubs: import('$lib/types').Stub[]; } | { type: 'update'; stubs: import('$lib/types').FileStub[]; }} State
 	 */
@@ -16,7 +15,7 @@ export function create_adapter(initial_stubs, callback) {
 
 	async function init() {
 		const module = await import('$lib/client/adapters/webcontainer/index.js');
-		adapter_promise = module.create(initial_stubs, callback);
+		adapter_promise = module.create(callback);
 		adapter_base = (await adapter_promise).base;
 	}
 

From 0945dc5370ff8b04d4b3558dfcda46ba738ed123 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Fri, 10 Mar 2023 15:25:26 -0500
Subject: [PATCH 04/28] make adapter a singleton

---
 src/lib/types/index.d.ts                 |  1 -
 src/routes/tutorial/[slug]/Output.svelte | 18 ++----------------
 src/routes/tutorial/[slug]/adapter.js    | 15 ++++++++++++++-
 3 files changed, 16 insertions(+), 18 deletions(-)

diff --git a/src/lib/types/index.d.ts b/src/lib/types/index.d.ts
index 394f858be..5e4f74fae 100644
--- a/src/lib/types/index.d.ts
+++ b/src/lib/types/index.d.ts
@@ -27,7 +27,6 @@ export interface AdapterInternal {
 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 {
diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte
index 6328eeb41..b088c8b06 100644
--- a/src/routes/tutorial/[slug]/Output.svelte
+++ b/src/routes/tutorial/[slug]/Output.svelte
@@ -4,7 +4,7 @@
 	import { browser, dev } from '$app/environment';
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
-	import { create_adapter } from './adapter';
+	import { adapter, progress } from './adapter';
 	import { state } from './state.js';
 
 	/** @type {string} */
@@ -18,18 +18,7 @@
 	/** @type {Error | null} */
 	let error = null;
 
-	let progress = 0;
-	let status = 'initialising';
-
-	/** @type {import('$lib/types').Adapter} Will be defined after first afterNavigate */
-	let adapter;
-
 	onMount(() => {
-		adapter = create_adapter((p, s) => {
-			progress = p;
-			status = s;
-		});
-
 		const unsub = state.subscribe(async (state) => {
 			if (state.status === 'set' || state.status === 'switch') {
 				loading = true;
@@ -54,9 +43,6 @@
 
 		function destroy() {
 			unsub();
-			if (adapter) {
-				adapter.destroy();
-			}
 		}
 
 		document.addEventListener('pagehide', destroy);
@@ -184,7 +170,7 @@
 	{/if}
 
 	{#if loading || error}
-		<Loading {initial} {error} {progress} {status} />
+		<Loading {initial} {error} progress={$progress.value} status={$progress.text} />
 	{/if}
 </div>
 
diff --git a/src/routes/tutorial/[slug]/adapter.js b/src/routes/tutorial/[slug]/adapter.js
index 88168a4ab..7b8c86060 100644
--- a/src/routes/tutorial/[slug]/adapter.js
+++ b/src/routes/tutorial/[slug]/adapter.js
@@ -1,3 +1,17 @@
+import { writable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+export const progress = writable({
+	value: 0,
+	text: 'initialising'
+});
+
+/** @type {import('$lib/types').Adapter} */
+// @ts-expect-error
+export const adapter = browser
+	? create_adapter((value, text) => { progress.set({ value, text }); })
+	: undefined;
+
 /**
  * @param {(progress: number, status: string) => void} callback
  * @returns {import('$lib/types').Adapter}
@@ -46,7 +60,6 @@ export function create_adapter(callback) {
 	current = init().then(() => true);
 
 	return {
-		init: current.then(() => {}),
 		get base() {
 			return adapter_base;
 		},

From 08de011e35b96e16fe496ff0db5c7f1a567ffb1e Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Fri, 10 Mar 2023 16:01:41 -0500
Subject: [PATCH 05/28] WIP refactor

---
 src/routes/tutorial/[slug]/Output.svelte |  29 +++----
 src/routes/tutorial/[slug]/adapter.js    | 104 +++++++----------------
 2 files changed, 42 insertions(+), 91 deletions(-)

diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte
index b088c8b06..a3060eea4 100644
--- a/src/routes/tutorial/[slug]/Output.svelte
+++ b/src/routes/tutorial/[slug]/Output.svelte
@@ -4,7 +4,7 @@
 	import { browser, dev } from '$app/environment';
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
-	import { adapter, progress } from './adapter';
+	import { base, reset, update, progress } from './adapter';
 	import { state } from './state.js';
 
 	/** @type {string} */
@@ -34,7 +34,7 @@
 
 				loading = false;
 			} else if (state.status === 'update' && state.last_updated) {
-				const reload = await adapter.update([state.last_updated]);
+				const reload = await update([state.last_updated]);
 				if (reload === true) {
 					schedule_iframe_reload();
 				}
@@ -60,7 +60,7 @@
 	async function reset_adapter(state) {
 		let reload_iframe = true;
 
-		const result = await adapter.reset(state.stubs);
+		const result = await reset(state.stubs);
 		if (result === 'cancelled') {
 			return;
 		} else {
@@ -71,7 +71,7 @@
 			let called = false;
 
 			window.addEventListener('message', function handler(e) {
-				if (e.origin !== adapter.base) return;
+				if (e.origin !== $base) return;
 				if (e.data.type === 'ping') {
 					window.removeEventListener('message', handler);
 					called = true;
@@ -83,7 +83,7 @@
 				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);
+					set_iframe_src($base + path);
 				}
 			}, 5000);
 
@@ -96,10 +96,8 @@
 
 		if (reload_iframe) {
 			await new Promise((fulfil) => setTimeout(fulfil, 200));
-			set_iframe_src(adapter.base + path);
+			set_iframe_src($base + path);
 		}
-
-		return adapter;
 	}
 
 	/** @type {any} */
@@ -107,7 +105,7 @@
 	function schedule_iframe_reload() {
 		clearTimeout(reload_timeout);
 		reload_timeout = setTimeout(() => {
-			set_iframe_src(adapter.base + path);
+			set_iframe_src($base + path);
 		}, 1000);
 	}
 
@@ -116,8 +114,7 @@
 
 	/** @param {MessageEvent} e */
 	async function handle_message(e) {
-		if (!adapter) return;
-		if (e.origin !== adapter.base) return;
+		if (e.origin !== $base) return;
 
 		if (e.data.type === 'ping') {
 			path = e.data.data.path ?? path;
@@ -128,7 +125,7 @@
 
 				// we lost contact, refresh the page
 				loading = true;
-				set_iframe_src(adapter.base + path);
+				set_iframe_src($base + path);
 				loading = false;
 			}, 1000);
 		} else if (e.data.type === 'ping-pause') {
@@ -153,13 +150,13 @@
 	{path}
 	{loading}
 	on:refresh={() => {
-		set_iframe_src(adapter.base + path);
+		set_iframe_src($base + path);
 	}}
 	on:change={(e) => {
-		if (adapter) {
-			const url = new URL(e.detail.value, adapter.base);
+		if ($base) {
+			const url = new URL(e.detail.value, $base);
 			path = url.pathname + url.search + url.hash;
-			set_iframe_src(adapter.base + path);
+			set_iframe_src($base + path);
 		}
 	}}
 />
diff --git a/src/routes/tutorial/[slug]/adapter.js b/src/routes/tutorial/[slug]/adapter.js
index 7b8c86060..9832f1ea7 100644
--- a/src/routes/tutorial/[slug]/adapter.js
+++ b/src/routes/tutorial/[slug]/adapter.js
@@ -6,84 +6,38 @@ export const progress = writable({
 	text: 'initialising'
 });
 
-/** @type {import('$lib/types').Adapter} */
-// @ts-expect-error
-export const adapter = browser
-	? create_adapter((value, text) => { progress.set({ value, text }); })
-	: undefined;
+/** @type {import('svelte/store').Writable<string | null>} */
+export const base = writable(null);
 
-/**
- * @param {(progress: number, status: string) => void} callback
- * @returns {import('$lib/types').Adapter}
- */
-export function create_adapter(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(callback);
-		adapter_base = (await adapter_promise).base;
-	}
+let ready = new Promise(() => {});
 
-	// 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';
+if (browser) {
+	ready = new Promise(async (fulfil, reject) => {
+		try {
+			const module = await import('$lib/client/adapters/webcontainer/index.js');
+			const adapter = await module.create((value, text) => { progress.set({ value, text }); });
 
-		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);
-			}
-		})();
+			base.set(adapter.base);
 
-		return current;
-	}
-
-	current = init().then(() => true);
-
-	return {
-		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();
+			fulfil(adapter);
+		} catch (error) {
+			reject(error);
 		}
-	};
+	})
 }
+
+/**
+ * @param {import('$lib/types').Stub[]} files 
+ */
+export async function reset(files) {
+	const adapter = await ready;
+	return adapter.reset(files);
+}
+
+/**
+ * @param {import('$lib/types').Stub[]} files 
+ */
+export async function update(files) {
+	const adapter = await ready;
+	return adapter.update(files);
+}
\ No newline at end of file

From 6eab3c51b1b8e6dbd1b2aaf567114c0a258e67c3 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Fri, 10 Mar 2023 16:30:11 -0500
Subject: [PATCH 06/28] add an event mechanism for reloading iframe

---
 src/routes/tutorial/[slug]/adapter.js | 38 +++++++++++++++++++++++++--
 1 file changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/routes/tutorial/[slug]/adapter.js b/src/routes/tutorial/[slug]/adapter.js
index 9832f1ea7..236c1dedb 100644
--- a/src/routes/tutorial/[slug]/adapter.js
+++ b/src/routes/tutorial/[slug]/adapter.js
@@ -18,6 +18,7 @@ if (browser) {
 			const adapter = await module.create((value, text) => { progress.set({ value, text }); });
 
 			base.set(adapter.base);
+			publish('reload');
 
 			fulfil(adapter);
 		} catch (error) {
@@ -26,12 +27,41 @@ if (browser) {
 	})
 }
 
+/** @typedef {'reload'} EventName */
+
+/** @type {Map<EventName, Set<() => void>>} */
+let subscriptions = new Map([['reload', new Set()]]);
+
+/**
+ * 
+ * @param {EventName} event 
+ * @param {() => void} callback 
+ */
+export function subscribe(event, callback) {
+	subscriptions.get(event)?.add(callback);
+
+	return () =>{
+		subscriptions.get(event)?.delete(callback);
+	};
+}
+
+/**
+ * @param {EventName} event 
+ */
+function publish(event) {
+	subscriptions.get(event)?.forEach(fn => fn());
+}
+
 /**
  * @param {import('$lib/types').Stub[]} files 
  */
 export async function reset(files) {
 	const adapter = await ready;
-	return adapter.reset(files);
+	const should_reload = await adapter.reset(files);
+
+	if (should_reload) {
+		publish('reload');
+	}
 }
 
 /**
@@ -39,5 +69,9 @@ export async function reset(files) {
  */
 export async function update(files) {
 	const adapter = await ready;
-	return adapter.update(files);
+	const should_reload = await adapter.update(files);
+
+	if (should_reload) {
+		publish('reload');
+	}
 }
\ No newline at end of file

From 6e1aca271bd6c972042a80641497a6d960cc88ae Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Fri, 10 Mar 2023 16:50:44 -0500
Subject: [PATCH 07/28] call adapter methods directly

---
 src/routes/tutorial/[slug]/Output.svelte | 92 ++----------------------
 src/routes/tutorial/[slug]/adapter.js    | 21 ++++--
 src/routes/tutorial/[slug]/state.js      | 15 +++-
 3 files changed, 35 insertions(+), 93 deletions(-)

diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte
index a3060eea4..052a4e31d 100644
--- a/src/routes/tutorial/[slug]/Output.svelte
+++ b/src/routes/tutorial/[slug]/Output.svelte
@@ -4,8 +4,7 @@
 	import { browser, dev } from '$app/environment';
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
-	import { base, reset, update, progress } from './adapter';
-	import { state } from './state.js';
+	import { base, error, progress, subscribe } from './adapter';
 
 	/** @type {string} */
 	export let path;
@@ -15,34 +14,13 @@
 	let loading = true;
 	let initial = true;
 
-	/** @type {Error | null} */
-	let error = null;
-
 	onMount(() => {
-		const unsub = state.subscribe(async (state) => {
-			if (state.status === 'set' || state.status === 'switch') {
-				loading = true;
-
-				try {
-					clearTimeout(timeout);
-					await reset_adapter(state);
-					initial = false;
-				} catch (e) {
-					error = /** @type {Error} */ (e);
-					console.error(e);
-				}
-
-				loading = false;
-			} else if (state.status === 'update' && state.last_updated) {
-				const reload = await update([state.last_updated]);
-				if (reload === true) {
-					schedule_iframe_reload();
-				}
-			}
+		const unsubscribe = subscribe('reload', () => {
+			set_iframe_src($base + path);
 		});
 
 		function destroy() {
-			unsub();
+			unsubscribe();
 		}
 
 		document.addEventListener('pagehide', destroy);
@@ -53,62 +31,6 @@
 		clearTimeout(timeout);
 	});
 
-	/**
-	 * Loads the adapter initially or resets it. This method can throw.
-	 * @param {import('./state').State} state
-	 */
-	async function reset_adapter(state) {
-		let reload_iframe = true;
-
-		const result = await reset(state.stubs);
-		if (result === 'cancelled') {
-			return;
-		} else {
-			reload_iframe = result || state.status === 'switch';
-		}
-
-		await new Promise((fulfil, reject) => {
-			let called = false;
-
-			window.addEventListener('message', function handler(e) {
-				if (e.origin !== $base) return;
-				if (e.data.type === 'ping') {
-					window.removeEventListener('message', handler);
-					called = true;
-					fulfil(undefined);
-				}
-			});
-
-			setTimeout(() => {
-				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($base + path);
-				}
-			}, 5000);
-
-			setTimeout(() => {
-				if (!called) {
-					reject(new Error('Timed out (re)setting adapter'));
-				}
-			}, 10000);
-		});
-
-		if (reload_iframe) {
-			await new Promise((fulfil) => setTimeout(fulfil, 200));
-			set_iframe_src($base + path);
-		}
-	}
-
-	/** @type {any} */
-	let reload_timeout;
-	function schedule_iframe_reload() {
-		clearTimeout(reload_timeout);
-		reload_timeout = setTimeout(() => {
-			set_iframe_src($base + path);
-		}, 1000);
-	}
-
 	/** @type {any} */
 	let timeout;
 
@@ -148,7 +70,7 @@
 <svelte:window on:message={handle_message} />
 <Chrome
 	{path}
-	{loading}
+	loading={$progress.value < 1}
 	on:refresh={() => {
 		set_iframe_src($base + path);
 	}}
@@ -166,8 +88,8 @@
 		<iframe bind:this={iframe} title="Output" />
 	{/if}
 
-	{#if loading || error}
-		<Loading {initial} {error} progress={$progress.value} status={$progress.text} />
+	{#if $progress.value < 1 || $error}
+		<Loading {initial} error={$error} progress={$progress.value} status={$progress.text} />
 	{/if}
 </div>
 
diff --git a/src/routes/tutorial/[slug]/adapter.js b/src/routes/tutorial/[slug]/adapter.js
index 236c1dedb..e650fb881 100644
--- a/src/routes/tutorial/[slug]/adapter.js
+++ b/src/routes/tutorial/[slug]/adapter.js
@@ -9,13 +9,18 @@ export const progress = writable({
 /** @type {import('svelte/store').Writable<string | null>} */
 export const base = writable(null);
 
+/** @type {import('svelte/store').Writable<Error | null>} */
+export const error = writable(null);
+
 let ready = new Promise(() => {});
 
 if (browser) {
 	ready = new Promise(async (fulfil, reject) => {
 		try {
 			const module = await import('$lib/client/adapters/webcontainer/index.js');
-			const adapter = await module.create((value, text) => { progress.set({ value, text }); });
+			const adapter = await module.create((value, text) => {
+				progress.set({ value, text });
+			});
 
 			base.set(adapter.base);
 			publish('reload');
@@ -56,11 +61,17 @@ function publish(event) {
  * @param {import('$lib/types').Stub[]} files 
  */
 export async function reset(files) {
-	const adapter = await ready;
-	const should_reload = await adapter.reset(files);
+	try {
+		const adapter = await ready;
+		const should_reload = await adapter.reset(files);
 
-	if (should_reload) {
-		publish('reload');
+		if (should_reload) {
+			publish('reload');
+		}
+
+		error.set(null);
+	} catch (e) {
+		error.set(/** @type {Error} */ (e));
 	}
 }
 
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index 575fd0b65..9078e8181 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -1,4 +1,5 @@
 import { derived, writable } from 'svelte/store';
+import * as adapter from './adapter.js';
 
 /**
  * @typedef {{
@@ -51,9 +52,11 @@ export const state = {
 			}),
 			last_updated: file
 		}));
+
+		adapter.update([file]);
 	},
 
-	/** @param {import('$lib/types').Stub[]} [stubs] */
+	/** @param {import('$lib/types').Stub[]} stubs */
 	set_stubs: (stubs) => {
 		update((state) => ({
 			...state,
@@ -61,6 +64,8 @@ export const state = {
 			stubs: stubs ?? state.stubs,
 			last_updated: undefined
 		}));
+
+		adapter.reset(stubs);
 	},
 
 	/** @param {import('$lib/types').Exercise} exercise */
@@ -110,11 +115,13 @@ export const state = {
 			}
 		}
 
+		const stubs = Object.values(exercise.a)
+
 		set({
 			status: 'switch',
-			stubs: Object.values(exercise.a),
+			stubs,
 			exercise: {
-				initial: Object.values(exercise.a),
+				initial: [...stubs],
 				solution,
 				editing_constraints,
 				scope: exercise.scope
@@ -123,6 +130,8 @@ export const state = {
 			selected: exercise.focus,
 			expanded
 		});
+
+		adapter.reset(stubs);
 	},
 
 	toggle_completion: () => {

From 9cb2e400bbb0ab8b575d77dd8dd5797115ce67a1 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Fri, 10 Mar 2023 16:52:21 -0500
Subject: [PATCH 08/28] separate state from events

---
 src/routes/tutorial/[slug]/state.js | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index 9078e8181..946a96e90 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -3,9 +3,7 @@ import * as adapter from './adapter.js';
 
 /**
  * @typedef {{
- *  status: 'initial' | 'select' | 'set' | 'update' | 'switch' | 'expand';
  *  stubs: import("$lib/types").Stub[];
- *  last_updated?: import("$lib/types").FileStub;
  *  selected: string | null;
  *  exercise: {
  *    initial: import("$lib/types").Stub[];
@@ -21,7 +19,6 @@ import * as adapter from './adapter.js';
  * @type {import('svelte/store').Writable<State>}
  */
 const { subscribe, set, update } = writable({
-	status: 'initial',
 	stubs: [],
 	selected: null,
 	exercise: {
@@ -43,14 +40,12 @@ export const state = {
 	update_file: (file) => {
 		update((state) => ({
 			...state,
-			status: 'update',
 			stubs: state.stubs.map((stub) => {
 				if (stub.name === file.name) {
 					return file;
 				}
 				return stub;
 			}),
-			last_updated: file
 		}));
 
 		adapter.update([file]);
@@ -60,9 +55,7 @@ export const state = {
 	set_stubs: (stubs) => {
 		update((state) => ({
 			...state,
-			status: 'set',
-			stubs: stubs ?? state.stubs,
-			last_updated: undefined
+			stubs
 		}));
 
 		adapter.reset(stubs);
@@ -118,7 +111,6 @@ export const state = {
 		const stubs = Object.values(exercise.a)
 
 		set({
-			status: 'switch',
 			stubs,
 			exercise: {
 				initial: [...stubs],
@@ -126,7 +118,6 @@ export const state = {
 				editing_constraints,
 				scope: exercise.scope
 			},
-			last_updated: undefined,
 			selected: exercise.focus,
 			expanded
 		});
@@ -137,9 +128,7 @@ export const state = {
 	toggle_completion: () => {
 		update((state) => ({
 			...state,
-			status: 'set',
 			stubs: is_completed(state) ? state.exercise.initial : Object.values(state.exercise.solution),
-			last_updated: undefined
 		}));
 	},
 
@@ -150,7 +139,6 @@ export const state = {
 	toggle_expanded: (name, expanded) => {
 		update((state) => ({
 			...state,
-			status: 'expand',
 			expanded: {
 				...state.expanded,
 				[name]: expanded ?? !state.expanded[name]
@@ -162,9 +150,7 @@ export const state = {
 	select_file: (name) => {
 		update((state) => ({
 			...state,
-			status: 'select',
 			selected: name,
-			last_updated: undefined
 		}));
 	}
 };

From de60288da47798f30615f30633d5ae69c49d5eaf Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Fri, 10 Mar 2023 17:08:38 -0500
Subject: [PATCH 09/28] add some HMR support

---
 src/routes/tutorial/[slug]/Output.svelte | 3 +++
 src/routes/tutorial/[slug]/state.js      | 6 +-----
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte
index 052a4e31d..bbca17019 100644
--- a/src/routes/tutorial/[slug]/Output.svelte
+++ b/src/routes/tutorial/[slug]/Output.svelte
@@ -19,6 +19,9 @@
 			set_iframe_src($base + path);
 		});
 
+		// this is for HMR purposes
+		if ($base) set_iframe_src($base + path);
+
 		function destroy() {
 			unsubscribe();
 		}
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index 946a96e90..8aeb3533a 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -53,11 +53,7 @@ export const state = {
 
 	/** @param {import('$lib/types').Stub[]} stubs */
 	set_stubs: (stubs) => {
-		update((state) => ({
-			...state,
-			stubs
-		}));
-
+		update((state) => ({ ...state, stubs }));
 		adapter.reset(stubs);
 	},
 

From 98ed3e4c4beb0b2f46832d93f5b35949a292181d Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Fri, 10 Mar 2023 17:10:45 -0500
Subject: [PATCH 10/28] unify types, remove destroy method

---
 src/lib/client/adapters/filesystem/index.js   | 6 +-----
 src/lib/client/adapters/webcontainer/index.js | 5 +----
 src/lib/types/index.d.ts                      | 8 +-------
 3 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/lib/client/adapters/filesystem/index.js b/src/lib/client/adapters/filesystem/index.js
index e9d11f0fa..d3bd0e6ba 100644
--- a/src/lib/client/adapters/filesystem/index.js
+++ b/src/lib/client/adapters/filesystem/index.js
@@ -1,7 +1,7 @@
 /**
  * @param {import('$lib/types').Stub[]} stubs
  * @param {(progress: number, status: string) => void} cb
- * @returns {Promise<import('$lib/types').AdapterInternal>}
+ * @returns {Promise<import('$lib/types').Adapter>}
  */
 export async function create(stubs, cb) {
 	const res = await fetch('/backend', {
@@ -56,10 +56,6 @@ export async function create(stubs, cb) {
 			await new Promise((f) => setTimeout(f, 100)); // wait for chokidar
 
 			return will_restart_vite_dev_server(stubs);
-		},
-
-		async destroy() {
-			navigator.sendBeacon(`/backend/destroy?id=${id}`);
 		}
 	};
 }
diff --git a/src/lib/client/adapters/webcontainer/index.js b/src/lib/client/adapters/webcontainer/index.js
index 4906994c8..cb852e7c4 100644
--- a/src/lib/client/adapters/webcontainer/index.js
+++ b/src/lib/client/adapters/webcontainer/index.js
@@ -17,7 +17,7 @@ function console_stream(label) {
 
 /**
  * @param {(progress: number, status: string) => void} callback
- * @returns {Promise<import('$lib/types').AdapterInternal>}
+ * @returns {Promise<import('$lib/types').Adapter>}
  */
 export async function create(callback) {
 	if (/safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent)) {
@@ -219,9 +219,6 @@ export async function create(callback) {
 			await new Promise((f) => setTimeout(f, 200)); // wait for chokidar
 
 			return will_restart_vite_dev_server(stubs);
-		},
-		destroy: async () => {
-			vm.teardown();
 		}
 	};
 }
diff --git a/src/lib/types/index.d.ts b/src/lib/types/index.d.ts
index 5e4f74fae..e431ebd76 100644
--- a/src/lib/types/index.d.ts
+++ b/src/lib/types/index.d.ts
@@ -16,17 +16,11 @@ export interface DirectoryStub {
 
 export type Stub = FileStub | DirectoryStub;
 
-export interface AdapterInternal {
+export interface Adapter {
 	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'>;
 }
 
 export interface Scope {

From d6d01347f3104955f172286c5c9077e3be9a2380 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Fri, 10 Mar 2023 17:17:33 -0500
Subject: [PATCH 11/28] preserve loading screen until page is ready

---
 src/routes/tutorial/[slug]/Output.svelte | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte
index bbca17019..375f63f76 100644
--- a/src/routes/tutorial/[slug]/Output.svelte
+++ b/src/routes/tutorial/[slug]/Output.svelte
@@ -43,6 +43,7 @@
 
 		if (e.data.type === 'ping') {
 			path = e.data.data.path ?? path;
+			loading = false;
 
 			clearTimeout(timeout);
 			timeout = setTimeout(() => {
@@ -73,7 +74,7 @@
 <svelte:window on:message={handle_message} />
 <Chrome
 	{path}
-	loading={$progress.value < 1}
+	{loading}
 	on:refresh={() => {
 		set_iframe_src($base + path);
 	}}
@@ -91,7 +92,7 @@
 		<iframe bind:this={iframe} title="Output" />
 	{/if}
 
-	{#if $progress.value < 1 || $error}
+	{#if loading || $error}
 		<Loading {initial} error={$error} progress={$progress.value} status={$progress.text} />
 	{/if}
 </div>

From d2192665f89d5e7fcbd791899f05ea495416825c Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Fri, 10 Mar 2023 17:31:51 -0500
Subject: [PATCH 12/28] expand new folders by default

---
 src/lib/client/adapters/webcontainer/index.js |  9 ++++-
 .../tutorial/[slug]/filetree/Folder.svelte    |  8 ++--
 src/routes/tutorial/[slug]/state.js           | 37 +++++++++++--------
 3 files changed, 34 insertions(+), 20 deletions(-)

diff --git a/src/lib/client/adapters/webcontainer/index.js b/src/lib/client/adapters/webcontainer/index.js
index cb852e7c4..a2f6c5b61 100644
--- a/src/lib/client/adapters/webcontainer/index.js
+++ b/src/lib/client/adapters/webcontainer/index.js
@@ -182,7 +182,14 @@ export async function create(callback) {
 
 			// Also trigger a reload of the iframe in case new files were added / old ones deleted,
 			// because that can result in a broken UI state
-			return will_restart || vite_error || to_delete.length > 0 || added_new_file;
+			const should_reload = (
+				will_restart || 
+				vite_error ||
+				to_delete.length > 0
+				// `|| added_new_file`, but I don't actually think that's necessary?
+			);
+
+			return should_reload;
 		},
 		update: async (stubs) => {
 			await running;
diff --git a/src/routes/tutorial/[slug]/filetree/Folder.svelte b/src/routes/tutorial/[slug]/filetree/Folder.svelte
index 830c716a9..38ab87a1f 100644
--- a/src/routes/tutorial/[slug]/filetree/Folder.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Folder.svelte
@@ -110,12 +110,12 @@
 <Item
 	{depth}
 	basename={directory.basename}
-	icon={$state.expanded[directory.name] ? folder_open : folder_closed}
+	icon={$state.collapsed[directory.name] ? folder_closed : folder_open}
 	can_rename={can_remove}
 	renaming={mode === 'renaming'}
 	{actions}
 	on:click={() => {
-		state.toggle_expanded(directory.name);
+		state.toggle_collapsed(directory.name);
 	}}
 	on:edit={() => {
 		mode = 'renaming';
@@ -128,12 +128,12 @@
 	}}
 	on:keydown={(e) => {
 		if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-			state.toggle_expanded(directory.name, e.key === 'ArrowRight');
+			state.toggle_collapsed(directory.name, e.key === 'ArrowLeft');
 		}
 	}}
 />
 
-{#if $state.expanded[directory.name]}
+{#if !$state.collapsed[directory.name]}
 	{#if mode === 'add_directory'}
 		<Item
 			depth={depth + 1}
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index 8aeb3533a..a05e8efc5 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -11,7 +11,7 @@ import * as adapter from './adapter.js';
  *    editing_constraints: import("$lib/types").EditingConstraints;
  *    scope: import('$lib/types').Scope;
  *  };
- *  expanded: Record<string, boolean>;
+ *  collapsed: Record<string, boolean>;
  * }} State
  */
 
@@ -30,7 +30,7 @@ const { subscribe, set, update } = writable({
 		},
 		scope: { name: '', prefix: '' }
 	},
-	expanded: {}
+	collapsed: {}
 });
 
 export const state = {
@@ -66,13 +66,13 @@ export const state = {
 		};
 
 		/** @type {Record<string, boolean>} */
-		const expanded = {
-			'': true
+		const collapsed = {
+			'': false
 		};
 
 		for (const stub of Object.values(exercise.a)) {
 			if (stub.type === 'directory') {
-				expanded[stub.name] = true;
+				collapsed[stub.name] = false;
 			}
 		}
 
@@ -115,29 +115,36 @@ export const state = {
 				scope: exercise.scope
 			},
 			selected: exercise.focus,
-			expanded
+			collapsed
 		});
 
 		adapter.reset(stubs);
 	},
 
 	toggle_completion: () => {
-		update((state) => ({
-			...state,
-			stubs: is_completed(state) ? state.exercise.initial : Object.values(state.exercise.solution),
-		}));
+		update((state) => {
+			const stubs = is_completed(state) ? state.exercise.initial : Object.values(state.exercise.solution);
+
+			// TODO bit naughty, putting this side-effect here
+			adapter.reset(stubs);
+
+			return {
+				...state,
+				stubs,
+			};
+		});
 	},
 
 	/**
 	 * @param {string} name
-	 * @param {boolean} [expanded]
+	 * @param {boolean} [collapsed]
 	 */
-	toggle_expanded: (name, expanded) => {
+	toggle_collapsed: (name, collapsed) => {
 		update((state) => ({
 			...state,
-			expanded: {
-				...state.expanded,
-				[name]: expanded ?? !state.expanded[name]
+			collapsed: {
+				...state.collapsed,
+				[name]: collapsed ?? !state.collapsed[name]
 			}
 		}));
 	},

From 9c54ac7c92de3b039818f50190642a7aec46df06 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 08:03:20 -0500
Subject: [PATCH 13/28] remove unnecessary pagehide stuff

---
 src/routes/tutorial/[slug]/Output.svelte | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte
index 375f63f76..b55e4cae2 100644
--- a/src/routes/tutorial/[slug]/Output.svelte
+++ b/src/routes/tutorial/[slug]/Output.svelte
@@ -22,12 +22,9 @@
 		// this is for HMR purposes
 		if ($base) set_iframe_src($base + path);
 
-		function destroy() {
+		return () => {
 			unsubscribe();
-		}
-
-		document.addEventListener('pagehide', destroy);
-		return destroy;
+		};
 	});
 
 	afterNavigate(() => {

From 4c3ebd772f0c2ff89b1deb2bc5c1d72e863ba4d5 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 09:08:43 -0500
Subject: [PATCH 14/28] make update(...) take a single file

---
 src/lib/client/adapters/webcontainer/index.js | 51 +++++++++----------
 src/lib/types/index.d.ts                      |  2 +-
 src/routes/tutorial/[slug]/adapter.js         |  7 +--
 src/routes/tutorial/[slug]/state.js           |  2 +-
 4 files changed, 29 insertions(+), 33 deletions(-)

diff --git a/src/lib/client/adapters/webcontainer/index.js b/src/lib/client/adapters/webcontainer/index.js
index a2f6c5b61..72a6553c5 100644
--- a/src/lib/client/adapters/webcontainer/index.js
+++ b/src/lib/client/adapters/webcontainer/index.js
@@ -138,7 +138,7 @@ export async function create(callback) {
 			// For some reason, server-ready is fired again when the vite dev server is restarted.
 			// 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 will_restart = will_restart_vite_dev_server(to_write);
+			const will_restart = to_write.some(will_restart_vite_dev_server);
 			const promise = will_restart
 				? new Promise((fulfil, reject) => {
 						const error_unsub = vm.on('error', (error) => {
@@ -191,56 +191,51 @@ export async function create(callback) {
 
 			return should_reload;
 		},
-		update: async (stubs) => {
+		update: async (file) => {
 			await running;
 
 			/** @type {import('@webcontainer/api').FileSystemTree} */
 			const root = {};
 
-			for (const stub of stubs) {
-				let tree = root;
-
-				const path = stub.name.split('/').slice(1);
-				const basename = /** @type {string} */ (path.pop());
+			let tree = root;
 
-				for (const part of path) {
-					if (!tree[part]) {
-						/** @type {import('@webcontainer/api').FileSystemTree} */
-						const directory = {};
+			const path = file.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').DirectoryNode} */ (tree[part]).directory;
+					tree[part] = {
+						directory
+					};
 				}
 
-				tree[basename] = to_file(stub);
+				tree = /** @type {import('@webcontainer/api').DirectoryNode} */ (tree[part]).directory;
 			}
 
+			tree[basename] = to_file(file);
+
 			await vm.mount(root);
 
-			stubs_to_map(stubs, current_stubs);
+			current_stubs.set(file.name, file);
 
 			await new Promise((f) => setTimeout(f, 200)); // wait for chokidar
 
-			return will_restart_vite_dev_server(stubs);
+			return will_restart_vite_dev_server(file);
 		}
 	};
 }
 
 /**
- * @param {import('$lib/types').Stub[]} stubs
+ * @param {import('$lib/types').Stub} file
  */
-function will_restart_vite_dev_server(stubs) {
-	return stubs.some(
-		(stub) =>
-			stub.type === 'file' &&
-			(stub.name === '/vite.config.js' ||
-				stub.name === '/svelte.config.js' ||
-				stub.name === '/.env')
-	);
+function will_restart_vite_dev_server(file) {
+	return file.type === 'file' &&
+			(file.name === '/vite.config.js' ||
+				file.name === '/svelte.config.js' ||
+				file.name === '/.env');
 }
 
 /**
diff --git a/src/lib/types/index.d.ts b/src/lib/types/index.d.ts
index e431ebd76..233e60d40 100644
--- a/src/lib/types/index.d.ts
+++ b/src/lib/types/index.d.ts
@@ -20,7 +20,7 @@ export interface Adapter {
 	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>;
+	update(file: FileStub): Promise<boolean>;
 }
 
 export interface Scope {
diff --git a/src/routes/tutorial/[slug]/adapter.js b/src/routes/tutorial/[slug]/adapter.js
index e650fb881..adb01f31b 100644
--- a/src/routes/tutorial/[slug]/adapter.js
+++ b/src/routes/tutorial/[slug]/adapter.js
@@ -12,6 +12,7 @@ export const base = writable(null);
 /** @type {import('svelte/store').Writable<Error | null>} */
 export const error = writable(null);
 
+/** @type {Promise<import('$lib/types').Adapter>} */
 let ready = new Promise(() => {});
 
 if (browser) {
@@ -76,11 +77,11 @@ export async function reset(files) {
 }
 
 /**
- * @param {import('$lib/types').Stub[]} files 
+ * @param {import('$lib/types').FileStub} file
  */
-export async function update(files) {
+export async function update(file) {
 	const adapter = await ready;
-	const should_reload = await adapter.update(files);
+	const should_reload = await adapter.update(file);
 
 	if (should_reload) {
 		publish('reload');
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index a05e8efc5..a9b7fd497 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -48,7 +48,7 @@ export const state = {
 			}),
 		}));
 
-		adapter.update([file]);
+		adapter.update(file);
 	},
 
 	/** @param {import('$lib/types').Stub[]} stubs */

From 4671cce5530bd905d042b731f03b9d1e1c8dcaa7 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 11:10:13 -0500
Subject: [PATCH 15/28] fix hella weird bug with process not exiting if vite
 and svelte configs are both written simultaneously

---
 src/lib/client/adapters/webcontainer/index.js | 78 ++++++++++++-------
 src/lib/types/index.d.ts                      |  1 -
 src/routes/tutorial/[slug]/adapter.js         |  7 +-
 3 files changed, 50 insertions(+), 36 deletions(-)

diff --git a/src/lib/client/adapters/webcontainer/index.js b/src/lib/client/adapters/webcontainer/index.js
index 72a6553c5..88f0cdb31 100644
--- a/src/lib/client/adapters/webcontainer/index.js
+++ b/src/lib/client/adapters/webcontainer/index.js
@@ -16,15 +16,17 @@ function console_stream(label) {
 }
 
 /**
- * @param {(progress: number, status: string) => void} callback
+ * @param {import('svelte/store').Writable<string | null>} base
+ * @param {import('svelte/store').Writable<Error | null>} error
+ * @param {import('svelte/store').Writable<{ value: number, text: string }>} progress
  * @returns {Promise<import('$lib/types').Adapter>}
  */
-export async function create(callback) {
+export async function create(base, error, progress) {
 	if (/safari/i.test(navigator.userAgent) && !/chrome/i.test(navigator.userAgent)) {
 		throw new Error('WebContainers are not supported by Safari');
 	}
 
-	callback(0, 'loading files');
+	progress.set({ value: 0, text: 'loading files' });
 
 	/**
 	 * Keeps track of the latest create/reset to ensure things are not processed in parallel.
@@ -39,10 +41,10 @@ export async function create(callback) {
 	/** @type {boolean} Track whether there was an error from vite dev server */
 	let vite_error = false;
 
-	callback(1 / 5, 'booting webcontainer');
+	progress.set({ value: 1 / 5, text: 'booting webcontainer' });
 	vm = await WebContainer.boot();
 
-	callback(2 / 5, 'writing virtual files');
+	progress.set({ value: 2 / 5, text: 'writing virtual files' });
 	const common = await ready;
 	await vm.mount({
 		'common.zip': {
@@ -53,7 +55,7 @@ export async function create(callback) {
 		}
 	});
 
-	callback(3 / 5, 'unzipping files');
+	progress.set({ value: 3 / 5, text: 'unzipping files' });
 	const unzip = await vm.spawn('node', ['unzip.cjs']);
 	unzip.output.pipeTo(console_stream('unzip'));
 	const code = await unzip.exit;
@@ -64,35 +66,50 @@ export async function create(callback) {
 
 	await vm.spawn('chmod', ['a+x', 'node_modules/vite/bin/vite.js']);
 
-	callback(4 / 5, 'starting dev server');
-	const base = await new Promise(async (fulfil, reject) => {
-		const error_unsub = vm.on('error', (error) => {
-			error_unsub();
-			reject(new Error(error.message));
-		});
+	vm.on('server-ready', (_port, url) => {
+		base.set(url);
+	});
 
-		const ready_unsub = vm.on('server-ready', (_port, base) => {
-			ready_unsub();
-			callback(5 / 5, 'ready');
-			fulfil(base); // this will be the last thing that happens if everything goes well
-		});
+	vm.on('error', ({ message }) => {
+		error.set(new Error(message));
+	});
 
-		await run_dev();
+	let launched = false;
 
-		async function run_dev() {
-			const process = await vm.spawn('turbo', ['run', 'dev']);
+	async function launch() {
+		if (launched) return;
+		launched = true;
 
-			// TODO differentiate between stdout and stderr (sets `vite_error` to `true`)
-			// https://github.com/stackblitz/webcontainer-core/issues/971
-			process.output.pipeTo(console_stream('dev'));
+		progress.set({ value: 4 / 5, text: 'starting dev server' });
 
-			// keep restarting dev server (can crash in case of illegal +files for example)
-			process.exit.then(run_dev);
-		}
-	});
+		await new Promise(async (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();
+				progress.set({ value: 5 / 5, text: 'ready' });
+				fulfil(base); // this will be the last thing that happens if everything goes well
+			});
+
+			await run_dev();
+
+			async function run_dev() {
+				const process = await vm.spawn('turbo', ['run', 'dev']);
+
+				// TODO differentiate between stdout and stderr (sets `vite_error` to `true`)
+				// https://github.com/stackblitz/webcontainer-core/issues/971
+				process.output.pipeTo(console_stream('dev'));
+
+				// keep restarting dev server (can crash in case of illegal +files for example)
+				process.exit.then(run_dev);
+			}
+		});
+	}
 
 	return {
-		base,
 		reset: async (stubs) => {
 			await running;
 			/** @type {Function} */
@@ -138,7 +155,7 @@ export async function create(callback) {
 			// For some reason, server-ready is fired again when the vite dev server is restarted.
 			// 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 will_restart = to_write.some(will_restart_vite_dev_server);
+			const will_restart = launched && to_write.some(will_restart_vite_dev_server);
 			const promise = will_restart
 				? new Promise((fulfil, reject) => {
 						const error_unsub = vm.on('error', (error) => {
@@ -183,12 +200,15 @@ export async function create(callback) {
 			// Also trigger a reload of the iframe in case new files were added / old ones deleted,
 			// because that can result in a broken UI state
 			const should_reload = (
+				!launched ||
 				will_restart || 
 				vite_error ||
 				to_delete.length > 0
 				// `|| added_new_file`, but I don't actually think that's necessary?
 			);
 
+			await launch();
+
 			return should_reload;
 		},
 		update: async (file) => {
diff --git a/src/lib/types/index.d.ts b/src/lib/types/index.d.ts
index 233e60d40..22cef9089 100644
--- a/src/lib/types/index.d.ts
+++ b/src/lib/types/index.d.ts
@@ -17,7 +17,6 @@ export interface DirectoryStub {
 export type Stub = FileStub | DirectoryStub;
 
 export interface Adapter {
-	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: FileStub): Promise<boolean>;
diff --git a/src/routes/tutorial/[slug]/adapter.js b/src/routes/tutorial/[slug]/adapter.js
index adb01f31b..8d21cbde9 100644
--- a/src/routes/tutorial/[slug]/adapter.js
+++ b/src/routes/tutorial/[slug]/adapter.js
@@ -19,12 +19,7 @@ if (browser) {
 	ready = new Promise(async (fulfil, reject) => {
 		try {
 			const module = await import('$lib/client/adapters/webcontainer/index.js');
-			const adapter = await module.create((value, text) => {
-				progress.set({ value, text });
-			});
-
-			base.set(adapter.base);
-			publish('reload');
+			const adapter = await module.create(base, error, progress);
 
 			fulfil(adapter);
 		} catch (error) {

From 1a67dfa725f03b819b39a4e986066b9eb2bf3d5b Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 11:11:15 -0500
Subject: [PATCH 16/28] minor tweak

---
 src/lib/client/adapters/webcontainer/index.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/client/adapters/webcontainer/index.js b/src/lib/client/adapters/webcontainer/index.js
index 88f0cdb31..2acae404d 100644
--- a/src/lib/client/adapters/webcontainer/index.js
+++ b/src/lib/client/adapters/webcontainer/index.js
@@ -104,7 +104,8 @@ export async function create(base, error, progress) {
 				process.output.pipeTo(console_stream('dev'));
 
 				// keep restarting dev server (can crash in case of illegal +files for example)
-				process.exit.then(run_dev);
+				await process.exit;
+				run_dev();
 			}
 		});
 	}

From 3cf2bc89dc23babb6ad17e2d59961b8c775b0809 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 11:59:33 -0500
Subject: [PATCH 17/28] simplify

---
 src/routes/tutorial/[slug]/+page.svelte |  4 +++-
 src/routes/tutorial/[slug]/state.js     | 14 --------------
 2 files changed, 3 insertions(+), 15 deletions(-)

diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
index 355e1cff3..d29dd54cb 100644
--- a/src/routes/tutorial/[slug]/+page.svelte
+++ b/src/routes/tutorial/[slug]/+page.svelte
@@ -78,7 +78,9 @@
 								class:completed={$completed}
 								disabled={Object.keys(data.exercise.b).length === 0}
 								on:click={() => {
-									state.toggle_completion();
+									state.set_stubs(
+										$completed ? $state.exercise.initial : Object.values($state.exercise.solution)
+									);
 								}}
 							>
 								{#if $completed && Object.keys(data.exercise.b).length > 0}
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index a9b7fd497..1781a3417 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -121,20 +121,6 @@ export const state = {
 		adapter.reset(stubs);
 	},
 
-	toggle_completion: () => {
-		update((state) => {
-			const stubs = is_completed(state) ? state.exercise.initial : Object.values(state.exercise.solution);
-
-			// TODO bit naughty, putting this side-effect here
-			adapter.reset(stubs);
-
-			return {
-				...state,
-				stubs,
-			};
-		});
-	},
-
 	/**
 	 * @param {string} name
 	 * @param {boolean} [collapsed]

From bdc181a5180adc3608db108c47f5f8860a721aa4 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 12:15:34 -0500
Subject: [PATCH 18/28] move collapsed state to the filetree

---
 .../tutorial/[slug]/filetree/Filetree.svelte  |  9 ++++++
 .../tutorial/[slug]/filetree/Folder.svelte    | 10 +++----
 .../tutorial/[slug]/filetree/context.js       |  1 +
 src/routes/tutorial/[slug]/state.js           | 30 +------------------
 4 files changed, 16 insertions(+), 34 deletions(-)

diff --git a/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
index 54d510dfd..e9081846f 100644
--- a/src/routes/tutorial/[slug]/filetree/Filetree.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -1,8 +1,10 @@
 <script>
+	import { writable } from 'svelte/store';
 	import Folder from './Folder.svelte';
 	import * as context from './context.js';
 	import Modal from '$lib/components/Modal.svelte';
 	import { state, stubs, editing_constraints, solution, scope } from '../state.js';
+	import { afterNavigate } from '$app/navigation';
 
 	/** @type {import('svelte/store').Writable<boolean>} */
 	export let readonly;
@@ -11,7 +13,14 @@
 
 	const hidden = new Set(['__client.js', 'node_modules']);
 
+	const collapsed = writable({});
+	afterNavigate(() => {
+		collapsed.set({});
+	});
+
 	context.set({
+		collapsed,
+
 		readonly,
 
 		add: async (name, type) => {
diff --git a/src/routes/tutorial/[slug]/filetree/Folder.svelte b/src/routes/tutorial/[slug]/filetree/Folder.svelte
index 38ab87a1f..3d659e9dc 100644
--- a/src/routes/tutorial/[slug]/filetree/Folder.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Folder.svelte
@@ -22,7 +22,7 @@
 	/** @type {'idle' | 'add_file' | 'add_directory' | 'renaming'} */
 	let mode = 'idle';
 
-	const { rename, add, remove, readonly } = context.get();
+	const { collapsed, rename, add, remove, readonly } = context.get();
 
 	$: segments = get_depth(prefix);
 
@@ -110,12 +110,12 @@
 <Item
 	{depth}
 	basename={directory.basename}
-	icon={$state.collapsed[directory.name] ? folder_closed : folder_open}
+	icon={$collapsed[directory.name] ? folder_closed : folder_open}
 	can_rename={can_remove}
 	renaming={mode === 'renaming'}
 	{actions}
 	on:click={() => {
-		state.toggle_collapsed(directory.name);
+		$collapsed[directory.name] = !$collapsed[directory.name];
 	}}
 	on:edit={() => {
 		mode = 'renaming';
@@ -128,12 +128,12 @@
 	}}
 	on:keydown={(e) => {
 		if (e.key === 'ArrowLeft' || e.key === 'ArrowRight') {
-			state.toggle_collapsed(directory.name, e.key === 'ArrowLeft');
+			$collapsed[directory.name] = e.key === 'ArrowLeft';
 		}
 	}}
 />
 
-{#if !$state.collapsed[directory.name]}
+{#if !$collapsed[directory.name]}
 	{#if mode === 'add_directory'}
 		<Item
 			depth={depth + 1}
diff --git a/src/routes/tutorial/[slug]/filetree/context.js b/src/routes/tutorial/[slug]/filetree/context.js
index 79c8ff295..c4ef94b3d 100644
--- a/src/routes/tutorial/[slug]/filetree/context.js
+++ b/src/routes/tutorial/[slug]/filetree/context.js
@@ -3,6 +3,7 @@ import { setContext, getContext } from 'svelte';
 /**
  * @typedef {{
  *   readonly: import('svelte/store').Writable<boolean>;
+ *   collapsed: import('svelte/store').Writable<Record<string, boolean>;
  *   add: (name: string, type: 'file' | 'directory') => Promise<void>;
  *   rename: (stub: import('$lib/types').Stub, name: string) => Promise<void>;
  *   remove: (stub: import('$lib/types').Stub) => Promise<void>;
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index 1781a3417..6e740fa50 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -11,7 +11,6 @@ import * as adapter from './adapter.js';
  *    editing_constraints: import("$lib/types").EditingConstraints;
  *    scope: import('$lib/types').Scope;
  *  };
- *  collapsed: Record<string, boolean>;
  * }} State
  */
 
@@ -30,7 +29,6 @@ const { subscribe, set, update } = writable({
 		},
 		scope: { name: '', prefix: '' }
 	},
-	collapsed: {}
 });
 
 export const state = {
@@ -65,17 +63,6 @@ export const state = {
 			remove: exercise.editing_constraints.remove
 		};
 
-		/** @type {Record<string, boolean>} */
-		const collapsed = {
-			'': false
-		};
-
-		for (const stub of Object.values(exercise.a)) {
-			if (stub.type === 'directory') {
-				collapsed[stub.name] = false;
-			}
-		}
-
 		// TODO should exercise.a/b be an array in the first place?
 		for (const stub of Object.values(exercise.b)) {
 			if (stub.type === 'file' && stub.contents.startsWith('__delete')) {
@@ -114,27 +101,12 @@ export const state = {
 				editing_constraints,
 				scope: exercise.scope
 			},
-			selected: exercise.focus,
-			collapsed
+			selected: exercise.focus
 		});
 
 		adapter.reset(stubs);
 	},
 
-	/**
-	 * @param {string} name
-	 * @param {boolean} [collapsed]
-	 */
-	toggle_collapsed: (name, collapsed) => {
-		update((state) => ({
-			...state,
-			collapsed: {
-				...state.collapsed,
-				[name]: collapsed ?? !state.collapsed[name]
-			}
-		}));
-	},
-
 	/** @param {string | null} name */
 	select_file: (name) => {
 		update((state) => ({

From a7288c2b13a447317d44f63a7ed3e5e142697369 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 12:29:15 -0500
Subject: [PATCH 19/28] remove some more indirection

---
 src/routes/tutorial/[slug]/+page.svelte             | 2 +-
 src/routes/tutorial/[slug]/filetree/Filetree.svelte | 9 ++++++---
 src/routes/tutorial/[slug]/state.js                 | 9 ++-------
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
index d29dd54cb..f6c0bf3b1 100644
--- a/src/routes/tutorial/[slug]/+page.svelte
+++ b/src/routes/tutorial/[slug]/+page.svelte
@@ -72,7 +72,7 @@
 				<section slot="a">
 					<SplitPane type="horizontal" min="120px" max="300px" pos="200px">
 						<section class="navigator" slot="a">
-							<Filetree readonly={mobile} />
+							<Filetree readonly={mobile} scope={data.exercise.scope} />
 
 							<button
 								class:completed={$completed}
diff --git a/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
index e9081846f..514dada91 100644
--- a/src/routes/tutorial/[slug]/filetree/Filetree.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -3,12 +3,15 @@
 	import Folder from './Folder.svelte';
 	import * as context from './context.js';
 	import Modal from '$lib/components/Modal.svelte';
-	import { state, stubs, editing_constraints, solution, scope } from '../state.js';
+	import { state, stubs, editing_constraints, solution } from '../state.js';
 	import { afterNavigate } from '$app/navigation';
 
 	/** @type {import('svelte/store').Writable<boolean>} */
 	export let readonly;
 
+	/** @type {import('$lib/types').Scope} */
+	export let scope;
+
 	let modal_text = '';
 
 	const hidden = new Set(['__client.js', 'node_modules']);
@@ -165,12 +168,12 @@
 	}}
 >
 	<Folder
-		prefix={$scope.prefix}
+		prefix={scope.prefix}
 		depth={0}
 		directory={{
 			type: 'directory',
 			name: '',
-			basename: $scope.name
+			basename: scope.name
 		}}
 		files={$stubs.filter((stub) => !hidden.has(stub.basename))}
 	/>
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index 6e740fa50..085aa24e2 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -9,7 +9,6 @@ import * as adapter from './adapter.js';
  *    initial: import("$lib/types").Stub[];
  *    solution: Record<string, import("$lib/types").Stub>;
  *    editing_constraints: import("$lib/types").EditingConstraints;
- *    scope: import('$lib/types').Scope;
  *  };
  * }} State
  */
@@ -26,8 +25,7 @@ const { subscribe, set, update } = writable({
 		editing_constraints: {
 			create: [],
 			remove: []
-		},
-		scope: { name: '', prefix: '' }
+		}
 	},
 });
 
@@ -98,8 +96,7 @@ export const state = {
 			exercise: {
 				initial: [...stubs],
 				solution,
-				editing_constraints,
-				scope: exercise.scope
+				editing_constraints
 			},
 			selected: exercise.focus
 		});
@@ -130,8 +127,6 @@ export const solution = derived(state, ($state) => $state.exercise.solution);
 
 export const editing_constraints = derived(state, ($state) => $state.exercise.editing_constraints);
 
-export const scope = derived(state, ($state) => $state.exercise.scope);
-
 export const completed = derived(state, is_completed);
 
 /**

From ff9d81b4eace22517f9f4090b8dc6d4882868b71 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 12:36:33 -0500
Subject: [PATCH 20/28] unused import

---
 src/routes/tutorial/[slug]/filetree/Folder.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/tutorial/[slug]/filetree/Folder.svelte b/src/routes/tutorial/[slug]/filetree/Folder.svelte
index 3d659e9dc..75944a3d6 100644
--- a/src/routes/tutorial/[slug]/filetree/Folder.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Folder.svelte
@@ -5,7 +5,7 @@
 	import Item from './Item.svelte';
 	import folder_closed from '$lib/icons/folder.svg';
 	import folder_open from '$lib/icons/folder-open.svg';
-	import { state, stubs, solution } from '../state.js';
+	import { stubs, solution } from '../state.js';
 
 	/** @type {import('$lib/types').DirectoryStub} */
 	export let directory;

From 1b6664a8153ce2ff0325851195c16c4e175f8df2 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 12:42:31 -0500
Subject: [PATCH 21/28] use sets for editing constraints

---
 src/lib/server/content.js                        |  4 ++--
 src/lib/types/index.d.ts                         |  8 ++++----
 .../tutorial/[slug]/filetree/Filetree.svelte     | 16 ++++++++--------
 src/routes/tutorial/[slug]/state.js              | 16 ++++++----------
 4 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/src/lib/server/content.js b/src/lib/server/content.js
index d10024d05..e2d3a9e02 100644
--- a/src/lib/server/content.js
+++ b/src/lib/server/content.js
@@ -170,8 +170,8 @@ export function get_exercise(slug) {
 				next,
 				dir,
 				editing_constraints: {
-					create: exercise_meta.editing_constraints?.create ?? [],
-					remove: exercise_meta.editing_constraints?.remove ?? []
+					create: new Set(exercise_meta.editing_constraints?.create ?? []),
+					remove: new Set(exercise_meta.editing_constraints?.remove ?? [])
 				},
 				html: transform(markdown, {
 					codespan: (text) =>
diff --git a/src/lib/types/index.d.ts b/src/lib/types/index.d.ts
index 22cef9089..985cecc06 100644
--- a/src/lib/types/index.d.ts
+++ b/src/lib/types/index.d.ts
@@ -47,8 +47,8 @@ export interface Exercise {
 	html: string;
 	dir: string;
 	editing_constraints: {
-		create: string[];
-		remove: string[];
+		create: Set<string>;
+		remove: Set<string>;
 	};
 	a: Record<string, Stub>;
 	b: Record<string, Stub>;
@@ -72,6 +72,6 @@ export interface PartStub {
 }
 
 export interface EditingConstraints {
-	create: string[];
-	remove: string[];
+	create: Set<string>;
+	remove: Set<string>;
 }
diff --git a/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
index 514dada91..b8c276024 100644
--- a/src/routes/tutorial/[slug]/filetree/Filetree.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -27,10 +27,10 @@
 		readonly,
 
 		add: async (name, type) => {
-			if (!$solution[name] && !$editing_constraints.create.includes(name)) {
+			if (!$solution[name] && !$editing_constraints.create.has(name)) {
 				modal_text =
 					'Only the following files and folders are allowed to be created in this exercise:\n' +
-					$editing_constraints.create.join('\n');
+					Array.from($editing_constraints.create).join('\n');
 				return;
 			}
 
@@ -70,17 +70,17 @@
 				return;
 			}
 
-			if (!$solution[new_full_name] && !$editing_constraints.create.includes(new_full_name)) {
+			if (!$solution[new_full_name] && !$editing_constraints.create.has(new_full_name)) {
 				modal_text =
 					'Only the following files and folders are allowed to be created in this exercise:\n' +
-					$editing_constraints.create.join('\n');
+					Array.from($editing_constraints.create).join('\n');
 				return;
 			}
 
-			if ($solution[to_rename.name] && !$editing_constraints.remove.includes(to_rename.name)) {
+			if ($solution[to_rename.name] && !$editing_constraints.remove.has(to_rename.name)) {
 				modal_text =
 					'Only the following files and folders are allowed to be removed in this exercise:\n' +
-					$editing_constraints.remove.join('\n');
+					Array.from($editing_constraints.remove).join('\n');
 				return;
 			}
 
@@ -99,10 +99,10 @@
 		},
 
 		remove: async (stub) => {
-			if ($solution[stub.name] && !$editing_constraints.remove.includes(stub.name)) {
+			if ($solution[stub.name] && !$editing_constraints.remove.has(stub.name)) {
 				modal_text =
 					'Only the following files and folders are allowed to be deleted in this tutorial chapter:\n' +
-					$editing_constraints.remove.join('\n');
+					Array.from($editing_constraints.remove).join('\n');
 				return;
 			}
 
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index 085aa24e2..57e5bbdd4 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -23,8 +23,8 @@ const { subscribe, set, update } = writable({
 		initial: [],
 		solution: {},
 		editing_constraints: {
-			create: [],
-			remove: []
+			create: new Set(),
+			remove: new Set()
 		}
 	},
 });
@@ -65,16 +65,12 @@ export const state = {
 		for (const stub of Object.values(exercise.b)) {
 			if (stub.type === 'file' && stub.contents.startsWith('__delete')) {
 				// remove file
-				if (!editing_constraints.remove.includes(stub.name)) {
-					editing_constraints.remove.push(stub.name);
-				}
+				editing_constraints.remove.add(stub.name);
 				delete solution[stub.name];
 			} else if (stub.name.endsWith('/__delete')) {
 				// remove directory
 				const parent = stub.name.slice(0, stub.name.lastIndexOf('/'));
-				if (!editing_constraints.remove.includes(parent)) {
-					editing_constraints.remove.push(parent);
-				}
+				editing_constraints.remove.add(parent);
 				delete solution[parent];
 				for (const k in solution) {
 					if (k.startsWith(parent + '/')) {
@@ -82,8 +78,8 @@ export const state = {
 					}
 				}
 			} else {
-				if (!solution[stub.name] && !editing_constraints.create.includes(stub.name)) {
-					editing_constraints.create.push(stub.name);
+				if (!solution[stub.name]) {
+					editing_constraints.create.add(stub.name);
 				}
 				solution[stub.name] = exercise.b[stub.name];
 			}

From 4d3f7355b35e4353d2cb0af0a87c0229685747f7 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 12:59:09 -0500
Subject: [PATCH 22/28] move logic to the server

---
 src/lib/server/content.js           | 40 +++++++++++++++++++++++----
 src/lib/types/index.d.ts            |  4 +++
 src/routes/tutorial/[slug]/state.js | 42 ++++-------------------------
 3 files changed, 44 insertions(+), 42 deletions(-)

diff --git a/src/lib/server/content.js b/src/lib/server/content.js
index e2d3a9e02..616383f51 100644
--- a/src/lib/server/content.js
+++ b/src/lib/server/content.js
@@ -152,6 +152,37 @@ export function get_exercise(slug) {
 				};
 			}
 
+			const editing_constraints = {
+				create: new Set(exercise_meta.editing_constraints?.create ?? []),
+				remove: new Set(exercise_meta.editing_constraints?.remove ?? [])
+			};
+
+			const solution = { ...a };
+
+			// TODO should exercise.a/b be an array in the first place?
+			for (const stub of Object.values(b)) {
+				if (stub.type === 'file' && stub.contents.startsWith('__delete')) {
+					// remove file
+					editing_constraints.remove.add(stub.name);
+					delete solution[stub.name];
+				} else if (stub.name.endsWith('/__delete')) {
+					// remove directory
+					const parent = stub.name.slice(0, stub.name.lastIndexOf('/'));
+					editing_constraints.remove.add(parent);
+					delete solution[parent];
+					for (const k in solution) {
+						if (k.startsWith(parent + '/')) {
+							delete solution[k];
+						}
+					}
+				} else {
+					if (!solution[stub.name]) {
+						editing_constraints.create.add(stub.name);
+					}
+					solution[stub.name] = stub;
+				}
+			}
+
 			return {
 				part: {
 					slug: part_dir,
@@ -169,10 +200,7 @@ export function get_exercise(slug) {
 				prev,
 				next,
 				dir,
-				editing_constraints: {
-					create: new Set(exercise_meta.editing_constraints?.create ?? []),
-					remove: new Set(exercise_meta.editing_constraints?.remove ?? [])
-				},
+				editing_constraints,
 				html: transform(markdown, {
 					codespan: (text) =>
 						filenames.size > 1 && filenames.has(text)
@@ -180,7 +208,9 @@ export function get_exercise(slug) {
 							: `<code>${text}</code>`
 				}),
 				a,
-				b
+				b,
+				initial: Object.values(a),
+				solution: solution
 			};
 		}
 
diff --git a/src/lib/types/index.d.ts b/src/lib/types/index.d.ts
index 985cecc06..00486139f 100644
--- a/src/lib/types/index.d.ts
+++ b/src/lib/types/index.d.ts
@@ -52,6 +52,10 @@ export interface Exercise {
 	};
 	a: Record<string, Stub>;
 	b: Record<string, Stub>;
+
+	// TODO these are temporary — use a and b instead
+	initial: Stub[];
+	solution: Stub[];
 }
 
 export interface ExerciseStub {
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index 57e5bbdd4..4c46b8a9d 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -55,49 +55,17 @@ export const state = {
 
 	/** @param {import('$lib/types').Exercise} exercise */
 	switch_exercise: (exercise) => {
-		const solution = { ...exercise.a };
-		const editing_constraints = {
-			create: exercise.editing_constraints.create,
-			remove: exercise.editing_constraints.remove
-		};
-
-		// TODO should exercise.a/b be an array in the first place?
-		for (const stub of Object.values(exercise.b)) {
-			if (stub.type === 'file' && stub.contents.startsWith('__delete')) {
-				// remove file
-				editing_constraints.remove.add(stub.name);
-				delete solution[stub.name];
-			} else if (stub.name.endsWith('/__delete')) {
-				// remove directory
-				const parent = stub.name.slice(0, stub.name.lastIndexOf('/'));
-				editing_constraints.remove.add(parent);
-				delete solution[parent];
-				for (const k in solution) {
-					if (k.startsWith(parent + '/')) {
-						delete solution[k];
-					}
-				}
-			} else {
-				if (!solution[stub.name]) {
-					editing_constraints.create.add(stub.name);
-				}
-				solution[stub.name] = exercise.b[stub.name];
-			}
-		}
-
-		const stubs = Object.values(exercise.a)
-
 		set({
-			stubs,
+			stubs: exercise.initial,
 			exercise: {
-				initial: [...stubs],
-				solution,
-				editing_constraints
+				initial: exercise.initial,
+				solution: exercise.solution,
+				editing_constraints: exercise.editing_constraints
 			},
 			selected: exercise.focus
 		});
 
-		adapter.reset(stubs);
+		adapter.reset(exercise.initial);
 	},
 
 	/** @param {string | null} name */

From 3106f73d903e106cad1ebe87248297701879715a Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 13:07:48 -0500
Subject: [PATCH 23/28] move editing_constraints out of state

---
 src/routes/tutorial/[slug]/+page.svelte       |  4 +++-
 .../tutorial/[slug]/filetree/Filetree.svelte  | 21 +++++++++++--------
 src/routes/tutorial/[slug]/state.js           | 13 +-----------
 3 files changed, 16 insertions(+), 22 deletions(-)

diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
index f6c0bf3b1..8bc108355 100644
--- a/src/routes/tutorial/[slug]/+page.svelte
+++ b/src/routes/tutorial/[slug]/+page.svelte
@@ -79,7 +79,9 @@
 								disabled={Object.keys(data.exercise.b).length === 0}
 								on:click={() => {
 									state.set_stubs(
-										$completed ? $state.exercise.initial : Object.values($state.exercise.solution)
+										$completed
+											? Object.values(data.exercise.a)
+											: Object.values(data.exercise.solution)
 									);
 								}}
 							>
diff --git a/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
index b8c276024..48d3ff2cc 100644
--- a/src/routes/tutorial/[slug]/filetree/Filetree.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -3,7 +3,7 @@
 	import Folder from './Folder.svelte';
 	import * as context from './context.js';
 	import Modal from '$lib/components/Modal.svelte';
-	import { state, stubs, editing_constraints, solution } from '../state.js';
+	import { state, stubs, solution } from '../state.js';
 	import { afterNavigate } from '$app/navigation';
 
 	/** @type {import('svelte/store').Writable<boolean>} */
@@ -12,6 +12,9 @@
 	/** @type {import('$lib/types').Scope} */
 	export let scope;
 
+	/** @type {import('$lib/types').Exercise} */
+	export let exercise;
+
 	let modal_text = '';
 
 	const hidden = new Set(['__client.js', 'node_modules']);
@@ -27,10 +30,10 @@
 		readonly,
 
 		add: async (name, type) => {
-			if (!$solution[name] && !$editing_constraints.create.has(name)) {
+			if (!$solution[name] && !exercise.editing_constraints.create.has(name)) {
 				modal_text =
 					'Only the following files and folders are allowed to be created in this exercise:\n' +
-					Array.from($editing_constraints.create).join('\n');
+					Array.from(exercise.editing_constraints.create).join('\n');
 				return;
 			}
 
@@ -70,17 +73,17 @@
 				return;
 			}
 
-			if (!$solution[new_full_name] && !$editing_constraints.create.has(new_full_name)) {
+			if (!$solution[new_full_name] && !exercise.editing_constraints.create.has(new_full_name)) {
 				modal_text =
 					'Only the following files and folders are allowed to be created in this exercise:\n' +
-					Array.from($editing_constraints.create).join('\n');
+					Array.from(exercise.editing_constraints.create).join('\n');
 				return;
 			}
 
-			if ($solution[to_rename.name] && !$editing_constraints.remove.has(to_rename.name)) {
+			if ($solution[to_rename.name] && !exercise.editing_constraints.remove.has(to_rename.name)) {
 				modal_text =
 					'Only the following files and folders are allowed to be removed in this exercise:\n' +
-					Array.from($editing_constraints.remove).join('\n');
+					Array.from(exercise.editing_constraints.remove).join('\n');
 				return;
 			}
 
@@ -99,10 +102,10 @@
 		},
 
 		remove: async (stub) => {
-			if ($solution[stub.name] && !$editing_constraints.remove.has(stub.name)) {
+			if ($solution[stub.name] && !exercise.editing_constraints.remove.has(stub.name)) {
 				modal_text =
 					'Only the following files and folders are allowed to be deleted in this tutorial chapter:\n' +
-					Array.from($editing_constraints.remove).join('\n');
+					Array.from(exercise.editing_constraints.remove).join('\n');
 				return;
 			}
 
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index 4c46b8a9d..88e2bb709 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -6,9 +6,7 @@ import * as adapter from './adapter.js';
  *  stubs: import("$lib/types").Stub[];
  *  selected: string | null;
  *  exercise: {
- *    initial: import("$lib/types").Stub[];
  *    solution: Record<string, import("$lib/types").Stub>;
- *    editing_constraints: import("$lib/types").EditingConstraints;
  *  };
  * }} State
  */
@@ -20,12 +18,7 @@ const { subscribe, set, update } = writable({
 	stubs: [],
 	selected: null,
 	exercise: {
-		initial: [],
-		solution: {},
-		editing_constraints: {
-			create: new Set(),
-			remove: new Set()
-		}
+		solution: {}
 	},
 });
 
@@ -58,9 +51,7 @@ export const state = {
 		set({
 			stubs: exercise.initial,
 			exercise: {
-				initial: exercise.initial,
 				solution: exercise.solution,
-				editing_constraints: exercise.editing_constraints
 			},
 			selected: exercise.focus
 		});
@@ -89,8 +80,6 @@ export const selected = derived(
 
 export const solution = derived(state, ($state) => $state.exercise.solution);
 
-export const editing_constraints = derived(state, ($state) => $state.exercise.editing_constraints);
-
 export const completed = derived(state, is_completed);
 
 /**

From 3abc8a6842fed5f5bca5050dd8418778f1eda816 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 13:08:51 -0500
Subject: [PATCH 24/28] fix

---
 src/routes/tutorial/[slug]/+page.svelte             | 2 +-
 src/routes/tutorial/[slug]/filetree/Filetree.svelte | 7 ++-----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
index 8bc108355..b2d351a32 100644
--- a/src/routes/tutorial/[slug]/+page.svelte
+++ b/src/routes/tutorial/[slug]/+page.svelte
@@ -72,7 +72,7 @@
 				<section slot="a">
 					<SplitPane type="horizontal" min="120px" max="300px" pos="200px">
 						<section class="navigator" slot="a">
-							<Filetree readonly={mobile} scope={data.exercise.scope} />
+							<Filetree readonly={mobile} exercise={data.exercise} />
 
 							<button
 								class:completed={$completed}
diff --git a/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
index 48d3ff2cc..5026a8526 100644
--- a/src/routes/tutorial/[slug]/filetree/Filetree.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -9,9 +9,6 @@
 	/** @type {import('svelte/store').Writable<boolean>} */
 	export let readonly;
 
-	/** @type {import('$lib/types').Scope} */
-	export let scope;
-
 	/** @type {import('$lib/types').Exercise} */
 	export let exercise;
 
@@ -171,12 +168,12 @@
 	}}
 >
 	<Folder
-		prefix={scope.prefix}
+		prefix={exercise.scope.prefix}
 		depth={0}
 		directory={{
 			type: 'directory',
 			name: '',
-			basename: scope.name
+			basename: exercise.scope.name
 		}}
 		files={$stubs.filter((stub) => !hidden.has(stub.basename))}
 	/>

From 970723e4fa842093936e103c365961fc36f381e5 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 14:13:44 -0500
Subject: [PATCH 25/28] create multiple independent stores so we can e.g. SSR
 the filetree

---
 src/lib/server/content.js                     |   9 +-
 src/lib/types/index.d.ts                      |   5 +-
 src/routes/tutorial/[slug]/+page.svelte       |  51 ++++++--
 src/routes/tutorial/[slug]/Editor.svelte      |   4 +-
 .../tutorial/[slug]/filetree/File.svelte      |   4 +-
 .../tutorial/[slug]/filetree/Filetree.svelte  |   6 +-
 .../tutorial/[slug]/filetree/context.js       |   2 +-
 src/routes/tutorial/[slug]/state.js           | 112 +++++-------------
 8 files changed, 84 insertions(+), 109 deletions(-)

diff --git a/src/lib/server/content.js b/src/lib/server/content.js
index 616383f51..cfdd1bac5 100644
--- a/src/lib/server/content.js
+++ b/src/lib/server/content.js
@@ -101,6 +101,7 @@ export function get_exercise(slug) {
 			}
 
 			const b = walk(`${dir}/app-b`);
+			const has_solution = Object.keys(b).length > 0;
 
 			const part_meta = json(`content/tutorial/${part_dir}/meta.json`);
 			const chapter_meta = json(`content/tutorial/${part_dir}/${chapter_dir}/meta.json`);
@@ -159,7 +160,6 @@ export function get_exercise(slug) {
 
 			const solution = { ...a };
 
-			// TODO should exercise.a/b be an array in the first place?
 			for (const stub of Object.values(b)) {
 				if (stub.type === 'file' && stub.contents.startsWith('__delete')) {
 					// remove file
@@ -208,9 +208,8 @@ export function get_exercise(slug) {
 							: `<code>${text}</code>`
 				}),
 				a,
-				b,
-				initial: Object.values(a),
-				solution: solution
+				b: solution,
+				has_solution
 			};
 		}
 
@@ -248,7 +247,7 @@ function extract_frontmatter(markdown, dir) {
  *   exclude?: string[]
  * }} options
  */
-export function walk(cwd, options = {}) {
+function walk(cwd, options = {}) {
 	/** @type {Record<string, import('$lib/types').FileStub | import('$lib/types').DirectoryStub>} */
 	const result = {};
 
diff --git a/src/lib/types/index.d.ts b/src/lib/types/index.d.ts
index 00486139f..f0779b4a8 100644
--- a/src/lib/types/index.d.ts
+++ b/src/lib/types/index.d.ts
@@ -52,10 +52,7 @@ export interface Exercise {
 	};
 	a: Record<string, Stub>;
 	b: Record<string, Stub>;
-
-	// TODO these are temporary — use a and b instead
-	initial: Stub[];
-	solution: Stub[];
+	has_solution: boolean;
 }
 
 export interface ExerciseStub {
diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
index b2d351a32..91a275e3d 100644
--- a/src/routes/tutorial/[slug]/+page.svelte
+++ b/src/routes/tutorial/[slug]/+page.svelte
@@ -11,7 +11,7 @@
 	import ImageViewer from './ImageViewer.svelte';
 	import ScreenToggle from './ScreenToggle.svelte';
 	import Sidebar from './Sidebar.svelte';
-	import { state, selected, completed } from './state.js';
+	import { files, state, selected_file, solution } from './state.js';
 
 	export let data;
 
@@ -21,6 +21,41 @@
 	$: mobile = writable(false);
 	$: $mobile = width < 768;
 
+	$: completed = is_completed($files, data.exercise.b);
+
+	$: files.set(Object.values(data.exercise.a));
+	$: solution.set(data.exercise.b);
+
+	/**
+	 * @param {import('$lib/types').Stub[]} files
+	 * @param {Record<string, import('$lib/types').Stub> | null} solution
+	 */
+	function is_completed(files, solution) {
+		if (!solution) return true;
+
+		for (const file of files) {
+			if (file.type === 'file') {
+				const expected = solution[file.name];
+				if (expected?.type !== 'file') return false;
+				if (normalise(file.contents) !== normalise(expected.contents)) return false;
+			}
+		}
+
+		const names = new Set(files.map((stub) => stub.name));
+
+		for (const name in solution) {
+			if (!names.has(name)) return false;
+		}
+
+		return true;
+	}
+
+	/** @param {string} code */
+	function normalise(code) {
+		// TODO think about more sophisticated normalisation (e.g. truncate multiple newlines)
+		return code.replace(/\s+/g, ' ').trim();
+	}
+
 	afterNavigate(() => {
 		state.switch_exercise(data.exercise);
 	});
@@ -75,17 +110,13 @@
 							<Filetree readonly={mobile} exercise={data.exercise} />
 
 							<button
-								class:completed={$completed}
-								disabled={Object.keys(data.exercise.b).length === 0}
+								class:completed
+								disabled={!data.exercise.has_solution}
 								on:click={() => {
-									state.set_stubs(
-										$completed
-											? Object.values(data.exercise.a)
-											: Object.values(data.exercise.solution)
-									);
+									state.set_stubs(Object.values(completed ? data.exercise.a : data.exercise.b));
 								}}
 							>
-								{#if $completed && Object.keys(data.exercise.b).length > 0}
+								{#if completed && data.exercise.has_solution}
 									reset
 								{:else}
 									solve <Icon name="arrow-right" />
@@ -95,7 +126,7 @@
 
 						<section class="editor-container" slot="b">
 							<Editor read_only={$mobile} />
-							<ImageViewer selected={$selected} />
+							<ImageViewer selected={$selected_file} />
 						</section>
 					</SplitPane>
 				</section>
diff --git a/src/routes/tutorial/[slug]/Editor.svelte b/src/routes/tutorial/[slug]/Editor.svelte
index d755bbf03..3f8676ae4 100644
--- a/src/routes/tutorial/[slug]/Editor.svelte
+++ b/src/routes/tutorial/[slug]/Editor.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { dev } from '$app/environment';
 	import { onMount } from 'svelte';
-	import { stubs, selected, state } from './state.js';
+	import { stubs, selected_name, state } from './state.js';
 
 	/**
 	 * file extension -> monaco language
@@ -227,7 +227,7 @@
 	}
 
 	$: if (instance && $stubs /* to retrigger on stubs change */) {
-		const model = $selected && models.get($selected.name);
+		const model = $selected_name && models.get($selected_name);
 		instance.editor.setModel(model ?? null);
 	}
 
diff --git a/src/routes/tutorial/[slug]/filetree/File.svelte b/src/routes/tutorial/[slug]/filetree/File.svelte
index ee6d1d32c..379ecb845 100644
--- a/src/routes/tutorial/[slug]/filetree/File.svelte
+++ b/src/routes/tutorial/[slug]/filetree/File.svelte
@@ -2,7 +2,7 @@
 	import * as context from './context.js';
 	import Item from './Item.svelte';
 	import file_icon from '$lib/icons/file.svg';
-	import { selected, solution, state } from '../state.js';
+	import { selected_name, solution, state } from '../state.js';
 
 	/** @type {import('$lib/types').FileStub} */
 	export let file;
@@ -43,7 +43,7 @@
 	{renaming}
 	basename={file.basename}
 	icon={file_icon}
-	selected={file.name === $selected?.name}
+	selected={file.name === $selected_name}
 	{actions}
 	on:click={() => state.select_file(file.name)}
 	on:edit={() => {
diff --git a/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
index 5026a8526..d847ffdcb 100644
--- a/src/routes/tutorial/[slug]/filetree/Filetree.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -3,7 +3,7 @@
 	import Folder from './Folder.svelte';
 	import * as context from './context.js';
 	import Modal from '$lib/components/Modal.svelte';
-	import { state, stubs, solution } from '../state.js';
+	import { files, solution, state, stubs } from '../state.js';
 	import { afterNavigate } from '$app/navigation';
 
 	/** @type {import('svelte/store').Writable<boolean>} */
@@ -16,7 +16,9 @@
 
 	const hidden = new Set(['__client.js', 'node_modules']);
 
+	/** @type {import('svelte/store').Writable<Record<string, boolean>>}*/
 	const collapsed = writable({});
+
 	afterNavigate(() => {
 		collapsed.set({});
 	});
@@ -34,7 +36,7 @@
 				return;
 			}
 
-			const existing = $state.stubs.find((stub) => stub.name === name);
+			const existing = $files.find((stub) => stub.name === name);
 			if (existing) {
 				modal_text = `A ${existing.type} already exists with this name`;
 				return;
diff --git a/src/routes/tutorial/[slug]/filetree/context.js b/src/routes/tutorial/[slug]/filetree/context.js
index c4ef94b3d..3e1760547 100644
--- a/src/routes/tutorial/[slug]/filetree/context.js
+++ b/src/routes/tutorial/[slug]/filetree/context.js
@@ -3,7 +3,7 @@ import { setContext, getContext } from 'svelte';
 /**
  * @typedef {{
  *   readonly: import('svelte/store').Writable<boolean>;
- *   collapsed: import('svelte/store').Writable<Record<string, boolean>;
+ *   collapsed: import('svelte/store').Writable<Record<string, boolean>>;
  *   add: (name: string, type: 'file' | 'directory') => Promise<void>;
  *   rename: (stub: import('$lib/types').Stub, name: string) => Promise<void>;
  *   remove: (stub: import('$lib/types').Stub) => Promise<void>;
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index 88e2bb709..14eeb978d 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -1,112 +1,58 @@
 import { derived, writable } from 'svelte/store';
 import * as adapter from './adapter.js';
 
-/**
- * @typedef {{
- *  stubs: import("$lib/types").Stub[];
- *  selected: string | null;
- *  exercise: {
- *    solution: Record<string, import("$lib/types").Stub>;
- *  };
- * }} State
- */
+/** @type {import('svelte/store').Writable<import('$lib/types').Stub[]>} */
+export const files = writable([]);
 
-/**
- * @type {import('svelte/store').Writable<State>}
- */
-const { subscribe, set, update } = writable({
-	stubs: [],
-	selected: null,
-	exercise: {
-		solution: {}
-	},
-});
+/** @type {import('svelte/store').Writable<Record<string, import('$lib/types').Stub>>} */
+export const solution = writable({});
 
-export const state = {
-	subscribe,
+/** @type {import('svelte/store').Writable<string | null>} */
+export const selected_name = writable(null);
 
+export const selected_file = derived([files, selected_name], ([$files, $selected_name]) => {
+	return /** @type{import('$lib/types').FileStub | undefined} */ (
+		$files.find((stub) => stub.name === $selected_name)
+		) ?? null
+})
+
+export const state = {
 	/** @param {import('$lib/types').FileStub} file */
 	update_file: (file) => {
-		update((state) => ({
-			...state,
-			stubs: state.stubs.map((stub) => {
-				if (stub.name === file.name) {
+		files.update($files => {
+			return $files.map((old) => {
+				if (old.name === file.name) {
 					return file;
 				}
-				return stub;
-			}),
-		}));
+				return old;
+			})
+		});
 
 		adapter.update(file);
 	},
 
 	/** @param {import('$lib/types').Stub[]} stubs */
 	set_stubs: (stubs) => {
-		update((state) => ({ ...state, stubs }));
+		files.set(stubs);
 		adapter.reset(stubs);
 	},
 
 	/** @param {import('$lib/types').Exercise} exercise */
 	switch_exercise: (exercise) => {
-		set({
-			stubs: exercise.initial,
-			exercise: {
-				solution: exercise.solution,
-			},
-			selected: exercise.focus
-		});
+		const stubs = Object.values(exercise.a);
+
+		files.set(stubs);
+
+		selected_name.set(exercise.focus);
 
-		adapter.reset(exercise.initial);
+		adapter.reset(stubs);
 	},
 
 	/** @param {string | null} name */
 	select_file: (name) => {
-		update((state) => ({
-			...state,
-			selected: name,
-		}));
+		selected_name.set(name);
 	}
 };
 
-export const stubs = derived(state, ($state) => $state.stubs);
-
-export const selected = derived(
-	state,
-	($state) =>
-		/** @type{import('$lib/types').FileStub | undefined} */ (
-			$state.stubs.find((stub) => stub.name === $state.selected)
-		) ?? null
-);
-
-export const solution = derived(state, ($state) => $state.exercise.solution);
-
-export const completed = derived(state, is_completed);
-
-/**
- * @param {State} $state
- */
-function is_completed($state) {
-	const all_stubs_correct = $state.stubs.every((stub) => {
-		if (stub.type === 'directory') {
-			return true;
-		} else if (stub.type === 'file' && stub.name in $state.exercise.solution) {
-			const expected = $state.exercise.solution[stub.name];
-			return expected.type === 'file' && normalise(stub.contents) === normalise(expected.contents);
-		} else {
-			return false;
-		}
-	});
-
-	const stub_names = new Set($state.stubs.map((stub) => stub.name));
-	const stubs_complete = Object.keys($state.exercise.solution).every((name) =>
-		stub_names.has(name)
-	);
-
-	return all_stubs_correct && stubs_complete;
-}
-
-/** @param {string} code */
-function normalise(code) {
-	// TODO think about more sophisticated normalisation (e.g. truncate multiple newlines)
-	return code.replace(/\s+/g, ' ').trim();
-}
+// TODO get rid
+export const stubs = files;
\ No newline at end of file

From b9b6949de3163cbf9ca27922b71b68f03d5cdc72 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 14:24:15 -0500
Subject: [PATCH 26/28] tweak

---
 src/routes/tutorial/[slug]/+page.svelte       | 23 +++++--
 src/routes/tutorial/[slug]/Editor.svelte      |  4 +-
 .../tutorial/[slug]/filetree/Filetree.svelte  | 12 ++--
 src/routes/tutorial/[slug]/state.js           | 65 ++++++++-----------
 4 files changed, 52 insertions(+), 52 deletions(-)

diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
index 91a275e3d..44bafb31b 100644
--- a/src/routes/tutorial/[slug]/+page.svelte
+++ b/src/routes/tutorial/[slug]/+page.svelte
@@ -11,7 +11,15 @@
 	import ImageViewer from './ImageViewer.svelte';
 	import ScreenToggle from './ScreenToggle.svelte';
 	import Sidebar from './Sidebar.svelte';
-	import { files, state, selected_file, solution } from './state.js';
+	import {
+		files,
+		set_stubs,
+		select_file,
+		selected_name,
+		selected_file,
+		solution
+	} from './state.js';
+	import { reset } from './adapter.js';
 
 	export let data;
 
@@ -25,6 +33,11 @@
 
 	$: files.set(Object.values(data.exercise.a));
 	$: solution.set(data.exercise.b);
+	$: selected_name.set(data.exercise.focus);
+
+	afterNavigate(() => {
+		reset($files);
+	});
 
 	/**
 	 * @param {import('$lib/types').Stub[]} files
@@ -55,10 +68,6 @@
 		// TODO think about more sophisticated normalisation (e.g. truncate multiple newlines)
 		return code.replace(/\s+/g, ' ').trim();
 	}
-
-	afterNavigate(() => {
-		state.switch_exercise(data.exercise);
-	});
 </script>
 
 <svelte:head>
@@ -92,7 +101,7 @@
 				index={data.index}
 				exercise={data.exercise}
 				on:select={(e) => {
-					state.select_file(e.detail.file);
+					select_file(e.detail.file);
 				}}
 			/>
 		</section>
@@ -113,7 +122,7 @@
 								class:completed
 								disabled={!data.exercise.has_solution}
 								on:click={() => {
-									state.set_stubs(Object.values(completed ? data.exercise.a : data.exercise.b));
+									set_stubs(Object.values(completed ? data.exercise.a : data.exercise.b));
 								}}
 							>
 								{#if completed && data.exercise.has_solution}
diff --git a/src/routes/tutorial/[slug]/Editor.svelte b/src/routes/tutorial/[slug]/Editor.svelte
index 3f8676ae4..2ee8b4628 100644
--- a/src/routes/tutorial/[slug]/Editor.svelte
+++ b/src/routes/tutorial/[slug]/Editor.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { dev } from '$app/environment';
 	import { onMount } from 'svelte';
-	import { stubs, selected_name, state } from './state.js';
+	import { stubs, selected_name, update_file } from './state.js';
 
 	/**
 	 * file extension -> monaco language
@@ -203,7 +203,7 @@
 
 				if (notify) {
 					stub.contents = contents;
-					state.update_file(stub);
+					update_file(stub);
 				}
 			});
 
diff --git a/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
index d847ffdcb..53e5cb209 100644
--- a/src/routes/tutorial/[slug]/filetree/Filetree.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -3,7 +3,7 @@
 	import Folder from './Folder.svelte';
 	import * as context from './context.js';
 	import Modal from '$lib/components/Modal.svelte';
-	import { files, solution, state, stubs } from '../state.js';
+	import { files, solution, set_stubs, select_file, stubs } from '../state.js';
 	import { afterNavigate } from '$app/navigation';
 
 	/** @type {import('svelte/store').Writable<boolean>} */
@@ -56,12 +56,12 @@
 					contents: ''
 				};
 
-				state.select_file(stub.name);
+				select_file(stub.name);
 			} else {
 				stub = { type: 'directory', name, basename };
 			}
 
-			state.set_stubs([...$stubs, ...create_directories(name, $stubs), stub]);
+			set_stubs([...$stubs, ...create_directories(name, $stubs), stub]);
 		},
 
 		rename: async (to_rename, new_name) => {
@@ -97,7 +97,7 @@
 			to_rename.basename = /** @type {string} */ (new_full_name.split('/').pop());
 			to_rename.name = new_full_name;
 
-			state.set_stubs([...$stubs, ...create_directories(new_full_name, $stubs)]);
+			set_stubs([...$stubs, ...create_directories(new_full_name, $stubs)]);
 		},
 
 		remove: async (stub) => {
@@ -108,8 +108,8 @@
 				return;
 			}
 
-			state.select_file(null);
-			state.set_stubs(
+			select_file(null);
+			set_stubs(
 				$stubs.filter((s) => {
 					if (s === stub) return false;
 					if (s.name.startsWith(stub.name + '/')) return false;
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index 14eeb978d..25b7d6e1d 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -11,48 +11,39 @@ export const solution = writable({});
 export const selected_name = writable(null);
 
 export const selected_file = derived([files, selected_name], ([$files, $selected_name]) => {
-	return /** @type{import('$lib/types').FileStub | undefined} */ (
-		$files.find((stub) => stub.name === $selected_name)
+	return (
+		/** @type{import('$lib/types').FileStub | undefined} */ (
+			$files.find((stub) => stub.name === $selected_name)
 		) ?? null
-})
-
-export const state = {
-	/** @param {import('$lib/types').FileStub} file */
-	update_file: (file) => {
-		files.update($files => {
-			return $files.map((old) => {
-				if (old.name === file.name) {
-					return file;
-				}
-				return old;
-			})
+	);
+});
+
+/** @param {import('$lib/types').FileStub} file */
+export function update_file(file) {
+	files.update(($files) => {
+		return $files.map((old) => {
+			if (old.name === file.name) {
+				return file;
+			}
+			return old;
 		});
+	});
 
-		adapter.update(file);
-	},
+	adapter.update(file);
+}
 
-	/** @param {import('$lib/types').Stub[]} stubs */
-	set_stubs: (stubs) => {
-		files.set(stubs);
-		adapter.reset(stubs);
-	},
+/** @param {import('$lib/types').Stub[]} stubs */
+export function set_stubs(stubs) {
+	files.set(stubs);
+	adapter.reset(stubs);
+}
 
-	/** @param {import('$lib/types').Exercise} exercise */
-	switch_exercise: (exercise) => {
-		const stubs = Object.values(exercise.a);
+/** @param {string | null} name */
+export function select_file(name) {
+	selected_name.set(name);
+}
 
-		files.set(stubs);
-
-		selected_name.set(exercise.focus);
-
-		adapter.reset(stubs);
-	},
-
-	/** @param {string | null} name */
-	select_file: (name) => {
-		selected_name.set(name);
-	}
-};
+export const state = {};
 
 // TODO get rid
-export const stubs = files;
\ No newline at end of file
+export const stubs = files;

From 28f25c92f9e870b285d21a2bf8242b657e1532eb Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 14:34:46 -0500
Subject: [PATCH 27/28] consistency

---
 src/lib/client/adapters/webcontainer/index.js | 35 ++++++--------
 src/routes/tutorial/[slug]/+page.svelte       |  4 +-
 src/routes/tutorial/[slug]/Editor.svelte      | 16 +++----
 .../tutorial/[slug]/filetree/File.svelte      |  4 +-
 .../tutorial/[slug]/filetree/Filetree.svelte  | 48 +++++++++----------
 .../tutorial/[slug]/filetree/Folder.svelte    | 30 ++++++------
 src/routes/tutorial/[slug]/state.js           | 13 ++---
 7 files changed, 70 insertions(+), 80 deletions(-)

diff --git a/src/lib/client/adapters/webcontainer/index.js b/src/lib/client/adapters/webcontainer/index.js
index 2acae404d..125cc0e7e 100644
--- a/src/lib/client/adapters/webcontainer/index.js
+++ b/src/lib/client/adapters/webcontainer/index.js
@@ -200,13 +200,8 @@ export async function create(base, error, progress) {
 
 			// Also trigger a reload of the iframe in case new files were added / old ones deleted,
 			// because that can result in a broken UI state
-			const should_reload = (
-				!launched ||
-				will_restart || 
-				vite_error ||
-				to_delete.length > 0
-				// `|| added_new_file`, but I don't actually think that's necessary?
-			);
+			const should_reload = !launched || will_restart || vite_error || to_delete.length > 0;
+			// `|| added_new_file`, but I don't actually think that's necessary?
 
 			await launch();
 
@@ -253,10 +248,10 @@ export async function create(base, error, progress) {
  * @param {import('$lib/types').Stub} file
  */
 function will_restart_vite_dev_server(file) {
-	return file.type === 'file' &&
-			(file.name === '/vite.config.js' ||
-				file.name === '/svelte.config.js' ||
-				file.name === '/.env');
+	return (
+		file.type === 'file' &&
+		(file.name === '/vite.config.js' || file.name === '/svelte.config.js' || file.name === '/.env')
+	);
 }
 
 /**
@@ -284,11 +279,11 @@ function convert_stubs_to_tree(stubs, depth = 1) {
 	return tree;
 }
 
-/** @param {import('$lib/types').FileStub} stub */
-function to_file(stub) {
+/** @param {import('$lib/types').FileStub} file */
+function to_file(file) {
 	// special case
-	if (stub.name === '/src/app.html') {
-		const contents = stub.contents.replace(
+	if (file.name === '/src/app.html') {
+		const contents = file.contents.replace(
 			'</head>',
 			'<script type="module" src="/src/__client.js"></script></head>'
 		);
@@ -298,7 +293,7 @@ function to_file(stub) {
 		};
 	}
 
-	const contents = stub.text ? stub.contents : base64.toByteArray(stub.contents);
+	const contents = file.text ? file.contents : base64.toByteArray(file.contents);
 
 	return {
 		file: { contents }
@@ -306,12 +301,12 @@ function to_file(stub) {
 }
 
 /**
- * @param {import('$lib/types').Stub[]} stubs
+ * @param {import('$lib/types').Stub[]} files
  * @returns {Map<string, import('$lib/types').Stub>}
  */
-function stubs_to_map(stubs, map = new Map()) {
-	for (const stub of stubs) {
-		map.set(stub.name, stub);
+function stubs_to_map(files, map = new Map()) {
+	for (const file of files) {
+		map.set(file.name, file);
 	}
 	return map;
 }
diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
index 44bafb31b..2f1d21a15 100644
--- a/src/routes/tutorial/[slug]/+page.svelte
+++ b/src/routes/tutorial/[slug]/+page.svelte
@@ -13,7 +13,7 @@
 	import Sidebar from './Sidebar.svelte';
 	import {
 		files,
-		set_stubs,
+		reset_files,
 		select_file,
 		selected_name,
 		selected_file,
@@ -122,7 +122,7 @@
 								class:completed
 								disabled={!data.exercise.has_solution}
 								on:click={() => {
-									set_stubs(Object.values(completed ? data.exercise.a : data.exercise.b));
+									reset_files(Object.values(completed ? data.exercise.a : data.exercise.b));
 								}}
 							>
 								{#if completed && data.exercise.has_solution}
diff --git a/src/routes/tutorial/[slug]/Editor.svelte b/src/routes/tutorial/[slug]/Editor.svelte
index 2ee8b4628..387644008 100644
--- a/src/routes/tutorial/[slug]/Editor.svelte
+++ b/src/routes/tutorial/[slug]/Editor.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { dev } from '$app/environment';
 	import { onMount } from 'svelte';
-	import { stubs, selected_name, update_file } from './state.js';
+	import { files, selected_name, update_file } from './state.js';
 
 	/**
 	 * file extension -> monaco language
@@ -141,11 +141,11 @@
 
 		/**
 		 *
-		 * @param {import('$lib/types').Stub[]} stubs
+		 * @param {import('$lib/types').Stub[]} files
 		 */
-		function update_files(stubs) {
+		function update_files(files) {
 			notify = false;
-			for (const stub of stubs) {
+			for (const stub of files) {
 				if (stub.type === 'directory') {
 					continue;
 				}
@@ -173,7 +173,7 @@
 			}
 
 			for (const [name, model] of models) {
-				if (!stubs.some((stub) => stub.name === name)) {
+				if (!files.some((stub) => stub.name === name)) {
 					model.dispose();
 					models.delete(name);
 				}
@@ -219,15 +219,15 @@
 	}
 
 	$: if (instance) {
-		instance.update_files($stubs);
+		instance.update_files($files);
 	}
 
 	$: if (instance) {
 		instance.editor.updateOptions({ readOnly: read_only });
 	}
 
-	$: if (instance && $stubs /* to retrigger on stubs change */) {
-		const model = $selected_name && models.get($selected_name);
+	$: if (instance && $files /* to retrigger on files change */) {
+		const model = $selected_name ? models.get($selected_name) : null;
 		instance.editor.setModel(model ?? null);
 	}
 
diff --git a/src/routes/tutorial/[slug]/filetree/File.svelte b/src/routes/tutorial/[slug]/filetree/File.svelte
index 379ecb845..e762a51cb 100644
--- a/src/routes/tutorial/[slug]/filetree/File.svelte
+++ b/src/routes/tutorial/[slug]/filetree/File.svelte
@@ -2,7 +2,7 @@
 	import * as context from './context.js';
 	import Item from './Item.svelte';
 	import file_icon from '$lib/icons/file.svg';
-	import { selected_name, solution, state } from '../state.js';
+	import { selected_name, select_file, solution } from '../state.js';
 
 	/** @type {import('$lib/types').FileStub} */
 	export let file;
@@ -45,7 +45,7 @@
 	icon={file_icon}
 	selected={file.name === $selected_name}
 	{actions}
-	on:click={() => state.select_file(file.name)}
+	on:click={() => select_file(file.name)}
 	on:edit={() => {
 		renaming = true;
 	}}
diff --git a/src/routes/tutorial/[slug]/filetree/Filetree.svelte b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
index 53e5cb209..64252c98f 100644
--- a/src/routes/tutorial/[slug]/filetree/Filetree.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Filetree.svelte
@@ -3,7 +3,7 @@
 	import Folder from './Folder.svelte';
 	import * as context from './context.js';
 	import Modal from '$lib/components/Modal.svelte';
-	import { files, solution, set_stubs, select_file, stubs } from '../state.js';
+	import { files, solution, reset_files, select_file } from '../state.js';
 	import { afterNavigate } from '$app/navigation';
 
 	/** @type {import('svelte/store').Writable<boolean>} */
@@ -36,7 +36,7 @@
 				return;
 			}
 
-			const existing = $files.find((stub) => stub.name === name);
+			const existing = $files.find((file) => file.name === name);
 			if (existing) {
 				modal_text = `A ${existing.type} already exists with this name`;
 				return;
@@ -45,10 +45,10 @@
 			const basename = /** @type {string} */ (name.split('/').pop());
 
 			/** @type {import('$lib/types').Stub} */
-			let stub;
+			let file;
 
 			if (type === 'file') {
-				stub = {
+				file = {
 					type: 'file',
 					name,
 					basename,
@@ -56,18 +56,18 @@
 					contents: ''
 				};
 
-				select_file(stub.name);
+				select_file(file.name);
 			} else {
-				stub = { type: 'directory', name, basename };
+				file = { type: 'directory', name, basename };
 			}
 
-			set_stubs([...$stubs, ...create_directories(name, $stubs), stub]);
+			reset_files([...$files, ...create_directories(name, $files), file]);
 		},
 
 		rename: async (to_rename, new_name) => {
 			const new_full_name = to_rename.name.slice(0, -to_rename.basename.length) + new_name;
 
-			if ($stubs.some((s) => s.name === new_full_name)) {
+			if ($files.some((f) => f.name === new_full_name)) {
 				modal_text = `A file or folder named ${new_full_name} already exists`;
 				return;
 			}
@@ -87,9 +87,9 @@
 			}
 
 			if (to_rename.type === 'directory') {
-				for (const stub of $stubs) {
-					if (stub.name.startsWith(to_rename.name + '/')) {
-						stub.name = new_full_name + stub.name.slice(to_rename.name.length);
+				for (const file of $files) {
+					if (file.name.startsWith(to_rename.name + '/')) {
+						file.name = new_full_name + file.name.slice(to_rename.name.length);
 					}
 				}
 			}
@@ -97,11 +97,11 @@
 			to_rename.basename = /** @type {string} */ (new_full_name.split('/').pop());
 			to_rename.name = new_full_name;
 
-			set_stubs([...$stubs, ...create_directories(new_full_name, $stubs)]);
+			reset_files([...$files, ...create_directories(new_full_name, $files)]);
 		},
 
-		remove: async (stub) => {
-			if ($solution[stub.name] && !exercise.editing_constraints.remove.has(stub.name)) {
+		remove: async (file) => {
+			if ($solution[file.name] && !exercise.editing_constraints.remove.has(file.name)) {
 				modal_text =
 					'Only the following files and folders are allowed to be deleted in this tutorial chapter:\n' +
 					Array.from(exercise.editing_constraints.remove).join('\n');
@@ -109,10 +109,10 @@
 			}
 
 			select_file(null);
-			set_stubs(
-				$stubs.filter((s) => {
-					if (s === stub) return false;
-					if (s.name.startsWith(stub.name + '/')) return false;
+			reset_files(
+				$files.filter((f) => {
+					if (f === file) return false;
+					if (f.name.startsWith(file.name + '/')) return false;
 					return true;
 				})
 			);
@@ -121,14 +121,14 @@
 
 	/**
 	 * @param {string} name
-	 * @param {import('$lib/types').Stub[]} stubs
+	 * @param {import('$lib/types').Stub[]} files
 	 */
-	function create_directories(name, stubs) {
+	function create_directories(name, files) {
 		const existing = new Set();
 
-		for (const stub of stubs) {
-			if (stub.type === 'directory') {
-				existing.add(stub.name);
+		for (const file of files) {
+			if (file.type === 'directory') {
+				existing.add(file.name);
 			}
 		}
 
@@ -177,7 +177,7 @@
 			name: '',
 			basename: exercise.scope.name
 		}}
-		files={$stubs.filter((stub) => !hidden.has(stub.basename))}
+		contents={$files.filter((file) => !hidden.has(file.basename))}
 	/>
 </ul>
 
diff --git a/src/routes/tutorial/[slug]/filetree/Folder.svelte b/src/routes/tutorial/[slug]/filetree/Folder.svelte
index 75944a3d6..60bca73f5 100644
--- a/src/routes/tutorial/[slug]/filetree/Folder.svelte
+++ b/src/routes/tutorial/[slug]/filetree/Folder.svelte
@@ -5,7 +5,7 @@
 	import Item from './Item.svelte';
 	import folder_closed from '$lib/icons/folder.svg';
 	import folder_open from '$lib/icons/folder-open.svg';
-	import { stubs, solution } from '../state.js';
+	import { files, solution } from '../state.js';
 
 	/** @type {import('$lib/types').DirectoryStub} */
 	export let directory;
@@ -17,7 +17,7 @@
 	export let depth;
 
 	/** @type {Array<import('$lib/types').Stub>} */
-	export let files;
+	export let contents;
 
 	/** @type {'idle' | 'add_file' | 'add_directory' | 'renaming'} */
 	let mode = 'idle';
@@ -26,7 +26,7 @@
 
 	$: segments = get_depth(prefix);
 
-	$: children = files
+	$: children = contents
 		.filter((file) => file.name.startsWith(prefix))
 		.sort((a, b) => (a.name < b.name ? -1 : 1));
 
@@ -47,26 +47,26 @@
 		if (!$readonly) {
 			const child_prefixes = [];
 
-			for (const stub of $stubs) {
+			for (const file of $files) {
 				if (
-					stub.type === 'directory' &&
-					stub.name.startsWith(prefix) &&
-					get_depth(stub.name) === depth + 1
+					file.type === 'directory' &&
+					file.name.startsWith(prefix) &&
+					get_depth(file.name) === depth + 1
 				) {
-					child_prefixes.push(stub.name + '/');
+					child_prefixes.push(file.name + '/');
 				}
 			}
 
-			for (const stub of Object.values($solution)) {
-				if (!stub.name.startsWith(prefix)) continue;
+			for (const file of Object.values($solution)) {
+				if (!file.name.startsWith(prefix)) continue;
 
-				// if already exists in $stubs, bail
-				if ($stubs.find((s) => s.name === stub.name)) continue;
+				// if already exists in $files, bail
+				if ($files.find((f) => f.name === file.name)) continue;
 
 				// if intermediate directory exists, bail
-				if (child_prefixes.some((prefix) => stub.name.startsWith(prefix))) continue;
+				if (child_prefixes.some((prefix) => file.name.startsWith(prefix))) continue;
 
-				can_create[stub.type] = true;
+				can_create[file.type] = true;
 			}
 		}
 	}
@@ -148,7 +148,7 @@
 	{/if}
 
 	{#each child_directories as directory}
-		<svelte:self {directory} prefix={directory.name + '/'} depth={depth + 1} files={children} />
+		<svelte:self {directory} prefix={directory.name + '/'} depth={depth + 1} contents={children} />
 	{/each}
 
 	{#if mode === 'add_file'}
diff --git a/src/routes/tutorial/[slug]/state.js b/src/routes/tutorial/[slug]/state.js
index 25b7d6e1d..800c21db3 100644
--- a/src/routes/tutorial/[slug]/state.js
+++ b/src/routes/tutorial/[slug]/state.js
@@ -32,18 +32,13 @@ export function update_file(file) {
 	adapter.update(file);
 }
 
-/** @param {import('$lib/types').Stub[]} stubs */
-export function set_stubs(stubs) {
-	files.set(stubs);
-	adapter.reset(stubs);
+/** @param {import('$lib/types').Stub[]} new_files */
+export function reset_files(new_files) {
+	files.set(new_files);
+	adapter.reset(new_files);
 }
 
 /** @param {string | null} name */
 export function select_file(name) {
 	selected_name.set(name);
 }
-
-export const state = {};
-
-// TODO get rid
-export const stubs = files;

From 55c06dd19812caaee2fb4743bb3c4f00f5b68471 Mon Sep 17 00:00:00 2001
From: Rich Harris <git@rich-harris.dev>
Date: Sat, 11 Mar 2023 15:07:18 -0500
Subject: [PATCH 28/28] use correct path, prevent some errors

---
 src/routes/tutorial/[slug]/+page.svelte  | 30 +++++++++++++++++++-----
 src/routes/tutorial/[slug]/Output.svelte | 19 ++++++++++-----
 2 files changed, 37 insertions(+), 12 deletions(-)

diff --git a/src/routes/tutorial/[slug]/+page.svelte b/src/routes/tutorial/[slug]/+page.svelte
index 2f1d21a15..39d7baa27 100644
--- a/src/routes/tutorial/[slug]/+page.svelte
+++ b/src/routes/tutorial/[slug]/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 	import Output from './Output.svelte';
 	import { browser } from '$app/environment';
-	import { afterNavigate } from '$app/navigation';
+	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import ContextMenu from './filetree/ContextMenu.svelte';
 	import Filetree from './filetree/Filetree.svelte';
 	import { SplitPane } from '@rich_harris/svelte-split-pane';
@@ -26,6 +26,28 @@
 	let width = browser ? window.innerWidth : 1000;
 	let selected_view = 0;
 
+	let path = data.exercise.path;
+	let paused = false;
+
+	/** @type {import('$lib/types').Stub[]} */
+	let previous_files = [];
+
+	beforeNavigate(() => {
+		previous_files = $files;
+	});
+
+	afterNavigate(async () => {
+		const will_delete = previous_files.some((file) => !(file.name in data.exercise.a));
+
+		console.log({ will_delete });
+
+		if (data.exercise.path !== path || will_delete) paused = true;
+		await reset($files);
+
+		path = data.exercise.path;
+		paused = false;
+	});
+
 	$: mobile = writable(false);
 	$: $mobile = width < 768;
 
@@ -35,10 +57,6 @@
 	$: solution.set(data.exercise.b);
 	$: selected_name.set(data.exercise.focus);
 
-	afterNavigate(() => {
-		reset($files);
-	});
-
 	/**
 	 * @param {import('$lib/types').Stub[]} files
 	 * @param {Record<string, import('$lib/types').Stub> | null} solution
@@ -141,7 +159,7 @@
 				</section>
 
 				<section slot="b" class="preview">
-					<Output path={data.exercise.path} />
+					<Output exercise={data.exercise} {paused} />
 				</section>
 			</SplitPane>
 		</section>
diff --git a/src/routes/tutorial/[slug]/Output.svelte b/src/routes/tutorial/[slug]/Output.svelte
index b55e4cae2..cac507623 100644
--- a/src/routes/tutorial/[slug]/Output.svelte
+++ b/src/routes/tutorial/[slug]/Output.svelte
@@ -6,22 +6,27 @@
 	import Loading from './Loading.svelte';
 	import { base, error, progress, subscribe } from './adapter';
 
-	/** @type {string} */
-	export let path;
+	/** @type {import('$lib/types').Exercise} */
+	export let exercise;
+
+	/** @type {boolean} */
+	export let paused;
 
 	/** @type {HTMLIFrameElement} */
 	let iframe;
 	let loading = true;
 	let initial = true;
 
+	// reset `path` to `exercise.path` each time, but allow it to be controlled by the iframe
+	let path = exercise.path;
+
+	$: if ($base) set_iframe_src($base + (path = exercise.path));
+
 	onMount(() => {
 		const unsubscribe = subscribe('reload', () => {
 			set_iframe_src($base + path);
 		});
 
-		// this is for HMR purposes
-		if ($base) set_iframe_src($base + path);
-
 		return () => {
 			unsubscribe();
 		};
@@ -38,6 +43,8 @@
 	async function handle_message(e) {
 		if (e.origin !== $base) return;
 
+		if (paused) return;
+
 		if (e.data.type === 'ping') {
 			path = e.data.data.path ?? path;
 			loading = false;
@@ -89,7 +96,7 @@
 		<iframe bind:this={iframe} title="Output" />
 	{/if}
 
-	{#if loading || $error}
+	{#if paused || loading || $error}
 		<Loading {initial} error={$error} progress={$progress.value} status={$progress.text} />
 	{/if}
 </div>