From 7c97a85e73df1e4dddf892fd7fba1a8145209260 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Wed, 20 Nov 2024 15:10:53 +0000
Subject: [PATCH 01/13] chore: remove template expression inlining

---
 .changeset/calm-mice-perform.md               |   5 +
 .../phases/2-analyze/visitors/Attribute.js    |  25 +---
 .../2-analyze/visitors/CallExpression.js      |   2 -
 .../2-analyze/visitors/ExpressionTag.js       |   5 +
 .../phases/2-analyze/visitors/Identifier.js   |  17 +--
 .../2-analyze/visitors/MemberExpression.js    |   3 -
 .../visitors/TaggedTemplateExpression.js      |   1 -
 .../phases/3-transform/client/utils.js        |  52 +++++++-
 .../3-transform/client/visitors/Fragment.js   |  38 ++----
 .../client/visitors/RegularElement.js         |  95 +++++---------
 .../client/visitors/TitleElement.js           |   4 +-
 .../client/visitors/shared/element.js         |   4 +-
 .../client/visitors/shared/fragment.js        |  74 +++--------
 .../client/visitors/shared/utils.js           | 124 +++++++++---------
 packages/svelte/src/compiler/phases/nodes.js  |   3 +-
 packages/svelte/src/compiler/types/index.d.ts |   2 -
 packages/svelte/src/internal/client/index.js  |   2 -
 packages/svelte/src/internal/server/index.js  |  30 ++++-
 .../svelte/src/internal/shared/attributes.js  |  28 ----
 .../samples/slot-non-identifier/output.svelte |   2 +-
 .../main.svelte                               |   2 +-
 .../_expected/client/index.svelte.js          |  11 +-
 .../_expected/server/index.svelte.js          |   4 +-
 .../samples/inline-module-vars/index.svelte   |   7 +-
 .../_expected/client/index.svelte.js          |   5 +-
 25 files changed, 227 insertions(+), 318 deletions(-)
 create mode 100644 .changeset/calm-mice-perform.md
 delete mode 100644 packages/svelte/src/internal/shared/attributes.js

diff --git a/.changeset/calm-mice-perform.md b/.changeset/calm-mice-perform.md
new file mode 100644
index 000000000000..91927c197d13
--- /dev/null
+++ b/.changeset/calm-mice-perform.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: remove template expression inlining
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
index ca0ea55d1fb0..2a281a1aa3d9 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -1,7 +1,7 @@
 /** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression } from 'estree' */
 /** @import { AST, DelegatedEvent, SvelteNode } from '#compiler' */
 /** @import { Context } from '../types' */
-import { is_boolean_attribute, is_capture_event, is_delegated } from '../../../../utils.js';
+import { is_capture_event, is_delegated } from '../../../../utils.js';
 import {
 	get_attribute_chunks,
 	get_attribute_expression,
@@ -16,28 +16,14 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
 export function Attribute(node, context) {
 	context.next();
 
-	const parent = /** @type {SvelteNode} */ (context.path.at(-1));
-
-	if (parent.type === 'RegularElement') {
-		// special case <option value="" />
-		if (node.name === 'value' && parent.name === 'option') {
-			mark_subtree_dynamic(context.path);
-		}
-
-		// special case <img loading="lazy" />
-		if (node.name === 'loading' && parent.name === 'img') {
+	// special case
+	if (node.name === 'value') {
+		const parent = /** @type {SvelteNode} */ (context.path.at(-1));
+		if (parent.type === 'RegularElement' && parent.name === 'option') {
 			mark_subtree_dynamic(context.path);
 		}
 	}
 
-	if (node.name.startsWith('on')) {
-		mark_subtree_dynamic(context.path);
-	}
-
-	if (parent.type === 'RegularElement' && is_boolean_attribute(node.name.toLowerCase())) {
-		node.metadata.expression.can_inline = false;
-	}
-
 	if (node.value !== true) {
 		for (const chunk of get_attribute_chunks(node.value)) {
 			if (chunk.type !== 'ExpressionTag') continue;
@@ -51,7 +37,6 @@ export function Attribute(node, context) {
 
 			node.metadata.expression.has_state ||= chunk.metadata.expression.has_state;
 			node.metadata.expression.has_call ||= chunk.metadata.expression.has_call;
-			node.metadata.expression.can_inline &&= chunk.metadata.expression.can_inline;
 		}
 
 		if (is_event_attribute(node)) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
index fe3f638a69f9..c7ade4856bcb 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -179,8 +179,6 @@ export function CallExpression(node, context) {
 		if (!is_pure(node.callee, context) || context.state.expression.dependencies.size > 0) {
 			context.state.expression.has_call = true;
 			context.state.expression.has_state = true;
-			context.state.expression.can_inline = false;
-			mark_subtree_dynamic(context.path);
 		}
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
index f59b7fc5692b..32c8d2ca3671 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 import { is_tag_valid_with_parent } from '../../../../html-tree-validation.js';
 import * as e from '../../../errors.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {AST.ExpressionTag} node
@@ -14,5 +15,9 @@ export function ExpressionTag(node, context) {
 		}
 	}
 
+	// TODO ideally we wouldn't do this here, we'd just do it on encountering
+	// an `Identifier` within the tag. But we currently need to handle `{42}` etc
+	mark_subtree_dynamic(context.path);
+
 	context.next({ ...context.state, expression: node.metadata.expression });
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
index 042c467df1ed..79dccd5a7cf5 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -1,4 +1,5 @@
 /** @import { Expression, Identifier } from 'estree' */
+/** @import { EachBlock } from '#compiler' */
 /** @import { Context } from '../types' */
 import is_reference from 'is-reference';
 import { should_proxy } from '../../3-transform/client/utils.js';
@@ -19,6 +20,8 @@ export function Identifier(node, context) {
 		return;
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	// If we are using arguments outside of a function, then throw an error
 	if (
 		node.name === 'arguments' &&
@@ -84,12 +87,6 @@ export function Identifier(node, context) {
 		}
 	}
 
-	// no binding means global, and we can't inline e.g. `<span>{location}</span>`
-	// because it could change between component renders. if there _is_ a
-	// binding and it is outside module scope, the expression cannot
-	// be inlined (TODO allow inlining in more cases - e.g. primitive consts)
-	let can_inline = !!binding && !binding.scope.parent && binding.kind === 'normal';
-
 	if (binding) {
 		if (context.state.expression) {
 			context.state.expression.dependencies.add(binding);
@@ -125,12 +122,4 @@ export function Identifier(node, context) {
 			w.reactive_declaration_module_script_dependency(node);
 		}
 	}
-
-	if (!can_inline) {
-		if (context.state.expression) {
-			context.state.expression.can_inline = false;
-		}
-
-		mark_subtree_dynamic(context.path);
-	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
index 88adecbd359a..1cc20c96dac8 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
@@ -20,9 +20,6 @@ export function MemberExpression(node, context) {
 
 	if (context.state.expression && !is_pure(node, context)) {
 		context.state.expression.has_state = true;
-		context.state.expression.can_inline = false;
-
-		mark_subtree_dynamic(context.path);
 	}
 
 	if (!is_safe_identifier(node, context.state.scope)) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
index 724b9af31185..eacb8a342ac2 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
@@ -10,7 +10,6 @@ export function TaggedTemplateExpression(node, context) {
 	if (context.state.expression && !is_pure(node.tag, context)) {
 		context.state.expression.has_call = true;
 		context.state.expression.has_state = true;
-		context.state.expression.can_inline = false;
 	}
 
 	if (node.tag.type === 'Identifier') {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
index 910f173f79ae..c46090597709 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -1,18 +1,18 @@
 /** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression, Identifier, Pattern, PrivateIdentifier, Statement } from 'estree' */
-/** @import { Binding, SvelteNode } from '#compiler' */
+/** @import { AST, Binding, SvelteNode } from '#compiler' */
 /** @import { ClientTransformState, ComponentClientTransformState, ComponentContext } from './types.js' */
 /** @import { Analysis } from '../../types.js' */
 /** @import { Scope } from '../../scope.js' */
+import * as b from '../../../utils/builders.js';
+import { extract_identifiers, is_simple_expression } from '../../../utils/ast.js';
 import {
-	PROPS_IS_BINDABLE,
-	PROPS_IS_IMMUTABLE,
 	PROPS_IS_LAZY_INITIAL,
+	PROPS_IS_IMMUTABLE,
 	PROPS_IS_RUNES,
-	PROPS_IS_UPDATED
+	PROPS_IS_UPDATED,
+	PROPS_IS_BINDABLE
 } from '../../../../constants.js';
 import { dev } from '../../../state.js';
-import { extract_identifiers, is_simple_expression } from '../../../utils/ast.js';
-import * as b from '../../../utils/builders.js';
 import { get_value } from './visitors/shared/declarations.js';
 
 /**
@@ -311,3 +311,43 @@ 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);
 }
+
+/**
+ * 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 &&
+		// in a `<script module>` block
+		!binding.scope.parent &&
+		// to prevent the need for escaping
+		binding.initial?.type === 'Literal'
+	);
+}
+
+/**
+ * @param {(AST.Text | AST.ExpressionTag) | (AST.Text | AST.ExpressionTag)[]} node_or_nodes
+ * @param {import('./types.js').ComponentClientTransformState} state
+ */
+export function is_inlinable_expression(node_or_nodes, state) {
+	let nodes = Array.isArray(node_or_nodes) ? node_or_nodes : [node_or_nodes];
+	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);
+				if (!can_inline_variable(binding)) {
+					return false;
+				}
+			} else {
+				return false;
+			}
+			has_expression_tag = true;
+		}
+	}
+	return has_expression_tag;
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
index 111516ce0ae0..08e06cc714d4 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
@@ -1,4 +1,4 @@
-/** @import { Expression, Identifier, Statement, TemplateElement } from 'estree' */
+/** @import { Expression, Identifier, Statement } from 'estree' */
 /** @import { AST, Namespace } from '#compiler' */
 /** @import { SourceLocation } from '#shared' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
@@ -141,14 +141,14 @@ export function Fragment(node, context) {
 		const id = b.id(context.state.scope.generate('fragment'));
 
 		const use_space_template =
-			trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
-			trimmed.some((node) => node.type === 'ExpressionTag' && !node.metadata.expression.can_inline);
+			trimmed.some((node) => node.type === 'ExpressionTag') &&
+			trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag');
 
 		if (use_space_template) {
 			// 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, null, {
+			process_children(trimmed, () => id, false, {
 				...context,
 				state
 			});
@@ -158,12 +158,12 @@ export function Fragment(node, context) {
 		} 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'), null, { ...context, state });
+				process_children(trimmed, () => b.id('$$anchor'), false, { ...context, state });
 			} else {
 				/** @type {(is_text: boolean) => Expression} */
 				const expression = (is_text) => b.call('$.first_child', id, is_text && b.true);
 
-				process_children(trimmed, expression, null, { ...context, state });
+				process_children(trimmed, expression, false, { ...context, state });
 
 				let flags = TEMPLATE_FRAGMENT;
 
@@ -212,34 +212,12 @@ function join_template(items) {
 	let quasi = b.quasi('');
 	const template = b.template([quasi], []);
 
-	/**
-	 * @param {Expression} expression
-	 */
-	function push(expression) {
-		if (expression.type === 'TemplateLiteral') {
-			for (let i = 0; i < expression.expressions.length; i += 1) {
-				const q = expression.quasis[i];
-				const e = expression.expressions[i];
-
-				quasi.value.cooked += /** @type {string} */ (q.value.cooked);
-				push(e);
-			}
-
-			const last = /** @type {TemplateElement} */ (expression.quasis.at(-1));
-			quasi.value.cooked += /** @type {string} */ (last.value.cooked);
-		} else if (expression.type === 'Literal') {
-			/** @type {string} */ (quasi.value.cooked) += expression.value;
-		} else {
-			template.expressions.push(expression);
-			template.quasis.push((quasi = b.quasi('')));
-		}
-	}
-
 	for (const item of items) {
 		if (typeof item === 'string') {
 			quasi.value.cooked += item;
 		} else {
-			push(item);
+			template.expressions.push(item);
+			template.quasis.push((quasi = b.quasi('')));
 		}
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 19948464d2f0..aa9f9d162fbe 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -1,9 +1,8 @@
-/** @import { Expression, ExpressionStatement, Identifier, Literal, MemberExpression, ObjectExpression, Statement } from 'estree' */
+/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, ObjectExpression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { SourceLocation } from '#shared' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 /** @import { Scope } from '../../../scope' */
-import { escape_html } from '../../../../../escaping.js';
 import {
 	cannot_be_set_statically,
 	is_boolean_attribute,
@@ -11,27 +10,29 @@ import {
 	is_load_error_element,
 	is_void
 } from '../../../../../utils.js';
+import { escape_html } from '../../../../../escaping.js';
 import { dev, is_ignored, locator } from '../../../../state.js';
 import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js';
 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, create_derived } from '../utils.js';
+import { build_getter, create_derived, is_inlinable_expression } from '../utils.js';
 import {
+	get_attribute_name,
 	build_attribute_value,
 	build_class_directives,
-	build_set_attributes,
 	build_style_directives,
-	get_attribute_name
+	build_set_attributes
 } from './shared/element.js';
-import { visit_event_attribute } from './shared/events.js';
 import { process_children } from './shared/fragment.js';
 import {
 	build_render_statement,
-	build_template_chunk,
+	build_template_literal,
 	build_update,
-	build_update_assignment
+	build_update_assignment,
+	get_states_and_calls
 } from './shared/utils.js';
+import { visit_event_attribute } from './shared/events.js';
 
 /**
  * @param {AST.RegularElement} node
@@ -352,32 +353,28 @@ export function RegularElement(node, context) {
 
 	// special case — if an element that only contains text, we don't need
 	// to descend into it if the text is non-reactive
-	const is_text = trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag');
-
-	// in the rare case that we have static text that can't be inlined
-	// (e.g. `<span>{location}</span>`), set `textContent` programmatically
-	const use_text_content =
-		is_text &&
-		trimmed.every((node) => node.type === 'Text' || !node.metadata.expression.has_state) &&
-		trimmed.some((node) => node.type === 'ExpressionTag' && !node.metadata.expression.can_inline);
-
-	if (use_text_content) {
-		let { value } = build_template_chunk(trimmed, context.visit, child_state);
+	const states_and_calls =
+		trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
+		trimmed.some((node) => node.type === 'ExpressionTag') &&
+		get_states_and_calls(trimmed);
 
+	if (states_and_calls && states_and_calls.states === 0) {
 		child_state.init.push(
-			b.stmt(b.assignment('=', b.member(context.state.node, 'textContent'), value))
+			b.stmt(
+				b.assignment(
+					'=',
+					b.member(context.state.node, 'textContent'),
+					build_template_literal(trimmed, context.visit, child_state).value
+				)
+			)
 		);
 	} else {
 		/** @type {Expression} */
 		let arg = context.state.node;
 
 		// If `hydrate_node` is set inside the element, we need to reset it
-		// after the element has been hydrated (we don't need to reset if it's been inlined)
-		let needs_reset = !trimmed.every(
-			(node) =>
-				node.type === 'Text' ||
-				(node.type === 'ExpressionTag' && node.metadata.expression.can_inline)
-		);
+		// after the element has been hydrated
+		let needs_reset = trimmed.some((node) => node.type !== 'Text');
 
 		// The same applies if it's a `<template>` element, since we need to
 		// set the value of `hydrate_node` to `node.content`
@@ -387,7 +384,7 @@ export function RegularElement(node, context) {
 			arg = b.member(arg, 'content');
 		}
 
-		process_children(trimmed, (is_text) => b.call('$.child', arg, is_text && b.true), node, {
+		process_children(trimmed, (is_text) => b.call('$.child', arg, is_text && b.true), true, {
 			...context,
 			state: child_state
 		});
@@ -580,6 +577,10 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		);
 	}
 
+	const inlinable_expression =
+		attribute.value === true
+			? false // not an expression
+			: is_inlinable_expression(attribute.value, context.state);
 	if (attribute.metadata.expression.has_state) {
 		if (has_call) {
 			state.init.push(build_update(update));
@@ -587,44 +588,14 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 			state.update.push(update);
 		}
 		return true;
-	}
-
-	// we need to special case textarea value because it's not an actual attribute
-	const can_inline =
-		(attribute.name !== 'value' || element.name !== 'textarea') &&
-		attribute.metadata.expression.can_inline;
-
-	if (can_inline) {
-		/** @type {Literal | undefined} */
-		let literal = undefined;
-
-		if (value.type === 'Literal') {
-			literal = value;
-		} else if (value.type === 'Identifier') {
-			const binding = context.state.scope.get(value.name);
-			if (binding && binding.initial?.type === 'Literal' && !binding.reassigned) {
-				literal = binding.initial;
-			}
-		}
-
-		if (literal && escape_html(literal.value, true) === String(literal.value)) {
-			if (is_boolean_attribute(name)) {
-				if (literal.value) {
-					context.state.template.push(` ${name}`);
-				}
-			} else {
-				context.state.template.push(` ${name}="`, value, '"');
-			}
+	} else {
+		if (inlinable_expression) {
+			context.state.template.push(` ${name}="`, value, '"');
 		} else {
-			context.state.template.push(
-				b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
-			);
+			state.init.push(update);
 		}
-	} else {
-		state.init.push(update);
+		return false;
 	}
-
-	return false;
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
index 72cc57b068a0..a71deaf53953 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
@@ -1,14 +1,14 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
-import { build_template_chunk } from './shared/utils.js';
+import { build_template_literal } from './shared/utils.js';
 
 /**
  * @param {AST.TitleElement} node
  * @param {ComponentContext} context
  */
 export function TitleElement(node, context) {
-	const { has_state, value } = build_template_chunk(
+	const { has_state, value } = build_template_literal(
 		/** @type {any} */ (node.fragment.nodes),
 		context.visit,
 		context.state
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
index 1b0737e31e18..e0fbe11b733b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
@@ -6,7 +6,7 @@ import { is_ignored } from '../../../../../state.js';
 import { get_attribute_expression, is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { build_getter, create_derived } from '../../utils.js';
-import { build_template_chunk, build_update } from './utils.js';
+import { build_template_literal, build_update } from './utils.js';
 
 /**
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
@@ -200,7 +200,7 @@ export function build_attribute_value(value, context) {
 		};
 	}
 
-	return build_template_chunk(value, context.visit, context.state);
+	return build_template_literal(value, context.visit, context.state);
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index 102988781aca..dbaa11ff4459 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -1,12 +1,11 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
-/** @import { Scope } from '../../../../scope.js' */
 /** @import { ComponentContext } from '../../types' */
-import { escape_html } from '../../../../../../escaping.js';
 import { cannot_be_set_statically } from '../../../../../../utils.js';
-import { is_event_attribute } from '../../../../../utils/ast.js';
+import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { build_template_chunk, build_update } from './utils.js';
+import { is_inlinable_expression } from '../../utils.js';
+import { build_template_literal, build_update } from './utils.js';
 
 /**
  * Processes an array of template nodes, joining sibling text/expression nodes
@@ -14,10 +13,10 @@ import { build_template_chunk, build_update } from './utils.js';
  * corresponding template node references these updates are applied to.
  * @param {SvelteNode[]} nodes
  * @param {(is_text: boolean) => Expression} initial
- * @param {AST.RegularElement | null} element
+ * @param {boolean} is_element
  * @param {ComponentContext} context
  */
-export function process_children(nodes, initial, element, { visit, state }) {
+export function process_children(nodes, initial, is_element, { visit, state }) {
 	const within_bound_contenteditable = state.metadata.bound_contenteditable;
 	let prev = initial;
 	let skipped = 0;
@@ -63,17 +62,16 @@ export function process_children(nodes, initial, element, { visit, state }) {
 	 * @param {Sequence} sequence
 	 */
 	function flush_sequence(sequence) {
-		const { has_state, has_call, value, can_inline } = build_template_chunk(sequence, visit, state);
-
-		if (can_inline) {
+		if (sequence.every((node) => node.type === 'Text')) {
 			skipped += 1;
-			const raw = element?.name === 'script' || element?.name === 'style';
-			state.template.push(raw ? value : escape_inline_expression(value, state.scope));
+			state.template.push(sequence.map((node) => node.raw).join(''));
 			return;
 		}
 
 		state.template.push(' ');
 
+		const { has_state, has_call, value } = build_template_literal(sequence, visit, state);
+
 		// if this is a standalone `{expression}`, make sure we handle the case where
 		// no text node was created because the expression was empty during SSR
 		const is_text = sequence.length === 1;
@@ -101,9 +99,9 @@ export function process_children(nodes, initial, element, { visit, state }) {
 
 			let child_state = state;
 
-			if (is_static_element(node)) {
+			if (is_static_element(node, state)) {
 				skipped += 1;
-			} else if (node.type === 'EachBlock' && nodes.length === 1 && element) {
+			} else if (node.type === 'EachBlock' && nodes.length === 1 && is_element) {
 				node.metadata.is_controlled = true;
 			} else {
 				const id = flush_node(false, node.type === 'RegularElement' ? node.name : 'node');
@@ -128,8 +126,9 @@ export function process_children(nodes, initial, element, { visit, state }) {
 
 /**
  * @param {SvelteNode} node
+ * @param {ComponentContext["state"]} state
  */
-function is_static_element(node) {
+function is_static_element(node, state) {
 	if (node.type !== 'RegularElement') return false;
 	if (node.fragment.metadata.dynamic) return false;
 	if (node.name.includes('-')) return false; // we're setting all attributes on custom elements through properties
@@ -156,49 +155,16 @@ function is_static_element(node) {
 			return false;
 		}
 
-		if (!attribute.metadata.expression.can_inline) {
+		if (
+			attribute.value !== true &&
+			!is_text_attribute(attribute) &&
+			// If the attribute is not a text attribute but is inlinable we will directly inline it in the
+			// the template so before returning false we need to check that the attribute is not inlinable
+			!is_inlinable_expression(attribute.value, state)
+		) {
 			return false;
 		}
 	}
 
 	return true;
 }
-
-/**
- * @param {Expression} node
- * @param {Scope} scope
- * @returns {Expression}
- */
-function escape_inline_expression(node, scope) {
-	if (node.type === 'Literal') {
-		if (typeof node.value === 'string') {
-			return b.literal(escape_html(node.value));
-		}
-
-		return node;
-	}
-
-	if (node.type === 'TemplateLiteral') {
-		return b.template(
-			node.quasis.map((q) => b.quasi(escape_html(q.value.cooked))),
-			node.expressions.map((expression) => escape_inline_expression(expression, scope))
-		);
-	}
-
-	/**
-	 * If we can't determine the range of possible values statically, wrap in
-	 * `$.escape(...)`. TODO expand this to cover more cases
-	 */
-	let needs_escape = true;
-
-	if (node.type === 'Identifier') {
-		const binding = scope.get(node.name);
-
-		// TODO handle more cases
-		if (binding?.initial?.type === 'Literal' && !binding.reassigned) {
-			needs_escape = escape_html(binding.initial.value) !== String(binding.initial.value);
-		}
-	}
-
-	return needs_escape ? b.call('$.escape', node) : node;
-}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index b74d2cc9c08e..21b902d5c281 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -1,4 +1,4 @@
-/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, Statement, Super, TemplateLiteral, Node } from 'estree' */
+/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, Statement, Super } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
 /** @import { ComponentClientTransformState } from '../../types' */
 import { walk } from 'zimmerframe';
@@ -10,89 +10,85 @@ import { create_derived } from '../../utils.js';
 import is_reference from 'is-reference';
 import { locator } from '../../../../../state.js';
 
+/**
+ * @param {Array<AST.Text | AST.ExpressionTag>} values
+ */
+export function get_states_and_calls(values) {
+	let states = 0;
+	let calls = 0;
+	for (let i = 0; i < values.length; i++) {
+		const node = values[i];
+
+		if (node.type === 'ExpressionTag') {
+			if (node.metadata.expression.has_call) {
+				calls++;
+			}
+			if (node.metadata.expression.has_state) {
+				states++;
+			}
+		}
+	}
+
+	return { states, calls };
+}
+
 /**
  * @param {Array<AST.Text | AST.ExpressionTag>} values
  * @param {(node: SvelteNode, state: any) => any} visit
  * @param {ComponentClientTransformState} state
- * @returns {{ value: Expression, has_state: boolean, has_call: boolean, can_inline: boolean }}
+ * @returns {{ value: Expression, has_state: boolean, has_call: boolean }}
  */
-export function build_template_chunk(values, visit, state) {
+export function build_template_literal(values, visit, state) {
 	/** @type {Expression[]} */
 	const expressions = [];
 
 	let quasi = b.quasi('');
 	const quasis = [quasi];
 
-	let has_call = false;
-	let has_state = false;
-	let can_inline = true;
-	let contains_multiple_call_expression = false;
+	const { states, calls } = get_states_and_calls(values);
 
-	for (const node of values) {
-		if (node.type === 'ExpressionTag') {
-			if (node.metadata.expression.has_call) {
-				if (has_call) contains_multiple_call_expression = true;
-				has_call = true;
-			}
-
-			if (node.metadata.expression.has_state) {
-				has_state = true;
-			}
-
-			if (!node.metadata.expression.can_inline) {
-				can_inline = false;
-			}
-		}
-	}
+	let has_call = calls > 0;
+	let has_state = states > 0;
+	let contains_multiple_call_expression = calls > 1;
 
 	for (let i = 0; i < values.length; i++) {
 		const node = values[i];
 
 		if (node.type === 'Text') {
 			quasi.value.cooked += node.data;
+		} else if (node.type === 'ExpressionTag' && node.expression.type === 'Literal') {
+			if (node.expression.value != null) {
+				quasi.value.cooked += node.expression.value + '';
+			}
 		} else {
-			const expression = /** @type {Expression} */ (visit(node.expression, state));
-
-			if (expression.type === 'Literal') {
-				if (expression.value != null) {
-					quasi.value.cooked += expression.value + '';
-				}
+			if (contains_multiple_call_expression) {
+				const id = b.id(state.scope.generate('stringified_text'));
+				state.init.push(
+					b.const(
+						id,
+						create_derived(
+							state,
+							b.thunk(
+								b.logical(
+									'??',
+									/** @type {Expression} */ (visit(node.expression, state)),
+									b.literal('')
+								)
+							)
+						)
+					)
+				);
+				expressions.push(b.call('$.get', id));
+			} else if (values.length === 1) {
+				// If we have a single expression, then pass that in directly to possibly avoid doing
+				// extra work in the template_effect (instead we do the work in set_text).
+				return { value: visit(node.expression, state), has_state, has_call };
 			} else {
-				let value = expression;
-
-				// if we don't know the value, we need to add `?? ''` to replace
-				// `null` and `undefined` with the empty string
-				let needs_fallback = true;
-
-				if (value.type === 'Identifier') {
-					const binding = state.scope.get(value.name);
-
-					if (binding && binding.initial?.type === 'Literal' && !binding.reassigned) {
-						needs_fallback = binding.initial.value === null;
-					}
-				}
-
-				if (needs_fallback) {
-					value = b.logical('??', expression, b.literal(''));
-				}
-
-				if (contains_multiple_call_expression) {
-					const id = b.id(state.scope.generate('stringified_text'));
-
-					state.init.push(b.const(id, create_derived(state, b.thunk(value))));
-
-					expressions.push(b.call('$.get', id));
-				} else if (values.length === 1) {
-					// If we have a single expression, then pass that in directly to possibly avoid doing
-					// extra work in the template_effect (instead we do the work in set_text).
-					return { value: visit(node.expression, state), has_state, has_call, can_inline };
-				} else {
-					expressions.push(value);
-				}
-
-				quasi = b.quasi('', i + 1 === values.length);
-				quasis.push(quasi);
+				expressions.push(b.logical('??', visit(node.expression, state), b.literal('')));
 			}
+
+			quasi = b.quasi('', i + 1 === values.length);
+			quasis.push(quasi);
 		}
 	}
 
@@ -102,7 +98,7 @@ export function build_template_chunk(values, visit, state) {
 
 	const value = b.template(quasis, expressions);
 
-	return { value, has_state, has_call, can_inline };
+	return { value, has_state, has_call };
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/nodes.js b/packages/svelte/src/compiler/phases/nodes.js
index 13a54730eb0c..ead525aaa149 100644
--- a/packages/svelte/src/compiler/phases/nodes.js
+++ b/packages/svelte/src/compiler/phases/nodes.js
@@ -58,7 +58,6 @@ export function create_expression_metadata() {
 	return {
 		dependencies: new Set(),
 		has_state: false,
-		has_call: false,
-		can_inline: true
+		has_call: false
 	};
 }
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index bd4749db001c..8a45f2d4fd84 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -317,8 +317,6 @@ export interface ExpressionMetadata {
 	has_state: boolean;
 	/** True if the expression involves a call expression (often, it will need to be wrapped in a derived) */
 	has_call: boolean;
-	/** True if the expression can be inlined into a template */
-	can_inline: boolean;
 }
 
 export * from './template.js';
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index bfc0a6aac93d..c401867a0f0b 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -1,5 +1,4 @@
 export { FILENAME, HMR, NAMESPACE_SVG } from '../../constants.js';
-export { escape_html as escape } from '../../escaping.js';
 export { cleanup_styles } from './dev/css.js';
 export { add_locations } from './dev/elements.js';
 export { hmr } from './dev/hmr.js';
@@ -156,7 +155,6 @@ export {
 	$window as window,
 	$document as document
 } from './dom/operations.js';
-export { attr } from '../shared/attributes.js';
 export { snapshot } from '../shared/clone.js';
 export { noop, fallback } from '../shared/utils.js';
 export {
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 615a49fbd4c0..9a66095de482 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -2,7 +2,6 @@
 /** @import { Component, Payload, RenderOutput } from '#server' */
 /** @import { Store } from '#shared' */
 export { FILENAME, HMR } from '../../constants.js';
-import { attr } from '../shared/attributes.js';
 import { is_promise, noop } from '../shared/utils.js';
 import { subscribe_to_store } from '../../store/utils.js';
 import {
@@ -154,6 +153,33 @@ export function head(payload, fn) {
 	head_payload.out += BLOCK_CLOSE;
 }
 
+/**
+ * `<div translate={false}>` should be rendered as `<div translate="no">` and _not_
+ * `<div translate="false">`, which is equivalent to `<div translate="yes">`. There
+ * may be other odd cases that need to be added to this list in future
+ * @type {Record<string, Map<any, string>>}
+ */
+const replacements = {
+	translate: new Map([
+		[true, 'yes'],
+		[false, 'no']
+	])
+};
+
+/**
+ * @template V
+ * @param {string} name
+ * @param {V} value
+ * @param {boolean} [is_boolean]
+ * @returns {string}
+ */
+export function attr(name, value, is_boolean = false) {
+	if (value == null || (!value && is_boolean) || (value === '' && name === 'class')) return '';
+	const normalized = (name in replacements && replacements[name].get(value)) || value;
+	const assignment = is_boolean ? '' : `="${escape_html(normalized, true)}"`;
+	return ` ${name}${assignment}`;
+}
+
 /**
  * @param {Payload} payload
  * @param {boolean} is_html
@@ -523,8 +549,6 @@ export function once(get_value) {
 	};
 }
 
-export { attr };
-
 export { html } from './blocks/html.js';
 
 export { push, pop } from './context.js';
diff --git a/packages/svelte/src/internal/shared/attributes.js b/packages/svelte/src/internal/shared/attributes.js
deleted file mode 100644
index 867d6ba5d378..000000000000
--- a/packages/svelte/src/internal/shared/attributes.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import { escape_html } from '../../escaping.js';
-
-/**
- * `<div translate={false}>` should be rendered as `<div translate="no">` and _not_
- * `<div translate="false">`, which is equivalent to `<div translate="yes">`. There
- * may be other odd cases that need to be added to this list in future
- * @type {Record<string, Map<any, string>>}
- */
-const replacements = {
-	translate: new Map([
-		[true, 'yes'],
-		[false, 'no']
-	])
-};
-
-/**
- * @template V
- * @param {string} name
- * @param {V} value
- * @param {boolean} [is_boolean]
- * @returns {string}
- */
-export function attr(name, value, is_boolean = false) {
-	if (value == null || (!value && is_boolean) || (value === '' && name === 'class')) return '';
-	const normalized = (name in replacements && replacements[name].get(value)) || value;
-	const assignment = is_boolean ? '' : `="${escape_html(normalized, true)}"`;
-	return ` ${name}${assignment}`;
-}
diff --git a/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte b/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte
index fb262e8c2532..b9a324801244 100644
--- a/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte
+++ b/packages/svelte/tests/migrate/samples/slot-non-identifier/output.svelte
@@ -82,4 +82,4 @@
 	<svelte:fragment let:should_stay slot="cool stuff">
 		cool
 	</svelte:fragment>
-</Comp>
+</Comp>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-case-insensitive/main.svelte b/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-case-insensitive/main.svelte
index bcc418511fa7..90208940868a 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-case-insensitive/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-case-insensitive/main.svelte
@@ -1 +1 @@
-<input READONLY={!0} REQUIRED={!1}>
+<input READONLY={true} REQUIRED={false}>
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
index 462262442437..46ed3c1913f3 100644
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
@@ -5,13 +5,12 @@ const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7
 const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
 const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
 const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
-const a = 1;
-const b = 2;
-var root = $.template(`<picture><source srcset="${__DECLARED_ASSET_0__}" type="image/avif"> <source srcset="${__DECLARED_ASSET_1__}" type="image/webp"> <source srcset="${__DECLARED_ASSET_2__}" type="image/png"> <img src="${__DECLARED_ASSET_3__}" alt="production test" width="1440" height="1440"></picture> <p>${a} + ${b} = ${$.escape(a + b ?? "")}</p>`, 1);
+var root = $.template(`<picture><source srcset="${__DECLARED_ASSET_0__}" type="image/avif"> <source srcset="${__DECLARED_ASSET_1__}" type="image/webp"> <source srcset="${__DECLARED_ASSET_2__}" type="image/png"> <img src="${__DECLARED_ASSET_3__}" alt="production test" width="1440" height="1440"></picture>`);
 
 export default function Inline_module_vars($$anchor) {
-	var fragment = root();
+	var picture = root();
 
-	$.next(2);
-	$.append($$anchor, fragment);
+	$.next(6);
+	$.reset(picture);
+	$.append($$anchor, picture);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js
index ca98cd952b72..9dad39d81e9e 100644
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js
@@ -4,9 +4,7 @@ const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7
 const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
 const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
 const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
-const a = 1;
-const b = 2;
 
 export default function Inline_module_vars($$payload) {
-	$$payload.out += `<picture><source${$.attr("srcset", __DECLARED_ASSET_0__)} type="image/avif"> <source${$.attr("srcset", __DECLARED_ASSET_1__)} type="image/webp"> <source${$.attr("srcset", __DECLARED_ASSET_2__)} type="image/png"> <img${$.attr("src", __DECLARED_ASSET_3__)} alt="production test"${$.attr("width", 1440)}${$.attr("height", 1440)}></picture> <p>${$.escape(a)} + ${$.escape(b)} = ${$.escape(a + b)}</p>`;
+	$$payload.out += `<picture><source${$.attr("srcset", __DECLARED_ASSET_0__)} type="image/avif"> <source${$.attr("srcset", __DECLARED_ASSET_1__)} type="image/webp"> <source${$.attr("srcset", __DECLARED_ASSET_2__)} type="image/png"> <img${$.attr("src", __DECLARED_ASSET_3__)} alt="production test" width="1440" height="1440"></picture>`;
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte b/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte
index a7b737e59612..b46a86dc0b64 100644
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte
+++ b/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte
@@ -5,16 +5,11 @@
 	const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
 	const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
 	const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
-
-	const a = 1;
-	const b = 2;
 </script>
 
 <picture>
 	<source srcset={__DECLARED_ASSET_0__} type="image/avif" />
 	<source srcset={__DECLARED_ASSET_1__} type="image/webp" />
 	<source srcset={__DECLARED_ASSET_2__} type="image/png" />
-	<img src={__DECLARED_ASSET_3__} alt="production test" width={1440} height={1440} />
+	<img src={__DECLARED_ASSET_3__} alt="production test" width=1440 height=1440 />
 </picture>
-
-<p>{a} + {b} = {a + b}</p>
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
index 8dd7df82cf57..82b3bc54d7ed 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
@@ -42,12 +42,9 @@ export default function Skip_static_subtree($$anchor, $$props) {
 	$.reset(select);
 
 	var img = $.sibling(select, 2);
-	var div_2 = $.sibling(img, 2);
-	var img_1 = $.child(div_2);
 
-	$.reset(div_2);
+	$.next(2);
 	$.template_effect(() => $.set_text(text, $$props.title));
 	$.handle_lazy_img(img);
-	$.handle_lazy_img(img_1);
 	$.append($$anchor, fragment);
 }
\ No newline at end of file

From a27cdee2bcd1c152f711a0318456ab17f6d211ea Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Wed, 20 Nov 2024 15:26:01 +0000
Subject: [PATCH 02/13] missed some

---
 .../phases/3-transform/client/utils.js        | 40 -------------------
 .../client/visitors/RegularElement.js         | 12 +-----
 .../client/visitors/shared/fragment.js        |  9 +----
 .../_expected/client/index.svelte.js          | 17 +++++++-
 4 files changed, 18 insertions(+), 60 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
index c46090597709..7d6243bb4fd3 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -311,43 +311,3 @@ 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);
 }
-
-/**
- * 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 &&
-		// in a `<script module>` block
-		!binding.scope.parent &&
-		// to prevent the need for escaping
-		binding.initial?.type === 'Literal'
-	);
-}
-
-/**
- * @param {(AST.Text | AST.ExpressionTag) | (AST.Text | AST.ExpressionTag)[]} node_or_nodes
- * @param {import('./types.js').ComponentClientTransformState} state
- */
-export function is_inlinable_expression(node_or_nodes, state) {
-	let nodes = Array.isArray(node_or_nodes) ? node_or_nodes : [node_or_nodes];
-	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);
-				if (!can_inline_variable(binding)) {
-					return false;
-				}
-			} else {
-				return false;
-			}
-			has_expression_tag = true;
-		}
-	}
-	return has_expression_tag;
-}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index aa9f9d162fbe..91b40d7305b3 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -16,7 +16,7 @@ import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js'
 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, create_derived, is_inlinable_expression } from '../utils.js';
+import { build_getter, create_derived } from '../utils.js';
 import {
 	get_attribute_name,
 	build_attribute_value,
@@ -577,10 +577,6 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		);
 	}
 
-	const inlinable_expression =
-		attribute.value === true
-			? false // not an expression
-			: is_inlinable_expression(attribute.value, context.state);
 	if (attribute.metadata.expression.has_state) {
 		if (has_call) {
 			state.init.push(build_update(update));
@@ -589,11 +585,7 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		}
 		return true;
 	} else {
-		if (inlinable_expression) {
-			context.state.template.push(` ${name}="`, value, '"');
-		} else {
-			state.init.push(update);
-		}
+		state.init.push(update);
 		return false;
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index dbaa11ff4459..ff6bd9baf2c2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -4,7 +4,6 @@
 import { cannot_be_set_statically } from '../../../../../../utils.js';
 import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { is_inlinable_expression } from '../../utils.js';
 import { build_template_literal, build_update } from './utils.js';
 
 /**
@@ -155,13 +154,7 @@ function is_static_element(node, state) {
 			return false;
 		}
 
-		if (
-			attribute.value !== true &&
-			!is_text_attribute(attribute) &&
-			// If the attribute is not a text attribute but is inlinable we will directly inline it in the
-			// the template so before returning false we need to check that the attribute is not inlinable
-			!is_inlinable_expression(attribute.value, state)
-		) {
+		if (attribute.value !== true && !is_text_attribute(attribute)) {
 			return false;
 		}
 	}
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
index 46ed3c1913f3..0d2a3beb3484 100644
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
@@ -5,12 +5,25 @@ const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7
 const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
 const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
 const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
-var root = $.template(`<picture><source srcset="${__DECLARED_ASSET_0__}" type="image/avif"> <source srcset="${__DECLARED_ASSET_1__}" type="image/webp"> <source srcset="${__DECLARED_ASSET_2__}" type="image/png"> <img src="${__DECLARED_ASSET_3__}" alt="production test" width="1440" height="1440"></picture>`);
+var root = $.template(`<picture><source type="image/avif"> <source type="image/webp"> <source type="image/png"> <img alt="production test" width="1440" height="1440"></picture>`);
 
 export default function Inline_module_vars($$anchor) {
 	var picture = root();
+	var source = $.child(picture);
 
-	$.next(6);
+	$.set_attribute(source, "srcset", __DECLARED_ASSET_0__);
+
+	var source_1 = $.sibling(source, 2);
+
+	$.set_attribute(source_1, "srcset", __DECLARED_ASSET_1__);
+
+	var source_2 = $.sibling(source_1, 2);
+
+	$.set_attribute(source_2, "srcset", __DECLARED_ASSET_2__);
+
+	var img = $.sibling(source_2, 2);
+
+	$.set_attribute(img, "src", __DECLARED_ASSET_3__);
 	$.reset(picture);
 	$.append($$anchor, picture);
 }
\ No newline at end of file

From 64ca35f17d41e0eed771aae7b1c0d16da9a8b1d5 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Wed, 20 Nov 2024 15:34:16 +0000
Subject: [PATCH 03/13] fix

---
 .../phases/2-analyze/visitors/Attribute.js    | 24 +++++++++++++++----
 .../2-analyze/visitors/RegularElement.js      | 10 +-------
 .../_expected/client/index.svelte.js          |  5 +++-
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
index 2a281a1aa3d9..6c050d966a22 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -1,7 +1,7 @@
 /** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression } from 'estree' */
 /** @import { AST, DelegatedEvent, SvelteNode } from '#compiler' */
 /** @import { Context } from '../types' */
-import { is_capture_event, is_delegated } from '../../../../utils.js';
+import { cannot_be_set_statically, is_capture_event, is_delegated } from '../../../../utils.js';
 import {
 	get_attribute_chunks,
 	get_attribute_expression,
@@ -16,14 +16,28 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
 export function Attribute(node, context) {
 	context.next();
 
-	// special case
-	if (node.name === 'value') {
-		const parent = /** @type {SvelteNode} */ (context.path.at(-1));
-		if (parent.type === 'RegularElement' && parent.name === 'option') {
+	const parent = /** @type {SvelteNode} */ (context.path.at(-1));
+
+	if (parent.type === 'RegularElement') {
+		// special case <option value="" />
+		if (node.name === 'value' && parent.name === 'option') {
+			mark_subtree_dynamic(context.path);
+		}
+
+		// special case <img loading="lazy" />
+		if (node.name === 'loading' && parent.name === 'img') {
 			mark_subtree_dynamic(context.path);
 		}
 	}
 
+	if (is_event_attribute(node)) {
+		mark_subtree_dynamic(context.path);
+	}
+
+	if (cannot_be_set_statically(node.name)) {
+		mark_subtree_dynamic(context.path);
+	}
+
 	if (node.value !== true) {
 		for (const chunk of get_attribute_chunks(node.value)) {
 			if (chunk.type !== 'ExpressionTag') continue;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index d5964f9ae12a..7d1c4aaeaaf0 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -1,6 +1,6 @@
 /** @import { AST } from '#compiler' */
 /** @import { Context } from '../types' */
-import { cannot_be_set_statically, is_mathml, is_svg, is_void } from '../../../../utils.js';
+import { is_mathml, is_svg, is_void } from '../../../../utils.js';
 import {
 	is_tag_valid_with_ancestor,
 	is_tag_valid_with_parent
@@ -75,14 +75,6 @@ export function RegularElement(node, context) {
 		node.attributes.push(create_attribute('value', child.start, child.end, [child]));
 	}
 
-	if (
-		node.attributes.some(
-			(attribute) => attribute.type === 'Attribute' && cannot_be_set_statically(attribute.name)
-		)
-	) {
-		mark_subtree_dynamic(context.path);
-	}
-
 	const binding = context.state.scope.get(node.name);
 	if (
 		binding !== null &&
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
index 82b3bc54d7ed..8dd7df82cf57 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
@@ -42,9 +42,12 @@ export default function Skip_static_subtree($$anchor, $$props) {
 	$.reset(select);
 
 	var img = $.sibling(select, 2);
+	var div_2 = $.sibling(img, 2);
+	var img_1 = $.child(div_2);
 
-	$.next(2);
+	$.reset(div_2);
 	$.template_effect(() => $.set_text(text, $$props.title));
 	$.handle_lazy_img(img);
+	$.handle_lazy_img(img_1);
 	$.append($$anchor, fragment);
 }
\ No newline at end of file

From 6a9cfa387f0142544d20e0c00fd3f68df474f0fd Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Wed, 20 Nov 2024 16:08:20 +0000
Subject: [PATCH 04/13] feedback

---
 .../3-transform/client/visitors/Fragment.js   | 28 +++++++++++++++--
 .../client/visitors/RegularElement.js         |  4 +--
 .../client/visitors/TitleElement.js           |  4 +--
 .../client/visitors/shared/element.js         |  4 +--
 .../client/visitors/shared/fragment.js        |  4 +--
 .../client/visitors/shared/utils.js           |  2 +-
 packages/svelte/src/internal/client/index.js  |  1 +
 packages/svelte/src/internal/server/index.js  | 30 ++-----------------
 .../main.svelte                               |  2 +-
 .../_expected/client/index.svelte.js          | 29 ------------------
 .../_expected/server/index.svelte.js          | 10 -------
 .../samples/inline-module-vars/index.svelte   | 15 ----------
 12 files changed, 39 insertions(+), 94 deletions(-)
 delete mode 100644 packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
 delete mode 100644 packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js
 delete mode 100644 packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
index 08e06cc714d4..0e6ea29614ff 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
@@ -1,4 +1,4 @@
-/** @import { Expression, Identifier, Statement } from 'estree' */
+/** @import { Expression, Identifier, Statement, TemplateElement } from 'estree' */
 /** @import { AST, Namespace } from '#compiler' */
 /** @import { SourceLocation } from '#shared' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
@@ -212,12 +212,34 @@ function join_template(items) {
 	let quasi = b.quasi('');
 	const template = b.template([quasi], []);
 
+	/**
+	 * @param {Expression} expression
+	 */
+	function push(expression) {
+		if (expression.type === 'TemplateLiteral') {
+			for (let i = 0; i < expression.expressions.length; i += 1) {
+				const q = expression.quasis[i];
+				const e = expression.expressions[i];
+
+				quasi.value.cooked += /** @type {string} */ (q.value.cooked);
+				push(e);
+			}
+
+			const last = /** @type {TemplateElement} */ (expression.quasis.at(-1));
+			quasi.value.cooked += /** @type {string} */ (last.value.cooked);
+		} else if (expression.type === 'Literal') {
+			/** @type {string} */ (quasi.value.cooked) += expression.value;
+		} else {
+			template.expressions.push(expression);
+			template.quasis.push((quasi = b.quasi('')));
+		}
+	}
+
 	for (const item of items) {
 		if (typeof item === 'string') {
 			quasi.value.cooked += item;
 		} else {
-			template.expressions.push(item);
-			template.quasis.push((quasi = b.quasi('')));
+			push(item);
 		}
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 91b40d7305b3..2be2d1d97067 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -27,7 +27,7 @@ import {
 import { process_children } from './shared/fragment.js';
 import {
 	build_render_statement,
-	build_template_literal,
+	build_template_chunk,
 	build_update,
 	build_update_assignment,
 	get_states_and_calls
@@ -364,7 +364,7 @@ export function RegularElement(node, context) {
 				b.assignment(
 					'=',
 					b.member(context.state.node, 'textContent'),
-					build_template_literal(trimmed, context.visit, child_state).value
+					build_template_chunk(trimmed, context.visit, child_state).value
 				)
 			)
 		);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
index a71deaf53953..72cc57b068a0 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
@@ -1,14 +1,14 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
-import { build_template_literal } from './shared/utils.js';
+import { build_template_chunk } from './shared/utils.js';
 
 /**
  * @param {AST.TitleElement} node
  * @param {ComponentContext} context
  */
 export function TitleElement(node, context) {
-	const { has_state, value } = build_template_literal(
+	const { has_state, value } = build_template_chunk(
 		/** @type {any} */ (node.fragment.nodes),
 		context.visit,
 		context.state
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
index e0fbe11b733b..1b0737e31e18 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
@@ -6,7 +6,7 @@ import { is_ignored } from '../../../../../state.js';
 import { get_attribute_expression, is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { build_getter, create_derived } from '../../utils.js';
-import { build_template_literal, build_update } from './utils.js';
+import { build_template_chunk, build_update } from './utils.js';
 
 /**
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
@@ -200,7 +200,7 @@ export function build_attribute_value(value, context) {
 		};
 	}
 
-	return build_template_literal(value, context.visit, context.state);
+	return build_template_chunk(value, context.visit, context.state);
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index ff6bd9baf2c2..af336733bcb4 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -4,7 +4,7 @@
 import { cannot_be_set_statically } from '../../../../../../utils.js';
 import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { build_template_literal, build_update } from './utils.js';
+import { build_template_chunk, build_update } from './utils.js';
 
 /**
  * Processes an array of template nodes, joining sibling text/expression nodes
@@ -69,7 +69,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 
 		state.template.push(' ');
 
-		const { has_state, has_call, value } = build_template_literal(sequence, visit, state);
+		const { has_state, has_call, value } = build_template_chunk(sequence, visit, state);
 
 		// if this is a standalone `{expression}`, make sure we handle the case where
 		// no text node was created because the expression was empty during SSR
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index 21b902d5c281..8e3345f078cd 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -38,7 +38,7 @@ export function get_states_and_calls(values) {
  * @param {ComponentClientTransformState} state
  * @returns {{ value: Expression, has_state: boolean, has_call: boolean }}
  */
-export function build_template_literal(values, visit, state) {
+export function build_template_chunk(values, visit, state) {
 	/** @type {Expression[]} */
 	const expressions = [];
 
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index c401867a0f0b..6fd749b42cfa 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -155,6 +155,7 @@ export {
 	$window as window,
 	$document as document
 } from './dom/operations.js';
+export { attr } from '../shared/attributes.js';
 export { snapshot } from '../shared/clone.js';
 export { noop, fallback } from '../shared/utils.js';
 export {
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 9a66095de482..615a49fbd4c0 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -2,6 +2,7 @@
 /** @import { Component, Payload, RenderOutput } from '#server' */
 /** @import { Store } from '#shared' */
 export { FILENAME, HMR } from '../../constants.js';
+import { attr } from '../shared/attributes.js';
 import { is_promise, noop } from '../shared/utils.js';
 import { subscribe_to_store } from '../../store/utils.js';
 import {
@@ -153,33 +154,6 @@ export function head(payload, fn) {
 	head_payload.out += BLOCK_CLOSE;
 }
 
-/**
- * `<div translate={false}>` should be rendered as `<div translate="no">` and _not_
- * `<div translate="false">`, which is equivalent to `<div translate="yes">`. There
- * may be other odd cases that need to be added to this list in future
- * @type {Record<string, Map<any, string>>}
- */
-const replacements = {
-	translate: new Map([
-		[true, 'yes'],
-		[false, 'no']
-	])
-};
-
-/**
- * @template V
- * @param {string} name
- * @param {V} value
- * @param {boolean} [is_boolean]
- * @returns {string}
- */
-export function attr(name, value, is_boolean = false) {
-	if (value == null || (!value && is_boolean) || (value === '' && name === 'class')) return '';
-	const normalized = (name in replacements && replacements[name].get(value)) || value;
-	const assignment = is_boolean ? '' : `="${escape_html(normalized, true)}"`;
-	return ` ${name}${assignment}`;
-}
-
 /**
  * @param {Payload} payload
  * @param {boolean} is_html
@@ -549,6 +523,8 @@ export function once(get_value) {
 	};
 }
 
+export { attr };
+
 export { html } from './blocks/html.js';
 
 export { push, pop } from './context.js';
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-case-insensitive/main.svelte b/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-case-insensitive/main.svelte
index 90208940868a..bcc418511fa7 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-case-insensitive/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-boolean-case-insensitive/main.svelte
@@ -1 +1 @@
-<input READONLY={true} REQUIRED={false}>
+<input READONLY={!0} REQUIRED={!1}>
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
deleted file mode 100644
index 0d2a3beb3484..000000000000
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/client/index.svelte.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import "svelte/internal/disclose-version";
-import * as $ from "svelte/internal/client";
-
-const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w";
-const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
-const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
-const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
-var root = $.template(`<picture><source type="image/avif"> <source type="image/webp"> <source type="image/png"> <img alt="production test" width="1440" height="1440"></picture>`);
-
-export default function Inline_module_vars($$anchor) {
-	var picture = root();
-	var source = $.child(picture);
-
-	$.set_attribute(source, "srcset", __DECLARED_ASSET_0__);
-
-	var source_1 = $.sibling(source, 2);
-
-	$.set_attribute(source_1, "srcset", __DECLARED_ASSET_1__);
-
-	var source_2 = $.sibling(source_1, 2);
-
-	$.set_attribute(source_2, "srcset", __DECLARED_ASSET_2__);
-
-	var img = $.sibling(source_2, 2);
-
-	$.set_attribute(img, "src", __DECLARED_ASSET_3__);
-	$.reset(picture);
-	$.append($$anchor, picture);
-}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js
deleted file mode 100644
index 9dad39d81e9e..000000000000
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/_expected/server/index.svelte.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import * as $ from "svelte/internal/server";
-
-const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w";
-const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
-const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
-const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
-
-export default function Inline_module_vars($$payload) {
-	$$payload.out += `<picture><source${$.attr("srcset", __DECLARED_ASSET_0__)} type="image/avif"> <source${$.attr("srcset", __DECLARED_ASSET_1__)} type="image/webp"> <source${$.attr("srcset", __DECLARED_ASSET_2__)} type="image/png"> <img${$.attr("src", __DECLARED_ASSET_3__)} alt="production test" width="1440" height="1440"></picture>`;
-}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte b/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte
deleted file mode 100644
index b46a86dc0b64..000000000000
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte
+++ /dev/null
@@ -1,15 +0,0 @@
-<svelte:options runes={true} />
-
-<script module>
-	const __DECLARED_ASSET_0__ = "__VITE_ASSET__2AM7_y_a__ 1440w, __VITE_ASSET__2AM7_y_b__ 960w";
-	const __DECLARED_ASSET_1__ = "__VITE_ASSET__2AM7_y_c__ 1440w, __VITE_ASSET__2AM7_y_d__ 960w";
-	const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7_y_f__ 960w";
-	const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
-</script>
-
-<picture>
-	<source srcset={__DECLARED_ASSET_0__} type="image/avif" />
-	<source srcset={__DECLARED_ASSET_1__} type="image/webp" />
-	<source srcset={__DECLARED_ASSET_2__} type="image/png" />
-	<img src={__DECLARED_ASSET_3__} alt="production test" width=1440 height=1440 />
-</picture>

From 5ff9d2f164c01b4ce3a8fbb60611b3eb1b43ef18 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Wed, 20 Nov 2024 16:18:01 +0000
Subject: [PATCH 05/13] feedback

---
 .../svelte/src/internal/shared/attributes.js  | 28 +++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 packages/svelte/src/internal/shared/attributes.js

diff --git a/packages/svelte/src/internal/shared/attributes.js b/packages/svelte/src/internal/shared/attributes.js
new file mode 100644
index 000000000000..867d6ba5d378
--- /dev/null
+++ b/packages/svelte/src/internal/shared/attributes.js
@@ -0,0 +1,28 @@
+import { escape_html } from '../../escaping.js';
+
+/**
+ * `<div translate={false}>` should be rendered as `<div translate="no">` and _not_
+ * `<div translate="false">`, which is equivalent to `<div translate="yes">`. There
+ * may be other odd cases that need to be added to this list in future
+ * @type {Record<string, Map<any, string>>}
+ */
+const replacements = {
+	translate: new Map([
+		[true, 'yes'],
+		[false, 'no']
+	])
+};
+
+/**
+ * @template V
+ * @param {string} name
+ * @param {V} value
+ * @param {boolean} [is_boolean]
+ * @returns {string}
+ */
+export function attr(name, value, is_boolean = false) {
+	if (value == null || (!value && is_boolean) || (value === '' && name === 'class')) return '';
+	const normalized = (name in replacements && replacements[name].get(value)) || value;
+	const assignment = is_boolean ? '' : `="${escape_html(normalized, true)}"`;
+	return ` ${name}${assignment}`;
+}

From ae0f8dc067b225666805f13558210a4560aad409 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:24:46 +0000
Subject: [PATCH 06/13] Update
 packages/svelte/src/compiler/phases/3-transform/client/utils.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 packages/svelte/src/compiler/phases/3-transform/client/utils.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
index 7d6243bb4fd3..0b49d18ee922 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -1,5 +1,5 @@
 /** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression, Identifier, Pattern, PrivateIdentifier, Statement } from 'estree' */
-/** @import { AST, Binding, SvelteNode } from '#compiler' */
+/** @import { Binding, SvelteNode } from '#compiler' */
 /** @import { ClientTransformState, ComponentClientTransformState, ComponentContext } from './types.js' */
 /** @import { Analysis } from '../../types.js' */
 /** @import { Scope } from '../../scope.js' */

From e5c9f6cfde90ebaa210f97f0c2b45f47df9bee5d Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:42:40 +0000
Subject: [PATCH 07/13] Update
 packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../phases/3-transform/client/visitors/RegularElement.js  | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 2be2d1d97067..e21d0e34500e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -353,10 +353,12 @@ export function RegularElement(node, context) {
 
 	// special case — if an element that only contains text, we don't need
 	// to descend into it if the text is non-reactive
-	const states_and_calls =
+	// in the rare case that we have static text that can't be inlined
+	// (e.g. `<span>{location}</span>`), set `textContent` programmatically
+	const use_text_content =
 		trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
-		trimmed.some((node) => node.type === 'ExpressionTag') &&
-		get_states_and_calls(trimmed);
+		trimmed.every((node) => node.type === 'Text' || !node.metadata.expression.has_state) &&
+		trimmed.some((node) => node.type === 'ExpressionTag');
 
 	if (states_and_calls && states_and_calls.states === 0) {
 		child_state.init.push(

From decabd1426f28e939a29ec6a9551f023b253abe7 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:42:47 +0000
Subject: [PATCH 08/13] Update
 packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../phases/3-transform/client/visitors/RegularElement.js       | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index e21d0e34500e..f69c47f163e7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -29,8 +29,7 @@ import {
 	build_render_statement,
 	build_template_chunk,
 	build_update,
-	build_update_assignment,
-	get_states_and_calls
+	build_update_assignment
 } from './shared/utils.js';
 import { visit_event_attribute } from './shared/events.js';
 

From bab63a94dc16f713145d76d68e3c04826776fb1d Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:48:41 +0000
Subject: [PATCH 09/13] Update
 packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../3-transform/client/visitors/shared/utils.js  | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index 8e3345f078cd..c1692916c956 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -47,9 +47,19 @@ export function build_template_chunk(values, visit, state) {
 
 	const { states, calls } = get_states_and_calls(values);
 
-	let has_call = calls > 0;
-	let has_state = states > 0;
-	let contains_multiple_call_expression = calls > 1;
+	let has_call = false;
+	let has_state = false;
+	let contains_multiple_call_expression = false;
+
+	for (const node of values) {
+		if (node.type === 'ExpressionTag') {
+			const metadata = node.metadata.expression;
+
+			contains_multiple_call_expression ||= has_call && metadata.has_call;
+			has_call ||= metadata.has_call;
+			has_state ||= metadata.has_state;
+		}
+	}
 
 	for (let i = 0; i < values.length; i++) {
 		const node = values[i];

From 4ebe26cd9f768e8849369bcd2ce7cd09ed687e22 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:48:49 +0000
Subject: [PATCH 10/13] Update
 packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../compiler/phases/3-transform/client/visitors/shared/utils.js  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index c1692916c956..4f045c1913ed 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -45,7 +45,6 @@ export function build_template_chunk(values, visit, state) {
 	let quasi = b.quasi('');
 	const quasis = [quasi];
 
-	const { states, calls } = get_states_and_calls(values);
 
 	let has_call = false;
 	let has_state = false;

From 31fafa0bf61dd4fe0255fae8084ef495bd9b4ddc Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 20 Nov 2024 16:48:56 +0000
Subject: [PATCH 11/13] Update
 packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../client/visitors/shared/utils.js           | 22 -------------------
 1 file changed, 22 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index 4f045c1913ed..0048b18f6d62 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -10,28 +10,6 @@ import { create_derived } from '../../utils.js';
 import is_reference from 'is-reference';
 import { locator } from '../../../../../state.js';
 
-/**
- * @param {Array<AST.Text | AST.ExpressionTag>} values
- */
-export function get_states_and_calls(values) {
-	let states = 0;
-	let calls = 0;
-	for (let i = 0; i < values.length; i++) {
-		const node = values[i];
-
-		if (node.type === 'ExpressionTag') {
-			if (node.metadata.expression.has_call) {
-				calls++;
-			}
-			if (node.metadata.expression.has_state) {
-				states++;
-			}
-		}
-	}
-
-	return { states, calls };
-}
-
 /**
  * @param {Array<AST.Text | AST.ExpressionTag>} values
  * @param {(node: SvelteNode, state: any) => any} visit

From 3913806f0e77070d6d6718ffe395e8facbb8551a Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <dg@domgan.com>
Date: Wed, 20 Nov 2024 16:50:04 +0000
Subject: [PATCH 12/13] fix

---
 .../phases/3-transform/client/visitors/RegularElement.js        | 2 +-
 .../compiler/phases/3-transform/client/visitors/shared/utils.js | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index f69c47f163e7..85df92e8bfd0 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -359,7 +359,7 @@ export function RegularElement(node, context) {
 		trimmed.every((node) => node.type === 'Text' || !node.metadata.expression.has_state) &&
 		trimmed.some((node) => node.type === 'ExpressionTag');
 
-	if (states_and_calls && states_and_calls.states === 0) {
+	if (use_text_content) {
 		child_state.init.push(
 			b.stmt(
 				b.assignment(
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
index 0048b18f6d62..59beacbb0c30 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -23,7 +23,6 @@ export function build_template_chunk(values, visit, state) {
 	let quasi = b.quasi('');
 	const quasis = [quasi];
 
-
 	let has_call = false;
 	let has_state = false;
 	let contains_multiple_call_expression = false;

From c9dd11211e2beafaf928394a360ef89ea78acfac Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 20 Nov 2024 17:44:13 +0000
Subject: [PATCH 13/13] Update .changeset/calm-mice-perform.md

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/calm-mice-perform.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/calm-mice-perform.md b/.changeset/calm-mice-perform.md
index 91927c197d13..f43c7fcf0e22 100644
--- a/.changeset/calm-mice-perform.md
+++ b/.changeset/calm-mice-perform.md
@@ -2,4 +2,4 @@
 'svelte': patch
 ---
 
-chore: remove template expression inlining
+fix: remove template expression inlining