feat: add templating mode selector

Author: paoloricciuti

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>>({});
 
@@ -453,6 +455,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

@@ -116,7 +116,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/Output/Viewer.svelte

@@ -101,6 +101,7 @@
 	$: if (ready) proxy?.iframe_command('set_theme', { theme });
 
 	async function apply_bundle($bundle: Bundle | null | undefined) {
+		console.log({ $bundle });
 		if (!$bundle) return;
 
 		try {

packages/repl/src/lib/Repl.svelte

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

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

@@ -140,7 +140,7 @@ self.addEventListener('message', async (event: MessageEvent<BundleMessageData>)
 
 let cached: Record<
 	'client' | 'server',
-	Map<string, { code: string; result: ReturnType<typeof svelte.compile> }>
+	Map<string, { code: string; result: ReturnType<typeof svelte.compile>; templatingMode: string }>
 > = {
 	client: new Map(),
 	server: new Map()
@@ -419,14 +419,20 @@ async function get_bundle(
 			const cached_id = cache.get(id);
 			let result: CompileResult;
 
-			if (cached_id && cached_id.code === code) {
+			if (
+				cached_id &&
+				cached_id.code === code &&
+				cached_id.templatingMode === (options as any).templatingMode
+			) {
 				result = cached_id.result;
 			} else if (id.endsWith('.svelte')) {
 				const compilerOptions: any = {
 					...options,
 					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) {
@@ -482,7 +488,7 @@ async function get_bundle(
 				return null;
 			}
 
-			new_cache.set(id, { code, result });
+			new_cache.set(id, { code, result, templatingMode: (options as any).templatingMode });
 
 			// @ts-expect-error
 			(result.warnings || result.stats?.warnings)?.forEach((warning) => {