feat: add templating mode selector (#1214)

paoloricciuti · Rich-Harris · web-flow · commit 3e917fb5d583 · 2025-05-23T09:37:42.000-04:00
* feat: add templating mode selector

* Update packages/repl/src/lib/Output/Viewer.svelte

* fix: rename option and add version checking

* fix: revert version to fix link

* fix: update everything to latest

* chore: remove unused ignore

* fix: `html` default checked ad min height

* fix: also show option with `latest`

* tweak

---------

Co-authored-by: Rich Harris &lt;rich.harris@vercel.com&gt;
diff --git a/apps/svelte.dev/package.json b/apps/svelte.dev/package.json
@@ -72,7 +72,7 @@
 		"satori": "^0.10.13",
 		"satori-html": "^0.3.2",
 		"sv": "^0.6.8",
-		"svelte": "5.23.0",
+		"svelte": "^5.33.0",
 		"svelte-check": "^4.1.1",
 		"svelte-preprocess": "^6.0.3",
 		"tiny-glob": "^0.2.9",
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte
@@ -21,8 +21,7 @@
 	let modified = $state(false);
 	let setting_hash: any = null;
 
-	// svelte-ignore non_reactive_update
-	let version = page.url.searchParams.get('version') || 'latest';
+	let version = $derived(page.url.searchParams.get('version') || 'latest');
 
 	// Hashed URLs are less safe (we can't delete malicious REPLs), therefore
 	// don't allow links to escape the sandbox restrictions
diff --git a/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte b/apps/svelte.dev/src/routes/(authed)/playground/[id]/embed/+page.svelte
@@ -12,7 +12,7 @@
 
 	let repl = $state() as ReturnType<typeof Repl>;
 
-	let version = page.url.searchParams.get('version') || 'latest';
+	let version = $derived(page.url.searchParams.get('version') || 'latest');
 
 	// TODO make this munging unnecessary
 	function munge(data: any): File {
diff --git a/packages/repl/package.json b/packages/repl/package.json
@@ -100,7 +100,7 @@
 		"locate-character": "^3.0.0",
 		"marked": "^14.1.2",
 		"resolve.exports": "^2.0.2",
-		"svelte": "5.23.0",
+		"svelte": "5.33.0",
 		"tailwindcss": "^4.0.15",
 		"tarparser": "^0.0.4",
 		"ts-blank-space": "^0.6.1",
diff --git a/packages/repl/src/lib/Output/CompilerOptions.svelte b/packages/repl/src/lib/Output/CompilerOptions.svelte
@@ -1,6 +1,19 @@
 <script lang="ts">
 	import { Checkbox } from '@sveltejs/site-kit/components';
 	import type { Workspace } from '../Workspace.svelte';
+	import { get_repl_context } from '../../lib/context.js';
+
+	const { svelteVersion } = $derived(get_repl_context());
+
+	const is_fragments_available = $derived.by(() => {
+		const [major, minor] = svelteVersion.split('.');
+		// if the version is 5.33.0 or greater, fragments are available
+		if (+major >= 5 && +minor >= 33) {
+			return true;
+		}
+		// we assume they are available if work with local or latest
+		return svelteVersion === 'local' || svelteVersion === 'latest';
+	});
 
 	let { workspace }: { workspace: Workspace } = $props();
 </script>
@@ -24,6 +37,25 @@
 		{/each},
 	</div>
 
+	{#if is_fragments_available}
+		<div class="option">
+			<span class="key">fragments:</span>
+
+			{#each ['html', 'tree'] as const as fragments}
+				<input
+					id={fragments}
+					type="radio"
+					checked={(workspace.compiler_options.fragments ?? 'html') === fragments}
+					value={fragments}
+					onchange={() => {
+						workspace.update_compiler_options({ fragments });
+					}}
+				/>
+				<label for={fragments}><span class="string">"{fragments}"</span></label>
+			{/each},
+		</div>
+	{/if}
+
 	<!-- 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 +87,7 @@
 
 	.key {
 		display: inline-block;
-		width: 6em;
+		width: 10em;
 	}
 
 	.string {
diff --git a/packages/repl/src/lib/Output/Output.svelte b/packages/repl/src/lib/Output/Output.svelte
@@ -215,7 +215,7 @@
 	{#if embedded}
 		<Editor workspace={js_workspace} />
 	{:else}
-		<PaneWithPanel min="-18rem" pos="-18rem" panel="Compiler options">
+		<PaneWithPanel min="-27rem" pos="-27rem" panel="Compiler options">
 			{#snippet main()}
 				<Editor workspace={js_workspace} />
 			{/snippet}
diff --git a/packages/repl/src/lib/Repl.svelte b/packages/repl/src/lib/Repl.svelte
@@ -87,7 +87,8 @@
 
 	async function rebundle() {
 		bundler!.bundle(workspace.files as File[], {
-			tailwind: workspace.tailwind
+			tailwind: workspace.tailwind,
+			fragments: workspace.compiler_options.fragments
 		});
 	}
 
@@ -139,7 +140,11 @@
 		bundler,
 		toggleable,
 		workspace,
-		svelteVersion
+		get svelteVersion() {
+			// we want this to be reactive since we are checking in
+			// the compiler options
+			return svelteVersion;
+		}
 	});
 
 	function before_unload(event: BeforeUnloadEvent) {
diff --git a/packages/repl/src/lib/Workspace.svelte.ts b/packages/repl/src/lib/Workspace.svelte.ts
@@ -94,6 +94,7 @@ export interface ExposedCompilerOptions {
 	generate: 'client' | 'server';
 	dev: boolean;
 	modernAst: boolean;
+	fragments: 'html' | 'tree' | undefined;
 }
 
 export class Workspace {
@@ -104,7 +105,10 @@ export class Workspace {
 	#compiler_options = $state.raw<ExposedCompilerOptions>({
 		generate: 'client',
 		dev: false,
-		modernAst: true
+		modernAst: true,
+		// default to undefined so it's removed if the current version
+		// doesn't support it
+		fragments: undefined
 	});
 	compiled = $state<Record<string, Compiled>>({});
 
@@ -455,6 +459,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) {
diff --git a/packages/repl/src/lib/workers/bundler/index.ts b/packages/repl/src/lib/workers/bundler/index.ts
@@ -307,7 +307,8 @@ async function get_bundle(
 				const compilerOptions: any = {
 					filename: name + '.svelte',
 					generate: is_gt_5 ? 'client' : 'dom',
-					dev: true
+					dev: true,
+					fragments: options.fragments
 				};
 
 				if (is_gt_5) {
@@ -318,6 +319,12 @@ async function get_bundle(
 					compilerOptions.experimental = { async: true };
 				}
 
+				if (compilerOptions.fragments == null) {
+					// if fragments is not set it probably means we are using
+					// a version that doesn't support it, so we need to remove it
+					delete compilerOptions.fragments;
+				}
+
 				result = svelte.compile(code, compilerOptions);
 
 				walk(result.ast.html as import('svelte/compiler').AST.TemplateNode, null, {
diff --git a/packages/repl/src/lib/workers/compiler/index.ts b/packages/repl/src/lib/workers/compiler/index.ts
@@ -58,7 +58,8 @@ addEventListener('message', async (event) => {
 						: 'ssr'
 					: options.generate,
 				dev: options.dev,
-				filename: file.name
+				filename: file.name,
+				fragments: options.fragments
 			};
 
 			if (!is_svelte_3_or_4) {
@@ -69,6 +70,12 @@ addEventListener('message', async (event) => {
 				compilerOptions.experimental = { async: true };
 			}
 
+			if (compilerOptions.fragments == null) {
+				// if fragments is not set it probably means we are using
+				// a version that doesn't support it, so we need to remove it
+				delete compilerOptions.fragments;
+			}
+
 			result = svelte.compile(file.contents, compilerOptions);
 		} else {
 			const compilerOptions: any = {
diff --git a/packages/repl/src/lib/workers/workers.d.ts b/packages/repl/src/lib/workers/workers.d.ts
@@ -52,6 +52,7 @@ export interface MigrateOutput {
 export interface BundleOptions {
 	tailwind?: boolean;
 	runes?: boolean;
+	fragments?: 'html' | 'tree';
 }
 
 export type BundleMessageData = {
diff --git a/packages/site-kit/package.json b/packages/site-kit/package.json
@@ -53,7 +53,7 @@
 		"marked": "^14.1.2",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.3.2",
-		"svelte": "5.23.0",
+		"svelte": "5.33.0",
 		"svelte-check": "^4.1.1",
 		"typescript": "^5.5.4",
 		"vite": "^5.4.3"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -52,6 +52,7 @@ export interface MigrateOutput {`
`52`	`52`	`export interface BundleOptions {`
`53`	`53`	`tailwind?: boolean;`
`54`	`54`	`runes?: boolean;`
	`55`	`+ fragments?: 'html' \| 'tree';`
`55`	`56`	`}`
`56`	`57`
`57`	`58`	`export type BundleMessageData = {`