feat: functional template generation

.changeset/smart-boats-accept.md

@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: functional template generation

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

@@ -154,10 +154,6 @@ export function client_component(analysis, options) {
 		legacy_reactive_imports: [],
 		legacy_reactive_statements: new Map(),
 		metadata: {
-			context: {
-				template_needs_import_node: false,
-				template_contains_script_tag: false
-			},
 			namespace: options.namespace,
 			bound_contenteditable: false
 		},
@@ -174,8 +170,7 @@ export function client_component(analysis, options) {
 		update: /** @type {any} */ (null),
 		expressions: /** @type {any} */ (null),
 		after_update: /** @type {any} */ (null),
-		template: /** @type {any} */ (null),
-		locations: /** @type {any} */ (null)
+		template: /** @type {any} */ (null)
 	};
 
 	const module = /** @type {ESTree.Program} */ (

packages/svelte/src/compiler/phases/3-transform/client/transform-template/index.js

@@ -0,0 +1,80 @@
+/** @import { Location } from 'locate-character' */
+/** @import { Namespace } from '#compiler' */
+/** @import { ComponentClientTransformState } from '../types.js' */
+/** @import { Node } from './types.js' */
+import { dev, locator } from '../../../../state.js';
+import * as b from '../../../../utils/builders.js';
+
+/**
+ *
+ * @param {Namespace} namespace
+ * @param {ComponentClientTransformState} state
+ * @returns
+ */
+function get_template_function(namespace, state) {
+	const contains_script_tag = state.template.contains_script_tag;
+	return (
+		namespace === 'svg'
+			? contains_script_tag
+				? '$.svg_template_with_script'
+				: '$.ns_template'
+			: namespace === 'mathml'
+				? '$.mathml_template'
+				: contains_script_tag
+					? '$.template_with_script'
+					: '$.template'
+	).concat(state.options.templatingMode === 'functional' ? '_fn' : '');
+}
+
+/**
+ * @param {Node[]} nodes
+ */
+function build_locations(nodes) {
+	const array = b.array([]);
+
+	for (const node of nodes) {
+		if (node.type !== 'element') continue;
+
+		const { line, column } = /** @type {Location} */ (locator(node.start));
+
+		const expression = b.array([b.literal(line), b.literal(column)]);
+		const children = build_locations(node.children);
+
+		if (children.elements.length > 0) {
+			expression.elements.push(children);
+		}
+
+		array.elements.push(expression);
+	}
+
+	return array;
+}
+
+/**
+ * @param {ComponentClientTransformState} state
+ * @param {Namespace} namespace
+ * @param {number} [flags]
+ */
+export function transform_template(state, namespace, flags) {
+	const expression =
+		state.options.templatingMode === 'functional'
+			? state.template.as_objects()
+			: state.template.as_string();
+
+	let call = b.call(
+		get_template_function(namespace, state),
+		expression,
+		flags ? b.literal(flags) : undefined
+	);
+
+	if (dev) {
+		return b.call(
+			'$.add_locations',
+			call,
+			b.member(b.id(state.analysis.name), '$.FILENAME', true),
+			build_locations(state.template.nodes)
+		);
+	}
+
+	return call;
+}

packages/svelte/src/compiler/phases/3-transform/client/transform-template/template.js

@@ -0,0 +1,163 @@
+/** @import { AST } from '#compiler' */
+/** @import { Node, Element } from './types'; */
+import { escape_html } from '../../../../../escaping.js';
+import { is_void } from '../../../../../utils.js';
+import * as b from '#compiler/builders';
+import fix_attribute_casing from './fix-attribute-casing.js';
+import { regex_starts_with_newline } from '../../../patterns.js';
+
+export class Template {
+	/**
+	 * `true` if HTML template contains a `<script>` tag. In this case we need to invoke a special
+	 * template instantiation function (see `create_fragment_with_script_from_html` for more info)
+	 */
+	contains_script_tag = false;
+
+	/** `true` if the HTML template needs to be instantiated with `importNode` */
+	needs_import_node = false;
+
+	/** @type {Node[]} */
+	nodes = [];
+
+	/** @type {Node[][]} */
+	#stack = [this.nodes];
+
+	/** @type {Element | undefined} */
+	#element;
+
+	#fragment = this.nodes;
+
+	/**
+	 * @param {string} name
+	 * @param {number} start
+	 */
+	create_element(name, start) {
+		this.#element = {
+			type: 'element',
+			name,
+			attributes: {},
+			children: [],
+			start
+		};
+
+		this.#fragment.push(this.#element);
+	}
+
+	/** @param {string} [data] */
+	create_anchor(data) {
+		this.#fragment.push({ type: 'anchor', data });
+	}
+
+	/** @param {AST.Text[]} nodes */
+	create_text(nodes) {
+		this.#fragment.push({ type: 'text', nodes });
+	}
+
+	push_element() {
+		this.#fragment = /** @type {Element} */ (this.#element).children;
+		this.#stack.push(this.#fragment);
+	}
+
+	pop_element() {
+		this.#stack.pop();
+		this.#fragment = /** @type {Node[]} */ (this.#stack.at(-1));
+	}
+
+	/**
+	 * @param {string} key
+	 * @param {string | undefined} value
+	 */
+	set_prop(key, value) {
+		/** @type {Element} */ (this.#element).attributes[key] = value;
+	}
+
+	as_string() {
+		return b.template([b.quasi(this.nodes.map(stringify).join(''), true)], []);
+	}
+
+	as_objects() {
+		// if the first item is a comment we need to add another comment for effect.start
+		if (this.nodes[0].type === 'anchor') {
+			this.nodes.unshift({ type: 'anchor', data: undefined });
+		}
+
+		return b.array(this.nodes.map(objectify));
+	}
+}
+
+/**
+ * @param {Node} item
+ */
+function stringify(item) {
+	if (item.type === 'text') {
+		return item.nodes.map((node) => node.raw).join('');
+	}
+
+	if (item.type === 'anchor') {
+		return item.data ? `<!--${item.data}-->` : '<!>';
+	}
+
+	let str = `<${item.name}`;
+
+	for (const key in item.attributes) {
+		const value = item.attributes[key];
+
+		str += ` ${key}`;
+		if (value !== undefined) str += `="${escape_html(value, true)}"`;
+	}
+
+	str += `>`;
+	str += item.children.map(stringify).join('');
+
+	if (!is_void(item.name)) {
+		str += `</${item.name}>`;
+	}
+
+	return str;
+}
+
+/** @param {Node} item */
+function objectify(item) {
+	if (item.type === 'text') {
+		return b.literal(item.nodes.map((node) => node.data).join(''));
+	}
+
+	if (item.type === 'anchor') {
+		return item.data ? b.array([b.literal(`// ${item.data}`)]) : null;
+	}
+
+	const element = b.array([b.literal(item.name)]);
+
+	const attributes = b.object([]);
+
+	for (const key in item.attributes) {
+		const value = item.attributes[key];
+
+		attributes.properties.push(
+			b.prop(
+				'init',
+				b.key(fix_attribute_casing(key)),
+				value === undefined ? b.void0 : b.literal(value)
+			)
+		);
+	}
+
+	if (attributes.properties.length > 0 || item.children.length > 0) {
+		element.elements.push(attributes.properties.length > 0 ? attributes : b.null);
+	}
+
+	if (item.children.length > 0) {
+		const children = item.children.map(objectify);
+		element.elements.push(...children);
+
+		// special case — strip leading newline from `<pre>` and `<textarea>`
+		if (item.name === 'pre' || item.name === 'textarea') {
+			const first = children[0];
+			if (first?.type === 'Literal') {
+				first.value = /** @type {string} */ (first.value).replace(regex_starts_with_newline, '');
+			}
+		}
+	}
+
+	return element;
+}

packages/svelte/src/compiler/phases/3-transform/client/transform-template/types.d.ts

@@ -0,0 +1,22 @@
+import type { AST } from '#compiler';
+
+export interface Element {
+	type: 'element';
+	name: string;
+	attributes: Record<string, string | undefined>;
+	children: Node[];
+	/** used for populating __svelte_meta */
+	start: number;
+}
+
+export interface Text {
+	type: 'text';
+	nodes: AST.Text[];
+}
+
+export interface Anchor {
+	type: 'anchor';
+	data: string | undefined;
+}
+
+export type Node = Element | Text | Anchor;

packages/svelte/src/compiler/phases/3-transform/client/types.d.ts

@@ -3,16 +3,15 @@ import type {
 	Statement,
 	LabeledStatement,
 	Identifier,
-	PrivateIdentifier,
 	Expression,
 	AssignmentExpression,
 	UpdateExpression,
 	VariableDeclaration
 } from 'estree';
-import type { AST, Namespace, StateField, ValidatedCompileOptions } from '#compiler';
+import type { AST, Namespace, ValidatedCompileOptions } from '#compiler';
 import type { TransformState } from '../types.js';
 import type { ComponentAnalysis } from '../../types.js';
-import type { SourceLocation } from '#shared';
+import type { Template } from './transform-template/template.js';
 
 export interface ClientTransformState extends TransformState {
 	/**
@@ -53,26 +52,10 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	/** Expressions used inside the render effect */
 	readonly expressions: Expression[];
 	/** The HTML template string */
-	readonly template: Array<string | Expression>;
-	readonly locations: SourceLocation[];
+	readonly template: Template;
 	readonly metadata: {
 		namespace: Namespace;
 		bound_contenteditable: boolean;
-		/**
-		 * Stuff that is set within the children of one `Fragment` visitor that is relevant
-		 * to said fragment. Shouldn't be destructured or otherwise spread unless inside the
-		 * `Fragment` visitor to keep the object reference intact (it's also nested
-		 * within `metadata` for this reason).
-		 */
-		context: {
-			/** `true` if the HTML template needs to be instantiated with `importNode` */
-			template_needs_import_node: boolean;
-			/**
-			 * `true` if HTML template contains a `<script>` tag. In this case we need to invoke a special
-			 * template instantiation function (see `create_fragment_with_script_from_html` for more info)
-			 */
-			template_contains_script_tag: boolean;
-		};
 	};
 	readonly preserve_whitespace: boolean;
 

packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js

@@ -11,7 +11,7 @@ import { get_value } from './shared/declarations.js';
  * @param {ComponentContext} context
  */
 export function AwaitBlock(node, context) {
-	context.state.template.push('<!>');
+	context.state.template.create_anchor();
 
 	// Visit {#await <expression>} first to ensure that scopes are in the correct order
 	const expression = b.thunk(/** @type {Expression} */ (context.visit(node.expression)));

packages/svelte/src/compiler/phases/3-transform/client/visitors/Comment.js

@@ -7,5 +7,5 @@
  */
 export function Comment(node, context) {
 	// We'll only get here if comments are not filtered out, which they are unless preserveComments is true
-	context.state.template.push(`<!--${node.data}-->`);
+	context.state.template.create_anchor(node.data);
 }

packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js

@@ -32,7 +32,7 @@ export function EachBlock(node, context) {
 	);
 
 	if (!each_node_meta.is_controlled) {
-		context.state.template.push('<!>');
+		context.state.template.create_anchor();
 	}
 
 	let flags = 0;