Robustify workspace

apps/svelte.dev/src/lib/tutorial/adapters/rollup/index.svelte.ts

@@ -37,11 +37,11 @@ export async function create(): Promise<Adapter> {
 	state.progress = { value: 0.5, text: 'loading svelte compiler' };
 
 	/** Paths and contents of the currently loaded file stubs */
-	let current_stubs = stubs_to_map([]);
+	let current_files: Item[] = [];
 
 	async function compile() {
 		state.bundle = await bundler.bundle(
-			[...current_stubs.values()]
+			current_files
 				// TODO we can probably remove all the SvelteKit specific stuff from the tutorial content once this settles down
 				.filter((f): f is File => f.name.startsWith('/src/lib/') && f.type === 'file')
 				.map((f) => ({ ...f, name: f.name.slice(9) })),
@@ -54,30 +54,21 @@ export async function create(): Promise<Adapter> {
 	const q = yootils.queue(1);
 
 	return {
-		reset: (stubs) => {
+		reset: (files) => {
 			return q.add(async () => {
-				current_stubs = stubs_to_map(stubs, current_stubs);
+				current_files = files;
 
 				await compile();
-
 				return false;
 			});
 		},
 		update: (file) => {
 			return q.add(async () => {
-				current_stubs.set(file.name, file);
+				current_files = current_files.map((old) => (old.name === file.name ? file : old));
 
 				await compile();
-
 				return false;
 			});
 		}
 	};
 }
-
-function stubs_to_map(files: Item[], map = new Map<string, Item>()) {
-	for (const file of files) {
-		map.set(file.name, file);
-	}
-	return map;
-}

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

@@ -101,7 +101,7 @@
 		}, 500);
 	}
 
-	function handle_change() {
+	function onchange() {
 		const was_modified = modified;
 		modified = true;
 
@@ -170,9 +170,7 @@
 				{relaxed}
 				{can_escape}
 				injectedJS={mapbox_setup}
-				change={handle_change}
-				add={handle_change}
-				remove={handle_change}
+				{onchange}
 				previewTheme={$theme.current}
 			/>
 		</div>

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

@@ -10,14 +10,12 @@
 	import { ScreenToggle } from '@sveltejs/site-kit/components';
 	import Sidebar from './Sidebar.svelte';
 	import { solution } from './state.svelte';
-	import { create_directories } from './utils';
 	import { needs_webcontainers, text_files } from './shared';
 	import OutputRollup from './OutputRollup.svelte';
 	import { page } from '$app/stores';
 	import Controls from './Controls.svelte';
 	import type { Item } from 'editor';
 	import type { Snapshot } from './$types.js';
-	import { tick } from 'svelte';
 
 	interface Props {
 		data: any;
@@ -31,9 +29,6 @@
 	let paused = $state(false);
 	let w = $state(1000);
 
-	let editor: any; // TODO
-	let skip_set_files = true;
-
 	let previous_files: Item[] = [];
 
 	function create_files(map: Record<string, string>): Record<string, Item> {
@@ -119,15 +114,18 @@
 		const file = name && workspace.files.find((file) => file.name === name);
 
 		if (!file && name) {
-			// trigger file creation input. first, create any intermediate directories
-			const new_directories = create_directories(name, workspace.files);
+			// create intermediate directories if necessary
+			const parent = name.split('/').slice(0, -1).join('/');
 
-			if (new_directories.length > 0) {
-				workspace.reset_files([...workspace.files, ...new_directories]);
-			}
+			if (!workspace.files.some((item) => item.name === parent)) {
+				const basename = parent.split('/').pop()!;
 
-			// find the parent directory
-			const parent = name.split('/').slice(0, -1).join('/');
+				workspace.add({
+					type: 'directory',
+					name: parent,
+					basename
+				});
+			}
 
 			workspace.creating = {
 				parent,
@@ -137,19 +135,22 @@
 			show_filetree = true;
 		} else {
 			show_filetree = false;
-			workspace.selected_name = name;
+
+			if (name) {
+				workspace.select(name);
+			}
 		}
 
 		show_editor = true;
 	}
 
 	function navigate_to_file(name: string) {
-		if (name === workspace.selected_name) return;
+		if (name === workspace.current.name) return;
 
 		select_file(name);
 
 		if (mobile) {
-			const q = new URLSearchParams({ file: workspace.selected_name || '' });
+			const q = new URLSearchParams({ file: workspace.current.name || '' });
 			history.pushState({}, '', `?${q}`);
 		}
 	}
@@ -171,9 +172,8 @@
 	let a = $derived(create_files(data.exercise.a));
 	let b = $derived(create_files({ ...data.exercise.a, ...data.exercise.b }));
 
-	const workspace = new Workspace({
-		files: Object.values(a),
-		selected_name: data.exercise.focus,
+	const workspace = new Workspace(Object.values(a), {
+		initial: data.exercise.focus,
 		onupdate(file) {
 			adapter.update(file);
 		},
@@ -188,28 +188,16 @@
 	let mobile = $derived(w < 800);
 
 	$effect(() => {
-		workspace.files = Object.values(a);
-	});
-
-	$effect(() => {
+		// TODO get rid of this store/effect
 		solution.set(b);
 	});
 
-	$effect(() => {
-		workspace.selected_name = data.exercise.focus; // TODO this probably belongs in afterNavigate
-	});
-
 	beforeNavigate(() => {
-		skip_set_files = true;
 		previous_files = workspace.files;
 	});
 
 	afterNavigate(async () => {
-		skip_set_files = false;
-
-		editor.reset();
-
-		w = window.innerWidth;
+		workspace.reset(Object.values(a), data.exercise.focus);
 
 		const will_delete = previous_files.some((file) => !(file.name in a));
 
@@ -220,11 +208,6 @@
 		paused = false;
 	});
 
-	$effect(() => {
-		const files = workspace.files; // capture the dependency. TODO don't use an effect here
-		if (!skip_set_files) editor.update_files(files);
-	});
-
 	let completed = $derived(is_completed(workspace.files, b));
 </script>
 
@@ -268,7 +251,7 @@
 		exercise={data.exercise}
 		{completed}
 		toggle={() => {
-			workspace.reset_files(Object.values(completed ? a : b));
+			workspace.set(Object.values(completed ? a : b));
 		}}
 	/>
 
@@ -297,34 +280,19 @@
 							<section slot="a" class="navigator">
 								{#if mobile}
 									<button class="file" onclick={() => (show_filetree = !show_filetree)}>
-										{workspace.selected_name?.replace(
+										{workspace.current.name.replace(
 											data.exercise.scope.prefix,
 											data.exercise.scope.name + '/'
 										) ?? 'Files'}
 									</button>
 								{:else}
-									<Filetree
-										exercise={data.exercise}
-										{workspace}
-										on:select={(e) => {
-											select_file(e.detail.name);
-										}}
-									/>
+									<Filetree exercise={data.exercise} {workspace} />
 								{/if}
 							</section>
 
 							<section slot="b" class="editor-container">
 								<Editor
-									bind:this={editor}
 									{workspace}
-									onchange={async (file, contents) => {
-										skip_set_files = true;
-
-										workspace.update_file({ ...file, contents });
-
-										await tick();
-										skip_set_files = false;
-									}}
 									autocomplete_filter={(file) => {
 										return (
 											file.name.startsWith('/src') &&
@@ -334,18 +302,11 @@
 										);
 									}}
 								/>
-								<ImageViewer selected={workspace.selected_file} />
+								<ImageViewer selected={workspace.current} />
 
 								{#if mobile && show_filetree}
 									<div class="mobile-filetree">
-										<Filetree
-											mobile
-											exercise={data.exercise}
-											{workspace}
-											on:select={(e) => {
-												navigate_to_file(e.detail.name);
-											}}
-										/>
+										<Filetree mobile exercise={data.exercise} {workspace} />
 									</div>
 								{/if}
 							</section>
@@ -374,7 +335,7 @@
 				const url = new URL(location.origin + location.pathname);
 
 				if (show_editor) {
-					url.searchParams.set('file', workspace.selected_name ?? '');
+					url.searchParams.set('file', workspace.current.name ?? '');
 				}
 
 				history.pushState({}, '', url); // TODO use SvelteKit pushState

apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/File.svelte

@@ -47,7 +47,7 @@
 	{renaming}
 	basename={file.basename}
 	icon={file_icon}
-	selected={file.name === workspace.selected_name}
+	selected={file.name === workspace.current.name}
 	{actions}
 	onclick={() => select(file.name)}
 	onedit={() => {

apps/svelte.dev/src/routes/tutorial/[...slug]/filetree/Filetree.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
 	import { writable } from 'svelte/store';
 	import Folder from './Folder.svelte';
 	import * as context from './context.js';
 	import Modal from '$lib/components/Modal.svelte';
 	import { solution } from '../state.svelte';
-	import { create_directories } from '../utils';
 	import { afterNavigate } from '$app/navigation';
 	import type { Exercise } from '$lib/tutorial';
 	import type { Workspace, Item } from 'editor';
@@ -18,8 +16,6 @@
 
 	let { exercise, mobile = false, workspace }: Props = $props();
 
-	const dispatch = createEventDispatcher();
-
 	const hidden = new Set(['__client.js', 'node_modules', '__delete']);
 
 	let modal_text = $state('');
@@ -61,15 +57,7 @@
 					? { type, name, basename, text: true, contents: '' }
 					: { type, name, basename };
 
-			workspace.reset_files([
-				...workspace.files,
-				...create_directories(name, workspace.files),
-				file
-			]);
-
-			if (type === 'file') {
-				dispatch('select', { name });
-			}
+			workspace.add(file);
 		},
 
 		rename: async (to_rename, new_name) => {
@@ -94,27 +82,8 @@
 				return;
 			}
 
-			if (to_rename.type === 'directory') {
-				for (const file of workspace.files) {
-					if (file.name.startsWith(to_rename.name + '/')) {
-						file.name = new_full_name + file.name.slice(to_rename.name.length);
-					}
-				}
-			}
-
-			const was_selected = workspace.selected_name === to_rename.name;
-
-			to_rename.basename = new_full_name.split('/').pop()!;
-			to_rename.name = new_full_name;
-
-			workspace.reset_files([
-				...workspace.files,
-				...create_directories(new_full_name, workspace.files)
-			]);
-
-			if (was_selected) {
-				dispatch('select', { name: new_full_name });
-			}
+			workspace.rename(to_rename, new_full_name);
+			workspace.focus();
 		},
 
 		remove: async (file) => {
@@ -125,19 +94,11 @@
 				return;
 			}
 
-			dispatch('select', { name: null });
-
-			workspace.reset_files(
-				workspace.files.filter((f) => {
-					if (f === file) return false;
-					if (f.name.startsWith(file.name + '/')) return false;
-					return true;
-				})
-			);
+			workspace.remove(file);
 		},
 
 		select: (name) => {
-			dispatch('select', { name });
+			workspace.select(name);
 		},
 
 		workspace