update names

Author: Rich-Harris

.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

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();
 

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.

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

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';

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
 		});
 

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'),

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,

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>`

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'
 	}
 });