From 4ba38535c1c7bce6ddda333be6728d7a95affe81 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 22 May 2025 09:39:29 -0400
Subject: [PATCH] update names

---
 .changeset/smart-boats-accept.md               |  2 +-
 .../client/transform-template/index.js         |  2 +-
 packages/svelte/src/compiler/types/index.d.ts  |  9 ++++++---
 .../svelte/src/compiler/validate-options.js    |  2 +-
 packages/svelte/tests/helpers.js               |  3 +--
 packages/svelte/tests/hydration/test.ts        |  4 ++--
 packages/svelte/tests/runtime-browser/test.ts  |  4 ++--
 packages/svelte/tests/runtime-legacy/shared.ts |  4 ++--
 .../samples/functional-templating/_config.js   |  2 +-
 .../samples/functional-templating/_config.js   |  2 +-
 packages/svelte/types/index.d.ts               | 18 ++++++++++++------
 11 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/.changeset/smart-boats-accept.md b/.changeset/smart-boats-accept.md
index b08063eb8d..4cdfeb30d0 100644
--- a/.changeset/smart-boats-accept.md
+++ b/.changeset/smart-boats-accept.md
@@ -2,4 +2,4 @@
 'svelte': minor
 ---
 
-feat: functional template generation
+feat: add `fragments: 'html' | 'tree'` option for wider CSP compliance
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
index 61ae9d9b27..01b0bcd1cc 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js
@@ -36,7 +36,7 @@ function build_locations(nodes) {
  * @param {number} [flags]
  */
 export function transform_template(state, namespace, flags = 0) {
-	const tree = state.options.templatingMode === 'functional';
+	const tree = state.options.fragments === 'tree';
 
 	const expression = tree ? state.template.as_tree() : state.template.as_html();
 
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index f836ec7e1f..a53a431cf1 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -123,11 +123,14 @@ export interface CompileOptions extends ModuleCompileOptions {
 	 */
 	preserveWhitespace?: boolean;
 	/**
-	 *  If `functional`, the template will get compiled to a series of `document.createElement` calls, if `string` it will render the template tp a string and use `template.innerHTML`.
+	 * Which strategy to use when cloning DOM fragments:
 	 *
-	 * @default 'string'
+	 * - `html` populates a `<template>` with `innerHTML` and clones it. This is faster, but cannot be used if your app's [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) includes [`require-trusted-types-for 'script'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for)
+	 * - `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere
+	 *
+	 * @default 'html'
 	 */
-	templatingMode?: 'string' | 'functional';
+	fragments?: 'html' | 'tree';
 	/**
 	 * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
 	 * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.
diff --git a/packages/svelte/src/compiler/validate-options.js b/packages/svelte/src/compiler/validate-options.js
index 1d67951fd8..85305d7ce9 100644
--- a/packages/svelte/src/compiler/validate-options.js
+++ b/packages/svelte/src/compiler/validate-options.js
@@ -110,7 +110,7 @@ export const validate_component_options =
 
 			preserveComments: boolean(false),
 
-			templatingMode: list(['string', 'functional']),
+			fragments: list(['html', 'tree']),
 
 			preserveWhitespace: boolean(false),
 
diff --git a/packages/svelte/tests/helpers.js b/packages/svelte/tests/helpers.js
index 63b91bd62c..e62b662372 100644
--- a/packages/svelte/tests/helpers.js
+++ b/packages/svelte/tests/helpers.js
@@ -191,5 +191,4 @@ if (typeof window !== 'undefined') {
 	});
 }
 
-export const templatingMode =
-	/** @type {'string' | 'functional'} */ (process.env.TEMPLATING_MODE) ?? 'string';
+export const fragments = /** @type {'html' | 'tree'} */ (process.env.FRAGMENTS) ?? 'html';
diff --git a/packages/svelte/tests/hydration/test.ts b/packages/svelte/tests/hydration/test.ts
index 6f1ef9c9ee..121b5950bc 100644
--- a/packages/svelte/tests/hydration/test.ts
+++ b/packages/svelte/tests/hydration/test.ts
@@ -4,7 +4,7 @@ import * as fs from 'node:fs';
 import { assert } from 'vitest';
 import { compile_directory } from '../helpers.js';
 import { assert_html_equal } from '../html_equal.js';
-import { templatingMode } from '../helpers.js';
+import { fragments } from '../helpers.js';
 import { assert_ok, suite, type BaseTest } from '../suite.js';
 import { createClassComponent } from 'svelte/legacy';
 import { render } from 'svelte/server';
@@ -46,7 +46,7 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 	if (!config.load_compiled) {
 		await compile_directory(cwd, 'client', {
 			accessors: true,
-			templatingMode,
+			fragments,
 			...config.compileOptions
 		});
 
diff --git a/packages/svelte/tests/runtime-browser/test.ts b/packages/svelte/tests/runtime-browser/test.ts
index aab9d02aa9..63e601b115 100644
--- a/packages/svelte/tests/runtime-browser/test.ts
+++ b/packages/svelte/tests/runtime-browser/test.ts
@@ -5,7 +5,7 @@ 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 { write, templatingMode } from '../helpers';
+import { write, fragments } from '../helpers';
 import type { Warning } from '#compiler';
 
 const assert_file = path.resolve(__dirname, 'assert.js');
@@ -87,7 +87,7 @@ async function run_test(
 					build.onLoad({ filter: /\.svelte$/ }, (args) => {
 						const compiled = compile(fs.readFileSync(args.path, 'utf-8').replace(/\r/g, ''), {
 							generate: 'client',
-							templatingMode,
+							fragments,
 							...config.compileOptions,
 							immutable: config.immutable,
 							customElement: test_dir.includes('custom-elements-samples'),
diff --git a/packages/svelte/tests/runtime-legacy/shared.ts b/packages/svelte/tests/runtime-legacy/shared.ts
index b6720a0ae6..690a7e3d98 100644
--- a/packages/svelte/tests/runtime-legacy/shared.ts
+++ b/packages/svelte/tests/runtime-legacy/shared.ts
@@ -6,7 +6,7 @@ import { proxy } from 'svelte/internal/client';
 import { flushSync, hydrate, mount, unmount } from 'svelte';
 import { render } from 'svelte/server';
 import { afterAll, assert, beforeAll } from 'vitest';
-import { compile_directory, templatingMode } from '../helpers.js';
+import { compile_directory, fragments } from '../helpers.js';
 import { setup_html_equal } from '../html_equal.js';
 import { raf } from '../animation-helpers.js';
 import type { CompileOptions } from '#compiler';
@@ -158,7 +158,7 @@ async function common_setup(cwd: string, runes: boolean | undefined, config: Run
 		rootDir: cwd,
 		dev: force_hmr ? true : undefined,
 		hmr: force_hmr ? true : undefined,
-		templatingMode,
+		fragments,
 		...config.compileOptions,
 		immutable: config.immutable,
 		accessors: 'accessors' in config ? config.accessors : true,
diff --git a/packages/svelte/tests/runtime-runes/samples/functional-templating/_config.js b/packages/svelte/tests/runtime-runes/samples/functional-templating/_config.js
index 6ea3ac4885..5d36f2e969 100644
--- a/packages/svelte/tests/runtime-runes/samples/functional-templating/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/functional-templating/_config.js
@@ -2,7 +2,7 @@ import { test } from '../../test';
 
 export default test({
 	compileOptions: {
-		templatingMode: 'functional'
+		fragments: 'tree'
 	},
 
 	html: `<p>hello</p>`
diff --git a/packages/svelte/tests/snapshot/samples/functional-templating/_config.js b/packages/svelte/tests/snapshot/samples/functional-templating/_config.js
index 801a56f411..23231c969b 100644
--- a/packages/svelte/tests/snapshot/samples/functional-templating/_config.js
+++ b/packages/svelte/tests/snapshot/samples/functional-templating/_config.js
@@ -2,6 +2,6 @@ import { test } from '../../test';
 
 export default test({
 	compileOptions: {
-		templatingMode: 'functional'
+		fragments: 'tree'
 	}
 });
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index ff2cb221ec..201dbed9aa 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -986,11 +986,14 @@ declare module 'svelte/compiler' {
 		 */
 		preserveWhitespace?: boolean;
 		/**
-		 *  If `functional`, the template will get compiled to a series of `document.createElement` calls, if `string` it will render the template tp a string and use `template.innerHTML`.
+		 * Which strategy to use when cloning DOM fragments:
 		 *
-		 * @default 'string'
+		 * - `html` populates a `<template>` with `innerHTML` and clones it. This is faster, but cannot be used if your app's [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) includes [`require-trusted-types-for 'script'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for)
+		 * - `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere
+		 *
+		 * @default 'html'
 		 */
-		templatingMode?: 'string' | 'functional';
+		fragments?: 'html' | 'tree';
 		/**
 		 * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
 		 * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.
@@ -2879,11 +2882,14 @@ declare module 'svelte/types/compiler/interfaces' {
 		 */
 		preserveWhitespace?: boolean;
 		/**
-		 *  If `functional`, the template will get compiled to a series of `document.createElement` calls, if `string` it will render the template tp a string and use `template.innerHTML`.
+		 * Which strategy to use when cloning DOM fragments:
 		 *
-		 * @default 'string'
+		 * - `html` populates a `<template>` with `innerHTML` and clones it. This is faster, but cannot be used if your app's [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) includes [`require-trusted-types-for 'script'`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/require-trusted-types-for)
+		 * - `tree` creates the fragment one element at a time and _then_ clones it. This is slower, but works everywhere
+		 *
+		 * @default 'html'
 		 */
-		templatingMode?: 'string' | 'functional';
+		fragments?: 'html' | 'tree';
 		/**
 		 * Set to `true` to force the compiler into runes mode, even if there are no indications of runes usage.
 		 * Set to `false` to force the compiler into ignoring runes, even if there are indications of runes usage.