fix compiler options UI (sveltejs#526)

* fix sveltejs#525

* lint

Author: Rich-Harris

packages/editor/src/lib/Workspace.svelte.ts

@@ -1,4 +1,4 @@
-import type { CompileError, CompileResult } from 'svelte/compiler';
+import type { CompileError, CompileOptions, CompileResult } from 'svelte/compiler';
 import { EditorState } from '@codemirror/state';
 import { compile_file } from './compile-worker';
 import { BROWSER } from 'esm-env';
@@ -74,12 +74,17 @@ const default_extensions = [
 // 	extensions.push(vim());
 // }
 
+interface ExposedCompilerOptions {
+	generate: 'client' | 'server';
+	dev: boolean;
+}
+
 export class Workspace {
 	// TODO this stuff should all be readonly
 	creating = $state.raw<{ parent: string; type: 'file' | 'directory' } | null>(null);
 	modified = $state<Record<string, boolean>>({});
 
-	compiler_options = $state.raw<{ generate: 'client' | 'server'; dev: boolean }>({
+	#compiler_options = $state.raw<ExposedCompilerOptions>({
 		generate: 'client',
 		dev: false
 	});
@@ -128,6 +133,10 @@ export class Workspace {
 		return this.#files;
 	}
 
+	get compiler_options() {
+		return this.#compiler_options;
+	}
+
 	get current() {
 		return this.#current;
 	}
@@ -150,10 +159,6 @@ export class Workspace {
 		});
 	}
 
-	invalidate() {
-		this.#reset_diagnostics();
-	}
-
 	mark_saved() {
 		this.modified = {};
 	}
@@ -304,6 +309,11 @@ export class Workspace {
 		this.#view = null;
 	}
 
+	update_compiler_options(options: Partial<ExposedCompilerOptions>) {
+		this.#compiler_options = { ...this.#compiler_options, ...options };
+		this.#reset_diagnostics();
+	}
+
 	update_file(file: File) {
 		if (file.name === this.#current.name) {
 			this.#current = file;

packages/repl/src/lib/Output/CompilerOptions.svelte

@@ -3,40 +3,36 @@
 	import { Checkbox } from '@sveltejs/site-kit/components';
 
 	let { workspace }: { workspace: Workspace } = $props();
-
-	function onchange() {
-		workspace.invalidate();
-	}
 </script>
 
 <div class="options">
 	result = svelte.compile(source, &#123;
 	<div class="option">
 		<span class="key">generate:</span>
 
-		<input
-			id="client"
-			type="radio"
-			bind:group={workspace.compiler_options.generate}
-			value="client"
-			{onchange}
-		/>
-		<label for="client"><span class="string">"client"</span></label>
-
-		<input
-			id="server"
-			type="radio"
-			bind:group={workspace.compiler_options.generate}
-			value="server"
-			{onchange}
-		/>
-		<label for="server"><span class="string">"server"</span>,</label>
+		{#each ['client', 'server'] as const as generate}
+			<input
+				id={generate}
+				type="radio"
+				checked={workspace.compiler_options.generate === generate}
+				value={generate}
+				onchange={() => {
+					workspace.update_compiler_options({ generate });
+				}}
+			/>
+			<label for={generate}><span class="string">"{generate}"</span></label>
+		{/each}
 	</div>
 
 	<!-- svelte-ignore a11y_label_has_associated_control (TODO this warning should probably be disabled if there's a component)-->
 	<label class="option">
 		<span class="key">dev:</span>
-		<Checkbox bind:checked={workspace.compiler_options.dev!} {onchange} />
+		<Checkbox
+			checked={workspace.compiler_options.dev!}
+			onchange={(dev) => {
+				workspace.update_compiler_options({ dev });
+			}}
+		/>
 		<span class="boolean">{workspace.compiler_options.dev}</span>,
 	</label>
 	});