perf: inline module variables into template

Author: benmccann

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

@@ -54,7 +54,10 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	/** Stuff that happens after the render effect (control blocks, dynamic elements, bindings, actions, etc) */
 	readonly after_update: Statement[];
 	/** The HTML template string */
-	readonly template: string[];
+	readonly template: {
+		quasi: string[];
+		expressions: Expression[];
+	};
 	readonly locations: SourceLocation[];
 	readonly metadata: {
 		namespace: Namespace;

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

@@ -311,3 +311,38 @@ export function create_derived_block_argument(node, context) {
 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
+ * @returns {boolean}
+ */
+export function can_inline_variable(binding) {
+	return !!binding && !binding.scope.parent;
+}

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

@@ -2,14 +2,14 @@
 /** @import { AwaitBlock } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
-import { create_derived_block_argument } from '../utils.js';
+import { create_derived_block_argument, push_template_quasi } from '../utils.js';
 
 /**
  * @param {AwaitBlock} node
  * @param {ComponentContext} context
  */
 export function AwaitBlock(node, context) {
-	context.state.template.push('<!>');
+	push_template_quasi(context.state, '<!>');
 
 	// 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,11 +1,13 @@
 /** @import { Comment } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 
+import { push_template_quasi } from '../utils.js';
+
 /**
  * @param {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
-	context.state.template.push(`<!--${node.data}-->`);
+	push_template_quasi(context.state, `<!--${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 } from '../utils.js';
+import { build_getter, push_template_quasi } 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) {
-		context.state.template.push('<!>');
+		push_template_quasi(context.state, '<!>');
 	}
 
 	if (each_node_meta.array_name !== null) {

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

@@ -64,7 +64,10 @@ export function Fragment(node, context) {
 		init: [],
 		update: [],
 		after_update: [],
-		template: [],
+		template: {
+			quasi: [],
+			expressions: []
+		},
 		locations: [],
 		transform: { ...context.state.transform },
 		metadata: {
@@ -115,7 +118,12 @@ export function Fragment(node, context) {
 		});
 
 		/** @type {Expression[]} */
-		const args = [b.template([b.quasi(state.template.join(''), true)], [])];
+		const args = [
+			b.template(
+				state.template.quasi.map((q) => b.quasi(q, true)),
+				state.template.expressions
+			)
+		];
 
 		if (state.metadata.context.template_needs_import_node) {
 			args.push(b.literal(TEMPLATE_USE_IMPORT_NODE));
@@ -170,12 +178,15 @@ export function Fragment(node, context) {
 					flags |= TEMPLATE_USE_IMPORT_NODE;
 				}
 
-				if (state.template.length === 1 && state.template[0] === '<!>') {
+				if (state.template.quasi.length === 1 && state.template.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([b.quasi(state.template.join(''), true)], []),
+						b.template(
+							state.template.quasi.map((q) => b.quasi(q, true)),
+							state.template.expressions
+						),
 						b.literal(flags)
 					]);
 

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

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

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

@@ -2,13 +2,14 @@
 /** @import { KeyBlock } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
+import { push_template_quasi } from '../utils.js';
 
 /**
  * @param {KeyBlock} node
  * @param {ComponentContext} context
  */
 export function KeyBlock(node, context) {
-	context.state.template.push('<!>');
+	push_template_quasi(context.state, '<!>');
 
 	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,7 +19,12 @@ 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 } from '../utils.js';
+import {
+	build_getter,
+	can_inline_variable,
+	push_template_expression,
+	push_template_quasi
+} from '../utils.js';
 import {
 	get_attribute_name,
 	build_attribute_value,
@@ -53,7 +58,7 @@ export function RegularElement(node, context) {
 	}
 
 	if (node.name === 'noscript') {
-		context.state.template.push('<noscript></noscript>');
+		push_template_quasi(context.state, '<noscript></noscript>');
 		return;
 	}
 
@@ -67,7 +72,7 @@ export function RegularElement(node, context) {
 		namespace: determine_namespace_for_children(node, context.state.metadata.namespace)
 	};
 
-	context.state.template.push(`<${node.name}`);
+	push_template_quasi(context.state, `<${node.name}`);
 
 	/** @type {Array<Attribute | SpreadAttribute>} */
 	const attributes = [];
@@ -241,7 +246,8 @@ export function RegularElement(node, context) {
 				const value = is_text_attribute(attribute) ? attribute.value[0].data : true;
 
 				if (name !== 'class' || value) {
-					context.state.template.push(
+					push_template_quasi(
+						context.state,
 						` ${attribute.name}${
 							is_boolean_attribute(name) && value === true
 								? ''
@@ -278,7 +284,7 @@ export function RegularElement(node, context) {
 		context.state.after_update.push(b.stmt(b.call('$.replay_events', node_id)));
 	}
 
-	context.state.template.push('>');
+	push_template_quasi(context.state, '>');
 
 	/** @type {SourceLocation[]} */
 	const child_locations = [];
@@ -377,7 +383,7 @@ export function RegularElement(node, context) {
 	}
 
 	if (!is_void(node.name)) {
-		context.state.template.push(`</${node.name}>`);
+		push_template_quasi(context.state, `</${node.name}>`);
 	}
 }
 
@@ -465,7 +471,7 @@ function build_element_spread_attributes(
 				value.type === 'Literal' &&
 				context.state.metadata.namespace === 'html'
 			) {
-				context.state.template.push(` is="${escape_html(value.value, true)}"`);
+				push_template_quasi(context.state, ` is="${escape_html(value.value, true)}"`);
 				continue;
 			}
 
@@ -607,6 +613,13 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		);
 	}
 
+	const { has_expression_tag, can_inline } =
+		attribute.value === true
+			? { has_expression_tag: false, can_inline: true }
+			: can_inline_all_nodes(
+					Array.isArray(attribute.value) ? attribute.value : [attribute.value],
+					context.state
+				);
 	if (attribute.metadata.expression.has_state) {
 		if (has_call) {
 			state.init.push(build_update(update));
@@ -615,11 +628,40 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		}
 		return true;
 	} else {
-		state.init.push(update);
+		if (has_expression_tag && can_inline) {
+			push_template_quasi(context.state, ` ${name}="`);
+			push_template_expression(context.state, value);
+			push_template_quasi(context.state, '"');
+		} else {
+			state.init.push(update);
+		}
 		return false;
 	}
 }
 
+/**
+ * @param {(import('#compiler').Text | import('#compiler').ExpressionTag)[]} nodes
+ * @param {import('../types.js').ComponentClientTransformState} state
+ */
+function can_inline_all_nodes(nodes, state) {
+	let can_inline = true;
+	let has_expression_tag = false;
+	for (let value of nodes) {
+		if (value.type === 'ExpressionTag') {
+			if (value.expression.type === 'Identifier') {
+				const binding = state.scope
+					.owner(value.expression.name)
+					?.declarations.get(value.expression.name);
+				can_inline &&= can_inline_variable(binding);
+			} else {
+				can_inline = false;
+			}
+			has_expression_tag = true;
+		}
+	}
+	return { can_inline, has_expression_tag };
+}
+
 /**
  * Like `build_element_attribute_update_assignment` but without any special attribute treatment.
  * @param {Identifier}	node_id

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

@@ -3,13 +3,14 @@
 /** @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 {RenderTag} node
  * @param {ComponentContext} context
  */
 export function RenderTag(node, context) {
-	context.state.template.push('<!>');
+	push_template_quasi(context.state, '<!>');
 	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,6 +2,7 @@
 /** @import { SlotElement } 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';
 
 /**
@@ -10,7 +11,7 @@ import { build_attribute_value } from './shared/element.js';
  */
 export function SlotElement(node, context) {
 	// <slot {a}>fallback</slot>  -->   $.slot($$slots.default, { get a() { .. } }, () => ...fallback);
-	context.state.template.push('<!>');
+	push_template_quasi(context.state, '<!>');
 
 	/** @type {Property[]} */
 	const props = [];

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

@@ -11,6 +11,7 @@ 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,
@@ -23,7 +24,7 @@ import { build_render_statement, build_update } from './shared/utils.js';
  * @param {ComponentContext} context
  */
 export function SvelteElement(node, context) {
-	context.state.template.push(`<!>`);
+	push_template_quasi(context.state, `<!>`);
 
 	/** @type {Array<Attribute | 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 } from '../../utils.js';
+import { create_derived, push_template_quasi } 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,7 +357,8 @@ export function build_component(node, component_name, context, anchor = context.
 	}
 
 	if (Object.keys(custom_css_props).length > 0) {
-		context.state.template.push(
+		push_template_quasi(
+			context.state,
 			context.state.metadata.namespace === 'svg'
 				? '<g><!></g>'
 				: '<div style="display: contents"><!></div>'
@@ -369,7 +370,7 @@ export function build_component(node, component_name, context, anchor = context.
 			b.stmt(b.call('$.reset', anchor))
 		);
 	} else {
-		context.state.template.push('<!>');
+		push_template_quasi(context.state, '<!>');
 		statements.push(b.stmt(fn(anchor)));
 	}