feat: add templating mode selector

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

@@ -94,6 +94,7 @@ export interface ExposedCompilerOptions {
 	generate: 'client' | 'server';
 	dev: boolean;
 	modernAst: boolean;
+	templatingMode: 'string' | 'functional';
 }
 
 export class Workspace {
@@ -104,7 +105,8 @@ export class Workspace {
 	#compiler_options = $state.raw<ExposedCompilerOptions>({
 		generate: 'client',
 		dev: false,
-		modernAst: true
+		modernAst: true,
+		templatingMode: 'string'
 	});
 	compiled = $state<Record<string, Compiled>>({});
 
@@ -456,6 +458,11 @@ export class Workspace {
 	update_compiler_options(options: Partial<ExposedCompilerOptions>) {
 		this.#compiler_options = { ...this.#compiler_options, ...options };
 		this.#reset_diagnostics();
+		for (let file of this.#files) {
+			if (is_file(file)) {
+				this.#onupdate(file);
+			}
+		}
 	}
 
 	update_file(file: File) {

packages/editor/src/lib/compile-worker/worker.ts

@@ -115,7 +115,8 @@ addEventListener('message', async (event) => {
 						: 'ssr'
 					: options.generate,
 				dev: options.dev,
-				filename: file.name
+				filename: file.name,
+				templatingMode: options.templatingMode
 			};
 
 			if (!is_svelte_3_or_4) {

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

@@ -24,6 +24,23 @@
 		{/each},
 	</div>
 
+	<div class="option">
+		<span class="key">templatingMode:</span>
+
+		{#each ['string', 'functional'] as const as templating_mode}
+			<input
+				id={templating_mode}
+				type="radio"
+				checked={workspace.compiler_options.templatingMode === templating_mode}
+				value={templating_mode}
+				onchange={() => {
+					workspace.update_compiler_options({ templatingMode: templating_mode });
+				}}
+			/>
+			<label for={templating_mode}><span class="string">"{templating_mode}"</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>
@@ -55,7 +72,7 @@
 
 	.key {
 		display: inline-block;
-		width: 6em;
+		width: 10em;
 	}
 
 	.string {

packages/repl/src/lib/Repl.svelte

@@ -97,7 +97,9 @@
 	async function rebundle() {
 		const token = (current_token = Symbol());
 		const result = await bundler!.bundle(workspace.files as File[], {
-			tailwind: workspace.tailwind
+			tailwind: workspace.tailwind,
+			// @ts-ignore
+			templatingMode: workspace.compiler_options.templatingMode
 		});
 		if (token === current_token) $bundle = result as Bundle;
 	}

packages/repl/src/lib/workers/bundler/index.ts

@@ -470,7 +470,9 @@ async function get_bundle(
 				const compilerOptions: any = {
 					filename: name + '.svelte',
 					generate: Number(svelte.VERSION.split('.')[0]) >= 5 ? 'client' : 'dom',
-					dev: true
+					dev: true,
+					// @ts-expect-error
+					templatingMode: options.templatingMode
 				};
 
 				if (can_use_experimental_async) {