optimise for the common case

Author: Rich-Harris

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

@@ -19,14 +19,14 @@ export function template_to_functions(items) {
 function build(item) {
 	switch (item.type) {
 		case 'element': {
-			const element = b.object([b.prop('init', b.id('e'), b.literal(item.name))]);
+			const element = b.array([b.literal(item.name)]);
 
-			const attributes = b.prop('init', b.id('p'), b.object([]));
+			const attributes = b.object([]);
 
 			for (const key in item.attributes) {
 				const value = item.attributes[key];
 
-				attributes.value.properties.push(
+				attributes.properties.push(
 					b.prop(
 						'init',
 						b.key(fix_attribute_casing(key)),
@@ -35,13 +35,13 @@ function build(item) {
 				);
 			}
 
-			if (attributes.value.properties.length > 0) {
-				element.properties.push(attributes);
+			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(build);
-				element.properties.push(b.prop('init', b.id('c'), b.array(children)));
+				element.elements.push(...children);
 
 				// special case — strip leading newline from `<pre>` and `<textarea>`
 				if (item.name === 'pre' || item.name === 'textarea') {
@@ -59,7 +59,7 @@ function build(item) {
 		}
 
 		case 'anchor': {
-			return item.data ? b.array([b.literal(item.data)]) : null;
+			return item.data ? b.array([b.literal(`// ${item.data}`)]) : null;
 		}
 
 		case 'text': {

packages/svelte/src/internal/client/dom/template.js

@@ -1,4 +1,5 @@
 /** @import { Effect, TemplateNode } from '#client' */
+/** @import { TemplateStructure } from './types' */
 import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import {
 	create_text,
@@ -76,46 +77,44 @@ export function template(content, flags) {
 		return clone;
 	};
 }
-
 /**
- * @typedef {{e: string, p: Record<string, string>, c: Array<TemplateStructure>} | undefined | string | [string]} TemplateStructure
- */
-
-/**
- * @param {Array<TemplateStructure>} structure
+ * @param {TemplateStructure[]} structure
  * @param {NAMESPACE_SVG | NAMESPACE_MATHML | undefined} [ns]
  */
 function structure_to_fragment(structure, ns) {
 	var fragment = create_fragment();
 
 	for (var item of structure) {
-		if (item === undefined || Array.isArray(item)) {
-			fragment.append(create_comment(item ? item[0] : ''));
+		if (typeof item === 'string') {
+			fragment.append(create_text(item));
 			continue;
 		}
 
-		if (typeof item === 'string') {
-			fragment.append(create_text(item));
+		// if `preserveComments === true`, comments are represented as `['// <data>']`
+		if (item === undefined || item[0][0] === '/') {
+			fragment.append(create_comment(item ? item[0].slice(3) : ''));
 			continue;
 		}
 
+		const [name, attributes, ...children] = item;
+
 		/** @type {NAMESPACE_SVG | NAMESPACE_MATHML | undefined}  */
-		let namespace = item.e === 'svg' ? NAMESPACE_SVG : item.e === 'math' ? NAMESPACE_MATHML : ns;
+		let namespace = name === 'svg' ? NAMESPACE_SVG : name === 'math' ? NAMESPACE_MATHML : ns;
 
-		var element = create_element(item.e, namespace, item.p?.is);
+		var element = create_element(name, namespace, attributes?.is);
 
-		for (var key in item.p) {
-			set_attribute(element, key, item.p[key]);
+		for (var key in attributes) {
+			set_attribute(element, key, attributes[key]);
 		}
 
-		if (item.c) {
+		if (children.length > 0) {
 			var target =
 				element.tagName === 'TEMPLATE'
 					? /** @type {HTMLTemplateElement} */ (element).content
 					: element;
 
 			target.append(
-				structure_to_fragment(item.c, element.tagName === 'foreignObject' ? undefined : namespace)
+				structure_to_fragment(children, element.tagName === 'foreignObject' ? undefined : namespace)
 			);
 		}
 

packages/svelte/src/internal/client/dom/types.d.ts

@@ -0,0 +1,4 @@
+export type TemplateStructure =
+	| string
+	| undefined
+	| [string, Record<string, string> | undefined, ...TemplateStructure[]];

packages/svelte/tests/snapshot/samples/await-block-scope/_expected/client-functional/index.svelte.js

@@ -5,7 +5,7 @@ function increment(_, counter) {
 	counter.count += 1;
 }
 
-var root = $.template_fn([{ e: 'button', c: [' '] }, ' ', , ' '], 1);
+var root = $.template_fn([['button', null, ' '], ' ', , ' '], 1);
 
 export default function Await_block_scope($$anchor) {
 	let counter = $.proxy({ count: 0 });

packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client-functional/main.svelte.js

@@ -3,17 +3,17 @@ import * as $ from 'svelte/internal/client';
 
 var root = $.template_fn(
 	[
-		{ e: 'div' },
+		['div'],
 		' ',
-		{ e: 'svg' },
+		['svg'],
 		' ',
-		{ e: 'custom-element' },
+		['custom-element'],
 		' ',
-		{ e: 'div' },
+		['div'],
 		' ',
-		{ e: 'svg' },
+		['svg'],
 		' ',
-		{ e: 'custom-element' }
+		['custom-element']
 	],
 	3
 );

packages/svelte/tests/snapshot/samples/each-index-non-null/_expected/client-functional/index.svelte.js

@@ -2,7 +2,7 @@ import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
 
-var root_1 = $.template_fn([{ e: 'p' }]);
+var root_1 = $.template_fn([['p']]);
 
 export default function Each_index_non_null($$anchor) {
 	var fragment = $.comment();

packages/svelte/tests/snapshot/samples/hello-world/_expected/client-functional/index.svelte.js

@@ -2,7 +2,7 @@ import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
 
-var root = $.template_fn([{ e: 'h1', c: ['hello world'] }]);
+var root = $.template_fn([['h1', null, 'hello world']]);
 
 export default function Hello_world($$anchor) {
 	var h1 = root();

packages/svelte/tests/snapshot/samples/hmr/_expected/client-functional/index.svelte.js

@@ -2,7 +2,7 @@ import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
 
-var root = $.template_fn([{ e: 'h1', c: ['hello world'] }]);
+var root = $.template_fn([['h1', null, 'hello world']]);
 
 function Hmr($$anchor) {
 	var h1 = root();

packages/svelte/tests/snapshot/samples/nullish-coallescence-omittance/_expected/client-functional/index.svelte.js

@@ -5,13 +5,13 @@ var on_click = (_, count) => $.update(count);
 
 var root = $.template_fn(
 	[
-		{ e: 'h1' },
+		['h1'],
 		' ',
-		{ e: 'b' },
+		['b'],
 		' ',
-		{ e: 'button', c: [' '] },
+		['button', null, ' '],
 		' ',
-		{ e: 'h1' }
+		['h1']
 	],
 	1
 );

packages/svelte/tests/snapshot/samples/purity/_expected/client-functional/index.svelte.js

@@ -2,7 +2,7 @@ import 'svelte/internal/disclose-version';
 import 'svelte/internal/flags/legacy';
 import * as $ from 'svelte/internal/client';
 
-var root = $.template_fn([{ e: 'p' }, ' ', { e: 'p' }, ' ', ,], 1);
+var root = $.template_fn([['p'], ' ', ['p'], ' ', ,], 1);
 
 export default function Purity($$anchor) {
 	var fragment = root();