Decouple editor from exercise

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

@@ -30,6 +30,8 @@
 	let paused = $state(false);
 	let w = $state(1000);
 
+	let editor: any; // TODO
+
 	let previous_files: Item[] = [];
 
 	function create_files(map: Record<string, string>): Record<string, Item> {
@@ -301,9 +303,17 @@
 
 							<section slot="b" class="editor-container">
 								<Editor
-									exercise={data.exercise}
+									bind:this={editor}
 									warnings={adapter.adapter_state.warnings}
 									{workspace}
+									autocomplete_filter={(file) => {
+										return (
+											file.name.startsWith('/src') &&
+											file.name.startsWith(data.exercise.scope.prefix) &&
+											file.name !== '/src/__client.js' &&
+											file.name !== '/src/app.html'
+										);
+									}}
 								/>
 								<ImageViewer selected={workspace.selected_file} />
 

packages/editor/package.json

@@ -60,5 +60,8 @@
 		"typescript": "^5.0.0",
 		"vite": "^5.0.11"
 	},
-	"type": "module"
+	"type": "module",
+	"dependencies": {
+		"esm-env": "^1.0.0"
+	}
 }

packages/editor/src/lib/Editor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
+	import { BROWSER } from 'esm-env';
 	import { afterNavigate, beforeNavigate } from '$app/navigation';
 	import { acceptCompletion } from '@codemirror/autocomplete';
 	import { indentWithTab } from '@codemirror/commands';
@@ -12,22 +12,22 @@
 	import { svelte } from '@replit/codemirror-lang-svelte';
 	import { svelteTheme } from '@sveltejs/repl/theme';
 	import { basicSetup } from 'codemirror';
-	import { onMount, tick } from 'svelte';
+	import { tick } from 'svelte';
 	import { autocomplete_for_svelte } from '@sveltejs/site-kit/codemirror';
 	import type { Diagnostic } from '@codemirror/lint';
-	import { Workspace, type Item } from './Workspace.svelte.js';
+	import { Workspace, type Item, type File } from './Workspace.svelte.js';
 	import type { Warning } from 'svelte/compiler';
 	import './codemirror.css';
 
 	interface Props {
-		exercise: any; // TODO this needs to be decoupled
 		warnings: Record<string, Warning[]>; // TODO this should include errors as well
 		workspace: Workspace;
+		autocomplete_filter?: (file: File) => boolean;
 	}
 
-	let { exercise, warnings, workspace }: Props = $props();
+	let { warnings, workspace, autocomplete_filter = () => true }: Props = $props();
 
-	let container = $state() as HTMLDivElement;
+	let container: HTMLDivElement;
 
 	let preserve_editor_focus = $state(false);
 	let skip_reset = true;
@@ -103,14 +103,10 @@
 							() => workspace.selected_name!,
 							() =>
 								files
-									.filter(
-										(file) =>
-											file.type === 'file' &&
-											file.name.startsWith('/src') &&
-											file.name.startsWith(exercise.scope.prefix) &&
-											file.name !== '/src/__client.js' &&
-											file.name !== '/src/app.html'
-									)
+									.filter((file) => {
+										if (file.type !== 'file') return false;
+										return autocomplete_filter(file);
+									})
 									.map((file) => file.name)
 						)
 					];
@@ -139,7 +135,7 @@
 		editor_view.setState(state);
 	}
 
-	onMount(() => {
+	$effect(() => {
 		editor_view = new EditorView({
 			parent: container,
 			async dispatch(transaction) {
@@ -179,7 +175,7 @@
 		await reset(workspace.files);
 
 		if (editor_view) {
-			// could be false if onMount returned early
+			// TODO is it possible to get here?
 			select_state(workspace.selected_name);
 		}
 	});
@@ -244,7 +240,7 @@
 		}, 200);
 	}}
 >
-	{#if !browser && workspace.selected_file}
+	{#if !BROWSER && workspace.selected_file}
 		<div class="fake">
 			<div class="fake-gutter">
 				{#each workspace.selected_file.contents.split('\n') as _, i}