feat: make all tests pass with functional templates

Author: paoloricciuti

.changeset/smart-boats-accept.md

@@ -2,4 +2,4 @@
 'svelte': minor
 ---
 
-feat: templateless template generation
+feat: functional template generation

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

@@ -4,7 +4,6 @@
  * @import { AST, Namespace } from '#compiler'
  * @import { SourceLocation } from '#shared'
  */
-import { TEMPLATE_FRAGMENT } from '../../../../../constants.js';
 import { dev } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { template_to_functions } from './to-functions.js';
@@ -18,15 +17,17 @@ import { template_to_string } from './to-string.js';
  */
 function get_template_function(namespace, state) {
 	const contains_script_tag = state.metadata.context.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';
+	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.prevent_template_cloning ? '_fn' : '');
 }
 
 /**
@@ -54,21 +55,6 @@ function build_locations(locations) {
  * @param {number} [flags]
  */
 export function transform_template(state, context, namespace, template_name, flags) {
-	if (context.state.prevent_template_cloning) {
-		context.state.hoisted.push(
-			b.var(
-				template_name,
-				template_to_functions(
-					state.template,
-					namespace,
-					flags != null && (flags & TEMPLATE_FRAGMENT) !== 0
-				)
-			)
-		);
-
-		return;
-	}
-
 	/**
 	 * @param {Identifier} template_name
 	 * @param {Expression[]} args
@@ -88,7 +74,11 @@ export function transform_template(state, context, namespace, template_name, fla
 	};
 
 	/** @type {Expression[]} */
-	const args = [b.template([b.quasi(template_to_string(state.template), true)], [])];
+	const args = [
+		state.prevent_template_cloning
+			? template_to_functions(state.template, namespace)
+			: b.template([b.quasi(template_to_string(state.template), true)], [])
+	];
 
 	if (flags) {
 		args.push(b.literal(flags));

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

@@ -1,11 +1,12 @@
 /**
  * @import { TemplateOperations } from "../types.js"
  * @import { Namespace } from "#compiler"
- * @import { Statement } from "estree"
+ * @import { CallExpression, Statement } from "estree"
  */
 import { NAMESPACE_SVG } from 'svelte/internal/client';
-import * as b from '../../../../utils/builders.js';
 import { NAMESPACE_MATHML } from '../../../../../constants.js';
+import * as b from '../../../../utils/builders.js';
+import fix_attribute_casing from './fix-attribute-casing.js';
 
 class Scope {
 	declared = new Map();
@@ -28,9 +29,8 @@ class Scope {
 /**
  * @param {TemplateOperations} items
  * @param {Namespace} namespace
- * @param {boolean} use_fragment
  */
-export function template_to_functions(items, namespace, use_fragment = false) {
+export function template_to_functions(items, namespace) {
 	let elements = [];
 
 	let body = [];
@@ -42,26 +42,61 @@ export function template_to_functions(items, namespace, use_fragment = false) {
 	 */
 	let elements_stack = [];
 
+	/**
+	 * @type {Array<string>}
+	 */
+	let namespace_stack = [];
+
+	/**
+	 * @type {number}
+	 */
+	let foreign_object_count = 0;
+
 	/**
 	 * @type {Element | undefined}
 	 */
 	let last_current_element;
 
+	if (items[0].kind === 'create_anchor') {
+		items.unshift({ kind: 'create_anchor' });
+	}
+
 	for (let instruction of items) {
 		if (instruction.kind === 'push_element' && last_current_element) {
 			elements_stack.push(last_current_element);
 			continue;
 		}
 		if (instruction.kind === 'pop_element') {
-			elements_stack.pop();
+			const removed = elements_stack.pop();
+			if (removed?.namespaced) {
+				namespace_stack.pop();
+			}
+			if (removed?.element === 'foreignObject') {
+				foreign_object_count--;
+			}
 			continue;
 		}
 
+		if (instruction.metadata?.svg || instruction.metadata?.mathml) {
+			namespace_stack.push(instruction.metadata.svg ? NAMESPACE_SVG : NAMESPACE_MATHML);
+		}
+
 		// @ts-expect-error we can't be here if `swap_current_element` but TS doesn't know that
 		const value = map[instruction.kind](
 			...[
 				...(instruction.kind === 'set_prop' ? [last_current_element] : [scope]),
-				...(instruction.kind === 'create_element' ? [namespace] : []),
+				...(instruction.kind === 'create_element'
+					? [
+							foreign_object_count > 0
+								? undefined
+								: namespace_stack.at(-1) ??
+									(namespace === 'svg'
+										? NAMESPACE_SVG
+										: namespace === 'mathml'
+											? NAMESPACE_MATHML
+											: undefined)
+						]
+					: []),
 				...(instruction.args ?? [])
 			]
 		);
@@ -79,23 +114,22 @@ export function template_to_functions(items, namespace, use_fragment = false) {
 			}
 			if (instruction.kind === 'create_element') {
 				last_current_element = /** @type {Element} */ (value);
+				if (last_current_element.element === 'foreignObject') {
+					foreign_object_count++;
+				}
 			}
 		}
 	}
-	if (elements.length > 1 || use_fragment) {
-		const fragment = scope.generate('fragment');
-		body.push(b.var(fragment, b.call('document.createDocumentFragment')));
-		body.push(b.call(fragment + '.append', ...elements));
-		body.push(b.return(b.id(fragment)));
-	} else {
-		body.push(b.return(elements[0]));
-	}
+	const fragment = scope.generate('fragment');
+	body.push(b.var(fragment, b.call('document.createDocumentFragment')));
+	body.push(b.call(fragment + '.append', ...elements));
+	body.push(b.return(b.id(fragment)));
 
 	return b.arrow([], b.block(body));
 }
 
 /**
- * @typedef {{ call: Statement, name: string }} Element
+ * @typedef {{ call: Statement, name: string, add_is: (value: string)=>void, namespaced: boolean; element: string; }} Element
  */
 
 /**
@@ -118,14 +152,26 @@ export function template_to_functions(items, namespace, use_fragment = false) {
  */
 function create_element(scope, namespace, element) {
 	const name = scope.generate(element);
-	let fn = namespace !== 'html' ? 'document.createElementNS' : 'document.createElement';
+	let fn = namespace != null ? 'document.createElementNS' : 'document.createElement';
 	let args = [b.literal(element)];
-	if (namespace !== 'html') {
-		args.unshift(namespace === 'svg' ? b.literal(NAMESPACE_SVG) : b.literal(NAMESPACE_MATHML));
+	if (namespace != null) {
+		args.unshift(b.literal(namespace));
+	}
+	const call = b.var(name, b.call(fn, ...args));
+	/**
+	 * @param {string} value
+	 */
+	function add_is(value) {
+		/** @type {CallExpression} */ (call.declarations[0].init).arguments.push(
+			b.object([b.prop('init', b.literal('is'), b.literal(value))])
+		);
 	}
 	return {
-		call: b.var(name, b.call(fn, ...args)),
-		name
+		call,
+		name,
+		element,
+		add_is,
+		namespaced: namespace != null
 	};
 }
 
@@ -162,8 +208,21 @@ function create_text(scope, value) {
  * @param {string} value
  */
 function set_prop(el, prop, value) {
+	if (prop === 'is') {
+		el.add_is(value);
+		return;
+	}
+
+	const [namespace] = prop.split(':');
+	let fn = namespace !== prop ? '.setAttributeNS' : '.setAttribute';
+	let args = [b.literal(fix_attribute_casing(prop)), b.literal(value ?? '')];
+
+	if (namespace === 'xlink') {
+		args.unshift(b.literal('http://www.w3.org/1999/xlink'));
+	}
+
 	return {
-		call: b.call(el.name + '.setAttribute', b.literal(prop), b.literal(value))
+		call: b.call(el.name + fn, ...args)
 	};
 }
 
@@ -175,7 +234,11 @@ function set_prop(el, prop, value) {
  */
 function insert(el, child, anchor) {
 	return {
-		call: b.call(el.name + '.insertBefore', b.id(child.name), b.id(anchor?.name ?? 'undefined'))
+		call: b.call(
+			el.name + (el.element === 'template' ? '.content' : '') + '.insertBefore',
+			b.id(child.name),
+			b.id(anchor?.name ?? 'undefined')
+		)
 	};
 }
 

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

@@ -50,6 +50,10 @@ type TemplateOperationsKind =
 type TemplateOperations = Array<{
 	kind: TemplateOperationsKind;
 	args?: Array<string>;
+	metadata?: {
+		svg: boolean;
+		mathml: boolean;
+	};
 }>;
 export interface ComponentClientTransformState extends ClientTransformState {
 	readonly analysis: ComponentAnalysis;

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

@@ -36,7 +36,8 @@ export function Fragment(node, context) {
 		namespace,
 		context.state,
 		context.state.preserve_whitespace,
-		context.state.options.preserveComments
+		context.state.options.preserveComments,
+		context.state.prevent_template_cloning
 	);
 
 	if (hoisted.length === 0 && trimmed.length === 0) {
@@ -124,22 +125,40 @@ export function Fragment(node, context) {
 			// special case — we can use `$.text` instead of creating a unique template
 			const id = b.id(context.state.scope.generate('text'));
 
-			process_children(trimmed, () => id, false, {
-				...context,
-				state
-			});
+			process_children(
+				trimmed,
+				() => id,
+				false,
+				{
+					...context,
+					state
+				},
+				context.state.prevent_template_cloning
+			);
 
 			body.push(b.var(id, b.call('$.text')));
 			close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
 		} else {
 			if (is_standalone) {
 				// no need to create a template, we can just use the existing block's anchor
-				process_children(trimmed, () => b.id('$$anchor'), false, { ...context, state });
+				process_children(
+					trimmed,
+					() => b.id('$$anchor'),
+					false,
+					{ ...context, state },
+					context.state.prevent_template_cloning
+				);
 			} else {
 				/** @type {(is_text: boolean) => Expression} */
 				const expression = (is_text) => b.call('$.first_child', id, is_text && b.true);
 
-				process_children(trimmed, expression, false, { ...context, state });
+				process_children(
+					trimmed,
+					expression,
+					false,
+					{ ...context, state },
+					context.state.prevent_template_cloning
+				);
 
 				let flags = TEMPLATE_FRAGMENT;