From 3ce5ee74c46ea6938050fcf8b08baca883b00bf5 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 11 Nov 2024 22:11:49 +0100
Subject: [PATCH 01/42] fix: avoid marking subtree as dynamic for inlined
 attributes

---
 .changeset/spotty-sheep-fetch.md              |  5 ++
 .../2-analyze/visitors/ExpressionTag.js       | 15 ++++--
 .../phases/2-analyze/visitors/Identifier.js   | 17 +++++-
 .../phases/3-transform/client/utils.js        | 52 +++----------------
 .../client/visitors/RegularElement.js         | 24 +++------
 .../client/visitors/shared/fragment.js        |  4 +-
 packages/svelte/src/compiler/phases/utils.js  | 39 ++++++++++++++
 .../_expected/client/index.svelte.js          |  2 -
 8 files changed, 88 insertions(+), 70 deletions(-)
 create mode 100644 .changeset/spotty-sheep-fetch.md
 create mode 100644 packages/svelte/src/compiler/phases/utils.js

diff --git a/.changeset/spotty-sheep-fetch.md b/.changeset/spotty-sheep-fetch.md
new file mode 100644
index 000000000000..390aa8e79e00
--- /dev/null
+++ b/.changeset/spotty-sheep-fetch.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid marking subtree as dynamic for inlined attributes
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 32c8d2ca3671..f0e74e3dc947 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 { is_inlinable_expression } from '../../utils.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
@@ -15,9 +16,17 @@ 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);
+	const attribute_parent = context.path.find((parent) => parent.type === 'Attribute');
+	/**
+	 * if the expression tag is part of an attribute we want to check if it's inlinable before marking
+	 * the subtree as dynamic. This is because if it's inlinable it will be inlined in the template
+	 * directly making the whole thing actually static.
+	 */
+	if (attribute_parent && !is_inlinable_expression(node, context.state.scope)) {
+		// 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 79dccd5a7cf5..0b38815a4068 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -7,6 +7,7 @@ import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { is_rune } from '../../../../utils.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
+import { is_inlinable_expression } from '../../utils.js';
 
 /**
  * @param {Identifier} node
@@ -20,7 +21,21 @@ export function Identifier(node, context) {
 		return;
 	}
 
-	mark_subtree_dynamic(context.path);
+	const expression_tag_parent = context.path.find((parent) => parent.type === 'ExpressionTag');
+	const attribute_parent = context.path.find((parent) => parent.type === 'Attribute');
+
+	/**
+	 * if the identifier is part of an expression tag of an attribute we want to check if it's inlinable
+	 * before marking the subtree as dynamic. This is because if it's inlinable it will be inlined in the template
+	 * directly making the whole thing actually static.
+	 */
+	if (
+		!attribute_parent ||
+		!expression_tag_parent ||
+		!is_inlinable_expression(expression_tag_parent, context.state.scope)
+	) {
+		mark_subtree_dynamic(context.path);
+	}
 
 	// If we are using arguments outside of a function, then throw an error
 	if (
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..910f173f79ae 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 { 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' */
-import * as b from '../../../utils/builders.js';
-import { extract_identifiers, is_simple_expression } from '../../../utils/ast.js';
 import {
-	PROPS_IS_LAZY_INITIAL,
+	PROPS_IS_BINDABLE,
 	PROPS_IS_IMMUTABLE,
+	PROPS_IS_LAZY_INITIAL,
 	PROPS_IS_RUNES,
-	PROPS_IS_UPDATED,
-	PROPS_IS_BINDABLE
+	PROPS_IS_UPDATED
 } 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,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 4d3cebcee6fe..e3792edddc63 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
@@ -3,35 +3,28 @@
 /** @import { SourceLocation } from '#shared' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 /** @import { Scope } from '../../../scope' */
+import { escape_html } from '../../../../../escaping.js';
 import {
 	is_boolean_attribute,
 	is_dom_property,
 	is_load_error_element,
 	is_void
 } from '../../../../../utils.js';
-import { escape_html } from '../../../../../escaping.js';
 import { dev, is_ignored, locator } from '../../../../state.js';
-import {
-	get_attribute_expression,
-	is_event_attribute,
-	is_text_attribute
-} from '../../../../utils/ast.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 { is_inlinable_expression } from '../../../utils.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
+import { build_getter, create_derived } from '../utils.js';
 import {
-	build_getter,
-	can_inline_variable,
-	create_derived,
-	is_inlinable_expression
-} from '../utils.js';
-import {
-	get_attribute_name,
 	build_attribute_value,
 	build_class_directives,
+	build_set_attributes,
 	build_style_directives,
-	build_set_attributes
+	get_attribute_name
 } from './shared/element.js';
+import { visit_event_attribute } from './shared/events.js';
 import { process_children } from './shared/fragment.js';
 import {
 	build_render_statement,
@@ -40,7 +33,6 @@ import {
 	build_update_assignment,
 	get_states_and_calls
 } from './shared/utils.js';
-import { visit_event_attribute } from './shared/events.js';
 
 /**
  * @param {AST.RegularElement} node
@@ -589,7 +581,7 @@ 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);
+			: is_inlinable_expression(attribute.value, context.state.scope);
 	if (attribute.metadata.expression.has_state) {
 		if (has_call) {
 			state.init.push(build_update(update));
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 3b009fb5b589..2bfe44972a74 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
@@ -3,7 +3,7 @@
 /** @import { ComponentContext } from '../../types' */
 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 { is_inlinable_expression } from '../../../../utils.js';
 import { build_template_literal, build_update } from './utils.js';
 
 /**
@@ -159,7 +159,7 @@ function is_static_element(node, state) {
 			!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)
+			!is_inlinable_expression(attribute.value, state.scope)
 		) {
 			return false;
 		}
diff --git a/packages/svelte/src/compiler/phases/utils.js b/packages/svelte/src/compiler/phases/utils.js
new file mode 100644
index 000000000000..10b82c2a719f
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/utils.js
@@ -0,0 +1,39 @@
+/** @import { AST, Binding } from '#compiler' */
+
+/**
+ * Whether a variable can be referenced directly from template string.
+ * @param {Binding | undefined} binding
+ * @returns {boolean}
+ */
+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('./scope.js').Scope} scope
+ */
+export function is_inlinable_expression(node_or_nodes, scope) {
+	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 = 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/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..b1bbff9223a0 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
@@ -10,7 +10,5 @@ var root = $.template(`<picture><source srcset="${__DECLARED_ASSET_0__}" type="i
 export default function Inline_module_vars($$anchor) {
 	var picture = root();
 
-	$.next(6);
-	$.reset(picture);
 	$.append($$anchor, picture);
 }
\ No newline at end of file

From 509ca700c1c5654eb84221605c474132905b40da Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 11 Nov 2024 22:32:37 +0100
Subject: [PATCH 02/42] =?UTF-8?q?fix:=20i'm=20a=20silly=20goose=20?=
 =?UTF-8?q?=F0=9F=AA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/compiler/phases/2-analyze/visitors/ExpressionTag.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 f0e74e3dc947..fa15ad3e566a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
@@ -22,7 +22,7 @@ export function ExpressionTag(node, context) {
 	 * the subtree as dynamic. This is because if it's inlinable it will be inlined in the template
 	 * directly making the whole thing actually static.
 	 */
-	if (attribute_parent && !is_inlinable_expression(node, context.state.scope)) {
+	if (!attribute_parent || !is_inlinable_expression(node, context.state.scope)) {
 		// 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);

From 57700638a357cb7d59d9d50052ec507e4c007bb3 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Mon, 11 Nov 2024 22:57:19 +0100
Subject: [PATCH 03/42] chore: refactor `is_inlinable_expression` to accept the
 attribute

---
 .../phases/2-analyze/visitors/ExpressionTag.js         |  2 +-
 .../compiler/phases/2-analyze/visitors/Identifier.js   |  7 +------
 .../3-transform/client/visitors/RegularElement.js      |  5 +----
 .../3-transform/client/visitors/shared/fragment.js     |  2 +-
 packages/svelte/src/compiler/phases/utils.js           | 10 ++++++----
 5 files changed, 10 insertions(+), 16 deletions(-)

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 fa15ad3e566a..86a2f6a9e18d 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
@@ -22,7 +22,7 @@ export function ExpressionTag(node, context) {
 	 * the subtree as dynamic. This is because if it's inlinable it will be inlined in the template
 	 * directly making the whole thing actually static.
 	 */
-	if (!attribute_parent || !is_inlinable_expression(node, context.state.scope)) {
+	if (!attribute_parent || !is_inlinable_expression(attribute_parent, context.state.scope)) {
 		// 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);
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 0b38815a4068..c0509a5414b5 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -21,7 +21,6 @@ export function Identifier(node, context) {
 		return;
 	}
 
-	const expression_tag_parent = context.path.find((parent) => parent.type === 'ExpressionTag');
 	const attribute_parent = context.path.find((parent) => parent.type === 'Attribute');
 
 	/**
@@ -29,11 +28,7 @@ export function Identifier(node, context) {
 	 * before marking the subtree as dynamic. This is because if it's inlinable it will be inlined in the template
 	 * directly making the whole thing actually static.
 	 */
-	if (
-		!attribute_parent ||
-		!expression_tag_parent ||
-		!is_inlinable_expression(expression_tag_parent, context.state.scope)
-	) {
+	if (!attribute_parent || !is_inlinable_expression(attribute_parent, context.state.scope)) {
 		mark_subtree_dynamic(context.path);
 	}
 
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 e3792edddc63..649762994ad0 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
@@ -578,10 +578,7 @@ 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.scope);
+	const inlinable_expression = is_inlinable_expression(attribute, context.state.scope);
 	if (attribute.metadata.expression.has_state) {
 		if (has_call) {
 			state.init.push(build_update(update));
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 2bfe44972a74..2934df81f8da 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
@@ -159,7 +159,7 @@ function is_static_element(node, state) {
 			!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.scope)
+			!is_inlinable_expression(attribute, state.scope)
 		) {
 			return false;
 		}
diff --git a/packages/svelte/src/compiler/phases/utils.js b/packages/svelte/src/compiler/phases/utils.js
index 10b82c2a719f..116f03ca91ee 100644
--- a/packages/svelte/src/compiler/phases/utils.js
+++ b/packages/svelte/src/compiler/phases/utils.js
@@ -1,4 +1,5 @@
 /** @import { AST, Binding } from '#compiler' */
+/** @import { Scope } from './scope' */
 
 /**
  * Whether a variable can be referenced directly from template string.
@@ -16,11 +17,12 @@ function can_inline_variable(binding) {
 }
 
 /**
- * @param {(AST.Text | AST.ExpressionTag) | (AST.Text | AST.ExpressionTag)[]} node_or_nodes
- * @param {import('./scope.js').Scope} scope
+ * @param {AST.Attribute} attribute
+ * @param {Scope} scope
  */
-export function is_inlinable_expression(node_or_nodes, scope) {
-	let nodes = Array.isArray(node_or_nodes) ? node_or_nodes : [node_or_nodes];
+export function is_inlinable_expression(attribute, scope) {
+	if (attribute.value === true) return false; // not an expression
+	let nodes = Array.isArray(attribute.value) ? attribute.value : [attribute.value];
 	let has_expression_tag = false;
 	for (let value of nodes) {
 		if (value.type === 'ExpressionTag') {

From dec07f00c16119271035f3b8908d099d70626612 Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 12 Nov 2024 17:14:03 +0100
Subject: [PATCH 04/42] feat: inline dom expression too

---
 .../2-analyze/visitors/ExpressionTag.js       | 12 ----
 .../phases/2-analyze/visitors/Identifier.js   |  2 +-
 .../client/visitors/RegularElement.js         | 37 ++++++++----
 .../client/visitors/shared/fragment.js        | 16 +++++-
 .../client/visitors/shared/utils.js           | 12 +++-
 packages/svelte/src/compiler/phases/utils.js  | 56 +++++++++++++++----
 6 files changed, 96 insertions(+), 39 deletions(-)

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 86a2f6a9e18d..018b04eeea58 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
@@ -16,17 +16,5 @@ export function ExpressionTag(node, context) {
 		}
 	}
 
-	const attribute_parent = context.path.find((parent) => parent.type === 'Attribute');
-	/**
-	 * if the expression tag is part of an attribute we want to check if it's inlinable before marking
-	 * the subtree as dynamic. This is because if it's inlinable it will be inlined in the template
-	 * directly making the whole thing actually static.
-	 */
-	if (!attribute_parent || !is_inlinable_expression(attribute_parent, context.state.scope)) {
-		// 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 c0509a5414b5..f0f9b1e1fb94 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -28,7 +28,7 @@ export function Identifier(node, context) {
 	 * before marking the subtree as dynamic. This is because if it's inlinable it will be inlined in the template
 	 * directly making the whole thing actually static.
 	 */
-	if (!attribute_parent || !is_inlinable_expression(attribute_parent, context.state.scope)) {
+	if (!attribute_parent || !is_inlinable_expression(attribute_parent.value, context.state.scope)) {
 		mark_subtree_dynamic(context.path);
 	}
 
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 649762994ad0..5cfc0a1496a8 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
@@ -31,6 +31,7 @@ import {
 	build_template_literal,
 	build_update,
 	build_update_assignment,
+	escape_template_quasis,
 	get_states_and_calls
 } from './shared/utils.js';
 
@@ -360,22 +361,30 @@ export function RegularElement(node, context) {
 		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'),
-					build_template_literal(trimmed, context.visit, child_state).value
-				)
-			)
-		);
+		let { value } = build_template_literal(trimmed, context.visit, child_state);
+		// if the expression is inlinable we just push it to the template
+		if (is_inlinable_expression(trimmed, context.state.scope)) {
+			// escaping every quasi if it's a template literal
+			if (value.type === 'TemplateLiteral') {
+				escape_template_quasis(value);
+			}
+			state.template.push(value);
+		} else {
+			// else we programmatically set the value
+			child_state.init.push(
+				b.stmt(b.assignment('=', b.member(context.state.node, 'textContent'), 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
-		let needs_reset = trimmed.some((node) => node.type !== 'Text');
+		// after the element has been hydrated (we don't need to reset if it's been inlined)
+		let needs_reset =
+			trimmed.some((node) => node.type !== 'Text') &&
+			(!trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') ||
+				!is_inlinable_expression(trimmed, context.state.scope));
 
 		// The same applies if it's a `<template>` element, since we need to
 		// set the value of `hydrate_node` to `node.content`
@@ -578,7 +587,11 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		);
 	}
 
-	const inlinable_expression = is_inlinable_expression(attribute, context.state.scope);
+	// we need to special case textarea value because it's not an actual attribute
+	const inlinable_expression =
+		is_inlinable_expression(attribute.value, context.state.scope) &&
+		attribute.name !== 'value' &&
+		element.name !== 'textarea';
 	if (attribute.metadata.expression.has_state) {
 		if (has_call) {
 			state.init.push(build_update(update));
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 2934df81f8da..d69c60624769 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 { 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';
+import { build_template_literal, build_update, escape_template_quasis } from './utils.js';
 
 /**
  * Processes an array of template nodes, joining sibling text/expression nodes
@@ -83,7 +83,17 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 		} else if (has_state && !within_bound_contenteditable) {
 			state.update.push(update);
 		} else {
-			state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
+			// if the expression is inlinable we just push it to the template
+			if (is_inlinable_expression(sequence, state.scope)) {
+				// escaping every quasi if it's a template literal
+				if (value.type === 'TemplateLiteral') {
+					escape_template_quasis(value);
+				}
+				state.template.push(value);
+			} else {
+				// else we programmatically set the value
+				state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
+			}
 		}
 	}
 
@@ -159,7 +169,7 @@ function is_static_element(node, state) {
 			!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, state.scope)
+			!is_inlinable_expression(attribute.value, state.scope)
 		) {
 			return false;
 		}
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..e4cc1d240796 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 } from 'estree' */
+/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, Statement, Super, TemplateLiteral } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
 /** @import { ComponentClientTransformState } from '../../types' */
 import { walk } from 'zimmerframe';
@@ -9,6 +9,7 @@ import { regex_is_valid_identifier } from '../../../../patterns.js';
 import { create_derived } from '../../utils.js';
 import is_reference from 'is-reference';
 import { locator } from '../../../../../state.js';
+import { escape_html } from '../../../../../../escaping.js';
 
 /**
  * @param {Array<AST.Text | AST.ExpressionTag>} values
@@ -31,6 +32,15 @@ export function get_states_and_calls(values) {
 
 	return { states, calls };
 }
+/**
+ * Escape the html in every quesi in the template literal
+ * @param {TemplateLiteral} template
+ */
+export function escape_template_quasis(template) {
+	for (let quasi of template.quasis) {
+		quasi.value.raw = escape_html(quasi.value.raw);
+	}
+}
 
 /**
  * @param {Array<AST.Text | AST.ExpressionTag>} values
diff --git a/packages/svelte/src/compiler/phases/utils.js b/packages/svelte/src/compiler/phases/utils.js
index 116f03ca91ee..9b2b0b68ca35 100644
--- a/packages/svelte/src/compiler/phases/utils.js
+++ b/packages/svelte/src/compiler/phases/utils.js
@@ -1,5 +1,31 @@
 /** @import { AST, Binding } from '#compiler' */
 /** @import { Scope } from './scope' */
+/** @import * as ESTree from 'estree' */
+
+import { walk } from 'zimmerframe';
+
+/**
+ * @param {ESTree.Expression} expr
+ */
+export function extract_identifiers(expr) {
+	/** @type {ESTree.Identifier[]} */
+	let nodes = [];
+
+	walk(
+		expr,
+		{},
+		{
+			Identifier(node, { path }) {
+				const parent = path.at(-1);
+				if (parent?.type !== 'MemberExpression' || parent.property !== node || parent.computed) {
+					nodes.push(node);
+				}
+			}
+		}
+	);
+
+	return nodes;
+}
 
 /**
  * Whether a variable can be referenced directly from template string.
@@ -17,21 +43,31 @@ function can_inline_variable(binding) {
 }
 
 /**
- * @param {AST.Attribute} attribute
+ * @param {AST.Attribute["value"]} value
  * @param {Scope} scope
  */
-export function is_inlinable_expression(attribute, scope) {
-	if (attribute.value === true) return false; // not an expression
-	let nodes = Array.isArray(attribute.value) ? attribute.value : [attribute.value];
+export function is_inlinable_expression(value, scope) {
+	if (value === true) return false; // not an expression
+	let nodes = Array.isArray(value) ? value : [value];
 	let has_expression_tag = false;
 	for (let value of nodes) {
 		if (value.type === 'ExpressionTag') {
-			if (value.expression.type === 'Identifier') {
-				const binding = scope.owner(value.expression.name)?.declarations.get(value.expression.name);
-				if (!can_inline_variable(binding)) {
-					return false;
-				}
-			} else {
+			const identifiers = extract_identifiers(value.expression);
+			// if not every identifier is inlinable we bail
+			if (
+				identifiers.length > 0 &&
+				identifiers.some((id) => {
+					const binding = scope.owner(id.name)?.declarations.get(id.name);
+					return !can_inline_variable(binding);
+				})
+			) {
+				return false;
+			} else if (
+				// we need to special case null and boolean values because
+				// we want to set them programmatically
+				value.expression.type === 'Literal' &&
+				(value.expression.value === null || typeof value.expression.value === 'boolean')
+			) {
 				return false;
 			}
 			has_expression_tag = true;

From 72244cd14e08f5a0ed6f6a11da906b93d08fcc3e Mon Sep 17 00:00:00 2001
From: paoloricciuti <ricciutipaolo@gmail.com>
Date: Tue, 12 Nov 2024 18:44:50 +0100
Subject: [PATCH 05/42] fix: special case literals with `"` in it and fix
 standalone case

---
 .../2-analyze/visitors/ExpressionTag.js       |  2 --
 .../3-transform/client/visitors/Fragment.js   |  4 ++-
 .../client/visitors/RegularElement.js         |  6 ++--
 .../client/visitors/shared/fragment.js        |  7 ++---
 .../client/visitors/shared/utils.js           | 30 +++++++++++++++----
 packages/svelte/src/compiler/phases/utils.js  |  6 +++-
 6 files changed, 36 insertions(+), 19 deletions(-)

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 018b04eeea58..f59b7fc5692b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
@@ -2,8 +2,6 @@
 /** @import { Context } from '../types' */
 import { is_tag_valid_with_parent } from '../../../../html-tree-validation.js';
 import * as e from '../../../errors.js';
-import { is_inlinable_expression } from '../../utils.js';
-import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {AST.ExpressionTag} node
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..4d42b841f2b6 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
@@ -6,6 +6,7 @@ import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../../../cons
 import { dev } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { sanitize_template_string } from '../../../../utils/sanitize_template_string.js';
+import { is_inlinable_expression } from '../../../utils.js';
 import { clean_nodes, infer_namespace } from '../../utils.js';
 import { process_children } from './shared/fragment.js';
 import { build_render_statement } from './shared/utils.js';
@@ -142,7 +143,8 @@ export function Fragment(node, context) {
 
 		const use_space_template =
 			trimmed.some((node) => node.type === 'ExpressionTag') &&
-			trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag');
+			trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
+			!is_inlinable_expression(trimmed, context.state.scope);
 
 		if (use_space_template) {
 			// special case — we can use `$.text` instead of creating a unique template
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 5cfc0a1496a8..e5d1d89f5f89 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
@@ -364,10 +364,7 @@ export function RegularElement(node, context) {
 		let { value } = build_template_literal(trimmed, context.visit, child_state);
 		// if the expression is inlinable we just push it to the template
 		if (is_inlinable_expression(trimmed, context.state.scope)) {
-			// escaping every quasi if it's a template literal
-			if (value.type === 'TemplateLiteral') {
-				escape_template_quasis(value);
-			}
+			escape_template_quasis(value);
 			state.template.push(value);
 		} else {
 			// else we programmatically set the value
@@ -601,6 +598,7 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		return true;
 	} else {
 		if (inlinable_expression) {
+			escape_template_quasis(value, true);
 			context.state.template.push(` ${name}="`, value, '"');
 		} else {
 			state.init.push(update);
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 d69c60624769..3b39853fc79b 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
@@ -84,11 +84,8 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 			state.update.push(update);
 		} else {
 			// if the expression is inlinable we just push it to the template
-			if (is_inlinable_expression(sequence, state.scope)) {
-				// escaping every quasi if it's a template literal
-				if (value.type === 'TemplateLiteral') {
-					escape_template_quasis(value);
-				}
+			if (is_inlinable_expression(sequence, state.scope) && !is_text) {
+				escape_template_quasis(value);
 				state.template.push(value);
 			} else {
 				// else we programmatically set the value
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 e4cc1d240796..3c823f6edca8 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 } from 'estree' */
+/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, Statement, Super, TemplateLiteral, Literal } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
 /** @import { ComponentClientTransformState } from '../../types' */
 import { walk } from 'zimmerframe';
@@ -34,12 +34,30 @@ export function get_states_and_calls(values) {
 }
 /**
  * Escape the html in every quesi in the template literal
- * @param {TemplateLiteral} template
+ * @param {SvelteNode} template
+ * @param {boolean} [is_attr]
  */
-export function escape_template_quasis(template) {
-	for (let quasi of template.quasis) {
-		quasi.value.raw = escape_html(quasi.value.raw);
-	}
+export function escape_template_quasis(template, is_attr) {
+	walk(
+		template,
+		{},
+		{
+			TemplateLiteral(node, { next }) {
+				for (let quasi of node.quasis) {
+					quasi.value.raw = escape_html(quasi.value.raw, is_attr);
+				}
+				next();
+			},
+			Literal(node, { next }) {
+				if (node.raw != null) {
+					node.raw = escape_html(node.raw, is_attr);
+				} else {
+					node.value = escape_html(node.value, is_attr);
+				}
+				next();
+			}
+		}
+	);
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/utils.js b/packages/svelte/src/compiler/phases/utils.js
index 9b2b0b68ca35..a0a60f543707 100644
--- a/packages/svelte/src/compiler/phases/utils.js
+++ b/packages/svelte/src/compiler/phases/utils.js
@@ -66,7 +66,11 @@ export function is_inlinable_expression(value, scope) {
 				// we need to special case null and boolean values because
 				// we want to set them programmatically
 				value.expression.type === 'Literal' &&
-				(value.expression.value === null || typeof value.expression.value === 'boolean')
+				(value.expression.value === null ||
+					typeof value.expression.value === 'boolean' ||
+					// we also want to special case the case of a literal with quotes
+					// because it could mess with the template
+					(typeof value.expression.value === 'string' && value.expression.value.includes('"')))
 			) {
 				return false;
 			}

From 63d96cadda56b320e988b3bfafaa58a2a27348a2 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 12 Nov 2024 21:11:12 +0100
Subject: [PATCH 06/42] chore: simpler check first

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 .../phases/3-transform/client/visitors/shared/fragment.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 3b39853fc79b..f1101a1d988a 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
@@ -84,7 +84,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 			state.update.push(update);
 		} else {
 			// if the expression is inlinable we just push it to the template
-			if (is_inlinable_expression(sequence, state.scope) && !is_text) {
+			if (!is_text && is_inlinable_expression(sequence, state.scope)) {
 				escape_template_quasis(value);
 				state.template.push(value);
 			} else {

From d920a232fae018a4b3ecfaea50a8356a92870ea3 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 18:46:25 -0500
Subject: [PATCH 07/42] typo

---
 .../phases/3-transform/client/visitors/shared/utils.js         | 3 ++-
 1 file changed, 2 insertions(+), 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 3c823f6edca8..916ae0022e4b 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
@@ -32,8 +32,9 @@ export function get_states_and_calls(values) {
 
 	return { states, calls };
 }
+
 /**
- * Escape the html in every quesi in the template literal
+ * Escape the html in every quasi in the template literal
  * @param {SvelteNode} template
  * @param {boolean} [is_attr]
  */

From a8b38c06d38b51b887f2dc51f66360753e37929a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 19:08:30 -0500
Subject: [PATCH 08/42] add more stuff to snapshot test

---
 .../_expected/client/index.svelte.js                  | 11 +++++++----
 .../_expected/server/index.svelte.js                  |  6 ++++--
 .../snapshot/samples/inline-module-vars/index.svelte  |  7 ++++++-
 3 files changed, 17 insertions(+), 7 deletions(-)

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 b1bbff9223a0..14901462b2f1 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,10 +5,13 @@ 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>`);
+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 ?? ""} = ${a + b ?? ""}`}</p>`, 1);
 
 export default function Inline_module_vars($$anchor) {
-	var picture = root();
+	var fragment = root();
+	var p = $.sibling($.first_child(fragment), 2);
 
-	$.append($$anchor, picture);
-}
\ No newline at end of file
+	$.append($$anchor, fragment);
+}
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 9dad39d81e9e..83d5bb495e82 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,7 +4,9 @@ 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" width="1440" height="1440"></picture>`;
-}
\ No newline at end of file
+	$$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>`;
+}
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 b46a86dc0b64..a7b737e59612 100644
--- a/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte
+++ b/packages/svelte/tests/snapshot/samples/inline-module-vars/index.svelte
@@ -5,11 +5,16 @@
 	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>

From d52bfe734e796aa52539bfd7ad6cd0b11019e8ea Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 20:34:58 -0500
Subject: [PATCH 09/42] simplify/speedup by doing the work once, during
 analysis

---
 .../phases/2-analyze/visitors/Attribute.js    |  4 ++
 .../2-analyze/visitors/CallExpression.js      |  1 +
 .../phases/2-analyze/visitors/Identifier.js   | 29 ++++++---
 .../2-analyze/visitors/MemberExpression.js    |  1 +
 .../visitors/TaggedTemplateExpression.js      |  1 +
 .../3-transform/client/visitors/Fragment.js   |  2 +-
 .../client/visitors/RegularElement.js         |  6 +-
 .../client/visitors/shared/fragment.js        |  4 +-
 packages/svelte/src/compiler/phases/nodes.js  |  3 +-
 packages/svelte/src/compiler/phases/utils.js  | 62 +++----------------
 packages/svelte/src/compiler/types/index.d.ts |  2 +
 11 files changed, 44 insertions(+), 71 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..efdbe292d0ee 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -24,6 +24,10 @@ export function Attribute(node, context) {
 		}
 	}
 
+	if (node.name.startsWith('on')) {
+		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/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
index 957b27ae9bc8..2ae32e80e1ba 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -178,6 +178,7 @@ 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;
 		}
 	}
 }
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 f0f9b1e1fb94..5dbdc232545b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -23,15 +23,6 @@ export function Identifier(node, context) {
 
 	const attribute_parent = context.path.find((parent) => parent.type === 'Attribute');
 
-	/**
-	 * if the identifier is part of an expression tag of an attribute we want to check if it's inlinable
-	 * before marking the subtree as dynamic. This is because if it's inlinable it will be inlined in the template
-	 * directly making the whole thing actually static.
-	 */
-	if (!attribute_parent || !is_inlinable_expression(attribute_parent.value, context.state.scope)) {
-		mark_subtree_dynamic(context.path);
-	}
-
 	// If we are using arguments outside of a function, then throw an error
 	if (
 		node.name === 'arguments' &&
@@ -101,6 +92,13 @@ export function Identifier(node, context) {
 		if (context.state.expression) {
 			context.state.expression.dependencies.add(binding);
 			context.state.expression.has_state ||= binding.kind !== 'normal';
+
+			// if the binding is outside module scope, the expression
+			// cannot be inlined (TODO allow inlining in more cases,
+			// e.g. primitive consts)
+			if (!!binding.scope.parent) {
+				context.state.expression.can_inline = false;
+			}
 		}
 
 		if (
@@ -131,5 +129,18 @@ export function Identifier(node, context) {
 		) {
 			w.reactive_declaration_module_script_dependency(node);
 		}
+	} else if (context.state.expression) {
+		// no binding means global, and we can't inline e.g. `<span>{location}</span>`
+		// because it could change between component renders
+		context.state.expression.can_inline = false;
+	}
+
+	/**
+	 * if the identifier is part of an expression tag of an attribute we want to check if it's inlinable
+	 * before marking the subtree as dynamic. This is because if it's inlinable it will be inlined in the template
+	 * directly making the whole thing actually static.
+	 */
+	if (!attribute_parent || !is_inlinable_expression(attribute_parent.value)) {
+		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 171a1106a8ce..adcc2da4226e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
@@ -19,6 +19,7 @@ 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;
 	}
 
 	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 eacb8a342ac2..724b9af31185 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
@@ -10,6 +10,7 @@ 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/visitors/Fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
index 4d42b841f2b6..d0b6d0996e5a 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
@@ -144,7 +144,7 @@ export function Fragment(node, context) {
 		const use_space_template =
 			trimmed.some((node) => node.type === 'ExpressionTag') &&
 			trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
-			!is_inlinable_expression(trimmed, context.state.scope);
+			!is_inlinable_expression(trimmed);
 
 		if (use_space_template) {
 			// special case — we can use `$.text` instead of creating a unique template
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 e5d1d89f5f89..097869104e9e 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
@@ -363,7 +363,7 @@ export function RegularElement(node, context) {
 	if (states_and_calls && states_and_calls.states === 0) {
 		let { value } = build_template_literal(trimmed, context.visit, child_state);
 		// if the expression is inlinable we just push it to the template
-		if (is_inlinable_expression(trimmed, context.state.scope)) {
+		if (is_inlinable_expression(trimmed)) {
 			escape_template_quasis(value);
 			state.template.push(value);
 		} else {
@@ -381,7 +381,7 @@ export function RegularElement(node, context) {
 		let needs_reset =
 			trimmed.some((node) => node.type !== 'Text') &&
 			(!trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') ||
-				!is_inlinable_expression(trimmed, context.state.scope));
+				!is_inlinable_expression(trimmed));
 
 		// The same applies if it's a `<template>` element, since we need to
 		// set the value of `hydrate_node` to `node.content`
@@ -586,7 +586,7 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 
 	// we need to special case textarea value because it's not an actual attribute
 	const inlinable_expression =
-		is_inlinable_expression(attribute.value, context.state.scope) &&
+		is_inlinable_expression(attribute.value) &&
 		attribute.name !== 'value' &&
 		element.name !== 'textarea';
 	if (attribute.metadata.expression.has_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 f1101a1d988a..9469387eb303 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
@@ -84,7 +84,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 			state.update.push(update);
 		} else {
 			// if the expression is inlinable we just push it to the template
-			if (!is_text && is_inlinable_expression(sequence, state.scope)) {
+			if (!is_text && is_inlinable_expression(sequence)) {
 				escape_template_quasis(value);
 				state.template.push(value);
 			} else {
@@ -166,7 +166,7 @@ function is_static_element(node, state) {
 			!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.scope)
+			!is_inlinable_expression(attribute.value)
 		) {
 			return false;
 		}
diff --git a/packages/svelte/src/compiler/phases/nodes.js b/packages/svelte/src/compiler/phases/nodes.js
index ead525aaa149..13a54730eb0c 100644
--- a/packages/svelte/src/compiler/phases/nodes.js
+++ b/packages/svelte/src/compiler/phases/nodes.js
@@ -58,6 +58,7 @@ export function create_expression_metadata() {
 	return {
 		dependencies: new Set(),
 		has_state: false,
-		has_call: false
+		has_call: false,
+		can_inline: true
 	};
 }
diff --git a/packages/svelte/src/compiler/phases/utils.js b/packages/svelte/src/compiler/phases/utils.js
index a0a60f543707..d4e53635c947 100644
--- a/packages/svelte/src/compiler/phases/utils.js
+++ b/packages/svelte/src/compiler/phases/utils.js
@@ -1,68 +1,19 @@
-/** @import { AST, Binding } from '#compiler' */
-/** @import { Scope } from './scope' */
-/** @import * as ESTree from 'estree' */
-
-import { walk } from 'zimmerframe';
-
-/**
- * @param {ESTree.Expression} expr
- */
-export function extract_identifiers(expr) {
-	/** @type {ESTree.Identifier[]} */
-	let nodes = [];
-
-	walk(
-		expr,
-		{},
-		{
-			Identifier(node, { path }) {
-				const parent = path.at(-1);
-				if (parent?.type !== 'MemberExpression' || parent.property !== node || parent.computed) {
-					nodes.push(node);
-				}
-			}
-		}
-	);
-
-	return nodes;
-}
-
-/**
- * Whether a variable can be referenced directly from template string.
- * @param {Binding | undefined} binding
- * @returns {boolean}
- */
-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'
-	);
-}
+/** @import { AST } from '#compiler' */
 
 /**
  * @param {AST.Attribute["value"]} value
- * @param {Scope} scope
  */
-export function is_inlinable_expression(value, scope) {
+export function is_inlinable_expression(value) {
 	if (value === true) return false; // not an expression
 	let nodes = Array.isArray(value) ? value : [value];
 	let has_expression_tag = false;
 	for (let value of nodes) {
 		if (value.type === 'ExpressionTag') {
-			const identifiers = extract_identifiers(value.expression);
-			// if not every identifier is inlinable we bail
-			if (
-				identifiers.length > 0 &&
-				identifiers.some((id) => {
-					const binding = scope.owner(id.name)?.declarations.get(id.name);
-					return !can_inline_variable(binding);
-				})
-			) {
+			if (!value.metadata.expression.can_inline) {
 				return false;
-			} else if (
+			}
+
+			if (
 				// we need to special case null and boolean values because
 				// we want to set them programmatically
 				value.expression.type === 'Literal' &&
@@ -74,6 +25,7 @@ export function is_inlinable_expression(value, scope) {
 			) {
 				return false;
 			}
+
 			has_expression_tag = true;
 		}
 	}
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index 8a45f2d4fd84..bd4749db001c 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -317,6 +317,8 @@ 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';

From 406a530ecce75ffae66fd7080c09dc0a931fea6b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 20:51:01 -0500
Subject: [PATCH 10/42] simplify

---
 .../phases/2-analyze/visitors/Identifier.js   | 30 +++++++++----------
 1 file changed, 14 insertions(+), 16 deletions(-)

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 5dbdc232545b..0e58e3d66991 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -1,5 +1,4 @@
 /** @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';
@@ -7,7 +6,6 @@ import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { is_rune } from '../../../../utils.js';
 import { mark_subtree_dynamic } from './shared/fragment.js';
-import { is_inlinable_expression } from '../../utils.js';
 
 /**
  * @param {Identifier} node
@@ -21,8 +19,6 @@ export function Identifier(node, context) {
 		return;
 	}
 
-	const attribute_parent = context.path.find((parent) => parent.type === 'Attribute');
-
 	// If we are using arguments outside of a function, then throw an error
 	if (
 		node.name === 'arguments' &&
@@ -88,17 +84,17 @@ 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;
+
 	if (binding) {
 		if (context.state.expression) {
 			context.state.expression.dependencies.add(binding);
 			context.state.expression.has_state ||= binding.kind !== 'normal';
-
-			// if the binding is outside module scope, the expression
-			// cannot be inlined (TODO allow inlining in more cases,
-			// e.g. primitive consts)
-			if (!!binding.scope.parent) {
-				context.state.expression.can_inline = false;
-			}
 		}
 
 		if (
@@ -129,10 +125,12 @@ export function Identifier(node, context) {
 		) {
 			w.reactive_declaration_module_script_dependency(node);
 		}
-	} else if (context.state.expression) {
-		// no binding means global, and we can't inline e.g. `<span>{location}</span>`
-		// because it could change between component renders
-		context.state.expression.can_inline = false;
+	}
+
+	if (!can_inline) {
+		if (context.state.expression) {
+			context.state.expression.can_inline = false;
+		}
 	}
 
 	/**
@@ -140,7 +138,7 @@ export function Identifier(node, context) {
 	 * before marking the subtree as dynamic. This is because if it's inlinable it will be inlined in the template
 	 * directly making the whole thing actually static.
 	 */
-	if (!attribute_parent || !is_inlinable_expression(attribute_parent.value)) {
+	if (!can_inline || !context.path.find((node) => node.type === 'Attribute')) {
 		mark_subtree_dynamic(context.path);
 	}
 }

From 0e543dea1eaa46f9f071000b02b4fc47595bef7d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 21:09:31 -0500
Subject: [PATCH 11/42] simplify - no reason these cases should prevent
 inlining

---
 packages/svelte/src/compiler/phases/utils.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/utils.js b/packages/svelte/src/compiler/phases/utils.js
index d4e53635c947..53f3aa16d2ea 100644
--- a/packages/svelte/src/compiler/phases/utils.js
+++ b/packages/svelte/src/compiler/phases/utils.js
@@ -4,9 +4,10 @@
  * @param {AST.Attribute["value"]} value
  */
 export function is_inlinable_expression(value) {
-	if (value === true) return false; // not an expression
+	if (value === true) return true;
+
 	let nodes = Array.isArray(value) ? value : [value];
-	let has_expression_tag = false;
+
 	for (let value of nodes) {
 		if (value.type === 'ExpressionTag') {
 			if (!value.metadata.expression.can_inline) {
@@ -25,9 +26,8 @@ export function is_inlinable_expression(value) {
 			) {
 				return false;
 			}
-
-			has_expression_tag = true;
 		}
 	}
-	return has_expression_tag;
+
+	return true;
 }

From c445309b10a24d3e8e343237ee9d8283d4a46b90 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 22:00:55 -0500
Subject: [PATCH 12/42] return template

---
 .../phases/3-transform/client/visitors/RegularElement.js  | 6 ++----
 .../phases/3-transform/client/visitors/shared/utils.js    | 8 +++++---
 2 files changed, 7 insertions(+), 7 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 097869104e9e..b602f5c74939 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
@@ -364,8 +364,7 @@ export function RegularElement(node, context) {
 		let { value } = build_template_literal(trimmed, context.visit, child_state);
 		// if the expression is inlinable we just push it to the template
 		if (is_inlinable_expression(trimmed)) {
-			escape_template_quasis(value);
-			state.template.push(value);
+			state.template.push(escape_template_quasis(value));
 		} else {
 			// else we programmatically set the value
 			child_state.init.push(
@@ -598,8 +597,7 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		return true;
 	} else {
 		if (inlinable_expression) {
-			escape_template_quasis(value, true);
-			context.state.template.push(` ${name}="`, value, '"');
+			context.state.template.push(` ${name}="`, escape_template_quasis(value, true), '"');
 		} else {
 			state.init.push(update);
 		}
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 916ae0022e4b..ea852151e849 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, Literal } from 'estree' */
+/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, Statement, Super, TemplateLiteral, Node } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
 /** @import { ComponentClientTransformState } from '../../types' */
 import { walk } from 'zimmerframe';
@@ -35,12 +35,12 @@ export function get_states_and_calls(values) {
 
 /**
  * Escape the html in every quasi in the template literal
- * @param {SvelteNode} template
+ * @param {Expression} template
  * @param {boolean} [is_attr]
  */
 export function escape_template_quasis(template, is_attr) {
 	walk(
-		template,
+		/** @type {Node} */ (template),
 		{},
 		{
 			TemplateLiteral(node, { next }) {
@@ -59,6 +59,8 @@ export function escape_template_quasis(template, is_attr) {
 			}
 		}
 	);
+
+	return template;
 }
 
 /**

From 0e35df7385b2f4a9db32192a3b3a7df107881c93 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 22:02:39 -0500
Subject: [PATCH 13/42] name is incorrect

---
 .../phases/3-transform/client/visitors/RegularElement.js    | 6 +++---
 .../phases/3-transform/client/visitors/shared/fragment.js   | 5 ++---
 .../phases/3-transform/client/visitors/shared/utils.js      | 2 +-
 3 files changed, 6 insertions(+), 7 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 b602f5c74939..68ccca26915e 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
@@ -31,7 +31,7 @@ import {
 	build_template_literal,
 	build_update,
 	build_update_assignment,
-	escape_template_quasis,
+	escape_inline_expression,
 	get_states_and_calls
 } from './shared/utils.js';
 
@@ -364,7 +364,7 @@ export function RegularElement(node, context) {
 		let { value } = build_template_literal(trimmed, context.visit, child_state);
 		// if the expression is inlinable we just push it to the template
 		if (is_inlinable_expression(trimmed)) {
-			state.template.push(escape_template_quasis(value));
+			state.template.push(escape_inline_expression(value));
 		} else {
 			// else we programmatically set the value
 			child_state.init.push(
@@ -597,7 +597,7 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		return true;
 	} else {
 		if (inlinable_expression) {
-			context.state.template.push(` ${name}="`, escape_template_quasis(value, true), '"');
+			context.state.template.push(` ${name}="`, escape_inline_expression(value, true), '"');
 		} else {
 			state.init.push(update);
 		}
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 9469387eb303..b327790808e1 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 { 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, escape_template_quasis } from './utils.js';
+import { build_template_literal, build_update, escape_inline_expression } from './utils.js';
 
 /**
  * Processes an array of template nodes, joining sibling text/expression nodes
@@ -85,8 +85,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 		} else {
 			// if the expression is inlinable we just push it to the template
 			if (!is_text && is_inlinable_expression(sequence)) {
-				escape_template_quasis(value);
-				state.template.push(value);
+				state.template.push(escape_inline_expression(value));
 			} else {
 				// else we programmatically set the value
 				state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
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 ea852151e849..98317bb60820 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 {Expression} template
  * @param {boolean} [is_attr]
  */
-export function escape_template_quasis(template, is_attr) {
+export function escape_inline_expression(template, is_attr) {
 	walk(
 		/** @type {Node} */ (template),
 		{},

From ecfcb10631d23fbdd3d14b9e104fd627c9588e3d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 22:03:06 -0500
Subject: [PATCH 14/42] name is incorrect

---
 .../phases/3-transform/client/visitors/shared/utils.js    | 8 ++++----
 1 file changed, 4 insertions(+), 4 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 98317bb60820..567b16cdeb85 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
@@ -35,12 +35,12 @@ export function get_states_and_calls(values) {
 
 /**
  * Escape the html in every quasi in the template literal
- * @param {Expression} template
+ * @param {Expression} node
  * @param {boolean} [is_attr]
  */
-export function escape_inline_expression(template, is_attr) {
+export function escape_inline_expression(node, is_attr) {
 	walk(
-		/** @type {Node} */ (template),
+		/** @type {Node} */ (node),
 		{},
 		{
 			TemplateLiteral(node, { next }) {
@@ -60,7 +60,7 @@ export function escape_inline_expression(template, is_attr) {
 		}
 	);
 
-	return template;
+	return node;
 }
 
 /**

From ee6f03ec7122112a9e7839fb7eefdf232566ff5f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 22:17:12 -0500
Subject: [PATCH 15/42] fix escaping

---
 .../client/visitors/shared/utils.js           | 35 ++++++++-----------
 packages/svelte/src/internal/client/index.js  |  1 +
 .../_expected/client/index.svelte.js          |  4 +--
 .../_expected/server/index.svelte.js          |  2 +-
 4 files changed, 19 insertions(+), 23 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 567b16cdeb85..5a75131a0e81 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
@@ -37,30 +37,25 @@ export function get_states_and_calls(values) {
  * Escape the html in every quasi in the template literal
  * @param {Expression} node
  * @param {boolean} [is_attr]
+ * @returns {Expression}
  */
 export function escape_inline_expression(node, is_attr) {
-	walk(
-		/** @type {Node} */ (node),
-		{},
-		{
-			TemplateLiteral(node, { next }) {
-				for (let quasi of node.quasis) {
-					quasi.value.raw = escape_html(quasi.value.raw, is_attr);
-				}
-				next();
-			},
-			Literal(node, { next }) {
-				if (node.raw != null) {
-					node.raw = escape_html(node.raw, is_attr);
-				} else {
-					node.value = escape_html(node.value, is_attr);
-				}
-				next();
-			}
+	if (node.type === 'Literal') {
+		if (typeof node.value === 'string') {
+			return b.literal(escape_html(node.value, is_attr));
 		}
-	);
 
-	return node;
+		return node;
+	}
+
+	if (node.type === 'TemplateLiteral') {
+		return b.template(
+			node.quasis.map((q) => b.quasi(escape_html(q.value.cooked, is_attr))),
+			node.expressions.map((expression) => escape_inline_expression(expression, is_attr))
+		);
+	}
+
+	return b.call('$.escape', node, is_attr && b.true);
 }
 
 /**
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index c401867a0f0b..7a6e3010dd27 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -1,4 +1,5 @@
 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';
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 14901462b2f1..59525c2551b2 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
@@ -7,11 +7,11 @@ const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7
 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 ?? ""} = ${a + b ?? ""}`}</p>`, 1);
+var root = $.template(`<picture><source srcset="${$.escape(__DECLARED_ASSET_0__, true)}" type="image/avif"> <source srcset="${$.escape(__DECLARED_ASSET_1__, true)}" type="image/webp"> <source srcset="${$.escape(__DECLARED_ASSET_2__, true)}" type="image/png"> <img src="${$.escape(__DECLARED_ASSET_3__, true)}" alt="production test" width="${1440}" height="${1440}"></picture> <p>${`${$.escape(a ?? "")} + ${$.escape(b ?? "")} = ${$.escape(a + b ?? "")}`}</p>`, 1);
 
 export default function Inline_module_vars($$anchor) {
 	var fragment = root();
 	var p = $.sibling($.first_child(fragment), 2);
 
 	$.append($$anchor, fragment);
-}
+}
\ 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 83d5bb495e82..ca98cd952b72 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
@@ -9,4 +9,4 @@ 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>`;
-}
+}
\ No newline at end of file

From 76e3e8e25d922b4dfdde7359e5164682f02e543c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 22:18:16 -0500
Subject: [PATCH 16/42] no longer necessary

---
 packages/svelte/src/compiler/phases/utils.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/utils.js b/packages/svelte/src/compiler/phases/utils.js
index 53f3aa16d2ea..42f891eccbb0 100644
--- a/packages/svelte/src/compiler/phases/utils.js
+++ b/packages/svelte/src/compiler/phases/utils.js
@@ -18,11 +18,7 @@ export function is_inlinable_expression(value) {
 				// we need to special case null and boolean values because
 				// we want to set them programmatically
 				value.expression.type === 'Literal' &&
-				(value.expression.value === null ||
-					typeof value.expression.value === 'boolean' ||
-					// we also want to special case the case of a literal with quotes
-					// because it could mess with the template
-					(typeof value.expression.value === 'string' && value.expression.value.includes('"')))
+				(value.expression.value === null || typeof value.expression.value === 'boolean')
 			) {
 				return false;
 			}

From 61ec0334b86ac11e57dc8888615efa97f9101b22 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 22:20:20 -0500
Subject: [PATCH 17/42] remove obsolete description

---
 .../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 5a75131a0e81..db56f9b514cb 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
@@ -34,7 +34,6 @@ export function get_states_and_calls(values) {
 }
 
 /**
- * Escape the html in every quasi in the template literal
  * @param {Expression} node
  * @param {boolean} [is_attr]
  * @returns {Expression}

From 3e64dc50006687341ca69472e1de74e689cb6993 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 22:27:43 -0500
Subject: [PATCH 18/42] better concatenation

---
 .../3-transform/client/visitors/Fragment.js   | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

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 d0b6d0996e5a..8f7b9dc12043 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' */
@@ -214,12 +214,32 @@ 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 {
+			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);
 		}
 	}
 

From 8987391cdc2489bb8fe9918d93d1d78f0e4325d7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 22:34:40 -0500
Subject: [PATCH 19/42] fix test

---
 .../samples/inline-module-vars/_expected/client/index.svelte.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 59525c2551b2..96e8b181558b 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
@@ -7,7 +7,7 @@ const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7
 const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
 const a = 1;
 const b = 2;
-var root = $.template(`<picture><source srcset="${$.escape(__DECLARED_ASSET_0__, true)}" type="image/avif"> <source srcset="${$.escape(__DECLARED_ASSET_1__, true)}" type="image/webp"> <source srcset="${$.escape(__DECLARED_ASSET_2__, true)}" type="image/png"> <img src="${$.escape(__DECLARED_ASSET_3__, true)}" alt="production test" width="${1440}" height="${1440}"></picture> <p>${`${$.escape(a ?? "")} + ${$.escape(b ?? "")} = ${$.escape(a + b ?? "")}`}</p>`, 1);
+var root = $.template(`<picture><source srcset="${$.escape(__DECLARED_ASSET_0__, true)}" type="image/avif"> <source srcset="${$.escape(__DECLARED_ASSET_1__, true)}" type="image/webp"> <source srcset="${$.escape(__DECLARED_ASSET_2__, true)}" type="image/png"> <img src="${$.escape(__DECLARED_ASSET_3__, true)}" alt="production test" width="${1440}" height="${1440}"></picture> <p>${$.escape(a ?? "")} + ${$.escape(b ?? "")} = ${$.escape(a + b ?? "")}</p>`, 1);
 
 export default function Inline_module_vars($$anchor) {
 	var fragment = root();

From 2e13a2b51b61c30065f46e0b339e10b55c15ef20 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 22:51:55 -0500
Subject: [PATCH 20/42] do the work at runtime

---
 .../3-transform/client/visitors/Fragment.js   |  4 +--
 .../client/visitors/RegularElement.js         | 15 ++++----
 .../client/visitors/shared/fragment.js        |  6 ++--
 packages/svelte/src/compiler/phases/utils.js  | 35 ++++++++++---------
 packages/svelte/src/internal/client/index.js  |  1 +
 packages/svelte/src/internal/server/index.js  | 30 ++--------------
 .../svelte/src/internal/shared/attributes.js  | 28 +++++++++++++++
 .../main.svelte                               |  2 +-
 .../_expected/client/index.svelte.js          |  2 +-
 9 files changed, 65 insertions(+), 58 deletions(-)
 create mode 100644 packages/svelte/src/internal/shared/attributes.js

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 8f7b9dc12043..c12c4ecbc43e 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
@@ -6,7 +6,7 @@ import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../../../cons
 import { dev } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { sanitize_template_string } from '../../../../utils/sanitize_template_string.js';
-import { is_inlinable_expression } from '../../../utils.js';
+import { is_inlinable_sequence } from '../../../utils.js';
 import { clean_nodes, infer_namespace } from '../../utils.js';
 import { process_children } from './shared/fragment.js';
 import { build_render_statement } from './shared/utils.js';
@@ -144,7 +144,7 @@ export function Fragment(node, context) {
 		const use_space_template =
 			trimmed.some((node) => node.type === 'ExpressionTag') &&
 			trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
-			!is_inlinable_expression(trimmed);
+			!is_inlinable_sequence(trimmed);
 
 		if (use_space_template) {
 			// special case — we can use `$.text` instead of creating a unique template
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 68ccca26915e..cc129c15f513 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
@@ -14,7 +14,7 @@ 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 { is_inlinable_expression } from '../../../utils.js';
+import { is_inlinable_attribute, is_inlinable_sequence } from '../../../utils.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
 import { build_getter, create_derived } from '../utils.js';
 import {
@@ -363,7 +363,7 @@ export function RegularElement(node, context) {
 	if (states_and_calls && states_and_calls.states === 0) {
 		let { value } = build_template_literal(trimmed, context.visit, child_state);
 		// if the expression is inlinable we just push it to the template
-		if (is_inlinable_expression(trimmed)) {
+		if (is_inlinable_sequence(trimmed)) {
 			state.template.push(escape_inline_expression(value));
 		} else {
 			// else we programmatically set the value
@@ -380,7 +380,7 @@ export function RegularElement(node, context) {
 		let needs_reset =
 			trimmed.some((node) => node.type !== 'Text') &&
 			(!trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') ||
-				!is_inlinable_expression(trimmed));
+				!is_inlinable_sequence(trimmed));
 
 		// The same applies if it's a `<template>` element, since we need to
 		// set the value of `hydrate_node` to `node.content`
@@ -585,9 +585,7 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 
 	// we need to special case textarea value because it's not an actual attribute
 	const inlinable_expression =
-		is_inlinable_expression(attribute.value) &&
-		attribute.name !== 'value' &&
-		element.name !== 'textarea';
+		is_inlinable_attribute(attribute) && attribute.name !== 'value' && element.name !== 'textarea';
 	if (attribute.metadata.expression.has_state) {
 		if (has_call) {
 			state.init.push(build_update(update));
@@ -597,7 +595,10 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		return true;
 	} else {
 		if (inlinable_expression) {
-			context.state.template.push(` ${name}="`, escape_inline_expression(value, true), '"');
+			// TODO would be great if we could avoid `$.attr` when we know the value
+			context.state.template.push(
+				b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
+			);
 		} else {
 			state.init.push(update);
 		}
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 b327790808e1..c25bc717bfa4 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
@@ -3,7 +3,7 @@
 /** @import { ComponentContext } from '../../types' */
 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 { is_inlinable_attribute, is_inlinable_sequence } from '../../../../utils.js';
 import { build_template_literal, build_update, escape_inline_expression } from './utils.js';
 
 /**
@@ -84,7 +84,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 			state.update.push(update);
 		} else {
 			// if the expression is inlinable we just push it to the template
-			if (!is_text && is_inlinable_expression(sequence)) {
+			if (!is_text && is_inlinable_sequence(sequence)) {
 				state.template.push(escape_inline_expression(value));
 			} else {
 				// else we programmatically set the value
@@ -165,7 +165,7 @@ function is_static_element(node, state) {
 			!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)
+			!is_inlinable_attribute(attribute)
 		) {
 			return false;
 		}
diff --git a/packages/svelte/src/compiler/phases/utils.js b/packages/svelte/src/compiler/phases/utils.js
index 42f891eccbb0..ea1c2ff27d44 100644
--- a/packages/svelte/src/compiler/phases/utils.js
+++ b/packages/svelte/src/compiler/phases/utils.js
@@ -1,27 +1,28 @@
 /** @import { AST } from '#compiler' */
 
+import { is_boolean_attribute } from '../../utils.js';
+
 /**
- * @param {AST.Attribute["value"]} value
+ * @param {AST.Attribute} attribute
  */
-export function is_inlinable_expression(value) {
-	if (value === true) return true;
+export function is_inlinable_attribute(attribute) {
+	if (attribute.value === true) return false;
+	if (is_boolean_attribute(attribute.name.toLowerCase())) return false;
 
-	let nodes = Array.isArray(value) ? value : [value];
+	if (Array.isArray(attribute.value)) {
+		return is_inlinable_sequence(attribute.value);
+	}
 
-	for (let value of nodes) {
-		if (value.type === 'ExpressionTag') {
-			if (!value.metadata.expression.can_inline) {
-				return false;
-			}
+	return attribute.value.metadata.expression.can_inline;
+}
 
-			if (
-				// we need to special case null and boolean values because
-				// we want to set them programmatically
-				value.expression.type === 'Literal' &&
-				(value.expression.value === null || typeof value.expression.value === 'boolean')
-			) {
-				return false;
-			}
+/**
+ * @param {Array<AST.Text | AST.ExpressionTag>} nodes
+ */
+export function is_inlinable_sequence(nodes) {
+	for (let value of nodes) {
+		if (value.type === 'ExpressionTag' && !value.metadata.expression.can_inline) {
+			return false;
 		}
 	}
 
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 7a6e3010dd27..bfc0a6aac93d 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -156,6 +156,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/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}`;
+}
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
index 96e8b181558b..6a87004845d0 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
@@ -7,7 +7,7 @@ const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7
 const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
 const a = 1;
 const b = 2;
-var root = $.template(`<picture><source srcset="${$.escape(__DECLARED_ASSET_0__, true)}" type="image/avif"> <source srcset="${$.escape(__DECLARED_ASSET_1__, true)}" type="image/webp"> <source srcset="${$.escape(__DECLARED_ASSET_2__, true)}" type="image/png"> <img src="${$.escape(__DECLARED_ASSET_3__, true)}" alt="production test" width="${1440}" height="${1440}"></picture> <p>${$.escape(a ?? "")} + ${$.escape(b ?? "")} = ${$.escape(a + b ?? "")}</p>`, 1);
+var root = $.template(`<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>`, 1);
 
 export default function Inline_module_vars($$anchor) {
 	var fragment = root();

From cff8b1c667092e94605a0cc8a772b199c43b7ace Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 23:00:06 -0500
Subject: [PATCH 21/42] fix another thing

---
 .../client/visitors/RegularElement.js         | 27 ++++++++++---------
 1 file changed, 15 insertions(+), 12 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 cc129c15f513..6cb1de1c0cdc 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
@@ -583,9 +583,6 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		);
 	}
 
-	// we need to special case textarea value because it's not an actual attribute
-	const inlinable_expression =
-		is_inlinable_attribute(attribute) && attribute.name !== 'value' && element.name !== 'textarea';
 	if (attribute.metadata.expression.has_state) {
 		if (has_call) {
 			state.init.push(build_update(update));
@@ -593,17 +590,23 @@ 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') &&
+		is_inlinable_attribute(attribute);
+
+	if (can_inline) {
+		// TODO would be great if we could avoid `$.attr` when we know the value
+		context.state.template.push(
+			b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
+		);
 	} else {
-		if (inlinable_expression) {
-			// TODO would be great if we could avoid `$.attr` when we know the value
-			context.state.template.push(
-				b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
-			);
-		} else {
-			state.init.push(update);
-		}
-		return false;
+		state.init.push(update);
 	}
+
+	return false;
 }
 
 /**

From 2ee6cd3ffad16de635352307d49de90dc15689d8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 23:00:34 -0500
Subject: [PATCH 22/42] tidy

---
 .../src/compiler/phases/2-analyze/visitors/Identifier.js    | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

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 0e58e3d66991..63decbb1f822 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -127,10 +127,8 @@ export function Identifier(node, context) {
 		}
 	}
 
-	if (!can_inline) {
-		if (context.state.expression) {
-			context.state.expression.can_inline = false;
-		}
+	if (!can_inline && context.state.expression) {
+		context.state.expression.can_inline = false;
 	}
 
 	/**

From b296137dfd38bd8883733247cb89c3ce595b2010 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 23:02:37 -0500
Subject: [PATCH 23/42] tidy up

---
 .../phases/3-transform/client/visitors/shared/fragment.js      | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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 c25bc717bfa4..dbe5d110daa0 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
@@ -131,9 +131,8 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 
 /**
  * @param {SvelteNode} node
- * @param {ComponentContext["state"]} state
  */
-function is_static_element(node, state) {
+function is_static_element(node) {
 	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

From fc911394a39283352409ffb2cbb91ec365637401 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 23:06:18 -0500
Subject: [PATCH 24/42] simplify

---
 .../3-transform/client/visitors/shared/fragment.js     | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

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 dbe5d110daa0..9a3db989abbf 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
@@ -104,7 +104,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 
 			let child_state = state;
 
-			if (is_static_element(node, state)) {
+			if (is_static_element(node)) {
 				skipped += 1;
 			} else if (node.type === 'EachBlock' && nodes.length === 1 && is_element) {
 				node.metadata.is_controlled = true;
@@ -159,13 +159,7 @@ function is_static_element(node) {
 			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_attribute(attribute)
-		) {
+		if (!is_inlinable_attribute(attribute)) {
 			return false;
 		}
 	}

From 1a720ada7974c2976373a22bf4d24aea6ea3dc75 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 23:09:15 -0500
Subject: [PATCH 25/42] simplify

---
 .../compiler/phases/3-transform/client/visitors/Fragment.js   | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

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 c12c4ecbc43e..8c1a13acca35 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
@@ -6,7 +6,6 @@ import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../../../cons
 import { dev } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { sanitize_template_string } from '../../../../utils/sanitize_template_string.js';
-import { is_inlinable_sequence } from '../../../utils.js';
 import { clean_nodes, infer_namespace } from '../../utils.js';
 import { process_children } from './shared/fragment.js';
 import { build_render_statement } from './shared/utils.js';
@@ -142,9 +141,8 @@ export function Fragment(node, context) {
 		const id = b.id(context.state.scope.generate('fragment'));
 
 		const use_space_template =
-			trimmed.some((node) => node.type === 'ExpressionTag') &&
 			trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
-			!is_inlinable_sequence(trimmed);
+			trimmed.some((node) => node.type === 'ExpressionTag' && !node.metadata.expression.can_inline);
 
 		if (use_space_template) {
 			// special case — we can use `$.text` instead of creating a unique template

From eaa2df552294615332573ce7178037bc5d3b4a19 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 23:24:14 -0500
Subject: [PATCH 26/42] fix

---
 .../phases/2-analyze/visitors/Identifier.js   |  2 +-
 .../client/visitors/shared/fragment.js        | 20 ++++++++++---------
 2 files changed, 12 insertions(+), 10 deletions(-)

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 63decbb1f822..303165e6e5fd 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -89,7 +89,7 @@ export function Identifier(node, context) {
 	// 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;
+	let can_inline = !!binding && !binding.scope.parent && binding.kind === 'normal';
 
 	if (binding) {
 		if (context.state.expression) {
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 9a3db989abbf..a54a58cfa92f 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
@@ -61,16 +61,24 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 	 * @param {Sequence} sequence
 	 */
 	function flush_sequence(sequence) {
+		// TODO this should be folded into the `is_inlinable_sequence` block below,
+		// but it currently causes a test to fail
 		if (sequence.every((node) => node.type === 'Text')) {
 			skipped += 1;
 			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 (is_inlinable_sequence(sequence)) {
+			skipped += 1;
+			state.template.push(escape_inline_expression(value));
+			return;
+		}
+
+		state.template.push(' ');
+
 		// 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;
@@ -83,13 +91,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 		} else if (has_state && !within_bound_contenteditable) {
 			state.update.push(update);
 		} else {
-			// if the expression is inlinable we just push it to the template
-			if (!is_text && is_inlinable_sequence(sequence)) {
-				state.template.push(escape_inline_expression(value));
-			} else {
-				// else we programmatically set the value
-				state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
-			}
+			state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
 		}
 	}
 

From 6f77bd23bcd761dd789f917f0173417331039a03 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 23:29:20 -0500
Subject: [PATCH 27/42] note to self

---
 .../phases/3-transform/client/visitors/shared/fragment.js       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 a54a58cfa92f..e1a2dd3ceb40 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
@@ -62,7 +62,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 	 */
 	function flush_sequence(sequence) {
 		// TODO this should be folded into the `is_inlinable_sequence` block below,
-		// but it currently causes a test to fail
+		// but it currently causes the script-style-non-top-level test to fail
 		if (sequence.every((node) => node.type === 'Text')) {
 			skipped += 1;
 			state.template.push(sequence.map((node) => node.raw).join(''));

From ce63d3960534c842f364143090dbe9d320065d38 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 13 Nov 2024 23:35:27 -0500
Subject: [PATCH 28/42] another

---
 .../phases/3-transform/client/visitors/RegularElement.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 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 6cb1de1c0cdc..3c3bcd7a95cb 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
@@ -377,10 +377,11 @@ export function RegularElement(node, context) {
 
 		// 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.some((node) => node.type !== 'Text') &&
-			(!trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') ||
-				!is_inlinable_sequence(trimmed));
+		let needs_reset = !trimmed.every(
+			(node) =>
+				node.type === 'Text' ||
+				(node.type === 'ExpressionTag' && node.metadata.expression.can_inline)
+		);
 
 		// The same applies if it's a `<template>` element, since we need to
 		// set the value of `hydrate_node` to `node.content`

From 7f0ca119dabb7bbf790dceb33dbfdec3aff7220a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 14 Nov 2024 09:07:58 -0500
Subject: [PATCH 29/42] simplify

---
 .../3-transform/client/visitors/RegularElement.js |  7 ++++---
 .../client/visitors/shared/fragment.js            | 14 +++++++++-----
 .../3-transform/client/visitors/shared/utils.js   | 11 ++++++++---
 packages/svelte/src/compiler/phases/utils.js      | 15 ++-------------
 4 files changed, 23 insertions(+), 24 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 3c3bcd7a95cb..f5b6757499b6 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
@@ -14,7 +14,7 @@ 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 { is_inlinable_attribute, is_inlinable_sequence } from '../../../utils.js';
+import { is_inlinable_attribute } from '../../../utils.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
 import { build_getter, create_derived } from '../utils.js';
 import {
@@ -361,9 +361,10 @@ export function RegularElement(node, context) {
 		get_states_and_calls(trimmed);
 
 	if (states_and_calls && states_and_calls.states === 0) {
-		let { value } = build_template_literal(trimmed, context.visit, child_state);
+		let { value, can_inline } = build_template_literal(trimmed, context.visit, child_state);
+
 		// if the expression is inlinable we just push it to the template
-		if (is_inlinable_sequence(trimmed)) {
+		if (can_inline) {
 			state.template.push(escape_inline_expression(value));
 		} else {
 			// else we programmatically set the value
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 e1a2dd3ceb40..04c550417229 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,9 +1,9 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
-import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
+import { is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { is_inlinable_attribute, is_inlinable_sequence } from '../../../../utils.js';
+import { is_inlinable_attribute } from '../../../../utils.js';
 import { build_template_literal, build_update, escape_inline_expression } from './utils.js';
 
 /**
@@ -61,7 +61,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 	 * @param {Sequence} sequence
 	 */
 	function flush_sequence(sequence) {
-		// TODO this should be folded into the `is_inlinable_sequence` block below,
+		// TODO this should be folded into the `if (can_inline)` block below,
 		// but it currently causes the script-style-non-top-level test to fail
 		if (sequence.every((node) => node.type === 'Text')) {
 			skipped += 1;
@@ -69,9 +69,13 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 			return;
 		}
 
-		const { has_state, has_call, value } = build_template_literal(sequence, visit, state);
+		const { has_state, has_call, value, can_inline } = build_template_literal(
+			sequence,
+			visit,
+			state
+		);
 
-		if (is_inlinable_sequence(sequence)) {
+		if (can_inline) {
 			skipped += 1;
 			state.template.push(escape_inline_expression(value));
 			return;
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 db56f9b514cb..18c498bcd410 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
@@ -61,7 +61,7 @@ export function escape_inline_expression(node, is_attr) {
  * @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 }}
+ * @returns {{ value: Expression, has_state: boolean, has_call: boolean, can_inline: boolean }}
  */
 export function build_template_literal(values, visit, state) {
 	/** @type {Expression[]} */
@@ -75,6 +75,7 @@ export function build_template_literal(values, visit, state) {
 	let has_call = calls > 0;
 	let has_state = states > 0;
 	let contains_multiple_call_expression = calls > 1;
+	let can_inline = true;
 
 	for (let i = 0; i < values.length; i++) {
 		const node = values[i];
@@ -86,6 +87,10 @@ export function build_template_literal(values, visit, state) {
 				quasi.value.cooked += node.expression.value + '';
 			}
 		} else {
+			if (!node.metadata.expression.can_inline) {
+				can_inline = false;
+			}
+
 			if (contains_multiple_call_expression) {
 				const id = b.id(state.scope.generate('stringified_text'));
 				state.init.push(
@@ -107,7 +112,7 @@ export function build_template_literal(values, visit, state) {
 			} 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 };
+				return { value: visit(node.expression, state), has_state, has_call, can_inline };
 			} else {
 				expressions.push(b.logical('??', visit(node.expression, state), b.literal('')));
 			}
@@ -123,7 +128,7 @@ export function build_template_literal(values, visit, state) {
 
 	const value = b.template(quasis, expressions);
 
-	return { value, has_state, has_call };
+	return { value, has_state, has_call, can_inline };
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/utils.js b/packages/svelte/src/compiler/phases/utils.js
index ea1c2ff27d44..5a51e1383664 100644
--- a/packages/svelte/src/compiler/phases/utils.js
+++ b/packages/svelte/src/compiler/phases/utils.js
@@ -9,19 +9,8 @@ export function is_inlinable_attribute(attribute) {
 	if (attribute.value === true) return false;
 	if (is_boolean_attribute(attribute.name.toLowerCase())) return false;
 
-	if (Array.isArray(attribute.value)) {
-		return is_inlinable_sequence(attribute.value);
-	}
-
-	return attribute.value.metadata.expression.can_inline;
-}
-
-/**
- * @param {Array<AST.Text | AST.ExpressionTag>} nodes
- */
-export function is_inlinable_sequence(nodes) {
-	for (let value of nodes) {
-		if (value.type === 'ExpressionTag' && !value.metadata.expression.can_inline) {
+	for (const node of Array.isArray(attribute.value) ? attribute.value : [attribute.value]) {
+		if (node.type === 'ExpressionTag' && !node.metadata.expression.can_inline) {
 			return false;
 		}
 	}

From 839e7e31a120d520c020609eb7599f7327e89abe Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 14 Nov 2024 09:21:09 -0500
Subject: [PATCH 30/42] more accurate name

---
 .../phases/3-transform/client/visitors/RegularElement.js  | 4 ++--
 .../phases/3-transform/client/visitors/TitleElement.js    | 4 ++--
 .../phases/3-transform/client/visitors/shared/element.js  | 4 ++--
 .../phases/3-transform/client/visitors/shared/fragment.js | 8 ++------
 .../phases/3-transform/client/visitors/shared/utils.js    | 2 +-
 5 files changed, 9 insertions(+), 13 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 f5b6757499b6..1597ce0a1727 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
@@ -28,7 +28,7 @@ import { visit_event_attribute } from './shared/events.js';
 import { process_children } from './shared/fragment.js';
 import {
 	build_render_statement,
-	build_template_literal,
+	build_template_chunk,
 	build_update,
 	build_update_assignment,
 	escape_inline_expression,
@@ -361,7 +361,7 @@ export function RegularElement(node, context) {
 		get_states_and_calls(trimmed);
 
 	if (states_and_calls && states_and_calls.states === 0) {
-		let { value, can_inline } = build_template_literal(trimmed, context.visit, child_state);
+		let { value, can_inline } = build_template_chunk(trimmed, context.visit, child_state);
 
 		// if the expression is inlinable we just push it to the template
 		if (can_inline) {
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 04c550417229..1c45c3ef1d44 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 { is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { is_inlinable_attribute } from '../../../../utils.js';
-import { build_template_literal, build_update, escape_inline_expression } from './utils.js';
+import { build_template_chunk, build_update, escape_inline_expression } from './utils.js';
 
 /**
  * Processes an array of template nodes, joining sibling text/expression nodes
@@ -69,11 +69,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 			return;
 		}
 
-		const { has_state, has_call, value, can_inline } = build_template_literal(
-			sequence,
-			visit,
-			state
-		);
+		const { has_state, has_call, value, can_inline } = build_template_chunk(sequence, visit, state);
 
 		if (can_inline) {
 			skipped += 1;
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 18c498bcd410..245e98a38ddc 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
@@ -63,7 +63,7 @@ export function escape_inline_expression(node, is_attr) {
  * @param {ComponentClientTransformState} state
  * @returns {{ value: Expression, has_state: boolean, has_call: boolean, can_inline: boolean }}
  */
-export function build_template_literal(values, visit, state) {
+export function build_template_chunk(values, visit, state) {
 	/** @type {Expression[]} */
 	const expressions = [];
 

From ca3d6a6d746aa63e84bc3443a733129f4057afb3 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 14 Nov 2024 09:37:34 -0500
Subject: [PATCH 31/42] simplify

---
 .../phases/3-transform/client/visitors/RegularElement.js | 9 ++++-----
 .../3-transform/client/visitors/shared/fragment.js       | 8 --------
 2 files changed, 4 insertions(+), 13 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 1597ce0a1727..7895db8ca609 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
@@ -355,17 +355,16 @@ 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 =
-		trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
-		trimmed.some((node) => node.type === 'ExpressionTag') &&
-		get_states_and_calls(trimmed);
+	const is_text = trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag');
+	const states_and_calls = is_text && get_states_and_calls(trimmed);
 
 	if (states_and_calls && states_and_calls.states === 0) {
 		let { value, can_inline } = build_template_chunk(trimmed, context.visit, child_state);
 
 		// if the expression is inlinable we just push it to the template
 		if (can_inline) {
-			state.template.push(escape_inline_expression(value));
+			const raw = node.name === 'script' || node.name === 'style';
+			state.template.push(raw ? value : escape_inline_expression(value));
 		} else {
 			// else we programmatically set the value
 			child_state.init.push(
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 1c45c3ef1d44..53d9ba9d9f30 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
@@ -61,14 +61,6 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 	 * @param {Sequence} sequence
 	 */
 	function flush_sequence(sequence) {
-		// TODO this should be folded into the `if (can_inline)` block below,
-		// but it currently causes the script-style-non-top-level test to fail
-		if (sequence.every((node) => node.type === 'Text')) {
-			skipped += 1;
-			state.template.push(sequence.map((node) => node.raw).join(''));
-			return;
-		}
-
 		const { has_state, has_call, value, can_inline } = build_template_chunk(sequence, visit, state);
 
 		if (can_inline) {

From c5e35481b5b29c57b4a6e355f9e879a0158f449f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 14 Nov 2024 11:20:58 -0500
Subject: [PATCH 32/42] simplify

---
 .../3-transform/client/visitors/Fragment.js   |  6 ++---
 .../client/visitors/RegularElement.js         | 24 ++++++++-----------
 .../client/visitors/shared/fragment.js        |  9 +++----
 3 files changed, 18 insertions(+), 21 deletions(-)

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 8c1a13acca35..0e8852fe8e39 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
@@ -148,7 +148,7 @@ export function Fragment(node, context) {
 			// 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, false, {
+			process_children(trimmed, () => id, null, {
 				...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'), false, { ...context, state });
+				process_children(trimmed, () => b.id('$$anchor'), null, { ...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, false, { ...context, state });
+				process_children(trimmed, expression, null, { ...context, state });
 
 				let flags = TEMPLATE_FRAGMENT;
 
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 7895db8ca609..2536743a687d 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
@@ -356,21 +356,17 @@ 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');
-	const states_and_calls = is_text && get_states_and_calls(trimmed);
+	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 (states_and_calls && states_and_calls.states === 0) {
-		let { value, can_inline } = build_template_chunk(trimmed, context.visit, child_state);
+	if (use_text_content) {
+		let { value } = build_template_chunk(trimmed, context.visit, child_state);
 
-		// if the expression is inlinable we just push it to the template
-		if (can_inline) {
-			const raw = node.name === 'script' || node.name === 'style';
-			state.template.push(raw ? value : escape_inline_expression(value));
-		} else {
-			// else we programmatically set the value
-			child_state.init.push(
-				b.stmt(b.assignment('=', b.member(context.state.node, 'textContent'), value))
-			);
-		}
+		child_state.init.push(
+			b.stmt(b.assignment('=', b.member(context.state.node, 'textContent'), value))
+		);
 	} else {
 		/** @type {Expression} */
 		let arg = context.state.node;
@@ -391,7 +387,7 @@ export function RegularElement(node, context) {
 			arg = b.member(arg, 'content');
 		}
 
-		process_children(trimmed, (is_text) => b.call('$.child', arg, is_text && b.true), true, {
+		process_children(trimmed, (is_text) => b.call('$.child', arg, is_text && b.true), node, {
 			...context,
 			state: child_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 53d9ba9d9f30..81a9b7604440 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
@@ -12,10 +12,10 @@ import { build_template_chunk, build_update, escape_inline_expression } from './
  * corresponding template node references these updates are applied to.
  * @param {SvelteNode[]} nodes
  * @param {(is_text: boolean) => Expression} initial
- * @param {boolean} is_element
+ * @param {AST.RegularElement | null} element
  * @param {ComponentContext} context
  */
-export function process_children(nodes, initial, is_element, { visit, state }) {
+export function process_children(nodes, initial, element, { visit, state }) {
 	const within_bound_contenteditable = state.metadata.bound_contenteditable;
 	let prev = initial;
 	let skipped = 0;
@@ -65,7 +65,8 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 
 		if (can_inline) {
 			skipped += 1;
-			state.template.push(escape_inline_expression(value));
+			const raw = element?.name === 'script' || element?.name === 'style';
+			state.template.push(raw ? value : escape_inline_expression(value));
 			return;
 		}
 
@@ -100,7 +101,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 
 			if (is_static_element(node)) {
 				skipped += 1;
-			} else if (node.type === 'EachBlock' && nodes.length === 1 && is_element) {
+			} else if (node.type === 'EachBlock' && nodes.length === 1 && element) {
 				node.metadata.is_controlled = true;
 			} else {
 				const id = flush_node(false, node.type === 'RegularElement' ? node.name : 'node');

From 785f60db9736e4bd525d1704555f0cdcbe3dd7db Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 14 Nov 2024 11:21:55 -0500
Subject: [PATCH 33/42] explain what is happening

---
 .../phases/3-transform/client/visitors/RegularElement.js       | 3 +++
 1 file changed, 3 insertions(+)

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 2536743a687d..780e9e8d3193 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
@@ -356,6 +356,9 @@ 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) &&

From 6f1d6be37f7653ae2fc37704231ebbd81eddbe63 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 14 Nov 2024 11:30:05 -0500
Subject: [PATCH 34/42] tidy up

---
 .../phases/3-transform/client/visitors/RegularElement.js      | 4 +---
 1 file changed, 1 insertion(+), 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 780e9e8d3193..4a1f0a0b730e 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
@@ -30,9 +30,7 @@ import {
 	build_render_statement,
 	build_template_chunk,
 	build_update,
-	build_update_assignment,
-	escape_inline_expression,
-	get_states_and_calls
+	build_update_assignment
 } from './shared/utils.js';
 
 /**

From 3acb74ff3b466d48492adeefade2b58377c2239c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 14 Nov 2024 11:38:12 -0500
Subject: [PATCH 35/42] simplify

---
 .../client/visitors/shared/utils.js           | 104 ++++++++----------
 1 file changed, 43 insertions(+), 61 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 245e98a38ddc..716bc4686f5f 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
@@ -11,28 +11,6 @@ import is_reference from 'is-reference';
 import { locator } from '../../../../../state.js';
 import { escape_html } from '../../../../../../escaping.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 {Expression} node
  * @param {boolean} [is_attr]
@@ -70,55 +48,59 @@ 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 = calls > 0;
-	let has_state = states > 0;
-	let contains_multiple_call_expression = calls > 1;
+	let has_call = false;
+	let has_state = false;
 	let can_inline = true;
+	let contains_multiple_call_expression = false;
 
-	for (let i = 0; i < values.length; i++) {
-		const node = values[i];
+	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.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 + '';
+			if (node.metadata.expression.has_state) {
+				has_state = true;
 			}
-		} else {
+
 			if (!node.metadata.expression.can_inline) {
 				can_inline = false;
 			}
+		}
+	}
 
-			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, can_inline };
+	for (let i = 0; i < values.length; i++) {
+		const node = values[i];
+
+		if (node.type === 'Text') {
+			quasi.value.cooked += node.data;
+		} else {
+			if (node.expression.type === 'Literal') {
+				if (node.expression.value != null) {
+					quasi.value.cooked += node.expression.value + '';
+				}
 			} else {
-				expressions.push(b.logical('??', visit(node.expression, state), b.literal('')));
-			}
+				if (contains_multiple_call_expression) {
+					const id = b.id(state.scope.generate('stringified_text'));
+					const expression = /** @type {Expression} */ (visit(node.expression, state));
+
+					state.init.push(
+						b.const(id, create_derived(state, b.thunk(b.logical('??', expression, 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, can_inline };
+				} else {
+					expressions.push(b.logical('??', visit(node.expression, state), b.literal('')));
+				}
 
-			quasi = b.quasi('', i + 1 === values.length);
-			quasis.push(quasi);
+				quasi = b.quasi('', i + 1 === values.length);
+				quasis.push(quasi);
+			}
 		}
 	}
 

From 4b8c249dcd118bdfc7383a4682b247627d88d7d9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 14 Nov 2024 11:59:13 -0500
Subject: [PATCH 36/42] better inlining

---
 .../3-transform/client/visitors/Fragment.js   |  2 ++
 .../client/visitors/RegularElement.js         | 31 ++++++++++++++++---
 2 files changed, 28 insertions(+), 5 deletions(-)

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 0e8852fe8e39..111516ce0ae0 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
@@ -227,6 +227,8 @@ function join_template(items) {
 
 			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('')));
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 4a1f0a0b730e..808a087b6354 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,4 +1,4 @@
-/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, ObjectExpression, Statement } from 'estree' */
+/** @import { Expression, ExpressionStatement, Identifier, Literal, MemberExpression, ObjectExpression, Statement } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { SourceLocation } from '#shared' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
@@ -596,10 +596,31 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 		is_inlinable_attribute(attribute);
 
 	if (can_inline) {
-		// TODO would be great if we could avoid `$.attr` when we know the value
-		context.state.template.push(
-			b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
-		);
+		/** @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 {
+			context.state.template.push(
+				b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
+			);
+		}
 	} else {
 		state.init.push(update);
 	}

From 5daef9baad62a6b684da144b2f473c4d9e378120 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 14 Nov 2024 11:59:38 -0500
Subject: [PATCH 37/42] update test

---
 .../samples/inline-module-vars/_expected/client/index.svelte.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 6a87004845d0..5ef41c3833de 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
@@ -7,7 +7,7 @@ const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7
 const __DECLARED_ASSET_3__ = "__VITE_ASSET__2AM7_y_g__";
 const a = 1;
 const b = 2;
-var root = $.template(`<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>`, 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> <p>${$.escape(a ?? "")} + ${$.escape(b ?? "")} = ${$.escape(a + b ?? "")}</p>`, 1);
 
 export default function Inline_module_vars($$anchor) {
 	var fragment = root();

From 16ec011908df70c9434fc1853e1fbd8d430ec45d Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 14 Nov 2024 12:01:28 -0500
Subject: [PATCH 38/42] colocate some code

---
 .../client/visitors/shared/fragment.js        | 27 ++++++++++++++++++-
 .../client/visitors/shared/utils.js           | 25 -----------------
 2 files changed, 26 insertions(+), 26 deletions(-)

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 81a9b7604440..ec6a10967497 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,10 +1,11 @@
 /** @import { Expression } from 'estree' */
 /** @import { AST, SvelteNode } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
+import { escape_html } from '../../../../../../escaping.js';
 import { is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { is_inlinable_attribute } from '../../../../utils.js';
-import { build_template_chunk, build_update, escape_inline_expression } from './utils.js';
+import { build_template_chunk, build_update } from './utils.js';
 
 /**
  * Processes an array of template nodes, joining sibling text/expression nodes
@@ -161,3 +162,27 @@ function is_static_element(node) {
 
 	return true;
 }
+
+/**
+ * @param {Expression} node
+ * @param {boolean} [is_attr]
+ * @returns {Expression}
+ */
+function escape_inline_expression(node, is_attr) {
+	if (node.type === 'Literal') {
+		if (typeof node.value === 'string') {
+			return b.literal(escape_html(node.value, is_attr));
+		}
+
+		return node;
+	}
+
+	if (node.type === 'TemplateLiteral') {
+		return b.template(
+			node.quasis.map((q) => b.quasi(escape_html(q.value.cooked, is_attr))),
+			node.expressions.map((expression) => escape_inline_expression(expression, is_attr))
+		);
+	}
+
+	return b.call('$.escape', node, is_attr && b.true);
+}
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 716bc4686f5f..2d27fdc7778b 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
@@ -9,31 +9,6 @@ import { regex_is_valid_identifier } from '../../../../patterns.js';
 import { create_derived } from '../../utils.js';
 import is_reference from 'is-reference';
 import { locator } from '../../../../../state.js';
-import { escape_html } from '../../../../../../escaping.js';
-
-/**
- * @param {Expression} node
- * @param {boolean} [is_attr]
- * @returns {Expression}
- */
-export function escape_inline_expression(node, is_attr) {
-	if (node.type === 'Literal') {
-		if (typeof node.value === 'string') {
-			return b.literal(escape_html(node.value, is_attr));
-		}
-
-		return node;
-	}
-
-	if (node.type === 'TemplateLiteral') {
-		return b.template(
-			node.quasis.map((q) => b.quasi(escape_html(q.value.cooked, is_attr))),
-			node.expressions.map((expression) => escape_inline_expression(expression, is_attr))
-		);
-	}
-
-	return b.call('$.escape', node, is_attr && b.true);
-}
 
 /**
  * @param {Array<AST.Text | AST.ExpressionTag>} values

From 056475f9e7e423365da398249588b0cc53825af0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 14 Nov 2024 12:13:56 -0500
Subject: [PATCH 39/42] better inlining

---
 .../client/visitors/shared/fragment.js        | 30 +++++++++++++----
 .../client/visitors/shared/utils.js           | 33 ++++++++++++++-----
 .../_expected/client/index.svelte.js          |  2 +-
 3 files changed, 49 insertions(+), 16 deletions(-)

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 ec6a10967497..04d542276aae 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,5 +1,6 @@
 /** @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 { is_event_attribute } from '../../../../../utils/ast.js';
@@ -67,7 +68,7 @@ export function process_children(nodes, initial, element, { visit, state }) {
 		if (can_inline) {
 			skipped += 1;
 			const raw = element?.name === 'script' || element?.name === 'style';
-			state.template.push(raw ? value : escape_inline_expression(value));
+			state.template.push(raw ? value : escape_inline_expression(value, state.scope));
 			return;
 		}
 
@@ -165,13 +166,13 @@ function is_static_element(node) {
 
 /**
  * @param {Expression} node
- * @param {boolean} [is_attr]
+ * @param {Scope} scope
  * @returns {Expression}
  */
-function escape_inline_expression(node, is_attr) {
+function escape_inline_expression(node, scope) {
 	if (node.type === 'Literal') {
 		if (typeof node.value === 'string') {
-			return b.literal(escape_html(node.value, is_attr));
+			return b.literal(escape_html(node.value));
 		}
 
 		return node;
@@ -179,10 +180,25 @@ function escape_inline_expression(node, is_attr) {
 
 	if (node.type === 'TemplateLiteral') {
 		return b.template(
-			node.quasis.map((q) => b.quasi(escape_html(q.value.cooked, is_attr))),
-			node.expressions.map((expression) => escape_inline_expression(expression, is_attr))
+			node.quasis.map((q) => b.quasi(escape_html(q.value.cooked))),
+			node.expressions.map((expression) => escape_inline_expression(expression, scope))
 		);
 	}
 
-	return b.call('$.escape', node, is_attr && b.true);
+	/**
+	 * 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 2d27fdc7778b..b74d2cc9c08e 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
@@ -51,18 +51,35 @@ export function build_template_chunk(values, visit, state) {
 		if (node.type === 'Text') {
 			quasi.value.cooked += node.data;
 		} else {
-			if (node.expression.type === 'Literal') {
-				if (node.expression.value != null) {
-					quasi.value.cooked += node.expression.value + '';
+			const expression = /** @type {Expression} */ (visit(node.expression, state));
+
+			if (expression.type === 'Literal') {
+				if (expression.value != null) {
+					quasi.value.cooked += expression.value + '';
 				}
 			} 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'));
-					const expression = /** @type {Expression} */ (visit(node.expression, state));
 
-					state.init.push(
-						b.const(id, create_derived(state, b.thunk(b.logical('??', expression, b.literal('')))))
-					);
+					state.init.push(b.const(id, create_derived(state, b.thunk(value))));
 
 					expressions.push(b.call('$.get', id));
 				} else if (values.length === 1) {
@@ -70,7 +87,7 @@ export function build_template_chunk(values, visit, state) {
 					// 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(b.logical('??', visit(node.expression, state), b.literal('')));
+					expressions.push(value);
 				}
 
 				quasi = b.quasi('', i + 1 === values.length);
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 5ef41c3833de..75e632239e0b 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
@@ -7,7 +7,7 @@ const __DECLARED_ASSET_2__ = "__VITE_ASSET__2AM7_y_e__ 1440w, __VITE_ASSET__2AM7
 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>${$.escape(a ?? "")} + ${$.escape(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> <p>${a} + ${b} = ${$.escape(a + b ?? "")}</p>`, 1);
 
 export default function Inline_module_vars($$anchor) {
 	var fragment = root();

From 73d638474b38aee4d3b9df45ccb3b02d1df10513 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 14 Nov 2024 12:34:25 -0500
Subject: [PATCH 40/42] use attribute metadata

---
 .../phases/2-analyze/visitors/Attribute.js    | 10 ++++++++--
 .../client/visitors/RegularElement.js         |  3 +--
 .../client/visitors/shared/fragment.js        |  3 +--
 packages/svelte/src/compiler/phases/utils.js  | 19 -------------------
 4 files changed, 10 insertions(+), 25 deletions(-)
 delete mode 100644 packages/svelte/src/compiler/phases/utils.js

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 efdbe292d0ee..6931f873fbf7 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 { is_boolean_attribute, is_capture_event, is_delegated } from '../../../../utils.js';
 import {
 	get_attribute_chunks,
 	get_attribute_expression,
@@ -16,9 +16,10 @@ import { mark_subtree_dynamic } from './shared/fragment.js';
 export function Attribute(node, context) {
 	context.next();
 
+	const parent = /** @type {SvelteNode} */ (context.path.at(-1));
+
 	// 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);
 		}
@@ -28,6 +29,10 @@ export function Attribute(node, context) {
 		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;
@@ -41,6 +46,7 @@ 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/3-transform/client/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
index 808a087b6354..455327a71219 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
@@ -14,7 +14,6 @@ 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 { is_inlinable_attribute } from '../../../utils.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
 import { build_getter, create_derived } from '../utils.js';
 import {
@@ -593,7 +592,7 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 	// we need to special case textarea value because it's not an actual attribute
 	const can_inline =
 		(attribute.name !== 'value' || element.name !== 'textarea') &&
-		is_inlinable_attribute(attribute);
+		attribute.metadata.expression.can_inline;
 
 	if (can_inline) {
 		/** @type {Literal | undefined} */
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 04d542276aae..ac6e0f8f9fdb 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
@@ -5,7 +5,6 @@
 import { escape_html } from '../../../../../../escaping.js';
 import { is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { is_inlinable_attribute } from '../../../../utils.js';
 import { build_template_chunk, build_update } from './utils.js';
 
 /**
@@ -156,7 +155,7 @@ function is_static_element(node) {
 			return false;
 		}
 
-		if (!is_inlinable_attribute(attribute)) {
+		if (!attribute.metadata.expression.can_inline) {
 			return false;
 		}
 	}
diff --git a/packages/svelte/src/compiler/phases/utils.js b/packages/svelte/src/compiler/phases/utils.js
deleted file mode 100644
index 5a51e1383664..000000000000
--- a/packages/svelte/src/compiler/phases/utils.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/** @import { AST } from '#compiler' */
-
-import { is_boolean_attribute } from '../../utils.js';
-
-/**
- * @param {AST.Attribute} attribute
- */
-export function is_inlinable_attribute(attribute) {
-	if (attribute.value === true) return false;
-	if (is_boolean_attribute(attribute.name.toLowerCase())) return false;
-
-	for (const node of Array.isArray(attribute.value) ? attribute.value : [attribute.value]) {
-		if (node.type === 'ExpressionTag' && !node.metadata.expression.can_inline) {
-			return false;
-		}
-	}
-
-	return true;
-}

From cf7c15c2255519e041b4b094a0fe9c0eab826b59 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 14 Nov 2024 12:36:39 -0500
Subject: [PATCH 41/42] Update
 packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 .../src/compiler/phases/2-analyze/visitors/Identifier.js       | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

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 303165e6e5fd..635f939c7520 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -87,8 +87,7 @@ 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)
+	// be inlined (TODO allow inlining in more cases - e.g. primitive consts)
 	let can_inline = !!binding && !binding.scope.parent && binding.kind === 'normal';
 
 	if (binding) {

From 61b60ab22ee6c57b4ec16a70b2c513f1eff95797 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 14 Nov 2024 12:37:28 -0500
Subject: [PATCH 42/42] Apply suggestions from code review

---
 .changeset/spotty-sheep-fetch.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/spotty-sheep-fetch.md b/.changeset/spotty-sheep-fetch.md
index 390aa8e79e00..8a23f40e3a42 100644
--- a/.changeset/spotty-sheep-fetch.md
+++ b/.changeset/spotty-sheep-fetch.md
@@ -1,5 +1,5 @@
 ---
-'svelte': patch
+'svelte': minor
 ---
 
-fix: avoid marking subtree as dynamic for inlined attributes
+feat: better inlining of static attributes