fix: rename option and add version checking

Author: paoloricciuti

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",

apps/svelte.dev/src/routes/(authed)/playground/[id]/+page.svelte

@@ -22,7 +22,7 @@
 	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

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 {

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
+		return svelteVersion === 'local';
+	});
 
 	let { workspace }: { workspace: Workspace } = $props();
 </script>
@@ -23,23 +36,24 @@
 			<label for={generate}><span class="string">"{generate}"</span></label>
 		{/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>
+	{#if is_fragments_available}
+		<div class="option">
+			<span class="key">fragments:</span>
+
+			{#each ['html', 'tree'] as const as templating_mode}
+				<input
+					id={templating_mode}
+					type="radio"
+					checked={workspace.compiler_options.fragments === templating_mode}
+					value={templating_mode}
+					onchange={() => {
+						workspace.update_compiler_options({ fragments: templating_mode });
+					}}
+				/>
+				<label for={templating_mode}><span class="string">"{templating_mode}"</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">

packages/repl/src/lib/Repl.svelte

@@ -88,8 +88,7 @@
 	async function rebundle() {
 		bundler!.bundle(workspace.files as File[], {
 			tailwind: workspace.tailwind,
-			// @ts-ignore
-			templatingMode: workspace.compiler_options.templatingMode
+			fragments: workspace.compiler_options.fragments
 		});
 	}
 
@@ -141,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) {

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

@@ -94,7 +94,7 @@ export interface ExposedCompilerOptions {
 	generate: 'client' | 'server';
 	dev: boolean;
 	modernAst: boolean;
-	templatingMode: 'string' | 'functional';
+	fragments: 'html' | 'tree' | undefined;
 }
 
 export class Workspace {
@@ -106,7 +106,9 @@ export class Workspace {
 		generate: 'client',
 		dev: false,
 		modernAst: true,
-		templatingMode: 'string'
+		// default to undefined so it's removed if the current version
+		// doesn't support it
+		fragments: undefined
 	});
 	compiled = $state<Record<string, Compiled>>({});
 

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

@@ -308,8 +308,7 @@ async function get_bundle(
 					filename: name + '.svelte',
 					generate: is_gt_5 ? 'client' : 'dom',
 					dev: true,
-					// @ts-expect-error
-					templatingMode: options.templatingMode
+					fragments: options.fragments
 				};
 
 				if (is_gt_5) {
@@ -320,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, {

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

@@ -59,7 +59,7 @@ addEventListener('message', async (event) => {
 					: options.generate,
 				dev: options.dev,
 				filename: file.name,
-				templatingMode: options.templatingMode
+				fragments: options.fragments
 			};
 
 			if (!is_svelte_3_or_4) {
@@ -70,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 = {

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 = {