perf: inline module variables into template

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

@@ -55,8 +55,8 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	readonly after_update: Statement[];
 	/** The HTML template string */
 	readonly template: {
-		quasi: string[];
-		expressions: Expression[];
+		pushQuasi: (q: string) => void;
+		pushExpression: (e: Expression) => void;
 	};
 	readonly locations: SourceLocation[];
 	readonly metadata: {

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

@@ -312,32 +312,6 @@ export function create_derived(state, arg) {
 	return b.call(state.analysis.runes ? '$.derived' : '$.derived_safe_equal', arg);
 }
 
-/**
- * @param {import('./types.js').ComponentClientTransformState} state
- * @param {string} quasi_to_add
- */
-export function push_template_quasi(state, quasi_to_add) {
-	const { quasi } = state.template;
-	if (quasi.length === 0) {
-		quasi.push(quasi_to_add);
-		return;
-	}
-	quasi[quasi.length - 1] = quasi[quasi.length - 1].concat(quasi_to_add);
-}
-
-/**
- * @param {import('./types.js').ComponentClientTransformState} state
- * @param {import('estree').Expression} expression_to_add
- */
-export function push_template_expression(state, expression_to_add) {
-	const { expressions, quasi } = state.template;
-	if (quasi.length === 0) {
-		quasi.push('');
-	}
-	expressions.push(expression_to_add);
-	quasi.push('');
-}
-
 /**
  * Whether a variable can be referenced directly from template string.
  * @param {import('#compiler').Binding | undefined} binding

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

@@ -2,14 +2,14 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
-import { create_derived_block_argument, push_template_quasi } from '../utils.js';
+import { create_derived_block_argument } from '../utils.js';
 
 /**
  * @param {AST.AwaitBlock} node
  * @param {ComponentContext} context
  */
 export function AwaitBlock(node, context) {
-	push_template_quasi(context.state, '<!>');
+	context.state.template.pushQuasi('<!>');
 
 	// 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

@@ -1,13 +1,11 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 
-import { push_template_quasi } from '../utils.js';
-
 /**
  * @param {AST.Comment} node
  * @param {ComponentContext} context
  */
 export function Comment(node, context) {
 	// We'll only get here if comments are not filtered out, which they are unless preserveComments is true
-	push_template_quasi(context.state, `<!--${node.data}-->`);
+	context.state.template.pushQuasi(`<!--${node.data}-->`);
 }

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

@@ -12,7 +12,7 @@ import {
 import { dev } from '../../../../state.js';
 import { extract_paths, object } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
-import { build_getter, push_template_quasi } from '../utils.js';
+import { build_getter } from '../utils.js';
 import { get_value } from './shared/declarations.js';
 
 /**
@@ -32,7 +32,7 @@ export function EachBlock(node, context) {
 	);
 
 	if (!each_node_meta.is_controlled) {
-		push_template_quasi(context.state, '<!>');
+		context.state.template.pushQuasi('<!>');
 	}
 
 	if (each_node_meta.array_name !== null) {

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

@@ -57,6 +57,11 @@ export function Fragment(node, context) {
 	/** @type {Statement | undefined} */
 	let close = undefined;
 
+	/** @type {string[]} */
+	const quasi = [];
+	/** @type {Expression[]} */
+	const expressions = [];
+
 	/** @type {ComponentClientTransformState} */
 	const state = {
 		...context.state,
@@ -65,8 +70,20 @@ export function Fragment(node, context) {
 		update: [],
 		after_update: [],
 		template: {
-			quasi: [],
-			expressions: []
+			pushQuasi: (/** @type {string} */ quasi_to_add) => {
+				if (quasi.length === 0) {
+					quasi.push(quasi_to_add);
+					return;
+				}
+				quasi[quasi.length - 1] = quasi[quasi.length - 1].concat(quasi_to_add);
+			},
+			pushExpression: (/** @type {Expression} */ expression_to_add) => {
+				if (quasi.length === 0) {
+					quasi.push('');
+				}
+				expressions.push(expression_to_add);
+				quasi.push('');
+			}
 		},
 		locations: [],
 		transform: { ...context.state.transform },
@@ -120,8 +137,8 @@ export function Fragment(node, context) {
 		/** @type {Expression[]} */
 		const args = [
 			b.template(
-				state.template.quasi.map((q) => b.quasi(q, true)),
-				state.template.expressions
+				quasi.map((q) => b.quasi(q, true)),
+				expressions
 			)
 		];
 
@@ -178,14 +195,14 @@ export function Fragment(node, context) {
 					flags |= TEMPLATE_USE_IMPORT_NODE;
 				}
 
-				if (state.template.quasi.length === 1 && state.template.quasi[0] === '<!>') {
+				if (quasi.length === 1 && quasi[0] === '<!>') {
 					// special case — we can use `$.comment` instead of creating a unique template
 					body.push(b.var(id, b.call('$.comment')));
 				} else {
 					add_template(template_name, [
 						b.template(
-							state.template.quasi.map((q) => b.quasi(q, true)),
-							state.template.expressions
+							quasi.map((q) => b.quasi(q, true)),
+							expressions
 						),
 						b.literal(flags)
 					]);

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

@@ -3,14 +3,13 @@
 /** @import { ComponentContext } from '../types' */
 import { is_ignored } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
-import { push_template_quasi } from '../utils.js';
 
 /**
  * @param {AST.HtmlTag} node
  * @param {ComponentContext} context
  */
 export function HtmlTag(node, context) {
-	push_template_quasi(context.state, '<!>');
+	context.state.template.pushQuasi('<!>');
 
 	// push into init, so that bindings run afterwards, which might trigger another run and override hydration
 	context.state.init.push(

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

@@ -2,14 +2,13 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
-import { push_template_quasi } from '../utils.js';
 
 /**
  * @param {AST.IfBlock} node
  * @param {ComponentContext} context
  */
 export function IfBlock(node, context) {
-	push_template_quasi(context.state, '<!>');
+	context.state.template.pushQuasi('<!>');
 
 	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
 

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

@@ -2,14 +2,13 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
-import { push_template_quasi } from '../utils.js';
 
 /**
  * @param {AST.KeyBlock} node
  * @param {ComponentContext} context
  */
 export function KeyBlock(node, context) {
-	push_template_quasi(context.state, '<!>');
+	context.state.template.pushQuasi('<!>');
 
 	const key = /** @type {Expression} */ (context.visit(node.expression));
 	const body = /** @type {Expression} */ (context.visit(node.fragment));

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

@@ -19,12 +19,7 @@ import {
 import * as b from '../../../../utils/builders.js';
 import { is_custom_element_node } from '../../../nodes.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
-import {
-	build_getter,
-	can_inline_variable,
-	push_template_expression,
-	push_template_quasi
-} from '../utils.js';
+import { build_getter, can_inline_variable } from '../utils.js';
 import {
 	get_attribute_name,
 	build_attribute_value,
@@ -58,7 +53,7 @@ export function RegularElement(node, context) {
 	}
 
 	if (node.name === 'noscript') {
-		push_template_quasi(context.state, '<noscript></noscript>');
+		context.state.template.pushQuasi('<noscript></noscript>');
 		return;
 	}
 
@@ -72,7 +67,7 @@ export function RegularElement(node, context) {
 		namespace: determine_namespace_for_children(node, context.state.metadata.namespace)
 	};
 
-	push_template_quasi(context.state, `<${node.name}`);
+	context.state.template.pushQuasi(`<${node.name}`);
 
 	/** @type {Array<AST.Attribute | AST.SpreadAttribute>} */
 	const attributes = [];
@@ -246,8 +241,7 @@ export function RegularElement(node, context) {
 				const value = is_text_attribute(attribute) ? attribute.value[0].data : true;
 
 				if (name !== 'class' || value) {
-					push_template_quasi(
-						context.state,
+					context.state.template.pushQuasi(
 						` ${attribute.name}${
 							is_boolean_attribute(name) && value === true
 								? ''
@@ -284,7 +278,7 @@ export function RegularElement(node, context) {
 		context.state.after_update.push(b.stmt(b.call('$.replay_events', node_id)));
 	}
 
-	push_template_quasi(context.state, '>');
+	context.state.template.pushQuasi('>');
 
 	/** @type {SourceLocation[]} */
 	const child_locations = [];
@@ -383,7 +377,7 @@ export function RegularElement(node, context) {
 	}
 
 	if (!is_void(node.name)) {
-		push_template_quasi(context.state, `</${node.name}>`);
+		context.state.template.pushQuasi(`</${node.name}>`);
 	}
 }
 
@@ -471,7 +465,7 @@ function build_element_spread_attributes(
 				value.type === 'Literal' &&
 				context.state.metadata.namespace === 'html'
 			) {
-				push_template_quasi(context.state, ` is="${escape_html(value.value, true)}"`);
+				context.state.template.pushQuasi(` is="${escape_html(value.value, true)}"`);
 				continue;
 			}
 
@@ -629,9 +623,9 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		return true;
 	} else {
 		if (inlinable_expression) {
-			push_template_quasi(context.state, ` ${name}="`);
-			push_template_expression(context.state, value);
-			push_template_quasi(context.state, '"');
+			context.state.template.pushQuasi(` ${name}="`);
+			context.state.template.pushExpression(value);
+			context.state.template.pushQuasi('"');
 		} else {
 			state.init.push(update);
 		}

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

@@ -3,14 +3,13 @@
 /** @import { ComponentContext } from '../types' */
 import { unwrap_optional } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
-import { push_template_quasi } from '../utils.js';
 
 /**
  * @param {AST.RenderTag} node
  * @param {ComponentContext} context
  */
 export function RenderTag(node, context) {
-	push_template_quasi(context.state, '<!>');
+	context.state.template.pushQuasi('<!>');
 	const callee = unwrap_optional(node.expression).callee;
 	const raw_args = unwrap_optional(node.expression).arguments;
 

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

@@ -2,7 +2,6 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
-import { push_template_quasi } from '../utils.js';
 import { build_attribute_value } from './shared/element.js';
 
 /**
@@ -11,7 +10,7 @@ import { build_attribute_value } from './shared/element.js';
  */
 export function SlotElement(node, context) {
 	// <slot {a}>fallback</slot>  -->   $.slot($$slots.default, { get a() { .. } }, () => ...fallback);
-	push_template_quasi(context.state, '<!>');
+	context.state.template.pushQuasi('<!>');
 
 	/** @type {Property[]} */
 	const props = [];

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

@@ -9,7 +9,6 @@ import {
 } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
 import { determine_namespace_for_children } from '../../utils.js';
-import { push_template_quasi } from '../utils.js';
 import {
 	build_attribute_value,
 	build_class_directives,
@@ -22,7 +21,7 @@ import { build_render_statement, build_update } from './shared/utils.js';
  * @param {ComponentContext} context
  */
 export function SvelteElement(node, context) {
-	push_template_quasi(context.state, `<!>`);
+	context.state.template.pushQuasi(`<!>`);
 
 	/** @type {Array<AST.Attribute | AST.SpreadAttribute>} */
 	const attributes = [];

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

@@ -4,7 +4,7 @@
 import { dev, is_ignored } from '../../../../../state.js';
 import { get_attribute_chunks } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { create_derived, push_template_quasi } from '../../utils.js';
+import { create_derived } from '../../utils.js';
 import { build_bind_this, validate_binding } from '../shared/utils.js';
 import { build_attribute_value } from '../shared/element.js';
 import { build_event_handler } from './events.js';
@@ -357,8 +357,7 @@ export function build_component(node, component_name, context, anchor = context.
 	}
 
 	if (Object.keys(custom_css_props).length > 0) {
-		push_template_quasi(
-			context.state,
+		context.state.template.pushQuasi(
 			context.state.metadata.namespace === 'svg'
 				? '<g><!></g>'
 				: '<div style="display: contents"><!></div>'
@@ -370,7 +369,7 @@ export function build_component(node, component_name, context, anchor = context.
 			b.stmt(b.call('$.reset', anchor))
 		);
 	} else {
-		push_template_quasi(context.state, '<!>');
+		context.state.template.pushQuasi('<!>');
 		statements.push(b.stmt(fn(anchor)));
 	}
 

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

@@ -3,7 +3,6 @@
 /** @import { ComponentContext } from '../../types' */
 import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { push_template_quasi } from '../../utils.js';
 import { build_template_literal, build_update } from './utils.js';
 
 /**
@@ -63,11 +62,11 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 	function flush_sequence(sequence) {
 		if (sequence.every((node) => node.type === 'Text')) {
 			skipped += 1;
-			push_template_quasi(state, sequence.map((node) => node.raw).join(''));
+			state.template.pushQuasi(sequence.map((node) => node.raw).join(''));
 			return;
 		}
 
-		push_template_quasi(state, ' ');
+		state.template.pushQuasi(' ');
 
 		const { has_state, has_call, value } = build_template_literal(sequence, visit, state);