chore: run test suite on both functional and string templating

sveltejs · paoloricciuti · May 22, 2025 · Mar 18, 2025 · Mar 18, 2025 · Mar 18, 2025
commit c75c42949b3364d74089f1912900a7901f4079b4
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
@@ -149,9 +149,9 @@
  "dependencies": {
    "@ampproject/remapping": "^2.3.0",
    "@jridgewell/sourcemap-codec": "^1.5.0",
+    "@sveltejs/acorn-typescript": "^1.0.5",
    "@types/estree": "^1.0.5",
    "acorn": "^8.12.1",
-    "@sveltejs/acorn-typescript": "^1.0.5",
    "aria-query": "^5.3.1",
    "axobject-query": "^4.1.0",
    "clsx": "^2.1.1",

diff --git a/packages/svelte/src/internal/server/dev.js b/packages/svelte/src/internal/server/dev.js
@@ -22,7 +22,7 @@ import { current_component } from './context.js';
 let parent = null;

 /** @type {Set<string>} */
-let seen;
+export let seen;

 /**
 * @param {Element} element

diff --git a/packages/svelte/tests/helpers.js b/packages/svelte/tests/helpers.js
@@ -58,15 +58,17 @@ export function create_deferred() {
 * @param {Partial<CompileOptions>} compileOptions
 * @param {boolean} [output_map]
 * @param {any} [preprocessor]
+ * @param {import('./suite').TemplatingMode} [templating_mode]
 */
 export async function compile_directory(
 	cwd,
 	generate,
 	compileOptions = {},
 	output_map = false,
-	preprocessor
+	preprocessor,
+	templating_mode
 ) {
-	const output_dir = `${cwd}/_output/${generate}`;
+	const output_dir = `${cwd}/_output/${generate}${templating_mode === 'functional' ? `-${templating_mode}` : ''}`;

 	fs.rmSync(output_dir, { recursive: true, force: true });

@@ -77,7 +79,8 @@ export async function compile_directory(
 		let opts = {
 			filename: path.join(cwd, file),
 			...compileOptions,
-			generate
+			generate,
+			preventTemplateCloning: templating_mode === 'functional'
 		};

 		if (file.endsWith('.js')) {

diff --git a/packages/svelte/tests/hydration/test.ts b/packages/svelte/tests/hydration/test.ts
@@ -41,10 +41,24 @@ function read(path: string): string | void {
 	return fs.existsSync(path) ? fs.readFileSync(path, 'utf-8') : undefined;
 }

-const { test, run } = suite<HydrationTest>(async (config, cwd) => {
+const { test, run } = suite<HydrationTest>(async (config, cwd, templating_mode) => {
 	if (!config.load_compiled) {
-		await compile_directory(cwd, 'client', { accessors: true, ...config.compileOptions });
-		await compile_directory(cwd, 'server', config.compileOptions);
+		await compile_directory(
+			cwd,
+			'client',
+			{ accessors: true, ...config.compileOptions },
+			undefined,
+			undefined,
+			templating_mode
+		);
+		await compile_directory(
+			cwd,
+			'server',
+			config.compileOptions,
+			undefined,
+			undefined,
+			templating_mode
+		);
 	}

 	const target = window.document.body;
@@ -102,7 +116,11 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 		};

 		const component = createClassComponent({
-			component: (await import(`${cwd}/_output/client/main.svelte.js`)).default,
+			component: (
+				await import(
+					`${cwd}/_output/client${templating_mode === 'functional' ? '-functional' : ''}/main.svelte.js`
+				)
+			).default,
 			target,
 			hydrate: true,
 			props: config.props,
@@ -169,4 +187,5 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 });
 export { test, assert_ok };

-await run(__dirname);
+await run(__dirname, 'string');
+await run(__dirname, 'functional');
diff --git a/packages/svelte/tests/runtime-browser/test.ts b/packages/svelte/tests/runtime-browser/test.ts
@@ -4,7 +4,7 @@ import * as fs from 'node:fs';
 import * as path from 'node:path';
 import { compile } from 'svelte/compiler';
 import { afterAll, assert, beforeAll, describe } from 'vitest';
-import { suite, suite_with_variants } from '../suite';
+import { suite, suite_with_variants, type TemplatingMode } from '../suite';
 import { write } from '../helpers';
 import type { Warning } from '#compiler';

@@ -35,35 +35,50 @@ const { run: run_browser_tests } = suite_with_variants<
 		return false;
 	},
 	() => {},
-	async (config, test_dir, variant) => {
-		await run_test(test_dir, config, variant === 'hydrate');
+	async (config, test_dir, variant, _, templating_mode) => {
+		await run_test(test_dir, config, variant === 'hydrate', templating_mode);
 	}
 );

 describe.concurrent(
 	'runtime-browser',
-	() => run_browser_tests(__dirname),
+	() => run_browser_tests(__dirname, 'string'),
+	// Browser tests are brittle and slow on CI
+	{ timeout: 20000, retry: process.env.CI ? 1 : 0 }
+);
+
+describe.concurrent(
+	'runtime-browser-functional',
+	() => run_browser_tests(__dirname, 'functional'),
 	// Browser tests are brittle and slow on CI
 	{ timeout: 20000, retry: process.env.CI ? 1 : 0 }
 );

 const { run: run_ce_tests } = suite<ReturnType<typeof import('./assert').test>>(
-	async (config, test_dir) => {
-		await run_test(test_dir, config, false);
+	async (config, test_dir, templating_mode) => {
+		await run_test(test_dir, config, false, templating_mode);
 	}
 );

 describe.concurrent(
 	'custom-elements',
-	() => run_ce_tests(__dirname, 'custom-elements-samples'),
+	() => run_ce_tests(__dirname, 'string', 'custom-elements-samples'),
+	// Browser tests are brittle and slow on CI
+	{ timeout: 20000, retry: process.env.CI ? 1 : 0 }
+);
+
+describe.concurrent(
+	'custom-elements',
+	() => run_ce_tests(__dirname, 'functional', 'custom-elements-samples'),
 	// Browser tests are brittle and slow on CI
 	{ timeout: 20000, retry: process.env.CI ? 1 : 0 }
 );

 async function run_test(
 	test_dir: string,
 	config: ReturnType<typeof import('./assert').test>,
-	hydrate: boolean
+	hydrate: boolean,
+	templating_mode: TemplatingMode
 ) {
 	const warnings: any[] = [];

@@ -90,10 +105,14 @@ async function run_test(
 							...config.compileOptions,
 							immutable: config.immutable,
 							customElement: test_dir.includes('custom-elements-samples'),
-							accessors: 'accessors' in config ? config.accessors : true
+							accessors: 'accessors' in config ? config.accessors : true,
+							preventTemplateCloning: templating_mode === 'functional'
 						});

-						write(`${test_dir}/_output/client/${path.basename(args.path)}.js`, compiled.js.code);
+						write(
+							`${test_dir}/_output/client${templating_mode === 'functional' ? '-functional' : ''}/${path.basename(args.path)}.js`,
+							compiled.js.code
+						);

 						compiled.warnings.forEach((warning) => {
 							if (warning.code === 'options_deprecated_accessors') return;
@@ -103,7 +122,7 @@ async function run_test(
 						if (compiled.css !== null) {
 							compiled.js.code += `document.head.innerHTML += \`<style>${compiled.css.code}</style>\``;
 							write(
-								`${test_dir}/_output/client/${path.basename(args.path)}.css`,
+								`${test_dir}/_output/${templating_mode === 'functional' ? '-functional' : ''}/${path.basename(args.path)}.css`,
 								compiled.css.code
 							);
 						}
@@ -151,7 +170,8 @@ async function run_test(
 								...config.compileOptions,
 								immutable: config.immutable,
 								customElement: test_dir.includes('custom-elements-samples'),
-								accessors: 'accessors' in config ? config.accessors : true
+								accessors: 'accessors' in config ? config.accessors : true,
+								preventTemplateCloning: templating_mode === 'functional'
 							});

 							return {

diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-casing-custom-element/main.svelte b/packages/svelte/tests/runtime-legacy/samples/attribute-casing-custom-element/main.svelte
@@ -18,8 +18,9 @@
 			this.innerHTML = 'Hello ' + this._obj.text + '!';
 		}
 	}
-
-	window.customElements.define('my-custom-element', MyCustomElement);
+	if(!window.customElements.get('my-custom-element')) {
+		window.customElements.define('my-custom-element', MyCustomElement);
+	}
 </script>

 <my-custom-element camelCase={{ text: 'World' }} />
diff --git a/...ages/svelte/tests/runtime-legacy/samples/attribute-custom-element-inheritance/main.svelte b/...ages/svelte/tests/runtime-legacy/samples/attribute-custom-element-inheritance/main.svelte
@@ -26,8 +26,10 @@
 	}

 	class Extended extends MyCustomElement {}
-
-	window.customElements.define('my-custom-inheritance-element', Extended);
+
+	if(!window.customElements.get('my-custom-inheritance-element')) {
+		window.customElements.define('my-custom-inheritance-element', Extended);
+	}
 </script>

 <my-custom-inheritance-element camelCase={{ text: 'World' }} text="!" />
diff --git a/packages/svelte/tests/runtime-legacy/samples/window-binding-scroll-store/_config.js b/packages/svelte/tests/runtime-legacy/samples/window-binding-scroll-store/_config.js
@@ -9,7 +9,8 @@ export default test({
 		Object.defineProperties(window, {
 			scrollY: {
 				value: 0,
-				configurable: true
+				configurable: true,
+				writable: true
 			}
 		});
 		original_scrollTo = window.scrollTo;

diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
@@ -10,7 +10,8 @@ import { compile_directory } from '../helpers.js';
 import { setup_html_equal } from '../html_equal.js';
 import { raf } from '../animation-helpers.js';
 import type { CompileOptions } from '#compiler';
-import { suite_with_variants, type BaseTest } from '../suite.js';
+import { suite_with_variants, type BaseTest, type TemplatingMode } from '../suite.js';
+import { seen } from '../../src/internal/server/dev.js';

 type Assert = typeof import('vitest').assert & {
 	htmlEqual(a: string, b: string, description?: string): void;
@@ -141,16 +142,21 @@ export function runtime_suite(runes: boolean) {

 			return false;
 		},
-		(config, cwd) => {
-			return common_setup(cwd, runes, config);
+		(config, cwd, templating_mode) => {
+			return common_setup(cwd, runes, config, templating_mode);
 		},
-		async (config, cwd, variant, common) => {
-			await run_test_variant(cwd, config, variant, common, runes);
+		async (config, cwd, variant, common, templating_mode) => {
+			await run_test_variant(cwd, config, variant, common, runes, templating_mode);
 		}
 	);
 }

-async function common_setup(cwd: string, runes: boolean | undefined, config: RuntimeTest) {
+async function common_setup(
+	cwd: string,
+	runes: boolean | undefined,
+	config: RuntimeTest,
+	templating_mode: TemplatingMode
+) {
 	const force_hmr = process.env.HMR && config.compileOptions?.dev !== false && !config.error;

 	const compileOptions: CompileOptions = {
@@ -161,13 +167,14 @@ async function common_setup(cwd: string, runes: boolean | undefined, config: Run
 		...config.compileOptions,
 		immutable: config.immutable,
 		accessors: 'accessors' in config ? config.accessors : true,
-		runes
+		runes,
+		preventTemplateCloning: templating_mode === 'functional'
 	};

 	// load_compiled can be used for debugging a test. It means the compiler will not run on the input
 	// so you can manipulate the output manually to see what fixes it, adding console.logs etc.
 	if (!config.load_compiled) {
-		await compile_directory(cwd, 'client', compileOptions);
+		await compile_directory(cwd, 'client', compileOptions, undefined, undefined, templating_mode);
 		await compile_directory(cwd, 'server', compileOptions);
 	}

@@ -179,7 +186,8 @@ async function run_test_variant(
 	config: RuntimeTest,
 	variant: 'dom' | 'hydrate' | 'ssr',
 	compileOptions: CompileOptions,
-	runes: boolean
+	runes: boolean,
+	templating_mode: TemplatingMode
 ) {
 	let unintended_error = false;

@@ -257,8 +265,15 @@ async function run_test_variant(
 		raf.reset();

 		// Put things we need on window for testing
-		const styles = globSync('**/*.css', { cwd: `${cwd}/_output/client` })
-			.map((file) => fs.readFileSync(`${cwd}/_output/client/${file}`, 'utf-8'))
+		const styles = globSync('**/*.css', {
+			cwd: `${cwd}/_output/client${templating_mode === 'functional' ? '-functional' : ''}`
+		})
+			.map((file) =>
+				fs.readFileSync(
+					`${cwd}/_output/client${templating_mode === 'functional' ? '-functional' : ''}/${file}`,
+					'utf-8'
+				)
+			)
 			.join('\n')
 			.replace(/\/\*<\/?style>\*\//g, '');

@@ -274,26 +289,36 @@ async function run_test_variant(

 		globalThis.requestAnimationFrame = globalThis.setTimeout;

-		let mod = await import(`${cwd}/_output/client/main.svelte.js`);
+		let mod = await import(
+			`${cwd}/_output/client${templating_mode === 'functional' ? '-functional' : ''}/main.svelte.js`
+		);

 		const target = window.document.querySelector('main') as HTMLElement;

 		let snapshot = undefined;

 		if (variant === 'hydrate' || variant === 'ssr') {
 			config.before_test?.();
+			// we need to clear the seen messages between tests
+			seen?.clear?.();
 			// ssr into target
 			const SsrSvelteComponent = (await import(`${cwd}/_output/server/main.svelte.js`)).default;
 			const { html, head } = render(SsrSvelteComponent, {
 				props: config.server_props ?? config.props ?? {},
 				idPrefix: config.id_prefix
 			});

-			fs.writeFileSync(`${cwd}/_output/rendered.html`, html);
+			fs.writeFileSync(
+				`${cwd}/_output/rendered${templating_mode === 'functional' ? '-functional' : ''}.html`,
+				html
+			);
 			target.innerHTML = html;

 			if (head) {
-				fs.writeFileSync(`${cwd}/_output/rendered_head.html`, head);
+				fs.writeFileSync(
+					`${cwd}/_output/rendered_head${templating_mode === 'functional' ? '-functional' : ''}.html`,
+					head
+				);
 				window.document.head.innerHTML = window.document.head.innerHTML + head;
 			}


diff --git a/packages/svelte/tests/runtime-legacy/test.ts b/packages/svelte/tests/runtime-legacy/test.ts
@@ -11,4 +11,5 @@ const { test, run } = runtime_suite(false);

 export { test, ok };

-await run(__dirname);
+await run(__dirname, 'string');
+await run(__dirname, 'functional');
diff --git a/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte b/packages/svelte/tests/runtime-runes/samples/custom-element-attributes/main.svelte
@@ -1,18 +1,20 @@
 <script module>
-    customElements.define('value-element', class extends HTMLElement {
+	if(!customElements.get('value-element')) {
+		customElements.define('value-element', class extends HTMLElement {

-        constructor() {
-            super();
-            this.attachShadow({ mode: 'open' });
-        }
+			constructor() {
+				super();
+				this.attachShadow({ mode: 'open' });
+			}

-        set value(v) {
-            if (this.__value !== v) {
-                this.__value = v;
-                this.shadowRoot.innerHTML = `<span>${v}</span>`;
-            }
-        }
-    });
+			set value(v) {
+				if (this.__value !== v) {
+					this.__value = v;
+					this.shadowRoot.innerHTML = `<span>${v}</span>`;
+				}
+			}
+		});
+	}
 </script>

 <my-element string="test" object={{ test: true }}></my-element>
-Original file line number
+Diff line change
@@ -22,7 +22,7 @@ import { current_component } from './context.js';
     let parent = null;
     /** @type {Set<string>} */
-    let seen;
+    export let seen;
                   paoloricciuti marked this conversation as resolved.
              

              
                Outdated
          
            Show resolved
            Hide resolved
        

                
  
            
  

  
    
  
    
      

              Uh oh!

              
There was an error while loading. Please reload this page.
     /**
      * @param {Element} element
-          Expand Down