wire it up

Author: Rich-Harris

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

@@ -78,6 +78,7 @@ const default_extensions = [
 interface ExposedCompilerOptions {
 	generate: 'client' | 'server';
 	dev: boolean;
+	modernAst: boolean;
 }
 
 export class Workspace {
@@ -87,7 +88,8 @@ export class Workspace {
 
 	#compiler_options = $state.raw<ExposedCompilerOptions>({
 		generate: 'client',
-		dev: false
+		dev: false,
+		modernAst: true
 	});
 	compiled = $state<Record<string, Compiled>>({});
 

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

@@ -3,19 +3,25 @@
 	import Message from '../Message.svelte';
 	import AstNode from './AstNode.svelte';
 	import type { CompileResult } from 'svelte/compiler';
+	import type { Workspace } from 'editor';
 
 	type Ast = CompileResult['ast'];
 
-	export let ast: Ast;
-	export let autoscroll = true;
+	interface Props {
+		workspace: Workspace;
+		ast: Ast;
+		autoscroll?: boolean;
+	}
+
+	let { workspace, ast, autoscroll = true }: Props = $props();
 
 	// $cursor_index may go over the max since ast computation is usually slower.
 	// clamping this helps prevent the collapse view flashing
 	// TODO reimplement
 	let max_cursor_index = 0;
 	// $: max_cursor_index = !ast ? $cursorIndex : Math.min($cursorIndex, get_ast_max_end(ast));
 
-	$: path_nodes = find_deepest_path(max_cursor_index, [ast]) || [];
+	let path_nodes = $derived(find_deepest_path(max_cursor_index, [ast]) || []);
 
 	function find_deepest_path(cursor: number, paths: Ast[]): Ast[] | undefined {
 		const value = paths[paths.length - 1];
@@ -72,11 +78,10 @@
 	<label>
 		modern
 
-		<!-- TODO wire up -->
 		<Checkbox
-			checked={false}
-			onchange={(value) => {
-				// TODO
+			checked={workspace.compiler_options.modernAst}
+			onchange={(modernAst) => {
+				workspace.update_compiler_options({ modernAst });
 			}}
 		/>
 	</label>

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

@@ -81,8 +81,6 @@
 			css_workspace.update_file(css);
 		});
 	});
-
-	let ast = $derived(current?.result?.ast);
 </script>
 
 <div class="view-toggle">
@@ -132,9 +130,9 @@
 </div>
 
 <!-- ast output -->
-{#if ast}
+{#if current?.result}
 	<div class="tab-content" class:visible={!is_markdown && view === 'ast'}>
-		<AstView {ast} autoscroll={!is_markdown && view === 'ast'} />
+		<AstView {workspace} ast={current.result.ast} autoscroll={!is_markdown && view === 'ast'} />
 	</div>
 {/if}