perf: use unchanged primitives directly in template attributes

.changeset/twelve-peaches-jam.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+perf: use unchanged primitives directly in template attributes

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

@@ -77,10 +77,18 @@ export function client_component(source, analysis, options) {
 			return a;
 		},
 		get template() {
-			/** @type {any[]} */
-			const a = [];
-			a.push = () =>
-				error(null, 'INTERNAL', 'template.push should not be called outside create_block');
+			const a = {
+				quasi: [],
+				expressions: []
+			};
+			a.quasi.push = () =>
+				error(null, 'INTERNAL', 'template.quasi.push should not be called outside create_block');
+			a.expressions.push = () =>
+				error(
+					null,
+					'INTERNAL',
+					'template.expressions.push should not be called outside create_block'
+				);
 			return a;
 		},
 		legacy_reactive_statements: new Map(),
@@ -336,8 +344,8 @@ export function client_component(source, analysis, options) {
 	}
 
 	const body = [
-		...state.hoisted,
 		...module.body,
+		...state.hoisted,
 		b.export_default(
 			b.function_declaration(
 				b.id(analysis.name),

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

@@ -3,7 +3,8 @@ import type {
 	Statement,
 	LabeledStatement,
 	Identifier,
-	PrivateIdentifier
+	PrivateIdentifier,
+	Expression
 } from 'estree';
 import type { Namespace, SvelteNode, ValidatedCompileOptions } from '#compiler';
 import type { TransformState } from '../types.js';
@@ -45,7 +46,10 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	/** Stuff that happens after the render effect (bindings, actions) */
 	readonly after_update: Statement[];
 	/** The HTML template string */
-	readonly template: string[];
+	readonly template: {
+		quasi: string[];
+		expressions: Expression[];
+	};
 	readonly metadata: {
 		namespace: Namespace;
 		/** `true` if the HTML template needs to be instantiated with `importNode` */

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

@@ -7,6 +7,7 @@ import {
 	PROPS_IS_RUNES,
 	PROPS_IS_UPDATED
 } from '../../../../constants.js';
+import { GlobalBindings } from '../../constants.js';
 
 /**
  * @template {import('./types').ClientTransformState} State
@@ -518,3 +519,39 @@ export function should_proxy_or_freeze(node) {
 
 	return true;
 }
+
+/**
+ * Whether a variable can be referenced directly from template string.
+ * @param {import('#compiler').Binding | undefined} binding
+ * @param {string} name
+ * @returns {boolean}
+ */
+export function can_inline_variable(binding, name) {
+	return can_hoist_declaration(binding, name) || (!!binding && !binding.scope.has_parent());
+}
+
+/**
+ * @param {import('#compiler').Binding | undefined} binding
+ * @param {string} name
+ * @returns {boolean}
+ */
+export function can_hoist_declaration(binding, name) {
+	// We cannot hoist functions or constructors because they could be non-deterministic
+	// (i.e. `Math.random()`) or have side-effects (e.g. `increment()`). We also cannot hoist
+	// anything that references a non-hoistable variable.
+	return (
+		!!binding &&
+		binding.kind === 'normal' &&
+		binding.scope.is_top_level &&
+		binding.scope.has_parent() && // i.e. not when context="module"
+		// For now we just allow primitives for simplicity
+		binding.initial?.type === 'Literal' &&
+		// For now, we just check that it's not mutated or reassigned for simplicity
+		// E.g. if you have `let x = 0; x++` you could hoist both statements
+		!binding.mutated &&
+		!binding.reassigned &&
+		// Avoid conflicts. It would be nice to rename the variable, but keeping it simple for now
+		!binding.scope.declared_in_outer_scope(name) &&
+		!GlobalBindings.has(name)
+	);
+}

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

@@ -1,7 +1,7 @@
 import { is_hoistable_function } from '../../utils.js';
 import * as b from '../../../../utils/builders.js';
 import { extract_paths } from '../../../../utils/ast.js';
-import { get_prop_source, serialize_get_binding } from '../utils.js';
+import { can_hoist_declaration, get_prop_source, serialize_get_binding } from '../utils.js';
 
 /**
  * Creates the output for a state declaration.
@@ -44,6 +44,18 @@ export const javascript_visitors_legacy = {
 
 			if (!has_state && !has_props) {
 				const init = declarator.init;
+
+				if (init != null && declarator.id.type === 'Identifier') {
+					const binding = state.scope
+						.owner(declarator.id.name)
+						?.declarations.get(declarator.id.name);
+
+					if (can_hoist_declaration(binding, declarator.id.name)) {
+						state.hoisted.push(b.declaration('const', declarator.id, init));
+						continue;
+					}
+				}
+
 				if (init != null && is_hoistable_function(init)) {
 					const hoistable_function = visit(init);
 					state.hoisted.push(

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

@@ -2,7 +2,12 @@ import { get_rune } from '../../../scope.js';
 import { is_hoistable_function, transform_inspect_rune } from '../../utils.js';
 import * as b from '../../../../utils/builders.js';
 import * as assert from '../../../../utils/assert.js';
-import { get_prop_source, is_state_source, should_proxy_or_freeze } from '../utils.js';
+import {
+	can_hoist_declaration,
+	get_prop_source,
+	is_state_source,
+	should_proxy_or_freeze
+} from '../utils.js';
 import { extract_paths, unwrap_ts_expression } from '../../../../utils/ast.js';
 
 /** @type {import('../types.js').ComponentVisitors} */
@@ -156,6 +161,15 @@ export const javascript_visitors_runes = {
 
 		for (const declarator of node.declarations) {
 			const init = unwrap_ts_expression(declarator.init);
+
+			if (init != null && declarator.id.type === 'Identifier') {
+				const binding = state.scope.owner(declarator.id.name)?.declarations.get(declarator.id.name);
+				if (can_hoist_declaration(binding, declarator.id.name)) {
+					state.hoisted.push(b.declaration('const', declarator.id, init));
+					continue;
+				}
+			}
+
 			const rune = get_rune(init, state.scope);
 			if (!rune || rune === '$effect.active' || rune === '$effect.root' || rune === '$inspect') {
 				if (init != null && is_hoistable_function(init)) {