convert stores to $state objects

Author: dummdidumm

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

@@ -6,7 +6,7 @@ import { escape_html, get_depth } from '../../../utils.js';
 import { ready } from '../common/index.js';
 
 /**
- * @typedef {import("../../../../routes/tutorial/[slug]/state.js").CompilerWarning} CompilerWarning
+ * @typedef {import("../../../../routes/tutorial/[slug]/state.svelte.js").CompilerWarning} CompilerWarning
  */
 
 const converter = new AnsiToHtml({
@@ -17,15 +17,11 @@ const converter = new AnsiToHtml({
 let vm;
 
 /**
- * @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
- * @param {import('svelte/store').Writable<string[]>} logs
- * @param {import('svelte/store').Writable<Record<string, CompilerWarning[]>>} warnings
+ * @param {typeof import('../../../../routes/tutorial/[slug]/adapter.svelte.js').a} state
  * @returns {Promise<import('$lib/types').Adapter>}
  */
-export async function create(base, error, progress, logs, warnings) {
-	progress.set({ value: 0, text: 'loading files' });
+export async function create(state) {
+	state.progress = { value: 0, text: 'loading files' };
 
 	const q = yootils.queue(1);
 	/** @type {Map<string, Array<import('$lib/types').FileStub>>} */
@@ -34,10 +30,10 @@ export async function create(base, error, progress, logs, warnings) {
 	/** Paths and contents of the currently loaded file stubs */
 	let current_stubs = stubs_to_map([]);
 
-	progress.set({ value: 1 / 5, text: 'booting webcontainer' });
+	state.progress = { value: 1 / 5, text: 'booting webcontainer' };
 	vm = await WebContainer.boot();
 
-	progress.set({ value: 2 / 5, text: 'writing virtual files' });
+	state.progress = { value: 2 / 5, text: 'writing virtual files' };
 	const common = await ready;
 	await vm.mount({
 		'common.zip': {
@@ -48,48 +44,31 @@ export async function create(base, error, progress, logs, warnings) {
 		}
 	});
 
-	/** @type {Record<string, CompilerWarning[]>} */
-	let $warnings;
-	warnings.subscribe((value) => $warnings = value);
-
-	/** @type {any} */
-	let timeout;
-
-	/** @param {number} msec */
-	function schedule_to_update_warning(msec) {
-		clearTimeout(timeout);
-		timeout = setTimeout(() => warnings.set($warnings), msec);
-	}
-
 	const log_stream = () =>
 		new WritableStream({
 			write(chunk) {
 				if (chunk === '\x1B[1;1H') {
 					// clear screen
-					logs.set([]);
-
+					state.logs = [];
 				} else if (chunk?.startsWith('svelte:warnings:')) {
 					/** @type {CompilerWarning} */
 					const warn = JSON.parse(chunk.slice(16));
-					const current = $warnings[warn.filename];
+					const current = state.warnings[warn.filename];
 
 					if (!current) {
-						$warnings[warn.filename] = [warn];
-					// the exact same warning may be given multiple times in a row
-					} else if (!current.some((s) => (s.code === warn.code && s.pos === warn.pos))) {
+						state.warnings[warn.filename] = [warn];
+						// the exact same warning may be given multiple times in a row
+					} else if (!current.some((s) => s.code === warn.code && s.pos === warn.pos)) {
 						current.push(warn);
 					}
-
-					schedule_to_update_warning(100);
-
 				} else {
 					const log = converter.toHtml(escape_html(chunk)).replace(/\n/g, '<br>');
-					logs.update(($logs) => [...$logs, log]);
+					state.logs = [...state.logs, log];
 				}
 			}
 		});
 
-	progress.set({ value: 3 / 5, text: 'unzipping files' });
+	state.progress = { value: 3 / 5, text: 'unzipping files' };
 	const unzip = await vm.spawn('node', ['unzip.cjs']);
 	unzip.output.pipeTo(log_stream());
 	const code = await unzip.exit;
@@ -101,11 +80,11 @@ export async function create(base, error, progress, logs, warnings) {
 	await vm.spawn('chmod', ['a+x', 'node_modules/vite/bin/vite.js']);
 
 	vm.on('server-ready', (_port, url) => {
-		base.set(url);
+		state.base = url;
 	});
 
 	vm.on('error', ({ message }) => {
-		error.set(new Error(message));
+		state.error = new Error(message);
 	});
 
 	let launched = false;
@@ -114,7 +93,7 @@ export async function create(base, error, progress, logs, warnings) {
 		if (launched) return;
 		launched = true;
 
-		progress.set({ value: 4 / 5, text: 'starting dev server' });
+		state.progress = { value: 4 / 5, text: 'starting dev server' };
 
 		await new Promise(async (fulfil, reject) => {
 			const error_unsub = vm.on('error', (error) => {
@@ -124,7 +103,7 @@ export async function create(base, error, progress, logs, warnings) {
 
 			const ready_unsub = vm.on('server-ready', (_port, base) => {
 				ready_unsub();
-				progress.set({ value: 5 / 5, text: 'ready' });
+				state.progress = { value: 5 / 5, text: 'ready' };
 				fulfil(base); // this will be the last thing that happens if everything goes well
 			});
 
@@ -179,30 +158,26 @@ export async function create(base, error, progress, logs, warnings) {
 				// Don't delete the node_modules folder when switching from one exercise to another
 				// where, as this crashes the dev server.
 				const to_delete = [
-					...Array.from(current_stubs.keys()).filter(
-						(s) => !s.startsWith('/node_modules')
-					),
+					...Array.from(current_stubs.keys()).filter((s) => !s.startsWith('/node_modules')),
 					...force_delete
 				];
 
 				// initialize warnings of written files
 				to_write
-					.filter((stub) => stub.type === 'file' && $warnings[stub.name])
-					.forEach((stub) => $warnings[stub.name] = []);
+					.filter((stub) => stub.type === 'file' && state.warnings[stub.name])
+					.forEach((stub) => (state.warnings[stub.name] = []));
 				// remove warnings of deleted files
 				to_delete
-					.filter((stubname) => $warnings[stubname])
-					.forEach((stubname) => delete $warnings[stubname]);
-
-				warnings.set($warnings);
+					.filter((stubname) => state.warnings[stubname])
+					.forEach((stubname) => delete state.warnings[stubname]);
 
 				current_stubs = stubs_to_map(stubs);
 
 				// 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 = launched &&
-					(to_write.some(is_config) || to_delete.some(is_config_path));
+				const will_restart =
+					launched && (to_write.some(is_config) || to_delete.some(is_config_path));
 				const promise = will_restart ? wait_for_restart_vite() : Promise.resolve();
 
 				for (const file of to_delete) {
@@ -223,14 +198,13 @@ export async function create(base, error, progress, logs, warnings) {
 			});
 		},
 		update: (file) => {
-
 			let queue = q_per_file.get(file.name);
 			if (queue) {
 				queue.push(file);
 				return Promise.resolve(false);
 			}
 
-			q_per_file.set(file.name, queue = [file]);
+			q_per_file.set(file.name, (queue = [file]));
 
 			return q.add(async () => {
 				/** @type {import('@webcontainer/api').FileSystemTree} */
@@ -257,16 +231,14 @@ export async function create(base, error, progress, logs, warnings) {
 				const will_restart = is_config(file);
 
 				while (queue && queue.length > 0) {
-
 					// if the file is updated many times rapidly, get the most recently updated one
 					const file = /** @type {import('$lib/types').FileStub} */ (queue.pop());
-					queue.length = 0
+					queue.length = 0;
 
 					tree[basename] = to_file(file);
 
 					// initialize warnings of this file
-					$warnings[file.name] = [];
-					schedule_to_update_warning(100);
+					state.warnings[file.name] = [];
 
 					await vm.mount(root);
 
@@ -280,7 +252,7 @@ export async function create(base, error, progress, logs, warnings) {
 					await new Promise((f) => setTimeout(f, 50));
 				}
 
-				q_per_file.delete(file.name)
+				q_per_file.delete(file.name);
 
 				return will_restart;
 			});

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

@@ -2,23 +2,15 @@
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import { SplitPane } from '@rich_harris/svelte-split-pane';
 	import { Icon } from '@sveltejs/site-kit/components';
-	import { reset } from './adapter.js';
+	import { reset } from './adapter.svelte.js';
 	import Editor from './Editor.svelte';
 	import ContextMenu from './filetree/ContextMenu.svelte';
 	import Filetree from './filetree/Filetree.svelte';
 	import ImageViewer from './ImageViewer.svelte';
 	import Output from './Output.svelte';
 	import ScreenToggle from './ScreenToggle.svelte';
 	import Sidebar from './Sidebar.svelte';
-	import {
-		create_directories,
-		creating,
-		files,
-		reset_files,
-		selected_file,
-		selected_name,
-		solution
-	} from './state.js';
+	import { create_directories, reset_files, s } from './state.svelte.js';
 
 	let { data } = $props();
 
@@ -32,20 +24,20 @@
 	let previous_files = [];
 
 	let mobile = $derived(w < 800); // for the things we can't do with media queries
-	let completed = $derived(is_completed($files, data.exercise.b));
+	let completed = $derived(is_completed(s.files, data.exercise.b));
 
 	// meh: I have to duplicate this because $effect.pre doesn't run on the server
-	files.set(Object.values(data.exercise.a));
-	solution.set(data.exercise.b);
-	selected_name.set(data.exercise.focus);
+	s.files = Object.values(data.exercise.a);
+	s.solution = data.exercise.b;
+	s.selected_name = data.exercise.focus;
 	$effect.pre(() => {
-		files.set(Object.values(data.exercise.a));
-		solution.set(data.exercise.b);
-		selected_name.set(data.exercise.focus);
+		s.files = Object.values(data.exercise.a);
+		s.solution = data.exercise.b;
+		s.selected_name = data.exercise.focus;
 	});
 
 	beforeNavigate(() => {
-		previous_files = $files;
+		previous_files = s.files;
 	});
 
 	afterNavigate(async () => {
@@ -54,7 +46,7 @@
 		const will_delete = previous_files.some((file) => !(file.name in data.exercise.a));
 
 		if (data.exercise.path !== path || will_delete) paused = true;
-		await reset($files);
+		await reset(s.files);
 
 		path = data.exercise.path;
 		paused = false;
@@ -92,41 +84,41 @@
 
 	/** @param {string | null} name */
 	function select_file(name) {
-		const file = name && $files.find((file) => file.name === name);
+		const file = name && s.files.find((file) => file.name === name);
 
 		if (!file && name) {
 			// trigger file creation input. first, create any intermediate directories
-			const new_directories = create_directories(name, $files);
+			const new_directories = create_directories(name, s.files);
 
 			if (new_directories.length > 0) {
-				reset_files([...$files, ...new_directories]);
+				reset_files([...s.files, ...new_directories]);
 			}
 
 			// find the parent directory
 			const parent = name.split('/').slice(0, -1).join('/');
 
-			creating.set({
+			s.creating = {
 				parent,
 				type: 'file'
-			});
+			};
 
 			show_filetree = true;
 		} else {
 			show_filetree = false;
-			selected_name.set(name);
+			s.selected_name = name;
 		}
 
 		show_editor = true;
 	}
 
 	/** @param {string} name */
 	function navigate_to_file(name) {
-		if (name === $selected_name) return;
+		if (name === s.selected_name) return;
 
 		select_file(name);
 
 		if (mobile) {
-			const q = new URLSearchParams({ file: $selected_name || '' });
+			const q = new URLSearchParams({ file: s.selected_name || '' });
 			history.pushState({}, '', `?${q}`);
 		}
 	}
@@ -208,7 +200,7 @@
 							<section class="navigator" slot="a">
 								{#if mobile}
 									<button class="file" on:click={() => (show_filetree = !show_filetree)}>
-										{$selected_file?.name.replace(
+										{s.selected_file?.name.replace(
 											data.exercise.scope.prefix,
 											data.exercise.scope.name + '/'
 										) ?? 'Files'}
@@ -240,7 +232,7 @@
 
 							<section class="editor-container" slot="b">
 								<Editor />
-								<ImageViewer selected={$selected_file} />
+								<ImageViewer selected={s.selected_file} />
 
 								{#if mobile && show_filetree}
 									<div class="mobile-filetree">
@@ -273,7 +265,7 @@
 				const url = new URL(location.origin + location.pathname);
 
 				if (show_editor) {
-					url.searchParams.set('file', $selected_name ?? '');
+					url.searchParams.set('file', s.selected_name ?? '');
 				}
 
 				history.pushState({}, '', url);