Portable editor (#419)

* pass workspace around as prop/context

* instantiate workspace inside tutorial page

* lint

Author: Rich-Harris

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

@@ -9,7 +9,7 @@
 	import Output from './Output.svelte';
 	import { ScreenToggle } from '@sveltejs/site-kit/components';
 	import Sidebar from './Sidebar.svelte';
-	import { solution, workspace } from './state.svelte';
+	import { solution, Workspace } from './state.svelte';
 	import { create_directories } from './utils';
 	import { needs_webcontainers, text_files } from './shared';
 	import OutputRollup from './OutputRollup.svelte';
@@ -24,6 +24,8 @@
 
 	let { data }: Props = $props();
 
+	const workspace = new Workspace();
+
 	let path = data.exercise.path;
 	let show_editor = $state(false);
 	let show_filetree = $state(false);
@@ -278,6 +280,7 @@
 								{:else}
 									<Filetree
 										exercise={data.exercise}
+										{workspace}
 										on:select={(e) => {
 											select_file(e.detail.name);
 										}}
@@ -286,14 +289,15 @@
 							</section>
 
 							<section slot="b" class="editor-container">
-								<Editor exercise={data.exercise} warnings={adapter_state.warnings} />
+								<Editor exercise={data.exercise} warnings={adapter_state.warnings} {workspace} />
 								<ImageViewer selected={workspace.selected_file} />
 
 								{#if mobile && show_filetree}
 									<div class="mobile-filetree">
 										<Filetree
 											mobile
 											exercise={data.exercise}
+											{workspace}
 											on:select={(e) => {
 												navigate_to_file(e.detail.name);
 											}}
@@ -306,7 +310,7 @@
 
 					<section slot="b" class="preview">
 						{#if needs_webcontainers($page.data.exercise)}
-							<Output exercise={data.exercise} {paused} />
+							<Output exercise={data.exercise} {paused} {workspace} />
 						{:else}
 							<OutputRollup />
 						{/if}

apps/svelte.dev/src/routes/tutorial/[...slug]/Editor.svelte

@@ -13,7 +13,7 @@
 	import { svelteTheme } from '@sveltejs/repl/theme';
 	import { basicSetup } from 'codemirror';
 	import { onMount, tick } from 'svelte';
-	import { workspace } from './state.svelte';
+	import { Workspace } from './state.svelte';
 	import { autocomplete_for_svelte } from '@sveltejs/site-kit/codemirror';
 	import type { Diagnostic } from '@codemirror/lint';
 	import type { Exercise, Stub } from '$lib/tutorial';
@@ -23,9 +23,10 @@
 	interface Props {
 		exercise: Exercise;
 		warnings: Record<string, Warning[]>;
+		workspace: Workspace;
 	}
 
-	let { exercise, warnings }: Props = $props();
+	let { exercise, warnings, workspace }: Props = $props();
 
 	let container = $state() as HTMLDivElement;
 

apps/svelte.dev/src/routes/tutorial/[...slug]/Loading.svelte

@@ -1,15 +1,15 @@
 <script lang="ts">
-	import { load_webcontainer, reset } from './adapter.svelte';
-	import { workspace } from './state.svelte';
+	import { load_webcontainer } from './adapter.svelte';
 
 	interface Props {
 		initial: boolean;
 		error?: Error | null;
 		progress: number;
 		status: string;
+		onreset?: () => void;
 	}
 
-	let { initial, error = null, progress, status }: Props = $props();
+	let { initial, error = null, progress, status, onreset }: Props = $props();
 </script>
 
 <div class="loading">
@@ -69,7 +69,7 @@
 							onclick={async () => {
 								error = null;
 								load_webcontainer(true);
-								await reset(workspace.files);
+								onreset?.();
 							}}>clicking here</button
 						>.
 					</p>

apps/svelte.dev/src/routes/tutorial/[...slug]/Output.svelte

@@ -9,15 +9,17 @@
 	import { onMount } from 'svelte';
 	import Chrome from './Chrome.svelte';
 	import Loading from './Loading.svelte';
-	import { adapter_state, subscribe } from './adapter.svelte';
+	import { adapter_state, subscribe, reset } from './adapter.svelte';
 	import type { Exercise } from '$lib/tutorial';
+	import type { Workspace } from './state.svelte';
 
 	interface Props {
 		exercise: Exercise;
 		paused: boolean;
+		workspace: Workspace;
 	}
 
-	let { exercise, paused }: Props = $props();
+	let { exercise, paused, workspace }: Props = $props();
 
 	let iframe = $state() as HTMLIFrameElement;
 	let loading = $state(true);
@@ -146,6 +148,9 @@
 			error={adapter_state.error}
 			progress={adapter_state.progress.value}
 			status={adapter_state.progress.text}
+			onreset={() => {
+				reset(workspace.files);
+			}}
 		/>
 	{/if}
 

apps/svelte.dev/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 { solution, workspace } from '../state.svelte';
+	import { solution } from '../state.svelte';
 	import type { FileStub, MenuItem } from '$lib/tutorial';
 
 	interface Props {
@@ -12,7 +12,7 @@
 
 	let { file, depth }: Props = $props();
 
-	const { rename, remove, select } = context.get();
+	const { rename, remove, select, workspace } = context.get();
 
 	let renaming = $state(false);
 

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

@@ -4,17 +4,18 @@
 	import Folder from './Folder.svelte';
 	import * as context from './context.js';
 	import Modal from '$lib/components/Modal.svelte';
-	import { solution, workspace } from '../state.svelte';
+	import { solution, Workspace } from '../state.svelte';
 	import { create_directories } from '../utils';
 	import { afterNavigate } from '$app/navigation';
 	import type { Exercise, Stub } from '$lib/tutorial';
 
 	interface Props {
 		exercise: Exercise;
 		mobile?: boolean;
+		workspace: Workspace;
 	}
 
-	let { exercise, mobile = false }: Props = $props();
+	let { exercise, mobile = false, workspace }: Props = $props();
 
 	const dispatch = createEventDispatcher();
 
@@ -136,7 +137,9 @@
 
 		select: (name) => {
 			dispatch('select', { name });
-		}
+		},
+
+		workspace
 	});
 
 	function is_deleted(file: Stub) {

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

@@ -6,7 +6,7 @@
 	import Item from './Item.svelte';
 	import folder_closed from '$lib/icons/folder.svg';
 	import folder_open from '$lib/icons/folder-open.svg';
-	import { solution, workspace } from '../state.svelte';
+	import { solution } from '../state.svelte';
 	import type { DirectoryStub, FileStub, MenuItem, Stub } from '$lib/tutorial';
 
 	interface Props {
@@ -20,7 +20,7 @@
 
 	let renaming = $state(false);
 
-	const { collapsed, rename, add, remove } = context.get();
+	const { collapsed, rename, add, remove, workspace } = context.get();
 
 	let segments = $derived(get_depth(prefix));
 

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

@@ -7,6 +7,7 @@ import { setContext, getContext } from 'svelte';
  *   rename: (stub: import('$lib/tutorial').Stub, name: string) => Promise<void>;
  *   remove: (stub: import('$lib/tutorial').Stub) => Promise<void>;
  *   select: (name: string) => void;
+ *   workspace: import('../state.svelte').Workspace
  * }} FileTreeContext
  */
 

apps/svelte.dev/src/routes/tutorial/[...slug]/state.svelte.ts

@@ -2,7 +2,7 @@ import { writable } from 'svelte/store';
 import * as adapter from './adapter.svelte';
 import type { FileStub, Stub } from '$lib/tutorial';
 
-class Workspace {
+export class Workspace {
 	files = $state.raw<Stub[]>([]);
 	creating = $state.raw<{ parent: string; type: 'file' | 'directory' } | null>(null);
 	selected_name = $state<string | null>(null);
@@ -40,7 +40,5 @@ class Workspace {
 	}
 }
 
-export const workspace = new Workspace();
-
 // this is separate to the workspace
 export const solution = writable({} as Record<string, Stub>);