From 5a072198362364291e0d5c9a042feeace67b0cc9 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 25 Jul 2024 16:30:52 +0100
Subject: [PATCH 001/196] fix: add missing hydration mismatch call-site
 (#12604)

* fix: add missing hydration mismatch call-site

* add changeset

* Update playgrounds/demo/index.html

Co-authored-by: Conduitry <git@chor.date>

---------

Co-authored-by: Conduitry <git@chor.date>
---
 .changeset/hip-stingrays-teach.md                    |  5 +++++
 packages/svelte/src/internal/client/dom/hydration.js | 12 +++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/hip-stingrays-teach.md

diff --git a/.changeset/hip-stingrays-teach.md b/.changeset/hip-stingrays-teach.md
new file mode 100644
index 0000000000..4f82007fbb
--- /dev/null
+++ b/.changeset/hip-stingrays-teach.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add missing hydration mismatch call-site
diff --git a/packages/svelte/src/internal/client/dom/hydration.js b/packages/svelte/src/internal/client/dom/hydration.js
index 8b03fe7f9e..5f0880a676 100644
--- a/packages/svelte/src/internal/client/dom/hydration.js
+++ b/packages/svelte/src/internal/client/dom/hydration.js
@@ -1,6 +1,12 @@
 /** @import { TemplateNode } from '#client' */
 
-import { HYDRATION_END, HYDRATION_START, HYDRATION_START_ELSE } from '../../../constants.js';
+import {
+	HYDRATION_END,
+	HYDRATION_ERROR,
+	HYDRATION_START,
+	HYDRATION_START_ELSE
+} from '../../../constants.js';
+import * as w from '../warnings.js';
 
 /**
  * Use this variable to guard everything related to hydration code so it can be treeshaken out
@@ -28,6 +34,10 @@ export function set_hydrate_node(node) {
 }
 
 export function hydrate_next() {
+	if (hydrate_node === null) {
+		w.hydration_mismatch();
+		throw HYDRATION_ERROR;
+	}
 	return (hydrate_node = /** @type {TemplateNode} */ (hydrate_node.nextSibling));
 }
 

From db7652116ec1c9c1962861781c6ca978baffef5c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 25 Jul 2024 12:01:46 -0400
Subject: [PATCH 002/196] chore: tweak `$state.is` warning docs a bit more
 (#12605)

---
 .../messages/client-warnings/warnings.md      | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md
index 695776dd60..cae88b0bef 100644
--- a/packages/svelte/messages/client-warnings/warnings.md
+++ b/packages/svelte/messages/client-warnings/warnings.md
@@ -42,22 +42,26 @@
 
 > Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results. Consider using `$state.is(a, b)` instead%details%
 
-`$state(...)` does create a proxy of the value it is passed. Therefore, the resulting object has a different identity and equality checks will always return `false`:
+`$state(...)` creates a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) of the value it is passed. The proxy and the value have different identities, meaning equality checks will always return `false`:
 
 ```svelte
 <script>
-    let object = { foo: 'bar' };
-    let state_object = $state(object);
-    object === state_object; // always false
+	let value = { foo: 'bar' };
+	let proxy = $state(value);
+
+	value === proxy; // always false
 </script>
 ```
 
-Most of the time this will not be a problem in practise because it is very rare to keep the original value around to later compare it against a state value. In case it happens, Svelte will warn you about it in development mode and suggest to use `$state.is` instead, which is able to unwrap the proxy and compare the original values:
+In the rare case that you need to compare them, you can use `$state.is`, which unwraps proxies:
 
 ```svelte
 <script>
-    let object = { foo: 'bar' };
-    let state_object = $state(object);
-    $state.is(object, state_object); // true
+	let value = { foo: 'bar' };
+	let proxy = $state(value);
+
+	$state.is(value, proxy); // true
 </script>
 ```
+
+During development, Svelte will warn you when comparing values with proxies.

From e2f17c8a7b93287f420f5e1af022374aae15c472 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 25 Jul 2024 12:05:06 -0400
Subject: [PATCH 003/196] chore: tweak xmlns docs (#12606)

---
 documentation/docs/02-template-syntax/09-special-elements.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/02-template-syntax/09-special-elements.md b/documentation/docs/02-template-syntax/09-special-elements.md
index 3baa652185..a46779c1cc 100644
--- a/documentation/docs/02-template-syntax/09-special-elements.md
+++ b/documentation/docs/02-template-syntax/09-special-elements.md
@@ -64,7 +64,7 @@ If `this` is the name of a [void element](https://developer.mozilla.org/en-US/do
 <svelte:element this={tag} on:click={handler}>Foo</svelte:element>
 ```
 
-Svelte tries its best to infer the correct namespace from its surroundings, but that's not always possible to analyze statically. You can give a hint by adding a `xmlns` attribute:
+Svelte tries its best to infer the correct namespace from the element's surroundings, but it's not always possible. You can make it explicit with an `xmlns` attribute:
 
 ```svelte
 <svelte:element this={tag} xmlns="http://www.w3.org/2000/svg" />

From 13d86e901913ba0b953b547be3f06b2c796e57d6 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 25 Jul 2024 19:04:07 +0200
Subject: [PATCH 004/196] feat: allow `:global` in more places (alternative)
 (#12560)

* `div { :global { &.x { ... } } }` is equivalent to `div:global.x { ... }`, so the latter should be allowed, too

* finalize

* replace obsolete breaking change (which turned out to be a wrong change and was since reverted), add new breaking change note

* changeset

* regenerate types

* Update sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* always remove descendant selector before global

* error on lone `:global` with nested `&`, revert "remove spaces" rule

* regenerate types

* documentation

* oops

* switch to removing descendant combinator

* fix

* revert combinator validation relaxation

* error on first global being modified

* tweak docs

* tweak error messages

* Update documentation/docs/02-template-syntax/05-styles-and-classes.md

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* clarify

* tweak messages

* update tests

* tweak docs

* tweak `:global(...)` docs

* tweak docs

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/tricky-balloons-care.md            |   5 +
 .../05-styles-and-classes.md                  |  47 +++++---
 .../svelte/messages/compile-errors/style.md   |  20 ++--
 packages/svelte/src/compiler/errors.js        |  38 +++---
 .../phases/2-analyze/css/css-analyze.js       | 109 ++++++++++++------
 .../phases/2-analyze/css/css-prune.js         |  11 +-
 .../compiler/phases/3-transform/css/index.js  |  42 +++++--
 packages/svelte/src/compiler/types/css.d.ts   |  31 ++++-
 .../css-global-block-combinator-2/_config.js  |   9 ++
 .../css-global-block-combinator-2/main.svelte |  11 ++
 .../css-global-block-combinator/_config.js    |   4 +-
 .../css-global-block-combinator/main.svelte   |   8 +-
 .../css-global-block-declaration/_config.js   |   4 +-
 .../css-global-block-declaration/main.svelte  |  10 ++
 .../_config.js                                |  10 --
 .../main.svelte                               |   8 --
 .../css-global-block-modifier/main.svelte     |   3 -
 .../css-global-block-multiple/_config.js      |   2 +-
 .../css-global-modifier-start-1/_config.js    |   9 ++
 .../css-global-modifier-start-1/main.svelte   |  11 ++
 .../css-global-modifier-start-2/_config.js    |   9 ++
 .../css-global-modifier-start-2/main.svelte   |  22 ++++
 .../_config.js                                |   4 +-
 .../samples/css-global-modifier/main.svelte   |  11 ++
 .../tests/css/samples/global-block/_config.js |   8 +-
 .../css/samples/global-block/expected.css     |  54 +++++++++
 .../css/samples/global-block/input.svelte     |  53 +++++++++
 .../errors.json                               |   2 +-
 .../errors.json                               |   2 +-
 .../errors.json                               |   2 +-
 .../errors.json                               |   2 +-
 .../errors.json                               |   2 +-
 .../css-invalid-global-placement/errors.json  |   2 +-
 .../css-invalid-global-selector-2/errors.json |   2 +-
 .../css-invalid-global-selector-3/errors.json |   2 +-
 .../css-invalid-global-selector-4/errors.json |   2 +-
 .../css-invalid-global-selector-5/errors.json |   2 +-
 .../css-invalid-global-selector-6/errors.json |   2 +-
 .../errors.json                               |   2 +-
 .../css-invalid-global-selector/errors.json   |   2 +-
 .../errors.json                               |   2 +-
 packages/svelte/types/index.d.ts              |  31 ++++-
 .../03-appendix/02-breaking-changes.md        |  13 ++-
 43 files changed, 483 insertions(+), 142 deletions(-)
 create mode 100644 .changeset/tricky-balloons-care.md
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/main.svelte
 delete mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/_config.js
 delete mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/main.svelte
 delete mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-block-modifier/main.svelte
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/main.svelte
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/main.svelte
 rename packages/svelte/tests/compiler-errors/samples/{css-global-block-modifier => css-global-modifier}/_config.js (56%)
 create mode 100644 packages/svelte/tests/compiler-errors/samples/css-global-modifier/main.svelte

diff --git a/.changeset/tricky-balloons-care.md b/.changeset/tricky-balloons-care.md
new file mode 100644
index 0000000000..936f3ecddf
--- /dev/null
+++ b/.changeset/tricky-balloons-care.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: allow `:global` in more places
diff --git a/documentation/docs/02-template-syntax/05-styles-and-classes.md b/documentation/docs/02-template-syntax/05-styles-and-classes.md
index 48cdeabce5..4a1497f2e6 100644
--- a/documentation/docs/02-template-syntax/05-styles-and-classes.md
+++ b/documentation/docs/02-template-syntax/05-styles-and-classes.md
@@ -25,31 +25,28 @@ This works by adding a class to affected elements, which is based on a hash of t
 </style>
 ```
 
-## :global
+## :global(...)
 
-To apply styles to a selector globally, use the `:global(...)` modifier.
+To apply styles to a single selector globally, use the `:global(...)` modifier:
 
 ```svelte
 <style>
 	:global(body) {
-		/* this will apply to <body> */
+		/* applies to <body> */
 		margin: 0;
 	}
 
 	div :global(strong) {
-		/* this will apply to all <strong> elements, in any
-			 component, that are inside <div> elements belonging
-			 to this component */
+		/* applies to all <strong> elements, in any component,
+		   that are inside <div> elements belonging
+		   to this component */
 		color: goldenrod;
 	}
 
-	p:global(.red) {
-		/* this will apply to all <p> elements belonging to this
-			 component with a class of red, even if class="red" does
-			 not initially appear in the markup, and is instead
-			 added at runtime. This is useful when the class
-			 of the element is dynamically applied, for instance
-			 when updating the element's classList property directly. */
+	p:global(.big.red) {
+		/* applies to all <p> elements belonging to this component
+		   with `class="big red"`, even if it is applied
+		   programmatically (for example by a library) */
 	}
 </style>
 ```
@@ -66,6 +63,30 @@ The `-global-` part will be removed when compiled, and the keyframe will then be
 </style>
 ```
 
+## :global
+
+To apply styles to a group of selectors globally, create a `:global {...}` block:
+
+```svelte
+<style>
+	:global {
+		/* applies to every <div> in your application */
+		div { ... }
+
+		/* applies to every <p> in your application */
+		p { ... }
+	}
+
+	.a :global {
+		/* applies to every `.b .c .d` element, in any component,
+		   that is inside an `.a` element in this component */
+		.b .c .d {...}
+	}
+</style>
+```
+
+> The second example above could also be written as an equivalent `.a :global .b .c .d` selector, where everything after the `:global` is unscoped, though the nested form is preferred.
+
 ## Nested style tags
 
 There should only be 1 top-level `<style>` tag per component.
diff --git a/packages/svelte/messages/compile-errors/style.md b/packages/svelte/messages/compile-errors/style.md
index 49a0d5a08d..b6ba7aa3ff 100644
--- a/packages/svelte/messages/compile-errors/style.md
+++ b/packages/svelte/messages/compile-errors/style.md
@@ -8,35 +8,35 @@
 
 ## css_global_block_invalid_combinator
 
-> A :global {...} block cannot follow a %name% combinator
+> A `:global` selector cannot follow a `%name%` combinator
 
 ## css_global_block_invalid_declaration
 
-> A :global {...} block can only contain rules, not declarations
+> A top-level `:global {...}` block can only contain rules, not declarations
 
 ## css_global_block_invalid_list
 
-> A :global {...} block cannot be part of a selector list with more than one item
+> A `:global` selector cannot be part of a selector list with more than one item
 
 ## css_global_block_invalid_modifier
 
-> A :global {...} block cannot modify an existing selector
+> A `:global` selector cannot modify an existing selector
 
-## css_global_block_invalid_placement
+## css_global_block_invalid_modifier_start
 
-> A :global {...} block can only appear at the end of a selector sequence (did you mean to use :global(...) instead?)
+> A `:global` selector can only be modified if it is a descendant of other selectors
 
 ## css_global_invalid_placement
 
-> :global(...) can be at the start or end of a selector sequence, but not in the middle
+> `:global(...)` can be at the start or end of a selector sequence, but not in the middle
 
 ## css_global_invalid_selector
 
-> :global(...) must contain exactly one selector
+> `:global(...)` must contain exactly one selector
 
 ## css_global_invalid_selector_list
 
-> :global(...) must not contain type or universal selectors when used in a compound selector
+> `:global(...)` must not contain type or universal selectors when used in a compound selector
 
 ## css_nesting_selector_invalid_placement
 
@@ -48,4 +48,4 @@
 
 ## css_type_selector_invalid_placement
 
-> :global(...) must not be followed with a type selector
+> `:global(...)` must not be followed by a type selector
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 040356df25..023b573e86 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -434,76 +434,76 @@ export function css_expected_identifier(node) {
 }
 
 /**
- * A :global {...} block cannot follow a %name% combinator
+ * A `:global` selector cannot follow a `%name%` combinator
  * @param {null | number | NodeLike} node
  * @param {string} name
  * @returns {never}
  */
 export function css_global_block_invalid_combinator(node, name) {
-	e(node, "css_global_block_invalid_combinator", `A :global {...} block cannot follow a ${name} combinator`);
+	e(node, "css_global_block_invalid_combinator", `A \`:global\` selector cannot follow a \`${name}\` combinator`);
 }
 
 /**
- * A :global {...} block can only contain rules, not declarations
+ * A top-level `:global {...}` block can only contain rules, not declarations
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_global_block_invalid_declaration(node) {
-	e(node, "css_global_block_invalid_declaration", "A :global {...} block can only contain rules, not declarations");
+	e(node, "css_global_block_invalid_declaration", "A top-level `:global {...}` block can only contain rules, not declarations");
 }
 
 /**
- * A :global {...} block cannot be part of a selector list with more than one item
+ * A `:global` selector cannot be part of a selector list with more than one item
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_global_block_invalid_list(node) {
-	e(node, "css_global_block_invalid_list", "A :global {...} block cannot be part of a selector list with more than one item");
+	e(node, "css_global_block_invalid_list", "A `:global` selector cannot be part of a selector list with more than one item");
 }
 
 /**
- * A :global {...} block cannot modify an existing selector
+ * A `:global` selector cannot modify an existing selector
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_global_block_invalid_modifier(node) {
-	e(node, "css_global_block_invalid_modifier", "A :global {...} block cannot modify an existing selector");
+	e(node, "css_global_block_invalid_modifier", "A `:global` selector cannot modify an existing selector");
 }
 
 /**
- * A :global {...} block can only appear at the end of a selector sequence (did you mean to use :global(...) instead?)
+ * A `:global` selector can only be modified if it is a descendant of other selectors
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
-export function css_global_block_invalid_placement(node) {
-	e(node, "css_global_block_invalid_placement", "A :global {...} block can only appear at the end of a selector sequence (did you mean to use :global(...) instead?)");
+export function css_global_block_invalid_modifier_start(node) {
+	e(node, "css_global_block_invalid_modifier_start", "A `:global` selector can only be modified if it is a descendant of other selectors");
 }
 
 /**
- * :global(...) can be at the start or end of a selector sequence, but not in the middle
+ * `:global(...)` can be at the start or end of a selector sequence, but not in the middle
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_global_invalid_placement(node) {
-	e(node, "css_global_invalid_placement", ":global(...) can be at the start or end of a selector sequence, but not in the middle");
+	e(node, "css_global_invalid_placement", "`:global(...)` can be at the start or end of a selector sequence, but not in the middle");
 }
 
 /**
- * :global(...) must contain exactly one selector
+ * `:global(...)` must contain exactly one selector
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_global_invalid_selector(node) {
-	e(node, "css_global_invalid_selector", ":global(...) must contain exactly one selector");
+	e(node, "css_global_invalid_selector", "`:global(...)` must contain exactly one selector");
 }
 
 /**
- * :global(...) must not contain type or universal selectors when used in a compound selector
+ * `:global(...)` must not contain type or universal selectors when used in a compound selector
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_global_invalid_selector_list(node) {
-	e(node, "css_global_invalid_selector_list", ":global(...) must not contain type or universal selectors when used in a compound selector");
+	e(node, "css_global_invalid_selector_list", "`:global(...)` must not contain type or universal selectors when used in a compound selector");
 }
 
 /**
@@ -525,12 +525,12 @@ export function css_selector_invalid(node) {
 }
 
 /**
- * :global(...) must not be followed with a type selector
+ * `:global(...)` must not be followed by a type selector
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function css_type_selector_invalid_placement(node) {
-	e(node, "css_type_selector_invalid_placement", ":global(...) must not be followed with a type selector");
+	e(node, "css_type_selector_invalid_placement", "`:global(...)` must not be followed by a type selector");
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
index e8b570b92d..4497617fbb 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
@@ -27,10 +27,25 @@ function is_global(relative_selector) {
 	return (
 		first.type === 'PseudoClassSelector' &&
 		first.name === 'global' &&
-		relative_selector.selectors.every(
-			(selector) =>
-				selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
-		)
+		(first.args === null ||
+			// Only these two selector types keep the whole selector global, because e.g.
+			// :global(button).x means that the selector is still scoped because of the .x
+			relative_selector.selectors.every(
+				(selector) =>
+					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
+			))
+	);
+}
+
+/**
+ * True if is `:global`
+ * @param {Css.SimpleSelector} simple_selector
+ */
+function is_global_block_selector(simple_selector) {
+	return (
+		simple_selector.type === 'PseudoClassSelector' &&
+		simple_selector.name === 'global' &&
+		simple_selector.args === null
 	);
 }
 
@@ -48,19 +63,12 @@ const analysis_visitors = {
 
 		node.metadata.rule = context.state.rule;
 
-		node.metadata.used = node.children.every(
+		node.metadata.used ||= node.children.every(
 			({ metadata }) => metadata.is_global || metadata.is_global_like
 		);
 	},
 	RelativeSelector(node, context) {
-		node.metadata.is_global =
-			node.selectors.length >= 1 &&
-			node.selectors[0].type === 'PseudoClassSelector' &&
-			node.selectors[0].name === 'global' &&
-			node.selectors.every(
-				(selector) =>
-					selector.type === 'PseudoClassSelector' || selector.type === 'PseudoElementSelector'
-			);
+		node.metadata.is_global = node.selectors.length >= 1 && is_global(node);
 
 		if (node.selectors.length === 1) {
 			const first = node.selectors[0];
@@ -85,15 +93,30 @@ const analysis_visitors = {
 	Rule(node, context) {
 		node.metadata.parent_rule = context.state.rule;
 
-		// `:global {...}` or `div :global {...}`
 		node.metadata.is_global_block = node.prelude.children.some((selector) => {
-			const last = selector.children[selector.children.length - 1];
+			let is_global_block = false;
 
-			const s = last.selectors[last.selectors.length - 1];
+			for (const child of selector.children) {
+				const idx = child.selectors.findIndex(is_global_block_selector);
 
-			if (s.type === 'PseudoClassSelector' && s.name === 'global' && s.args === null) {
-				return true;
+				if (is_global_block) {
+					// All selectors after :global are unscoped
+					child.metadata.is_global_like = true;
+				}
+
+				if (idx !== -1) {
+					is_global_block = true;
+					for (let i = idx + 1; i < child.selectors.length; i++) {
+						walk(/** @type {Css.Node} */ (child.selectors[i]), null, {
+							ComplexSelector(node) {
+								node.metadata.used = true;
+							}
+						});
+					}
+				}
 			}
+
+			return is_global_block;
 		});
 
 		context.next({
@@ -118,21 +141,35 @@ const validation_visitors = {
 			}
 
 			const complex_selector = node.prelude.children[0];
-			const relative_selector = complex_selector.children[complex_selector.children.length - 1];
+			const global_selector = complex_selector.children.find((r, selector_idx) => {
+				const idx = r.selectors.findIndex(is_global_block_selector);
+				if (idx === 0) {
+					if (r.selectors.length > 1 && selector_idx === 0 && node.metadata.parent_rule === null) {
+						e.css_global_block_invalid_modifier_start(r.selectors[1]);
+					}
+					return true;
+				} else if (idx !== -1) {
+					e.css_global_block_invalid_modifier(r.selectors[idx]);
+				}
+			});
 
-			if (relative_selector.selectors.length > 1) {
-				e.css_global_block_invalid_modifier(
-					relative_selector.selectors[relative_selector.selectors.length - 1]
-				);
+			if (!global_selector) {
+				throw new Error('Internal error: global block without :global selector');
 			}
 
-			if (relative_selector.combinator && relative_selector.combinator.name !== ' ') {
-				e.css_global_block_invalid_combinator(relative_selector, relative_selector.combinator.name);
+			if (global_selector.combinator && global_selector.combinator.name !== ' ') {
+				e.css_global_block_invalid_combinator(global_selector, global_selector.combinator.name);
 			}
 
 			const declaration = node.block.children.find((child) => child.type === 'Declaration');
 
-			if (declaration) {
+			if (
+				declaration &&
+				// :global { color: red; } is invalid, but foo :global { color: red; } is valid
+				node.prelude.children.length === 1 &&
+				node.prelude.children[0].children.length === 1 &&
+				node.prelude.children[0].children[0].selectors.length === 1
+			) {
 				e.css_global_block_invalid_declaration(declaration);
 			}
 		}
@@ -146,14 +183,7 @@ const validation_visitors = {
 			if (global) {
 				const idx = node.children.indexOf(global);
 
-				if (global.selectors[0].args === null && idx !== node.children.length - 1) {
-					// ensure `:global` is only at the end of a selector
-					e.css_global_block_invalid_placement(global.selectors[0]);
-				} else if (
-					global.selectors[0].args !== null &&
-					idx !== 0 &&
-					idx !== node.children.length - 1
-				) {
+				if (global.selectors[0].args !== null && idx !== 0 && idx !== node.children.length - 1) {
 					// ensure `:global(...)` is not used in the middle of a selector (but multiple `global(...)` in sequence are ok)
 					for (let i = idx + 1; i < node.children.length; i++) {
 						if (!is_global(node.children[i])) {
@@ -196,8 +226,17 @@ const validation_visitors = {
 	},
 	NestingSelector(node, context) {
 		const rule = /** @type {Css.Rule} */ (context.state.rule);
-		if (!rule.metadata.parent_rule) {
+		const parent_rule = rule.metadata.parent_rule;
+		if (!parent_rule) {
 			e.css_nesting_selector_invalid_placement(node);
+		} else if (
+			// :global { &.foo { ... } } is invalid
+			parent_rule.metadata.is_global_block &&
+			!parent_rule.metadata.parent_rule &&
+			parent_rule.prelude.children[0].children.length === 1 &&
+			parent_rule.prelude.children[0].children[0].selectors.length === 1
+		) {
+			e.css_global_block_invalid_modifier_start(node);
 		}
 	}
 };
diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
index f238e3e075..95195d2608 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-prune.js
@@ -295,12 +295,19 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 					return false;
 				}
 
-				if (name === 'global' && relative_selector.selectors.length === 1) {
-					const args = /** @type {Compiler.Css.SelectorList} */ (selector.args);
+				if (
+					name === 'global' &&
+					selector.args !== null &&
+					relative_selector.selectors.length === 1
+				) {
+					const args = selector.args;
 					const complex_selector = args.children[0];
 					return apply_selector(complex_selector.children, rule, element, stylesheet);
 				}
 
+				// We came across a :global, everything beyond it is global and therefore a potential match
+				if (name === 'global' && selector.args === null) return true;
+
 				if ((name === 'is' || name === 'where') && selector.args) {
 					let matched = false;
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/css/index.js b/packages/svelte/src/compiler/phases/3-transform/css/index.js
index bc3952eacc..ef9c61b79f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/css/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js
@@ -92,7 +92,7 @@ const visitors = {
 
 		next();
 	},
-	Declaration(node, { state, next }) {
+	Declaration(node, { state }) {
 		const property = node.property && remove_css_prefix(node.property.toLowerCase());
 		if (property === 'animation' || property === 'animation-name') {
 			let index = node.start + node.property.length + 1;
@@ -140,7 +140,7 @@ const visitors = {
 		if (node.metadata.is_global_block) {
 			const selector = node.prelude.children[0];
 
-			if (selector.children.length === 1) {
+			if (selector.children.length === 1 && selector.children[0].selectors.length === 1) {
 				// `:global {...}`
 				state.code.prependRight(node.start, '/* ');
 				state.code.appendLeft(node.block.start + 1, '*/');
@@ -216,16 +216,38 @@ const visitors = {
 	ComplexSelector(node, context) {
 		const before_bumped = context.state.specificity.bumped;
 
-		/** @param {Css.SimpleSelector} selector */
-		function remove_global_pseudo_class(selector) {
-			context.state.code
-				.remove(selector.start, selector.start + ':global('.length)
-				.remove(selector.end - 1, selector.end);
+		/**
+		 * @param {Css.PseudoClassSelector} selector
+		 * @param {Css.Combinator | null} combinator
+		 */
+		function remove_global_pseudo_class(selector, combinator) {
+			if (selector.args === null) {
+				let start = selector.start;
+				if (combinator?.name === ' ') {
+					// div :global.x becomes div.x
+					while (/\s/.test(context.state.code.original[start - 1])) start--;
+				}
+				context.state.code.remove(start, selector.start + ':global'.length);
+			} else {
+				context.state.code
+					.remove(selector.start, selector.start + ':global('.length)
+					.remove(selector.end - 1, selector.end);
+			}
 		}
 
 		for (const relative_selector of node.children) {
 			if (relative_selector.metadata.is_global) {
-				remove_global_pseudo_class(relative_selector.selectors[0]);
+				const global = /** @type {Css.PseudoClassSelector} */ (relative_selector.selectors[0]);
+				remove_global_pseudo_class(global, relative_selector.combinator);
+
+				if (
+					node.metadata.rule?.metadata.parent_rule &&
+					global.args === null &&
+					relative_selector.combinator === null
+				) {
+					// div { :global.x { ... } } becomes div { &.x { ... } }
+					context.state.code.prependRight(global.start, '&');
+				}
 				continue;
 			}
 
@@ -241,10 +263,10 @@ const visitors = {
 					}
 				}
 
-				// for any :global() at the middle of compound selector
+				// for any :global() or :global at the middle of compound selector
 				for (const selector of relative_selector.selectors) {
 					if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
-						remove_global_pseudo_class(selector);
+						remove_global_pseudo_class(selector, null);
 					}
 				}
 
diff --git a/packages/svelte/src/compiler/types/css.d.ts b/packages/svelte/src/compiler/types/css.d.ts
index 89a739713a..8e168a2b74 100644
--- a/packages/svelte/src/compiler/types/css.d.ts
+++ b/packages/svelte/src/compiler/types/css.d.ts
@@ -33,17 +33,32 @@ export namespace Css {
 		metadata: {
 			parent_rule: null | Rule;
 			has_local_selectors: boolean;
+			/**
+			 * `true` if the rule contains a `:global` selector, and therefore everything inside should be unscoped
+			 */
 			is_global_block: boolean;
 		};
 	}
 
+	/**
+	 * A list of selectors, e.g. `a, b, c {}`
+	 */
 	export interface SelectorList extends BaseNode {
 		type: 'SelectorList';
+		/**
+		 * The `a`, `b` and `c` in `a, b, c {}`
+		 */
 		children: ComplexSelector[];
 	}
 
+	/**
+	 * A complex selector, e.g. `a b c {}`
+	 */
 	export interface ComplexSelector extends BaseNode {
 		type: 'ComplexSelector';
+		/**
+		 * The `a`, `b` and `c` in `a b c {}`
+		 */
 		children: RelativeSelector[];
 		metadata: {
 			rule: null | Rule;
@@ -51,14 +66,26 @@ export namespace Css {
 		};
 	}
 
+	/**
+	 * A relative selector, e.g the `a` and `> b` in `a > b {}`
+	 */
 	export interface RelativeSelector extends BaseNode {
 		type: 'RelativeSelector';
+		/**
+		 * In `a > b`, `> b` forms one relative selector, and `>` is the combinator. `null` for the first selector.
+		 */
 		combinator: null | Combinator;
+		/**
+		 * The `b:is(...)` in `> b:is(...)`
+		 */
 		selectors: SimpleSelector[];
 		metadata: {
-			/** :global(..) */
+			/**
+			 * `true` if the whole selector is unscoped, e.g. `:global(...)` or `:global` or `:global.x`.
+			 * Selectors like `:global(...).x` are not considered global, because they still need scoping.
+			 */
 			is_global: boolean;
-			/** :root, :host, ::view-transition */
+			/** `:root`, `:host`, `::view-transition`, or selectors after a `:global` */
 			is_global_like: boolean;
 			scoped: boolean;
 		};
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/_config.js
new file mode 100644
index 0000000000..2c22b248d3
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'css_global_block_invalid_combinator',
+		message: 'A `:global` selector cannot follow a `>` combinator',
+		position: [79, 88]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/main.svelte
new file mode 100644
index 0000000000..72e8bdc31d
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator-2/main.svelte
@@ -0,0 +1,11 @@
+<style>
+	/* ok */
+	.x :global.x p {
+	}
+	.x :global > p {
+	}
+
+	/* not ok */
+	.x > :global p {
+	}
+</style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/_config.js
index 1014cd34c2..3d701e10b7 100644
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/_config.js
@@ -3,7 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'css_global_block_invalid_combinator',
-		message: 'A :global {...} block cannot follow a > combinator',
-		position: [12, 21]
+		message: 'A `:global` selector cannot follow a `>` combinator',
+		position: [54, 63]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/main.svelte
index b3b6ebe6ac..b3af8b4e21 100644
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/main.svelte
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-combinator/main.svelte
@@ -1,3 +1,9 @@
 <style>
-	.x > :global {}
+	/* ok */
+	.x :global {
+	}
+
+	/* not ok */
+	.x > :global {
+	}
 </style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/_config.js
index 3f7a82b54c..776cb9c7d0 100644
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/_config.js
@@ -3,7 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'css_global_block_invalid_declaration',
-		message: 'A :global {...} block can only contain rules, not declarations',
-		position: [24, 34]
+		message: 'A top-level `:global {...}` block can only contain rules, not declarations',
+		position: [109, 119]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/main.svelte
index 6a1891ca29..d3374f2aa0 100644
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/main.svelte
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-declaration/main.svelte
@@ -1,5 +1,15 @@
 <style>
+	/* ok */
 	.x :global {
 		color: red;
 	}
+
+	:global .y {
+		color: red;
+	}
+
+	/* not ok */
+	:global {
+		color: red;
+	}
 </style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/_config.js
deleted file mode 100644
index 0eb061e41e..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/_config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	error: {
-		code: 'css_global_block_invalid_placement',
-		message:
-			'A :global {...} block can only appear at the end of a selector sequence (did you mean to use :global(...) instead?)',
-		position: [50, 57]
-	}
-});
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/main.svelte
deleted file mode 100644
index 15d721f54f..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-invalid-selector/main.svelte
+++ /dev/null
@@ -1,8 +0,0 @@
-<style>
-	/* ok */
-	.x :global {
-	}
-	/* not ok */
-	:global .x {
-	}
-</style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-modifier/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-block-modifier/main.svelte
deleted file mode 100644
index 7d274e3894..0000000000
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-modifier/main.svelte
+++ /dev/null
@@ -1,3 +0,0 @@
-<style>
-	.x .y:global {}
-</style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple/_config.js
index 9f06599f7a..9ae4e758c4 100644
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-block-multiple/_config.js
@@ -3,7 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'css_global_block_invalid_list',
-		message: 'A :global {...} block cannot be part of a selector list with more than one item',
+		message: 'A `:global` selector cannot be part of a selector list with more than one item',
 		position: [9, 31]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/_config.js
new file mode 100644
index 0000000000..9f58616ca7
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'css_global_block_invalid_modifier_start',
+		message: 'A `:global` selector can only be modified if it is a descendant of other selectors',
+		position: [75, 77]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/main.svelte
new file mode 100644
index 0000000000..027874c7a7
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-1/main.svelte
@@ -0,0 +1,11 @@
+<style>
+	/* ok */
+	div :global.x {
+		color: red;
+	}
+
+	/* not ok */
+	:global.x {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/_config.js
new file mode 100644
index 0000000000..6d4b02adab
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'css_global_block_invalid_modifier_start',
+		message: 'A `:global` selector can only be modified if it is a descendant of other selectors',
+		position: [147, 148]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/main.svelte
new file mode 100644
index 0000000000..5e5123a1c9
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-modifier-start-2/main.svelte
@@ -0,0 +1,22 @@
+<style>
+	/* ok */
+	div :global {
+		&.x {
+			color: red;
+		}
+	}
+	div {
+		:global {
+			&.x {
+				color: red;
+			}
+		}
+	}
+
+	/* not ok */
+	:global {
+		&.x {
+			color: red;
+		}
+	}
+</style>
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-block-modifier/_config.js b/packages/svelte/tests/compiler-errors/samples/css-global-modifier/_config.js
similarity index 56%
rename from packages/svelte/tests/compiler-errors/samples/css-global-block-modifier/_config.js
rename to packages/svelte/tests/compiler-errors/samples/css-global-modifier/_config.js
index 00843fa217..3659ac1d44 100644
--- a/packages/svelte/tests/compiler-errors/samples/css-global-block-modifier/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-modifier/_config.js
@@ -3,7 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'css_global_block_invalid_modifier',
-		message: 'A :global {...} block cannot modify an existing selector',
-		position: [14, 21]
+		message: 'A `:global` selector cannot modify an existing selector',
+		position: [70, 77]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/css-global-modifier/main.svelte b/packages/svelte/tests/compiler-errors/samples/css-global-modifier/main.svelte
new file mode 100644
index 0000000000..0cb7273572
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/css-global-modifier/main.svelte
@@ -0,0 +1,11 @@
+<style>
+	/* ok */
+	div :global.x {
+		color: red;
+	}
+
+	/* not ok */
+	.x:global {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/css/samples/global-block/_config.js b/packages/svelte/tests/css/samples/global-block/_config.js
index 430b45fe37..bee0d7204d 100644
--- a/packages/svelte/tests/css/samples/global-block/_config.js
+++ b/packages/svelte/tests/css/samples/global-block/_config.js
@@ -7,14 +7,14 @@ export default test({
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".unused :global"',
 			start: {
-				line: 16,
+				line: 69,
 				column: 1,
-				character: 128
+				character: 917
 			},
 			end: {
-				line: 16,
+				line: 69,
 				column: 16,
-				character: 143
+				character: 932
 			}
 		}
 	]
diff --git a/packages/svelte/tests/css/samples/global-block/expected.css b/packages/svelte/tests/css/samples/global-block/expected.css
index 8bf0f0e596..3acc1b0212 100644
--- a/packages/svelte/tests/css/samples/global-block/expected.css
+++ b/packages/svelte/tests/css/samples/global-block/expected.css
@@ -1,3 +1,4 @@
+
 	/* :global {*/
 		.x {
 			color: green;
@@ -10,6 +11,59 @@
 		}
 	}
 
+	/* some css preprocessors de-nest :global blocks with a single child
+	   (e.g turn `:global { div { ... } }` into `:global div { ... }`),
+	   so we need to support it, too */
+	 div {
+		.y {
+			color: green;
+		}
+	}
+
+	div.svelte-xyz p {
+		.y {
+			color: green;
+		}
+	}
+
+	/* `div { :global { &.x { ...} } }` is allowed ... */
+	div.svelte-xyz {
+		/* :global {*/
+			&.x {
+				color: green;
+			}
+		/*}*/
+	}
+
+	/* ...wich is equivalent to `div :global { &.x { ...} }` ... */
+	div.svelte-xyz {
+		&.x {
+			color: green;
+		}
+	}
+
+	/* ...so `div :global.x` must be, too ... */
+	div.svelte-xyz.x {
+		color: green;
+	}
+
+	/* ...and therefore `div { :global.x { ... }` aswell */
+	div.svelte-xyz {
+		&.x {
+			color: green;
+		}
+	}
+
+	div.svelte-xyz {
+		&.x {
+			color: green;
+		}
+	}
+
+	div.svelte-xyz:is(html.dark-mode *) {
+		color: green;
+	}
+
 	/* (unused) .unused :global {
 		.z {
 			color: red;
diff --git a/packages/svelte/tests/css/samples/global-block/input.svelte b/packages/svelte/tests/css/samples/global-block/input.svelte
index d05a6b7edc..2f2cdfcbd5 100644
--- a/packages/svelte/tests/css/samples/global-block/input.svelte
+++ b/packages/svelte/tests/css/samples/global-block/input.svelte
@@ -13,6 +13,59 @@
 		}
 	}
 
+	/* some css preprocessors de-nest :global blocks with a single child
+	   (e.g turn `:global { div { ... } }` into `:global div { ... }`),
+	   so we need to support it, too */
+	:global div {
+		.y {
+			color: green;
+		}
+	}
+
+	div :global p {
+		.y {
+			color: green;
+		}
+	}
+
+	/* `div { :global { &.x { ...} } }` is allowed ... */
+	div {
+		:global {
+			&.x {
+				color: green;
+			}
+		}
+	}
+
+	/* ...wich is equivalent to `div :global { &.x { ...} }` ... */
+	div :global {
+		&.x {
+			color: green;
+		}
+	}
+
+	/* ...so `div :global.x` must be, too ... */
+	div :global.x {
+		color: green;
+	}
+
+	/* ...and therefore `div { :global.x { ... }` aswell */
+	div {
+		:global.x {
+			color: green;
+		}
+	}
+
+	div {
+		& :global.x {
+			color: green;
+		}
+	}
+
+	div :global:is(html.dark-mode *) {
+		color: green;
+	}
+
 	.unused :global {
 		.z {
 			color: red;
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/errors.json
index cf556bf4c4..bab7b8a9e9 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement-2/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_placement",
-		"message": ":global(...) can be at the start or end of a selector sequence, but not in the middle",
+		"message": "`:global(...)` can be at the start or end of a selector sequence, but not in the middle",
 		"start": {
 			"line": 8,
 			"column": 6
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement-3/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-placement-3/errors.json
index 164daa5796..8ca06aa625 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-placement-3/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement-3/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_placement",
-		"message": ":global(...) can be at the start or end of a selector sequence, but not in the middle",
+		"message": "`:global(...)` can be at the start or end of a selector sequence, but not in the middle",
 		"start": {
 			"line": 5,
 			"column": 6
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement-4/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-placement-4/errors.json
index 7b63fe4d7a..bf3dce8b7f 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-placement-4/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement-4/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector_list",
-		"message": ":global(...) must not contain type or universal selectors when used in a compound selector",
+		"message": "`:global(...)` must not contain type or universal selectors when used in a compound selector",
 		"start": {
 			"line": 2,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement-5/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-placement-5/errors.json
index fcc75beb5c..6260b09743 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-placement-5/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement-5/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector_list",
-		"message": ":global(...) must not contain type or universal selectors when used in a compound selector",
+		"message": "`:global(...)` must not contain type or universal selectors when used in a compound selector",
 		"start": {
 			"line": 2,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement-6/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-placement-6/errors.json
index e1bc38e0f1..1af01bce50 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-placement-6/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement-6/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector_list",
-		"message": ":global(...) must not contain type or universal selectors when used in a compound selector",
+		"message": "`:global(...)` must not contain type or universal selectors when used in a compound selector",
 		"start": {
 			"line": 5,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-placement/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-placement/errors.json
index 0b641f2115..484319ef06 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-placement/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-placement/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_placement",
-		"message": ":global(...) can be at the start or end of a selector sequence, but not in the middle",
+		"message": "`:global(...)` can be at the start or end of a selector sequence, but not in the middle",
 		"start": {
 			"line": 2,
 			"column": 6
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-selector-2/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-selector-2/errors.json
index d0be529197..d61411ee96 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-selector-2/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-selector-2/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector",
-		"message": ":global(...) must contain exactly one selector",
+		"message": "`:global(...)` must contain exactly one selector",
 		"start": {
 			"line": 11,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-selector-3/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-selector-3/errors.json
index d37ff8d5d1..722e8be23f 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-selector-3/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-selector-3/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector",
-		"message": ":global(...) must contain exactly one selector",
+		"message": "`:global(...)` must contain exactly one selector",
 		"start": {
 			"line": 5,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-selector-4/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-selector-4/errors.json
index c05bb647ad..9a20737c5d 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-selector-4/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-selector-4/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector",
-		"message": ":global(...) must contain exactly one selector",
+		"message": "`:global(...)` must contain exactly one selector",
 		"start": {
 			"line": 2,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-selector-5/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-selector-5/errors.json
index b1d79c25b8..5317179d5b 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-selector-5/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-selector-5/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector",
-		"message": ":global(...) must contain exactly one selector",
+		"message": "`:global(...)` must contain exactly one selector",
 		"start": {
 			"line": 5,
 			"column": 1
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-selector-6/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-selector-6/errors.json
index b1d79c25b8..5317179d5b 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-selector-6/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-selector-6/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector",
-		"message": ":global(...) must contain exactly one selector",
+		"message": "`:global(...)` must contain exactly one selector",
 		"start": {
 			"line": 5,
 			"column": 1
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-selector-list/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-selector-list/errors.json
index e9261e5e1c..406fd6129c 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-selector-list/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-selector-list/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector_list",
-		"message": ":global(...) must not contain type or universal selectors when used in a compound selector",
+		"message": "`:global(...)` must not contain type or universal selectors when used in a compound selector",
 		"start": {
 			"line": 20,
 			"column": 6
diff --git a/packages/svelte/tests/validator/samples/css-invalid-global-selector/errors.json b/packages/svelte/tests/validator/samples/css-invalid-global-selector/errors.json
index 3d96fbc1ff..3d8ae68ec0 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-global-selector/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-global-selector/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_global_invalid_selector",
-		"message": ":global(...) must contain exactly one selector",
+		"message": "`:global(...)` must contain exactly one selector",
 		"start": {
 			"line": 11,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/css-invalid-type-selector-placement/errors.json b/packages/svelte/tests/validator/samples/css-invalid-type-selector-placement/errors.json
index e7c461b699..5c75d86774 100644
--- a/packages/svelte/tests/validator/samples/css-invalid-type-selector-placement/errors.json
+++ b/packages/svelte/tests/validator/samples/css-invalid-type-selector-placement/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "css_type_selector_invalid_placement",
-		"message": ":global(...) must not be followed with a type selector",
+		"message": "`:global(...)` must not be followed by a type selector",
 		"start": {
 			"line": 17,
 			"column": 14
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index b393174e0f..9de214c847 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1322,17 +1322,32 @@ declare module 'svelte/compiler' {
 			metadata: {
 				parent_rule: null | Rule;
 				has_local_selectors: boolean;
+				/**
+				 * `true` if the rule contains a `:global` selector, and therefore everything inside should be unscoped
+				 */
 				is_global_block: boolean;
 			};
 		}
 
+		/**
+		 * A list of selectors, e.g. `a, b, c {}`
+		 */
 		export interface SelectorList extends BaseNode {
 			type: 'SelectorList';
+			/**
+			 * The `a`, `b` and `c` in `a, b, c {}`
+			 */
 			children: ComplexSelector[];
 		}
 
+		/**
+		 * A complex selector, e.g. `a b c {}`
+		 */
 		export interface ComplexSelector extends BaseNode {
 			type: 'ComplexSelector';
+			/**
+			 * The `a`, `b` and `c` in `a b c {}`
+			 */
 			children: RelativeSelector[];
 			metadata: {
 				rule: null | Rule;
@@ -1340,14 +1355,26 @@ declare module 'svelte/compiler' {
 			};
 		}
 
+		/**
+		 * A relative selector, e.g the `a` and `> b` in `a > b {}`
+		 */
 		export interface RelativeSelector extends BaseNode {
 			type: 'RelativeSelector';
+			/**
+			 * In `a > b`, `> b` forms one relative selector, and `>` is the combinator. `null` for the first selector.
+			 */
 			combinator: null | Combinator;
+			/**
+			 * The `b:is(...)` in `> b:is(...)`
+			 */
 			selectors: SimpleSelector[];
 			metadata: {
-				/** :global(..) */
+				/**
+				 * `true` if the whole selector is unscoped, e.g. `:global(...)` or `:global` or `:global.x`.
+				 * Selectors like `:global(...).x` are not considered global, because they still need scoping.
+				 */
 				is_global: boolean;
-				/** :root, :host, ::view-transition */
+				/** `:root`, `:host`, `::view-transition`, or selectors after a `:global` */
 				is_global_like: boolean;
 				scoped: boolean;
 			};
diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
index e85ee2d529..5c475b7ec8 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
@@ -202,9 +202,18 @@ This is because the Svelte compiler treated the assignment to `foo.value` as an
 
 Assignments to destructured parts of a `@const` declaration are no longer allowed. It was an oversight that this was ever allowed.
 
-### Stricter CSS `:global` selector validation
+### :is(...) and :where(...) are scoped
 
-Previously, a compound selector starting with a global modifier which has universal or type selectors (like `:global(span).foo`) was valid. In Svelte 5, this is a validation error instead. The reason is that in this selector the resulting CSS would be equivalent to one without `:global` - in other words, `:global` is ignored in this case.
+Previously, Svelte did not analyse selectors inside `:is(...)` and `:where(...)`, effectively treating them as global. Svelte 5 analyses them in the context of the current component. As such, some selectors may now be treated as unused if they were relying on this treatment. To fix this, use `:global(...)` inside the `:is(...)/:where(...)` selectors.
+
+When using Tailwind's `@apply` directive, add a `:global` selector to preserve rules that use Tailwind-generated `:is(...)` selectors:
+
+```diff
+- main {
++ main :global {
+	@apply bg-blue-100 dark:bg-blue-900
+}
+```
 
 ### CSS hash position no longer deterministic
 

From ba5f5f38b1e865215b3fb1e9731ce0dd64193c52 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 25 Jul 2024 13:04:39 -0400
Subject: [PATCH 005/196] chore: tweak event delegation docs (#12607)

---
 .../docs/02-template-syntax/02-basic-markup.md       | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/documentation/docs/02-template-syntax/02-basic-markup.md b/documentation/docs/02-template-syntax/02-basic-markup.md
index a97f8b84e6..b8e2632319 100644
--- a/documentation/docs/02-template-syntax/02-basic-markup.md
+++ b/documentation/docs/02-template-syntax/02-basic-markup.md
@@ -110,18 +110,18 @@ Because events are just attributes, the same rules as for attributes apply:
 - you can spread them: `<button {...thisSpreadContainsEventAttributes}>click me</button>`
 - component events are just (callback) properties and don't need a separate concept
 
-Timing-wise, event attributes always fire after events from bindings (e.g. `oninput` always fires after an update to `bind:value`). Under the hood, events are either listened to directly through `addEventListener`, or the event is delegated.
+Timing-wise, event attributes always fire after events from bindings (e.g. `oninput` always fires after an update to `bind:value`). Under the hood, some event handlers are attached directly with `addEventListener`, while others are _delegated_.
 
 ### Event delegation
 
-To reduce the memory footprint and increase performance, Svelte uses a technique called event delegation. This means that certain events are only listened to once at the application root, invoking a handler that then traverses the event call path and invokes listeners along the way.
+To reduce memory footprint and increase performance, Svelte uses a technique called event delegation. This means that for certain events — see the list below — a single event listener at the application root takes responsibility for running any handlers on the event's path.
 
-There are a few gotchas you need to be aware of when it comes to event delegation:
+There are a few gotchas to be aware of:
 
-- when you manually dispatch an event with the same name as one of the delegated ones, make sure to set the `{ bubbles: true }` option
-- when listening to events programmatically (i.e. not through `<button onclick={...}>` but through `node.addEventListener`), be careful to not call `stopPropagation` or else the delegated event handler won't be reached and handlers won't be invoked. Similarly, event listeners added manually and higher up the DOM tree will be invoked _before_ events that are delegated and deeper down the DOM tree (because the actual event reaction happens in the delegated handler at the root). For these reasons it's best to use `on` (which properly handles `stopPropagation`) from `svelte/events` instead of `addEventListener` to make sure the chain of events is preserved
+- when you manually dispatch an event with a delegated listener, make sure to set the `{ bubbles: true }` option or it won't reach the application root
+- when using `addEventListener` directly, avoid calling `stopPropagation` or the event won't reach the application root and handlers won't be invoked. Similarly, handlers added manually inside the application root will run _before_ handlers added declaratively deeper in the DOM (with e.g. `onclick={...}`), in both capturing and bubbling phases. For these reasons it's better to use the `on` function imported from `svelte/events` rather than `addEventListener`, as it will ensure that order is preserved and `stopPropagation` is handled correctly.
 
-The following events are delegated:
+The following event handlers are delegated:
 
 - `beforeinput`
 - `click`

From ff2775374213bffe5b284a8a6b913f4fb46c77a2 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 25 Jul 2024 13:05:03 -0400
Subject: [PATCH 006/196] Version Packages (next) (#12583)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  5 +++++
 packages/svelte/CHANGELOG.md   | 14 ++++++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 0053d647ed..c158fdf15e 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -272,11 +272,13 @@
     "hip-garlics-tap",
     "hip-months-breathe",
     "hip-pumpkins-boil",
+    "hip-stingrays-teach",
     "honest-buses-add",
     "honest-dragons-turn",
     "honest-icons-change",
     "honest-nails-share",
     "honest-pans-kick",
+    "honest-phones-flash",
     "hot-cooks-repair",
     "hot-jobs-tap",
     "hot-rivers-punch",
@@ -444,6 +446,7 @@
     "plenty-elephants-fry",
     "plenty-items-build",
     "plenty-starfishes-dress",
+    "plenty-turkeys-raise",
     "plenty-zoos-fix",
     "polite-dolphins-care",
     "polite-peas-mate",
@@ -467,6 +470,7 @@
     "proud-pets-hang",
     "proud-queens-sniff",
     "purple-dragons-peel",
+    "quick-pumpkins-study",
     "quiet-apricots-dream",
     "quiet-berries-end",
     "quiet-berries-explode",
@@ -567,6 +571,7 @@
     "slimy-walls-draw",
     "slow-beds-shave",
     "slow-chefs-dream",
+    "slow-gorillas-yawn",
     "slow-kids-sparkle",
     "slow-ligers-enjoy",
     "slow-plums-chew",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index cca5e60922..acbf01165c 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,19 @@
 # svelte
 
+## 5.0.0-next.199
+
+### Patch Changes
+
+- fix: add missing hydration mismatch call-site ([#12604](https://github.com/sveltejs/svelte/pull/12604))
+
+- fix: apply dynamic event fixes to OnDirective ([#12582](https://github.com/sveltejs/svelte/pull/12582))
+
+- fix: ensure directives run in sequential order ([#12591](https://github.com/sveltejs/svelte/pull/12591))
+
+- fix: tweak element_invalid_self_closing_tag to exclude namespace ([#12585](https://github.com/sveltejs/svelte/pull/12585))
+
+- breaking: avoid flushing queued updates on mount/hydrate ([#12602](https://github.com/sveltejs/svelte/pull/12602))
+
 ## 5.0.0-next.198
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 6b66a9716e..781e6ca207 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.198",
+  "version": "5.0.0-next.199",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 645388cdda..07b9d46c23 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.198';
+export const VERSION = '5.0.0-next.199';
 export const PUBLIC_VERSION = '5';

From beea5c3772051e2ac271a055d6d879dcf2554048 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 25 Jul 2024 13:07:48 -0400
Subject: [PATCH 007/196] Version Packages (next) (#12609)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/pre.json          | 1 +
 packages/svelte/CHANGELOG.md | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index c158fdf15e..a21f3fb3e3 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -700,6 +700,7 @@
     "tough-radios-punch",
     "tough-tomatoes-explain",
     "tricky-avocados-play",
+    "tricky-balloons-care",
     "tricky-ears-shout",
     "tricky-laws-bathe",
     "twelve-beans-drive",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index acbf01165c..4114b05835 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -14,6 +14,8 @@
 
 - breaking: avoid flushing queued updates on mount/hydrate ([#12602](https://github.com/sveltejs/svelte/pull/12602))
 
+- feat: allow `:global` in more places ([#12560](https://github.com/sveltejs/svelte/pull/12560))
+
 ## 5.0.0-next.198
 
 ### Patch Changes

From c66d2cfcc1c9e6f170ef63319078d747090db2f2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 25 Jul 2024 17:39:18 -0400
Subject: [PATCH 008/196] feat: better code generation for `let:` directives in
 SSR mode (#12611)

* better code generation for slot props in SSR

* simplify

* remove getters mechanism from server compiler

* changeset

* no need to use getters in SSR mode

* fix comment
---
 .changeset/stupid-bottles-lay.md              |  5 ++
 .../phases/3-transform/client/types.d.ts      |  8 +-
 .../3-transform/server/transform-server.js    |  6 +-
 .../server/visitors/LetDirective.js           | 40 ----------
 .../server/visitors/RegularElement.js         |  1 -
 .../server/visitors/SlotElement.js            | 14 +---
 .../server/visitors/SvelteElement.js          |  1 -
 .../server/visitors/SvelteFragment.js         | 19 +----
 .../server/visitors/shared/component.js       | 77 +++++++++++++------
 .../server/visitors/shared/element.js         |  8 +-
 .../server/visitors/shared/utils.js           |  5 --
 .../compiler/phases/3-transform/types.d.ts    |  6 --
 .../svelte/src/compiler/utils/builders.js     |  3 +-
 packages/svelte/src/internal/server/index.js  |  8 +-
 .../_expected/server/index.svelte.js          |  2 +-
 15 files changed, 75 insertions(+), 128 deletions(-)
 create mode 100644 .changeset/stupid-bottles-lay.md
 delete mode 100644 packages/svelte/src/compiler/phases/3-transform/server/visitors/LetDirective.js

diff --git a/.changeset/stupid-bottles-lay.md b/.changeset/stupid-bottles-lay.md
new file mode 100644
index 0000000000..e1276d3420
--- /dev/null
+++ b/.changeset/stupid-bottles-lay.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: better code generation for `let:` directives in SSR mode
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
index 3dbf5dc292..15cc09cf8b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
@@ -3,7 +3,8 @@ import type {
 	Statement,
 	LabeledStatement,
 	Identifier,
-	PrivateIdentifier
+	PrivateIdentifier,
+	Expression
 } from 'estree';
 import type { Namespace, SvelteNode, ValidatedCompileOptions } from '#compiler';
 import type { TransformState } from '../types.js';
@@ -22,6 +23,11 @@ export interface ClientTransformState extends TransformState {
 
 	/** The $: calls, which will be ordered in the end */
 	readonly legacy_reactive_statements: Map<LabeledStatement, Statement>;
+	/**
+	 * A map of `[name, node]` pairs, where `Identifier` nodes matching `name`
+	 * will be replaced with `node` (e.g. `x` -> `$.get(x)`)
+	 */
+	readonly getters: Record<string, Expression | ((id: Identifier) => Expression)>;
 }
 
 export interface ComponentClientTransformState extends ClientTransformState {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
index f18df26eb4..2cc8a5b975 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
@@ -23,7 +23,6 @@ import { Identifier } from './visitors/Identifier.js';
 import { IfBlock } from './visitors/IfBlock.js';
 import { KeyBlock } from './visitors/KeyBlock.js';
 import { LabeledStatementLegacy } from './visitors/LabeledStatement.js';
-import { LetDirective } from './visitors/LetDirective.js';
 import { MemberExpressionRunes } from './visitors/MemberExpression.js';
 import { PropertyDefinitionRunes } from './visitors/PropertyDefinition.js';
 import { RegularElement } from './visitors/RegularElement.js';
@@ -79,7 +78,6 @@ const template_visitors = {
 	HtmlTag,
 	IfBlock,
 	KeyBlock,
-	LetDirective,
 	RegularElement,
 	RenderTag,
 	SlotElement,
@@ -113,7 +111,6 @@ export function server_component(analysis, options) {
 		namespace: options.namespace,
 		preserve_whitespace: options.preserveWhitespace,
 		private_derived: new Map(),
-		getters: {},
 		skip_hydration_boundaries: false
 	};
 
@@ -422,8 +419,7 @@ export function server_module(analysis, options) {
 		// to be present for `javascript_visitors_legacy` and so is included in module
 		// transform state as well as component transform state
 		legacy_reactive_statements: new Map(),
-		private_derived: new Map(),
-		getters: {}
+		private_derived: new Map()
 	};
 
 	const module = /** @type {Program} */ (
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/LetDirective.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/LetDirective.js
deleted file mode 100644
index 17c3260bee..0000000000
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/LetDirective.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/** @import { LetDirective } from '#compiler' */
-/** @import { ComponentContext } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
-
-/**
- * @param {LetDirective} node
- * @param {ComponentContext} context
- */
-export function LetDirective(node, context) {
-	if (node.expression === null || node.expression.type === 'Identifier') {
-		const name = node.expression === null ? node.name : node.expression.name;
-		return b.const(name, b.member(b.id('$$slotProps'), b.id(node.name)));
-	}
-
-	const name = context.state.scope.generate(node.name);
-	const bindings = context.state.scope.get_bindings(node);
-
-	for (const binding of bindings) {
-		context.state.getters[binding.node.name] = b.member(b.id(name), b.id(binding.node.name));
-	}
-
-	return b.const(
-		name,
-		b.call(
-			b.thunk(
-				b.block([
-					b.let(
-						node.expression.type === 'ObjectExpression'
-							? // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
-								b.object_pattern(node.expression.properties)
-							: // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
-								b.array_pattern(node.expression.elements),
-						b.member(b.id('$$slotProps'), b.id(node.name))
-					),
-					b.return(b.object(bindings.map((binding) => b.init(binding.node.name, binding.node))))
-				])
-			)
-		)
-	);
-}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
index 622e8138a2..66ad5ed72c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
@@ -19,7 +19,6 @@ export function RegularElement(node, context) {
 	/** @type {ComponentServerTransformState} */
 	const state = {
 		...context.state,
-		getters: { ...context.state.getters },
 		namespace,
 		preserve_whitespace:
 			context.state.preserve_whitespace ||
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js
index d226e7bd27..4111b37861 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js
@@ -15,9 +15,6 @@ export function SlotElement(node, context) {
 	/** @type {Expression[]} */
 	const spreads = [];
 
-	/** @type {ExpressionStatement[]} */
-	const lets = [];
-
 	/** @type {Expression} */
 	let expression = b.call('$.default_slot', b.id('$$props'));
 
@@ -30,20 +27,11 @@ export function SlotElement(node, context) {
 			if (attribute.name === 'name') {
 				expression = b.member(b.member_id('$$props.$$slots'), value, true, true);
 			} else if (attribute.name !== 'slot') {
-				if (attribute.metadata.dynamic) {
-					props.push(b.get(attribute.name, [b.return(value)]));
-				} else {
-					props.push(b.init(attribute.name, value));
-				}
+				props.push(b.init(attribute.name, value));
 			}
-		} else if (attribute.type === 'LetDirective') {
-			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
 		}
 	}
 
-	// Let bindings first, they can be used on attributes
-	context.state.init.push(...lets);
-
 	const props_expression =
 		spreads.length === 0
 			? b.object(props)
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
index 20422b635f..35fda98235 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
@@ -27,7 +27,6 @@ export function SvelteElement(node, context) {
 
 	const state = {
 		...context.state,
-		getteres: { ...context.state.getters },
 		namespace: determine_namespace_for_children(node, context.state.namespace),
 		template: [],
 		init: []
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteFragment.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteFragment.js
index 310cc567a9..1b73ae7cfc 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteFragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteFragment.js
@@ -1,4 +1,4 @@
-/** @import { BlockStatement, ExpressionStatement } from 'estree' */
+/** @import { BlockStatement } from 'estree' */
 /** @import { SvelteFragment } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 
@@ -7,20 +7,5 @@
  * @param {ComponentContext} context
  */
 export function SvelteFragment(node, context) {
-	const child_state = {
-		...context.state,
-		getters: { ...context.state.getters }
-	};
-
-	for (const attribute of node.attributes) {
-		if (attribute.type === 'LetDirective') {
-			context.state.template.push(
-				/** @type {ExpressionStatement} */ (context.visit(attribute, child_state))
-			);
-		}
-	}
-
-	const block = /** @type {BlockStatement} */ (context.visit(node.fragment, child_state));
-
-	context.state.template.push(block);
+	context.state.template.push(/** @type {BlockStatement} */ (context.visit(node.fragment)));
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
index 9fb30f7d91..19e0fd6e43 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
@@ -1,5 +1,5 @@
-/** @import { BlockStatement, Expression, ExpressionStatement, Property, Statement } from 'estree' */
-/** @import { Attribute, Component, SvelteComponent, SvelteSelf, TemplateNode, Text } from '#compiler' */
+/** @import { BlockStatement, Expression, Pattern, Property, Statement } from 'estree' */
+/** @import { Attribute, Component, LetDirective, SvelteComponent, SvelteSelf, TemplateNode, Text } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
 import { empty_comment, serialize_attribute_value } from './utils.js';
 import * as b from '../../../../../utils/builders.js';
@@ -17,8 +17,8 @@ export function serialize_inline_component(node, expression, context) {
 	/** @type {Property[]} */
 	const custom_css_props = [];
 
-	/** @type {ExpressionStatement[]} */
-	const lets = [];
+	/** @type {Record<string, LetDirective[]>} */
+	const lets = { default: [] };
 
 	/** @type {Record<string, TemplateNode[]>} */
 	const children = {};
@@ -27,7 +27,9 @@ export function serialize_inline_component(node, expression, context) {
 	 * If this component has a slot property, it is a named slot within another component. In this case
 	 * the slot scope applies to the component itself, too, and not just its children.
 	 */
-	let slot_scope_applies_to_itself = false;
+	const slot_scope_applies_to_itself = node.attributes.some(
+		(node) => node.type === 'Attribute' && node.name === 'slot'
+	);
 
 	/**
 	 * Components may have a children prop and also have child nodes. In this case, we assume
@@ -50,7 +52,9 @@ export function serialize_inline_component(node, expression, context) {
 	}
 	for (const attribute of node.attributes) {
 		if (attribute.type === 'LetDirective') {
-			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+			if (!slot_scope_applies_to_itself) {
+				lets.default.push(attribute);
+			}
 		} else if (attribute.type === 'SpreadAttribute') {
 			props_and_spreads.push(/** @type {Expression} */ (context.visit(attribute)));
 		} else if (attribute.type === 'Attribute') {
@@ -60,10 +64,6 @@ export function serialize_inline_component(node, expression, context) {
 				continue;
 			}
 
-			if (attribute.name === 'slot') {
-				slot_scope_applies_to_itself = true;
-			}
-
 			if (attribute.name === 'children') {
 				has_children_prop = true;
 			}
@@ -90,10 +90,6 @@ export function serialize_inline_component(node, expression, context) {
 		}
 	}
 
-	if (slot_scope_applies_to_itself) {
-		context.state.init.push(...lets);
-	}
-
 	/** @type {Statement[]} */
 	const snippet_declarations = [];
 
@@ -115,13 +111,20 @@ export function serialize_inline_component(node, expression, context) {
 
 		let slot_name = 'default';
 		if (is_element_node(child)) {
-			const attribute = /** @type {Attribute | undefined} */ (
+			const slot = /** @type {Attribute | undefined} */ (
 				child.attributes.find(
 					(attribute) => attribute.type === 'Attribute' && attribute.name === 'slot'
 				)
 			);
-			if (attribute !== undefined) {
-				slot_name = /** @type {Text[]} */ (attribute.value)[0].data;
+
+			if (slot !== undefined) {
+				slot_name = /** @type {Text[]} */ (slot.value)[0].data;
+
+				lets[slot_name] = child.attributes.filter((attribute) => attribute.type === 'LetDirective');
+			} else if (child.type === 'SvelteFragment') {
+				lets.default.push(
+					...child.attributes.filter((attribute) => attribute.type === 'LetDirective')
+				);
 			}
 		}
 
@@ -152,16 +155,40 @@ export function serialize_inline_component(node, expression, context) {
 
 		if (block.body.length === 0) continue;
 
-		const slot_fn = b.arrow(
-			[b.id('$$payload'), b.id('$$slotProps')],
-			b.block([
-				...(slot_name === 'default' && !slot_scope_applies_to_itself ? lets : []),
-				...block.body
-			])
-		);
+		/** @type {Pattern[]} */
+		const params = [b.id('$$payload')];
+
+		if (lets[slot_name].length > 0) {
+			const pattern = b.object_pattern(
+				lets[slot_name].map((node) => {
+					if (node.expression === null) {
+						return b.init(node.name, b.id(node.name));
+					}
+
+					if (node.expression.type === 'ObjectExpression') {
+						// @ts-expect-error it gets parsed as an `ObjectExpression` but is really an `ObjectPattern`
+						return b.init(node.name, b.object_pattern(node.expression.properties));
+					}
+
+					if (node.expression.type === 'ArrayExpression') {
+						// @ts-expect-error it gets parsed as an `ArrayExpression` but is really an `ArrayPattern`
+						return b.init(node.name, b.array_pattern(node.expression.elements));
+					}
+
+					return b.init(node.name, node.expression);
+				})
+			);
+
+			params.push(pattern);
+		}
+
+		const slot_fn = b.arrow(params, b.block(block.body));
 
 		if (slot_name === 'default' && !has_children_prop) {
-			if (lets.length === 0 && children.default.every((node) => node.type !== 'SvelteFragment')) {
+			if (
+				lets.default.length === 0 &&
+				children.default.every((node) => node.type !== 'SvelteFragment')
+			) {
 				// create `children` prop...
 				push_prop(b.prop('init', b.id('children'), slot_fn));
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index 923cc5d512..fbfa4497b0 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -38,9 +38,6 @@ export function serialize_element_attributes(node, context) {
 	/** @type {StyleDirective[]} */
 	const style_directives = [];
 
-	/** @type {ExpressionStatement[]} */
-	const lets = [];
-
 	/** @type {Expression | null} */
 	let content = null;
 
@@ -185,7 +182,7 @@ export function serialize_element_attributes(node, context) {
 		} else if (attribute.type === 'StyleDirective') {
 			style_directives.push(attribute);
 		} else if (attribute.type === 'LetDirective') {
-			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+			// do nothing, these are handled inside `serialize_inline_component`
 		} else {
 			context.visit(attribute);
 		}
@@ -212,9 +209,6 @@ export function serialize_element_attributes(node, context) {
 		}
 	}
 
-	// Let bindings first, they can be used on attributes
-	context.state.init.push(...lets);
-
 	if (has_spread) {
 		serialize_element_spread_attributes(
 			node,
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
index 1d48019de6..94f2bd52b7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
@@ -225,11 +225,6 @@ export function serialize_get_binding(node, state) {
 		);
 	}
 
-	if (Object.hasOwn(state.getters, node.name)) {
-		const getter = state.getters[node.name];
-		return typeof getter === 'function' ? getter(node) : getter;
-	}
-
 	return node;
 }
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/types.d.ts
index cd0acaf995..a16fd73a2d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/types.d.ts
@@ -1,16 +1,10 @@
 import type { Scope } from '../scope.js';
 import type { SvelteNode, ValidatedModuleCompileOptions } from '#compiler';
 import type { Analysis } from '../types.js';
-import type { Expression, Identifier } from 'estree';
 
 export interface TransformState {
 	readonly analysis: Analysis;
 	readonly options: ValidatedModuleCompileOptions;
 	readonly scope: Scope;
 	readonly scopes: Map<SvelteNode, Scope>;
-	/**
-	 * A map of `[name, node]` pairs, where `Identifier` nodes matching `name`
-	 * will be replaced with `node` (e.g. `x` -> `$.get(x)`)
-	 */
-	readonly getters: Record<string, Expression | ((id: Identifier) => Expression)>;
 }
diff --git a/packages/svelte/src/compiler/utils/builders.js b/packages/svelte/src/compiler/utils/builders.js
index 85d7c9471d..de087ffc8c 100644
--- a/packages/svelte/src/compiler/utils/builders.js
+++ b/packages/svelte/src/compiler/utils/builders.js
@@ -320,10 +320,11 @@ export function object(properties) {
 }
 
 /**
- * @param {Array<ESTree.RestElement | ESTree.AssignmentProperty>} properties
+ * @param {Array<ESTree.RestElement | ESTree.AssignmentProperty | ESTree.Property>} properties
  * @returns {ESTree.ObjectPattern}
  */
 export function object_pattern(properties) {
+	// @ts-expect-error the types appear to be wrong
 	return { type: 'ObjectPattern', properties };
 }
 
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index a6d70d21de..ee69621a88 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -428,12 +428,10 @@ export async function value_or_fallback_async(value, fallback) {
  * @returns {void}
  */
 export function slot(payload, slot_fn, slot_props, fallback_fn) {
-	if (slot_fn === undefined) {
-		if (fallback_fn !== null) {
-			fallback_fn();
-		}
-	} else {
+	if (slot_fn !== undefined) {
 		slot_fn(payload, slot_props);
+	} else {
+		fallback_fn?.();
 	}
 }
 
diff --git a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js
index 661c34a48d..05b343d821 100644
--- a/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/function-prop-no-getter/_expected/server/index.svelte.js
@@ -13,7 +13,7 @@ export default function Function_prop_no_getter($$payload) {
 		onmousedown: () => count += 1,
 		onmouseup,
 		onmouseenter: () => count = plusOne(count),
-		children: ($$payload, $$slotProps) => {
+		children: ($$payload) => {
 			$$payload.out += `<!---->clicks: ${$.escape(count)}`;
 		},
 		$$slots: { default: true }

From 993fff0045c92571af6722dd9e12433ba1d2bfc7 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Fri, 26 Jul 2024 00:00:24 +0100
Subject: [PATCH 009/196] fix: tune hydrate mismatch logic to catch more cases
 (#12612)

---
 packages/svelte/src/internal/client/render.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index 7f6b239114..894e0f62c6 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -133,6 +133,7 @@ export function hydrate(component, options) {
 		const instance = _mount(component, { ...options, anchor });
 
 		if (
+			hydrate_node === null ||
 			hydrate_node.nodeType !== 8 ||
 			/** @type {Comment} */ (hydrate_node).data !== HYDRATION_END
 		) {

From 97d5cf178f98bb02d2d4d9329204819dc17fffc4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 26 Jul 2024 04:11:28 -0400
Subject: [PATCH 010/196] chore: simplify assignments in server code (#12614)

Also fixes an uncovered bug where store `+=/-=` etc assignments were not serialized correctly on the server
---
 .changeset/violet-otters-carry.md             |   5 +
 .../phases/3-transform/client/utils.js        |   2 +-
 .../server/visitors/AssignmentExpression.js   | 115 ++++++++++++++-
 .../server/visitors/shared/utils.js           | 135 +-----------------
 packages/svelte/src/internal/client/index.js  |   2 +-
 .../src/internal/client/reactivity/store.js   |   2 +-
 packages/svelte/src/internal/server/index.js  |   2 +-
 .../samples/store-assignments/_config.js      |   5 +
 .../samples/store-assignments/main.svelte     |  11 ++
 9 files changed, 138 insertions(+), 141 deletions(-)
 create mode 100644 .changeset/violet-otters-carry.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/store-assignments/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/store-assignments/main.svelte

diff --git a/.changeset/violet-otters-carry.md b/.changeset/violet-otters-carry.md
new file mode 100644
index 0000000000..553662c31f
--- /dev/null
+++ b/.changeset/violet-otters-carry.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly update stores when reassigning with operator other than `=`
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 b68629cd4b..b9456f8653 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -382,7 +382,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 				}
 
 				return b.call(
-					'$.mutate_store',
+					'$.store_mutate',
 					serialize_get_binding(b.id(left_name), state),
 					b.assignment(node.operator, /** @type {Pattern}} */ (visit_node(node.left)), value),
 					b.call('$.untrack', b.id('$' + left_name))
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
index f22f67db73..3cee0a4eb8 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
@@ -1,11 +1,118 @@
-/** @import { AssignmentExpression } from 'estree' */
-/** @import { Context } from '../types.js' */
-import { serialize_set_binding } from './shared/utils.js';
+/** @import { AssignmentExpression, AssignmentOperator, BinaryOperator, Expression, Node, Pattern } from 'estree' */
+/** @import { SvelteNode } from '#compiler' */
+/** @import { Context, ServerTransformState } from '../types.js' */
+import * as b from '../../../../utils/builders.js';
+import { extract_paths } from '../../../../utils/ast.js';
+import { serialize_get_binding } from './shared/utils.js';
 
 /**
  * @param {AssignmentExpression} node
  * @param {Context} context
  */
 export function AssignmentExpression(node, context) {
-	return serialize_set_binding(node, context, context.next);
+	const parent = /** @type {Node} */ (context.path.at(-1));
+	const is_standalone = parent.type.endsWith('Statement');
+
+	if (
+		node.left.type === 'ArrayPattern' ||
+		node.left.type === 'ObjectPattern' ||
+		node.left.type === 'RestElement'
+	) {
+		const value = /** @type {Expression} */ (context.visit(node.right));
+		const should_cache = value.type !== 'Identifier';
+		const rhs = should_cache ? b.id('$$value') : value;
+
+		let changed = false;
+
+		const assignments = extract_paths(node.left).map((path) => {
+			const value = path.expression?.(rhs);
+
+			let assignment = serialize_assignment('=', path.node, value, context);
+			if (assignment !== null) changed = true;
+
+			return assignment ?? b.assignment('=', path.node, value);
+		});
+
+		if (!changed) {
+			// No change to output -> nothing to transform -> we can keep the original assignment
+			return context.next();
+		}
+
+		const sequence = b.sequence(assignments);
+
+		if (!is_standalone) {
+			// this is part of an expression, we need the sequence to end with the value
+			sequence.expressions.push(rhs);
+		}
+
+		if (should_cache) {
+			// the right hand side is a complex expression, wrap in an IIFE to cache it
+			return b.call(b.arrow([rhs], sequence), value);
+		}
+
+		return sequence;
+	}
+
+	return serialize_assignment(node.operator, node.left, node.right, context) || context.next();
+}
+
+/**
+ * Only returns an expression if this is not a `$store` assignment, as others can be kept as-is
+ * @param {AssignmentOperator} operator
+ * @param {Pattern} left
+ * @param {Expression} right
+ * @param {import('zimmerframe').Context<SvelteNode, ServerTransformState>} context
+ * @returns {Expression | null}
+ */
+function serialize_assignment(operator, left, right, context) {
+	let object = left;
+
+	while (object.type === 'MemberExpression') {
+		// @ts-expect-error
+		object = object.object;
+	}
+
+	if (object.type !== 'Identifier' || !is_store_name(object.name)) {
+		return null;
+	}
+
+	const name = object.name.slice(1);
+
+	if (!context.state.scope.get(name)) {
+		return null;
+	}
+
+	if (object === left) {
+		let value = /** @type {Expression} */ (context.visit(right));
+
+		if (operator !== '=') {
+			// turn `x += 1` into `x = x + 1`
+			value = b.binary(
+				/** @type {BinaryOperator} */ (operator.slice(0, -1)),
+				serialize_get_binding(left, context.state),
+				value
+			);
+		}
+
+		return b.call('$.store_set', b.id(name), value);
+	}
+
+	return b.call(
+		'$.store_mutate',
+		b.assignment('??=', b.id('$$store_subs'), b.object([])),
+		b.literal(object.name),
+		b.id(name),
+		b.assignment(
+			operator,
+			/** @type {Pattern} */ (context.visit(left)),
+			/** @type {Expression} */ (context.visit(right))
+		)
+	);
+}
+
+/**
+ * @param {string} name
+ */
+function is_store_name(name) {
+	return name[0] === '$' && /[A-Za-z_]/.test(name[1]);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
index 94f2bd52b7..f7dc979e4c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
@@ -1,7 +1,7 @@
-/** @import {  AssignmentExpression, AssignmentOperator, BinaryOperator, Expression, Identifier, Node, Pattern, Statement, TemplateElement } from 'estree' */
+/** @import {  AssignmentOperator, Expression, Identifier, Node, Statement, TemplateElement } from 'estree' */
 /** @import { Attribute, Comment, ExpressionTag, SvelteNode, Text } from '#compiler' */
 /** @import { ComponentContext, ServerTransformState } from '../../types.js' */
-import { extract_paths } from '../../../../../utils/ast.js';
+
 import { escape_html } from '../../../../../../escaping.js';
 import {
 	BLOCK_CLOSE,
@@ -227,134 +227,3 @@ export function serialize_get_binding(node, state) {
 
 	return node;
 }
-
-/**
- * @param {AssignmentExpression} node
- * @param {import('zimmerframe').Context<SvelteNode, ServerTransformState>} context
- * @param {() => any} fallback
- * @returns {Expression}
- */
-export function serialize_set_binding(node, context, fallback) {
-	const { state, visit } = context;
-
-	if (
-		node.left.type === 'ArrayPattern' ||
-		node.left.type === 'ObjectPattern' ||
-		node.left.type === 'RestElement'
-	) {
-		// Turn assignment into an IIFE, so that `$.set` calls etc don't produce invalid code
-		const tmp_id = context.state.scope.generate('tmp');
-
-		/** @type {AssignmentExpression[]} */
-		const original_assignments = [];
-
-		/** @type {Expression[]} */
-		const assignments = [];
-
-		const paths = extract_paths(node.left);
-
-		for (const path of paths) {
-			const value = path.expression?.(b.id(tmp_id));
-			const assignment = b.assignment('=', path.node, value);
-			original_assignments.push(assignment);
-			assignments.push(serialize_set_binding(assignment, context, () => assignment));
-		}
-
-		if (assignments.every((assignment, i) => assignment === original_assignments[i])) {
-			// No change to output -> nothing to transform -> we can keep the original assignment
-			return fallback();
-		}
-
-		return b.call(
-			b.thunk(
-				b.block([
-					b.const(tmp_id, /** @type {Expression} */ (visit(node.right))),
-					b.stmt(b.sequence(assignments)),
-					b.return(b.id(tmp_id))
-				])
-			)
-		);
-	}
-
-	if (node.left.type !== 'Identifier' && node.left.type !== 'MemberExpression') {
-		throw new Error(`Unexpected assignment type ${node.left.type}`);
-	}
-
-	let left = node.left;
-
-	while (left.type === 'MemberExpression') {
-		// @ts-expect-error
-		left = left.object;
-	}
-
-	if (left.type !== 'Identifier') {
-		return fallback();
-	}
-
-	const is_store = is_store_name(left.name);
-	const left_name = is_store ? left.name.slice(1) : left.name;
-	const binding = state.scope.get(left_name);
-
-	if (!binding) return fallback();
-
-	if (binding.mutation !== null) {
-		return binding.mutation(node, context);
-	}
-
-	if (
-		binding.kind !== 'state' &&
-		binding.kind !== 'frozen_state' &&
-		binding.kind !== 'prop' &&
-		binding.kind !== 'bindable_prop' &&
-		binding.kind !== 'each' &&
-		binding.kind !== 'legacy_reactive' &&
-		!is_store
-	) {
-		// TODO error if it's a computed (or rest prop)? or does that already happen elsewhere?
-		return fallback();
-	}
-
-	const value = get_assignment_value(node, context);
-	if (left === node.left) {
-		if (is_store) {
-			return b.call('$.store_set', b.id(left_name), /** @type {Expression} */ (visit(node.right)));
-		}
-		return fallback();
-	} else if (is_store) {
-		return b.call(
-			'$.mutate_store',
-			b.assignment('??=', b.id('$$store_subs'), b.object([])),
-			b.literal(left.name),
-			b.id(left_name),
-			b.assignment(node.operator, /** @type {Pattern} */ (visit(node.left)), value)
-		);
-	}
-	return fallback();
-}
-
-/**
- * @param {AssignmentExpression} node
- * @param {Pick<import('zimmerframe').Context<SvelteNode, ServerTransformState>, 'visit' | 'state'>} context
- */
-function get_assignment_value(node, { state, visit }) {
-	if (node.left.type === 'Identifier') {
-		const operator = node.operator;
-		return operator === '='
-			? /** @type {Expression} */ (visit(node.right))
-			: // turn something like x += 1 into x = x + 1
-				b.binary(
-					/** @type {BinaryOperator} */ (operator.slice(0, -1)),
-					serialize_get_binding(node.left, state),
-					/** @type {Expression} */ (visit(node.right))
-				);
-	}
-
-	return /** @type {Expression} */ (visit(node.right));
-}
-
-/**
- * @param {string} name
- */
-function is_store_name(name) {
-	return name[0] === '$' && /[A-Za-z_]/.test(name[1]);
-}
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index edfa40cdd4..c70cb6674b 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -116,7 +116,7 @@ export {
 } from './reactivity/props.js';
 export {
 	invalidate_store,
-	mutate_store,
+	store_mutate,
 	setup_stores,
 	store_get,
 	store_set,
diff --git a/packages/svelte/src/internal/client/reactivity/store.js b/packages/svelte/src/internal/client/reactivity/store.js
index 0f491fdaca..e28202aaf0 100644
--- a/packages/svelte/src/internal/client/reactivity/store.js
+++ b/packages/svelte/src/internal/client/reactivity/store.js
@@ -119,7 +119,7 @@ export function setup_stores() {
  * @param {V} new_value  the new store value
  * @template V
  */
-export function mutate_store(store, expression, new_value) {
+export function store_mutate(store, expression, new_value) {
 	store.set(new_value);
 	return expression;
 }
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index ee69621a88..b3ced7d828 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -362,7 +362,7 @@ export function store_set(store, value) {
  * @param {Store<V>} store
  * @param {any} expression
  */
-export function mutate_store(store_values, store_name, store, expression) {
+export function store_mutate(store_values, store_name, store, expression) {
 	store_set(store, store_get(store_values, store_name, store));
 	return expression;
 }
diff --git a/packages/svelte/tests/runtime-runes/samples/store-assignments/_config.js b/packages/svelte/tests/runtime-runes/samples/store-assignments/_config.js
new file mode 100644
index 0000000000..59a0b48d7b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-assignments/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<p>3</p>'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/store-assignments/main.svelte b/packages/svelte/tests/runtime-runes/samples/store-assignments/main.svelte
new file mode 100644
index 0000000000..a77e6475a2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-assignments/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	import { writable } from 'svelte/store';
+
+	const count = writable(0);
+
+	$count += 1;
+	$count += 1;
+	$count += 1;
+</script>
+
+<p>{$count}</p>

From a212b0d2fe149c3c57faa0520d461c59a9d45f67 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 26 Jul 2024 04:11:57 -0400
Subject: [PATCH 011/196] chore: remove obsolete comment (#12615)

---
 packages/svelte/src/internal/client/render.js | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index 894e0f62c6..2d784872f7 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -146,9 +146,6 @@ export function hydrate(component, options) {
 		return /**  @type {Exports} */ (instance);
 	} catch (error) {
 		if (error === HYDRATION_ERROR) {
-			// TODO it's possible for event listeners to have been added and
-			// not removed, e.g. with `<svelte:window>` or `<svelte:document>`
-
 			if (options.recover === false) {
 				e.hydration_failed();
 			}

From e1728e5a0b78fe5cd34082d6bd01cda6601120db Mon Sep 17 00:00:00 2001
From: btea <2356281422@qq.com>
Date: Sat, 27 Jul 2024 00:22:01 +0800
Subject: [PATCH 012/196] chore: remove unnecessary `\d` (#12619)

`\w` includes `\d`
---
 packages/svelte/src/compiler/utils/mapped_code.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/compiler/utils/mapped_code.js b/packages/svelte/src/compiler/utils/mapped_code.js
index 79a781de49..bb6115e031 100644
--- a/packages/svelte/src/compiler/utils/mapped_code.js
+++ b/packages/svelte/src/compiler/utils/mapped_code.js
@@ -70,7 +70,7 @@ function merge_tables(this_table, other_table) {
 	}
 	return [new_table, idx_map, val_changed, idx_changed];
 }
-const regex_line_token = /([^\d\w\s]|\s+)/g;
+const regex_line_token = /([^\w\s]|\s+)/g;
 /** */
 export class MappedCode {
 	/**

From 0f41689916524d31c5affd1f28298037d45f1c59 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 26 Jul 2024 19:25:34 +0200
Subject: [PATCH 013/196] chore: unskip more tests (#12621)

---
 .../samples/supports-nested-page/_config.js   |  6 ------
 .../escaped-css/_config.js                    |  1 -
 .../action-update-before-destroy/_config.js   | 20 ++++---------------
 .../samples/animation-css/_config.js          | 17 ++++++++--------
 .../samples/before-render-chain/_config.js    |  2 +-
 .../dev-warning-readonly-computed/_config.js  |  4 +---
 .../_config.js                                |  6 +-----
 .../main.svelte                               |  2 +-
 .../_config.js                                |  1 -
 .../_config.js                                |  1 -
 10 files changed, 16 insertions(+), 44 deletions(-)
 delete mode 100644 packages/svelte/tests/css/samples/supports-nested-page/_config.js

diff --git a/packages/svelte/tests/css/samples/supports-nested-page/_config.js b/packages/svelte/tests/css/samples/supports-nested-page/_config.js
deleted file mode 100644
index 148da9b2ee..0000000000
--- a/packages/svelte/tests/css/samples/supports-nested-page/_config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	// TODO JSDOM doesn't support container queries
-	skip: true
-});
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/escaped-css/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/escaped-css/_config.js
index 9ecebdea47..0cbfd63821 100644
--- a/packages/svelte/tests/runtime-browser/custom-elements-samples/escaped-css/_config.js
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/escaped-css/_config.js
@@ -2,7 +2,6 @@ import { test } from '../../assert';
 const tick = () => Promise.resolve();
 
 export default test({
-	skip: true, // TODO: needs inline CSS, decide how to add
 	async test({ assert, target }) {
 		target.innerHTML = '<custom-element></custom-element>';
 		await tick();
diff --git a/packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/_config.js b/packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/_config.js
index 328d67cb2c..2411936d9c 100644
--- a/packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/action-update-before-destroy/_config.js
@@ -2,28 +2,16 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
-	skip: true, // TODO: needs fixing
-
 	html: `
 		<button>Click Me</button>
 		<div>1</div>
 	`,
-	async test({ assert, target, window }) {
+	async test({ assert, target, logs }) {
 		const button = target.querySelector('button');
-		const event = new window.MouseEvent('click');
-		/**
-		 * @type {any[]}
-		 */
-		const messages = [];
-		const log = console.log;
-		console.log = (msg) => messages.push(msg);
 
-		flushSync(() => {
-			// @ts-ignore
-			button.dispatchEvent(event);
-		});
+		button?.click();
+		flushSync();
 
-		console.log = log;
-		assert.deepEqual(messages, ['afterUpdate', 'onDestroy']);
+		assert.deepEqual(logs, ['afterUpdate', 'onDestroy']);
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/animation-css/_config.js b/packages/svelte/tests/runtime-legacy/samples/animation-css/_config.js
index 848da78b2d..b6b601a96b 100644
--- a/packages/svelte/tests/runtime-legacy/samples/animation-css/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/animation-css/_config.js
@@ -1,9 +1,6 @@
-// @ts-nocheck
 import { test } from '../../test';
 
 export default test({
-	skip: true, // TODO: needs fixing
-
 	get props() {
 		return {
 			things: [
@@ -27,7 +24,9 @@ export default test({
 	test({ assert, component, target, raf }) {
 		let divs = target.querySelectorAll('div');
 		divs.forEach((div) => {
+			// @ts-expect-error
 			div.getBoundingClientRect = function () {
+				// @ts-expect-error
 				const index = [...this.parentNode.children].indexOf(this);
 				const top = index * 30;
 
@@ -49,13 +48,13 @@ export default test({
 		];
 
 		divs = target.querySelectorAll('div');
-		assert.ok(~divs[0].style.animation.indexOf('__svelte'));
-		assert.equal(divs[1].style.animation, '');
-		assert.equal(divs[2].style.animation, '');
-		assert.equal(divs[3].style.animation, '');
-		assert.ok(~divs[4].style.animation.indexOf('__svelte'));
+		assert.ok(divs[0].getAnimations().length > 0);
+		assert.equal(divs[1].getAnimations().length, 0);
+		assert.equal(divs[2].getAnimations().length, 0);
+		assert.equal(divs[3].getAnimations().length, 0);
+		assert.ok(divs[4].getAnimations().length > 0);
 
 		raf.tick(100);
-		assert.deepEqual([divs[0].style.animation, divs[4].style.animation], ['', '']);
+		assert.deepEqual([divs[0].getAnimations().length, divs[4].getAnimations().length], [0, 0]);
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/before-render-chain/_config.js b/packages/svelte/tests/runtime-legacy/samples/before-render-chain/_config.js
index c21b68106d..9364bd9f9e 100644
--- a/packages/svelte/tests/runtime-legacy/samples/before-render-chain/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/before-render-chain/_config.js
@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip: true, // TODO: needs fixing
+	mode: ['client', 'hydrate'],
 
 	html: `
 		<span>3</span>
diff --git a/packages/svelte/tests/runtime-legacy/samples/dev-warning-readonly-computed/_config.js b/packages/svelte/tests/runtime-legacy/samples/dev-warning-readonly-computed/_config.js
index 333ad48ba5..8606f012b4 100644
--- a/packages/svelte/tests/runtime-legacy/samples/dev-warning-readonly-computed/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/dev-warning-readonly-computed/_config.js
@@ -1,8 +1,6 @@
 import { test } from '../../test';
 
 export default test({
-	skip: true, // TODO: needs fixing, error message is wrong
-
 	compileOptions: {
 		dev: true
 	},
@@ -17,7 +15,7 @@ export default test({
 			throw new Error('Expected an error');
 		} catch (err) {
 			// @ts-ignore
-			assert.equal(err.message, "<Main>: Cannot set read-only property 'foo'");
+			assert.equal(err.message, 'Cannot set property foo of #<Object> which has only a getter');
 		}
 	}
 });
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-implicit-namespace/_config.js b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-implicit-namespace/_config.js
index 12a0960d87..136dc92f54 100644
--- a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-implicit-namespace/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-implicit-namespace/_config.js
@@ -1,11 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	// This is skipped for now, because it's not clear how to make this work on client-side initial run:
-	// The anchor isn't connected to its parent at the time we can do a runtime check for the namespace, and we
-	// need the parent for this check. (this didn't work in Svelte 4 either)
-	skip: true,
-	html: '<svg><path></path></svg>',
+	html: '<svg xmlns="http://www.w3.org/2000/svg"><path></path></svg>',
 
 	test({ assert, target }) {
 		const svg = target.querySelector('svg');
diff --git a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-implicit-namespace/main.svelte b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-implicit-namespace/main.svelte
index 00069f711c..9d190b7b2d 100644
--- a/packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-implicit-namespace/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/dynamic-element-svg-implicit-namespace/main.svelte
@@ -5,6 +5,6 @@
 	export let path = 'path';
 </script>
 
-<svelte:element this={svg}>
+<svelte:element this={svg} xmlns="http://www.w3.org/2000/svg">
 	<svelte:element this={path}></svelte:element>
 </svelte:element>
diff --git a/packages/svelte/tests/validator/samples/general-siblings-combinator-in-custom-element-selects-slot-fallback/_config.js b/packages/svelte/tests/validator/samples/general-siblings-combinator-in-custom-element-selects-slot-fallback/_config.js
index 6bd925197f..307385cb57 100644
--- a/packages/svelte/tests/validator/samples/general-siblings-combinator-in-custom-element-selects-slot-fallback/_config.js
+++ b/packages/svelte/tests/validator/samples/general-siblings-combinator-in-custom-element-selects-slot-fallback/_config.js
@@ -1,7 +1,6 @@
 import { test } from '../../test';
 
 export default test({
-	skip: true,
 	compileOptions: {
 		customElement: true
 	}
diff --git a/packages/svelte/tests/validator/samples/siblings-combinator-in-custom-element-selects-slot-fallback/_config.js b/packages/svelte/tests/validator/samples/siblings-combinator-in-custom-element-selects-slot-fallback/_config.js
index 6bd925197f..307385cb57 100644
--- a/packages/svelte/tests/validator/samples/siblings-combinator-in-custom-element-selects-slot-fallback/_config.js
+++ b/packages/svelte/tests/validator/samples/siblings-combinator-in-custom-element-selects-slot-fallback/_config.js
@@ -1,7 +1,6 @@
 import { test } from '../../test';
 
 export default test({
-	skip: true,
 	compileOptions: {
 		customElement: true
 	}

From 32af9434bc588655a4d99bb1d330e8bb6d4fbc2a Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 26 Jul 2024 22:05:49 +0200
Subject: [PATCH 014/196] fix: never set custom element props as attributes
 (#12622)

* fix: never set custom element props as attributes

* changeset

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/fifty-toys-invite.md                              | 5 +++++
 .../compiler/phases/3-transform/client/visitors/template.js  | 1 +
 .../samples/attribute-custom-element-inheritance/_config.js  | 3 +--
 3 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fifty-toys-invite.md

diff --git a/.changeset/fifty-toys-invite.md b/.changeset/fifty-toys-invite.md
new file mode 100644
index 0000000000..2dd19c3b04
--- /dev/null
+++ b/.changeset/fifty-toys-invite.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: never set custom element props as attributes inside templates
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index 3e8fff654f..0548d7a143 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -2152,6 +2152,7 @@ export const template_visitors = {
 				}
 
 				if (
+					!is_custom_element &&
 					attribute.name !== 'autofocus' &&
 					(attribute.value === true || is_text_attribute(attribute))
 				) {
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-custom-element-inheritance/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-custom-element-inheritance/_config.js
index 0b5365a9f1..396048c91a 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-custom-element-inheritance/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-custom-element-inheritance/_config.js
@@ -1,8 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	skip: true, // TODO: needs fixing
-
+	mode: ['client'],
 	html: `
 		<my-custom-inheritance-element>Hello World!</my-custom-inheritance-element>
 	`

From c9e9e90659375942bbc2b658d257336257682413 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Fri, 26 Jul 2024 22:07:02 +0200
Subject: [PATCH 015/196] fix: always close tags when namespace is foreign
 (#12623)

---
 .../phases/3-transform/server/visitors/RegularElement.js      | 2 +-
 .../samples/attribute-casing-foreign-namespace/_config.js     | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
index 66ad5ed72c..975038f3ac 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
@@ -95,7 +95,7 @@ export function RegularElement(node, context) {
 		);
 	}
 
-	if (!VoidElements.includes(node.name) && namespace !== 'foreign') {
+	if (!VoidElements.includes(node.name) || namespace === 'foreign') {
 		state.template.push(b.literal(`</${node.name}>`));
 	}
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace/_config.js
index 786e9308d0..5321756cef 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace/_config.js
@@ -1,7 +1,9 @@
 import { test } from '../../test';
 
 export default test({
-	skip: true, // TODO: needs fixing
+	// TODO: needs fixing. Can only be fixed once we also support document.createElementNS-style creation of elements
+	// because the $.template('...') approach has no option to preserve attribute name casing
+	skip: true,
 
 	html: `
 		<page horizontalAlignment="center">

From 1d17677131ceea4cfabce0d067bfc32a91625a60 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 26 Jul 2024 17:45:08 -0400
Subject: [PATCH 016/196] Version Packages (next) (#12613)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  3 +++
 packages/svelte/CHANGELOG.md   | 10 ++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index a21f3fb3e3..945ae7f965 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -180,6 +180,7 @@
     "fifty-masks-give",
     "fifty-rice-wait",
     "fifty-steaks-float",
+    "fifty-toys-invite",
     "five-tigers-search",
     "flat-feet-visit",
     "flat-ghosts-fly",
@@ -626,6 +627,7 @@
     "strong-gifts-smoke",
     "strong-lemons-provide",
     "strong-pans-doubt",
+    "stupid-bottles-lay",
     "stupid-parents-crash",
     "sweet-bottles-check",
     "sweet-mangos-beg",
@@ -720,6 +722,7 @@
     "unlucky-trees-lick",
     "violet-mails-trade",
     "violet-mugs-behave",
+    "violet-otters-carry",
     "violet-pigs-jam",
     "warm-cherries-shake",
     "warm-waves-reply",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 4114b05835..f924237196 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.0.0-next.200
+
+### Patch Changes
+
+- fix: never set custom element props as attributes inside templates ([#12622](https://github.com/sveltejs/svelte/pull/12622))
+
+- feat: better code generation for `let:` directives in SSR mode ([#12611](https://github.com/sveltejs/svelte/pull/12611))
+
+- fix: correctly update stores when reassigning with operator other than `=` ([#12614](https://github.com/sveltejs/svelte/pull/12614))
+
 ## 5.0.0-next.199
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 781e6ca207..698676fddd 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.199",
+  "version": "5.0.0-next.200",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 07b9d46c23..13072c37af 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.199';
+export const VERSION = '5.0.0-next.200';
 export const PUBLIC_VERSION = '5';

From dba4dfaff8aae7602e85f6310764903c2eada345 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sat, 27 Jul 2024 02:22:27 +0200
Subject: [PATCH 017/196] docs: add testing section (#12600)

* docs: add testing section

- explain component and rune testing using Vitest
- explain e2e testing using Playwright

closes #10244
closes #10650

* better examples

* Update documentation/docs/05-misc/02-testing.md

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* Update documentation/docs/05-misc/02-testing.md

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* Update documentation/docs/05-misc/02-testing.md

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* fix

* Update documentation/docs/05-misc/02-testing.md

* Update documentation/docs/05-misc/02-testing.md

Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

* Update documentation/docs/05-misc/02-testing.md

* we normally use single quotes

* Apply suggestions from code review

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* more details on component testing

* extract component testing into its own sub section, reorder a bit

* fix code example

* Update documentation/docs/05-misc/02-testing.md

* Apply suggestions from code review

Co-authored-by: Rich Harris <rich.harris@vercel.com>

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>
---
 documentation/docs/05-misc/02-testing.md | 218 ++++++++++++++++++++++-
 1 file changed, 214 insertions(+), 4 deletions(-)

diff --git a/documentation/docs/05-misc/02-testing.md b/documentation/docs/05-misc/02-testing.md
index caf0b694ed..c1b9d538a4 100644
--- a/documentation/docs/05-misc/02-testing.md
+++ b/documentation/docs/05-misc/02-testing.md
@@ -2,7 +2,217 @@
 title: Testing
 ---
 
-- component testing basics
-- rune testing basics
-- vitest setup
-- e2e
+Testing helps you write and maintain your code and guard against regressions. Testing frameworks help you with that, allowing you to describe assertions or expectations about how your code should behave. Svelte is unopinionated about which testing framework you use — you can write unit tests, integration tests, and end-to-end tests using solutions like [Vitest](https://vitest.dev/), [Jasmine](https://jasmine.github.io/), [Cypress](https://www.cypress.io/) and [Playwright](https://playwright.dev/).
+
+## Unit and integration testing using Vitest
+
+Unit tests allow you to test small isolated parts of your code. Integration tests allow you to test parts of your application to see if they work together. If you're using Vite (including via SvelteKit), we recommend using [Vitest](https://vitest.dev/).
+
+To get started, install Vitest:
+
+```bash
+npm install -D vitest
+```
+
+Then adjust your `vite.config.js`:
+
+```diff
+/// file: vite.config.js
+- import { defineConfig } from 'vite';
++ import { defineConfig } from 'vitest/config';
+
+export default defineConfig({ /* ... */ })
+```
+
+You can now write unit tests for code inside your `.js/.ts` files:
+
+```js
+/// file: multiplier.svelte.test.js
+import { flushSync } from 'svelte';
+import { expect, test } from 'vitest';
+import { multiplier } from './multiplier.js';
+
+test('Multiplier', () => {
+	let double = multiplier(0, 2);
+
+	expect(double.value).toEqual(0);
+
+	double.set(5);
+
+	expect(double.value).toEqual(10);
+});
+```
+
+### Using runes inside your test files
+
+It is possible to use runes inside your test files. First ensure your bundler knows to route the file through the Svelte compiler before running the test by adding `.svelte` to the filename (e.g `multiplier.svelte.test.js`). After that, you can use runes inside your tests.
+
+```js
+/// file: multiplier.svelte.test.js
+import { flushSync } from 'svelte';
+import { expect, test } from 'vitest';
+import { multiplier } from './multiplier.svelte.js';
+
+test('Multiplier', () => {
+	let count = $state(0);
+	let double = multiplier(() => count, 2);
+
+	expect(double.value).toEqual(0);
+
+	count = 5;
+
+	expect(double.value).toEqual(10);
+});
+```
+
+If the code being tested uses effects, you need to wrap the test inside `$effect.root`:
+
+```js
+/// file: logger.svelte.test.js
+import { flushSync } from 'svelte';
+import { expect, test } from 'vitest';
+import { logger } from './logger.svelte.js';
+
+test('Effect', () => {
+	const cleanup = $effect.root(() => {
+		let count = $state(0);
+
+		// logger uses an $effect to log updates of its input
+		let log = logger(() => count);
+
+		// effects normally run after a microtask,
+		// use flushSync to execute all pending effects synchronously
+		flushSync();
+		expect(log.value).toEqual([0]);
+
+		count = 1;
+		flushSync();
+
+		expect(log.value).toEqual([0, 1]);
+	});
+
+	cleanup();
+});
+```
+
+### Component testing
+
+It is possible to test your components in isolation using Vitest.
+
+> Before writing component tests, think about whether you actually need to test the component, or if it's more about the logic _inside_ the component. If so, consider extracting out that logic to test it in isolation, without the overhead of a component
+
+To get started, install jsdom (a library that shims DOM APIs):
+
+```bash
+npm install -D jsdom
+```
+
+Then adjust your `vite.config.js`:
+
+```js
+/// file: vite.config.js
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+	plugins: [
+		/* ... */
+	],
+	test: {
+		// If you are testing components client-side, you need to setup a DOM environment.
+		// If not all your files should have this environment, you can use a
+		// `// @vitest-environment jsdom` comment at the top of the test files instead.
+		environment: 'jsdom'
+	},
+	// Tell Vitest to use the `browser` entry points in `package.json` files, even though it's running in Node
+	resolve: process.env.VITEST
+		? {
+				conditions: ['browser']
+			}
+		: undefined
+});
+```
+
+After that, you can create a test file in which you import the component to test, interact with it programmatically and write expectations about the results:
+
+```js
+/// file: component.test.js
+import { flushSync, mount, unmount } from 'svelte';
+import { expect, test } from 'vitest';
+import Component from './Component.svelte';
+
+test('Component', () => {
+	// Instantiate the component using Svelte's `mount` API
+	const component = mount(Component, {
+		target: document.body, // `document` exists because of jsdom
+		props: { initial: 0 }
+	});
+
+	expect(document.body.innerHTML).toBe('<button>0</button>');
+
+	// Click the button, then flush the changes so you can synchronously write expectations
+	document.body.querySelector('button').click();
+	flushSync();
+
+	expect(document.body.innerHTML).toBe('<button>1</button>');
+
+	// Remove the component from the DOM
+	unmount(component);
+});
+```
+
+While the process is very straightforward, it is also low level and somewhat brittle, as the precise structure of your component may change frequently. Tools like [@testing-library/svelte](https://testing-library.com/docs/svelte-testing-library/intro/) can help streamline your tests. The above test could be rewritten like this:
+
+```js
+/// file: component.test.js
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { expect, test } from 'vitest';
+import Component from './Component.svelte';
+
+test('Component', async () => {
+	const user = userEvent.setup();
+	render(Component);
+
+	const button = screen.getByRole('button');
+	expect(button).toHaveTextContent(0);
+
+	await user.click(button);
+	expect(button).toHaveTextContent(1);
+});
+```
+
+When writing component tests that involve two-way bindings, context or snippet props, it's best to create a wrapper component for your specific test and interact with that. `@testing-library/svelte` contains some [examples](https://testing-library.com/docs/svelte-testing-library/example).
+
+## E2E tests using Playwright
+
+E2E (short for 'end to end') tests allow you to test your full application through the eyes of the user. This section uses [Playwright](https://playwright.dev/) as an example, but you can also use other solutions like [Cypress](https://www.cypress.io/) or [NightwatchJS](https://nightwatchjs.org/).
+
+To get start with Playwright, either let you guide by [their VS Code extension](https://playwright.dev/docs/getting-started-vscode), or install it from the command line using `npm init playwright`. It is also part of the setup CLI when you run `npm create svelte`.
+
+After you've done that, you should have a `tests` folder and a Playwright config. You may need to adjust that config to tell Playwright what to do before running the tests - mainly starting your application at a certain port:
+
+```js
+/// file: playwright.config.js
+const config = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests',
+	testMatch: /(.+\.)?(test|spec)\.[jt]s/
+};
+
+export default config;
+```
+
+You can now start writing tests. These are totally unaware of Svelte as a framework, so you mainly interact with the DOM and write assertions.
+
+```js
+/// file: tests/hello-world.spec.js
+import { expect, test } from '@playwright/test';
+
+test('home page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.locator('h1')).toBeVisible();
+});
+```

From 04a211e1e17d3f0a245c796a356aa2d79058223c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 27 Jul 2024 15:14:26 -0400
Subject: [PATCH 018/196] chore: VSCode -> VS Code (#12631)

---
 documentation/blog/2019-04-15-setting-up-your-editor.md       | 2 +-
 documentation/blog/2019-04-16-svelte-for-new-developers.md    | 2 +-
 .../blog/2021-01-01-whats-new-in-svelte-january-2021.md       | 2 +-
 .../blog/2021-02-01-whats-new-in-svelte-february-2021.md      | 4 ++--
 .../blog/2021-03-01-whats-new-in-svelte-march-2021.md         | 4 ++--
 .../blog/2021-10-01-whats-new-in-svelte-october-2021.md       | 2 +-
 .../blog/2023-02-01-whats-new-in-svelte-february-2023.md      | 2 +-
 documentation/blog/2023-03-09-zero-config-type-safety.md      | 2 +-
 documentation/docs/05-misc/03-typescript.md                   | 2 +-
 9 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/documentation/blog/2019-04-15-setting-up-your-editor.md b/documentation/blog/2019-04-15-setting-up-your-editor.md
index 6456397a41..eaf3fac624 100644
--- a/documentation/blog/2019-04-15-setting-up-your-editor.md
+++ b/documentation/blog/2019-04-15-setting-up-your-editor.md
@@ -12,7 +12,7 @@ This post will walk you through setting up your editor so that it recognises Sve
 
 - eslint-plugin-svelte3
 - svelte-vscode
-- associating .svelte files with HTML in VSCode, Sublime, etc.
+- associating .svelte files with HTML in VS Code, Sublime, etc.
 
 ## Atom
 
diff --git a/documentation/blog/2019-04-16-svelte-for-new-developers.md b/documentation/blog/2019-04-16-svelte-for-new-developers.md
index c0ad2add2b..e11e180a6c 100644
--- a/documentation/blog/2019-04-16-svelte-for-new-developers.md
+++ b/documentation/blog/2019-04-16-svelte-for-new-developers.md
@@ -48,7 +48,7 @@ Once installed, you'll have access to three new commands:
 
 ## Installing a text editor
 
-To write code, you need a good editor. The most popular choice is [Visual Studio Code](https://code.visualstudio.com/) or VSCode, and justifiably so — it's well-designed and fully-featured, and has a wealth of extensions ([including one for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), which provides syntax highlighting and diagnostic messages when you're writing components).
+To write code, you need a good editor. The most popular choice is [Visual Studio Code](https://code.visualstudio.com/) or VS Code, and justifiably so — it's well-designed and fully-featured, and has a wealth of extensions ([including one for Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode), which provides syntax highlighting and diagnostic messages when you're writing components).
 
 ## Creating a project
 
diff --git a/documentation/blog/2021-01-01-whats-new-in-svelte-january-2021.md b/documentation/blog/2021-01-01-whats-new-in-svelte-january-2021.md
index 675d809fec..4a5ea4eddc 100644
--- a/documentation/blog/2021-01-01-whats-new-in-svelte-january-2021.md
+++ b/documentation/blog/2021-01-01-whats-new-in-svelte-january-2021.md
@@ -39,7 +39,7 @@ As cautioned in _[What's the deal with SvelteKit?](https://svelte.dev/blog/whats
 - [weather-ab](https://github.com/ganochenkodg/weather-ab) compares the archive of weather in different cities of the world. Indispensable for people thinking about migration
 - [Game Nibs](https://gamenibs.com/) is a platform for gamers to find and share concise bite-sized bits of gaming advice, tips, tricks, screenshots, builds, and much more
 - [Ora](https://github.com/cupcakearmy/ora) is an open source website tracking and limiting tool for Chrome and Firefox
-- [vscode-dms](https://github.com/techsyndicate/vscode-dms) is a group direct messaging chat app for VSCode
+- [vscode-dms](https://github.com/techsyndicate/vscode-dms) is a group direct messaging chat app for VS Code
 - [Zero.2](https://zero.oleksandrdemian.tech/) is a math-based challenge game where you try to get to zero as quickly as possible
 - [Octave Compass](https://octavecompass.com/2741) is a chord table and scale explorer for many popular musical scales
 - [Infinite Walking Bass Generator 2](https://github.com/elialbert/infinitewalkingbass2) is an online music player that generates a unique walking bass line
diff --git a/documentation/blog/2021-02-01-whats-new-in-svelte-february-2021.md b/documentation/blog/2021-02-01-whats-new-in-svelte-february-2021.md
index 9b5a5eec4c..e85b274d96 100644
--- a/documentation/blog/2021-02-01-whats-new-in-svelte-february-2021.md
+++ b/documentation/blog/2021-02-01-whats-new-in-svelte-february-2021.md
@@ -24,7 +24,7 @@ Have a suggestion for a compiler feature or want to help implement new features/
 
 For the complete list of changes, check out the language-tools [Releases page](https://github.com/sveltejs/language-tools/releases).
 
-A great way to try the language tools is to download the [Svelte Extension for VSCode](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). This extension provides syntax highlighting and rich intellisense for Svelte components in VS Code, using the svelte language server. Check your editor's extension sources to see if there's a Svelte plugin for your IDE or build your own (see [coc-svelte](https://github.com/coc-extensions/coc-svelte) for example)!
+A great way to try the language tools is to download the [Svelte Extension for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). This extension provides syntax highlighting and rich intellisense for Svelte components in VS Code, using the svelte language server. Check your editor's extension sources to see if there's a Svelte plugin for your IDE or build your own (see [coc-svelte](https://github.com/coc-extensions/coc-svelte) for example)!
 
 ## Big improvements across the Svelte ecosystem
 
@@ -77,7 +77,7 @@ New changes to the Svelte Society website include [a new cheat sheet](https://sv
 
 - [lihautan's Svelte Actions Playlist](https://www.youtube.com/watch?v=ciaMT_MswzE&list=PLoKaNN3BjQX3Gl14MBygFf8buPIw9pAeK) teaches how actions work and how they can help solve common problems when developing Svelte applications
 - [One-click Portfolio/Personal blog generator from dev.to API ](https://dev.to/shriji/one-click-portfolio-personal-blog-generator-from-dev-to-api-3apb) walks through creating a Sapper site that also fetches your articles from DEV.to using the API
-- [How to Code a VSCode Extension](https://www.youtube.com/watch?v=a5DX5pQ9p5M) features Svelte as a way to render a custom UI within VSCode
+- [How to Code a VS Code Extension](https://www.youtube.com/watch?v=a5DX5pQ9p5M) features Svelte as a way to render a custom UI within VS Code
 - [This YouTube series on Plenti](https://www.youtube.com/watch?v=wyNC7R_VVyQ&list=PLbWvcwWtuDm12y3Hye6oKDwI2gAS0ccHW) walks through the new static site generator in detail
 
 ## See you next month!
diff --git a/documentation/blog/2021-03-01-whats-new-in-svelte-march-2021.md b/documentation/blog/2021-03-01-whats-new-in-svelte-march-2021.md
index 46e45a1130..dea4d292cd 100644
--- a/documentation/blog/2021-03-01-whats-new-in-svelte-march-2021.md
+++ b/documentation/blog/2021-03-01-whats-new-in-svelte-march-2021.md
@@ -29,7 +29,7 @@ For a complete list of changes, including bug fixes and links to PRs, check out
 - HTML tags can now be renamed together
 - Mustache tags parsing is now more robust and will provide better intellisense in more situations
 
-Haven't tried the language-tools yet? Check out [Svelte Extension for VSCode](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) or find a plugin for your favorite IDE!
+Haven't tried the language-tools yet? Check out [Svelte Extension for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) or find a plugin for your favorite IDE!
 
 ## Other changes from `sveltejs/*`
 
@@ -73,7 +73,7 @@ Haven't tried the language-tools yet? Check out [Svelte Extension for VSCode](ht
 - [svelte-virtualized-auto-sizer](https://github.com/micha-lmxt/svelte-virtualized-auto-sizer) is a high-order component that automatically adjusts the width and height of a single child.
 - [svelte-window](https://github.com/micha-lmxt/svelte-window) are components for efficiently rendering large, scrollable lists and tabular data.
 - [Svelte Persistent store](https://github.com/MacFJA/svelte-persistent-store) is a Svelte store that keep its value through pages and reloads
-- [Svelte Dark](https://marketplace.visualstudio.com/items?itemName=NickScialli.svelte-dark) is a VSCode theme inspired by the svelte.dev REPL
+- [Svelte Dark](https://marketplace.visualstudio.com/items?itemName=NickScialli.svelte-dark) is a VS Code theme inspired by the svelte.dev REPL
 - [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) has been updated to support Svelte libraries and help developers keep their bundle size under control.
 - [Tree-sitter-svelte](https://github.com/Himujjal/tree-sitter-svelte) provides tree-sitter grammar for svelte
 - [Svelte Ripple](https://svelte.dev/repl/b73224a0fd4248178e3eab41943d41a9?version=3.31.2) is a Material Design ripple effect that doesn't depend on `@material/ripple` (made by @karakara in the Svelte Discord)
diff --git a/documentation/blog/2021-10-01-whats-new-in-svelte-october-2021.md b/documentation/blog/2021-10-01-whats-new-in-svelte-october-2021.md
index c3611c2552..d20cce0cab 100644
--- a/documentation/blog/2021-10-01-whats-new-in-svelte-october-2021.md
+++ b/documentation/blog/2021-10-01-whats-new-in-svelte-october-2021.md
@@ -79,7 +79,7 @@ To see all updates to SvelteKit, check out the [SvelteKit changelog](https://git
 - [sveltekit-netlify-cms](https://github.com/buhrmi/sveltekit-netlify-cms) is a SvelteKit skeleton app configured for use with Netlify CMS
 - [SvelteFireTS](https://github.com/jacobbowdoin/sveltefirets) is a SvelteKit + TypeScript + Firebase library inspired by Fireship.io
 - [stores-x](https://github.com/Anyass3/stores-x) lets you use Svelte stores just like vueX
-- [sveltekit-snippets](https://github.com/stordahl/sveltekit-snippets) is a VSCode extension that provides snippets for common patterns in SvelteKit & Vanilla Svelte
+- [sveltekit-snippets](https://github.com/stordahl/sveltekit-snippets) is a VS Code extension that provides snippets for common patterns in SvelteKit & Vanilla Svelte
 - [svelte-xactor](https://github.com/wobsoriano/svelte-xactor) is a middleware that allows you to easily convert your xactor machines into a global store that implements the store contract
 - [vite-plugin-pages-svelte](https://github.com/aldy505/vite-plugin-pages-svelte) is a vite plugin for automatic filesystem-based routing
 - [sveltio](https://www.npmjs.com/package/sveltio) is a Svelte wrapper for valtio - a proxy-state library
diff --git a/documentation/blog/2023-02-01-whats-new-in-svelte-february-2023.md b/documentation/blog/2023-02-01-whats-new-in-svelte-february-2023.md
index 1a4876c4ac..98be8918ca 100644
--- a/documentation/blog/2023-02-01-whats-new-in-svelte-february-2023.md
+++ b/documentation/blog/2023-02-01-whats-new-in-svelte-february-2023.md
@@ -65,7 +65,7 @@ _To Watch or Hear_
 
 - [I built a $5 chat app with Pocketbase & Svelte. Will it scale?](https://www.youtube.com/watch?v=gUYBFDPZ5qk) by Fireship
 - [The Comprehensive Introduction To SvelteKit](https://www.youtube.com/watch?v=obmiLi3bhkQ), [What Svelte UI Library Should You Use?](https://www.youtube.com/watch?v=O0mNU0maItY) and [Learn Everything About SvelteKit Routing (Pages, Layout, Nested Routes)](https://www.youtube.com/watch?v=7hXHbGj6iE0) by Joy of Code
-- [Progressive Enhancement in SvelteKit (use:enhance)](https://www.youtube.com/watch?v=jXtzWMhdI2U), [Are Your Routes Actually Protected?](https://www.youtube.com/watch?v=UbhhJWV3bmI) and [10X Your SvelteKit Developer Experience in VSCode](https://www.youtube.com/watch?v=13v50nLh67Q) by Huntabyte
+- [Progressive Enhancement in SvelteKit (use:enhance)](https://www.youtube.com/watch?v=jXtzWMhdI2U), [Are Your Routes Actually Protected?](https://www.youtube.com/watch?v=UbhhJWV3bmI) and [10X Your SvelteKit Developer Experience in VS Code](https://www.youtube.com/watch?v=13v50nLh67Q) by Huntabyte
 - [The easiest realtime app I’ve ever built](https://www.youtube.com/watch?v=UbOaAtHWidc) by Beyond Fireship
 - [Angular developers can learn Svelte so fast...](https://www.youtube.com/watch?v=lKdw_z9qmPU) by Joshua Morony
 - [SvelteKit + PocketBase Integration: User Login and Registration](https://www.youtube.com/watch?v=AxPB3e-3yEM) by Jian Yuan Lee
diff --git a/documentation/blog/2023-03-09-zero-config-type-safety.md b/documentation/blog/2023-03-09-zero-config-type-safety.md
index f7e53d122c..0ebf9e0a28 100644
--- a/documentation/blog/2023-03-09-zero-config-type-safety.md
+++ b/documentation/blog/2023-03-09-zero-config-type-safety.md
@@ -13,7 +13,7 @@ As of today, yes: it can.
 
 <video src="https://sveltejs.github.io/assets/video/zero-config-types.mp4" controls muted playsinline></video>
 
-If you're using VSCode, just upgrade the Svelte extension to the latest version, and you'll never have to annotate your `load` functions or `data` props again. Extensions for other editors can also use this feature, as long as they support the Language Server Protocol and TypeScript plugins. It even works with the latest version of our CLI diagnostics tool `svelte-check`!
+If you're using VS Code, just upgrade the Svelte extension to the latest version, and you'll never have to annotate your `load` functions or `data` props again. Extensions for other editors can also use this feature, as long as they support the Language Server Protocol and TypeScript plugins. It even works with the latest version of our CLI diagnostics tool `svelte-check`!
 
 Before we dive in, let's recap how type safety works in SvelteKit.
 
diff --git a/documentation/docs/05-misc/03-typescript.md b/documentation/docs/05-misc/03-typescript.md
index 8dd02ce8be..eb58e89b5c 100644
--- a/documentation/docs/05-misc/03-typescript.md
+++ b/documentation/docs/05-misc/03-typescript.md
@@ -8,7 +8,7 @@ title: TypeScript
 - using `Component` and the other helper types
 - using `svelte-check`
 
-You can use TypeScript within Svelte components. IDE extensions like the [Svelte VSCode extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) will help you catch errors right in your editor, and [`svelte-check`](https://www.npmjs.com/package/svelte-check) does the same on the command line, which you can integrate into your CI.
+You can use TypeScript within Svelte components. IDE extensions like the [Svelte VS Code extension](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode) will help you catch errors right in your editor, and [`svelte-check`](https://www.npmjs.com/package/svelte-check) does the same on the command line, which you can integrate into your CI.
 
 ## `<script lang="ts">`
 

From 2e8a205161cdeba3563bba6bf6221cda1d8dc037 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 27 Jul 2024 15:14:54 -0400
Subject: [PATCH 019/196] chore: remove outdated comment (#12632)

---
 documentation/docs/03-runes/01-state.md                         | 2 --
 .../svelte-5-preview/src/routes/docs/content/01-api/02-runes.md | 2 --
 2 files changed, 4 deletions(-)

diff --git a/documentation/docs/03-runes/01-state.md b/documentation/docs/03-runes/01-state.md
index c8b6b4d204..ba07ecf0cb 100644
--- a/documentation/docs/03-runes/01-state.md
+++ b/documentation/docs/03-runes/01-state.md
@@ -111,8 +111,6 @@ To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snaps
 
 This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.
 
-> Note that `$state.snapshot` will clone the data when removing reactivity. If the value passed isn't a `$state` proxy, it will be returned as-is.
-
 ## `$state.is`
 
 Sometimes you might need to compare two values, one of which is a reactive `$state(...)` proxy but the other is not. For this you can use `$state.is(a, b)`:
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index 5f0ee7c0ea..a5074f386b 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -110,8 +110,6 @@ To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snaps
 
 This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.
 
-> Note that `$state.snapshot` will clone the data when removing reactivity. If the value passed isn't a `$state` proxy, it will be returned as-is.
-
 ## `$state.is`
 
 Sometimes you might need to compare two values, one of which is a reactive `$state(...)` proxy. For this you can use `$state.is(a, b)`:

From 3bff87ac66251c60a92cf244d54aeb8ad8ece5d6 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Sat, 27 Jul 2024 21:18:59 +0200
Subject: [PATCH 020/196] chore: tweak html tree validation (#12618)

* chore: tweak html tree validation

- relax validation in some places where we know the HTML will not break or only break when using SSR
- consolidate validation in one place and for better reuse, which results in more cases getting caught at runtime

closes #11941

* move more of the validation into more descriptive record

* obselete / incorrect (those are not autoclosed, and the invalid ones handled later)

* typo

* backticks

* update tests

* Update packages/svelte/messages/compile-errors/template.md

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Update packages/svelte/messages/compile-warnings/template.md

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../messages/compile-errors/template.md       |   8 +-
 .../messages/compile-warnings/template.md     |  12 ++
 packages/svelte/src/compiler/errors.js        |   4 +-
 .../compiler/phases/1-parse/state/element.js  |   3 +-
 .../src/compiler/phases/1-parse/utils/html.js |  46 -----
 .../compiler/phases/2-analyze/validation.js   |  84 +++++---
 packages/svelte/src/compiler/warnings.js      |  11 +
 packages/svelte/src/constants.js              | 169 ---------------
 packages/svelte/src/html-tree-validation.js   | 193 ++++++++++++++++++
 packages/svelte/src/internal/server/dev.js    |  33 +--
 .../samples/invalid-html-ssr/_config.js       |  14 +-
 .../samples/invalid-html-ssr/form.svelte      |   1 +
 .../{Component.svelte => h1.svelte}           |   0
 .../samples/invalid-html-ssr/main.svelte      |   8 +-
 .../invalid-node-placement-2/errors.json      |   2 +-
 .../invalid-node-placement-4/errors.json      |   2 +-
 .../invalid-node-placement-5/input.svelte     |   9 +
 .../invalid-node-placement-5/warnings.json    |  14 ++
 .../invalid-node-placement/errors.json        |   2 +-
 19 files changed, 327 insertions(+), 288 deletions(-)
 create mode 100644 packages/svelte/src/html-tree-validation.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/form.svelte
 rename packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/{Component.svelte => h1.svelte} (100%)
 create mode 100644 packages/svelte/tests/validator/samples/invalid-node-placement-5/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/invalid-node-placement-5/warnings.json

diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
index 9b43e99820..4e24714647 100644
--- a/packages/svelte/messages/compile-errors/template.md
+++ b/packages/svelte/messages/compile-errors/template.md
@@ -190,7 +190,13 @@
 
 ## node_invalid_placement
 
-> %thing% is invalid inside <%parent%>
+> %thing% is invalid inside `<%parent%>`
+
+HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
+
+- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
+- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
+- `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
 
 ## render_tag_invalid_call_expression
 
diff --git a/packages/svelte/messages/compile-warnings/template.md b/packages/svelte/messages/compile-warnings/template.md
index 3460e1098e..58a251c729 100644
--- a/packages/svelte/messages/compile-warnings/template.md
+++ b/packages/svelte/messages/compile-warnings/template.md
@@ -38,6 +38,18 @@
 
 > Using `on:%name%` to listen to the %name% event is deprecated. Use the event attribute `on%name%` instead
 
+## node_invalid_placement_ssr
+
+> %thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
+
+HTML restricts where certain elements can appear. In case of a violation the browser will 'repair' the HTML in a way that breaks Svelte's assumptions about the structure of your components. Some examples:
+
+- `<p>hello <div>world</div></p>` will result in `<p>hello </p><div>world</div><p></p>` for example (the `<div>` autoclosed the `<p>` because `<p>` cannot contain block-level elements)
+- `<option><div>option a</div></option>` will result in `<option>option a</option>` (the `<div>` is removed)
+- `<table><tr><td>cell</td></tr></table>` will result in `<table><tbody><tr><td>cell</td></tr></tbody></table>` (a `<tbody>` is auto-inserted)
+
+This code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail.
+
 ## slot_element_deprecated
 
 > Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 023b573e86..0b91336ee0 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -978,14 +978,14 @@ export function mixed_event_handler_syntaxes(node, name) {
 }
 
 /**
- * %thing% is invalid inside <%parent%>
+ * %thing% is invalid inside `<%parent%>`
  * @param {null | number | NodeLike} node
  * @param {string} thing
  * @param {string} parent
  * @returns {never}
  */
 export function node_invalid_placement(node, thing, parent) {
-	e(node, "node_invalid_placement", `${thing} is invalid inside <${parent}>`);
+	e(node, "node_invalid_placement", `${thing} is invalid inside \`<${parent}>\``);
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index 88dc5eae56..11a9de0951 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -5,12 +5,13 @@ import { is_void } from '../../../../constants.js';
 import read_expression from '../read/expression.js';
 import { read_script } from '../read/script.js';
 import read_style from '../read/style.js';
-import { closing_tag_omitted, decode_character_references } from '../utils/html.js';
+import { decode_character_references } from '../utils/html.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { create_fragment } from '../utils/create.js';
 import { create_attribute } from '../../nodes.js';
 import { get_attribute_expression, is_expression_attribute } from '../../../utils/ast.js';
+import { closing_tag_omitted } from '../../../../html-tree-validation.js';
 
 // eslint-disable-next-line no-useless-escape
 const valid_tag_name = /^\!?[a-zA-Z]{1,}:?[a-zA-Z0-9\-]*/;
diff --git a/packages/svelte/src/compiler/phases/1-parse/utils/html.js b/packages/svelte/src/compiler/phases/1-parse/utils/html.js
index 3cc9a5a207..a68acb996f 100644
--- a/packages/svelte/src/compiler/phases/1-parse/utils/html.js
+++ b/packages/svelte/src/compiler/phases/1-parse/utils/html.js
@@ -1,4 +1,3 @@
-import { interactive_elements } from '../../../../constants.js';
 import entities from './entities.js';
 
 const windows_1252 = [
@@ -119,48 +118,3 @@ function validate_code(code) {
 
 	return NUL;
 }
-
-// based on http://developers.whatwg.org/syntax.html#syntax-tag-omission
-
-/** @type {Record<string, Set<string>>} */
-const disallowed_contents = {
-	li: new Set(['li']),
-	dt: new Set(['dt', 'dd']),
-	dd: new Set(['dt', 'dd']),
-	p: new Set(
-		'address article aside blockquote div dl fieldset footer form h1 h2 h3 h4 h5 h6 header hgroup hr main menu nav ol p pre section table ul'.split(
-			' '
-		)
-	),
-	rt: new Set(['rt', 'rp']),
-	rp: new Set(['rt', 'rp']),
-	optgroup: new Set(['optgroup']),
-	option: new Set(['option', 'optgroup']),
-	thead: new Set(['tbody', 'tfoot']),
-	tbody: new Set(['tbody', 'tfoot']),
-	tfoot: new Set(['tbody']),
-	tr: new Set(['tr', 'tbody']),
-	td: new Set(['td', 'th', 'tr']),
-	th: new Set(['td', 'th', 'tr'])
-};
-
-for (const interactive_element of interactive_elements) {
-	disallowed_contents[interactive_element] = interactive_elements;
-}
-
-// can this be a child of the parent element, or does it implicitly
-// close it, like `<li>one<li>two`?
-
-/**
- * @param {string} current
- * @param {string} [next]
- */
-export function closing_tag_omitted(current, next) {
-	if (disallowed_contents[current]) {
-		if (!next || disallowed_contents[current].has(next)) {
-			return true;
-		}
-	}
-
-	return false;
-}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/validation.js b/packages/svelte/src/compiler/phases/2-analyze/validation.js
index 129b7e280c..eda5ed42b0 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/validation.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/validation.js
@@ -3,11 +3,6 @@
 /** @import { NodeLike } from '../../errors.js' */
 /** @import { AnalysisState, Context, Visitors } from './types.js' */
 import is_reference from 'is-reference';
-import {
-	disallowed_paragraph_contents,
-	interactive_elements,
-	is_tag_valid_with_parent
-} from '../../../constants.js';
 import * as e from '../../errors.js';
 import {
 	extract_identifiers,
@@ -37,6 +32,10 @@ import {
 import { Scope, get_rune } from '../scope.js';
 import { merge } from '../visitors.js';
 import { a11y_validators } from './a11y.js';
+import {
+	is_tag_valid_with_ancestor,
+	is_tag_valid_with_parent
+} from '../../../html-tree-validation.js';
 
 /**
  * @param {Attribute} attribute
@@ -602,40 +601,57 @@ const validation = {
 		validate_element(node, context);
 
 		if (context.state.parent_element) {
-			if (!is_tag_valid_with_parent(node.name, context.state.parent_element)) {
-				e.node_invalid_placement(node, `<${node.name}>`, context.state.parent_element);
-			}
-		}
+			let past_parent = false;
+			let only_warn = false;
 
-		// can't add form to interactive elements because those are also used by the parser
-		// to check for the last auto-closing parent.
-		if (node.name === 'form') {
-			const path = context.path;
-			for (let parent of path) {
-				if (parent.type === 'RegularElement' && parent.name === 'form') {
-					e.node_invalid_placement(node, `<${node.name}>`, parent.name);
-				}
-			}
-		}
+			for (let i = context.path.length - 1; i >= 0; i--) {
+				const ancestor = context.path[i];
 
-		if (interactive_elements.has(node.name)) {
-			const path = context.path;
-			for (let parent of path) {
 				if (
-					parent.type === 'RegularElement' &&
-					parent.name === node.name &&
-					interactive_elements.has(parent.name)
+					ancestor.type === 'IfBlock' ||
+					ancestor.type === 'EachBlock' ||
+					ancestor.type === 'AwaitBlock' ||
+					ancestor.type === 'KeyBlock'
 				) {
-					e.node_invalid_placement(node, `<${node.name}>`, parent.name);
+					// We're creating a separate template string inside blocks, which means client-side this would work
+					only_warn = true;
 				}
-			}
-		}
 
-		if (disallowed_paragraph_contents.includes(node.name)) {
-			const path = context.path;
-			for (let parent of path) {
-				if (parent.type === 'RegularElement' && parent.name === 'p') {
-					e.node_invalid_placement(node, `<${node.name}>`, parent.name);
+				if (!past_parent) {
+					if (
+						ancestor.type === 'RegularElement' &&
+						ancestor.name === context.state.parent_element
+					) {
+						if (!is_tag_valid_with_parent(node.name, context.state.parent_element)) {
+							if (only_warn) {
+								w.node_invalid_placement_ssr(
+									node,
+									`\`<${node.name}>\``,
+									context.state.parent_element
+								);
+							} else {
+								e.node_invalid_placement(node, `\`<${node.name}>\``, context.state.parent_element);
+							}
+						}
+
+						past_parent = true;
+					}
+				} else if (ancestor.type === 'RegularElement') {
+					if (!is_tag_valid_with_ancestor(node.name, ancestor.name)) {
+						if (only_warn) {
+							w.node_invalid_placement_ssr(node, `\`<${node.name}>\``, ancestor.name);
+						} else {
+							e.node_invalid_placement(node, `\`<${node.name}>\``, ancestor.name);
+						}
+					}
+				} else if (
+					ancestor.type === 'Component' ||
+					ancestor.type === 'SvelteComponent' ||
+					ancestor.type === 'SvelteElement' ||
+					ancestor.type === 'SvelteSelf' ||
+					ancestor.type === 'SnippetBlock'
+				) {
+					break;
 				}
 			}
 		}
@@ -818,7 +834,7 @@ const validation = {
 		if (!node.parent) return;
 		if (context.state.parent_element) {
 			if (!is_tag_valid_with_parent('#text', context.state.parent_element)) {
-				e.node_invalid_placement(node, '{expression}', context.state.parent_element);
+				e.node_invalid_placement(node, '`{expression}`', context.state.parent_element);
 			}
 		}
 	}
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
index d9c197cf75..ca3eaf13f6 100644
--- a/packages/svelte/src/compiler/warnings.js
+++ b/packages/svelte/src/compiler/warnings.js
@@ -114,6 +114,7 @@ export const codes = [
 	"component_name_lowercase",
 	"element_invalid_self_closing_tag",
 	"event_directive_deprecated",
+	"node_invalid_placement_ssr",
 	"slot_element_deprecated",
 	"svelte_element_invalid_this"
 ];
@@ -739,6 +740,16 @@ export function event_directive_deprecated(node, name) {
 	w(node, "event_directive_deprecated", `Using \`on:${name}\` to listen to the ${name} event is deprecated. Use the event attribute \`on${name}\` instead`);
 }
 
+/**
+ * %thing% is invalid inside `<%parent%>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning
+ * @param {null | NodeLike} node
+ * @param {string} thing
+ * @param {string} parent
+ */
+export function node_invalid_placement_ssr(node, thing, parent) {
+	w(node, "node_invalid_placement_ssr", `${thing} is invalid inside \`<${parent}>\`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a \`hydration_mismatch\` warning`);
+}
+
 /**
  * Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
  * @param {null | NodeLike} node
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index 061e6e2eb8..0cc2102925 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -116,175 +116,6 @@ export const DOMBooleanAttributes = [
 export const namespace_svg = 'http://www.w3.org/2000/svg';
 export const namespace_mathml = 'http://www.w3.org/1998/Math/MathML';
 
-// while `input` is also an interactive element, it is never moved by the browser, so we don't need to check for it
-export const interactive_elements = new Set([
-	'a',
-	'button',
-	'iframe',
-	'embed',
-	'select',
-	'textarea'
-]);
-
-export const disallowed_paragraph_contents = [
-	'address',
-	'article',
-	'aside',
-	'blockquote',
-	'details',
-	'div',
-	'dl',
-	'fieldset',
-	'figcapture',
-	'figure',
-	'footer',
-	'form',
-	'h1',
-	'h2',
-	'h3',
-	'h4',
-	'h5',
-	'h6',
-	'header',
-	'hr',
-	'menu',
-	'nav',
-	'ol',
-	'pre',
-	'section',
-	'table',
-	'ul',
-	'p'
-];
-
-// https://html.spec.whatwg.org/multipage/syntax.html#generate-implied-end-tags
-const implied_end_tags = ['dd', 'dt', 'li', 'option', 'optgroup', 'p', 'rp', 'rt'];
-
-/**
- * @param {string} tag
- * @param {string} parent_tag
- * @returns {boolean}
- */
-export function is_tag_valid_with_parent(tag, parent_tag) {
-	// First, let's check if we're in an unusual parsing mode...
-	switch (parent_tag) {
-		// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect
-		case 'select':
-			return (
-				tag === 'option' ||
-				tag === 'optgroup' ||
-				tag === '#text' ||
-				tag === 'hr' ||
-				tag === 'script' ||
-				tag === 'template'
-			);
-		case 'optgroup':
-			return tag === 'option' || tag === '#text';
-		// Strictly speaking, seeing an <option> doesn't mean we're in a <select>
-		// but
-		case 'option':
-			return tag === '#text';
-		// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd
-		// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption
-		// No special behavior since these rules fall back to "in body" mode for
-		// all except special table nodes which cause bad parsing behavior anyway.
-
-		// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intr
-		case 'tr':
-			return (
-				tag === 'th' || tag === 'td' || tag === 'style' || tag === 'script' || tag === 'template'
-			);
-		// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intbody
-		case 'tbody':
-		case 'thead':
-		case 'tfoot':
-			return tag === 'tr' || tag === 'style' || tag === 'script' || tag === 'template';
-		// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incolgroup
-		case 'colgroup':
-			return tag === 'col' || tag === 'template';
-		// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intable
-		case 'table':
-			return (
-				tag === 'caption' ||
-				tag === 'colgroup' ||
-				tag === 'tbody' ||
-				tag === 'tfoot' ||
-				tag === 'thead' ||
-				tag === 'style' ||
-				tag === 'script' ||
-				tag === 'template'
-			);
-		// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inhead
-		case 'head':
-			return (
-				tag === 'base' ||
-				tag === 'basefont' ||
-				tag === 'bgsound' ||
-				tag === 'link' ||
-				tag === 'meta' ||
-				tag === 'title' ||
-				tag === 'noscript' ||
-				tag === 'noframes' ||
-				tag === 'style' ||
-				tag === 'script' ||
-				tag === 'template'
-			);
-		// https://html.spec.whatwg.org/multipage/semantics.html#the-html-element
-		case 'html':
-			return tag === 'head' || tag === 'body' || tag === 'frameset';
-		case 'frameset':
-			return tag === 'frame';
-		case '#document':
-			return tag === 'html';
-	}
-
-	// Probably in the "in body" parsing mode, so we outlaw only tag combos
-	// where the parsing rules cause implicit opens or closes to be added.
-	// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inbody
-	switch (tag) {
-		case 'h1':
-		case 'h2':
-		case 'h3':
-		case 'h4':
-		case 'h5':
-		case 'h6':
-			return (
-				parent_tag !== 'h1' &&
-				parent_tag !== 'h2' &&
-				parent_tag !== 'h3' &&
-				parent_tag !== 'h4' &&
-				parent_tag !== 'h5' &&
-				parent_tag !== 'h6'
-			);
-
-		case 'rp':
-		case 'rt':
-			return implied_end_tags.indexOf(parent_tag) === -1;
-
-		case 'body':
-		case 'caption':
-		case 'col':
-		case 'colgroup':
-		case 'frameset':
-		case 'frame':
-		case 'head':
-		case 'html':
-		case 'tbody':
-		case 'td':
-		case 'tfoot':
-		case 'th':
-		case 'thead':
-		case 'tr':
-			// These tags are only valid with a few parents that have special child
-			// parsing rules -- if we're down here, then none of those matched and
-			// so we allow it only if we don't know what the parent is, as all other
-			// cases are invalid.
-			return parent_tag == null;
-	}
-
-	return true;
-}
-
 /**
  * @param {string} name
  * @param {"include-on" | "exclude-on"} [mode] - wether if name starts with `on` or `on` is excluded at this point
diff --git a/packages/svelte/src/html-tree-validation.js b/packages/svelte/src/html-tree-validation.js
new file mode 100644
index 0000000000..c7f2554966
--- /dev/null
+++ b/packages/svelte/src/html-tree-validation.js
@@ -0,0 +1,193 @@
+/**
+ * Map of elements that have certain elements that are not allowed inside them, in the sense that they will auto-close the parent/ancestor element.
+ * Theoretically one could take advantage of it but most of the time it will just result in confusing behavior and break when SSR'd.
+ * There are more elements that are invalid inside other elements, but they're not auto-closed and so don't break SSR and are therefore not listed here.
+ * @type {Record<string, { direct: string[]} | { descendant: string[] }>}
+ */
+const autoclosing_children = {
+	// based on http://developers.whatwg.org/syntax.html#syntax-tag-omission
+	li: { direct: ['li'] },
+	dt: { descendant: ['dt', 'dd'] },
+	dd: { descendant: ['dt', 'dd'] },
+	p: {
+		descendant: [
+			'address',
+			'article',
+			'aside',
+			'blockquote',
+			'div',
+			'dl',
+			'fieldset',
+			'footer',
+			'form',
+			'h1',
+			'h2',
+			'h3',
+			'h4',
+			'h5',
+			'h6',
+			'header',
+			'hgroup',
+			'hr',
+			'main',
+			'menu',
+			'nav',
+			'ol',
+			'p',
+			'pre',
+			'section',
+			'table',
+			'ul'
+		]
+	},
+	rt: { descendant: ['rt', 'rp'] },
+	rp: { descendant: ['rt', 'rp'] },
+	optgroup: { descendant: ['optgroup'] },
+	option: { descendant: ['option', 'optgroup'] },
+	thead: { direct: ['tbody', 'tfoot'] },
+	tbody: { direct: ['tbody', 'tfoot'] },
+	tfoot: { direct: ['tbody'] },
+	tr: { direct: ['tr', 'tbody'] },
+	td: { direct: ['td', 'th', 'tr'] },
+	th: { direct: ['td', 'th', 'tr'] }
+};
+
+/**
+ * Returns true if the tag is either the last in the list of siblings and will be autoclosed,
+ * or not allowed inside the parent tag such that it will auto-close it. The latter results
+ * in the browser repairing the HTML, which will likely result in an error during hydration.
+ * @param {string} current
+ * @param {string} [next]
+ */
+export function closing_tag_omitted(current, next) {
+	const disallowed = autoclosing_children[current];
+	if (disallowed) {
+		if (
+			!next ||
+			('direct' in disallowed ? disallowed.direct : disallowed.descendant).includes(next)
+		) {
+			return true;
+		}
+	}
+	return false;
+}
+
+/**
+ * Map of elements that have certain elements that are not allowed inside them, in the sense that the browser will somehow repair the HTML.
+ * There are more elements that are invalid inside other elements, but they're not repaired and so don't break SSR and are therefore not listed here.
+ * @type {Record<string, { direct: string[]} | { descendant: string[]; only?: string[] } | { only: string[] }>}
+ */
+const disallowed_children = {
+	...autoclosing_children,
+	optgroup: { only: ['option', '#text'] },
+	// Strictly speaking, seeing an <option> doesn't mean we're in a <select>, but we assume it here
+	option: { only: ['#text'] },
+	form: { descendant: ['form'] },
+	a: { descendant: ['a'] },
+	button: { descendant: ['button'] },
+	h1: { descendant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] },
+	h2: { descendant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] },
+	h3: { descendant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] },
+	h4: { descendant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] },
+	h5: { descendant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] },
+	h6: { descendant: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] },
+	// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inselect
+	select: { only: ['option', 'optgroup', '#text', 'hr', 'script', 'template'] },
+
+	// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd
+	// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incaption
+	// No special behavior since these rules fall back to "in body" mode for
+	// all except special table nodes which cause bad parsing behavior anyway.
+
+	// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intd
+	tr: { only: ['th', 'td', 'style', 'script', 'template'] },
+	// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intbody
+	tbody: { only: ['tr', 'style', 'script', 'template'] },
+	thead: { only: ['tr', 'style', 'script', 'template'] },
+	tfoot: { only: ['tr', 'style', 'script', 'template'] },
+	// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-incolgroup
+	colgroup: { only: ['col', 'template'] },
+	// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-intable
+	table: {
+		only: ['caption', 'colgroup', 'tbody', 'thead', 'tfoot', 'style', 'script', 'template']
+	},
+	// https://html.spec.whatwg.org/multipage/syntax.html#parsing-main-inhead
+	head: {
+		only: [
+			'base',
+			'basefont',
+			'bgsound',
+			'link',
+			'meta',
+			'title',
+			'noscript',
+			'noframes',
+			'style',
+			'script',
+			'template'
+		]
+	},
+	// https://html.spec.whatwg.org/multipage/semantics.html#the-html-element
+	html: { only: ['head', 'body', 'frameset'] },
+	frameset: { only: ['frame'] },
+	'#document': { only: ['html'] }
+};
+
+/**
+ * Returns false if the tag is not allowed inside the ancestor tag (which is grandparent and above) such that it will result
+ * in the browser repairing the HTML, which will likely result in an error during hydration.
+ * @param {string} tag
+ * @param {string} ancestor Must not be the parent, but higher up the tree
+ * @returns {boolean}
+ */
+export function is_tag_valid_with_ancestor(tag, ancestor) {
+	const disallowed = disallowed_children[ancestor];
+	return !disallowed || ('descendant' in disallowed ? !disallowed.descendant.includes(tag) : true);
+}
+
+/**
+ * Returns false if the tag is not allowed inside the parent tag such that it will result
+ * in the browser repairing the HTML, which will likely result in an error during hydration.
+ * @param {string} tag
+ * @param {string} parent_tag
+ * @returns {boolean}
+ */
+export function is_tag_valid_with_parent(tag, parent_tag) {
+	const disallowed = disallowed_children[parent_tag];
+
+	if (disallowed) {
+		if ('direct' in disallowed && disallowed.direct.includes(tag)) {
+			return false;
+		}
+		if ('descendant' in disallowed && disallowed.descendant.includes(tag)) {
+			return false;
+		}
+		if ('only' in disallowed && disallowed.only) {
+			return disallowed.only.includes(tag);
+		}
+	}
+
+	switch (tag) {
+		case 'body':
+		case 'caption':
+		case 'col':
+		case 'colgroup':
+		case 'frameset':
+		case 'frame':
+		case 'head':
+		case 'html':
+		case 'tbody':
+		case 'td':
+		case 'tfoot':
+		case 'th':
+		case 'thead':
+		case 'tr':
+			// These tags are only valid with a few parents that have special child
+			// parsing rules - if we're down here, then none of those matched and
+			// so we allow it only if we don't know what the parent is, as all other
+			// cases are invalid (and we only get into this function if we know the parent).
+			return false;
+	}
+
+	return true;
+}
diff --git a/packages/svelte/src/internal/server/dev.js b/packages/svelte/src/internal/server/dev.js
index dfffa7175b..1904995086 100644
--- a/packages/svelte/src/internal/server/dev.js
+++ b/packages/svelte/src/internal/server/dev.js
@@ -1,10 +1,9 @@
 /** @import { Component, Payload } from '#server' */
+import { FILENAME } from '../../constants.js';
 import {
-	FILENAME,
-	disallowed_paragraph_contents,
-	interactive_elements,
+	is_tag_valid_with_ancestor,
 	is_tag_valid_with_parent
-} from '../../constants.js';
+} from '../../html-tree-validation.js';
 import { current_component } from './context.js';
 
 /**
@@ -40,7 +39,7 @@ function stringify(element) {
  */
 function print_error(payload, parent, child) {
 	var message =
-		`${stringify(parent)} cannot contain ${stringify(child)}\n\n` +
+		`node_invalid_placement_ssr: ${stringify(parent)} cannot contain ${stringify(child)}\n\n` +
 		'This can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.';
 
 	if ((seen ??= new Set()).has(message)) return;
@@ -60,31 +59,17 @@ function print_error(payload, parent, child) {
 export function push_element(payload, tag, line, column) {
 	var filename = /** @type {Component} */ (current_component).function[FILENAME];
 	var child = { tag, parent, filename, line, column };
+	var ancestor = parent?.parent;
 
 	if (parent !== null && !is_tag_valid_with_parent(tag, parent.tag)) {
 		print_error(payload, parent, child);
 	}
 
-	if (interactive_elements.has(tag)) {
-		let element = parent;
-		while (element !== null) {
-			if (interactive_elements.has(element.tag)) {
-				print_error(payload, element, child);
-				break;
-			}
-			element = element.parent;
-		}
-	}
-
-	if (disallowed_paragraph_contents.includes(tag)) {
-		let element = parent;
-		while (element !== null) {
-			if (element.tag === 'p') {
-				print_error(payload, element, child);
-				break;
-			}
-			element = element.parent;
+	while (ancestor != null) {
+		if (!is_tag_valid_with_ancestor(tag, ancestor.tag)) {
+			print_error(payload, ancestor, child);
 		}
+		ancestor = ancestor.parent;
 	}
 
 	parent = child;
diff --git a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js
index bc32b669cd..1e379f6b61 100644
--- a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/_config.js
@@ -12,7 +12,7 @@ export default test({
 		dev: true
 	},
 
-	html: `<p></p><h1>foo</h1><p></p>`,
+	html: `<p></p><h1>foo</h1><p></p><form></form>`,
 
 	recover: true,
 
@@ -27,13 +27,15 @@ export default test({
 		log.length = 0;
 	},
 
-	async test({ assert, target, variant }) {
-		await assert.htmlEqual(target.innerHTML, `<p></p><h1>foo</h1><p></p>`);
+	async test({ assert, variant }) {
 		if (variant === 'hydrate') {
 			assert.equal(
-				log[0],
-				'`<p>` (main.svelte:5:0) cannot contain `<h1>` (Component.svelte:1:0)\n\n' +
-					'This can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.'
+				log[0].split('\n')[0],
+				'node_invalid_placement_ssr: `<p>` (main.svelte:6:0) cannot contain `<h1>` (h1.svelte:1:0)'
+			);
+			assert.equal(
+				log[1].split('\n')[0],
+				'node_invalid_placement_ssr: `<form>` (main.svelte:9:0) cannot contain `<form>` (form.svelte:1:0)'
 			);
 		}
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/form.svelte b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/form.svelte
new file mode 100644
index 0000000000..cddb6e3794
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/form.svelte
@@ -0,0 +1 @@
+<form></form>
diff --git a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/Component.svelte b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/h1.svelte
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/Component.svelte
rename to packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/h1.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/main.svelte b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/main.svelte
index e7fb324d9d..84af671155 100644
--- a/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/invalid-html-ssr/main.svelte
@@ -1,7 +1,11 @@
 <script>
-	import Component from "./Component.svelte";
+	import Form from './form.svelte';
+	import H1 from './h1.svelte';
 </script>
 
 <p>
-	<Component />
+	<H1 />
 </p>
+<form>
+	<Form />
+</form>
diff --git a/packages/svelte/tests/validator/samples/invalid-node-placement-2/errors.json b/packages/svelte/tests/validator/samples/invalid-node-placement-2/errors.json
index 0454282103..3d97865823 100644
--- a/packages/svelte/tests/validator/samples/invalid-node-placement-2/errors.json
+++ b/packages/svelte/tests/validator/samples/invalid-node-placement-2/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "node_invalid_placement",
-		"message": "<div> is invalid inside <p>",
+		"message": "`<div>` is invalid inside `<p>`",
 		"start": {
 			"line": 4,
 			"column": 3
diff --git a/packages/svelte/tests/validator/samples/invalid-node-placement-4/errors.json b/packages/svelte/tests/validator/samples/invalid-node-placement-4/errors.json
index 8b2e2e67ba..4d637aed80 100644
--- a/packages/svelte/tests/validator/samples/invalid-node-placement-4/errors.json
+++ b/packages/svelte/tests/validator/samples/invalid-node-placement-4/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "node_invalid_placement",
-		"message": "<form> is invalid inside <form>",
+		"message": "`<form>` is invalid inside `<form>`",
 		"start": {
 			"line": 4,
 			"column": 3
diff --git a/packages/svelte/tests/validator/samples/invalid-node-placement-5/input.svelte b/packages/svelte/tests/validator/samples/invalid-node-placement-5/input.svelte
new file mode 100644
index 0000000000..c50f4e087f
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/invalid-node-placement-5/input.svelte
@@ -0,0 +1,9 @@
+<div>
+	<form>
+		{#if foo}
+			<form>
+				<input />
+			</form>
+		{/if}
+	</form>
+</div>
diff --git a/packages/svelte/tests/validator/samples/invalid-node-placement-5/warnings.json b/packages/svelte/tests/validator/samples/invalid-node-placement-5/warnings.json
new file mode 100644
index 0000000000..e85050beb7
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/invalid-node-placement-5/warnings.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "node_invalid_placement_ssr",
+		"message": "`<form>` is invalid inside `<form>`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a `hydration_mismatch` warning",
+		"start": {
+			"line": 4,
+			"column": 3
+		},
+		"end": {
+			"line": 6,
+			"column": 10
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/invalid-node-placement/errors.json b/packages/svelte/tests/validator/samples/invalid-node-placement/errors.json
index 2955a1e522..b9bdad5e72 100644
--- a/packages/svelte/tests/validator/samples/invalid-node-placement/errors.json
+++ b/packages/svelte/tests/validator/samples/invalid-node-placement/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "node_invalid_placement",
-		"message": "<a> is invalid inside <a>",
+		"message": "`<a>` is invalid inside `<a>`",
 		"start": {
 			"line": 4,
 			"column": 6

From 7af0e604d82ca2478c126f6acd319ab98435b4e9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 28 Jul 2024 12:53:26 -0400
Subject: [PATCH 021/196] feat: remove `$.unwrap` calls from each block indexes
 (#12640)

* remove $.unwrap from key functions

* feat: remove `$.unwrap` calls from each block indexes

* tweak
---
 .changeset/dry-hotels-matter.md               |  5 +++
 .../phases/3-transform/client/utils.js        | 10 +++---
 .../3-transform/client/visitors/template.js   | 35 ++++++++++++-------
 3 files changed, 32 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/dry-hotels-matter.md

diff --git a/.changeset/dry-hotels-matter.md b/.changeset/dry-hotels-matter.md
new file mode 100644
index 0000000000..927f84908d
--- /dev/null
+++ b/.changeset/dry-hotels-matter.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: remove $.unwrap calls from each block indexes
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 b9456f8653..529318d4fc 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -79,6 +79,11 @@ export function serialize_get_binding(node, state) {
 		return node;
 	}
 
+	if (Object.hasOwn(state.getters, node.name)) {
+		const getter = state.getters[node.name];
+		return typeof getter === 'function' ? getter(node) : getter;
+	}
+
 	if (binding.node.name === '$$props') {
 		// Special case for $$props which only exists in the old world
 		return b.id('$$sanitized_props');
@@ -88,11 +93,6 @@ export function serialize_get_binding(node, state) {
 		return b.call(node);
 	}
 
-	if (Object.hasOwn(state.getters, node.name)) {
-		const getter = state.getters[node.name];
-		return typeof getter === 'function' ? getter(node) : getter;
-	}
-
 	if (binding.kind === 'prop' || binding.kind === 'bindable_prop') {
 		if (is_prop_source(binding, state)) {
 			return b.call(node);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index 0548d7a143..cf0fd231e5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -2493,6 +2493,12 @@ export const template_visitors = {
 			getters: { ...context.state.getters }
 		};
 
+		/** The state used when generating the key function, if necessary */
+		const key_state = {
+			...context.state,
+			getters: { ...context.state.getters }
+		};
+
 		/**
 		 * @param {Pattern} expression_for_id
 		 * @returns {Binding['mutation']}
@@ -2550,8 +2556,12 @@ export const template_visitors = {
 		if (node.index) {
 			child_state.getters[node.index] = (id) => {
 				const index_with_loc = with_loc(index, id);
-				return b.call('$.unwrap', index_with_loc);
+				return (flags & EACH_INDEX_REACTIVE) === 0
+					? index_with_loc
+					: b.call('$.get', index_with_loc);
 			};
+
+			key_state.getters[node.index] = b.id(node.index);
 		}
 
 		/** @type {Statement[]} */
@@ -2565,6 +2575,8 @@ export const template_visitors = {
 					true
 				)
 			);
+
+			key_state.getters[node.context.name] = node.context;
 		} else {
 			const unwrapped = getter(binding.node);
 			const paths = extract_paths(node.context);
@@ -2592,23 +2604,20 @@ export const template_visitors = {
 				if (context.state.options.dev) {
 					declarations.push(b.stmt(getter));
 				}
+
+				key_state.getters[name] = path.node;
 			}
 		}
 
 		const block = /** @type {BlockStatement} */ (context.visit(node.body, child_state));
 
-		const key_function = node.key
-			? b.arrow(
-					[node.context.type === 'Identifier' ? node.context : b.id('$$item'), index],
-					declarations.length > 0
-						? b.block(
-								declarations.concat(
-									b.return(/** @type {Expression} */ (context.visit(node.key, child_state)))
-								)
-							)
-						: /** @type {Expression} */ (context.visit(node.key, child_state))
-				)
-			: b.id('$.index');
+		/** @type {Expression} */
+		let key_function = b.id('$.index');
+
+		if (node.key) {
+			const expression = /** @type {Expression} */ (context.visit(node.key, key_state));
+			key_function = b.arrow([node.context, index], expression);
+		}
 
 		if (node.index && each_node_meta.contains_group_binding) {
 			// We needed to create a unique identifier for the index above, but we want to use the

From 219ba6a71ba3a72f1d87b6d2a5c77fad61d5c97e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 28 Jul 2024 15:27:10 -0400
Subject: [PATCH 022/196] fix: error on `bind:this` to each block parameter
 (#12638)

* chore: remove outdated comment

* fix: error on `bind:this` to each block parameter
---
 .changeset/sharp-spies-live.md                |  5 ++++
 .../compiler/phases/2-analyze/validation.js   | 28 +++++++++----------
 .../_config.js                                |  9 ++++++
 .../main.svelte                               | 11 ++++++++
 4 files changed, 38 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/sharp-spies-live.md
 create mode 100644 packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/main.svelte

diff --git a/.changeset/sharp-spies-live.md b/.changeset/sharp-spies-live.md
new file mode 100644
index 0000000000..0ddbde97ed
--- /dev/null
+++ b/.changeset/sharp-spies-live.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: error on `bind:this` to each block parameter
diff --git a/packages/svelte/src/compiler/phases/2-analyze/validation.js b/packages/svelte/src/compiler/phases/2-analyze/validation.js
index eda5ed42b0..296104b050 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/validation.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/validation.js
@@ -385,33 +385,31 @@ const validation = {
 
 		const binding = context.state.scope.get(left.name);
 
-		if (
-			assignee.type === 'Identifier' &&
-			node.name !== 'this' // bind:this also works for regular variables
-		) {
+		if (assignee.type === 'Identifier') {
 			// reassignment
 			if (
-				!binding ||
-				(binding.kind !== 'state' &&
-					binding.kind !== 'frozen_state' &&
-					binding.kind !== 'prop' &&
-					binding.kind !== 'bindable_prop' &&
-					binding.kind !== 'each' &&
-					binding.kind !== 'store_sub' &&
-					!binding.mutated)
+				node.name !== 'this' && // bind:this also works for regular variables
+				(!binding ||
+					(binding.kind !== 'state' &&
+						binding.kind !== 'frozen_state' &&
+						binding.kind !== 'prop' &&
+						binding.kind !== 'bindable_prop' &&
+						binding.kind !== 'each' &&
+						binding.kind !== 'store_sub' &&
+						!binding.mutated))
 			) {
 				e.bind_invalid_value(node.expression);
 			}
 
-			if (binding.kind === 'derived') {
+			if (binding?.kind === 'derived') {
 				e.constant_binding(node.expression, 'derived state');
 			}
 
-			if (context.state.analysis.runes && binding.kind === 'each') {
+			if (context.state.analysis.runes && binding?.kind === 'each') {
 				e.each_item_invalid_assignment(node);
 			}
 
-			if (binding.kind === 'snippet') {
+			if (binding?.kind === 'snippet') {
 				e.snippet_parameter_assignment(node);
 			}
 		}
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/_config.js
new file mode 100644
index 0000000000..524c2f161c
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'each_item_invalid_assignment',
+		message:
+			'Cannot reassign or bind to each block argument in runes mode. Use the array and index variables instead (e.g. `array[i] = value` instead of `entry = value`)'
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/main.svelte b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/main.svelte
new file mode 100644
index 0000000000..f6d887d048
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/runes-invalid-each-binding-this/main.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	let array: Array<{ id: number; element: HTMLElement | null }> = $state([
+		{ id: 1, element: null },
+		{ id: 2, element: null },
+		{ id: 3, element: null }
+	]);
+</script>
+
+{#each array as { id, element } (id)}
+	<input bind:this={element} />
+{/each}

From 5d82cf1f03e5b9c57feaf50a4996238688597588 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 28 Jul 2024 15:27:42 -0400
Subject: [PATCH 023/196] feat: remove `$.unwrap` calls from `bind:group`
 (#12642)

* add each.metadata.keyed

* simplify

* feat: remove `$.unwrap` from `bind:group` code

* changeset

* regenerate types
---
 .changeset/three-donkeys-jump.md              |  5 ++++
 .../src/compiler/phases/2-analyze/index.js    |  7 ++++++
 .../3-transform/client/visitors/template.js   | 25 ++++++++++---------
 packages/svelte/src/compiler/phases/scope.js  |  1 +
 .../svelte/src/compiler/types/template.d.ts   |  1 +
 .../client/dom/elements/bindings/input.js     |  9 ++-----
 packages/svelte/types/index.d.ts              |  1 +
 7 files changed, 30 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/three-donkeys-jump.md

diff --git a/.changeset/three-donkeys-jump.md b/.changeset/three-donkeys-jump.md
new file mode 100644
index 0000000000..6cdc6c7556
--- /dev/null
+++ b/.changeset/three-donkeys-jump.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: remove `$.unwrap` calls from `bind:group`
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index aa1e43196f..aac76faa60 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -1547,6 +1547,13 @@ const common_visitors = {
 	},
 	RenderTag(node, context) {
 		context.next({ ...context.state, render_tag: node });
+	},
+	EachBlock(node) {
+		if (node.key) {
+			// treat `{#each items as item, i (i)}` as a normal indexed block, everything else as keyed
+			node.metadata.keyed =
+				node.key.type !== 'Identifier' || !node.index || node.key.name !== node.index;
+		}
 	}
 };
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index cf0fd231e5..ca78a33a1c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -2409,10 +2409,7 @@ export const template_visitors = {
 
 		let flags = 0;
 
-		if (
-			node.key &&
-			(node.key.type !== 'Identifier' || !node.index || node.key.name !== node.index)
-		) {
+		if (node.metadata.keyed) {
 			flags |= EACH_KEYED;
 
 			if (node.index) {
@@ -2421,7 +2418,7 @@ export const template_visitors = {
 
 			// In runes mode, if key === item, we don't need to wrap the item in a source
 			const key_is_item =
-				node.key.type === 'Identifier' &&
+				/** @type {Expression} */ (node.key).type === 'Identifier' &&
 				node.context.type === 'Identifier' &&
 				node.context.name === node.key.name;
 
@@ -2614,8 +2611,11 @@ export const template_visitors = {
 		/** @type {Expression} */
 		let key_function = b.id('$.index');
 
-		if (node.key) {
-			const expression = /** @type {Expression} */ (context.visit(node.key, key_state));
+		if (node.metadata.keyed) {
+			const expression = /** @type {Expression} */ (
+				context.visit(/** @type {Expression} */ (node.key), key_state)
+			);
+
 			key_function = b.arrow([node.context, index], expression);
 		}
 
@@ -3049,11 +3049,12 @@ export const template_visitors = {
 					call_expr = b.call(`$.bind_focused`, state.node, setter);
 					break;
 				case 'group': {
-					/** @type {CallExpression[]} */
-					const indexes = [];
-					for (const parent_each_block of node.metadata.parent_each_blocks) {
-						indexes.push(b.call('$.unwrap', parent_each_block.metadata.index));
-					}
+					const indexes = node.metadata.parent_each_blocks.map((each) => {
+						// if we have a keyed block with an index, the index is wrapped in a source
+						return each.metadata.keyed && each.index
+							? b.call('$.get', each.metadata.index)
+							: each.metadata.index;
+					});
 
 					// We need to additionally invoke the value attribute signal to register it as a dependency,
 					// so that when the value is updated, the group binding is updated
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 1ba9851ee3..167f61e034 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -592,6 +592,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 			}
 
 			node.metadata = {
+				keyed: false,
 				contains_group_binding: false,
 				array_name: needs_array_deduplication ? state.scope.root.unique('$$array') : null,
 				index: scope.root.unique('$$index'),
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index ec35a08227..e5bc072c1a 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -393,6 +393,7 @@ export interface EachBlock extends BaseNode {
 	index?: string;
 	key?: Expression;
 	metadata: {
+		keyed: boolean;
 		contains_group_binding: boolean;
 		/** Set if something in the array expression is shadowed within the each block */
 		array_name: Identifier | null;
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/input.js b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
index ca83d90f20..35dd229d39 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/input.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/input.js
@@ -73,13 +73,8 @@ export function bind_group(inputs, group_index, input, get_value, update) {
 
 	if (group_index !== null) {
 		for (var index of group_index) {
-			var group = binding_group;
-			// @ts-ignore
-			binding_group = group[index];
-			if (binding_group === undefined) {
-				// @ts-ignore
-				binding_group = group[index] = [];
-			}
+			// @ts-expect-error
+			binding_group = binding_group[index] ??= [];
 		}
 	}
 
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 9de214c847..d9537235f6 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1845,6 +1845,7 @@ declare module 'svelte/compiler' {
 		index?: string;
 		key?: Expression;
 		metadata: {
+			keyed: boolean;
 			contains_group_binding: boolean;
 			/** Set if something in the array expression is shadowed within the each block */
 			array_name: Identifier | null;

From 5817767a87e130fc3ae3bd39a00cf3290821b136 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 28 Jul 2024 15:36:31 -0400
Subject: [PATCH 024/196] Version Packages (next) (#12641)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  3 +++
 packages/svelte/CHANGELOG.md   | 10 ++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 945ae7f965..1c02935ded 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -122,6 +122,7 @@
     "dry-eggs-retire",
     "dry-fans-march",
     "dry-ghosts-prove",
+    "dry-hotels-matter",
     "dry-parrots-bathe",
     "dry-pillows-exist",
     "dull-coins-vanish",
@@ -530,6 +531,7 @@
     "shaggy-comics-jog",
     "sharp-gorillas-impress",
     "sharp-kids-happen",
+    "sharp-spies-live",
     "sharp-tomatoes-learn",
     "shiny-baboons-play",
     "shiny-kangaroos-move",
@@ -682,6 +684,7 @@
     "thirty-wombats-relax",
     "three-buses-sleep",
     "three-camels-sell",
+    "three-donkeys-jump",
     "three-foxes-relax",
     "three-icons-trade",
     "three-lions-visit",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index f924237196..95f0286f9f 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.0.0-next.201
+
+### Patch Changes
+
+- feat: remove $.unwrap calls from each block indexes ([#12640](https://github.com/sveltejs/svelte/pull/12640))
+
+- fix: error on `bind:this` to each block parameter ([#12638](https://github.com/sveltejs/svelte/pull/12638))
+
+- feat: remove `$.unwrap` calls from `bind:group` ([#12642](https://github.com/sveltejs/svelte/pull/12642))
+
 ## 5.0.0-next.200
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 698676fddd..bb90134aa5 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.200",
+  "version": "5.0.0-next.201",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 13072c37af..4051b6c8d9 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.200';
+export const VERSION = '5.0.0-next.201';
 export const PUBLIC_VERSION = '5';

From e417d3a2d281a5ec9b595be5ffbd47efe57b28c3 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Mon, 29 Jul 2024 11:14:04 +0100
Subject: [PATCH 025/196] fix: remove implicit passive behavior from
 OnDirective events (#12645)

Fixes #12639
---
 .changeset/modern-peaches-cheer.md                          | 5 +++++
 .../compiler/phases/3-transform/client/visitors/template.js | 6 +++++-
 2 files changed, 10 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/modern-peaches-cheer.md

diff --git a/.changeset/modern-peaches-cheer.md b/.changeset/modern-peaches-cheer.md
new file mode 100644
index 0000000000..b02545e091
--- /dev/null
+++ b/.changeset/modern-peaches-cheer.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: remove implicit passive behavior from OnDirective events
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index ca78a33a1c..9006d68aca 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -1298,7 +1298,11 @@ function serialize_event(node, metadata, context) {
 			args.push(b.literal(true));
 		} else if (node.modifiers.includes('nonpassive')) {
 			args.push(b.literal(false));
-		} else if (PassiveEvents.includes(node.name)) {
+		} else if (
+			PassiveEvents.includes(node.name) &&
+			/** @type {OnDirective} */ (node).type !== 'OnDirective'
+		) {
+			// For on:something events we don't apply passive behaviour to match Svelte 4.
 			args.push(b.literal(true));
 		}
 

From 32c4e4706005bbaec3ff000fb2361b66013d3778 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 29 Jul 2024 15:32:09 +0200
Subject: [PATCH 026/196] fix: always set draggable through `setAttribute` to
 avoid weird behavior (#12649)

Closes #12643

Very weird behaviour from the draggable setter...if you set element.draggable="false" it will actually set draggable to true (the boolean).
---
 .changeset/wild-poems-design.md                 |  5 +++++
 .../internal/client/dom/elements/attributes.js  |  5 +++--
 .../samples/svelte-element-draggable/_config.js | 17 +++++++++++++++++
 .../svelte-element-draggable/main.svelte        |  7 +++++++
 4 files changed, 32 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/wild-poems-design.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/main.svelte

diff --git a/.changeset/wild-poems-design.md b/.changeset/wild-poems-design.md
new file mode 100644
index 0000000000..e973ab9518
--- /dev/null
+++ b/.changeset/wild-poems-design.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: always set draggable through `setAttribute` to avoid weird behavior
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 7c8c0d8107..1321470062 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -341,9 +341,10 @@ export function set_dynamic_element_attributes(node, prev, next, css_hash) {
  * because updating them through the property setter doesn't work reliably.
  * In the example of `width`/`height`, the problem is that the setter only
  * accepts numeric values, but the attribute can also be set to a string like `50%`.
- * If this list becomes too big, rethink this approach.
+ * In case of draggable trying to set `element.draggable='false'` will actually set
+ * draggable to `true`. If this list becomes too big, rethink this approach.
  */
-var always_set_through_set_attribute = ['width', 'height'];
+var always_set_through_set_attribute = ['width', 'height', 'draggable'];
 
 /** @type {Map<string, string[]>} */
 var setters_cache = new Map();
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/_config.js
new file mode 100644
index 0000000000..589e079b16
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/_config.js
@@ -0,0 +1,17 @@
+import { ok, test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	html: `<div draggable="false"></div><div draggable="false"></div>`,
+
+	async test({ assert, target, logs }) {
+		const [div, div2] = target.querySelectorAll('div');
+		ok(div);
+		ok(div2);
+
+		assert.deepEqual(div.getAttribute('draggable'), 'false');
+		assert.deepEqual(div.draggable, false);
+		assert.deepEqual(div2.getAttribute('draggable'), 'false');
+		assert.deepEqual(div2.draggable, false);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/main.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/main.svelte
new file mode 100644
index 0000000000..37e655cb15
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-element-draggable/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let attrs = $state({ draggable: 'false' });
+</script>
+
+<svelte:element this={'div'} draggable="false"></svelte:element>
+
+<div {...attrs}></div>

From 85f2f161ed3ad141ecfdc942719a582dd99172aa Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 29 Jul 2024 15:32:26 +0200
Subject: [PATCH 027/196] chore: use queue_microtask on `#await` again (#12647)

Now that we've made `mount` and `hydrate` not call `flushSync` anymore, we can go back to using `queue_microtask` inside `#await`, which means people who want to synchronously see the pending block can do so using `flushSync` (as validated by our tests). This essentially reverts #12274
---
 .../src/internal/client/dom/blocks/await.js   |  2 +-
 .../expected.html                             |  6 +-
 .../input.svelte                              | 11 +--
 .../_config.js                                | 12 ++--
 .../expected.css                              |  6 +-
 .../expected.html                             |  4 +-
 .../input.svelte                              | 13 ++--
 .../expected.html                             |  6 +-
 .../input.svelte                              | 13 ++--
 .../siblings-combinator-await/_config.js      | 16 ++---
 .../siblings-combinator-await/expected.css    |  8 +--
 .../siblings-combinator-await/expected.html   |  4 +-
 .../siblings-combinator-await/input.svelte    | 15 ++--
 packages/svelte/tests/css/test.ts             |  3 +-
 .../await-block-func-function/_config.js      |  4 ++
 .../await-catch-no-expression/_config.js      |  6 +-
 .../await-conservative-update/_config.js      |  4 ++
 .../samples/await-containing-if/_config.js    |  4 ++
 .../samples/await-in-each/_config.js          |  4 ++
 .../_config.js                                |  1 +
 .../_config.js                                |  3 +-
 .../samples/await-set-simultaneous/_config.js |  1 -
 .../await-then-blowback-reactive/_config.js   |  2 +
 .../await-then-catch-anchor/_config.js        |  7 +-
 .../samples/await-then-catch-event/_config.js |  4 ++
 .../samples/await-then-catch-if/_config.js    |  4 ++
 .../await-then-catch-in-slot/_config.js       |  5 +-
 .../await-then-catch-multiple/_config.js      |  8 ++-
 .../await-then-catch-no-values/_config.js     |  5 +-
 .../samples/await-then-catch-order/_config.js |  4 ++
 .../await-then-catch-static/_config.js        |  7 +-
 .../samples/await-then-catch/_config.js       |  7 +-
 .../_config.js                                |  4 ++
 .../await-then-destruct-array/_config.js      |  4 ++
 .../_config.js                                |  4 ++
 .../await-then-destruct-object/_config.js     |  4 ++
 .../samples/await-then-if/_config.js          |  4 ++
 .../await-then-no-expression/_config.js       |  7 +-
 .../samples/await-then-shorthand/_config.js   |  3 +-
 .../samples/await-with-components/_config.js  |  3 -
 .../samples/await-with-update-2/_config.js    |  4 ++
 .../samples/await-with-update/_config.js      |  4 ++
 .../samples/await-without-catch/_config.js    |  7 +-
 .../samples/context-in-await/_config.js       |  4 ++
 .../_config.js                                |  1 -
 .../transition-js-await-block/_config.js      |  3 +-
 .../samples/await-pending-wait/_config.js     | 68 +++++++++++++++++++
 .../samples/await-pending-wait/await.svelte   |  9 +++
 .../samples/await-pending-wait/main.svelte    | 13 ++++
 .../samples/await-resolve-2/_config.js        |  7 +-
 .../samples/await-resolve/_config.js          |  9 +--
 .../03-appendix/02-breaking-changes.md        | 23 +------
 52 files changed, 272 insertions(+), 112 deletions(-)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/await-pending-wait/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/await-pending-wait/await.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/await-pending-wait/main.svelte

diff --git a/packages/svelte/src/internal/client/dom/blocks/await.js b/packages/svelte/src/internal/client/dom/blocks/await.js
index 49a7bd5892..5477176660 100644
--- a/packages/svelte/src/internal/client/dom/blocks/await.js
+++ b/packages/svelte/src/internal/client/dom/blocks/await.js
@@ -139,7 +139,7 @@ export function await_block(node, get_input, pending_fn, then_fn, catch_fn) {
 			} else {
 				// Wait a microtask before checking if we should show the pending state as
 				// the promise might have resolved by the next microtask.
-				Promise.resolve().then(() => {
+				queue_micro_task(() => {
 					if (!resolved) update(PENDING, true);
 				});
 			}
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/expected.html b/packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/expected.html
index 884480bca1..de97b02a5e 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/expected.html
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/expected.html
@@ -1,4 +1,4 @@
 <div class="a svelte-xyz"></div>
-<div class="b svelte-xyz"></div>
-<div class="g svelte-xyz"></div>
-<div class="h svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="h svelte-xyz"></div>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/input.svelte b/packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/input.svelte
index 5fb2c1e540..a3e4230161 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/input.svelte
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-await-not-exhaustive/input.svelte
@@ -1,3 +1,7 @@
+<script>
+	let promise = Promise.resolve();
+</script>
+
 <style>
 	.a ~ .b { color: green; }
 	.a ~ .c { color: green; }
@@ -16,20 +20,19 @@
 
 <div class="a"></div>
 
-<!-- non-promise, so that something renders initially -->
-{#await true then value}
+{#await promise then value}
 	<div class="b"></div>
 {:catch error}
 	<div class="c"></div>
 {/await}
 
-{#await true}
+{#await promise}
 	<div class="d"></div>
 {:catch error}
 	<div class="e"></div>
 {/await}
 
-{#await true}
+{#await promise}
 	<div class="f"></div>
 {:then error}
 	<div class="g"></div>
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-await/_config.js b/packages/svelte/tests/css/samples/general-siblings-combinator-await/_config.js
index 373b789225..fbc374017b 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-await/_config.js
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-await/_config.js
@@ -5,20 +5,20 @@ export default test({
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b ~ .c"',
-			start: { character: 217, column: 1, line: 13 },
-			end: { character: 224, column: 8, line: 13 }
+			start: { character: 269, column: 1, line: 15 },
+			end: { character: 276, column: 8, line: 15 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".c ~ .d"',
-			start: { character: 242, column: 1, line: 14 },
-			end: { character: 249, column: 8, line: 14 }
+			start: { character: 296, column: 1, line: 16 },
+			end: { character: 303, column: 8, line: 16 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b ~ .d"',
-			start: { character: 267, column: 1, line: 15 },
-			end: { character: 274, column: 8, line: 15 }
+			start: { character: 323, column: 1, line: 17 },
+			end: { character: 330, column: 8, line: 17 }
 		}
 	]
 });
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.css b/packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.css
index 61a4561e84..e73e8c22e8 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.css
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.css
@@ -7,6 +7,6 @@
 	.a.svelte-xyz ~ .e:where(.svelte-xyz) { color: green; }
 
 	/* no match */
-	/* (unused) .b ~ .c { color: red; }*/
-	/* (unused) .c ~ .d { color: red; }*/
-	/* (unused) .b ~ .d { color: red; }*/
+	/* (unused) .b ~ .c { color: green; }*/
+	/* (unused) .c ~ .d { color: green; }*/
+	/* (unused) .b ~ .d { color: green; }*/
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.html b/packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.html
index b1924cf6c8..3d8ac9f966 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.html
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-await/expected.html
@@ -1,3 +1,3 @@
 <div class="a svelte-xyz"></div>
-<div class="c svelte-xyz"></div>
-<div class="e svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="e svelte-xyz"></div>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/general-siblings-combinator-await/input.svelte b/packages/svelte/tests/css/samples/general-siblings-combinator-await/input.svelte
index 6d8774f72f..11bd358c01 100644
--- a/packages/svelte/tests/css/samples/general-siblings-combinator-await/input.svelte
+++ b/packages/svelte/tests/css/samples/general-siblings-combinator-await/input.svelte
@@ -1,4 +1,6 @@
-
+<script>
+	let promise = Promise.resolve();
+</script>
 
 <style>
 	.a ~ .b { color: green; }
@@ -10,15 +12,14 @@
 	.a ~ .e { color: green; }
 
 	/* no match */
-	.b ~ .c { color: red; }
-	.c ~ .d { color: red; }
-	.b ~ .d { color: red; }
+	.b ~ .c { color: green; }
+	.c ~ .d { color: green; }
+	.b ~ .d { color: green; }
 </style>
 
 <div class="a"></div>
 
-<!-- non-promise, so that something renders initially -->
-{#await true}
+{#await promise}
 	<div class="b"></div>
 {:then value}
 	<div class="c"></div>
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/expected.html b/packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/expected.html
index 884480bca1..de97b02a5e 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/expected.html
+++ b/packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/expected.html
@@ -1,4 +1,4 @@
 <div class="a svelte-xyz"></div>
-<div class="b svelte-xyz"></div>
-<div class="g svelte-xyz"></div>
-<div class="h svelte-xyz"></div>
+<div class="d svelte-xyz"></div>
+<div class="f svelte-xyz"></div>
+<div class="h svelte-xyz"></div>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/input.svelte b/packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/input.svelte
index 30d48d1a6a..520c6f39a9 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/input.svelte
+++ b/packages/svelte/tests/css/samples/siblings-combinator-await-not-exhaustive/input.svelte
@@ -1,3 +1,7 @@
+<script>
+	let promise = Promise.resolve();
+</script>
+
 <style>
 	.a + .b { color: green; }
 	.a + .c { color: green; }
@@ -16,22 +20,21 @@
 
 <div class="a"></div>
 
-<!-- non-promise, so that something renders initially -->
-{#await true then value}
+{#await promise then value}
 	<div class="b"></div>
 {:catch error}
 	<div class="c"></div>
 {/await}
 
-{#await true}
+{#await promise}
 	<div class="d"></div>
 {:catch error}
 	<div class="e"></div>
 {/await}
 
-{#await true}
+{#await promise}
 	<div class="f"></div>
-{:then value}
+{:then error}
 	<div class="g"></div>
 {/await}
 
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-await/_config.js b/packages/svelte/tests/css/samples/siblings-combinator-await/_config.js
index 179d3f3592..46e3b331b8 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-await/_config.js
+++ b/packages/svelte/tests/css/samples/siblings-combinator-await/_config.js
@@ -5,26 +5,26 @@ export default test({
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".a + .e"',
-			start: { character: 188, column: 1, line: 10 },
-			end: { character: 195, column: 8, line: 10 }
+			start: { character: 242, column: 1, line: 14 },
+			end: { character: 249, column: 8, line: 14 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b + .c"',
-			start: { character: 213, column: 1, line: 11 },
-			end: { character: 220, column: 8, line: 11 }
+			start: { character: 269, column: 1, line: 15 },
+			end: { character: 276, column: 8, line: 15 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".c + .d"',
-			start: { character: 238, column: 1, line: 12 },
-			end: { character: 245, column: 8, line: 12 }
+			start: { character: 296, column: 1, line: 16 },
+			end: { character: 303, column: 8, line: 16 }
 		},
 		{
 			code: 'css_unused_selector',
 			message: 'Unused CSS selector ".b + .d"',
-			start: { character: 263, column: 1, line: 13 },
-			end: { character: 270, column: 8, line: 13 }
+			start: { character: 323, column: 1, line: 17 },
+			end: { character: 330, column: 8, line: 17 }
 		}
 	]
 });
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-await/expected.css b/packages/svelte/tests/css/samples/siblings-combinator-await/expected.css
index e71aa16a8b..8e68694ba7 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-await/expected.css
+++ b/packages/svelte/tests/css/samples/siblings-combinator-await/expected.css
@@ -6,7 +6,7 @@
 	.d.svelte-xyz + .e:where(.svelte-xyz) { color: green; }
 
 	/* no match */
-	/* (unused) .a + .e { color: red; }*/
-	/* (unused) .b + .c { color: red; }*/
-	/* (unused) .c + .d { color: red; }*/
-	/* (unused) .b + .d { color: red; }*/
+	/* (unused) .a + .e { color: green; }*/
+	/* (unused) .b + .c { color: green; }*/
+	/* (unused) .c + .d { color: green; }*/
+	/* (unused) .b + .d { color: green; }*/
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-await/expected.html b/packages/svelte/tests/css/samples/siblings-combinator-await/expected.html
index b1924cf6c8..3d8ac9f966 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-await/expected.html
+++ b/packages/svelte/tests/css/samples/siblings-combinator-await/expected.html
@@ -1,3 +1,3 @@
 <div class="a svelte-xyz"></div>
-<div class="c svelte-xyz"></div>
-<div class="e svelte-xyz"></div>
+<div class="b svelte-xyz"></div>
+<div class="e svelte-xyz"></div>
\ No newline at end of file
diff --git a/packages/svelte/tests/css/samples/siblings-combinator-await/input.svelte b/packages/svelte/tests/css/samples/siblings-combinator-await/input.svelte
index 426de93af9..eab88894ac 100644
--- a/packages/svelte/tests/css/samples/siblings-combinator-await/input.svelte
+++ b/packages/svelte/tests/css/samples/siblings-combinator-await/input.svelte
@@ -1,3 +1,7 @@
+<script>
+	let promise = Promise.resolve();
+</script>
+
 <style>
 	.a + .b { color: green; }
 	.a + .c { color: green; }
@@ -7,16 +11,15 @@
 	.d + .e { color: green; }
 
 	/* no match */
-	.a + .e { color: red; }
-	.b + .c { color: red; }
-	.c + .d { color: red; }
-	.b + .d { color: red; }
+	.a + .e { color: green; }
+	.b + .c { color: green; }
+	.c + .d { color: green; }
+	.b + .d { color: green; }
 </style>
 
 <div class="a"></div>
 
-<!-- non-promise, so that something renders initially -->
-{#await true}
+{#await promise}
 	<div class="b"></div>
 {:then value}
 	<div class="c"></div>
diff --git a/packages/svelte/tests/css/test.ts b/packages/svelte/tests/css/test.ts
index b4b25fc479..30ad96369a 100644
--- a/packages/svelte/tests/css/test.ts
+++ b/packages/svelte/tests/css/test.ts
@@ -4,7 +4,7 @@ import * as fs from 'node:fs';
 import { assert } from 'vitest';
 import { compile_directory, try_read_file } from '../helpers.js';
 import { assert_html_equal } from '../html_equal.js';
-import { mount, unmount } from 'svelte';
+import { flushSync, mount, unmount } from 'svelte';
 import { suite, type BaseTest } from '../suite.js';
 import type { CompileOptions, Warning } from '#compiler';
 
@@ -60,6 +60,7 @@ const { test, run } = suite<CssTest>(async (config, cwd) => {
 		const target = window.document.createElement('main');
 
 		const component = mount(ClientComponent, { props: config.props ?? {}, target });
+		flushSync();
 
 		const html = target.innerHTML;
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-block-func-function/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-block-func-function/_config.js
index 3b64e74f24..3125eafb53 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-block-func-function/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-block-func-function/_config.js
@@ -7,6 +7,10 @@ export default test({
 		};
 	},
 
+	html: `
+		Waiting...
+	`,
+
 	async test({ assert, component, target }) {
 		await (component.thePromise = Promise.resolve({ func: 12345 }));
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-catch-no-expression/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-catch-no-expression/_config.js
index 7ef3df596b..a13e636f3c 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-catch-no-expression/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-catch-no-expression/_config.js
@@ -13,6 +13,11 @@ export default test({
 		return { thePromise: deferred.promise };
 	},
 
+	html: `
+		<br />
+		<p>the promise is pending</p>
+	`,
+
 	async test({ assert, component, target }) {
 		deferred.resolve(42);
 
@@ -22,7 +27,6 @@ export default test({
 
 		deferred = create_deferred();
 		component.thePromise = deferred.promise;
-		await Promise.resolve();
 
 		assert.htmlEqual(target.innerHTML, '<br /><p>the promise is pending</p>');
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-conservative-update/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-conservative-update/_config.js
index c7839f689f..c36d75ea1f 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-conservative-update/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-conservative-update/_config.js
@@ -2,6 +2,10 @@ import { test } from '../../test';
 import { sleep } from './sleep.js';
 
 export default test({
+	html: `
+		<p>loading...</p>
+	`,
+
 	test({ assert, target }) {
 		return sleep(50).then(() => {
 			assert.htmlEqual(
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-containing-if/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-containing-if/_config.js
index e46ef352f3..3c9bab013f 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-containing-if/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-containing-if/_config.js
@@ -13,6 +13,10 @@ export default test({
 		return { thePromise: deferred.promise, show: true };
 	},
 
+	html: `
+		<div><p>loading...</p></div>
+	`,
+
 	test({ assert, component, target }) {
 		deferred.resolve(42);
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-in-each/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-in-each/_config.js
index ea2ded02e3..71831276a6 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-in-each/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-in-each/_config.js
@@ -19,6 +19,10 @@ export default test({
 		return { items };
 	},
 
+	html: `
+		<p>a title: loading...</p>
+	`,
+
 	test({ assert, target }) {
 		fulfil(42);
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-mount-and-unmount-immediately/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-mount-and-unmount-immediately/_config.js
index 653378f52b..e207ef31d6 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-mount-and-unmount-immediately/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-mount-and-unmount-immediately/_config.js
@@ -1,6 +1,7 @@
 import { test } from '../../test';
 
 export default test({
+	html: 'Loading...',
 	async test({ assert, component, target }) {
 		await component.test();
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-set-simultaneous-reactive/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-set-simultaneous-reactive/_config.js
index 5770a65a9c..1d775465cd 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-set-simultaneous-reactive/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-set-simultaneous-reactive/_config.js
@@ -1,8 +1,9 @@
 import { test } from '../../test';
 
 export default test({
+	html: '<p>wait for it...</p>',
 	test({ assert, component, target }) {
-		return component.promise.then(() => {
+		return component.promise.then(async () => {
 			assert.htmlEqual(
 				target.innerHTML,
 				`
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-set-simultaneous/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-set-simultaneous/_config.js
index d1b93da8eb..9fe8683973 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-set-simultaneous/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-set-simultaneous/_config.js
@@ -7,7 +7,6 @@ export default test({
 		});
 
 		component.promise = promise;
-		await Promise.resolve();
 
 		assert.htmlEqual(target.innerHTML, '<p>wait for it...</p>');
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-blowback-reactive/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-blowback-reactive/_config.js
index 8d45e3a42f..665b8d94b6 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-blowback-reactive/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-blowback-reactive/_config.js
@@ -3,6 +3,8 @@ import { ok, test } from '../../test';
 
 export default test({
 	async test({ assert, component, target }) {
+		assert.htmlEqual(target.innerHTML, 'Loading...');
+
 		await component.promise;
 		await Promise.resolve();
 		const span = target.querySelector('span');
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-anchor/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-anchor/_config.js
index 36b1e836fe..d778d2c8d2 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-anchor/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-anchor/_config.js
@@ -13,11 +13,15 @@ export default test({
 		return { thePromise: deferred.promise };
 	},
 
+	html: `
+		<div><p>loading...</p></div>
+	`,
+
 	test({ assert, component, target }) {
 		deferred.resolve(42);
 
 		return deferred.promise
-			.then(async () => {
+			.then(() => {
 				assert.htmlEqual(
 					target.innerHTML,
 					`
@@ -28,7 +32,6 @@ export default test({
 				deferred = create_deferred();
 
 				component.thePromise = deferred.promise;
-				await Promise.resolve();
 
 				assert.htmlEqual(target.innerHTML, '<div><p>loading...</p></div>');
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-event/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-event/_config.js
index 598e657f06..26d22b8c1a 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-event/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-event/_config.js
@@ -15,6 +15,10 @@ export default test({
 		};
 	},
 
+	html: `
+		<p>loading...</p>
+	`,
+
 	test({ assert, component, target, window }) {
 		deferred.resolve(42);
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-if/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-if/_config.js
index 104ff82ea8..d68f1597fc 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-if/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-if/_config.js
@@ -12,6 +12,10 @@ export default test({
 		return { show: true, thePromise };
 	},
 
+	html: `
+		<p>loading...</p>
+	`,
+
 	test({ assert, component, target }) {
 		fulfil(42);
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-in-slot/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-in-slot/_config.js
index 6d6cfa4a28..09ab6e3912 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-in-slot/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-in-slot/_config.js
@@ -13,6 +13,10 @@ export default test({
 		return { thePromise: deferred.promise };
 	},
 
+	html: `
+		<p>loading...</p>
+	`,
+
 	async test({ assert, component, target }) {
 		deferred.resolve(42);
 
@@ -21,7 +25,6 @@ export default test({
 
 		deferred = create_deferred();
 		component.thePromise = deferred.promise;
-		await Promise.resolve();
 		assert.htmlEqual(target.innerHTML, '<p>loading...</p>');
 
 		deferred.reject(new Error('something broke'));
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-multiple/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-multiple/_config.js
index ff90451519..719484ff0e 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-multiple/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-multiple/_config.js
@@ -13,11 +13,16 @@ export default test({
 		return { thePromise: deferred.promise };
 	},
 
+	html: `
+		<p>loading...</p>
+		<p>loading...</p>
+	`,
+
 	test({ assert, component, target }) {
 		deferred.resolve(42);
 
 		return deferred.promise
-			.then(async () => {
+			.then(() => {
 				assert.htmlEqual(
 					target.innerHTML,
 					`
@@ -29,7 +34,6 @@ export default test({
 				deferred = create_deferred();
 
 				component.thePromise = deferred.promise;
-				await Promise.resolve();
 
 				assert.htmlEqual(
 					target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-no-values/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-no-values/_config.js
index aad71a1df0..4608be3edd 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-no-values/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-no-values/_config.js
@@ -13,17 +13,18 @@ export default test({
 		return { thePromise: deferred.promise };
 	},
 
+	html: 'waiting',
+
 	test({ assert, component, target }) {
 		deferred.resolve(9000);
 
 		return deferred.promise
-			.then(async () => {
+			.then(() => {
 				assert.htmlEqual(target.innerHTML, 'resolved');
 
 				deferred = create_deferred();
 
 				component.thePromise = deferred.promise;
-				await Promise.resolve();
 
 				assert.htmlEqual(target.innerHTML, 'waiting');
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-order/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-order/_config.js
index b12d5bc989..e4ef68a75e 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-order/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-order/_config.js
@@ -12,6 +12,10 @@ export default test({
 		return { thePromise };
 	},
 
+	html: `
+		<p>loading...</p><p>true!</p>
+	`,
+
 	test({ assert, target }) {
 		fulfil(42);
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-static/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-static/_config.js
index 1e8ae8cad2..46608c41e8 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-catch-static/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-catch-static/_config.js
@@ -12,11 +12,15 @@ export default test({
 		return { promise };
 	},
 
+	html: `
+		<p>loading...</p>
+	`,
+
 	test({ assert, component, target }) {
 		fulfil(42);
 
 		return promise
-			.then(async () => {
+			.then(() => {
 				assert.htmlEqual(
 					target.innerHTML,
 					`
@@ -29,7 +33,6 @@ export default test({
 				});
 
 				component.promise = promise;
-				await Promise.resolve();
 
 				assert.htmlEqual(
 					target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-catch/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-catch/_config.js
index 7ad918a174..33a8eb2bab 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-catch/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-catch/_config.js
@@ -13,11 +13,15 @@ export default test({
 		return { thePromise: deferred.promise };
 	},
 
+	html: `
+		<p>loading...</p>
+	`,
+
 	test({ assert, component, target }) {
 		deferred.resolve(42);
 
 		return deferred.promise
-			.then(async () => {
+			.then(() => {
 				assert.htmlEqual(
 					target.innerHTML,
 					`
@@ -28,7 +32,6 @@ export default test({
 				deferred = create_deferred();
 
 				component.thePromise = deferred.promise;
-				await Promise.resolve();
 
 				assert.htmlEqual(target.innerHTML, '<p>loading...</p>');
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-array-nested-rest/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-array-nested-rest/_config.js
index e914fba478..ee8b8e4a0e 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-array-nested-rest/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-array-nested-rest/_config.js
@@ -7,6 +7,10 @@ export default test({
 		};
 	},
 
+	html: `
+		loading...
+	`,
+
 	async test({ assert, component, target }) {
 		await (component.thePromise = Promise.resolve([1, 2, 3, 4, 5, 6, 7, 8]));
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-array/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-array/_config.js
index 9ab61331ef..1d830ce582 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-array/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-array/_config.js
@@ -7,6 +7,10 @@ export default test({
 		};
 	},
 
+	html: `
+		loading...
+	`,
+
 	async test({ assert, component, target }) {
 		await (component.thePromise = Promise.resolve([1, 2]));
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-number-props/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-number-props/_config.js
index 35c72e35b9..a5d1e2195e 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-number-props/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-number-props/_config.js
@@ -7,6 +7,10 @@ export default test({
 		};
 	},
 
+	html: `
+		loading...
+	`,
+
 	async test({ assert, component, target }) {
 		await (component.thePromise = Promise.resolve([10, 11, 12, 13, 14, 15]));
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-object/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-object/_config.js
index d098da8370..5c7989c933 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-object/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-destruct-object/_config.js
@@ -7,6 +7,10 @@ export default test({
 		};
 	},
 
+	html: `
+		loading...
+	`,
+
 	async test({ assert, component, target }) {
 		await (component.thePromise = Promise.resolve({ error: 'error message' }));
 		assert.htmlEqual(
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-if/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-if/_config.js
index 348075c4c5..27b111d68b 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-if/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-if/_config.js
@@ -12,6 +12,10 @@ export default test({
 		return { thePromise };
 	},
 
+	html: `
+		loading...
+	`,
+
 	async test({ assert, target }) {
 		fulfil([]);
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-no-expression/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-no-expression/_config.js
index a7b8bac126..7790a06d4d 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-no-expression/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-no-expression/_config.js
@@ -13,6 +13,12 @@ export default test({
 		return { thePromise: deferred.promise };
 	},
 
+	html: `
+		<br>
+		<br>
+		<p>the promise is pending</p>
+	`,
+
 	expect_unhandled_rejections: true,
 	async test({ assert, component, target }) {
 		deferred.resolve();
@@ -33,7 +39,6 @@ export default test({
 		const local = (deferred = create_deferred());
 
 		component.thePromise = local.promise;
-		await Promise.resolve();
 
 		assert.htmlEqual(
 			target.innerHTML,
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-shorthand/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-shorthand/_config.js
index 4c71961420..79e7094c6c 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-then-shorthand/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-shorthand/_config.js
@@ -19,7 +19,7 @@ export default test({
 		deferred.resolve(42);
 
 		return deferred.promise
-			.then(async () => {
+			.then(() => {
 				assert.htmlEqual(
 					target.innerHTML,
 					`
@@ -30,7 +30,6 @@ export default test({
 				deferred = create_deferred();
 
 				component.thePromise = deferred.promise;
-				await Promise.resolve();
 
 				assert.htmlEqual(target.innerHTML, '');
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-with-components/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-with-components/_config.js
index 7198203756..3798e8dc08 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-with-components/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-with-components/_config.js
@@ -11,7 +11,6 @@ export default test({
 		let promise = new Promise((ok) => (resolve = ok));
 
 		component.promise = promise;
-		await Promise.resolve();
 		assert.htmlEqual(target.innerHTML, 'Loading...');
 
 		resolve(42);
@@ -20,7 +19,6 @@ export default test({
 
 		promise = new Promise((ok, fail) => (reject = fail));
 		component.promise = promise;
-		await Promise.resolve();
 		assert.htmlEqual(target.innerHTML, 'Loading...');
 
 		reject(99);
@@ -29,7 +27,6 @@ export default test({
 
 		promise = new Promise((ok) => (resolve = ok));
 		component.promise = promise;
-		await Promise.resolve();
 		assert.htmlEqual(target.innerHTML, 'Loading...');
 
 		resolve(1);
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-with-update-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-with-update-2/_config.js
index 93d28ebefa..c091d4fbc8 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-with-update-2/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-with-update-2/_config.js
@@ -8,6 +8,10 @@ export default test({
 		};
 	},
 
+	html: `
+		<div><p>loading...</p></div>
+	`,
+
 	async test({ assert, component, target }) {
 		await (component.thePromise = Promise.resolve({
 			value: 'success',
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-with-update/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-with-update/_config.js
index 7f5aa010b4..cea4955911 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-with-update/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-with-update/_config.js
@@ -8,6 +8,10 @@ export default test({
 		};
 	},
 
+	html: `
+		<div><p>loading...</p></div>
+	`,
+
 	async test({ assert, component, target }) {
 		await (component.thePromise = Promise.resolve(component.Component));
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-without-catch/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-without-catch/_config.js
index e7fcc52efb..a4db703dc4 100644
--- a/packages/svelte/tests/runtime-legacy/samples/await-without-catch/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/await-without-catch/_config.js
@@ -13,18 +13,21 @@ export default test({
 		return { promise: deferred.promise };
 	},
 
+	html: `
+		<p>loading...</p>
+	`,
+
 	expect_unhandled_rejections: true,
 	test({ assert, component, target }) {
 		deferred.resolve(42);
 
 		return deferred.promise
-			.then(async () => {
+			.then(() => {
 				assert.htmlEqual(target.innerHTML, '<p>loaded</p>');
 
 				deferred = create_deferred();
 
 				component.promise = deferred.promise;
-				await Promise.resolve();
 
 				assert.htmlEqual(target.innerHTML, '<p>loading...</p>');
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/context-in-await/_config.js b/packages/svelte/tests/runtime-legacy/samples/context-in-await/_config.js
index b9e76c33e9..1d131be782 100644
--- a/packages/svelte/tests/runtime-legacy/samples/context-in-await/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/context-in-await/_config.js
@@ -1,6 +1,10 @@
 import { test } from '../../test';
 
 export default test({
+	html: `
+		<p>...waiting</p>
+	`,
+
 	async test({ assert, component, target }) {
 		await component.promise;
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block-outros/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block-outros/_config.js
index b4c108afb4..1ce8a85028 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block-outros/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block-outros/_config.js
@@ -14,7 +14,6 @@ export default test({
 	intro: true,
 
 	async test({ assert, target, component, raf }) {
-		await Promise.resolve();
 		assert.htmlEqual(target.innerHTML, '<p class="pending" foo="0.0">loading...</p>');
 
 		let time = 0;
diff --git a/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block/_config.js b/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block/_config.js
index 171ed5c82d..706b306ebb 100644
--- a/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/transition-js-await-block/_config.js
@@ -16,8 +16,7 @@ export default test({
 
 	intro: true,
 
-	async test({ assert, target, raf }) {
-		await Promise.resolve();
+	test({ assert, target, raf }) {
 		const p = /** @type {HTMLParagraphElement & { foo: number }} */ (target.querySelector('p'));
 
 		raf.tick(0);
diff --git a/packages/svelte/tests/runtime-runes/samples/await-pending-wait/_config.js b/packages/svelte/tests/runtime-runes/samples/await-pending-wait/_config.js
new file mode 100644
index 0000000000..7ad653433c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/await-pending-wait/_config.js
@@ -0,0 +1,68 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [b1, b2, b3] = target.querySelectorAll('button');
+
+		// not flushing means we wait a tick before showing the pending state ...
+		b2.click();
+		await Promise.resolve();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Clear</button> <button>Immediate</button> <button>Takes time</button>`
+		);
+
+		// ... and show the then state directly if the promise resolved by then
+		await Promise.resolve();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Clear</button> <button>Immediate</button> <button>Takes time</button> then`
+		);
+
+		// reset
+		b1.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Clear</button> <button>Immediate</button> <button>Takes time</button>`
+		);
+
+		// flushing means we show the pending state immediately
+		b2.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Clear</button> <button>Immediate</button> <button>Takes time</button> pending`
+		);
+
+		await Promise.resolve();
+		b1.click();
+		flushSync();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Clear</button> <button>Immediate</button> <button>Takes time</button>`
+		);
+
+		// when not flushing ...
+		b3.click();
+		await Promise.resolve();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Clear</button> <button>Immediate</button> <button>Takes time</button>`
+		);
+
+		// ... we show the pending state after a tick when the promise hasn't resolved by then
+		await Promise.resolve();
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Clear</button> <button>Immediate</button> <button>Takes time</button> pending`
+		);
+
+		await new Promise((r) => setTimeout(r, 110));
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>Clear</button> <button>Immediate</button> <button>Takes time</button> then`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/await-pending-wait/await.svelte b/packages/svelte/tests/runtime-runes/samples/await-pending-wait/await.svelte
new file mode 100644
index 0000000000..765b38717c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/await-pending-wait/await.svelte
@@ -0,0 +1,9 @@
+<script>
+	let { promise } = $props();
+</script>
+
+{#await promise}
+	pending
+{:then value}
+	then {value}
+{/await}
diff --git a/packages/svelte/tests/runtime-runes/samples/await-pending-wait/main.svelte b/packages/svelte/tests/runtime-runes/samples/await-pending-wait/main.svelte
new file mode 100644
index 0000000000..2adcc3faf4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/await-pending-wait/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Await from './await.svelte';
+
+	let promise = $state();
+</script>
+
+<button onclick={() => (promise = null)}>Clear</button>
+<button onclick={() => (promise = Promise.resolve())}>Immediate</button>
+<button onclick={() => (promise = new Promise((r) => setTimeout(r, 100)))}>Takes time</button>
+
+{#if promise}
+	<Await {promise} />
+{/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/await-resolve-2/_config.js b/packages/svelte/tests/runtime-runes/samples/await-resolve-2/_config.js
index b72a0f100f..88f1b1e961 100644
--- a/packages/svelte/tests/runtime-runes/samples/await-resolve-2/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/await-resolve-2/_config.js
@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	async test({ assert, target, logs, variant }) {
+	async test({ assert, target, logs }) {
 		const [b1, b2, b3, b4] = target.querySelectorAll('button');
 		b1.click();
 		await Promise.resolve();
@@ -16,9 +16,6 @@ export default test({
 		b4.click();
 		await Promise.resolve();
 		await Promise.resolve();
-		assert.deepEqual(
-			logs,
-			variant === 'hydrate' ? ['pending', 'a', 'b', 'c', 'pending'] : ['a', 'b', 'c', 'pending']
-		);
+		assert.deepEqual(logs, ['pending', 'a', 'b', 'c', 'pending']);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/await-resolve/_config.js b/packages/svelte/tests/runtime-runes/samples/await-resolve/_config.js
index 3f718e0c0f..11a645673a 100644
--- a/packages/svelte/tests/runtime-runes/samples/await-resolve/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/await-resolve/_config.js
@@ -1,7 +1,7 @@
 import { test } from '../../test';
 
 export default test({
-	async test({ assert, target, logs, variant }) {
+	async test({ assert, target, logs }) {
 		const [b1, b2] = target.querySelectorAll('button');
 		b1.click();
 		await Promise.resolve();
@@ -22,11 +22,6 @@ export default test({
 			`<p>then b</p><button>Show Promise A</button><button>Show Promise B</button>`
 		);
 
-		assert.deepEqual(
-			logs,
-			variant === 'hydrate'
-				? ['rendering pending block', 'rendering then block']
-				: ['rendering then block']
-		);
+		assert.deepEqual(logs, ['rendering pending block', 'rendering then block']);
 	}
 });
diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
index 5c475b7ec8..029b2ba688 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
@@ -83,6 +83,8 @@ export default {
 };
 ```
 
+Note that `mount` and `hydrate` are _not_ synchronous, so things like `onMount` won't have been called by the time the function returns and the pending block of promises will not have been rendered yet (because `#await` waits a microtask to wait for a potentially immediately-resolved promise). If you need that guarantee, call `flushSync` (import from `'svelte'`) after calling `mount/hydrate`.
+
 ### Server API changes
 
 Similarly, components no longer have a `render` method when compiled for server side rendering. Instead, pass the function to `render` from `svelte/server`:
@@ -331,24 +333,3 @@ Since these mismatches are extremely rare, Svelte 5 assumes that the values are
 ### Hydration works differently
 
 Svelte 5 makes use of comments during server side rendering which are used for more robust and efficient hydration on the client. As such, you shouldn't remove comments from your HTML output if you intend to hydrate it, and if you manually authored HTML to be hydrated by a Svelte component, you need to adjust that HTML to include said comments at the correct positions.
-
-### `await` blocks delay render
-
-In Svelte 4, an `{#await ...}` block immediately renders the pending section. In some cases, this is wasteful, because the promise is already resolved.
-
-In Svelte 5 the block remains unrendered when mounting or updating the promise, until we know whether it is already resolved or not — if so, we initally render then `{:then ...}` or `{:catch ...}` section instead.
-
-This does _not_ apply during hydration, since the pending section was already server-rendered.
-
-To wait until the pending section has been rendered (for example during testing), use `await Promise.resolve()` after mounting or updating the promise:
-
-```diff
-let props = {
-	promise: getPromiseSomehow()
-};
-
-mount(App, { target, props });
-
-+await Promise.resolve();
-assert.equal(target.innerHTML, '...');
-```

From 363535c849d71ce7fdb43015fe1b7cddc139ee44 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 29 Jul 2024 15:51:41 +0200
Subject: [PATCH 028/196] feat: warn on obvious legacy component instantiation
 (#12648)

Adds a compiler warning that warns about legacy component instantiation (i.e. using `new Component(..)`). This won't catch all cases, but the most obvious ones which probably make up ~80%
---
 .../messages/compile-warnings/script.md       |  4 +++
 .../compiler/phases/2-analyze/validation.js   | 28 ++++++++++++++++++-
 packages/svelte/src/compiler/warnings.js      |  9 ++++++
 .../input.svelte                              | 13 +++++++++
 .../warnings.json                             | 14 ++++++++++
 5 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/tests/validator/samples/component-legacy-instantiation/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/component-legacy-instantiation/warnings.json

diff --git a/packages/svelte/messages/compile-warnings/script.md b/packages/svelte/messages/compile-warnings/script.md
index af8b635bb6..a31655b972 100644
--- a/packages/svelte/messages/compile-warnings/script.md
+++ b/packages/svelte/messages/compile-warnings/script.md
@@ -6,6 +6,10 @@
 
 > Component has unused export property '%name%'. If it is for external reference only, please consider using `export const %name%`
 
+## legacy_component_creation
+
+> Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.
+
 ## non_reactive_update
 
 > `%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
diff --git a/packages/svelte/src/compiler/phases/2-analyze/validation.js b/packages/svelte/src/compiler/phases/2-analyze/validation.js
index 296104b050..67459fe5a1 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/validation.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/validation.js
@@ -1,4 +1,4 @@
-/** @import { AssignmentExpression, CallExpression, Expression, Identifier, Node, Pattern, PrivateIdentifier, Super, UpdateExpression, VariableDeclarator } from 'estree' */
+/** @import { AssignmentExpression, CallExpression, Expression, ImportDeclaration, Identifier, Node, Pattern, PrivateIdentifier, Super, UpdateExpression, VariableDeclarator } from 'estree' */
 /** @import { Attribute, Component, ElementLike, Fragment, RegularElement, SvelteComponent, SvelteElement, SvelteNode, SvelteSelf, TransitionDirective } from '#compiler' */
 /** @import { NodeLike } from '../../errors.js' */
 /** @import { AnalysisState, Context, Visitors } from './types.js' */
@@ -362,6 +362,32 @@ function validate_block_not_empty(node, context) {
  * @type {Visitors}
  */
 const validation = {
+	ExpressionStatement(node, { state }) {
+		if (
+			node.expression.type === 'NewExpression' &&
+			node.expression.callee.type === 'Identifier' &&
+			node.expression.arguments.length === 1 &&
+			node.expression.arguments[0].type === 'ObjectExpression' &&
+			node.expression.arguments[0].properties.some(
+				(p) => p.type === 'Property' && p.key.type === 'Identifier' && p.key.name === 'target'
+			)
+		) {
+			const binding = state.scope.get(node.expression.callee.name);
+			if (binding?.kind === 'normal' && binding.declaration_kind === 'import') {
+				const declaration = /** @type {ImportDeclaration} */ (binding.initial);
+
+				// Theoretically someone could import a class from a `.svelte.js` module, but that's too rare to worry about
+				if (
+					/** @type {string} */ (declaration.source.value)?.endsWith('.svelte') &&
+					declaration.specifiers.find(
+						(s) => s.local.name === binding.node.name && s.type === 'ImportDefaultSpecifier'
+					)
+				) {
+					w.legacy_component_creation(node.expression);
+				}
+			}
+		}
+	},
 	MemberExpression(node, context) {
 		if (node.object.type === 'Identifier' && node.property.type === 'Identifier') {
 			const binding = context.state.scope.get(node.object.name);
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
index ca3eaf13f6..facd53cdec 100644
--- a/packages/svelte/src/compiler/warnings.js
+++ b/packages/svelte/src/compiler/warnings.js
@@ -96,6 +96,7 @@ export const codes = [
 	"options_renamed_ssr_dom",
 	"derived_iife",
 	"export_let_unused",
+	"legacy_component_creation",
 	"non_reactive_update",
 	"perf_avoid_inline_class",
 	"perf_avoid_nested_class",
@@ -586,6 +587,14 @@ export function export_let_unused(node, name) {
 	w(node, "export_let_unused", `Component has unused export property '${name}'. If it is for external reference only, please consider using \`export const ${name}\``);
 }
 
+/**
+ * Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.
+ * @param {null | NodeLike} node
+ */
+export function legacy_component_creation(node) {
+	w(node, "legacy_component_creation", "Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.");
+}
+
 /**
  * `%name%` is updated, but is not declared with `$state(...)`. Changing its value will not correctly trigger updates
  * @param {null | NodeLike} node
diff --git a/packages/svelte/tests/validator/samples/component-legacy-instantiation/input.svelte b/packages/svelte/tests/validator/samples/component-legacy-instantiation/input.svelte
new file mode 100644
index 0000000000..e0bf24f348
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/component-legacy-instantiation/input.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Foo, { Bar } from './Somewhere.svelte';
+	import Baz from './somewhereelse';
+
+	let Buzz;
+
+	new Foo({ target: null });
+	new Foo({}); // also a false negative to be really sure we don't get false positives
+	new Foo();
+	new Bar();
+	new Baz();
+	new Buzz();
+</script>
diff --git a/packages/svelte/tests/validator/samples/component-legacy-instantiation/warnings.json b/packages/svelte/tests/validator/samples/component-legacy-instantiation/warnings.json
new file mode 100644
index 0000000000..9ec8f9fa3e
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/component-legacy-instantiation/warnings.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "legacy_component_creation",
+		"message": "Svelte 5 components are no longer classes. Instantiate them using `mount` or `hydrate` (imported from 'svelte') instead.",
+		"start": {
+			"column": 1,
+			"line": 7
+		},
+		"end": {
+			"column": 26,
+			"line": 7
+		}
+	}
+]

From 65234b80c04c8915e84a32b34039d3b33190a4fe Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 29 Jul 2024 09:57:18 -0400
Subject: [PATCH 029/196] chore: unified expression metadata (#12644)

* add ExpressionMetadata type

* use unified reactivity metadata

* simplify component

* rename

* more consistency

* store bindings on expression metadata

* tidy

* regenerate types

* remove junk from options node

* reuse

* tweak jsdoc
---
 packages/svelte/src/compiler/index.js         | 18 +++-
 .../compiler/phases/1-parse/state/element.js  | 28 ++----
 .../src/compiler/phases/1-parse/state/tag.js  |  4 +-
 .../src/compiler/phases/2-analyze/index.js    | 56 +++++++-----
 .../src/compiler/phases/2-analyze/types.d.ts  |  5 +-
 .../3-transform/client/visitors/template.js   | 87 ++++++++++---------
 .../server/visitors/shared/element.js         | 16 ++--
 packages/svelte/src/compiler/phases/nodes.js  | 13 ++-
 packages/svelte/src/compiler/types/index.d.ts |  9 ++
 .../svelte/src/compiler/types/template.d.ts   | 21 ++---
 .../parser-modern/samples/options/output.json | 20 +----
 packages/svelte/types/index.d.ts              | 28 +++---
 12 files changed, 160 insertions(+), 145 deletions(-)

diff --git a/packages/svelte/src/compiler/index.js b/packages/svelte/src/compiler/index.js
index 594e93fc21..e18c3c2ec3 100644
--- a/packages/svelte/src/compiler/index.js
+++ b/packages/svelte/src/compiler/index.js
@@ -119,13 +119,23 @@ export function parse(source, { filename, rootDir, modern } = {}) {
  */
 function to_public_ast(source, ast, modern) {
 	if (modern) {
+		const clean = (/** @type {any} */ node) => {
+			delete node.metadata;
+			delete node.parent;
+		};
+
+		ast.options?.attributes.forEach((attribute) => {
+			clean(attribute);
+			clean(attribute.value);
+			if (Array.isArray(attribute.value)) {
+				attribute.value.forEach(clean);
+			}
+		});
+
 		// remove things that we don't want to treat as public API
 		return zimmerframe_walk(ast, null, {
 			_(node, { next }) {
-				// @ts-ignore
-				delete node.parent;
-				// @ts-ignore
-				delete node.metadata;
+				clean(node);
 				next();
 			}
 		});
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index 11a9de0951..17e999b96c 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -9,7 +9,7 @@ import { decode_character_references } from '../utils/html.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { create_fragment } from '../utils/create.js';
-import { create_attribute } from '../../nodes.js';
+import { create_attribute, create_expression_metadata } from '../../nodes.js';
 import { get_attribute_expression, is_expression_attribute } from '../../../utils/ast.js';
 import { closing_tag_omitted } from '../../../../html-tree-validation.js';
 
@@ -127,7 +127,7 @@ export default function element(parser) {
 
 	const type = meta_tags.has(name)
 		? meta_tags.get(name)
-		: regex_capital_letter.test(name[0]) || name === 'svelte:self' || name === 'svelte:component'
+		: regex_capital_letter.test(name[0])
 			? 'Component'
 			: name === 'title' && parent_is_head(parser.stack)
 				? 'TitleElement'
@@ -140,7 +140,7 @@ export default function element(parser) {
 	const element =
 		type === 'RegularElement'
 			? {
-					type: type,
+					type,
 					start,
 					end: -1,
 					name,
@@ -163,7 +163,7 @@ export default function element(parser) {
 					fragment: create_fragment(true),
 					parent: null,
 					metadata: {
-						svg: false
+						// unpopulated at first, differs between types
 					}
 				});
 
@@ -508,8 +508,7 @@ function read_attribute(parser) {
 				expression,
 				parent: null,
 				metadata: {
-					contains_call_expression: false,
-					dynamic: false
+					expression: create_expression_metadata()
 				}
 			};
 
@@ -538,8 +537,7 @@ function read_attribute(parser) {
 				},
 				parent: null,
 				metadata: {
-					dynamic: false,
-					contains_call_expression: false
+					expression: create_expression_metadata()
 				}
 			};
 
@@ -584,7 +582,7 @@ function read_attribute(parser) {
 				value,
 				parent: null,
 				metadata: {
-					dynamic: false
+					expression: create_expression_metadata()
 				}
 			};
 		}
@@ -616,17 +614,10 @@ function read_attribute(parser) {
 			modifiers,
 			expression,
 			metadata: {
-				dynamic: false,
-				contains_call_expression: false
+				expression: create_expression_metadata()
 			}
 		};
 
-		if (directive.type === 'ClassDirective') {
-			directive.metadata = {
-				dynamic: false
-			};
-		}
-
 		if (directive.type === 'TransitionDirective') {
 			const direction = name.slice(0, colon_index);
 			directive.intro = direction === 'in' || direction === 'transition';
@@ -789,8 +780,7 @@ function read_sequence(parser, done, location) {
 				expression,
 				parent: null,
 				metadata: {
-					contains_call_expression: false,
-					dynamic: false
+					expression: create_expression_metadata()
 				}
 			};
 
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/tag.js b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
index 4ccfe2cb5f..aacaf29440 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/tag.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/tag.js
@@ -7,6 +7,7 @@ import * as e from '../../../errors.js';
 import { create_fragment } from '../utils/create.js';
 import { walk } from 'zimmerframe';
 import { parse_expression_at } from '../acorn.js';
+import { create_expression_metadata } from '../../nodes.js';
 
 const regex_whitespace_with_closing_curly_brace = /^\s*}/;
 
@@ -39,8 +40,7 @@ export default function tag(parser) {
 		end: parser.index,
 		expression,
 		metadata: {
-			contains_call_expression: false,
-			dynamic: false
+			expression: create_expression_metadata()
 		}
 	});
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index aac76faa60..4e5a03089c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -1178,20 +1178,19 @@ const common_visitors = {
 
 		context.next();
 
-		node.metadata.dynamic = get_attribute_chunks(node.value).some((chunk) => {
-			if (chunk.type !== 'ExpressionTag') {
-				return false;
-			}
+		for (const chunk of get_attribute_chunks(node.value)) {
+			if (chunk.type !== 'ExpressionTag') continue;
 
 			if (
 				chunk.expression.type === 'FunctionExpression' ||
 				chunk.expression.type === 'ArrowFunctionExpression'
 			) {
-				return false;
+				continue;
 			}
 
-			return chunk.metadata.dynamic || chunk.metadata.contains_call_expression;
-		});
+			node.metadata.expression.has_state ||= chunk.metadata.expression.has_state;
+			node.metadata.expression.has_call ||= chunk.metadata.expression.has_call;
+		}
 
 		if (is_event_attribute(node)) {
 			const parent = context.path.at(-1);
@@ -1211,10 +1210,10 @@ const common_visitors = {
 		}
 	},
 	ClassDirective(node, context) {
-		context.next({ ...context.state, expression: node });
+		context.next({ ...context.state, expression: node.metadata.expression });
 	},
 	SpreadAttribute(node, context) {
-		context.next({ ...context.state, expression: node });
+		context.next({ ...context.state, expression: node.metadata.expression });
 	},
 	SlotElement(node, context) {
 		let name = 'default';
@@ -1230,17 +1229,21 @@ const common_visitors = {
 		if (node.value === true) {
 			const binding = context.state.scope.get(node.name);
 			if (binding?.kind !== 'normal') {
-				node.metadata.dynamic = true;
+				node.metadata.expression.has_state = true;
 			}
 		} else {
 			context.next();
-			node.metadata.dynamic = get_attribute_chunks(node.value).some(
-				(node) => node.type === 'ExpressionTag' && node.metadata.dynamic
-			);
+
+			for (const chunk of get_attribute_chunks(node.value)) {
+				if (chunk.type !== 'ExpressionTag') continue;
+
+				node.metadata.expression.has_state ||= chunk.metadata.expression.has_state;
+				node.metadata.expression.has_call ||= chunk.metadata.expression.has_call;
+			}
 		}
 	},
 	ExpressionTag(node, context) {
-		context.next({ ...context.state, expression: node });
+		context.next({ ...context.state, expression: node.metadata.expression });
 	},
 	Identifier(node, context) {
 		const parent = /** @type {Node} */ (context.path.at(-1));
@@ -1261,10 +1264,18 @@ const common_visitors = {
 
 		const binding = context.state.scope.get(node.name);
 
+		if (binding && context.state.expression) {
+			context.state.expression.dependencies.add(binding);
+
+			if (binding.kind !== 'normal') {
+				context.state.expression.has_state = true;
+			}
+		}
+
 		// if no binding, means some global variable
 		if (binding && binding.kind !== 'normal') {
 			if (context.state.expression) {
-				context.state.expression.metadata.dynamic = true;
+				context.state.expression.has_state = true;
 			}
 
 			// TODO it would be better to just bail out when we hit the ExportSpecifier node but that's
@@ -1297,13 +1308,10 @@ const common_visitors = {
 	},
 	CallExpression(node, context) {
 		const { expression, render_tag } = context.state;
-		if (
-			(expression?.type === 'ExpressionTag' ||
-				expression?.type === 'SpreadAttribute' ||
-				expression?.type === 'OnDirective') &&
-			!is_known_safe_call(node, context)
-		) {
-			expression.metadata.contains_call_expression = true;
+
+		if (expression && !is_known_safe_call(node, context)) {
+			expression.has_call = true;
+			expression.has_state = true;
 		}
 
 		if (render_tag) {
@@ -1354,7 +1362,7 @@ const common_visitors = {
 	},
 	MemberExpression(node, context) {
 		if (context.state.expression) {
-			context.state.expression.metadata.dynamic = true;
+			context.state.expression.has_state = true;
 		}
 
 		if (!is_safe_identifier(node, context.state.scope)) {
@@ -1368,7 +1376,7 @@ const common_visitors = {
 		if (parent?.type === 'SvelteElement' || parent?.type === 'RegularElement') {
 			state.analysis.event_directive_node ??= node;
 		}
-		next({ ...state, expression: node });
+		next({ ...state, expression: node.metadata.expression });
 	},
 	BindDirective(node, context) {
 		let i = context.path.length;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/types.d.ts b/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
index feacbdedcc..e03b9c9cc4 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
+++ b/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
@@ -2,6 +2,7 @@ import type { Scope } from '../scope.js';
 import type { ComponentAnalysis, ReactiveStatement } from '../types.js';
 import type {
 	ClassDirective,
+	ExpressionMetadata,
 	ExpressionTag,
 	OnDirective,
 	RenderTag,
@@ -20,8 +21,8 @@ export interface AnalysisState {
 	has_props_rune: boolean;
 	/** Which slots the current parent component has */
 	component_slots: Set<string>;
-	/** The current {expression}, if any */
-	expression: ExpressionTag | ClassDirective | OnDirective | SpreadAttribute | null;
+	/** Information about the current expression/directive/block value */
+	expression: ExpressionMetadata | null;
 	/** The current {@render ...} tag, if any */
 	render_tag: null | RenderTag;
 	private_derived_state: string[];
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index 9006d68aca..dcfa23a99d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -1,5 +1,5 @@
 /** @import { BlockStatement, CallExpression, Expression, ExpressionStatement, Identifier, Literal, MemberExpression, ObjectExpression, Pattern, Property, Statement, Super, TemplateElement, TemplateLiteral } from 'estree' */
-/** @import { Attribute, BindDirective, Binding, ClassDirective, Component, DelegatedEvent, EachBlock, ExpressionTag, Namespace, OnDirective, RegularElement, SpreadAttribute, StyleDirective, SvelteComponent, SvelteElement, SvelteNode, SvelteSelf, TemplateNode, Text } from '#compiler' */
+/** @import { Attribute, BindDirective, Binding, ClassDirective, Component, DelegatedEvent, EachBlock, ExpressionMetadata, ExpressionTag, Namespace, OnDirective, RegularElement, SpreadAttribute, StyleDirective, SvelteComponent, SvelteElement, SvelteNode, SvelteSelf, TemplateNode, Text } from '#compiler' */
 /** @import { SourceLocation } from '#shared' */
 /** @import { Scope } from '../../../scope.js' */
 /** @import { ComponentClientTransformState, ComponentContext, ComponentVisitors } from '../types.js' */
@@ -103,13 +103,11 @@ function serialize_style_directives(style_directives, element_id, context, is_at
 			)
 		);
 
-		const contains_call_expression = get_attribute_chunks(directive.value).some(
-			(v) => v.type === 'ExpressionTag' && v.metadata.contains_call_expression
-		);
+		const { has_state, has_call } = directive.metadata.expression;
 
-		if (!is_attributes_reactive && contains_call_expression) {
+		if (!is_attributes_reactive && has_call) {
 			state.init.push(serialize_update(update));
-		} else if (is_attributes_reactive || directive.metadata.dynamic || contains_call_expression) {
+		} else if (is_attributes_reactive || has_state || has_call) {
 			state.update.push(update);
 		} else {
 			state.init.push(update);
@@ -151,11 +149,12 @@ function serialize_class_directives(class_directives, element_id, context, is_at
 	for (const directive of class_directives) {
 		const value = /** @type {Expression} */ (context.visit(directive.expression));
 		const update = b.stmt(b.call('$.toggle_class', element_id, b.literal(directive.name), value));
-		const contains_call_expression = directive.expression.type === 'CallExpression';
 
-		if (!is_attributes_reactive && contains_call_expression) {
+		const { has_state, has_call } = directive.metadata.expression;
+
+		if (!is_attributes_reactive && has_call) {
 			state.init.push(serialize_update(update));
-		} else if (is_attributes_reactive || directive.metadata.dynamic || contains_call_expression) {
+		} else if (is_attributes_reactive || has_state || has_call) {
 			state.update.push(update);
 		} else {
 			state.init.push(update);
@@ -277,7 +276,7 @@ function serialize_element_spread_attributes(
 	for (const attribute of attributes) {
 		if (attribute.type === 'Attribute') {
 			const name = get_attribute_name(element, attribute, context);
-			// TODO: handle contains_call_expression
+			// TODO: handle has_call
 			const [, value] = serialize_attribute_value(attribute.value, context);
 
 			if (
@@ -306,7 +305,7 @@ function serialize_element_spread_attributes(
 		}
 
 		needs_isolation ||=
-			attribute.type === 'SpreadAttribute' && attribute.metadata.contains_call_expression;
+			attribute.type === 'SpreadAttribute' && attribute.metadata.expression.has_call;
 	}
 
 	const lowercase_attributes =
@@ -405,11 +404,11 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
 		}
 
 		is_reactive ||=
-			attribute.metadata.dynamic ||
+			attribute.metadata.expression.has_state ||
 			// objects could contain reactive getters -> play it safe and always assume spread attributes are reactive
 			attribute.type === 'SpreadAttribute';
 		needs_isolation ||=
-			attribute.type === 'SpreadAttribute' && attribute.metadata.contains_call_expression;
+			attribute.type === 'SpreadAttribute' && attribute.metadata.expression.has_call;
 	}
 
 	if (needs_isolation || is_reactive) {
@@ -486,13 +485,13 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 	const name = get_attribute_name(element, attribute, context);
 	const is_svg = context.state.metadata.namespace === 'svg' || element.name === 'svg';
 	const is_mathml = context.state.metadata.namespace === 'mathml';
-	let [contains_call_expression, value] = serialize_attribute_value(attribute.value, context);
+	let [has_call, value] = serialize_attribute_value(attribute.value, context);
 
 	// The foreign namespace doesn't have any special handling, everything goes through the attr function
 	if (context.state.metadata.namespace === 'foreign') {
 		const statement = b.stmt(b.call('$.set_attribute', node_id, b.literal(name), value));
 
-		if (attribute.metadata.dynamic) {
+		if (attribute.metadata.expression.has_state) {
 			const id = state.scope.generate(`${node_id.name}_${name}`);
 			serialize_update_assignment(state, id, undefined, value, statement);
 			return true;
@@ -529,8 +528,8 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 		update = b.stmt(b.call(callee, node_id, b.literal(name), value));
 	}
 
-	if (attribute.metadata.dynamic) {
-		if (contains_call_expression) {
+	if (attribute.metadata.expression.has_state) {
+		if (has_call) {
 			state.init.push(serialize_update(update));
 		} else {
 			state.update.push(update);
@@ -552,12 +551,12 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 function serialize_custom_element_attribute_update_assignment(node_id, attribute, context) {
 	const state = context.state;
 	const name = attribute.name; // don't lowercase, as we set the element's property, which might be case sensitive
-	let [contains_call_expression, value] = serialize_attribute_value(attribute.value, context);
+	let [has_call, value] = serialize_attribute_value(attribute.value, context);
 
 	const update = b.stmt(b.call('$.set_custom_element_data', node_id, b.literal(name), value));
 
-	if (attribute.metadata.dynamic) {
-		if (contains_call_expression) {
+	if (attribute.metadata.expression.has_state) {
+		if (has_call) {
 			state.init.push(serialize_update(update));
 		} else {
 			state.update.push(update);
@@ -592,7 +591,7 @@ function serialize_element_special_value_attribute(element, node_id, attribute,
 			value
 		)
 	);
-	const is_reactive = attribute.metadata.dynamic;
+	const is_reactive = attribute.metadata.expression.has_state;
 	const is_select_with_value =
 		// attribute.metadata.dynamic would give false negatives because even if the value does not change,
 		// the inner options could still change, so we need to always treat it as reactive
@@ -723,10 +722,10 @@ function serialize_inline_component(node, component_name, context, anchor = cont
 			events[attribute.name].push(handler);
 		} else if (attribute.type === 'SpreadAttribute') {
 			const expression = /** @type {Expression} */ (context.visit(attribute));
-			if (attribute.metadata.dynamic) {
+			if (attribute.metadata.expression.has_state) {
 				let value = expression;
 
-				if (attribute.metadata.contains_call_expression) {
+				if (attribute.metadata.expression.has_call) {
 					const id = b.id(context.state.scope.generate('spread_element'));
 					context.state.init.push(b.var(id, b.call('$.derived', b.thunk(value))));
 					value = b.call('$.get', id);
@@ -754,7 +753,7 @@ function serialize_inline_component(node, component_name, context, anchor = cont
 
 			const [, value] = serialize_attribute_value(attribute.value, context);
 
-			if (attribute.metadata.dynamic) {
+			if (attribute.metadata.expression.has_state) {
 				let arg = value;
 
 				// When we have a non-simple computation, anything other than an Identifier or Member expression,
@@ -1118,7 +1117,7 @@ function serialize_render_stmt(update) {
 /**
  * Serializes the event handler function of the `on:` directive
  * @param {Pick<OnDirective, 'name' | 'modifiers' | 'expression'>} node
- * @param {null | { contains_call_expression: boolean; dynamic: boolean; } | null} metadata
+ * @param {null | ExpressionMetadata} metadata
  * @param {ComponentContext} context
  */
 function serialize_event_handler(node, metadata, { state, visit }) {
@@ -1145,7 +1144,7 @@ function serialize_event_handler(node, metadata, { state, visit }) {
 			);
 
 		if (
-			metadata?.contains_call_expression &&
+			metadata?.has_call &&
 			!(
 				(handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') &&
 				handler.metadata.hoistable
@@ -1227,7 +1226,7 @@ function serialize_event_handler(node, metadata, { state, visit }) {
 /**
  * Serializes an event handler function of the `on:` directive or an attribute starting with `on`
  * @param {{name: string;modifiers: string[];expression: Expression | null;delegated?: DelegatedEvent | null;}} node
- * @param {null | { contains_call_expression: boolean; dynamic: boolean; }} metadata
+ * @param {null | ExpressionMetadata} metadata
  * @param {ComponentContext} context
  */
 function serialize_event(node, metadata, context) {
@@ -1357,7 +1356,9 @@ function serialize_event_attribute(node, context) {
 			modifiers,
 			delegated: node.metadata.delegated
 		},
-		!Array.isArray(node.value) && node.value?.type === 'ExpressionTag' ? node.value.metadata : null,
+		!Array.isArray(node.value) && node.value?.type === 'ExpressionTag'
+			? node.value.metadata.expression
+			: null,
 		context
 	);
 }
@@ -1401,9 +1402,9 @@ function process_children(nodes, expression, is_element, { visit, state }) {
 				b.call('$.set_text', text_id, /** @type {Expression} */ (visit(node.expression, state)))
 			);
 
-			if (node.metadata.contains_call_expression && !within_bound_contenteditable) {
+			if (node.metadata.expression.has_call && !within_bound_contenteditable) {
 				state.init.push(serialize_update(update));
-			} else if (node.metadata.dynamic && !within_bound_contenteditable) {
+			} else if (node.metadata.expression.has_state && !within_bound_contenteditable) {
 				state.update.push(update);
 			} else {
 				state.init.push(
@@ -1424,14 +1425,16 @@ function process_children(nodes, expression, is_element, { visit, state }) {
 
 			state.template.push(' ');
 
-			const [contains_call_expression, value] = serialize_template_literal(sequence, visit, state);
+			const [has_call, value] = serialize_template_literal(sequence, visit, state);
 
 			const update = b.stmt(b.call('$.set_text', text_id, value));
 
-			if (contains_call_expression && !within_bound_contenteditable) {
+			if (has_call && !within_bound_contenteditable) {
 				state.init.push(serialize_update(update));
 			} else if (
-				sequence.some((node) => node.type === 'ExpressionTag' && node.metadata.dynamic) &&
+				sequence.some(
+					(node) => node.type === 'ExpressionTag' && node.metadata.expression.has_state
+				) &&
 				!within_bound_contenteditable
 			) {
 				state.update.push(update);
@@ -1517,7 +1520,7 @@ function get_node_id(expression, state, name) {
 /**
  * @param {Attribute['value']} value
  * @param {ComponentContext} context
- * @returns {[contains_call_expression: boolean, Expression]}
+ * @returns {[has_call: boolean, Expression]}
  */
 function serialize_attribute_value(value, context) {
 	if (value === true) {
@@ -1532,7 +1535,7 @@ function serialize_attribute_value(value, context) {
 		}
 
 		return [
-			chunk.metadata.contains_call_expression,
+			chunk.metadata.expression.has_call,
 			/** @type {Expression} */ (context.visit(chunk.expression))
 		];
 	}
@@ -1552,18 +1555,18 @@ function serialize_template_literal(values, visit, state) {
 
 	/** @type {Expression[]} */
 	const expressions = [];
-	let contains_call_expression = false;
+	let has_call = false;
 	let contains_multiple_call_expression = false;
 	quasis.push(b.quasi(''));
 
 	for (let i = 0; i < values.length; i++) {
 		const node = values[i];
 
-		if (node.type === 'ExpressionTag' && node.metadata.contains_call_expression) {
-			if (contains_call_expression) {
+		if (node.type === 'ExpressionTag' && node.metadata.expression.has_call) {
+			if (has_call) {
 				contains_multiple_call_expression = true;
 			}
-			contains_call_expression = true;
+			has_call = true;
 		}
 	}
 
@@ -1600,7 +1603,7 @@ function serialize_template_literal(values, visit, state) {
 	}
 
 	// TODO instead of this tuple, return a `{ dynamic, complex, value }` object. will DRY stuff out
-	return [contains_call_expression, b.template(quasis, expressions)];
+	return [has_call, b.template(quasis, expressions)];
 }
 
 /** @type {ComponentVisitors} */
@@ -2855,7 +2858,7 @@ export const template_visitors = {
 		context.next({ ...context.state, in_constructor: false });
 	},
 	OnDirective(node, context) {
-		serialize_event(node, node.metadata, context);
+		serialize_event(node, node.metadata.expression, context);
 	},
 	UseDirective(node, { state, next, visit }) {
 		const params = [b.id('$$node')];
@@ -3238,7 +3241,7 @@ export const template_visitors = {
 					name = value;
 					is_default = false;
 				} else if (attribute.name !== 'slot') {
-					if (attribute.metadata.dynamic) {
+					if (attribute.metadata.expression.has_state) {
 						props.push(b.get(attribute.name, [b.return(value)]));
 					} else {
 						props.push(b.init(attribute.name, value));
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index fbfa4497b0..052b3c5d6f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -12,7 +12,11 @@ import {
 	LoadErrorElements,
 	WhitespaceInsensitiveAttributes
 } from '../../../../constants.js';
-import { create_attribute, is_custom_element_node } from '../../../../nodes.js';
+import {
+	create_attribute,
+	create_expression_metadata,
+	is_custom_element_node
+} from '../../../../nodes.js';
 import { regex_starts_with_newline } from '../../../../patterns.js';
 import * as b from '../../../../../utils/builders.js';
 import {
@@ -142,8 +146,7 @@ export function serialize_element_attributes(node, context) {
 										serialize_attribute_value(value_attribute.value, context)
 									),
 							metadata: {
-								contains_call_expression: false,
-								dynamic: false
+								expression: create_expression_metadata()
 							}
 						}
 					])
@@ -158,8 +161,7 @@ export function serialize_element_attributes(node, context) {
 							parent: attribute,
 							expression: attribute.expression,
 							metadata: {
-								contains_call_expression: false,
-								dynamic: false
+								expression: create_expression_metadata()
 							}
 						}
 					])
@@ -399,7 +401,9 @@ function serialize_class_directives(class_directives, class_attribute) {
 			),
 			b.literal(' ')
 		),
-		metadata: { contains_call_expression: false, dynamic: false }
+		metadata: {
+			expression: create_expression_metadata()
+		}
 	});
 
 	class_attribute.value = chunks;
diff --git a/packages/svelte/src/compiler/phases/nodes.js b/packages/svelte/src/compiler/phases/nodes.js
index bb69b9749a..6237f22899 100644
--- a/packages/svelte/src/compiler/phases/nodes.js
+++ b/packages/svelte/src/compiler/phases/nodes.js
@@ -45,8 +45,19 @@ export function create_attribute(name, start, end, value) {
 		value,
 		parent: null,
 		metadata: {
-			dynamic: false,
+			expression: create_expression_metadata(),
 			delegated: null
 		}
 	};
 }
+
+/**
+ * @returns {Compiler.ExpressionMetadata}
+ */
+export function create_expression_metadata() {
+	return {
+		dependencies: new Set(),
+		has_state: false,
+		has_call: false
+	};
+}
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index c0adbdaa7b..c7bf2ff3e1 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -316,6 +316,15 @@ export interface Binding {
 	} | null;
 }
 
+export interface ExpressionMetadata {
+	/** All the bindings that are referenced inside this expression */
+	dependencies: Set<Binding>;
+	/** True if the expression references state directly, or _might_ (via member/call expressions) */
+	has_state: boolean;
+	/** True if the expression involves a call expression (often, it will need to be wrapped in a derived) */
+	has_call: boolean;
+}
+
 export * from './template.js';
 export { Css };
 
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index e5bc072c1a..ee6315a98c 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -1,4 +1,4 @@
-import type { Binding, Css } from '#compiler';
+import type { Binding, Css, ExpressionMetadata } from '#compiler';
 import type {
 	ArrayExpression,
 	ArrowFunctionExpression,
@@ -111,12 +111,7 @@ export interface ExpressionTag extends BaseNode {
 	type: 'ExpressionTag';
 	expression: Expression;
 	metadata: {
-		contains_call_expression: boolean;
-		/**
-		 * Whether or not the expression contains any dynamic references —
-		 * determines whether it will be updated in a render effect or not
-		 */
-		dynamic: boolean;
+		expression: ExpressionMetadata;
 	};
 }
 
@@ -190,7 +185,7 @@ export interface ClassDirective extends BaseNode {
 	/** The 'y' in `class:x={y}`, or the `x` in `class:x` */
 	expression: Expression;
 	metadata: {
-		dynamic: false;
+		expression: ExpressionMetadata;
 	};
 }
 
@@ -212,8 +207,7 @@ export interface OnDirective extends BaseNode {
 	expression: null | Expression;
 	modifiers: string[]; // TODO specify
 	metadata: {
-		contains_call_expression: boolean;
-		dynamic: boolean;
+		expression: ExpressionMetadata;
 	};
 }
 
@@ -233,7 +227,7 @@ export interface StyleDirective extends BaseNode {
 	value: true | ExpressionTag | Array<ExpressionTag | Text>;
 	modifiers: Array<'important'>;
 	metadata: {
-		dynamic: boolean;
+		expression: ExpressionMetadata;
 	};
 }
 
@@ -454,7 +448,7 @@ export interface Attribute extends BaseNode {
 	name: string;
 	value: true | ExpressionTag | Array<Text | ExpressionTag>;
 	metadata: {
-		dynamic: boolean;
+		expression: ExpressionMetadata;
 		/** May be set if this is an event attribute */
 		delegated: null | DelegatedEvent;
 	};
@@ -464,8 +458,7 @@ export interface SpreadAttribute extends BaseNode {
 	type: 'SpreadAttribute';
 	expression: Expression;
 	metadata: {
-		contains_call_expression: boolean;
-		dynamic: boolean;
+		expression: ExpressionMetadata;
 	};
 }
 
diff --git a/packages/svelte/tests/parser-modern/samples/options/output.json b/packages/svelte/tests/parser-modern/samples/options/output.json
index 708bf0cd1a..23ccf3b2f7 100644
--- a/packages/svelte/tests/parser-modern/samples/options/output.json
+++ b/packages/svelte/tests/parser-modern/samples/options/output.json
@@ -39,15 +39,9 @@
 						"end": 48,
 						"type": "Text",
 						"raw": "my-custom-element",
-						"data": "my-custom-element",
-						"parent": null
+						"data": "my-custom-element"
 					}
-				],
-				"parent": null,
-				"metadata": {
-					"dynamic": false,
-					"delegated": null
-				}
+				]
 			},
 			{
 				"type": "Attribute",
@@ -74,17 +68,7 @@
 						},
 						"value": true,
 						"raw": "true"
-					},
-					"parent": null,
-					"metadata": {
-						"contains_call_expression": false,
-						"dynamic": false
 					}
-				},
-				"parent": null,
-				"metadata": {
-					"dynamic": false,
-					"delegated": null
 				}
 			}
 		],
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index d9537235f6..78ffc17748 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -965,6 +965,15 @@ declare module 'svelte/compiler' {
 			inside_rest?: boolean;
 		} | null;
 	}
+
+	interface ExpressionMetadata {
+		/** All the bindings that are referenced inside this expression */
+		dependencies: Set<Binding>;
+		/** True if the expression references state directly, or _might_ (via member/call expressions) */
+		has_state: boolean;
+		/** True if the expression involves a call expression (often, it will need to be wrapped in a derived) */
+		has_call: boolean;
+	}
 	/**
 	 * The preprocess function provides convenient hooks for arbitrarily transforming component source code.
 	 * For example, it can be used to convert a <style lang="sass"> block into vanilla CSS.
@@ -1563,12 +1572,7 @@ declare module 'svelte/compiler' {
 		type: 'ExpressionTag';
 		expression: Expression;
 		metadata: {
-			contains_call_expression: boolean;
-			/**
-			 * Whether or not the expression contains any dynamic references —
-			 * determines whether it will be updated in a render effect or not
-			 */
-			dynamic: boolean;
+			expression: ExpressionMetadata;
 		};
 	}
 
@@ -1642,7 +1646,7 @@ declare module 'svelte/compiler' {
 		/** The 'y' in `class:x={y}`, or the `x` in `class:x` */
 		expression: Expression;
 		metadata: {
-			dynamic: false;
+			expression: ExpressionMetadata;
 		};
 	}
 
@@ -1664,8 +1668,7 @@ declare module 'svelte/compiler' {
 		expression: null | Expression;
 		modifiers: string[]; // TODO specify
 		metadata: {
-			contains_call_expression: boolean;
-			dynamic: boolean;
+			expression: ExpressionMetadata;
 		};
 	}
 
@@ -1685,7 +1688,7 @@ declare module 'svelte/compiler' {
 		value: true | ExpressionTag | Array<ExpressionTag | Text>;
 		modifiers: Array<'important'>;
 		metadata: {
-			dynamic: boolean;
+			expression: ExpressionMetadata;
 		};
 	}
 
@@ -1906,7 +1909,7 @@ declare module 'svelte/compiler' {
 		name: string;
 		value: true | ExpressionTag | Array<Text | ExpressionTag>;
 		metadata: {
-			dynamic: boolean;
+			expression: ExpressionMetadata;
 			/** May be set if this is an event attribute */
 			delegated: null | DelegatedEvent;
 		};
@@ -1916,8 +1919,7 @@ declare module 'svelte/compiler' {
 		type: 'SpreadAttribute';
 		expression: Expression;
 		metadata: {
-			contains_call_expression: boolean;
-			dynamic: boolean;
+			expression: ExpressionMetadata;
 		};
 	}
 

From 7f558290d8f38acfe21a97f4aa416c2f1703ca36 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 29 Jul 2024 17:21:16 +0200
Subject: [PATCH 030/196] chore: enhance comment on skipped test

explain what we need to unskip it
---
 .../_config.js                                                | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/_config.js
index 4777a268bc..3ed155c254 100644
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/_config.js
@@ -1,7 +1,9 @@
 import { test } from '../../test';
 
 export default test({
-	skip: true, // TODO: needs fixing
+	// TODO: needs fixing. Can only be fixed once we also support document.createElementNS-style creation of elements
+	// because the $.template('...') approach has no option to preserve attribute name casing
+	skip: true,
 
 	html: `
 		<page horizontalAlignment="center">

From d20e0646745cbc9d835b05b65077146105bc4130 Mon Sep 17 00:00:00 2001
From: Simon Holthausen <simon.holthausen@vercel.com>
Date: Mon, 29 Jul 2024 17:40:54 +0200
Subject: [PATCH 031/196] chore: enhance comment on skipped test

explain what we need to unskip it
---
 .../samples/deferred-events-consistency-2/_config.js          | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/svelte/tests/runtime-runes/samples/deferred-events-consistency-2/_config.js b/packages/svelte/tests/runtime-runes/samples/deferred-events-consistency-2/_config.js
index c15f5519e9..20b7bf30b5 100644
--- a/packages/svelte/tests/runtime-runes/samples/deferred-events-consistency-2/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/deferred-events-consistency-2/_config.js
@@ -2,7 +2,9 @@ import { flushSync } from 'svelte';
 import { test } from '../../test';
 
 export default test({
-	skip: true, // need to make a browser test of this because calling click() sync will not let Svelte yield
+	// currently not testable in our test suide: click() will synchronously call submit which is not the case in a real browser
+	// (moving this test to runtime-browser doesn't help either for some reason)
+	skip: true,
 
 	async test({ assert, target, logs }) {
 		const [b1] = target.querySelectorAll('button');

From ee1a3df835b291442f3364882a1ef40569cb1e9b Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 30 Jul 2024 08:05:18 -0400
Subject: [PATCH 032/196] Version Packages (next) (#12650)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 2 ++
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 1c02935ded..24247ad4ac 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -382,6 +382,7 @@
     "mighty-shoes-nail",
     "modern-apricots-promise",
     "modern-fishes-double",
+    "modern-peaches-cheer",
     "moody-carrots-lay",
     "moody-frogs-exist",
     "moody-ghosts-buy",
@@ -747,6 +748,7 @@
     "wild-cows-chew",
     "wild-foxes-wonder",
     "wild-moose-compare",
+    "wild-poems-design",
     "wise-apples-care",
     "wise-dancers-hang",
     "wise-dodos-tell",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 95f0286f9f..7998f890dd 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.202
+
+### Patch Changes
+
+- fix: remove implicit passive behavior from OnDirective events ([#12645](https://github.com/sveltejs/svelte/pull/12645))
+
+- fix: always set draggable through `setAttribute` to avoid weird behavior ([#12649](https://github.com/sveltejs/svelte/pull/12649))
+
 ## 5.0.0-next.201
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index bb90134aa5..9198dab8ea 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.201",
+  "version": "5.0.0-next.202",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 4051b6c8d9..e91677138f 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.201';
+export const VERSION = '5.0.0-next.202';
 export const PUBLIC_VERSION = '5';

From 00e8ebde1dab3299176db7c1d3aeddd7798160c6 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 30 Jul 2024 20:40:23 +0200
Subject: [PATCH 033/196] fix: widen `ComponentProps` constraint to accept more
 component shapes (#12666)

language tools has to type its own shape for backwards compatibility, and it currently doesn't include the `$on` and `$set` methods, which means without widening the type as done here you would get a "this shape is not accepted" type error when passing it to `ComponentProps`

closes #12627
---
 .changeset/warm-cycles-call.md           | 5 +++++
 packages/svelte/src/index.d.ts           | 4 ++--
 packages/svelte/tests/types/component.ts | 5 +++++
 packages/svelte/types/index.d.ts         | 4 ++--
 4 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/warm-cycles-call.md

diff --git a/.changeset/warm-cycles-call.md b/.changeset/warm-cycles-call.md
new file mode 100644
index 0000000000..17d52f8c62
--- /dev/null
+++ b/.changeset/warm-cycles-call.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: widen `ComponentProps` constraint to accept more component shapes
diff --git a/packages/svelte/src/index.d.ts b/packages/svelte/src/index.d.ts
index 897d468ebc..802dfbc790 100644
--- a/packages/svelte/src/index.d.ts
+++ b/packages/svelte/src/index.d.ts
@@ -226,10 +226,10 @@ export type ComponentEvents<Comp extends SvelteComponent> =
  * withProps(MyComponent, { foo: 'bar' });
  * ```
  */
-export type ComponentProps<Comp extends SvelteComponent | Component<any>> =
+export type ComponentProps<Comp extends SvelteComponent | Component<any, any>> =
 	Comp extends SvelteComponent<infer Props>
 		? Props
-		: Comp extends Component<infer Props>
+		: Comp extends Component<infer Props, any>
 			? Props
 			: never;
 
diff --git a/packages/svelte/tests/types/component.ts b/packages/svelte/tests/types/component.ts
index eccf08548e..06749e9937 100644
--- a/packages/svelte/tests/types/component.ts
+++ b/packages/svelte/tests/types/component.ts
@@ -261,6 +261,11 @@ const functionComponentProps: ComponentProps<typeof functionComponent> = {
 	prop: 1
 };
 
+// Test that self-typed functions are correctly inferred, too (use case: language tools has its own shape for backwards compatibility)
+const functionComponentProps2: ComponentProps<(a: any, b: { a: true }) => { foo: string }> = {
+	a: true
+};
+
 mount(functionComponent, {
 	target: null as any as Document | Element | ShadowRoot,
 	props: {
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 78ffc17748..b3230c9413 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -223,10 +223,10 @@ declare module 'svelte' {
 	 * withProps(MyComponent, { foo: 'bar' });
 	 * ```
 	 */
-	export type ComponentProps<Comp extends SvelteComponent | Component<any>> =
+	export type ComponentProps<Comp extends SvelteComponent | Component<any, any>> =
 		Comp extends SvelteComponent<infer Props>
 			? Props
-			: Comp extends Component<infer Props>
+			: Comp extends Component<infer Props, any>
 				? Props
 				: never;
 

From 8be7dd558b519530dc3e4dba83372168e18f98cf Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 30 Jul 2024 23:54:58 +0200
Subject: [PATCH 034/196] feat: make `<svelte:component>` unnecessary in runes
 mode (#12646)

* feat: make `<svelte:component>` unnecessary in runes mode

In Svelte 4, writing `<Component />` meant that the component instance is static. If you made the variable `Component` a reactive state variable and updated the component value, the component would not be reinstantiated with the new value - you had to use `<svelte:component>` for that. One reason was that having a dynamic component was more overhead, which is no longer the case in Svelte 5. We can therefore reduce the potential API surface area (by maybe deprecating `<svelte:component>` in the future) by allowing Svelte to recognize when a component variable is potentially dynamic. It turned out that this was already mostly the case. This PR fixes one case where it wasn't, and fixes another where this was wrongfully applied in legacy mode.

* we already have this function

* add interactive demos

* changeset

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/warm-planets-cry.md                |  5 +++
 .../src/compiler/phases/2-analyze/index.js    |  5 ++-
 .../3-transform/client/visitors/template.js   | 11 +++++-
 .../dynamic-component/Component1.svelte       |  1 +
 .../dynamic-component/Component2.svelte       |  1 +
 .../samples/dynamic-component/_config.js      | 14 +++++++
 .../samples/dynamic-component/main.svelte     | 16 ++++++++
 .../samples/component-dynamic/_config.js      |  3 --
 .../samples/component-dynamic/input.svelte    | 30 ---------------
 .../samples/component-dynamic/warnings.json   | 38 -------------------
 .../03-appendix/02-breaking-changes.md        | 24 ++++++++++++
 11 files changed, 75 insertions(+), 73 deletions(-)
 create mode 100644 .changeset/warm-planets-cry.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-component/Component1.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-component/Component2.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-component/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-component/main.svelte
 delete mode 100644 packages/svelte/tests/validator/samples/component-dynamic/_config.js
 delete mode 100644 packages/svelte/tests/validator/samples/component-dynamic/input.svelte
 delete mode 100644 packages/svelte/tests/validator/samples/component-dynamic/warnings.json

diff --git a/.changeset/warm-planets-cry.md b/.changeset/warm-planets-cry.md
new file mode 100644
index 0000000000..ee7e92d95f
--- /dev/null
+++ b/.changeset/warm-planets-cry.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: make `<svelte:component>` unnecessary in runes mode
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 4e5a03089c..d797703e92 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -1551,7 +1551,10 @@ const common_visitors = {
 			node.name.includes('.') ? node.name.slice(0, node.name.indexOf('.')) : node.name
 		);
 
-		node.metadata.dynamic = binding !== null && binding.kind !== 'normal';
+		node.metadata.dynamic =
+			context.state.analysis.runes && // Svelte 4 required you to use svelte:component to switch components
+			binding !== null &&
+			(binding.kind !== 'normal' || node.name.includes('.'));
 	},
 	RenderTag(node, context) {
 		context.next({ ...context.state, render_tag: node });
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index dcfa23a99d..fb995b4e90 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -933,7 +933,16 @@ function serialize_inline_component(node, component_name, context, anchor = cont
 
 	/** @param {Expression} node_id */
 	let fn = (node_id) => {
-		return b.call(component_name, node_id, props_expression);
+		return b.call(
+			// TODO We can remove this ternary once we remove legacy mode, since in runes mode dynamic components
+			// will be handled separately through the `$.component` function, and then the component name will
+			// always be referenced through just the identifier here.
+			node.type === 'SvelteComponent'
+				? component_name
+				: /** @type {Expression} */ (context.visit(b.member_id(component_name))),
+			node_id,
+			props_expression
+		);
 	};
 
 	if (bind_this !== null) {
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component/Component1.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component/Component1.svelte
new file mode 100644
index 0000000000..32751f7c94
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component/Component1.svelte
@@ -0,0 +1 @@
+Component1
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component/Component2.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component/Component2.svelte
new file mode 100644
index 0000000000..aab0454088
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component/Component2.svelte
@@ -0,0 +1 @@
+Component2
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-component/_config.js
new file mode 100644
index 0000000000..f6471f510b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component/_config.js
@@ -0,0 +1,14 @@
+import { test } from '../../test';
+import { flushSync } from 'svelte';
+
+export default test({
+	html: '<button>switch</button> Component1 Component1',
+	async test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, '<button>switch</button> Component2 Component2');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-component/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-component/main.svelte
new file mode 100644
index 0000000000..2b2d7c4b72
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-component/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Component1 from './Component1.svelte';
+	import Component2 from './Component2.svelte';
+
+	let Component = $state(Component1);
+	let Object = {
+		get component() {
+			return Component;
+		}
+	};
+</script>
+
+<button onclick={() => (Component = Component2)}>switch</button>
+
+<Component />
+<Object.component />
diff --git a/packages/svelte/tests/validator/samples/component-dynamic/_config.js b/packages/svelte/tests/validator/samples/component-dynamic/_config.js
deleted file mode 100644
index 64fdc120d6..0000000000
--- a/packages/svelte/tests/validator/samples/component-dynamic/_config.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import { test } from '../../test';
-
-export default test({ skip: true });
diff --git a/packages/svelte/tests/validator/samples/component-dynamic/input.svelte b/packages/svelte/tests/validator/samples/component-dynamic/input.svelte
deleted file mode 100644
index 7f52353e36..0000000000
--- a/packages/svelte/tests/validator/samples/component-dynamic/input.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-	import A from './A.svelte';
-	import B from './B.svelte';
-
-	let Let = A;
-	function update() {
-		Let = B;
-	}
-
-	export let ExportLet = B;
-
-	$: Reactive = random() ? A : B;
-</script>
-
-<Let />
-<ExportLet />
-<Reactive />
-<svelte:component this={Let} />
-
-<!-- Here, we test to see if svelte-ignore works with reactive-component -->
-<!-- svelte-ignore reactive_component -->
-<Let />
-<div>
-  <!-- svelte-ignore reactive_component -->
-  <ExportLet />
-  <div>
-    <!-- svelte-ignore reactive_component -->
-    <Reactive />
-  </div>
-</div>
diff --git a/packages/svelte/tests/validator/samples/component-dynamic/warnings.json b/packages/svelte/tests/validator/samples/component-dynamic/warnings.json
deleted file mode 100644
index 49fb9e4334..0000000000
--- a/packages/svelte/tests/validator/samples/component-dynamic/warnings.json
+++ /dev/null
@@ -1,38 +0,0 @@
-[
-	{
-		"code": "reactive_component",
-		"message": "<Let/> will not be reactive if Let changes. Use <svelte:component this={Let}/> if you want this reactivity.",
-		"end": {
-			"column": 7,
-			"line": 15
-		},
-		"start": {
-			"column": 0,
-			"line": 15
-		}
-	},
-	{
-		"message": "<ExportLet/> will not be reactive if ExportLet changes. Use <svelte:component this={ExportLet}/> if you want this reactivity.",
-		"code": "reactive_component",
-		"end": {
-			"column": 13,
-			"line": 16
-		},
-		"start": {
-			"column": 0,
-			"line": 16
-		}
-	},
-	{
-		"message": "<Reactive/> will not be reactive if Reactive changes. Use <svelte:component this={Reactive}/> if you want this reactivity.",
-		"code": "reactive_component",
-		"end": {
-			"column": 12,
-			"line": 17
-		},
-		"start": {
-			"column": 0,
-			"line": 17
-		}
-	}
-]
diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
index 029b2ba688..95469ccbaf 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
@@ -198,6 +198,30 @@ In Svelte 4, doing the following triggered reactivity:
 
 This is because the Svelte compiler treated the assignment to `foo.value` as an instruction to update anything that referenced `foo`. In Svelte 5, reactivity is determined at runtime rather than compile time, so you should define `value` as a reactive `$state` field on the `Foo` class. Wrapping `new Foo()` with `$state(...)` will have no effect — only vanilla objects and arrays are made deeply reactive.
 
+### `<svelte:component>` is no longer necessary
+
+In Svelte 4, components are _static_ — if you render `<Thing>`, and the value of `Thing` changes, [nothing happens](https://svelte.dev/repl/7f1fa24f0ab44c1089dcbb03568f8dfa?version=4.2.18). To make it dynamic you must use `<svelte:component>`.
+
+This is [no longer true in Svelte 5](/#H4sIAAAAAAAAE4WQwU7DMAyGX8VESANpXe8lq9Q8AzfGobQujZQmWeJOQlXenaQB1sM0bnG-379_e2GDVOhZ9bYw3U7IKtZYy_aMvmwq_AUVYay9mV2XfrjvnLRUn_SJ5GSNI2hgcGaC3aFsDrlh97LB4g-LLY4ChQSvo9SfcIRHTy3h03NEvLzO0Nyjwo7gQ-q-urRqxuOy9oQ1AjeWpNHwQ5pQN7zMf7e4CLXY8Dhpdc-THooCaESP0DoEPM8ydqEmKIqkzUnL9MxrVJ2JG-qkoFH631xREg82mV4OEntWkZsx7K_3vXtdm_LbuwbiHwNx2-A9fANfmchv7QEAAA==):
+
+```svelte
+<script>
+	import A from './A.svelte';
+	import B from './B.svelte';
+
+	let Thing = $state();
+</script>
+
+<select bind:value={Thing}>
+	<option value={A}>A</option>
+	<option value={B}>B</option>
+</select>
+
+<!-- these are equivalent -->
+<Thing />
+<svelte:component this={Thing} />
+```
+
 ## Other breaking changes
 
 ### Stricter `@const` assignment validation

From 71c373d0a59e2191432fb01f1977057e3cf8038f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 30 Jul 2024 18:21:54 -0400
Subject: [PATCH 035/196] chore: refactor analysis (#12651)

* start moving visitors into separate modules

* remove unused code

* more

* more

* tidy up

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* alphabetize

* more

* fix

* more

* more

* consolidate

* more

* more

* more

* more

* more

* more

* more

* tweak

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* jfc what are we doing here

* more

* bizarre

* more

* more

* more

* more

* more

* more

* tidy

* one down

* dont merge

* hmm

* DRY

* more

* more

* tidy up

* tidy up

* add changeset, as this should have its own release

* tidy up

* oh i should probably hit save
---
 .changeset/lucky-panthers-chew.md             |    5 +
 .../src/compiler/phases/2-analyze/index.js    | 1330 ++-------------
 .../src/compiler/phases/2-analyze/types.d.ts  |   15 +-
 .../compiler/phases/2-analyze/validation.js   | 1443 -----------------
 .../visitors/ArrowFunctionExpression.js       |   11 +
 .../visitors/AssignmentExpression.js          |   28 +
 .../phases/2-analyze/visitors/Attribute.js    |  213 +++
 .../phases/2-analyze/visitors/AwaitBlock.js   |   42 +
 .../2-analyze/visitors/BindDirective.js       |  234 +++
 .../2-analyze/visitors/CallExpression.js      |  209 +++
 .../phases/2-analyze/visitors/ClassBody.js    |   27 +
 .../2-analyze/visitors/ClassDeclaration.js    |   20 +
 .../2-analyze/visitors/ClassDirective.js      |   10 +
 .../phases/2-analyze/visitors/Component.js    |   20 +
 .../phases/2-analyze/visitors/ConstTag.js     |   34 +
 .../phases/2-analyze/visitors/DebugTag.js     |   15 +
 .../phases/2-analyze/visitors/EachBlock.js    |   29 +
 .../visitors/ExportDefaultDeclaration.js      |   15 +
 .../visitors/ExportNamedDeclaration.js        |   92 ++
 .../2-analyze/visitors/ExportSpecifier.js     |   66 +
 .../2-analyze/visitors/ExpressionStatement.js |   38 +
 .../2-analyze/visitors/ExpressionTag.js       |   18 +
 .../2-analyze/visitors/FunctionDeclaration.js |   11 +
 .../2-analyze/visitors/FunctionExpression.js  |   11 +
 .../phases/2-analyze/visitors/HtmlTag.js      |   15 +
 .../phases/2-analyze/visitors/Identifier.js   |  154 ++
 .../phases/2-analyze/visitors/IfBlock.js      |   26 +
 .../2-analyze/visitors/ImportDeclaration.js   |   30 +
 .../phases/2-analyze/visitors/KeyBlock.js     |   17 +
 .../2-analyze/visitors/LabeledStatement.js    |  104 ++
 .../phases/2-analyze/visitors/LetDirective.js |   24 +
 .../2-analyze/visitors/MemberExpression.js    |   27 +
 .../2-analyze/visitors/NewExpression.js       |   15 +
 .../phases/2-analyze/visitors/OnDirective.js  |   25 +
 .../2-analyze/visitors/RegularElement.js      |  164 ++
 .../phases/2-analyze/visitors/RenderTag.js    |   37 +
 .../phases/2-analyze/visitors/SlotElement.js  |   39 +
 .../phases/2-analyze/visitors/SnippetBlock.js |   55 +
 .../2-analyze/visitors/SpreadAttribute.js     |   10 +
 .../2-analyze/visitors/StyleDirective.js      |   38 +
 .../2-analyze/visitors/SvelteComponent.js     |   11 +
 .../2-analyze/visitors/SvelteElement.js       |   62 +
 .../2-analyze/visitors/SvelteFragment.js      |   27 +
 .../phases/2-analyze/visitors/SvelteHead.js   |   15 +
 .../phases/2-analyze/visitors/SvelteSelf.js   |   11 +
 .../phases/2-analyze/visitors/Text.js         |   17 +
 .../phases/2-analyze/visitors/TitleElement.js |   21 +
 .../2-analyze/visitors/UpdateExpression.js    |   25 +
 .../2-analyze/visitors/VariableDeclarator.js  |  115 ++
 .../2-analyze/{ => visitors/shared}/a11y.js   |   28 +-
 .../2-analyze/visitors/shared/attribute.js    |  123 ++
 .../2-analyze/visitors/shared/component.js    |   68 +
 .../2-analyze/visitors/shared/element.js      |  149 ++
 .../2-analyze/visitors/shared/function.js     |   21 +
 .../phases/2-analyze/visitors/shared/utils.js |  167 ++
 .../svelte/src/compiler/phases/types.d.ts     |    2 +-
 .../svelte/src/compiler/phases/visitors.js    |    1 +
 packages/svelte/src/compiler/utils/ast.js     |    1 +
 .../_config.js                                |    0
 .../main.svelte                               |    0
 .../_config.js                                |    9 +
 .../main.svelte.js                            |    0
 62 files changed, 2962 insertions(+), 2627 deletions(-)
 create mode 100644 .changeset/lucky-panthers-chew.md
 delete mode 100644 packages/svelte/src/compiler/phases/2-analyze/validation.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/ArrowFunctionExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/ClassDeclaration.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/ClassDirective.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/Component.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/DebugTag.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/ExportDefaultDeclaration.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionStatement.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/FunctionDeclaration.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/FunctionExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/ImportDeclaration.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/LabeledStatement.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/LetDirective.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/NewExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/SlotElement.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/SpreadAttribute.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteFragment.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteSelf.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/TitleElement.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
 rename packages/svelte/src/compiler/phases/2-analyze/{ => visitors/shared}/a11y.js (98%)
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/shared/attribute.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
 rename packages/svelte/tests/compiler-errors/samples/{runes-wrong-props-placement => runes-wrong-props-placement-instance}/_config.js (100%)
 rename packages/svelte/tests/compiler-errors/samples/{runes-wrong-props-placement => runes-wrong-props-placement-instance}/main.svelte (100%)
 create mode 100644 packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement-module/_config.js
 rename packages/svelte/tests/compiler-errors/samples/{runes-wrong-props-placement => runes-wrong-props-placement-module}/main.svelte.js (100%)

diff --git a/.changeset/lucky-panthers-chew.md b/.changeset/lucky-panthers-chew.md
new file mode 100644
index 0000000000..9bd08df3e6
--- /dev/null
+++ b/.changeset/lucky-panthers-chew.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: internal compiler refactoring
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index d797703e92..2a4241a338 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -1,44 +1,171 @@
-/** @import { ArrowFunctionExpression, CallExpression, Expression, FunctionDeclaration, FunctionExpression, Identifier, LabeledStatement, Literal, Node, Program, Super } from 'estree' */
-/** @import { Attribute, BindDirective, Binding, DelegatedEvent, RegularElement, Root, Script, SvelteNode, Text, ValidatedCompileOptions, ValidatedModuleCompileOptions } from '#compiler' */
-/** @import { AnalysisState, Context, LegacyAnalysisState, Visitors } from './types' */
+/** @import { Node, Program } from 'estree' */
+/** @import { Root, Script, SvelteNode, ValidatedCompileOptions, ValidatedModuleCompileOptions } from '#compiler' */
+/** @import { AnalysisState, Visitors } from './types' */
 /** @import { Analysis, ComponentAnalysis, Js, ReactiveStatement, Template } from '../types' */
-import is_reference from 'is-reference';
 import { walk } from 'zimmerframe';
 import * as e from '../../errors.js';
 import * as w from '../../warnings.js';
-import {
-	extract_identifiers,
-	extract_all_identifiers_from_expression,
-	extract_paths,
-	is_event_attribute,
-	is_text_attribute,
-	object,
-	unwrap_optional,
-	get_attribute_expression,
-	get_attribute_chunks
-} from '../../utils/ast.js';
+import { is_text_attribute } from '../../utils/ast.js';
 import * as b from '../../utils/builders.js';
-import { MathMLElements, ReservedKeywords, Runes, SVGElements } from '../constants.js';
-import { Scope, ScopeRoot, create_scopes, get_rune, set_scope } from '../scope.js';
-import { merge } from '../visitors.js';
-import { validation_legacy, validation_runes, validation_runes_js } from './validation.js';
+import { ReservedKeywords, Runes } from '../constants.js';
+import { Scope, ScopeRoot, create_scopes, get_rune } from '../scope.js';
 import check_graph_for_cycles from './utils/check_graph_for_cycles.js';
-import { regex_starts_with_newline } from '../patterns.js';
-import { create_attribute, is_element_node } from '../nodes.js';
-import {
-	DelegatedEvents,
-	is_capture_event,
-	namespace_mathml,
-	namespace_svg
-} from '../../../constants.js';
-import { should_proxy_or_freeze } from '../3-transform/client/utils.js';
+import { create_attribute } from '../nodes.js';
 import { analyze_css } from './css/css-analyze.js';
 import { prune } from './css/css-prune.js';
 import { hash } from '../../../utils.js';
 import { warn_unused } from './css/css-warn.js';
 import { extract_svelte_ignore } from '../../utils/extract_svelte_ignore.js';
 import { ignore_map, ignore_stack, pop_ignore, push_ignore } from '../../state.js';
-import { equal } from '../../utils/assert.js';
+import { ArrowFunctionExpression } from './visitors/ArrowFunctionExpression.js';
+import { AssignmentExpression } from './visitors/AssignmentExpression.js';
+import { Attribute } from './visitors/Attribute.js';
+import { AwaitBlock } from './visitors/AwaitBlock.js';
+import { BindDirective } from './visitors/BindDirective.js';
+import { CallExpression } from './visitors/CallExpression.js';
+import { ClassBody } from './visitors/ClassBody.js';
+import { ClassDeclaration } from './visitors/ClassDeclaration.js';
+import { ClassDirective } from './visitors/ClassDirective.js';
+import { Component } from './visitors/Component.js';
+import { ConstTag } from './visitors/ConstTag.js';
+import { DebugTag } from './visitors/DebugTag.js';
+import { EachBlock } from './visitors/EachBlock.js';
+import { ExportDefaultDeclaration } from './visitors/ExportDefaultDeclaration.js';
+import { ExportNamedDeclaration } from './visitors/ExportNamedDeclaration.js';
+import { ExportSpecifier } from './visitors/ExportSpecifier.js';
+import { ExpressionStatement } from './visitors/ExpressionStatement.js';
+import { ExpressionTag } from './visitors/ExpressionTag.js';
+import { FunctionDeclaration } from './visitors/FunctionDeclaration.js';
+import { FunctionExpression } from './visitors/FunctionExpression.js';
+import { HtmlTag } from './visitors/HtmlTag.js';
+import { Identifier } from './visitors/Identifier.js';
+import { IfBlock } from './visitors/IfBlock.js';
+import { ImportDeclaration } from './visitors/ImportDeclaration.js';
+import { KeyBlock } from './visitors/KeyBlock.js';
+import { LabeledStatement } from './visitors/LabeledStatement.js';
+import { LetDirective } from './visitors/LetDirective.js';
+import { MemberExpression } from './visitors/MemberExpression.js';
+import { NewExpression } from './visitors/NewExpression.js';
+import { OnDirective } from './visitors/OnDirective.js';
+import { RegularElement } from './visitors/RegularElement.js';
+import { RenderTag } from './visitors/RenderTag.js';
+import { SlotElement } from './visitors/SlotElement.js';
+import { SnippetBlock } from './visitors/SnippetBlock.js';
+import { SpreadAttribute } from './visitors/SpreadAttribute.js';
+import { StyleDirective } from './visitors/StyleDirective.js';
+import { SvelteComponent } from './visitors/SvelteComponent.js';
+import { SvelteElement } from './visitors/SvelteElement.js';
+import { SvelteFragment } from './visitors/SvelteFragment.js';
+import { SvelteHead } from './visitors/SvelteHead.js';
+import { SvelteSelf } from './visitors/SvelteSelf.js';
+import { Text } from './visitors/Text.js';
+import { TitleElement } from './visitors/TitleElement.js';
+import { UpdateExpression } from './visitors/UpdateExpression.js';
+import { VariableDeclarator } from './visitors/VariableDeclarator.js';
+
+/**
+ * @type {Visitors}
+ */
+const visitors = {
+	_(node, { state, next, path }) {
+		const parent = path.at(-1);
+
+		/** @type {string[]} */
+		const ignores = [];
+
+		if (parent?.type === 'Fragment' && node.type !== 'Comment' && node.type !== 'Text') {
+			const idx = parent.nodes.indexOf(/** @type {any} */ (node));
+
+			for (let i = idx - 1; i >= 0; i--) {
+				const prev = parent.nodes[i];
+
+				if (prev.type === 'Comment') {
+					ignores.push(
+						...extract_svelte_ignore(
+							prev.start + 4 /* '<!--'.length */,
+							prev.data,
+							state.analysis.runes
+						)
+					);
+				} else if (prev.type !== 'Text') {
+					break;
+				}
+			}
+		} else {
+			const comments = /** @type {any} */ (node).leadingComments;
+
+			if (comments) {
+				for (const comment of comments) {
+					ignores.push(
+						...extract_svelte_ignore(
+							comment.start + 2 /* '//'.length */,
+							comment.value,
+							state.analysis.runes
+						)
+					);
+				}
+			}
+		}
+
+		if (ignores.length > 0) {
+			push_ignore(ignores);
+		}
+
+		ignore_map.set(node, structuredClone(ignore_stack));
+
+		const scope = state.scopes.get(node);
+		next(scope !== undefined && scope !== state.scope ? { ...state, scope } : state);
+
+		if (ignores.length > 0) {
+			pop_ignore();
+		}
+	},
+	ArrowFunctionExpression,
+	AssignmentExpression,
+	Attribute,
+	AwaitBlock,
+	BindDirective,
+	CallExpression,
+	ClassBody,
+	ClassDeclaration,
+	ClassDirective,
+	Component,
+	ConstTag,
+	DebugTag,
+	EachBlock,
+	ExportDefaultDeclaration,
+	ExportNamedDeclaration,
+	ExportSpecifier,
+	ExpressionStatement,
+	ExpressionTag,
+	FunctionDeclaration,
+	FunctionExpression,
+	HtmlTag,
+	Identifier,
+	IfBlock,
+	ImportDeclaration,
+	KeyBlock,
+	LabeledStatement,
+	LetDirective,
+	MemberExpression,
+	NewExpression,
+	OnDirective,
+	RegularElement,
+	RenderTag,
+	SlotElement,
+	SnippetBlock,
+	SpreadAttribute,
+	StyleDirective,
+	SvelteHead,
+	SvelteElement,
+	SvelteFragment,
+	SvelteComponent,
+	SvelteSelf,
+	Text,
+	TitleElement,
+	UpdateExpression,
+	VariableDeclarator
+};
 
 /**
  * @param {Script | null} script
@@ -76,157 +203,6 @@ function get_component_name(filename) {
 	return name[0].toUpperCase() + name.slice(1);
 }
 
-/**
- * Checks if given event attribute can be delegated/hoisted and returns the corresponding info if so
- * @param {string} event_name
- * @param {Expression | null} handler
- * @param {Context} context
- * @returns {null | DelegatedEvent}
- */
-function get_delegated_event(event_name, handler, context) {
-	// Handle delegated event handlers. Bail-out if not a delegated event.
-	if (!handler || !DelegatedEvents.includes(event_name)) {
-		return null;
-	}
-
-	// If we are not working with a RegularElement, then bail-out.
-	const element = context.path.at(-1);
-	if (element?.type !== 'RegularElement') {
-		return null;
-	}
-
-	/** @type {DelegatedEvent} */
-	const non_hoistable = { type: 'non-hoistable' };
-	/** @type {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression | null} */
-	let target_function = null;
-	let binding = null;
-
-	if (element.metadata.has_spread) {
-		// event attribute becomes part of the dynamic spread array
-		return non_hoistable;
-	}
-
-	if (handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') {
-		target_function = handler;
-	} else if (handler.type === 'Identifier') {
-		binding = context.state.scope.get(handler.name);
-
-		if (context.state.analysis.module.scope.references.has(handler.name)) {
-			// If a binding with the same name is referenced in the module scope (even if not declared there), bail-out
-			return non_hoistable;
-		}
-
-		if (binding != null) {
-			for (const { path } of binding.references) {
-				const parent = path.at(-1);
-				if (parent == null) return non_hoistable;
-
-				const grandparent = path.at(-2);
-
-				/** @type {RegularElement | null} */
-				let element = null;
-				/** @type {string | null} */
-				let event_name = null;
-				if (parent.type === 'OnDirective') {
-					element = /** @type {RegularElement} */ (grandparent);
-					event_name = parent.name;
-				} else if (
-					parent.type === 'ExpressionTag' &&
-					grandparent?.type === 'Attribute' &&
-					is_event_attribute(grandparent)
-				) {
-					element = /** @type {RegularElement} */ (path.at(-3));
-					const attribute = /** @type {Attribute} */ (grandparent);
-					event_name = get_attribute_event_name(attribute.name);
-				}
-
-				if (element && event_name) {
-					if (
-						element.type !== 'RegularElement' ||
-						determine_element_spread(element).metadata.has_spread ||
-						!DelegatedEvents.includes(event_name)
-					) {
-						return non_hoistable;
-					}
-				} else if (parent.type !== 'FunctionDeclaration' && parent.type !== 'VariableDeclarator') {
-					return non_hoistable;
-				}
-			}
-		}
-
-		// If the binding is exported, bail-out
-		if (context.state.analysis.exports.find((node) => node.name === handler.name)) {
-			return non_hoistable;
-		}
-
-		if (binding !== null && binding.initial !== null && !binding.mutated && !binding.is_called) {
-			const binding_type = binding.initial.type;
-
-			if (
-				binding_type === 'ArrowFunctionExpression' ||
-				binding_type === 'FunctionDeclaration' ||
-				binding_type === 'FunctionExpression'
-			) {
-				target_function = binding.initial;
-			}
-		}
-	}
-
-	// If we can't find a function, bail-out
-	if (target_function == null) return non_hoistable;
-	// If the function is marked as non-hoistable, bail-out
-	if (target_function.metadata.hoistable === 'impossible') return non_hoistable;
-	// If the function has more than one arg, then bail-out
-	if (target_function.params.length > 1) return non_hoistable;
-
-	const visited_references = new Set();
-	const scope = target_function.metadata.scope;
-	for (const [reference] of scope.references) {
-		// Bail-out if the arguments keyword is used
-		if (reference === 'arguments') return non_hoistable;
-		// Bail-out if references a store subscription
-		if (scope.get(`$${reference}`)?.kind === 'store_sub') return non_hoistable;
-
-		const binding = scope.get(reference);
-		const local_binding = context.state.scope.get(reference);
-
-		// If we are referencing a binding that is shadowed in another scope then bail out.
-		if (local_binding !== null && binding !== null && local_binding.node !== binding.node) {
-			return non_hoistable;
-		}
-
-		// If we have multiple references to the same store using $ prefix, bail out.
-		if (
-			binding !== null &&
-			binding.kind === 'store_sub' &&
-			visited_references.has(reference.slice(1))
-		) {
-			return non_hoistable;
-		}
-
-		// If we reference the index within an each block, then bail-out.
-		if (binding !== null && binding.initial?.type === 'EachBlock') return non_hoistable;
-
-		if (
-			binding !== null &&
-			// Bail-out if the the binding is a rest param
-			(binding.declaration_kind === 'rest_param' ||
-				// Bail-out if we reference anything from the EachBlock (for now) that mutates in non-runes mode,
-				(((!context.state.analysis.runes && binding.kind === 'each') ||
-					// or any normal not reactive bindings that are mutated.
-					binding.kind === 'normal' ||
-					// or any reactive imports (those are rewritten) (can only happen in legacy mode)
-					binding.kind === 'legacy_reactive_import') &&
-					binding.mutated))
-		) {
-			return non_hoistable;
-		}
-		visited_references.add(reference);
-	}
-
-	return { type: 'hoistable', function: target_function };
-}
-
 /**
  * @param {Program} ast
  * @param {ValidatedModuleCompileOptions} options
@@ -244,9 +220,13 @@ export function analyze_module(ast, options) {
 
 	walk(
 		/** @type {Node} */ (ast),
-		{ scope, analysis: { runes: true } },
-		// @ts-expect-error TODO clean this mess up
-		merge(set_scope(scopes), validation_runes_js, runes_scope_js_tweaker)
+		{
+			scope,
+			scopes,
+			// @ts-expect-error TODO
+			analysis: { runes: true }
+		},
+		visitors
 	);
 
 	return {
@@ -441,6 +421,7 @@ export function analyze_component(root, source, options) {
 			/** @type {AnalysisState} */
 			const state = {
 				scope,
+				scopes,
 				analysis,
 				options,
 				ast_type: ast === instance.ast ? 'instance' : ast === template.ast ? 'template' : 'module',
@@ -450,14 +431,13 @@ export function analyze_component(root, source, options) {
 				expression: null,
 				render_tag: null,
 				private_derived_state: [],
-				function_depth: scope.function_depth
+				function_depth: scope.function_depth,
+				instance_scope: instance.scope,
+				reactive_statement: null,
+				reactive_statements: new Map()
 			};
 
-			walk(
-				/** @type {SvelteNode} */ (ast),
-				state,
-				merge(set_scope(scopes), validation_runes, runes_scope_tweaker, common_visitors)
-			);
+			walk(/** @type {SvelteNode} */ (ast), state, visitors);
 		}
 
 		// warn on any nonstate declarations that are a) reassigned and b) referenced in the template
@@ -478,7 +458,7 @@ export function analyze_component(root, source, options) {
 							// bind:this doesn't need to be a state reference if it will never change
 							if (
 								type === 'BindDirective' &&
-								/** @type {BindDirective} */ (path[i]).name === 'this'
+								/** @type {import('#compiler').BindDirective} */ (path[i]).name === 'this'
 							) {
 								for (let j = i - 1; j >= 0; j -= 1) {
 									const type = path[j].type;
@@ -507,9 +487,10 @@ export function analyze_component(root, source, options) {
 		instance.scope.declare(b.id('$$restProps'), 'rest_prop', 'synthetic');
 
 		for (const { ast, scope, scopes } of [module, instance, template]) {
-			/** @type {LegacyAnalysisState} */
+			/** @type {AnalysisState} */
 			const state = {
 				scope,
+				scopes,
 				analysis,
 				options,
 				parent_element: null,
@@ -525,12 +506,7 @@ export function analyze_component(root, source, options) {
 				function_depth: scope.function_depth
 			};
 
-			walk(
-				/** @type {SvelteNode} */ (ast),
-				state,
-				// @ts-expect-error TODO
-				merge(set_scope(scopes), validation_legacy, legacy_scope_tweaker, common_visitors)
-			);
+			walk(/** @type {SvelteNode} */ (ast), state, visitors);
 		}
 
 		for (const [name, binding] of instance.scope.declarations) {
@@ -587,7 +563,7 @@ export function analyze_component(root, source, options) {
 				// TODO this happens during the analysis phase, which shouldn't know anything about client vs server
 				if (element.type === 'SvelteElement' && options.generate === 'client') continue;
 
-				/** @type {Attribute | undefined} */
+				/** @type {import('#compiler').Attribute | undefined} */
 				let class_attribute = undefined;
 
 				for (const attribute of element.attributes) {
@@ -606,7 +582,7 @@ export function analyze_component(root, source, options) {
 					if (is_text_attribute(class_attribute)) {
 						class_attribute.value[0].data += ` ${analysis.css.hash}`;
 					} else {
-						/** @type {Text} */
+						/** @type {import('#compiler').Text} */
 						const css_text = {
 							type: 'Text',
 							data: ` ${analysis.css.hash}`,
@@ -646,959 +622,11 @@ export function analyze_component(root, source, options) {
 	return analysis;
 }
 
-/** @type {Visitors<LegacyAnalysisState>} */
-const legacy_scope_tweaker = {
-	LabeledStatement(node, { next, path, state }) {
-		if (
-			state.ast_type !== 'instance' ||
-			node.label.name !== '$' ||
-			/** @type {SvelteNode} */ (path.at(-1)).type !== 'Program'
-		) {
-			return next();
-		}
-
-		// Find all dependencies of this `$: {...}` statement
-		/** @type {ReactiveStatement} */
-		const reactive_statement = {
-			assignments: new Set(),
-			dependencies: []
-		};
-
-		next({ ...state, reactive_statement, function_depth: state.scope.function_depth + 1 });
-
-		// Every referenced binding becomes a dependency, unless it's on
-		// the left-hand side of an `=` assignment
-		for (const [name, nodes] of state.scope.references) {
-			const binding = state.scope.get(name);
-			if (binding === null) continue;
-
-			for (const { node, path } of nodes) {
-				/** @type {Expression} */
-				let left = node;
-
-				let i = path.length - 1;
-				let parent = /** @type {Expression} */ (path.at(i));
-				while (parent.type === 'MemberExpression') {
-					left = parent;
-					parent = /** @type {Expression} */ (path.at(--i));
-				}
-
-				if (
-					parent.type === 'AssignmentExpression' &&
-					parent.operator === '=' &&
-					parent.left === left
-				) {
-					continue;
-				}
-
-				reactive_statement.dependencies.push(binding);
-				break;
-			}
-		}
-
-		state.reactive_statements.set(node, reactive_statement);
-
-		// Ideally this would be in the validation file, but that isn't possible because this visitor
-		// calls "next" before setting the reactive statements.
-		if (
-			reactive_statement.dependencies.length &&
-			reactive_statement.dependencies.every(
-				(d) => d.scope === state.analysis.module.scope && d.declaration_kind !== 'const'
-			)
-		) {
-			w.reactive_declaration_module_script(node);
-		}
-
-		if (
-			node.body.type === 'ExpressionStatement' &&
-			node.body.expression.type === 'AssignmentExpression'
-		) {
-			let ids = extract_identifiers(node.body.expression.left);
-			if (node.body.expression.left.type === 'MemberExpression') {
-				const id = object(node.body.expression.left);
-				if (id !== null) {
-					ids = [id];
-				}
-			}
-
-			for (const id of ids) {
-				const binding = state.scope.get(id.name);
-				if (binding?.kind === 'legacy_reactive') {
-					// TODO does this include `let double; $: double = x * 2`?
-					binding.legacy_dependencies = Array.from(reactive_statement.dependencies);
-				}
-			}
-		}
-	},
-	AssignmentExpression(node, { state, next }) {
-		if (state.reactive_statement) {
-			const id = node.left.type === 'MemberExpression' ? object(node.left) : node.left;
-			if (id !== null) {
-				for (const id of extract_identifiers(node.left)) {
-					const binding = state.scope.get(id.name);
-
-					if (binding) {
-						state.reactive_statement.assignments.add(binding);
-					}
-				}
-			}
-		}
-
-		next();
-	},
-	UpdateExpression(node, { state, next }) {
-		if (state.reactive_statement) {
-			const id = node.argument.type === 'MemberExpression' ? object(node.argument) : node.argument;
-			if (id?.type === 'Identifier') {
-				const binding = state.scope.get(id.name);
-
-				if (binding) {
-					state.reactive_statement.assignments.add(binding);
-				}
-			}
-		}
-
-		next();
-	},
-	Identifier(node, { state, path }) {
-		const parent = /** @type {Node} */ (path.at(-1));
-		if (is_reference(node, parent)) {
-			if (node.name === '$$props') {
-				state.analysis.uses_props = true;
-			}
-
-			if (node.name === '$$restProps') {
-				state.analysis.uses_rest_props = true;
-			}
-
-			if (node.name === '$$slots') {
-				state.analysis.uses_slots = true;
-			}
-
-			let binding = state.scope.get(node.name);
-
-			if (binding?.kind === 'store_sub') {
-				// get the underlying store to mark it as reactive in case it's mutated
-				binding = state.scope.get(node.name.slice(1));
-			}
-
-			if (
-				binding?.kind === 'normal' &&
-				((binding.scope === state.instance_scope && binding.declaration_kind !== 'function') ||
-					binding.declaration_kind === 'import')
-			) {
-				if (binding.declaration_kind === 'import') {
-					if (
-						binding.mutated &&
-						// TODO could be more fine-grained - not every mention in the template implies a state binding
-						(state.reactive_statement || state.ast_type === 'template') &&
-						parent.type === 'MemberExpression'
-					) {
-						binding.kind = 'legacy_reactive_import';
-					}
-				} else if (
-					binding.mutated &&
-					// TODO could be more fine-grained - not every mention in the template implies a state binding
-					(state.reactive_statement || state.ast_type === 'template')
-				) {
-					binding.kind = 'state';
-				} else if (
-					state.reactive_statement &&
-					parent.type === 'AssignmentExpression' &&
-					parent.left === binding.node
-				) {
-					binding.kind = 'derived';
-				}
-			} else if (binding?.kind === 'each' && binding.mutated) {
-				// Ensure that the array is marked as reactive even when only its entries are mutated
-				let i = path.length;
-				while (i--) {
-					const ancestor = path[i];
-					if (
-						ancestor.type === 'EachBlock' &&
-						state.analysis.template.scopes.get(ancestor)?.declarations.get(node.name) === binding
-					) {
-						for (const binding of ancestor.metadata.references) {
-							if (binding.kind === 'normal') {
-								binding.kind = 'state';
-							}
-						}
-						break;
-					}
-				}
-			}
-		}
-	},
-	ExportNamedDeclaration(node, { next, state }) {
-		if (state.ast_type !== 'instance') {
-			return next();
-		}
-
-		state.analysis.needs_props = true;
-
-		if (!node.declaration) {
-			for (const specifier of node.specifiers) {
-				const binding = /** @type {Binding} */ (state.scope.get(specifier.local.name));
-				if (
-					binding !== null &&
-					(binding.kind === 'state' ||
-						binding.kind === 'frozen_state' ||
-						(binding.kind === 'normal' &&
-							(binding.declaration_kind === 'let' || binding.declaration_kind === 'var')))
-				) {
-					binding.kind = 'bindable_prop';
-					if (specifier.exported.name !== specifier.local.name) {
-						binding.prop_alias = specifier.exported.name;
-					}
-				} else {
-					state.analysis.exports.push({
-						name: specifier.local.name,
-						alias: specifier.exported.name
-					});
-				}
-			}
-			return next();
-		}
-
-		if (
-			node.declaration.type === 'FunctionDeclaration' ||
-			node.declaration.type === 'ClassDeclaration'
-		) {
-			state.analysis.exports.push({
-				name: /** @type {Identifier} */ (node.declaration.id).name,
-				alias: null
-			});
-			return next();
-		}
-
-		if (node.declaration.type === 'VariableDeclaration') {
-			if (node.declaration.kind === 'const') {
-				for (const declarator of node.declaration.declarations) {
-					for (const node of extract_identifiers(declarator.id)) {
-						state.analysis.exports.push({ name: node.name, alias: null });
-					}
-				}
-				return next();
-			}
-
-			for (const declarator of node.declaration.declarations) {
-				for (const id of extract_identifiers(declarator.id)) {
-					const binding = /** @type {Binding} */ (state.scope.get(id.name));
-					binding.kind = 'bindable_prop';
-				}
-			}
-		}
-	},
-	StyleDirective(node, { state }) {
-		// the case for node.value different from true is already covered by the Identifier visitor
-		if (node.value === true) {
-			// get the binding for node.name and change the binding to state
-			let binding = state.scope.get(node.name);
-			if (binding?.mutated && binding.kind === 'normal') {
-				binding.kind = 'state';
-			}
-		}
-	}
-};
-
-/** @type {Visitors} */
-const runes_scope_js_tweaker = {
-	VariableDeclarator(node, { state }) {
-		if (node.init?.type !== 'CallExpression') return;
-		const rune = get_rune(node.init, state.scope);
-		if (rune === null) return;
-
-		const callee = node.init.callee;
-		if (callee.type !== 'Identifier' && callee.type !== 'MemberExpression') return;
-
-		if (
-			rune !== '$state' &&
-			rune !== '$state.frozen' &&
-			rune !== '$derived' &&
-			rune !== '$derived.by'
-		)
-			return;
-
-		for (const path of extract_paths(node.id)) {
-			// @ts-ignore this fails in CI for some insane reason
-			const binding = /** @type {Binding} */ (state.scope.get(path.node.name));
-			binding.kind =
-				rune === '$state' ? 'state' : rune === '$state.frozen' ? 'frozen_state' : 'derived';
-		}
-	}
-};
-
-/** @type {Visitors} */
-const runes_scope_tweaker = {
-	CallExpression(node, { state, next }) {
-		const rune = get_rune(node, state.scope);
-
-		// `$inspect(foo)` should not trigger the `static-state-reference` warning
-		if (rune === '$inspect') {
-			next({ ...state, function_depth: state.function_depth + 1 });
-		}
-	},
-	VariableDeclarator(node, { state }) {
-		const init = node.init;
-		if (!init || init.type !== 'CallExpression') return;
-		const rune = get_rune(init, state.scope);
-		if (rune === null) return;
-
-		const callee = init.callee;
-		if (callee.type !== 'Identifier' && callee.type !== 'MemberExpression') return;
-
-		if (
-			rune !== '$state' &&
-			rune !== '$state.frozen' &&
-			rune !== '$derived' &&
-			rune !== '$derived.by' &&
-			rune !== '$props'
-		)
-			return;
-
-		for (const path of extract_paths(node.id)) {
-			// @ts-ignore this fails in CI for some insane reason
-			const binding = /** @type {Binding} */ (state.scope.get(path.node.name));
-			binding.kind =
-				rune === '$state'
-					? 'state'
-					: rune === '$state.frozen'
-						? 'frozen_state'
-						: rune === '$derived' || rune === '$derived.by'
-							? 'derived'
-							: path.is_rest
-								? 'rest_prop'
-								: 'prop';
-		}
-
-		if (rune === '$props') {
-			state.analysis.needs_props = true;
-
-			if (node.id.type === 'Identifier') {
-				const binding = /** @type {Binding} */ (state.scope.get(node.id.name));
-				binding.initial = null; // else would be $props()
-				binding.kind = 'rest_prop';
-			} else {
-				equal(node.id.type, 'ObjectPattern');
-
-				for (const property of node.id.properties) {
-					if (property.type !== 'Property') continue;
-
-					const name =
-						property.value.type === 'AssignmentPattern'
-							? /** @type {Identifier} */ (property.value.left).name
-							: /** @type {Identifier} */ (property.value).name;
-					const alias =
-						property.key.type === 'Identifier'
-							? property.key.name
-							: String(/** @type {Literal} */ (property.key).value);
-					let initial = property.value.type === 'AssignmentPattern' ? property.value.right : null;
-
-					const binding = /** @type {Binding} */ (state.scope.get(name));
-					binding.prop_alias = alias;
-
-					// rewire initial from $props() to the actual initial value, stripping $bindable() if necessary
-					if (
-						initial?.type === 'CallExpression' &&
-						initial.callee.type === 'Identifier' &&
-						initial.callee.name === '$bindable'
-					) {
-						binding.initial = /** @type {Expression | null} */ (initial.arguments[0] ?? null);
-						binding.kind = 'bindable_prop';
-					} else {
-						binding.initial = initial;
-					}
-				}
-			}
-		}
-	},
-	ExportSpecifier(node, { state }) {
-		if (state.ast_type !== 'instance') return;
-
-		state.analysis.exports.push({
-			name: node.local.name,
-			alias: node.exported.name
-		});
-
-		const binding = state.scope.get(node.local.name);
-		if (binding) binding.reassigned = true;
-	},
-	ExportNamedDeclaration(node, { next, state }) {
-		if (!node.declaration || state.ast_type !== 'instance') {
-			return next();
-		}
-
-		if (
-			node.declaration.type === 'FunctionDeclaration' ||
-			node.declaration.type === 'ClassDeclaration'
-		) {
-			state.analysis.exports.push({
-				name: /** @type {Identifier} */ (node.declaration.id).name,
-				alias: null
-			});
-			return next();
-		}
-
-		if (node.declaration.type === 'VariableDeclaration' && node.declaration.kind === 'const') {
-			for (const declarator of node.declaration.declarations) {
-				for (const node of extract_identifiers(declarator.id)) {
-					state.analysis.exports.push({ name: node.name, alias: null });
-				}
-			}
-		}
-	}
-};
-
-/**
- * @param {CallExpression} node
- * @param {Context} context
- * @returns {boolean}
- */
-function is_known_safe_call(node, context) {
-	const callee = node.callee;
-
-	// String / Number / BigInt / Boolean casting calls
-	if (callee.type === 'Identifier') {
-		const name = callee.name;
-		const binding = context.state.scope.get(name);
-		if (
-			binding === null &&
-			(name === 'BigInt' || name === 'String' || name === 'Number' || name === 'Boolean')
-		) {
-			return true;
-		}
-	}
-
-	// TODO add more cases
-
-	return false;
-}
-
-/**
- * @param {ArrowFunctionExpression | FunctionExpression | FunctionDeclaration} node
- * @param {Context} context
- */
-const function_visitor = (node, context) => {
-	// TODO retire this in favour of a more general solution based on bindings
-	node.metadata = {
-		// module context -> already hoisted
-		hoistable: context.state.ast_type === 'module' ? 'impossible' : false,
-		hoistable_params: [],
-		scope: context.state.scope
-	};
-
-	context.next({
-		...context.state,
-		function_depth: context.state.function_depth + 1
-	});
-};
-
-/**
- * A 'safe' identifier means that the `foo` in `foo.bar` or `foo()` will not
- * call functions that require component context to exist
- * @param {Expression | Super} expression
- * @param {Scope} scope
- */
-function is_safe_identifier(expression, scope) {
-	let node = expression;
-	while (node.type === 'MemberExpression') node = node.object;
-
-	if (node.type !== 'Identifier') return false;
-
-	const binding = scope.get(node.name);
-	if (!binding) return true;
-
-	if (binding.kind === 'store_sub') {
-		return is_safe_identifier({ name: node.name.slice(1), type: 'Identifier' }, scope);
-	}
-
-	return (
-		binding.declaration_kind !== 'import' &&
-		binding.kind !== 'prop' &&
-		binding.kind !== 'bindable_prop' &&
-		binding.kind !== 'rest_prop'
-	);
-}
-
-/** @type {Visitors} */
-const common_visitors = {
-	_(node, { state, next, path }) {
-		ignore_map.set(node, structuredClone(ignore_stack));
-		const parent = path.at(-1);
-		if (parent?.type === 'Fragment' && node.type !== 'Comment' && node.type !== 'Text') {
-			const idx = parent.nodes.indexOf(/** @type {any} */ (node));
-			/** @type {string[]} */
-			const ignores = [];
-			for (let i = idx - 1; i >= 0; i--) {
-				const prev = parent.nodes[i];
-				if (prev.type === 'Comment') {
-					ignores.push(
-						...extract_svelte_ignore(
-							prev.start + 4 /* '<!--'.length */,
-							prev.data,
-							state.analysis.runes
-						)
-					);
-				} else if (prev.type !== 'Text') {
-					break;
-				}
-			}
-
-			if (ignores.length > 0) {
-				push_ignore(ignores);
-				ignore_map.set(node, structuredClone(ignore_stack));
-				next();
-				pop_ignore();
-			}
-		} else {
-			const comments = /** @type {any} */ (node).leadingComments;
-			if (comments) {
-				/** @type {string[]} */
-				const ignores = [];
-				for (const comment of comments) {
-					ignores.push(
-						...extract_svelte_ignore(
-							comment.start + 2 /* '//'.length */,
-							comment.value,
-							state.analysis.runes
-						)
-					);
-				}
-				if (ignores.length > 0) {
-					push_ignore(ignores);
-					ignore_map.set(node, structuredClone(ignore_stack));
-					next();
-					pop_ignore();
-				}
-			}
-		}
-	},
-	Attribute(node, context) {
-		if (node.value === true) return;
-
-		context.next();
-
-		for (const chunk of get_attribute_chunks(node.value)) {
-			if (chunk.type !== 'ExpressionTag') continue;
-
-			if (
-				chunk.expression.type === 'FunctionExpression' ||
-				chunk.expression.type === 'ArrowFunctionExpression'
-			) {
-				continue;
-			}
-
-			node.metadata.expression.has_state ||= chunk.metadata.expression.has_state;
-			node.metadata.expression.has_call ||= chunk.metadata.expression.has_call;
-		}
-
-		if (is_event_attribute(node)) {
-			const parent = context.path.at(-1);
-			if (parent?.type === 'RegularElement' || parent?.type === 'SvelteElement') {
-				context.state.analysis.uses_event_attributes = true;
-			}
-
-			const expression = get_attribute_expression(node);
-			const delegated_event = get_delegated_event(node.name.slice(2), expression, context);
-
-			if (delegated_event !== null) {
-				if (delegated_event.type === 'hoistable') {
-					delegated_event.function.metadata.hoistable = true;
-				}
-				node.metadata.delegated = delegated_event;
-			}
-		}
-	},
-	ClassDirective(node, context) {
-		context.next({ ...context.state, expression: node.metadata.expression });
-	},
-	SpreadAttribute(node, context) {
-		context.next({ ...context.state, expression: node.metadata.expression });
-	},
-	SlotElement(node, context) {
-		let name = 'default';
-		for (const attr of node.attributes) {
-			if (attr.type === 'Attribute' && attr.name === 'name' && is_text_attribute(attr)) {
-				name = attr.value[0].data;
-				break;
-			}
-		}
-		context.state.analysis.slot_names.set(name, node);
-	},
-	StyleDirective(node, context) {
-		if (node.value === true) {
-			const binding = context.state.scope.get(node.name);
-			if (binding?.kind !== 'normal') {
-				node.metadata.expression.has_state = true;
-			}
-		} else {
-			context.next();
-
-			for (const chunk of get_attribute_chunks(node.value)) {
-				if (chunk.type !== 'ExpressionTag') continue;
-
-				node.metadata.expression.has_state ||= chunk.metadata.expression.has_state;
-				node.metadata.expression.has_call ||= chunk.metadata.expression.has_call;
-			}
-		}
-	},
-	ExpressionTag(node, context) {
-		context.next({ ...context.state, expression: node.metadata.expression });
-	},
-	Identifier(node, context) {
-		const parent = /** @type {Node} */ (context.path.at(-1));
-		if (!is_reference(node, parent)) return;
-
-		if (node.name === '$$slots') {
-			context.state.analysis.uses_slots = true;
-			return;
-		}
-
-		// If we are using arguments outside of a function, then throw an error
-		if (
-			node.name === 'arguments' &&
-			context.path.every((n) => n.type !== 'FunctionDeclaration' && n.type !== 'FunctionExpression')
-		) {
-			e.invalid_arguments_usage(node);
-		}
-
-		const binding = context.state.scope.get(node.name);
-
-		if (binding && context.state.expression) {
-			context.state.expression.dependencies.add(binding);
-
-			if (binding.kind !== 'normal') {
-				context.state.expression.has_state = true;
-			}
-		}
-
-		// if no binding, means some global variable
-		if (binding && binding.kind !== 'normal') {
-			if (context.state.expression) {
-				context.state.expression.has_state = true;
-			}
-
-			// TODO it would be better to just bail out when we hit the ExportSpecifier node but that's
-			// not currently possibly because of our visitor merging, which I desperately want to nuke
-			const is_export_specifier =
-				/** @type {SvelteNode} */ (context.path.at(-1)).type === 'ExportSpecifier';
-
-			if (
-				context.state.analysis.runes &&
-				node !== binding.node &&
-				context.state.function_depth === binding.scope.function_depth &&
-				// If we have $state that can be proxied or frozen and isn't re-assigned, then that means
-				// it's likely not using a primitive value and thus this warning isn't that helpful.
-				((binding.kind === 'state' &&
-					(binding.reassigned ||
-						(binding.initial?.type === 'CallExpression' &&
-							binding.initial.arguments.length === 1 &&
-							binding.initial.arguments[0].type !== 'SpreadElement' &&
-							!should_proxy_or_freeze(binding.initial.arguments[0], context.state.scope)))) ||
-					binding.kind === 'frozen_state' ||
-					binding.kind === 'derived') &&
-				!is_export_specifier &&
-				// We're only concerned with reads here
-				(parent.type !== 'AssignmentExpression' || parent.left !== node) &&
-				parent.type !== 'UpdateExpression'
-			) {
-				w.state_referenced_locally(node);
-			}
-		}
-	},
-	CallExpression(node, context) {
-		const { expression, render_tag } = context.state;
-
-		if (expression && !is_known_safe_call(node, context)) {
-			expression.has_call = true;
-			expression.has_state = true;
-		}
-
-		if (render_tag) {
-			// Find out which of the render tag arguments contains this call expression
-			const arg_idx = unwrap_optional(render_tag.expression).arguments.findIndex(
-				(arg) => arg === node || context.path.includes(arg)
-			);
-
-			// -1 if this is the call expression of the render tag itself
-			if (arg_idx !== -1) {
-				render_tag.metadata.args_with_call_expression.add(arg_idx);
-			}
-		}
-
-		const callee = node.callee;
-		const rune = get_rune(node, context.state.scope);
-
-		if (callee.type === 'Identifier') {
-			const binding = context.state.scope.get(callee.name);
-
-			if (binding !== null) {
-				binding.is_called = true;
-			}
-
-			if (rune === '$derived') {
-				// special case — `$derived(foo)` is treated as `$derived(() => foo)`
-				// for the purposes of identifying static state references
-				context.next({
-					...context.state,
-					function_depth: context.state.function_depth + 1
-				});
-
-				return;
-			}
-		}
-
-		if (rune === '$effect' || rune === '$effect.pre') {
-			// `$effect` needs context because Svelte needs to know whether it should re-run
-			// effects that invalidate themselves, and that's determined by whether we're in runes mode
-			context.state.analysis.needs_context = true;
-		} else if (rune === null) {
-			if (!is_safe_identifier(callee, context.state.scope)) {
-				context.state.analysis.needs_context = true;
-			}
-		}
-
-		context.next();
-	},
-	MemberExpression(node, context) {
-		if (context.state.expression) {
-			context.state.expression.has_state = true;
-		}
-
-		if (!is_safe_identifier(node, context.state.scope)) {
-			context.state.analysis.needs_context = true;
-		}
-
-		context.next();
-	},
-	OnDirective(node, { state, path, next }) {
-		const parent = path.at(-1);
-		if (parent?.type === 'SvelteElement' || parent?.type === 'RegularElement') {
-			state.analysis.event_directive_node ??= node;
-		}
-		next({ ...state, expression: node.metadata.expression });
-	},
-	BindDirective(node, context) {
-		let i = context.path.length;
-		while (i--) {
-			const parent = context.path[i];
-			if (
-				parent.type === 'Component' ||
-				parent.type === 'SvelteComponent' ||
-				parent.type === 'SvelteSelf'
-			) {
-				if (node.name !== 'this') {
-					context.state.analysis.uses_component_bindings = true;
-				}
-				break;
-			} else if (is_element_node(parent)) {
-				break;
-			}
-		}
-
-		if (node.name !== 'group') return;
-
-		// Traverse the path upwards and find all EachBlocks who are (indirectly) contributing to bind:group,
-		// i.e. one of their declarations is referenced in the binding. This allows group bindings to work
-		// correctly when referencing a variable declared in an EachBlock by using the index of the each block
-		// entries as keys.
-		i = context.path.length;
-		const each_blocks = [];
-		const [keypath, expression_ids] = extract_all_identifiers_from_expression(node.expression);
-		let ids = expression_ids;
-		while (i--) {
-			const parent = context.path[i];
-			if (parent.type === 'EachBlock') {
-				const references = ids.filter((id) => parent.metadata.declarations.has(id.name));
-				if (references.length > 0) {
-					parent.metadata.contains_group_binding = true;
-					for (const binding of parent.metadata.references) {
-						binding.mutated = true;
-					}
-					each_blocks.push(parent);
-					ids = ids.filter((id) => !references.includes(id));
-					ids.push(...extract_all_identifiers_from_expression(parent.expression)[1]);
-				}
-			}
-		}
-
-		// The identifiers that make up the binding expression form they key for the binding group.
-		// If the same identifiers in the same order are used in another bind:group, they will be in the same group.
-		// (there's an edge case where `bind:group={a[i]}` will be in a different group than `bind:group={a[j]}` even when i == j,
-		//  but this is a limitation of the current static analysis we do; it also never worked in Svelte 4)
-		const bindings = expression_ids.map((id) => context.state.scope.get(id.name));
-		let group_name;
-		outer: for (const [[key, b], group] of context.state.analysis.binding_groups) {
-			if (b.length !== bindings.length || key !== keypath) continue;
-			for (let i = 0; i < bindings.length; i++) {
-				if (bindings[i] !== b[i]) continue outer;
-			}
-			group_name = group;
-		}
-
-		if (!group_name) {
-			group_name = context.state.scope.root.unique('binding_group');
-			context.state.analysis.binding_groups.set([keypath, bindings], group_name);
-		}
-
-		node.metadata = {
-			binding_group_name: group_name,
-			parent_each_blocks: each_blocks
-		};
-	},
-	ArrowFunctionExpression: function_visitor,
-	FunctionExpression: function_visitor,
-	FunctionDeclaration: function_visitor,
-	RegularElement(node, context) {
-		if (context.state.options.namespace !== 'foreign') {
-			if (SVGElements.includes(node.name)) node.metadata.svg = true;
-			else if (MathMLElements.includes(node.name)) node.metadata.mathml = true;
-		}
-
-		determine_element_spread(node);
-
-		// Special case: Move the children of <textarea> into a value attribute if they are dynamic
-		if (
-			context.state.options.namespace !== 'foreign' &&
-			node.name === 'textarea' &&
-			node.fragment.nodes.length > 0
-		) {
-			if (node.fragment.nodes.length > 1 || node.fragment.nodes[0].type !== 'Text') {
-				const first = node.fragment.nodes[0];
-				if (first.type === 'Text') {
-					// The leading newline character needs to be stripped because of a qirk:
-					// It is ignored by browsers if the tag and its contents are set through
-					// innerHTML, but we're now setting it through the value property at which
-					// point it is _not_ ignored, so we need to strip it ourselves.
-					// see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
-					// see https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
-					first.data = first.data.replace(regex_starts_with_newline, '');
-					first.raw = first.raw.replace(regex_starts_with_newline, '');
-				}
-
-				node.attributes.push(
-					create_attribute(
-						'value',
-						/** @type {Text} */ (node.fragment.nodes.at(0)).start,
-						/** @type {Text} */ (node.fragment.nodes.at(-1)).end,
-						// @ts-ignore
-						node.fragment.nodes
-					)
-				);
-
-				node.fragment.nodes = [];
-			}
-		}
-
-		// Special case: single expression tag child of option element -> add "fake" attribute
-		// to ensure that value types are the same (else for example numbers would be strings)
-		if (
-			context.state.options.namespace !== 'foreign' &&
-			node.name === 'option' &&
-			node.fragment.nodes?.length === 1 &&
-			node.fragment.nodes[0].type === 'ExpressionTag' &&
-			!node.attributes.some(
-				(attribute) => attribute.type === 'Attribute' && attribute.name === 'value'
-			)
-		) {
-			const child = node.fragment.nodes[0];
-			node.attributes.push(create_attribute('value', child.start, child.end, [child]));
-		}
-
-		context.state.analysis.elements.push(node);
-	},
-	SvelteElement(node, context) {
-		context.state.analysis.elements.push(node);
-
-		for (const attribute of node.attributes) {
-			if (attribute.type === 'Attribute') {
-				if (attribute.name === 'xmlns' && is_text_attribute(attribute)) {
-					node.metadata.svg = attribute.value[0].data === namespace_svg;
-					node.metadata.mathml = attribute.value[0].data === namespace_mathml;
-					return;
-				}
-			}
-		}
-
-		for (let i = context.path.length - 1; i >= 0; i--) {
-			const ancestor = context.path[i];
-			if (
-				ancestor.type === 'Component' ||
-				ancestor.type === 'SvelteComponent' ||
-				ancestor.type === 'SvelteFragment' ||
-				ancestor.type === 'SnippetBlock'
-			) {
-				// Inside a slot or a snippet -> this resets the namespace, so assume the component namespace
-				node.metadata.svg = context.state.options.namespace === 'svg';
-				node.metadata.mathml = context.state.options.namespace === 'mathml';
-				return;
-			}
-			if (ancestor.type === 'SvelteElement' || ancestor.type === 'RegularElement') {
-				node.metadata.svg =
-					ancestor.type === 'RegularElement' && ancestor.name === 'foreignObject'
-						? false
-						: ancestor.metadata.svg;
-				node.metadata.mathml =
-					ancestor.type === 'RegularElement' && ancestor.name === 'foreignObject'
-						? false
-						: ancestor.metadata.mathml;
-				return;
-			}
-		}
-	},
-	Component(node, context) {
-		const binding = context.state.scope.get(
-			node.name.includes('.') ? node.name.slice(0, node.name.indexOf('.')) : node.name
-		);
-
-		node.metadata.dynamic =
-			context.state.analysis.runes && // Svelte 4 required you to use svelte:component to switch components
-			binding !== null &&
-			(binding.kind !== 'normal' || node.name.includes('.'));
-	},
-	RenderTag(node, context) {
-		context.next({ ...context.state, render_tag: node });
-	},
-	EachBlock(node) {
-		if (node.key) {
-			// treat `{#each items as item, i (i)}` as a normal indexed block, everything else as keyed
-			node.metadata.keyed =
-				node.key.type !== 'Identifier' || !node.index || node.key.name !== node.index;
-		}
-	}
-};
-
-/**
- * @param {RegularElement} node
- */
-function determine_element_spread(node) {
-	let has_spread = false;
-	for (const attribute of node.attributes) {
-		if (!has_spread && attribute.type === 'SpreadAttribute') {
-			has_spread = true;
-		}
-	}
-	node.metadata.has_spread = has_spread;
-
-	return node;
-}
-
-/**
- * @param {string} event_name
- */
-function get_attribute_event_name(event_name) {
-	if (is_capture_event(event_name, 'include-on')) {
-		event_name = event_name.slice(0, -7);
-	}
-	event_name = event_name.slice(2);
-	return event_name;
-}
-
 /**
- * @param {Map<LabeledStatement, ReactiveStatement>} unsorted_reactive_declarations
+ * @param {Map<import('estree').LabeledStatement, ReactiveStatement>} unsorted_reactive_declarations
  */
 function order_reactive_statements(unsorted_reactive_declarations) {
-	/** @typedef {[LabeledStatement, ReactiveStatement]} Tuple */
+	/** @typedef {[import('estree').LabeledStatement, ReactiveStatement]} Tuple */
 
 	/** @type {Map<string, Array<Tuple>>} */
 	const lookup = new Map();
@@ -1631,12 +659,12 @@ function order_reactive_statements(unsorted_reactive_declarations) {
 	}
 
 	// We use a map and take advantage of the fact that the spec says insertion order is preserved when iterating
-	/** @type {Map<LabeledStatement, ReactiveStatement>} */
+	/** @type {Map<import('estree').LabeledStatement, ReactiveStatement>} */
 	const reactive_declarations = new Map();
 
 	/**
 	 *
-	 * @param {LabeledStatement} node
+	 * @param {import('estree').LabeledStatement} node
 	 * @param {ReactiveStatement} declaration
 	 * @returns
 	 */
diff --git a/packages/svelte/src/compiler/phases/2-analyze/types.d.ts b/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
index e03b9c9cc4..2cfe76b61a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
+++ b/packages/svelte/src/compiler/phases/2-analyze/types.d.ts
@@ -1,19 +1,11 @@
 import type { Scope } from '../scope.js';
 import type { ComponentAnalysis, ReactiveStatement } from '../types.js';
-import type {
-	ClassDirective,
-	ExpressionMetadata,
-	ExpressionTag,
-	OnDirective,
-	RenderTag,
-	SpreadAttribute,
-	SvelteNode,
-	ValidatedCompileOptions
-} from '#compiler';
+import type { ExpressionMetadata, RenderTag, SvelteNode, ValidatedCompileOptions } from '#compiler';
 import type { LabeledStatement } from 'estree';
 
 export interface AnalysisState {
 	scope: Scope;
+	scopes: Map<SvelteNode, Scope>;
 	analysis: ComponentAnalysis;
 	options: ValidatedCompileOptions;
 	ast_type: 'instance' | 'template' | 'module';
@@ -27,9 +19,8 @@ export interface AnalysisState {
 	render_tag: null | RenderTag;
 	private_derived_state: string[];
 	function_depth: number;
-}
 
-export interface LegacyAnalysisState extends AnalysisState {
+	// legacy stuff
 	instance_scope: Scope;
 	reactive_statement: null | ReactiveStatement;
 	reactive_statements: Map<LabeledStatement, ReactiveStatement>;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/validation.js b/packages/svelte/src/compiler/phases/2-analyze/validation.js
deleted file mode 100644
index 67459fe5a1..0000000000
--- a/packages/svelte/src/compiler/phases/2-analyze/validation.js
+++ /dev/null
@@ -1,1443 +0,0 @@
-/** @import { AssignmentExpression, CallExpression, Expression, ImportDeclaration, Identifier, Node, Pattern, PrivateIdentifier, Super, UpdateExpression, VariableDeclarator } from 'estree' */
-/** @import { Attribute, Component, ElementLike, Fragment, RegularElement, SvelteComponent, SvelteElement, SvelteNode, SvelteSelf, TransitionDirective } from '#compiler' */
-/** @import { NodeLike } from '../../errors.js' */
-/** @import { AnalysisState, Context, Visitors } from './types.js' */
-import is_reference from 'is-reference';
-import * as e from '../../errors.js';
-import {
-	extract_identifiers,
-	get_attribute_expression,
-	get_parent,
-	is_expression_attribute,
-	is_text_attribute,
-	object,
-	unwrap_optional
-} from '../../utils/ast.js';
-import * as w from '../../warnings.js';
-import fuzzymatch from '../1-parse/utils/fuzzymatch.js';
-import { binding_properties } from '../bindings.js';
-import {
-	ContentEditableBindings,
-	EventModifiers,
-	Runes,
-	SVGElements,
-	VoidElements
-} from '../constants.js';
-import { is_custom_element_node } from '../nodes.js';
-import {
-	regex_illegal_attribute_character,
-	regex_not_whitespace,
-	regex_only_whitespaces
-} from '../patterns.js';
-import { Scope, get_rune } from '../scope.js';
-import { merge } from '../visitors.js';
-import { a11y_validators } from './a11y.js';
-import {
-	is_tag_valid_with_ancestor,
-	is_tag_valid_with_parent
-} from '../../../html-tree-validation.js';
-
-/**
- * @param {Attribute} attribute
- * @param {ElementLike} parent
- */
-function validate_attribute(attribute, parent) {
-	if (
-		Array.isArray(attribute.value) &&
-		attribute.value.length === 1 &&
-		attribute.value[0].type === 'ExpressionTag' &&
-		(parent.type === 'Component' ||
-			parent.type === 'SvelteComponent' ||
-			parent.type === 'SvelteSelf' ||
-			(parent.type === 'RegularElement' && is_custom_element_node(parent)))
-	) {
-		w.attribute_quoted(attribute);
-	}
-
-	if (attribute.value === true || !Array.isArray(attribute.value) || attribute.value.length === 1) {
-		return;
-	}
-
-	const is_quoted = attribute.value.at(-1)?.end !== attribute.end;
-
-	if (!is_quoted) {
-		e.attribute_unquoted_sequence(attribute);
-	}
-}
-
-/**
- * @param {Component | SvelteComponent | SvelteSelf} node
- * @param {Context} context
- */
-function validate_component(node, context) {
-	for (const attribute of node.attributes) {
-		if (
-			attribute.type !== 'Attribute' &&
-			attribute.type !== 'SpreadAttribute' &&
-			attribute.type !== 'LetDirective' &&
-			attribute.type !== 'OnDirective' &&
-			attribute.type !== 'BindDirective'
-		) {
-			e.component_invalid_directive(attribute);
-		}
-
-		if (
-			attribute.type === 'OnDirective' &&
-			(attribute.modifiers.length > 1 || attribute.modifiers.some((m) => m !== 'once'))
-		) {
-			e.event_handler_invalid_component_modifier(attribute);
-		}
-
-		if (attribute.type === 'Attribute') {
-			if (context.state.analysis.runes) {
-				validate_attribute(attribute, node);
-
-				if (is_expression_attribute(attribute)) {
-					const expression = get_attribute_expression(attribute);
-					if (expression.type === 'SequenceExpression') {
-						let i = /** @type {number} */ (expression.start);
-						while (--i > 0) {
-							const char = context.state.analysis.source[i];
-							if (char === '(') break; // parenthesized sequence expressions are ok
-							if (char === '{') e.attribute_invalid_sequence_expression(expression);
-						}
-					}
-				}
-			}
-
-			validate_attribute_name(attribute);
-
-			if (attribute.name === 'slot') {
-				validate_slot_attribute(context, attribute, true);
-			}
-		}
-	}
-
-	context.next({
-		...context.state,
-		parent_element: null,
-		component_slots: new Set()
-	});
-}
-
-const react_attributes = new Map([
-	['className', 'class'],
-	['htmlFor', 'for']
-]);
-
-/**
- * @param {RegularElement | SvelteElement} node
- * @param {Context} context
- */
-function validate_element(node, context) {
-	let has_animate_directive = false;
-
-	/** @type {TransitionDirective | null} */
-	let in_transition = null;
-
-	/** @type {TransitionDirective | null} */
-	let out_transition = null;
-
-	for (const attribute of node.attributes) {
-		if (attribute.type === 'Attribute') {
-			const is_expression = is_expression_attribute(attribute);
-
-			if (context.state.analysis.runes) {
-				validate_attribute(attribute, node);
-
-				if (is_expression) {
-					const expression = get_attribute_expression(attribute);
-					if (expression.type === 'SequenceExpression') {
-						let i = /** @type {number} */ (expression.start);
-						while (--i > 0) {
-							const char = context.state.analysis.source[i];
-							if (char === '(') break; // parenthesized sequence expressions are ok
-							if (char === '{') e.attribute_invalid_sequence_expression(expression);
-						}
-					}
-				}
-			}
-
-			if (regex_illegal_attribute_character.test(attribute.name)) {
-				e.attribute_invalid_name(attribute, attribute.name);
-			}
-
-			if (attribute.name.startsWith('on') && attribute.name.length > 2) {
-				if (!is_expression) {
-					e.attribute_invalid_event_handler(attribute);
-				}
-
-				const value = get_attribute_expression(attribute);
-				if (
-					value.type === 'Identifier' &&
-					value.name === attribute.name &&
-					!context.state.scope.get(value.name)
-				) {
-					w.attribute_global_event_reference(attribute, attribute.name);
-				}
-			}
-
-			if (attribute.name === 'slot') {
-				/** @type {RegularElement | SvelteElement | Component | SvelteComponent | SvelteSelf | undefined} */
-				validate_slot_attribute(context, attribute);
-			}
-
-			if (attribute.name === 'is' && context.state.options.namespace !== 'foreign') {
-				w.attribute_avoid_is(attribute);
-			}
-
-			const correct_name = react_attributes.get(attribute.name);
-			if (correct_name) {
-				w.attribute_invalid_property_name(attribute, attribute.name, correct_name);
-			}
-
-			validate_attribute_name(attribute);
-		} else if (attribute.type === 'AnimateDirective') {
-			const parent = context.path.at(-2);
-			if (parent?.type !== 'EachBlock') {
-				e.animation_invalid_placement(attribute);
-			} else if (!parent.key) {
-				e.animation_missing_key(attribute);
-			} else if (
-				parent.body.nodes.filter(
-					(n) =>
-						n.type !== 'Comment' &&
-						n.type !== 'ConstTag' &&
-						(n.type !== 'Text' || n.data.trim() !== '')
-				).length > 1
-			) {
-				e.animation_invalid_placement(attribute);
-			}
-
-			if (has_animate_directive) {
-				e.animation_duplicate(attribute);
-			} else {
-				has_animate_directive = true;
-			}
-		} else if (attribute.type === 'TransitionDirective') {
-			const existing = /** @type {TransitionDirective | null} */ (
-				(attribute.intro && in_transition) || (attribute.outro && out_transition)
-			);
-
-			if (existing) {
-				const a = existing.intro ? (existing.outro ? 'transition' : 'in') : 'out';
-				const b = attribute.intro ? (attribute.outro ? 'transition' : 'in') : 'out';
-
-				if (a === b) {
-					e.transition_duplicate(attribute, a);
-				} else {
-					e.transition_conflict(attribute, a, b);
-				}
-			}
-
-			if (attribute.intro) in_transition = attribute;
-			if (attribute.outro) out_transition = attribute;
-		} else if (attribute.type === 'OnDirective') {
-			let has_passive_modifier = false;
-			let conflicting_passive_modifier = '';
-			for (const modifier of attribute.modifiers) {
-				if (!EventModifiers.includes(modifier)) {
-					const list = `${EventModifiers.slice(0, -1).join(', ')} or ${EventModifiers.at(-1)}`;
-					e.event_handler_invalid_modifier(attribute, list);
-				}
-				if (modifier === 'passive') {
-					has_passive_modifier = true;
-				} else if (modifier === 'nonpassive' || modifier === 'preventDefault') {
-					conflicting_passive_modifier = modifier;
-				}
-				if (has_passive_modifier && conflicting_passive_modifier) {
-					e.event_handler_invalid_modifier_combination(
-						attribute,
-						'passive',
-						conflicting_passive_modifier
-					);
-				}
-			}
-		}
-	}
-}
-
-/**
- * @param {Attribute} attribute
- */
-function validate_attribute_name(attribute) {
-	if (
-		attribute.name.includes(':') &&
-		!attribute.name.startsWith('xmlns:') &&
-		!attribute.name.startsWith('xlink:') &&
-		!attribute.name.startsWith('xml:')
-	) {
-		w.attribute_illegal_colon(attribute);
-	}
-}
-
-/**
- * @param {Context} context
- * @param {Attribute} attribute
- * @param {boolean} is_component
- */
-function validate_slot_attribute(context, attribute, is_component = false) {
-	const parent = context.path.at(-2);
-	let owner = undefined;
-
-	if (parent?.type === 'SnippetBlock') {
-		if (!is_text_attribute(attribute)) {
-			e.slot_attribute_invalid(attribute);
-		}
-		return;
-	}
-
-	let i = context.path.length;
-	while (i--) {
-		const ancestor = context.path[i];
-		if (
-			!owner &&
-			(ancestor.type === 'Component' ||
-				ancestor.type === 'SvelteComponent' ||
-				ancestor.type === 'SvelteSelf' ||
-				ancestor.type === 'SvelteElement' ||
-				(ancestor.type === 'RegularElement' && is_custom_element_node(ancestor)))
-		) {
-			owner = ancestor;
-		}
-	}
-
-	if (owner) {
-		if (!is_text_attribute(attribute)) {
-			e.slot_attribute_invalid(attribute);
-		}
-
-		if (
-			owner.type === 'Component' ||
-			owner.type === 'SvelteComponent' ||
-			owner.type === 'SvelteSelf'
-		) {
-			if (owner !== parent) {
-				e.slot_attribute_invalid_placement(attribute);
-			}
-
-			const name = attribute.value[0].data;
-
-			if (context.state.component_slots.has(name)) {
-				e.slot_attribute_duplicate(attribute, name, owner.name);
-			}
-
-			context.state.component_slots.add(name);
-
-			if (name === 'default') {
-				for (const node of owner.fragment.nodes) {
-					if (node.type === 'Text' && regex_only_whitespaces.test(node.data)) {
-						continue;
-					}
-
-					if (node.type === 'RegularElement' || node.type === 'SvelteFragment') {
-						if (node.attributes.some((a) => a.type === 'Attribute' && a.name === 'slot')) {
-							continue;
-						}
-					}
-
-					e.slot_default_duplicate(node);
-				}
-			}
-		}
-	} else if (!is_component) {
-		e.slot_attribute_invalid_placement(attribute);
-	}
-}
-
-/**
- * @param {Fragment | null | undefined} node
- * @param {Context} context
- */
-function validate_block_not_empty(node, context) {
-	if (!node) return;
-	// Assumption: If the block has zero elements, someone's in the middle of typing it out,
-	// so don't warn in that case because it would be distracting.
-	if (node.nodes.length === 1 && node.nodes[0].type === 'Text' && !node.nodes[0].raw.trim()) {
-		w.block_empty(node.nodes[0]);
-	}
-}
-
-/**
- * @type {Visitors}
- */
-const validation = {
-	ExpressionStatement(node, { state }) {
-		if (
-			node.expression.type === 'NewExpression' &&
-			node.expression.callee.type === 'Identifier' &&
-			node.expression.arguments.length === 1 &&
-			node.expression.arguments[0].type === 'ObjectExpression' &&
-			node.expression.arguments[0].properties.some(
-				(p) => p.type === 'Property' && p.key.type === 'Identifier' && p.key.name === 'target'
-			)
-		) {
-			const binding = state.scope.get(node.expression.callee.name);
-			if (binding?.kind === 'normal' && binding.declaration_kind === 'import') {
-				const declaration = /** @type {ImportDeclaration} */ (binding.initial);
-
-				// Theoretically someone could import a class from a `.svelte.js` module, but that's too rare to worry about
-				if (
-					/** @type {string} */ (declaration.source.value)?.endsWith('.svelte') &&
-					declaration.specifiers.find(
-						(s) => s.local.name === binding.node.name && s.type === 'ImportDefaultSpecifier'
-					)
-				) {
-					w.legacy_component_creation(node.expression);
-				}
-			}
-		}
-	},
-	MemberExpression(node, context) {
-		if (node.object.type === 'Identifier' && node.property.type === 'Identifier') {
-			const binding = context.state.scope.get(node.object.name);
-			if (binding?.kind === 'rest_prop' && node.property.name.startsWith('$$')) {
-				e.props_illegal_name(node.property);
-			}
-		}
-	},
-	AssignmentExpression(node, context) {
-		validate_assignment(node, node.left, context.state);
-	},
-	BindDirective(node, context) {
-		validate_no_const_assignment(node, node.expression, context.state.scope, true);
-
-		const assignee = node.expression;
-		const left = object(assignee);
-
-		if (left === null) {
-			e.bind_invalid_expression(node);
-		}
-
-		const binding = context.state.scope.get(left.name);
-
-		if (assignee.type === 'Identifier') {
-			// reassignment
-			if (
-				node.name !== 'this' && // bind:this also works for regular variables
-				(!binding ||
-					(binding.kind !== 'state' &&
-						binding.kind !== 'frozen_state' &&
-						binding.kind !== 'prop' &&
-						binding.kind !== 'bindable_prop' &&
-						binding.kind !== 'each' &&
-						binding.kind !== 'store_sub' &&
-						!binding.mutated))
-			) {
-				e.bind_invalid_value(node.expression);
-			}
-
-			if (binding?.kind === 'derived') {
-				e.constant_binding(node.expression, 'derived state');
-			}
-
-			if (context.state.analysis.runes && binding?.kind === 'each') {
-				e.each_item_invalid_assignment(node);
-			}
-
-			if (binding?.kind === 'snippet') {
-				e.snippet_parameter_assignment(node);
-			}
-		}
-
-		if (node.name === 'group') {
-			if (!binding) {
-				throw new Error('Cannot find declaration for bind:group');
-			}
-		}
-
-		if (binding?.kind === 'each' && binding.metadata?.inside_rest) {
-			w.bind_invalid_each_rest(binding.node, binding.node.name);
-		}
-
-		const parent = context.path.at(-1);
-
-		if (
-			parent?.type === 'RegularElement' ||
-			parent?.type === 'SvelteElement' ||
-			parent?.type === 'SvelteWindow' ||
-			parent?.type === 'SvelteDocument' ||
-			parent?.type === 'SvelteBody'
-		) {
-			if (context.state.options.namespace === 'foreign' && node.name !== 'this') {
-				e.bind_invalid_name(node, node.name, 'Foreign elements only support `bind:this`');
-			}
-
-			if (node.name in binding_properties) {
-				const property = binding_properties[node.name];
-				if (property.valid_elements && !property.valid_elements.includes(parent.name)) {
-					e.bind_invalid_target(
-						node,
-						node.name,
-						property.valid_elements.map((valid_element) => `<${valid_element}>`).join(', ')
-					);
-				}
-
-				if (property.invalid_elements && property.invalid_elements.includes(parent.name)) {
-					const valid_bindings = Object.entries(binding_properties)
-						.filter(([_, binding_property]) => {
-							return (
-								binding_property.valid_elements?.includes(parent.name) ||
-								(!binding_property.valid_elements &&
-									!binding_property.invalid_elements?.includes(parent.name))
-							);
-						})
-						.map(([property_name]) => property_name)
-						.sort();
-					e.bind_invalid_name(
-						node,
-						node.name,
-						`Possible bindings for <${parent.name}> are ${valid_bindings.join(', ')}`
-					);
-				}
-
-				if (parent.name === 'input' && node.name !== 'this') {
-					const type = /** @type {Attribute | undefined} */ (
-						parent.attributes.find((a) => a.type === 'Attribute' && a.name === 'type')
-					);
-					if (type && !is_text_attribute(type)) {
-						if (node.name !== 'value' || type.value === true) {
-							e.attribute_invalid_type(type);
-						}
-						return; // bind:value can handle dynamic `type` attributes
-					}
-
-					if (node.name === 'checked' && type?.value[0].data !== 'checkbox') {
-						e.bind_invalid_target(node, node.name, '<input type="checkbox">');
-					}
-
-					if (node.name === 'files' && type?.value[0].data !== 'file') {
-						e.bind_invalid_target(node, node.name, '<input type="file">');
-					}
-				}
-
-				if (parent.name === 'select' && node.name !== 'this') {
-					const multiple = parent.attributes.find(
-						(a) =>
-							a.type === 'Attribute' &&
-							a.name === 'multiple' &&
-							!is_text_attribute(a) &&
-							a.value !== true
-					);
-					if (multiple) {
-						e.attribute_invalid_multiple(multiple);
-					}
-				}
-
-				if (node.name === 'offsetWidth' && SVGElements.includes(parent.name)) {
-					e.bind_invalid_target(
-						node,
-						node.name,
-						`non-<svg> elements. Use 'clientWidth' for <svg> instead`
-					);
-				}
-
-				if (ContentEditableBindings.includes(node.name)) {
-					const contenteditable = /** @type {Attribute} */ (
-						parent.attributes.find((a) => a.type === 'Attribute' && a.name === 'contenteditable')
-					);
-					if (!contenteditable) {
-						e.attribute_contenteditable_missing(node);
-					} else if (!is_text_attribute(contenteditable) && contenteditable.value !== true) {
-						e.attribute_contenteditable_dynamic(contenteditable);
-					}
-				}
-			} else {
-				const match = fuzzymatch(node.name, Object.keys(binding_properties));
-				if (match) {
-					const property = binding_properties[match];
-					if (!property.valid_elements || property.valid_elements.includes(parent.name)) {
-						e.bind_invalid_name(node, node.name, `Did you mean '${match}'?`);
-					}
-				}
-				e.bind_invalid_name(node, node.name);
-			}
-		}
-	},
-	ExportDefaultDeclaration(node) {
-		e.module_illegal_default_export(node);
-	},
-	ConstTag(node, context) {
-		const parent = context.path.at(-1);
-		const grand_parent = context.path.at(-2);
-		if (
-			parent?.type !== 'Fragment' ||
-			(grand_parent?.type !== 'IfBlock' &&
-				grand_parent?.type !== 'SvelteFragment' &&
-				grand_parent?.type !== 'Component' &&
-				grand_parent?.type !== 'SvelteComponent' &&
-				grand_parent?.type !== 'EachBlock' &&
-				grand_parent?.type !== 'AwaitBlock' &&
-				grand_parent?.type !== 'SnippetBlock' &&
-				((grand_parent?.type !== 'RegularElement' && grand_parent?.type !== 'SvelteElement') ||
-					!grand_parent.attributes.some((a) => a.type === 'Attribute' && a.name === 'slot')))
-		) {
-			e.const_tag_invalid_placement(node);
-		}
-	},
-	ImportDeclaration(node, context) {
-		if (node.source.value === 'svelte' && context.state.analysis.runes) {
-			for (const specifier of node.specifiers) {
-				if (specifier.type === 'ImportSpecifier') {
-					if (
-						specifier.imported.name === 'beforeUpdate' ||
-						specifier.imported.name === 'afterUpdate'
-					) {
-						e.runes_mode_invalid_import(specifier, specifier.imported.name);
-					}
-				}
-			}
-		}
-	},
-	LetDirective(node, context) {
-		const parent = context.path.at(-1);
-		if (
-			parent === undefined ||
-			(parent.type !== 'Component' &&
-				parent.type !== 'RegularElement' &&
-				parent.type !== 'SlotElement' &&
-				parent.type !== 'SvelteElement' &&
-				parent.type !== 'SvelteComponent' &&
-				parent.type !== 'SvelteSelf' &&
-				parent.type !== 'SvelteFragment')
-		) {
-			e.let_directive_invalid_placement(node);
-		}
-	},
-	RegularElement(node, context) {
-		if (node.name === 'textarea' && node.fragment.nodes.length > 0) {
-			for (const attribute of node.attributes) {
-				if (attribute.type === 'Attribute' && attribute.name === 'value') {
-					e.textarea_invalid_content(node);
-				}
-			}
-		}
-
-		const binding = context.state.scope.get(node.name);
-		if (
-			binding !== null &&
-			binding.declaration_kind === 'import' &&
-			binding.references.length === 0
-		) {
-			w.component_name_lowercase(node, node.name);
-		}
-
-		validate_element(node, context);
-
-		if (context.state.parent_element) {
-			let past_parent = false;
-			let only_warn = false;
-
-			for (let i = context.path.length - 1; i >= 0; i--) {
-				const ancestor = context.path[i];
-
-				if (
-					ancestor.type === 'IfBlock' ||
-					ancestor.type === 'EachBlock' ||
-					ancestor.type === 'AwaitBlock' ||
-					ancestor.type === 'KeyBlock'
-				) {
-					// We're creating a separate template string inside blocks, which means client-side this would work
-					only_warn = true;
-				}
-
-				if (!past_parent) {
-					if (
-						ancestor.type === 'RegularElement' &&
-						ancestor.name === context.state.parent_element
-					) {
-						if (!is_tag_valid_with_parent(node.name, context.state.parent_element)) {
-							if (only_warn) {
-								w.node_invalid_placement_ssr(
-									node,
-									`\`<${node.name}>\``,
-									context.state.parent_element
-								);
-							} else {
-								e.node_invalid_placement(node, `\`<${node.name}>\``, context.state.parent_element);
-							}
-						}
-
-						past_parent = true;
-					}
-				} else if (ancestor.type === 'RegularElement') {
-					if (!is_tag_valid_with_ancestor(node.name, ancestor.name)) {
-						if (only_warn) {
-							w.node_invalid_placement_ssr(node, `\`<${node.name}>\``, ancestor.name);
-						} else {
-							e.node_invalid_placement(node, `\`<${node.name}>\``, ancestor.name);
-						}
-					}
-				} else if (
-					ancestor.type === 'Component' ||
-					ancestor.type === 'SvelteComponent' ||
-					ancestor.type === 'SvelteElement' ||
-					ancestor.type === 'SvelteSelf' ||
-					ancestor.type === 'SnippetBlock'
-				) {
-					break;
-				}
-			}
-		}
-
-		// Strip off any namespace from the beginning of the node name.
-		const node_name = node.name.replace(/[a-zA-Z-]*:/g, '');
-
-		if (
-			context.state.analysis.source[node.end - 2] === '/' &&
-			context.state.options.namespace !== 'foreign' &&
-			!VoidElements.includes(node_name) &&
-			!SVGElements.includes(node_name)
-		) {
-			w.element_invalid_self_closing_tag(node, node.name);
-		}
-
-		context.next({
-			...context.state,
-			parent_element: node.name
-		});
-	},
-	RenderTag(node, context) {
-		const callee = unwrap_optional(node.expression).callee;
-
-		node.metadata.dynamic =
-			callee.type !== 'Identifier' || context.state.scope.get(callee.name)?.kind !== 'normal';
-
-		context.state.analysis.uses_render_tags = true;
-
-		const raw_args = unwrap_optional(node.expression).arguments;
-		for (const arg of raw_args) {
-			if (arg.type === 'SpreadElement') {
-				e.render_tag_invalid_spread_argument(arg);
-			}
-		}
-
-		if (
-			callee.type === 'MemberExpression' &&
-			callee.property.type === 'Identifier' &&
-			['bind', 'apply', 'call'].includes(callee.property.name)
-		) {
-			e.render_tag_invalid_call_expression(node);
-		}
-	},
-	IfBlock(node, context) {
-		validate_block_not_empty(node.consequent, context);
-		validate_block_not_empty(node.alternate, context);
-	},
-	EachBlock(node, context) {
-		validate_block_not_empty(node.body, context);
-		validate_block_not_empty(node.fallback, context);
-	},
-	AwaitBlock(node, context) {
-		validate_block_not_empty(node.pending, context);
-		validate_block_not_empty(node.then, context);
-		validate_block_not_empty(node.catch, context);
-	},
-	KeyBlock(node, context) {
-		validate_block_not_empty(node.fragment, context);
-	},
-	SnippetBlock(node, context) {
-		validate_block_not_empty(node.body, context);
-
-		for (const arg of node.parameters) {
-			if (arg.type === 'RestElement') {
-				e.snippet_invalid_rest_parameter(arg);
-			}
-		}
-
-		context.next({ ...context.state, parent_element: null });
-
-		const { path } = context;
-		const parent = path.at(-2);
-		if (!parent) return;
-
-		if (
-			parent.type === 'Component' &&
-			parent.attributes.some(
-				(attribute) =>
-					(attribute.type === 'Attribute' || attribute.type === 'BindDirective') &&
-					attribute.name === node.expression.name
-			)
-		) {
-			e.snippet_shadowing_prop(node, node.expression.name);
-		}
-
-		if (node.expression.name !== 'children') return;
-
-		if (
-			parent.type === 'Component' ||
-			parent.type === 'SvelteComponent' ||
-			parent.type === 'SvelteSelf'
-		) {
-			if (
-				parent.fragment.nodes.some(
-					(node) => node.type !== 'SnippetBlock' && (node.type !== 'Text' || node.data.trim())
-				)
-			) {
-				e.snippet_conflict(node);
-			}
-		}
-	},
-	StyleDirective(node) {
-		if (node.modifiers.length > 1 || (node.modifiers.length && node.modifiers[0] !== 'important')) {
-			e.style_directive_invalid_modifier(node);
-		}
-	},
-	SvelteHead(node) {
-		const attribute = node.attributes[0];
-		if (attribute) {
-			e.svelte_head_illegal_attribute(attribute);
-		}
-	},
-	SvelteElement(node, context) {
-		validate_element(node, context);
-		context.next({
-			...context.state,
-			parent_element: null
-		});
-	},
-	SvelteFragment(node, context) {
-		const parent = context.path.at(-2);
-		if (parent?.type !== 'Component' && parent?.type !== 'SvelteComponent') {
-			e.svelte_fragment_invalid_placement(node);
-		}
-
-		for (const attribute of node.attributes) {
-			if (attribute.type === 'Attribute') {
-				if (attribute.name === 'slot') {
-					validate_slot_attribute(context, attribute);
-				}
-			} else if (attribute.type !== 'LetDirective') {
-				e.svelte_fragment_invalid_attribute(attribute);
-			}
-		}
-	},
-	SlotElement(node) {
-		for (const attribute of node.attributes) {
-			if (attribute.type === 'Attribute') {
-				if (attribute.name === 'name') {
-					if (!is_text_attribute(attribute)) {
-						e.slot_element_invalid_name(attribute);
-					}
-					const slot_name = attribute.value[0].data;
-					if (slot_name === 'default') {
-						e.slot_element_invalid_name_default(attribute);
-					}
-				}
-			} else if (attribute.type !== 'SpreadAttribute' && attribute.type !== 'LetDirective') {
-				e.slot_element_invalid_attribute(attribute);
-			}
-		}
-	},
-	Component: validate_component,
-	SvelteComponent: validate_component,
-	SvelteSelf: validate_component,
-	Text(node, context) {
-		if (!node.parent) return;
-		if (context.state.parent_element && regex_not_whitespace.test(node.data)) {
-			if (!is_tag_valid_with_parent('#text', context.state.parent_element)) {
-				e.node_invalid_placement(node, 'Text node', context.state.parent_element);
-			}
-		}
-	},
-	TitleElement(node) {
-		const attribute = node.attributes[0];
-		if (attribute) {
-			e.title_illegal_attribute(attribute);
-		}
-
-		const child = node.fragment.nodes.find((n) => n.type !== 'Text' && n.type !== 'ExpressionTag');
-		if (child) {
-			e.title_invalid_content(child);
-		}
-	},
-	UpdateExpression(node, context) {
-		validate_assignment(node, node.argument, context.state);
-	},
-	ExpressionTag(node, context) {
-		if (!node.parent) return;
-		if (context.state.parent_element) {
-			if (!is_tag_valid_with_parent('#text', context.state.parent_element)) {
-				e.node_invalid_placement(node, '`{expression}`', context.state.parent_element);
-			}
-		}
-	}
-};
-
-export const validation_legacy = merge(validation, a11y_validators, {
-	VariableDeclarator(node, { state }) {
-		ensure_no_module_import_conflict(node, state);
-
-		if (node.init?.type !== 'CallExpression') return;
-
-		const callee = node.init.callee;
-		if (
-			callee.type !== 'Identifier' ||
-			(callee.name !== '$state' && callee.name !== '$derived' && callee.name !== '$props')
-		) {
-			return;
-		}
-
-		if (state.scope.get(callee.name)?.kind !== 'store_sub') {
-			e.rune_invalid_usage(node.init, callee.name);
-		}
-	},
-	AssignmentExpression(node, { state, path }) {
-		const parent = path.at(-1);
-		if (parent && parent.type === 'ConstTag') return;
-		validate_assignment(node, node.left, state);
-	},
-	LabeledStatement(node, { path, state }) {
-		if (
-			node.label.name === '$' &&
-			(state.ast_type !== 'instance' || /** @type {SvelteNode} */ (path.at(-1)).type !== 'Program')
-		) {
-			w.reactive_declaration_invalid_placement(node);
-		}
-	},
-	UpdateExpression(node, { state }) {
-		validate_assignment(node, node.argument, state);
-	}
-});
-
-/**
- *
- * @param {Node} node
- * @param {Scope} scope
- * @param {string} name
- */
-function validate_export(node, scope, name) {
-	const binding = scope.get(name);
-	if (!binding) return;
-
-	if (binding.kind === 'derived') {
-		e.derived_invalid_export(node);
-	}
-
-	if ((binding.kind === 'state' || binding.kind === 'frozen_state') && binding.reassigned) {
-		e.state_invalid_export(node);
-	}
-}
-
-/**
- * @param {CallExpression} node
- * @param {Scope} scope
- * @param {SvelteNode[]} path
- * @returns
- */
-function validate_call_expression(node, scope, path) {
-	const rune = get_rune(node, scope);
-	if (rune === null) return;
-
-	const parent = /** @type {SvelteNode} */ (get_parent(path, -1));
-
-	if (rune === '$props') {
-		if (parent.type === 'VariableDeclarator') return;
-		e.props_invalid_placement(node);
-	}
-
-	if (rune === '$bindable') {
-		if (parent.type === 'AssignmentPattern' && path.at(-3)?.type === 'ObjectPattern') {
-			const declarator = path.at(-4);
-			if (
-				declarator?.type === 'VariableDeclarator' &&
-				get_rune(declarator.init, scope) === '$props'
-			) {
-				return;
-			}
-		}
-		e.bindable_invalid_location(node);
-	}
-
-	if (
-		rune === '$state' ||
-		rune === '$state.frozen' ||
-		rune === '$derived' ||
-		rune === '$derived.by'
-	) {
-		if (parent.type === 'VariableDeclarator') return;
-		if (parent.type === 'PropertyDefinition' && !parent.static && !parent.computed) return;
-		e.state_invalid_placement(node, rune);
-	}
-
-	if (rune === '$effect' || rune === '$effect.pre') {
-		if (parent.type !== 'ExpressionStatement') {
-			e.effect_invalid_placement(node);
-		}
-
-		if (node.arguments.length !== 1) {
-			e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
-		}
-	}
-
-	if (rune === '$effect.tracking') {
-		if (node.arguments.length !== 0) {
-			e.rune_invalid_arguments(node, rune);
-		}
-	}
-
-	if (rune === '$effect.root') {
-		if (node.arguments.length !== 1) {
-			e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
-		}
-	}
-
-	if (rune === '$inspect') {
-		if (node.arguments.length < 1) {
-			e.rune_invalid_arguments_length(node, rune, 'one or more arguments');
-		}
-	}
-
-	if (rune === '$inspect().with') {
-		if (node.arguments.length !== 1) {
-			e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
-		}
-	}
-
-	if (rune === '$state.snapshot') {
-		if (node.arguments.length !== 1) {
-			e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
-		}
-	}
-
-	if (rune === '$state.is') {
-		if (node.arguments.length !== 2) {
-			e.rune_invalid_arguments_length(node, rune, 'exactly two arguments');
-		}
-	}
-}
-
-/**
- * @param {VariableDeclarator} node
- * @param {AnalysisState} state
- */
-function ensure_no_module_import_conflict(node, state) {
-	const ids = extract_identifiers(node.id);
-	for (const id of ids) {
-		if (
-			state.scope === state.analysis.instance.scope &&
-			state.analysis.module.scope.get(id.name)?.declaration_kind === 'import'
-		) {
-			e.declaration_duplicate_module_import(node.id);
-		}
-	}
-}
-
-/**
- * @type {Visitors}
- */
-export const validation_runes_js = {
-	ImportDeclaration(node) {
-		if (typeof node.source.value === 'string' && node.source.value.startsWith('svelte/internal')) {
-			e.import_svelte_internal_forbidden(node);
-		}
-	},
-	ExportSpecifier(node, { state }) {
-		validate_export(node, state.scope, node.local.name);
-	},
-	ExportNamedDeclaration(node, { state, next }) {
-		if (node.declaration?.type !== 'VariableDeclaration') return;
-
-		// visit children, so bindings are correctly initialised
-		next();
-
-		for (const declarator of node.declaration.declarations) {
-			for (const id of extract_identifiers(declarator.id)) {
-				validate_export(node, state.scope, id.name);
-			}
-		}
-	},
-	CallExpression(node, { state, path }) {
-		if (get_rune(node, state.scope) === '$host') {
-			e.host_invalid_placement(node);
-		}
-		validate_call_expression(node, state.scope, path);
-	},
-	VariableDeclarator(node, { state }) {
-		const init = node.init;
-		const rune = get_rune(init, state.scope);
-
-		if (rune === null) return;
-
-		const args = /** @type {CallExpression} */ (init).arguments;
-
-		if ((rune === '$derived' || rune === '$derived.by') && args.length !== 1) {
-			e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
-		} else if (rune === '$state' && args.length > 1) {
-			e.rune_invalid_arguments_length(node, rune, 'zero or one arguments');
-		} else if (rune === '$props') {
-			e.props_invalid_placement(node);
-		} else if (rune === '$bindable') {
-			e.bindable_invalid_location(node);
-		}
-	},
-	AssignmentExpression(node, { state }) {
-		validate_assignment(node, node.left, state);
-	},
-	UpdateExpression(node, { state }) {
-		validate_assignment(node, node.argument, state);
-	},
-	ClassBody(node, context) {
-		/** @type {string[]} */
-		const private_derived_state = [];
-
-		for (const definition of node.body) {
-			if (
-				definition.type === 'PropertyDefinition' &&
-				definition.key.type === 'PrivateIdentifier' &&
-				definition.value?.type === 'CallExpression'
-			) {
-				const rune = get_rune(definition.value, context.state.scope);
-				if (rune === '$derived' || rune === '$derived.by') {
-					private_derived_state.push(definition.key.name);
-				}
-			}
-		}
-
-		context.next({
-			...context.state,
-			private_derived_state
-		});
-	},
-	ClassDeclaration(node, context) {
-		// In modules, we allow top-level module scope only, in components, we allow the component scope,
-		// which is function_depth of 1. With the exception of `new class` which is also not allowed at
-		// component scope level either.
-		const allowed_depth = context.state.ast_type === 'module' ? 0 : 1;
-
-		if (context.state.scope.function_depth > allowed_depth) {
-			w.perf_avoid_nested_class(node);
-		}
-	},
-	NewExpression(node, context) {
-		if (node.callee.type === 'ClassExpression' && context.state.scope.function_depth > 0) {
-			w.perf_avoid_inline_class(node);
-		}
-	},
-	Identifier(node, { path, state }) {
-		let i = path.length;
-		let parent = /** @type {Expression} */ (path[--i]);
-
-		if (
-			Runes.includes(/** @type {Runes[number]} */ (node.name)) &&
-			is_reference(node, parent) &&
-			state.scope.get(node.name) === null &&
-			state.scope.get(node.name.slice(1)) === null
-		) {
-			/** @type {Expression} */
-			let current = node;
-			let name = node.name;
-
-			while (parent.type === 'MemberExpression') {
-				if (parent.computed) e.rune_invalid_computed_property(parent);
-				name += `.${/** @type {Identifier} */ (parent.property).name}`;
-
-				current = parent;
-				parent = /** @type {Expression} */ (path[--i]);
-
-				if (!Runes.includes(/** @type {Runes[number]} */ (name))) {
-					if (name === '$effect.active') {
-						e.rune_renamed(parent, '$effect.active', '$effect.tracking');
-					}
-
-					e.rune_invalid_name(parent, name);
-				}
-			}
-
-			if (parent.type !== 'CallExpression') {
-				e.rune_missing_parentheses(current);
-			}
-		}
-	}
-};
-
-/**
- * @param {NodeLike} node
- * @param {Pattern | Expression} argument
- * @param {Scope} scope
- * @param {boolean} is_binding
- */
-function validate_no_const_assignment(node, argument, scope, is_binding) {
-	if (argument.type === 'ArrayPattern') {
-		for (const element of argument.elements) {
-			if (element) {
-				validate_no_const_assignment(node, element, scope, is_binding);
-			}
-		}
-	} else if (argument.type === 'ObjectPattern') {
-		for (const element of argument.properties) {
-			if (element.type === 'Property') {
-				validate_no_const_assignment(node, element.value, scope, is_binding);
-			}
-		}
-	} else if (argument.type === 'Identifier') {
-		const binding = scope.get(argument.name);
-		if (binding?.declaration_kind === 'const' && binding.kind !== 'each') {
-			// e.invalid_const_assignment(
-			// 	node,
-			// 	is_binding,
-			// 	// This takes advantage of the fact that we don't assign initial for let directives and then/catch variables.
-			// 	// If we start doing that, we need another property on the binding to differentiate, or give up on the more precise error message.
-			// 	binding.kind !== 'state' &&
-			// 		binding.kind !== 'frozen_state' &&
-			// 		(binding.kind !== 'normal' || !binding.initial)
-			// );
-
-			// TODO have a more specific error message for assignments to things like `{:then foo}`
-			const thing = 'constant';
-
-			if (is_binding) {
-				e.constant_binding(node, thing);
-			} else {
-				e.constant_assignment(node, thing);
-			}
-		}
-	}
-}
-
-/**
- * Validates that the opening of a control flow block is `{` immediately followed by the expected character.
- * In legacy mode whitespace is allowed inbetween. TODO remove once legacy mode is gone and move this into parser instead.
- * @param {{start: number; end: number}} node
- * @param {AnalysisState} state
- * @param {string} expected
- */
-function validate_opening_tag(node, state, expected) {
-	if (state.analysis.source[node.start + 1] !== expected) {
-		// avoid a sea of red and only mark the first few characters
-		e.block_unexpected_character({ start: node.start, end: node.start + 5 }, expected);
-	}
-}
-
-/**
- * @param {AssignmentExpression | UpdateExpression} node
- * @param {Pattern | Expression} argument
- * @param {AnalysisState} state
- */
-function validate_assignment(node, argument, state) {
-	validate_no_const_assignment(node, argument, state.scope, false);
-
-	if (argument.type === 'Identifier') {
-		const binding = state.scope.get(argument.name);
-
-		if (state.analysis.runes) {
-			if (binding?.kind === 'derived') {
-				e.constant_assignment(node, 'derived state');
-			}
-
-			if (binding?.kind === 'each') {
-				e.each_item_invalid_assignment(node);
-			}
-		}
-
-		if (binding?.kind === 'snippet') {
-			e.snippet_parameter_assignment(node);
-		}
-	}
-
-	let object = /** @type {Expression | Super} */ (argument);
-
-	/** @type {Expression | PrivateIdentifier | null} */
-	let property = null;
-
-	while (object.type === 'MemberExpression') {
-		property = object.property;
-		object = object.object;
-	}
-
-	if (object.type === 'ThisExpression' && property?.type === 'PrivateIdentifier') {
-		if (state.private_derived_state.includes(property.name)) {
-			e.constant_assignment(node, 'derived state');
-		}
-	}
-}
-
-export const validation_runes = merge(validation, a11y_validators, {
-	ImportDeclaration(node) {
-		if (typeof node.source.value === 'string' && node.source.value.startsWith('svelte/internal')) {
-			e.import_svelte_internal_forbidden(node);
-		}
-	},
-	LabeledStatement(node, { path }) {
-		if (node.label.name !== '$' || path.at(-1)?.type !== 'Program') return;
-		e.legacy_reactive_statement_invalid(node);
-	},
-	ExportNamedDeclaration(node, { state, next }) {
-		if (state.ast_type === 'module') {
-			if (node.declaration?.type !== 'VariableDeclaration') return;
-
-			// visit children, so bindings are correctly initialised
-			next();
-
-			for (const declarator of node.declaration.declarations) {
-				for (const id of extract_identifiers(declarator.id)) {
-					validate_export(node, state.scope, id.name);
-				}
-			}
-		} else {
-			if (node.declaration?.type !== 'VariableDeclaration') return;
-			if (node.declaration.kind !== 'let') return;
-			if (state.analysis.instance.scope !== state.scope) return;
-			e.legacy_export_invalid(node);
-		}
-	},
-	ExportSpecifier(node, { state }) {
-		if (state.ast_type === 'module') {
-			validate_export(node, state.scope, node.local.name);
-		}
-	},
-	CallExpression(node, { state, path }) {
-		const rune = get_rune(node, state.scope);
-		if (rune === '$bindable' && node.arguments.length > 1) {
-			e.rune_invalid_arguments_length(node, '$bindable', 'zero or one arguments');
-		} else if (rune === '$host') {
-			if (node.arguments.length > 0) {
-				e.rune_invalid_arguments(node, '$host');
-			} else if (state.ast_type === 'module' || !state.analysis.custom_element) {
-				e.host_invalid_placement(node);
-			}
-		}
-
-		validate_call_expression(node, state.scope, path);
-	},
-	EachBlock(node, { next, state }) {
-		validate_opening_tag(node, state, '#');
-
-		const context = node.context;
-		if (
-			context.type === 'Identifier' &&
-			(context.name === '$state' || context.name === '$derived')
-		) {
-			e.state_invalid_placement(node, context.name);
-		}
-		next({ ...state });
-	},
-	IfBlock(node, { state, path }) {
-		const parent = path.at(-1);
-		const expected =
-			path.at(-2)?.type === 'IfBlock' && parent?.type === 'Fragment' && parent.nodes.length === 1
-				? ':'
-				: '#';
-		validate_opening_tag(node, state, expected);
-	},
-	AwaitBlock(node, { state }) {
-		validate_opening_tag(node, state, '#');
-
-		if (node.value) {
-			const start = /** @type {number} */ (node.value.start);
-			const match = state.analysis.source.substring(start - 10, start).match(/{(\s*):then\s+$/);
-			if (match && match[1] !== '') {
-				e.block_unexpected_character({ start: start - 10, end: start }, ':');
-			}
-		}
-
-		if (node.error) {
-			const start = /** @type {number} */ (node.error.start);
-			const match = state.analysis.source.substring(start - 10, start).match(/{(\s*):catch\s+$/);
-			if (match && match[1] !== '') {
-				e.block_unexpected_character({ start: start - 10, end: start }, ':');
-			}
-		}
-	},
-	KeyBlock(node, { state }) {
-		validate_opening_tag(node, state, '#');
-	},
-	SnippetBlock(node, { state }) {
-		validate_opening_tag(node, state, '#');
-	},
-	ConstTag(node, { state }) {
-		validate_opening_tag(node, state, '@');
-	},
-	HtmlTag(node, { state }) {
-		validate_opening_tag(node, state, '@');
-	},
-	DebugTag(node, { state }) {
-		validate_opening_tag(node, state, '@');
-	},
-	RenderTag(node, { state }) {
-		validate_opening_tag(node, state, '@');
-	},
-	VariableDeclarator(node, { state }) {
-		ensure_no_module_import_conflict(node, state);
-
-		const init = node.init;
-		const rune = get_rune(init, state.scope);
-
-		if (rune === null) return;
-
-		const args = /** @type {CallExpression} */ (init).arguments;
-
-		// TODO some of this is duplicated with above, seems off
-		if ((rune === '$derived' || rune === '$derived.by') && args.length !== 1) {
-			e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
-		} else if (rune === '$state' && args.length > 1) {
-			e.rune_invalid_arguments_length(node, rune, 'zero or one arguments');
-		} else if (rune === '$props') {
-			if (state.has_props_rune) {
-				e.props_duplicate(node);
-			}
-
-			state.has_props_rune = true;
-
-			if (args.length > 0) {
-				e.rune_invalid_arguments(node, rune);
-			}
-
-			if (node.id.type !== 'ObjectPattern' && node.id.type !== 'Identifier') {
-				e.props_invalid_identifier(node);
-			}
-
-			if (state.scope !== state.analysis.instance.scope) {
-				e.props_invalid_placement(node);
-			}
-
-			if (node.id.type === 'ObjectPattern') {
-				for (const property of node.id.properties) {
-					if (property.type === 'Property') {
-						if (property.computed) {
-							e.props_invalid_pattern(property);
-						}
-
-						if (property.key.type === 'Identifier' && property.key.name.startsWith('$$')) {
-							e.props_illegal_name(property);
-						}
-
-						const value =
-							property.value.type === 'AssignmentPattern' ? property.value.left : property.value;
-
-						if (value.type !== 'Identifier') {
-							e.props_invalid_pattern(property);
-						}
-					}
-				}
-			}
-		}
-
-		if (rune === '$derived') {
-			const arg = args[0];
-			if (
-				arg.type === 'CallExpression' &&
-				(arg.callee.type === 'ArrowFunctionExpression' || arg.callee.type === 'FunctionExpression')
-			) {
-				w.derived_iife(node);
-			}
-		}
-	},
-	SlotElement(node, { state }) {
-		if (!state.analysis.custom_element) {
-			w.slot_element_deprecated(node);
-		}
-	},
-	OnDirective(node, { path }) {
-		const parent_type = path.at(-1)?.type;
-		// Don't warn on component events; these might not be under the author's control so the warning would be unactionable
-		if (parent_type === 'RegularElement' || parent_type === 'SvelteElement') {
-			w.event_directive_deprecated(node, node.name);
-		}
-	},
-	// TODO this is a code smell. need to refactor this stuff
-	ClassBody: validation_runes_js.ClassBody,
-	ClassDeclaration: validation_runes_js.ClassDeclaration,
-	Identifier: validation_runes_js.Identifier,
-	NewExpression: validation_runes_js.NewExpression
-});
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ArrowFunctionExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ArrowFunctionExpression.js
new file mode 100644
index 0000000000..adafebaee8
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ArrowFunctionExpression.js
@@ -0,0 +1,11 @@
+/** @import { ArrowFunctionExpression } from 'estree' */
+/** @import { Context } from '../types' */
+import { visit_function } from './shared/function.js';
+
+/**
+ * @param {ArrowFunctionExpression} node
+ * @param {Context} context
+ */
+export function ArrowFunctionExpression(node, context) {
+	visit_function(node, context);
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js
new file mode 100644
index 0000000000..54e5b46486
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AssignmentExpression.js
@@ -0,0 +1,28 @@
+/** @import { AssignmentExpression } from 'estree' */
+/** @import { SvelteNode } from '#compiler' */
+/** @import { Context } from '../types' */
+import { extract_identifiers, object } from '../../../utils/ast.js';
+import { validate_assignment } from './shared/utils.js';
+
+/**
+ * @param {AssignmentExpression} node
+ * @param {Context} context
+ */
+export function AssignmentExpression(node, context) {
+	validate_assignment(node, node.left, context.state);
+
+	if (context.state.reactive_statement) {
+		const id = node.left.type === 'MemberExpression' ? object(node.left) : node.left;
+		if (id !== null) {
+			for (const id of extract_identifiers(node.left)) {
+				const binding = context.state.scope.get(id.name);
+
+				if (binding) {
+					context.state.reactive_statement.assignments.add(binding);
+				}
+			}
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
new file mode 100644
index 0000000000..86637b1944
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -0,0 +1,213 @@
+/** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression } from 'estree' */
+/** @import { Attribute, DelegatedEvent, RegularElement } from '#compiler' */
+/** @import { Context } from '../types' */
+import { DelegatedEvents, is_capture_event } from '../../../../constants.js';
+import {
+	get_attribute_chunks,
+	get_attribute_expression,
+	is_event_attribute
+} from '../../../utils/ast.js';
+
+/**
+ * @param {Attribute} node
+ * @param {Context} context
+ */
+export function Attribute(node, context) {
+	context.next();
+
+	if (node.value !== true) {
+		for (const chunk of get_attribute_chunks(node.value)) {
+			if (chunk.type !== 'ExpressionTag') continue;
+
+			if (
+				chunk.expression.type === 'FunctionExpression' ||
+				chunk.expression.type === 'ArrowFunctionExpression'
+			) {
+				continue;
+			}
+
+			node.metadata.expression.has_state ||= chunk.metadata.expression.has_state;
+			node.metadata.expression.has_call ||= chunk.metadata.expression.has_call;
+		}
+
+		if (is_event_attribute(node)) {
+			const parent = context.path.at(-1);
+			if (parent?.type === 'RegularElement' || parent?.type === 'SvelteElement') {
+				context.state.analysis.uses_event_attributes = true;
+			}
+
+			const expression = get_attribute_expression(node);
+			const delegated_event = get_delegated_event(node.name.slice(2), expression, context);
+
+			if (delegated_event !== null) {
+				if (delegated_event.type === 'hoistable') {
+					delegated_event.function.metadata.hoistable = true;
+				}
+
+				node.metadata.delegated = delegated_event;
+			}
+		}
+	}
+}
+
+/**
+ * Checks if given event attribute can be delegated/hoisted and returns the corresponding info if so
+ * @param {string} event_name
+ * @param {Expression | null} handler
+ * @param {Context} context
+ * @returns {null | DelegatedEvent}
+ */
+function get_delegated_event(event_name, handler, context) {
+	// Handle delegated event handlers. Bail-out if not a delegated event.
+	if (!handler || !DelegatedEvents.includes(event_name)) {
+		return null;
+	}
+
+	// If we are not working with a RegularElement, then bail-out.
+	const element = context.path.at(-1);
+	if (element?.type !== 'RegularElement') {
+		return null;
+	}
+
+	/** @type {DelegatedEvent} */
+	const non_hoistable = { type: 'non-hoistable' };
+	/** @type {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression | null} */
+	let target_function = null;
+	let binding = null;
+
+	if (element.metadata.has_spread) {
+		// event attribute becomes part of the dynamic spread array
+		return non_hoistable;
+	}
+
+	if (handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') {
+		target_function = handler;
+	} else if (handler.type === 'Identifier') {
+		binding = context.state.scope.get(handler.name);
+
+		if (context.state.analysis.module.scope.references.has(handler.name)) {
+			// If a binding with the same name is referenced in the module scope (even if not declared there), bail-out
+			return non_hoistable;
+		}
+
+		if (binding != null) {
+			for (const { path } of binding.references) {
+				const parent = path.at(-1);
+				if (parent == null) return non_hoistable;
+
+				const grandparent = path.at(-2);
+
+				/** @type {RegularElement | null} */
+				let element = null;
+				/** @type {string | null} */
+				let event_name = null;
+				if (parent.type === 'OnDirective') {
+					element = /** @type {RegularElement} */ (grandparent);
+					event_name = parent.name;
+				} else if (
+					parent.type === 'ExpressionTag' &&
+					grandparent?.type === 'Attribute' &&
+					is_event_attribute(grandparent)
+				) {
+					element = /** @type {RegularElement} */ (path.at(-3));
+					const attribute = /** @type {Attribute} */ (grandparent);
+					event_name = get_attribute_event_name(attribute.name);
+				}
+
+				if (element && event_name) {
+					if (
+						element.type !== 'RegularElement' ||
+						element.metadata.has_spread ||
+						!DelegatedEvents.includes(event_name)
+					) {
+						return non_hoistable;
+					}
+				} else if (parent.type !== 'FunctionDeclaration' && parent.type !== 'VariableDeclarator') {
+					return non_hoistable;
+				}
+			}
+		}
+
+		// If the binding is exported, bail-out
+		if (context.state.analysis.exports.find((node) => node.name === handler.name)) {
+			return non_hoistable;
+		}
+
+		if (binding !== null && binding.initial !== null && !binding.mutated && !binding.is_called) {
+			const binding_type = binding.initial.type;
+
+			if (
+				binding_type === 'ArrowFunctionExpression' ||
+				binding_type === 'FunctionDeclaration' ||
+				binding_type === 'FunctionExpression'
+			) {
+				target_function = binding.initial;
+			}
+		}
+	}
+
+	// If we can't find a function, bail-out
+	if (target_function == null) return non_hoistable;
+	// If the function is marked as non-hoistable, bail-out
+	if (target_function.metadata.hoistable === 'impossible') return non_hoistable;
+	// If the function has more than one arg, then bail-out
+	if (target_function.params.length > 1) return non_hoistable;
+
+	const visited_references = new Set();
+	const scope = target_function.metadata.scope;
+	for (const [reference] of scope.references) {
+		// Bail-out if the arguments keyword is used
+		if (reference === 'arguments') return non_hoistable;
+		// Bail-out if references a store subscription
+		if (scope.get(`$${reference}`)?.kind === 'store_sub') return non_hoistable;
+
+		const binding = scope.get(reference);
+		const local_binding = context.state.scope.get(reference);
+
+		// If we are referencing a binding that is shadowed in another scope then bail out.
+		if (local_binding !== null && binding !== null && local_binding.node !== binding.node) {
+			return non_hoistable;
+		}
+
+		// If we have multiple references to the same store using $ prefix, bail out.
+		if (
+			binding !== null &&
+			binding.kind === 'store_sub' &&
+			visited_references.has(reference.slice(1))
+		) {
+			return non_hoistable;
+		}
+
+		// If we reference the index within an each block, then bail-out.
+		if (binding !== null && binding.initial?.type === 'EachBlock') return non_hoistable;
+
+		if (
+			binding !== null &&
+			// Bail-out if the the binding is a rest param
+			(binding.declaration_kind === 'rest_param' ||
+				// Bail-out if we reference anything from the EachBlock (for now) that mutates in non-runes mode,
+				(((!context.state.analysis.runes && binding.kind === 'each') ||
+					// or any normal not reactive bindings that are mutated.
+					binding.kind === 'normal' ||
+					// or any reactive imports (those are rewritten) (can only happen in legacy mode)
+					binding.kind === 'legacy_reactive_import') &&
+					binding.mutated))
+		) {
+			return non_hoistable;
+		}
+		visited_references.add(reference);
+	}
+
+	return { type: 'hoistable', function: target_function };
+}
+
+/**
+ * @param {string} event_name
+ */
+function get_attribute_event_name(event_name) {
+	if (is_capture_event(event_name, 'include-on')) {
+		event_name = event_name.slice(0, -7);
+	}
+	event_name = event_name.slice(2);
+	return event_name;
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js
new file mode 100644
index 0000000000..a7d804c194
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js
@@ -0,0 +1,42 @@
+/** @import { AwaitBlock } from '#compiler' */
+/** @import { Context } from '../types' */
+import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
+import * as e from '../../../errors.js';
+
+/**
+ * @param {AwaitBlock} node
+ * @param {Context} context
+ */
+export function AwaitBlock(node, context) {
+	validate_block_not_empty(node.pending, context);
+	validate_block_not_empty(node.then, context);
+	validate_block_not_empty(node.catch, context);
+
+	if (context.state.analysis.runes) {
+		validate_opening_tag(node, context.state, '#');
+
+		if (node.value) {
+			const start = /** @type {number} */ (node.value.start);
+			const match = context.state.analysis.source
+				.substring(start - 10, start)
+				.match(/{(\s*):then\s+$/);
+
+			if (match && match[1] !== '') {
+				e.block_unexpected_character({ start: start - 10, end: start }, ':');
+			}
+		}
+
+		if (node.error) {
+			const start = /** @type {number} */ (node.error.start);
+			const match = context.state.analysis.source
+				.substring(start - 10, start)
+				.match(/{(\s*):catch\s+$/);
+
+			if (match && match[1] !== '') {
+				e.block_unexpected_character({ start: start - 10, end: start }, ':');
+			}
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
new file mode 100644
index 0000000000..183958afa4
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -0,0 +1,234 @@
+/** @import { Attribute, BindDirective } from '#compiler' */
+/** @import { Context } from '../types' */
+import {
+	extract_all_identifiers_from_expression,
+	is_text_attribute,
+	object
+} from '../../../utils/ast.js';
+import { validate_no_const_assignment } from './shared/utils.js';
+import * as e from '../../../errors.js';
+import * as w from '../../../warnings.js';
+import { binding_properties } from '../../bindings.js';
+import { ContentEditableBindings, SVGElements } from '../../constants.js';
+import fuzzymatch from '../../1-parse/utils/fuzzymatch.js';
+
+/**
+ * @param {BindDirective} node
+ * @param {Context} context
+ */
+export function BindDirective(node, context) {
+	validate_no_const_assignment(node, node.expression, context.state.scope, true);
+
+	const assignee = node.expression;
+	const left = object(assignee);
+
+	if (left === null) {
+		e.bind_invalid_expression(node);
+	}
+
+	const binding = context.state.scope.get(left.name);
+
+	if (assignee.type === 'Identifier') {
+		// reassignment
+		if (
+			node.name !== 'this' && // bind:this also works for regular variables
+			(!binding ||
+				(binding.kind !== 'state' &&
+					binding.kind !== 'frozen_state' &&
+					binding.kind !== 'prop' &&
+					binding.kind !== 'bindable_prop' &&
+					binding.kind !== 'each' &&
+					binding.kind !== 'store_sub' &&
+					!binding.mutated))
+		) {
+			e.bind_invalid_value(node.expression);
+		}
+
+		if (binding?.kind === 'derived') {
+			e.constant_binding(node.expression, 'derived state');
+		}
+
+		if (context.state.analysis.runes && binding?.kind === 'each') {
+			e.each_item_invalid_assignment(node);
+		}
+
+		if (binding?.kind === 'snippet') {
+			e.snippet_parameter_assignment(node);
+		}
+	}
+
+	if (node.name === 'group') {
+		if (!binding) {
+			throw new Error('Cannot find declaration for bind:group');
+		}
+
+		// Traverse the path upwards and find all EachBlocks who are (indirectly) contributing to bind:group,
+		// i.e. one of their declarations is referenced in the binding. This allows group bindings to work
+		// correctly when referencing a variable declared in an EachBlock by using the index of the each block
+		// entries as keys.
+		const each_blocks = [];
+		const [keypath, expression_ids] = extract_all_identifiers_from_expression(node.expression);
+		let ids = expression_ids;
+
+		let i = context.path.length;
+		while (i--) {
+			const parent = context.path[i];
+
+			if (parent.type === 'EachBlock') {
+				const references = ids.filter((id) => parent.metadata.declarations.has(id.name));
+
+				if (references.length > 0) {
+					parent.metadata.contains_group_binding = true;
+
+					for (const binding of parent.metadata.references) {
+						binding.mutated = true;
+					}
+
+					each_blocks.push(parent);
+					ids = ids.filter((id) => !references.includes(id));
+					ids.push(...extract_all_identifiers_from_expression(parent.expression)[1]);
+				}
+			}
+		}
+
+		// The identifiers that make up the binding expression form they key for the binding group.
+		// If the same identifiers in the same order are used in another bind:group, they will be in the same group.
+		// (there's an edge case where `bind:group={a[i]}` will be in a different group than `bind:group={a[j]}` even when i == j,
+		//  but this is a limitation of the current static analysis we do; it also never worked in Svelte 4)
+		const bindings = expression_ids.map((id) => context.state.scope.get(id.name));
+		let group_name;
+
+		outer: for (const [[key, b], group] of context.state.analysis.binding_groups) {
+			if (b.length !== bindings.length || key !== keypath) continue;
+			for (let i = 0; i < bindings.length; i++) {
+				if (bindings[i] !== b[i]) continue outer;
+			}
+			group_name = group;
+		}
+
+		if (!group_name) {
+			group_name = context.state.scope.root.unique('binding_group');
+			context.state.analysis.binding_groups.set([keypath, bindings], group_name);
+		}
+
+		node.metadata = {
+			binding_group_name: group_name,
+			parent_each_blocks: each_blocks
+		};
+	}
+
+	if (binding?.kind === 'each' && binding.metadata?.inside_rest) {
+		w.bind_invalid_each_rest(binding.node, binding.node.name);
+	}
+
+	const parent = context.path.at(-1);
+
+	if (
+		parent?.type === 'RegularElement' ||
+		parent?.type === 'SvelteElement' ||
+		parent?.type === 'SvelteWindow' ||
+		parent?.type === 'SvelteDocument' ||
+		parent?.type === 'SvelteBody'
+	) {
+		if (context.state.options.namespace === 'foreign' && node.name !== 'this') {
+			e.bind_invalid_name(node, node.name, 'Foreign elements only support `bind:this`');
+		}
+
+		if (node.name in binding_properties) {
+			const property = binding_properties[node.name];
+			if (property.valid_elements && !property.valid_elements.includes(parent.name)) {
+				e.bind_invalid_target(
+					node,
+					node.name,
+					property.valid_elements.map((valid_element) => `<${valid_element}>`).join(', ')
+				);
+			}
+
+			if (property.invalid_elements && property.invalid_elements.includes(parent.name)) {
+				const valid_bindings = Object.entries(binding_properties)
+					.filter(([_, binding_property]) => {
+						return (
+							binding_property.valid_elements?.includes(parent.name) ||
+							(!binding_property.valid_elements &&
+								!binding_property.invalid_elements?.includes(parent.name))
+						);
+					})
+					.map(([property_name]) => property_name)
+					.sort();
+
+				e.bind_invalid_name(
+					node,
+					node.name,
+					`Possible bindings for <${parent.name}> are ${valid_bindings.join(', ')}`
+				);
+			}
+
+			if (parent.name === 'input' && node.name !== 'this') {
+				const type = /** @type {Attribute | undefined} */ (
+					parent.attributes.find((a) => a.type === 'Attribute' && a.name === 'type')
+				);
+
+				if (type && !is_text_attribute(type)) {
+					if (node.name !== 'value' || type.value === true) {
+						e.attribute_invalid_type(type);
+					}
+				} else {
+					if (node.name === 'checked' && type?.value[0].data !== 'checkbox') {
+						e.bind_invalid_target(node, node.name, '<input type="checkbox">');
+					}
+
+					if (node.name === 'files' && type?.value[0].data !== 'file') {
+						e.bind_invalid_target(node, node.name, '<input type="file">');
+					}
+				}
+			}
+
+			if (parent.name === 'select' && node.name !== 'this') {
+				const multiple = parent.attributes.find(
+					(a) =>
+						a.type === 'Attribute' &&
+						a.name === 'multiple' &&
+						!is_text_attribute(a) &&
+						a.value !== true
+				);
+
+				if (multiple) {
+					e.attribute_invalid_multiple(multiple);
+				}
+			}
+
+			if (node.name === 'offsetWidth' && SVGElements.includes(parent.name)) {
+				e.bind_invalid_target(
+					node,
+					node.name,
+					`non-<svg> elements. Use 'clientWidth' for <svg> instead`
+				);
+			}
+
+			if (ContentEditableBindings.includes(node.name)) {
+				const contenteditable = /** @type {Attribute} */ (
+					parent.attributes.find((a) => a.type === 'Attribute' && a.name === 'contenteditable')
+				);
+
+				if (!contenteditable) {
+					e.attribute_contenteditable_missing(node);
+				} else if (!is_text_attribute(contenteditable) && contenteditable.value !== true) {
+					e.attribute_contenteditable_dynamic(contenteditable);
+				}
+			}
+		} else {
+			const match = fuzzymatch(node.name, Object.keys(binding_properties));
+
+			if (match) {
+				const property = binding_properties[match];
+				if (!property.valid_elements || property.valid_elements.includes(parent.name)) {
+					e.bind_invalid_name(node, node.name, `Did you mean '${match}'?`);
+				}
+			}
+
+			e.bind_invalid_name(node, node.name);
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
new file mode 100644
index 0000000000..9d5a3ef5c1
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -0,0 +1,209 @@
+/** @import { CallExpression, VariableDeclarator } from 'estree' */
+/** @import { SvelteNode } from '#compiler' */
+/** @import { Context } from '../types' */
+import { get_rune } from '../../scope.js';
+import * as e from '../../../errors.js';
+import { get_parent, unwrap_optional } from '../../../utils/ast.js';
+import { is_safe_identifier } from './shared/utils.js';
+
+/**
+ * @param {CallExpression} node
+ * @param {Context} context
+ */
+export function CallExpression(node, context) {
+	const parent = /** @type {SvelteNode} */ (get_parent(context.path, -1));
+
+	const rune = get_rune(node, context.state.scope);
+
+	switch (rune) {
+		case null:
+			if (!is_safe_identifier(node.callee, context.state.scope)) {
+				context.state.analysis.needs_context = true;
+			}
+
+			break;
+
+		case '$bindable':
+			if (node.arguments.length > 1) {
+				e.rune_invalid_arguments_length(node, '$bindable', 'zero or one arguments');
+			}
+
+			if (
+				parent.type !== 'AssignmentPattern' ||
+				context.path.at(-3)?.type !== 'ObjectPattern' ||
+				context.path.at(-4)?.type !== 'VariableDeclarator' ||
+				get_rune(
+					/** @type {VariableDeclarator} */ (context.path.at(-4)).init,
+					context.state.scope
+				) !== '$props'
+			) {
+				e.bindable_invalid_location(node);
+			}
+
+			break;
+
+		case '$host':
+			if (node.arguments.length > 0) {
+				e.rune_invalid_arguments(node, '$host');
+			} else if (context.state.ast_type === 'module' || !context.state.analysis.custom_element) {
+				e.host_invalid_placement(node);
+			}
+
+			break;
+
+		case '$props':
+			if (context.state.has_props_rune) {
+				e.props_duplicate(node);
+			}
+
+			context.state.has_props_rune = true;
+
+			if (
+				parent.type !== 'VariableDeclarator' ||
+				context.state.ast_type !== 'instance' ||
+				context.state.scope !== context.state.analysis.instance.scope
+			) {
+				e.props_invalid_placement(node);
+			}
+
+			if (node.arguments.length > 0) {
+				e.rune_invalid_arguments(node, rune);
+			}
+
+			break;
+
+		case '$state':
+		case '$state.frozen':
+		case '$derived':
+		case '$derived.by':
+			if (
+				parent.type !== 'VariableDeclarator' &&
+				!(parent.type === 'PropertyDefinition' && !parent.static && !parent.computed)
+			) {
+				e.state_invalid_placement(node, rune);
+			}
+
+			if ((rune === '$derived' || rune === '$derived.by') && node.arguments.length !== 1) {
+				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
+			} else if (rune === '$state' && node.arguments.length > 1) {
+				e.rune_invalid_arguments_length(node, rune, 'zero or one arguments');
+			}
+
+			break;
+
+		case '$effect':
+		case '$effect.pre':
+			if (parent.type !== 'ExpressionStatement') {
+				e.effect_invalid_placement(node);
+			}
+
+			if (node.arguments.length !== 1) {
+				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
+			}
+
+			// `$effect` needs context because Svelte needs to know whether it should re-run
+			// effects that invalidate themselves, and that's determined by whether we're in runes mode
+			context.state.analysis.needs_context = true;
+
+			break;
+
+		case '$effect.tracking':
+			if (node.arguments.length !== 0) {
+				e.rune_invalid_arguments(node, rune);
+			}
+
+			break;
+
+		case '$effect.root':
+			if (node.arguments.length !== 1) {
+				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
+			}
+
+			break;
+
+		case '$inspect':
+			if (node.arguments.length < 1) {
+				e.rune_invalid_arguments_length(node, rune, 'one or more arguments');
+			}
+
+			break;
+
+		case '$inspect().with':
+			if (node.arguments.length !== 1) {
+				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
+			}
+
+			break;
+
+		case '$state.snapshot':
+			if (node.arguments.length !== 1) {
+				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
+			}
+
+			break;
+
+		case '$state.is':
+			if (node.arguments.length !== 2) {
+				e.rune_invalid_arguments_length(node, rune, 'exactly two arguments');
+			}
+
+			break;
+	}
+
+	if (context.state.expression && !is_known_safe_call(node, context)) {
+		context.state.expression.has_call = true;
+		context.state.expression.has_state = true;
+	}
+
+	if (context.state.render_tag) {
+		// Find out which of the render tag arguments contains this call expression
+		const arg_idx = unwrap_optional(context.state.render_tag.expression).arguments.findIndex(
+			(arg) => arg === node || context.path.includes(arg)
+		);
+
+		// -1 if this is the call expression of the render tag itself
+		if (arg_idx !== -1) {
+			context.state.render_tag.metadata.args_with_call_expression.add(arg_idx);
+		}
+	}
+
+	if (node.callee.type === 'Identifier') {
+		const binding = context.state.scope.get(node.callee.name);
+
+		if (binding !== null) {
+			binding.is_called = true;
+		}
+	}
+
+	// `$inspect(foo)` or `$derived(foo) should not trigger the `static-state-reference` warning
+	if (rune === '$inspect' || rune === '$derived') {
+		context.next({ ...context.state, function_depth: context.state.function_depth + 1 });
+	} else {
+		context.next();
+	}
+}
+
+/**
+ * @param {CallExpression} node
+ * @param {Context} context
+ * @returns {boolean}
+ */
+function is_known_safe_call(node, context) {
+	const callee = node.callee;
+
+	// String / Number / BigInt / Boolean casting calls
+	if (callee.type === 'Identifier') {
+		const name = callee.name;
+		const binding = context.state.scope.get(name);
+		if (
+			binding === null &&
+			(name === 'BigInt' || name === 'String' || name === 'Number' || name === 'Boolean')
+		) {
+			return true;
+		}
+	}
+
+	// TODO add more cases
+
+	return false;
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js
new file mode 100644
index 0000000000..d445af0ebf
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassBody.js
@@ -0,0 +1,27 @@
+/** @import { ClassBody } from 'estree' */
+/** @import { Context } from '../types' */
+import { get_rune } from '../../scope.js';
+
+/**
+ * @param {ClassBody} node
+ * @param {Context} context
+ */
+export function ClassBody(node, context) {
+	/** @type {string[]} */
+	const private_derived_state = [];
+
+	for (const definition of node.body) {
+		if (
+			definition.type === 'PropertyDefinition' &&
+			definition.key.type === 'PrivateIdentifier' &&
+			definition.value?.type === 'CallExpression'
+		) {
+			const rune = get_rune(definition.value, context.state.scope);
+			if (rune === '$derived' || rune === '$derived.by') {
+				private_derived_state.push(definition.key.name);
+			}
+		}
+	}
+
+	context.next({ ...context.state, private_derived_state });
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassDeclaration.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassDeclaration.js
new file mode 100644
index 0000000000..49be955eba
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassDeclaration.js
@@ -0,0 +1,20 @@
+/** @import { ClassDeclaration } from 'estree' */
+/** @import { Context } from '../types' */
+import * as w from '../../../warnings.js';
+
+/**
+ * @param {ClassDeclaration} node
+ * @param {Context} context
+ */
+export function ClassDeclaration(node, context) {
+	// In modules, we allow top-level module scope only, in components, we allow the component scope,
+	// which is function_depth of 1. With the exception of `new class` which is also not allowed at
+	// component scope level either.
+	const allowed_depth = context.state.ast_type === 'module' ? 0 : 1;
+
+	if (context.state.scope.function_depth > allowed_depth) {
+		w.perf_avoid_nested_class(node);
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassDirective.js
new file mode 100644
index 0000000000..ef87b3cbcf
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ClassDirective.js
@@ -0,0 +1,10 @@
+/** @import { ClassDirective } from '#compiler' */
+/** @import { Context } from '../types' */
+
+/**
+ * @param {ClassDirective} node
+ * @param {Context} context
+ */
+export function ClassDirective(node, context) {
+	context.next({ ...context.state, expression: node.metadata.expression });
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Component.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Component.js
new file mode 100644
index 0000000000..ea5a719b92
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Component.js
@@ -0,0 +1,20 @@
+/** @import { Component } from '#compiler' */
+/** @import { Context } from '../types' */
+import { visit_component } from './shared/component.js';
+
+/**
+ * @param {Component} node
+ * @param {Context} context
+ */
+export function Component(node, context) {
+	const binding = context.state.scope.get(
+		node.name.includes('.') ? node.name.slice(0, node.name.indexOf('.')) : node.name
+	);
+
+	node.metadata.dynamic =
+		context.state.analysis.runes && // Svelte 4 required you to use svelte:component to switch components
+		binding !== null &&
+		(binding.kind !== 'normal' || node.name.includes('.'));
+
+	visit_component(node, context);
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js
new file mode 100644
index 0000000000..3045688a08
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ConstTag.js
@@ -0,0 +1,34 @@
+/** @import { ConstTag } from '#compiler' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+import { validate_opening_tag } from './shared/utils.js';
+
+/**
+ * @param {ConstTag} node
+ * @param {Context} context
+ */
+export function ConstTag(node, context) {
+	if (context.state.analysis.runes) {
+		validate_opening_tag(node, context.state, '@');
+	}
+
+	const parent = context.path.at(-1);
+	const grand_parent = context.path.at(-2);
+
+	if (
+		parent?.type !== 'Fragment' ||
+		(grand_parent?.type !== 'IfBlock' &&
+			grand_parent?.type !== 'SvelteFragment' &&
+			grand_parent?.type !== 'Component' &&
+			grand_parent?.type !== 'SvelteComponent' &&
+			grand_parent?.type !== 'EachBlock' &&
+			grand_parent?.type !== 'AwaitBlock' &&
+			grand_parent?.type !== 'SnippetBlock' &&
+			((grand_parent?.type !== 'RegularElement' && grand_parent?.type !== 'SvelteElement') ||
+				!grand_parent.attributes.some((a) => a.type === 'Attribute' && a.name === 'slot')))
+	) {
+		e.const_tag_invalid_placement(node);
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/DebugTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/DebugTag.js
new file mode 100644
index 0000000000..4f5e6c10d0
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/DebugTag.js
@@ -0,0 +1,15 @@
+/** @import { DebugTag } from '#compiler' */
+/** @import { Context } from '../types' */
+import { validate_opening_tag } from './shared/utils.js';
+
+/**
+ * @param {DebugTag} node
+ * @param {Context} context
+ */
+export function DebugTag(node, context) {
+	if (context.state.analysis.runes) {
+		validate_opening_tag(node, context.state, '@');
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
new file mode 100644
index 0000000000..2e09c756e3
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
@@ -0,0 +1,29 @@
+/** @import { EachBlock } from '#compiler' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
+
+/**
+ * @param {EachBlock} node
+ * @param {Context} context
+ */
+export function EachBlock(node, context) {
+	validate_opening_tag(node, context.state, '#');
+
+	validate_block_not_empty(node.body, context);
+	validate_block_not_empty(node.fallback, context);
+
+	const id = node.context;
+	if (id.type === 'Identifier' && (id.name === '$state' || id.name === '$derived')) {
+		// TODO weird that this is necessary
+		e.state_invalid_placement(node, id.name);
+	}
+
+	if (node.key) {
+		// treat `{#each items as item, i (i)}` as a normal indexed block, everything else as keyed
+		node.metadata.keyed =
+			node.key.type !== 'Identifier' || !node.index || node.key.name !== node.index;
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportDefaultDeclaration.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportDefaultDeclaration.js
new file mode 100644
index 0000000000..0a7461f155
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportDefaultDeclaration.js
@@ -0,0 +1,15 @@
+/** @import { ExportDefaultDeclaration, Node } from 'estree' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+
+/**
+ * @param {ExportDefaultDeclaration} node
+ * @param {Context} context
+ */
+export function ExportDefaultDeclaration(node, context) {
+	if (context.state.ast_type === 'instance') {
+		e.module_illegal_default_export(node);
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
new file mode 100644
index 0000000000..694c047b9c
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
@@ -0,0 +1,92 @@
+/** @import { ExportNamedDeclaration, Identifier, Node } from 'estree' */
+/** @import { Binding } from '#compiler' */
+/** @import { Context } from '../types' */
+/** @import { Scope } from '../../scope' */
+import * as e from '../../../errors.js';
+import { extract_identifiers } from '../../../utils/ast.js';
+
+/**
+ * @param {ExportNamedDeclaration} node
+ * @param {Context} context
+ */
+export function ExportNamedDeclaration(node, context) {
+	// visit children, so bindings are correctly initialised
+	context.next();
+
+	if (node.declaration?.type === 'VariableDeclaration') {
+		// in runes mode, forbid `export let`
+		if (
+			context.state.analysis.runes &&
+			context.state.ast_type === 'instance' &&
+			node.declaration.kind === 'let'
+		) {
+			e.legacy_export_invalid(node);
+		}
+
+		for (const declarator of node.declaration.declarations) {
+			for (const id of extract_identifiers(declarator.id)) {
+				const binding = context.state.scope.get(id.name);
+				if (!binding) continue;
+
+				if (binding.kind === 'derived') {
+					e.derived_invalid_export(node);
+				}
+
+				if ((binding.kind === 'state' || binding.kind === 'frozen_state') && binding.reassigned) {
+					e.state_invalid_export(node);
+				}
+			}
+		}
+	}
+
+	if (context.state.ast_type === 'instance' && !context.state.analysis.runes) {
+		context.state.analysis.needs_props = true;
+
+		if (node.declaration) {
+			if (
+				node.declaration.type === 'FunctionDeclaration' ||
+				node.declaration.type === 'ClassDeclaration'
+			) {
+				context.state.analysis.exports.push({
+					name: /** @type {Identifier} */ (node.declaration.id).name,
+					alias: null
+				});
+			} else if (node.declaration.type === 'VariableDeclaration') {
+				if (node.declaration.kind === 'const') {
+					for (const declarator of node.declaration.declarations) {
+						for (const node of extract_identifiers(declarator.id)) {
+							context.state.analysis.exports.push({ name: node.name, alias: null });
+						}
+					}
+				} else {
+					for (const declarator of node.declaration.declarations) {
+						for (const id of extract_identifiers(declarator.id)) {
+							const binding = /** @type {Binding} */ (context.state.scope.get(id.name));
+							binding.kind = 'bindable_prop';
+						}
+					}
+				}
+			}
+		}
+	}
+
+	if (context.state.analysis.runes) {
+		if (node.declaration && context.state.ast_type === 'instance') {
+			if (
+				node.declaration.type === 'FunctionDeclaration' ||
+				node.declaration.type === 'ClassDeclaration'
+			) {
+				context.state.analysis.exports.push({
+					name: /** @type {Identifier} */ (node.declaration.id).name,
+					alias: null
+				});
+			} else if (node.declaration.kind === 'const') {
+				for (const declarator of node.declaration.declarations) {
+					for (const node of extract_identifiers(declarator.id)) {
+						context.state.analysis.exports.push({ name: node.name, alias: null });
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
new file mode 100644
index 0000000000..4660a450d6
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
@@ -0,0 +1,66 @@
+/** @import { ExportSpecifier, Node } from 'estree' */
+/** @import { Binding } from '#compiler' */
+/** @import { Context } from '../types' */
+/** @import { Scope } from '../../scope' */
+import * as e from '../../../errors.js';
+
+/**
+ * @param {ExportSpecifier} node
+ * @param {Context} context
+ */
+export function ExportSpecifier(node, context) {
+	if (context.state.ast_type === 'instance') {
+		if (context.state.analysis.runes) {
+			context.state.analysis.exports.push({
+				name: node.local.name,
+				alias: node.exported.name
+			});
+
+			const binding = context.state.scope.get(node.local.name);
+			if (binding) binding.reassigned = true;
+		} else {
+			context.state.analysis.needs_props = true;
+
+			const binding = /** @type {Binding} */ (context.state.scope.get(node.local.name));
+
+			if (
+				binding !== null &&
+				(binding.kind === 'state' ||
+					binding.kind === 'frozen_state' ||
+					(binding.kind === 'normal' &&
+						(binding.declaration_kind === 'let' || binding.declaration_kind === 'var')))
+			) {
+				binding.kind = 'bindable_prop';
+				if (node.exported.name !== node.local.name) {
+					binding.prop_alias = node.exported.name;
+				}
+			} else {
+				context.state.analysis.exports.push({
+					name: node.local.name,
+					alias: node.exported.name
+				});
+			}
+		}
+	} else {
+		validate_export(node, context.state.scope, node.local.name);
+	}
+}
+
+/**
+ *
+ * @param {Node} node
+ * @param {Scope} scope
+ * @param {string} name
+ */
+function validate_export(node, scope, name) {
+	const binding = scope.get(name);
+	if (!binding) return;
+
+	if (binding.kind === 'derived') {
+		e.derived_invalid_export(node);
+	}
+
+	if ((binding.kind === 'state' || binding.kind === 'frozen_state') && binding.reassigned) {
+		e.state_invalid_export(node);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionStatement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionStatement.js
new file mode 100644
index 0000000000..afb4913bfb
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionStatement.js
@@ -0,0 +1,38 @@
+/** @import { ExpressionStatement, ImportDeclaration } from 'estree' */
+/** @import { Context } from '../types' */
+import * as w from '../../../warnings.js';
+
+/**
+ * @param {ExpressionStatement} node
+ * @param {Context} context
+ */
+export function ExpressionStatement(node, context) {
+	// warn on `new Component({ target: ... })` if imported from a `.svelte` file
+	if (
+		node.expression.type === 'NewExpression' &&
+		node.expression.callee.type === 'Identifier' &&
+		node.expression.arguments.length === 1 &&
+		node.expression.arguments[0].type === 'ObjectExpression' &&
+		node.expression.arguments[0].properties.some(
+			(p) => p.type === 'Property' && p.key.type === 'Identifier' && p.key.name === 'target'
+		)
+	) {
+		const binding = context.state.scope.get(node.expression.callee.name);
+
+		if (binding?.kind === 'normal' && binding.declaration_kind === 'import') {
+			const declaration = /** @type {ImportDeclaration} */ (binding.initial);
+
+			// Theoretically someone could import a class from a `.svelte.js` module, but that's too rare to worry about
+			if (
+				/** @type {string} */ (declaration.source.value).endsWith('.svelte') &&
+				declaration.specifiers.find(
+					(s) => s.local.name === binding.node.name && s.type === 'ImportDefaultSpecifier'
+				)
+			) {
+				w.legacy_component_creation(node.expression);
+			}
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
new file mode 100644
index 0000000000..813f9f0905
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
@@ -0,0 +1,18 @@
+/** @import { ExpressionTag } from '#compiler' */
+/** @import { Context } from '../types' */
+import { is_tag_valid_with_parent } from '../../../../html-tree-validation.js';
+import * as e from '../../../errors.js';
+
+/**
+ * @param {ExpressionTag} node
+ * @param {Context} context
+ */
+export function ExpressionTag(node, context) {
+	if (node.parent && context.state.parent_element) {
+		if (!is_tag_valid_with_parent('#text', context.state.parent_element)) {
+			e.node_invalid_placement(node, '`{expression}`', context.state.parent_element);
+		}
+	}
+
+	context.next({ ...context.state, expression: node.metadata.expression });
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/FunctionDeclaration.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/FunctionDeclaration.js
new file mode 100644
index 0000000000..6d7074628e
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/FunctionDeclaration.js
@@ -0,0 +1,11 @@
+/** @import { FunctionDeclaration } from 'estree' */
+/** @import { Context } from '../types' */
+import { visit_function } from './shared/function.js';
+
+/**
+ * @param {FunctionDeclaration} node
+ * @param {Context} context
+ */
+export function FunctionDeclaration(node, context) {
+	visit_function(node, context);
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/FunctionExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/FunctionExpression.js
new file mode 100644
index 0000000000..2c6db9c5b0
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/FunctionExpression.js
@@ -0,0 +1,11 @@
+/** @import { FunctionExpression } from 'estree' */
+/** @import { Context } from '../types' */
+import { visit_function } from './shared/function.js';
+
+/**
+ * @param {FunctionExpression} node
+ * @param {Context} context
+ */
+export function FunctionExpression(node, context) {
+	visit_function(node, context);
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
new file mode 100644
index 0000000000..ecac6446ae
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
@@ -0,0 +1,15 @@
+/** @import { HtmlTag } from '#compiler' */
+/** @import { Context } from '../types' */
+import { validate_opening_tag } from './shared/utils.js';
+
+/**
+ * @param {HtmlTag} node
+ * @param {Context} context
+ */
+export function HtmlTag(node, context) {
+	if (context.state.analysis.runes) {
+		validate_opening_tag(node, context.state, '@');
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
new file mode 100644
index 0000000000..2f586c9207
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -0,0 +1,154 @@
+/** @import { Expression, Identifier } from 'estree' */
+/** @import { SvelteNode } from '#compiler' */
+/** @import { Context } from '../types' */
+import is_reference from 'is-reference';
+import { Runes } from '../../constants.js';
+import { should_proxy_or_freeze } from '../../3-transform/client/utils.js';
+import * as e from '../../../errors.js';
+import * as w from '../../../warnings.js';
+
+/**
+ * @param {Identifier} node
+ * @param {Context} context
+ */
+export function Identifier(node, context) {
+	let i = context.path.length;
+	let parent = /** @type {Expression} */ (context.path[--i]);
+
+	if (!is_reference(node, parent)) {
+		return;
+	}
+
+	// If we are using arguments outside of a function, then throw an error
+	if (
+		node.name === 'arguments' &&
+		!context.path.some((n) => n.type === 'FunctionDeclaration' || n.type === 'FunctionExpression')
+	) {
+		e.invalid_arguments_usage(node);
+	}
+
+	// `$$slots` exists even in runes mode
+	if (node.name === '$$slots') {
+		context.state.analysis.uses_slots = true;
+	}
+
+	if (context.state.analysis.runes) {
+		if (
+			Runes.includes(/** @type {Runes[number]} */ (node.name)) &&
+			context.state.scope.get(node.name) === null &&
+			context.state.scope.get(node.name.slice(1)) === null
+		) {
+			/** @type {Expression} */
+			let current = node;
+			let name = node.name;
+
+			while (parent.type === 'MemberExpression') {
+				if (parent.computed) e.rune_invalid_computed_property(parent);
+				name += `.${/** @type {Identifier} */ (parent.property).name}`;
+
+				current = parent;
+				parent = /** @type {Expression} */ (context.path[--i]);
+
+				if (!Runes.includes(/** @type {Runes[number]} */ (name))) {
+					if (name === '$effect.active') {
+						e.rune_renamed(parent, '$effect.active', '$effect.tracking');
+					}
+
+					e.rune_invalid_name(parent, name);
+				}
+			}
+
+			if (parent.type !== 'CallExpression') {
+				e.rune_missing_parentheses(current);
+			}
+		}
+	}
+
+	let binding = context.state.scope.get(node.name);
+
+	if (!context.state.analysis.runes) {
+		if (node.name === '$$props') {
+			context.state.analysis.uses_props = true;
+		}
+
+		if (node.name === '$$restProps') {
+			context.state.analysis.uses_rest_props = true;
+		}
+
+		if (
+			binding?.kind === 'normal' &&
+			((binding.scope === context.state.instance_scope &&
+				binding.declaration_kind !== 'function') ||
+				binding.declaration_kind === 'import')
+		) {
+			if (binding.declaration_kind === 'import') {
+				if (
+					binding.mutated &&
+					// TODO could be more fine-grained - not every mention in the template implies a state binding
+					(context.state.reactive_statement || context.state.ast_type === 'template') &&
+					parent.type === 'MemberExpression'
+				) {
+					binding.kind = 'legacy_reactive_import';
+				}
+			} else if (
+				binding.mutated &&
+				// TODO could be more fine-grained - not every mention in the template implies a state binding
+				(context.state.reactive_statement || context.state.ast_type === 'template')
+			) {
+				binding.kind = 'state';
+			} else if (
+				context.state.reactive_statement &&
+				parent.type === 'AssignmentExpression' &&
+				parent.left === binding.node
+			) {
+				binding.kind = 'derived';
+			}
+		} else if (binding?.kind === 'each' && binding.mutated) {
+			// Ensure that the array is marked as reactive even when only its entries are mutated
+			let i = context.path.length;
+			while (i--) {
+				const ancestor = context.path[i];
+				if (
+					ancestor.type === 'EachBlock' &&
+					context.state.analysis.template.scopes.get(ancestor)?.declarations.get(node.name) ===
+						binding
+				) {
+					for (const binding of ancestor.metadata.references) {
+						if (binding.kind === 'normal') {
+							binding.kind = 'state';
+						}
+					}
+					break;
+				}
+			}
+		}
+	}
+
+	if (binding && binding.kind !== 'normal') {
+		if (context.state.expression) {
+			context.state.expression.dependencies.add(binding);
+			context.state.expression.has_state = true;
+		}
+
+		if (
+			context.state.analysis.runes &&
+			node !== binding.node &&
+			context.state.function_depth === binding.scope.function_depth &&
+			// If we have $state that can be proxied or frozen and isn't re-assigned, then that means
+			// it's likely not using a primitive value and thus this warning isn't that helpful.
+			((binding.kind === 'state' &&
+				(binding.reassigned ||
+					(binding.initial?.type === 'CallExpression' &&
+						binding.initial.arguments.length === 1 &&
+						binding.initial.arguments[0].type !== 'SpreadElement' &&
+						!should_proxy_or_freeze(binding.initial.arguments[0], context.state.scope)))) ||
+				binding.kind === 'frozen_state' ||
+				binding.kind === 'derived') &&
+			// We're only concerned with reads here
+			(parent.type !== 'AssignmentExpression' || parent.left !== node) &&
+			parent.type !== 'UpdateExpression'
+		) {
+			w.state_referenced_locally(node);
+		}
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js
new file mode 100644
index 0000000000..f7b6641c44
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js
@@ -0,0 +1,26 @@
+/** @import { IfBlock } from '#compiler' */
+/** @import { Context } from '../types' */
+import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
+
+/**
+ * @param {IfBlock} node
+ * @param {Context} context
+ */
+export function IfBlock(node, context) {
+	validate_block_not_empty(node.consequent, context);
+	validate_block_not_empty(node.alternate, context);
+
+	if (context.state.analysis.runes) {
+		const parent = context.path.at(-1);
+		const expected =
+			context.path.at(-2)?.type === 'IfBlock' &&
+			parent?.type === 'Fragment' &&
+			parent.nodes.length === 1
+				? ':'
+				: '#';
+
+		validate_opening_tag(node, context.state, expected);
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ImportDeclaration.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ImportDeclaration.js
new file mode 100644
index 0000000000..eb57fee264
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ImportDeclaration.js
@@ -0,0 +1,30 @@
+/** @import { ImportDeclaration } from 'estree' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+
+/**
+ * @param {ImportDeclaration} node
+ * @param {Context} context
+ */
+export function ImportDeclaration(node, context) {
+	if (context.state.analysis.runes) {
+		const source = /** @type {string} */ (node.source.value);
+
+		if (source.startsWith('svelte/internal')) {
+			e.import_svelte_internal_forbidden(node);
+		}
+
+		if (source === 'svelte') {
+			for (const specifier of node.specifiers) {
+				if (specifier.type === 'ImportSpecifier') {
+					if (
+						specifier.imported.name === 'beforeUpdate' ||
+						specifier.imported.name === 'afterUpdate'
+					) {
+						e.runes_mode_invalid_import(specifier, specifier.imported.name);
+					}
+				}
+			}
+		}
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js
new file mode 100644
index 0000000000..618ce41493
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js
@@ -0,0 +1,17 @@
+/** @import { KeyBlock } from '#compiler' */
+/** @import { Context } from '../types' */
+import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
+
+/**
+ * @param {KeyBlock} node
+ * @param {Context} context
+ */
+export function KeyBlock(node, context) {
+	validate_block_not_empty(node.fragment, context);
+
+	if (context.state.analysis.runes) {
+		validate_opening_tag(node, context.state, '#');
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/LabeledStatement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/LabeledStatement.js
new file mode 100644
index 0000000000..9be8c161d4
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/LabeledStatement.js
@@ -0,0 +1,104 @@
+/** @import { Expression, LabeledStatement } from 'estree' */
+/** @import { ReactiveStatement, SvelteNode } from '#compiler' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+import { extract_identifiers, object } from '../../../utils/ast.js';
+import * as w from '../../../warnings.js';
+
+/**
+ * @param {LabeledStatement} node
+ * @param {Context} context
+ */
+export function LabeledStatement(node, context) {
+	if (node.label.name === '$') {
+		const parent = /** @type {SvelteNode} */ (context.path.at(-1));
+
+		const is_reactive_statement =
+			context.state.ast_type === 'instance' && parent.type === 'Program';
+
+		if (is_reactive_statement) {
+			if (context.state.analysis.runes) {
+				e.legacy_reactive_statement_invalid(node);
+			}
+
+			// Find all dependencies of this `$: {...}` statement
+			/** @type {ReactiveStatement} */
+			const reactive_statement = {
+				assignments: new Set(),
+				dependencies: []
+			};
+
+			context.next({
+				...context.state,
+				reactive_statement,
+				function_depth: context.state.scope.function_depth + 1
+			});
+
+			// Every referenced binding becomes a dependency, unless it's on
+			// the left-hand side of an `=` assignment
+			for (const [name, nodes] of context.state.scope.references) {
+				const binding = context.state.scope.get(name);
+				if (binding === null) continue;
+
+				for (const { node, path } of nodes) {
+					/** @type {Expression} */
+					let left = node;
+
+					let i = path.length - 1;
+					let parent = /** @type {Expression} */ (path.at(i));
+					while (parent.type === 'MemberExpression') {
+						left = parent;
+						parent = /** @type {Expression} */ (path.at(--i));
+					}
+
+					if (
+						parent.type === 'AssignmentExpression' &&
+						parent.operator === '=' &&
+						parent.left === left
+					) {
+						continue;
+					}
+
+					reactive_statement.dependencies.push(binding);
+					break;
+				}
+			}
+
+			context.state.reactive_statements.set(node, reactive_statement);
+
+			if (
+				reactive_statement.dependencies.length &&
+				reactive_statement.dependencies.every(
+					(d) => d.scope === context.state.analysis.module.scope && d.declaration_kind !== 'const'
+				)
+			) {
+				w.reactive_declaration_module_script(node);
+			}
+
+			if (
+				node.body.type === 'ExpressionStatement' &&
+				node.body.expression.type === 'AssignmentExpression'
+			) {
+				let ids = extract_identifiers(node.body.expression.left);
+				if (node.body.expression.left.type === 'MemberExpression') {
+					const id = object(node.body.expression.left);
+					if (id !== null) {
+						ids = [id];
+					}
+				}
+
+				for (const id of ids) {
+					const binding = context.state.scope.get(id.name);
+					if (binding?.kind === 'legacy_reactive') {
+						// TODO does this include `let double; $: double = x * 2`?
+						binding.legacy_dependencies = Array.from(reactive_statement.dependencies);
+					}
+				}
+			}
+		} else if (!context.state.analysis.runes) {
+			w.reactive_declaration_invalid_placement(node);
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/LetDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/LetDirective.js
new file mode 100644
index 0000000000..562b900411
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/LetDirective.js
@@ -0,0 +1,24 @@
+/** @import { LetDirective } from '#compiler' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+
+/**
+ * @param {LetDirective} node
+ * @param {Context} context
+ */
+export function LetDirective(node, context) {
+	const parent = context.path.at(-1);
+
+	if (
+		parent === undefined ||
+		(parent.type !== 'Component' &&
+			parent.type !== 'RegularElement' &&
+			parent.type !== 'SlotElement' &&
+			parent.type !== 'SvelteElement' &&
+			parent.type !== 'SvelteComponent' &&
+			parent.type !== 'SvelteSelf' &&
+			parent.type !== 'SvelteFragment')
+	) {
+		e.let_directive_invalid_placement(node);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
new file mode 100644
index 0000000000..633275b63a
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
@@ -0,0 +1,27 @@
+/** @import { MemberExpression } from 'estree' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+import { is_safe_identifier } from './shared/utils.js';
+
+/**
+ * @param {MemberExpression} node
+ * @param {Context} context
+ */
+export function MemberExpression(node, context) {
+	if (node.object.type === 'Identifier' && node.property.type === 'Identifier') {
+		const binding = context.state.scope.get(node.object.name);
+		if (binding?.kind === 'rest_prop' && node.property.name.startsWith('$$')) {
+			e.props_illegal_name(node.property);
+		}
+	}
+
+	if (context.state.expression) {
+		context.state.expression.has_state = true;
+	}
+
+	if (!is_safe_identifier(node, context.state.scope)) {
+		context.state.analysis.needs_context = true;
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/NewExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/NewExpression.js
new file mode 100644
index 0000000000..6b393ae9b9
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/NewExpression.js
@@ -0,0 +1,15 @@
+/** @import { NewExpression } from 'estree' */
+/** @import { Context } from '../types' */
+import * as w from '../../../warnings.js';
+
+/**
+ * @param {NewExpression} node
+ * @param {Context} context
+ */
+export function NewExpression(node, context) {
+	if (node.callee.type === 'ClassExpression' && context.state.scope.function_depth > 0) {
+		w.perf_avoid_inline_class(node);
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js
new file mode 100644
index 0000000000..152f8301aa
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js
@@ -0,0 +1,25 @@
+/** @import { OnDirective } from '#compiler' */
+/** @import { Context } from '../types' */
+import * as w from '../../../warnings.js';
+
+/**
+ * @param {OnDirective} node
+ * @param {Context} context
+ */
+export function OnDirective(node, context) {
+	if (context.state.analysis.runes) {
+		const parent_type = context.path.at(-1)?.type;
+
+		// Don't warn on component events; these might not be under the author's control so the warning would be unactionable
+		if (parent_type === 'RegularElement' || parent_type === 'SvelteElement') {
+			w.event_directive_deprecated(node, node.name);
+		}
+	}
+
+	const parent = context.path.at(-1);
+	if (parent?.type === 'SvelteElement' || parent?.type === 'RegularElement') {
+		context.state.analysis.event_directive_node ??= node;
+	}
+
+	context.next({ ...context.state, expression: node.metadata.expression });
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
new file mode 100644
index 0000000000..3207919ada
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -0,0 +1,164 @@
+/** @import { RegularElement } from '#compiler' */
+/** @import { Context } from '../types' */
+import {
+	is_tag_valid_with_ancestor,
+	is_tag_valid_with_parent
+} from '../../../../html-tree-validation.js';
+import * as e from '../../../errors.js';
+import * as w from '../../../warnings.js';
+import { MathMLElements, SVGElements, VoidElements } from '../../constants.js';
+import { create_attribute } from '../../nodes.js';
+import { regex_starts_with_newline } from '../../patterns.js';
+import { check_element } from './shared/a11y.js';
+import { validate_element } from './shared/element.js';
+
+/**
+ * @param {RegularElement} node
+ * @param {Context} context
+ */
+export function RegularElement(node, context) {
+	validate_element(node, context);
+
+	check_element(node, context.state);
+
+	context.state.analysis.elements.push(node);
+
+	// Special case: Move the children of <textarea> into a value attribute if they are dynamic
+	if (
+		context.state.options.namespace !== 'foreign' &&
+		node.name === 'textarea' &&
+		node.fragment.nodes.length > 0
+	) {
+		for (const attribute of node.attributes) {
+			if (attribute.type === 'Attribute' && attribute.name === 'value') {
+				e.textarea_invalid_content(node);
+			}
+		}
+
+		if (node.fragment.nodes.length > 1 || node.fragment.nodes[0].type !== 'Text') {
+			const first = node.fragment.nodes[0];
+			if (first.type === 'Text') {
+				// The leading newline character needs to be stripped because of a qirk:
+				// It is ignored by browsers if the tag and its contents are set through
+				// innerHTML, but we're now setting it through the value property at which
+				// point it is _not_ ignored, so we need to strip it ourselves.
+				// see https://html.spec.whatwg.org/multipage/syntax.html#element-restrictions
+				// see https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element
+				first.data = first.data.replace(regex_starts_with_newline, '');
+				first.raw = first.raw.replace(regex_starts_with_newline, '');
+			}
+
+			node.attributes.push(
+				create_attribute(
+					'value',
+					/** @type {import('#compiler').Text} */ (node.fragment.nodes.at(0)).start,
+					/** @type {import('#compiler').Text} */ (node.fragment.nodes.at(-1)).end,
+					// @ts-ignore
+					node.fragment.nodes
+				)
+			);
+
+			node.fragment.nodes = [];
+		}
+	}
+
+	// Special case: single expression tag child of option element -> add "fake" attribute
+	// to ensure that value types are the same (else for example numbers would be strings)
+	if (
+		context.state.options.namespace !== 'foreign' &&
+		node.name === 'option' &&
+		node.fragment.nodes?.length === 1 &&
+		node.fragment.nodes[0].type === 'ExpressionTag' &&
+		!node.attributes.some(
+			(attribute) => attribute.type === 'Attribute' && attribute.name === 'value'
+		)
+	) {
+		const child = node.fragment.nodes[0];
+		node.attributes.push(create_attribute('value', child.start, child.end, [child]));
+	}
+
+	const binding = context.state.scope.get(node.name);
+	if (
+		binding !== null &&
+		binding.declaration_kind === 'import' &&
+		binding.references.length === 0
+	) {
+		w.component_name_lowercase(node, node.name);
+	}
+
+	node.metadata.has_spread = node.attributes.some(
+		(attribute) => attribute.type === 'SpreadAttribute'
+	);
+
+	if (context.state.options.namespace !== 'foreign') {
+		if (SVGElements.includes(node.name)) node.metadata.svg = true;
+		else if (MathMLElements.includes(node.name)) node.metadata.mathml = true;
+	}
+
+	if (context.state.parent_element) {
+		let past_parent = false;
+		let only_warn = false;
+
+		for (let i = context.path.length - 1; i >= 0; i--) {
+			const ancestor = context.path[i];
+
+			if (
+				ancestor.type === 'IfBlock' ||
+				ancestor.type === 'EachBlock' ||
+				ancestor.type === 'AwaitBlock' ||
+				ancestor.type === 'KeyBlock'
+			) {
+				// We're creating a separate template string inside blocks, which means client-side this would work
+				only_warn = true;
+			}
+
+			if (!past_parent) {
+				if (ancestor.type === 'RegularElement' && ancestor.name === context.state.parent_element) {
+					if (!is_tag_valid_with_parent(node.name, context.state.parent_element)) {
+						if (only_warn) {
+							w.node_invalid_placement_ssr(
+								node,
+								`\`<${node.name}>\``,
+								context.state.parent_element
+							);
+						} else {
+							e.node_invalid_placement(node, `\`<${node.name}>\``, context.state.parent_element);
+						}
+					}
+
+					past_parent = true;
+				}
+			} else if (ancestor.type === 'RegularElement') {
+				if (!is_tag_valid_with_ancestor(node.name, ancestor.name)) {
+					if (only_warn) {
+						w.node_invalid_placement_ssr(node, `\`<${node.name}>\``, ancestor.name);
+					} else {
+						e.node_invalid_placement(node, `\`<${node.name}>\``, ancestor.name);
+					}
+				}
+			} else if (
+				ancestor.type === 'Component' ||
+				ancestor.type === 'SvelteComponent' ||
+				ancestor.type === 'SvelteElement' ||
+				ancestor.type === 'SvelteSelf' ||
+				ancestor.type === 'SnippetBlock'
+			) {
+				break;
+			}
+		}
+	}
+
+	// Strip off any namespace from the beginning of the node name.
+	const node_name = node.name.replace(/[a-zA-Z-]*:/g, '');
+
+	if (
+		context.state.analysis.source[node.end - 2] === '/' &&
+		context.state.options.namespace !== 'foreign' &&
+		!VoidElements.includes(node_name) &&
+		!SVGElements.includes(node_name)
+	) {
+		w.element_invalid_self_closing_tag(node, node.name);
+	}
+
+	context.next({ ...context.state, parent_element: node.name });
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
new file mode 100644
index 0000000000..525eb72415
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
@@ -0,0 +1,37 @@
+/** @import { RenderTag } from '#compiler' */
+/** @import { Context } from '../types' */
+import { unwrap_optional } from '../../../utils/ast.js';
+import * as e from '../../../errors.js';
+import { validate_opening_tag } from './shared/utils.js';
+
+/**
+ * @param {RenderTag} node
+ * @param {Context} context
+ */
+export function RenderTag(node, context) {
+	validate_opening_tag(node, context.state, '@');
+
+	const callee = unwrap_optional(node.expression).callee;
+
+	node.metadata.dynamic =
+		callee.type !== 'Identifier' || context.state.scope.get(callee.name)?.kind !== 'normal';
+
+	context.state.analysis.uses_render_tags = true;
+
+	const raw_args = unwrap_optional(node.expression).arguments;
+	for (const arg of raw_args) {
+		if (arg.type === 'SpreadElement') {
+			e.render_tag_invalid_spread_argument(arg);
+		}
+	}
+
+	if (
+		callee.type === 'MemberExpression' &&
+		callee.property.type === 'Identifier' &&
+		['bind', 'apply', 'call'].includes(callee.property.name)
+	) {
+		e.render_tag_invalid_call_expression(node);
+	}
+
+	context.next({ ...context.state, render_tag: node });
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SlotElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SlotElement.js
new file mode 100644
index 0000000000..7c2c0ecf6a
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SlotElement.js
@@ -0,0 +1,39 @@
+/** @import { SlotElement } from '#compiler' */
+/** @import { Context } from '../types' */
+import { is_text_attribute } from '../../../utils/ast.js';
+import * as e from '../../../errors.js';
+import * as w from '../../../warnings.js';
+
+/**
+ * @param {SlotElement} node
+ * @param {Context} context
+ */
+export function SlotElement(node, context) {
+	if (context.state.analysis.runes && !context.state.analysis.custom_element) {
+		w.slot_element_deprecated(node);
+	}
+
+	/** @type {string} */
+	let name = 'default';
+
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'Attribute') {
+			if (attribute.name === 'name') {
+				if (!is_text_attribute(attribute)) {
+					e.slot_element_invalid_name(attribute);
+				}
+
+				name = attribute.value[0].data;
+				if (name === 'default') {
+					e.slot_element_invalid_name_default(attribute);
+				}
+			}
+		} else if (attribute.type !== 'SpreadAttribute' && attribute.type !== 'LetDirective') {
+			e.slot_element_invalid_attribute(attribute);
+		}
+	}
+
+	context.state.analysis.slot_names.set(name, node);
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js
new file mode 100644
index 0000000000..8a81e67e0e
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SnippetBlock.js
@@ -0,0 +1,55 @@
+/** @import { SnippetBlock } from '#compiler' */
+/** @import { Context } from '../types' */
+import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
+import * as e from '../../../errors.js';
+
+/**
+ * @param {SnippetBlock} node
+ * @param {Context} context
+ */
+export function SnippetBlock(node, context) {
+	validate_block_not_empty(node.body, context);
+
+	if (context.state.analysis.runes) {
+		validate_opening_tag(node, context.state, '#');
+	}
+
+	for (const arg of node.parameters) {
+		if (arg.type === 'RestElement') {
+			e.snippet_invalid_rest_parameter(arg);
+		}
+	}
+
+	context.next({ ...context.state, parent_element: null });
+
+	const { path } = context;
+	const parent = path.at(-2);
+	if (!parent) return;
+
+	if (
+		parent.type === 'Component' &&
+		parent.attributes.some(
+			(attribute) =>
+				(attribute.type === 'Attribute' || attribute.type === 'BindDirective') &&
+				attribute.name === node.expression.name
+		)
+	) {
+		e.snippet_shadowing_prop(node, node.expression.name);
+	}
+
+	if (node.expression.name !== 'children') return;
+
+	if (
+		parent.type === 'Component' ||
+		parent.type === 'SvelteComponent' ||
+		parent.type === 'SvelteSelf'
+	) {
+		if (
+			parent.fragment.nodes.some(
+				(node) => node.type !== 'SnippetBlock' && (node.type !== 'Text' || node.data.trim())
+			)
+		) {
+			e.snippet_conflict(node);
+		}
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SpreadAttribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SpreadAttribute.js
new file mode 100644
index 0000000000..feac14bb9b
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SpreadAttribute.js
@@ -0,0 +1,10 @@
+/** @import { SpreadAttribute } from '#compiler' */
+/** @import { Context } from '../types' */
+
+/**
+ * @param {SpreadAttribute} node
+ * @param {Context} context
+ */
+export function SpreadAttribute(node, context) {
+	context.next({ ...context.state, expression: node.metadata.expression });
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
new file mode 100644
index 0000000000..288a9a61f4
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
@@ -0,0 +1,38 @@
+/** @import { StyleDirective } from '#compiler' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+import { get_attribute_chunks } from '../../../utils/ast.js';
+
+/**
+ * @param {StyleDirective} node
+ * @param {Context} context
+ */
+export function StyleDirective(node, context) {
+	if (node.modifiers.length > 1 || (node.modifiers.length && node.modifiers[0] !== 'important')) {
+		e.style_directive_invalid_modifier(node);
+	}
+
+	if (node.value === true) {
+		// get the binding for node.name and change the binding to state
+		let binding = context.state.scope.get(node.name);
+
+		if (binding) {
+			if (!context.state.analysis.runes && binding.mutated) {
+				binding.kind = 'state';
+			}
+
+			if (binding.kind !== 'normal') {
+				node.metadata.expression.has_state = true;
+			}
+		}
+	} else {
+		context.next();
+
+		for (const chunk of get_attribute_chunks(node.value)) {
+			if (chunk.type !== 'ExpressionTag') continue;
+
+			node.metadata.expression.has_state ||= chunk.metadata.expression.has_state;
+			node.metadata.expression.has_call ||= chunk.metadata.expression.has_call;
+		}
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js
new file mode 100644
index 0000000000..97f78e9d85
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js
@@ -0,0 +1,11 @@
+/** @import { SvelteComponent } from '#compiler' */
+/** @import { Context } from '../types' */
+import { visit_component } from './shared/component.js';
+
+/**
+ * @param {SvelteComponent} node
+ * @param {Context} context
+ */
+export function SvelteComponent(node, context) {
+	visit_component(node, context);
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
new file mode 100644
index 0000000000..df9e1da3a9
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
@@ -0,0 +1,62 @@
+/** @import { Attribute, SvelteElement, Text } from '#compiler' */
+/** @import { Context } from '../types' */
+import { namespace_mathml, namespace_svg } from '../../../../constants.js';
+import { is_text_attribute } from '../../../utils/ast.js';
+import { check_element } from './shared/a11y.js';
+import { validate_element } from './shared/element.js';
+
+/**
+ * @param {SvelteElement} node
+ * @param {Context} context
+ */
+export function SvelteElement(node, context) {
+	validate_element(node, context);
+
+	check_element(node, context.state);
+
+	context.state.analysis.elements.push(node);
+
+	const xmlns = /** @type {Attribute & { value: [Text] } | undefined} */ (
+		node.attributes.find(
+			(a) => a.type === 'Attribute' && a.name === 'xmlns' && is_text_attribute(a)
+		)
+	);
+
+	if (xmlns) {
+		node.metadata.svg = xmlns.value[0].data === namespace_svg;
+		node.metadata.mathml = xmlns.value[0].data === namespace_mathml;
+	} else {
+		let i = context.path.length;
+		while (i--) {
+			const ancestor = context.path[i];
+
+			if (
+				ancestor.type === 'Component' ||
+				ancestor.type === 'SvelteComponent' ||
+				ancestor.type === 'SvelteFragment' ||
+				ancestor.type === 'SnippetBlock'
+			) {
+				// Inside a slot or a snippet -> this resets the namespace, so assume the component namespace
+				node.metadata.svg = context.state.options.namespace === 'svg';
+				node.metadata.mathml = context.state.options.namespace === 'mathml';
+				break;
+			}
+
+			if (ancestor.type === 'SvelteElement' || ancestor.type === 'RegularElement') {
+				node.metadata.svg =
+					ancestor.type === 'RegularElement' && ancestor.name === 'foreignObject'
+						? false
+						: ancestor.metadata.svg;
+
+				node.metadata.mathml =
+					ancestor.type === 'RegularElement' && ancestor.name === 'foreignObject'
+						? false
+						: ancestor.metadata.mathml;
+
+				break;
+			}
+		}
+	}
+
+	context.next({ ...context.state, parent_element: null });
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteFragment.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteFragment.js
new file mode 100644
index 0000000000..178414edea
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteFragment.js
@@ -0,0 +1,27 @@
+/** @import { SvelteFragment } from '#compiler' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+import { validate_slot_attribute } from './shared/attribute.js';
+
+/**
+ * @param {SvelteFragment} node
+ * @param {Context} context
+ */
+export function SvelteFragment(node, context) {
+	const parent = context.path.at(-2);
+	if (parent?.type !== 'Component' && parent?.type !== 'SvelteComponent') {
+		e.svelte_fragment_invalid_placement(node);
+	}
+
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'Attribute') {
+			if (attribute.name === 'slot') {
+				validate_slot_attribute(context, attribute);
+			}
+		} else if (attribute.type !== 'LetDirective') {
+			e.svelte_fragment_invalid_attribute(attribute);
+		}
+	}
+
+	context.next({ ...context.state, parent_element: null });
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js
new file mode 100644
index 0000000000..713f7c4ca6
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js
@@ -0,0 +1,15 @@
+/** @import { SvelteHead } from '#compiler' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+
+/**
+ * @param {SvelteHead} node
+ * @param {Context} context
+ */
+export function SvelteHead(node, context) {
+	for (const attribute of node.attributes) {
+		e.svelte_head_illegal_attribute(attribute);
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteSelf.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteSelf.js
new file mode 100644
index 0000000000..5b259bb636
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteSelf.js
@@ -0,0 +1,11 @@
+/** @import { SvelteSelf } from '#compiler' */
+/** @import { Context } from '../types' */
+import { visit_component } from './shared/component.js';
+
+/**
+ * @param {SvelteSelf} node
+ * @param {Context} context
+ */
+export function SvelteSelf(node, context) {
+	visit_component(node, context);
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
new file mode 100644
index 0000000000..e491042e38
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Text.js
@@ -0,0 +1,17 @@
+/** @import { Text } from '#compiler' */
+/** @import { Context } from '../types' */
+import { is_tag_valid_with_parent } from '../../../../html-tree-validation.js';
+import { regex_not_whitespace } from '../../patterns.js';
+import * as e from '../../../errors.js';
+
+/**
+ * @param {Text} node
+ * @param {Context} context
+ */
+export function Text(node, context) {
+	if (node.parent && context.state.parent_element && regex_not_whitespace.test(node.data)) {
+		if (!is_tag_valid_with_parent('#text', context.state.parent_element)) {
+			e.node_invalid_placement(node, 'Text node', context.state.parent_element);
+		}
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/TitleElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/TitleElement.js
new file mode 100644
index 0000000000..628e254964
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/TitleElement.js
@@ -0,0 +1,21 @@
+/** @import { TitleElement } from '#compiler' */
+/** @import { Context } from '../types' */
+import * as e from '../../../errors.js';
+
+/**
+ * @param {TitleElement} node
+ * @param {Context} context
+ */
+export function TitleElement(node, context) {
+	for (const attribute of node.attributes) {
+		e.title_illegal_attribute(attribute);
+	}
+
+	for (const child of node.fragment.nodes) {
+		if (child.type !== 'Text' && child.type !== 'ExpressionTag') {
+			e.title_invalid_content(child);
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js
new file mode 100644
index 0000000000..741effc67a
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/UpdateExpression.js
@@ -0,0 +1,25 @@
+/** @import { UpdateExpression } from 'estree' */
+/** @import { Context } from '../types' */
+import { object } from '../../../utils/ast.js';
+import { validate_assignment } from './shared/utils.js';
+
+/**
+ * @param {UpdateExpression} node
+ * @param {Context} context
+ */
+export function UpdateExpression(node, context) {
+	validate_assignment(node, node.argument, context.state);
+
+	if (context.state.reactive_statement) {
+		const id = node.argument.type === 'MemberExpression' ? object(node.argument) : node.argument;
+		if (id?.type === 'Identifier') {
+			const binding = context.state.scope.get(id.name);
+
+			if (binding) {
+				context.state.reactive_statement.assignments.add(binding);
+			}
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
new file mode 100644
index 0000000000..5025fab1d8
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
@@ -0,0 +1,115 @@
+/** @import { Expression, Identifier, Literal, VariableDeclarator } from 'estree' */
+/** @import { Binding } from '#compiler' */
+/** @import { Context } from '../types' */
+import { get_rune } from '../../scope.js';
+import { ensure_no_module_import_conflict } from './shared/utils.js';
+import * as e from '../../../errors.js';
+import { extract_paths } from '../../../utils/ast.js';
+import { equal } from '../../../utils/assert.js';
+
+/**
+ * @param {VariableDeclarator} node
+ * @param {Context} context
+ */
+export function VariableDeclarator(node, context) {
+	ensure_no_module_import_conflict(node, context.state);
+
+	if (context.state.analysis.runes) {
+		const init = node.init;
+		const rune = get_rune(init, context.state.scope);
+
+		// TODO feels like this should happen during scope creation?
+		if (
+			rune === '$state' ||
+			rune === '$state.frozen' ||
+			rune === '$derived' ||
+			rune === '$derived.by' ||
+			rune === '$props'
+		) {
+			for (const path of extract_paths(node.id)) {
+				// @ts-ignore this fails in CI for some insane reason
+				const binding = /** @type {Binding} */ (context.state.scope.get(path.node.name));
+				binding.kind =
+					rune === '$state'
+						? 'state'
+						: rune === '$state.frozen'
+							? 'frozen_state'
+							: rune === '$derived' || rune === '$derived.by'
+								? 'derived'
+								: path.is_rest
+									? 'rest_prop'
+									: 'prop';
+			}
+		}
+
+		if (rune === '$props') {
+			if (node.id.type !== 'ObjectPattern' && node.id.type !== 'Identifier') {
+				e.props_invalid_identifier(node);
+			}
+
+			context.state.analysis.needs_props = true;
+
+			if (node.id.type === 'Identifier') {
+				const binding = /** @type {Binding} */ (context.state.scope.get(node.id.name));
+				binding.initial = null; // else would be $props()
+				binding.kind = 'rest_prop';
+			} else {
+				equal(node.id.type, 'ObjectPattern');
+
+				for (const property of node.id.properties) {
+					if (property.type !== 'Property') continue;
+
+					if (property.computed) {
+						e.props_invalid_pattern(property);
+					}
+
+					if (property.key.type === 'Identifier' && property.key.name.startsWith('$$')) {
+						e.props_illegal_name(property);
+					}
+
+					const value =
+						property.value.type === 'AssignmentPattern' ? property.value.left : property.value;
+
+					if (value.type !== 'Identifier') {
+						e.props_invalid_pattern(property);
+					}
+
+					const alias =
+						property.key.type === 'Identifier'
+							? property.key.name
+							: String(/** @type {Literal} */ (property.key).value);
+
+					let initial = property.value.type === 'AssignmentPattern' ? property.value.right : null;
+
+					const binding = /** @type {Binding} */ (context.state.scope.get(value.name));
+					binding.prop_alias = alias;
+
+					// rewire initial from $props() to the actual initial value, stripping $bindable() if necessary
+					if (
+						initial?.type === 'CallExpression' &&
+						initial.callee.type === 'Identifier' &&
+						initial.callee.name === '$bindable'
+					) {
+						binding.initial = /** @type {Expression | null} */ (initial.arguments[0] ?? null);
+						binding.kind = 'bindable_prop';
+					} else {
+						binding.initial = initial;
+					}
+				}
+			}
+		}
+	} else {
+		if (node.init?.type === 'CallExpression') {
+			const callee = node.init.callee;
+			if (
+				callee.type === 'Identifier' &&
+				(callee.name === '$state' || callee.name === '$derived' || callee.name === '$props') &&
+				context.state.scope.get(callee.name)?.kind !== 'store_sub'
+			) {
+				e.rune_invalid_usage(node.init, callee.name);
+			}
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/a11y.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
similarity index 98%
rename from packages/svelte/src/compiler/phases/2-analyze/a11y.js
rename to packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
index 4a8882b45d..0d83e12de4 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/a11y.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
@@ -1,5 +1,5 @@
 /** @import { Visitors } from 'zimmerframe' */
-/** @import { AnalysisState } from './types.js' */
+/** @import { AnalysisState } from '../../types.js' */
 /** @import { Attribute, SvelteNode, TemplateNode, RegularElement, SvelteElement } from '#compiler' */
 /** @import { ARIARoleDefinitionKey, ARIARoleRelationConcept, ARIAProperty, ARIAPropertyDefinition, ARIARoleDefinition } from 'aria-query' */
 import { roles as roles_map, aria, elementRoles } from 'aria-query';
@@ -10,13 +10,13 @@ import {
 	regex_not_whitespace,
 	regex_starts_with_vowel,
 	regex_whitespaces
-} from '../patterns.js';
-import * as w from '../../warnings.js';
-import fuzzymatch from '../1-parse/utils/fuzzymatch.js';
-import { is_event_attribute, is_text_attribute } from '../../utils/ast.js';
-import { ContentEditableBindings } from '../constants.js';
+} from '../../../patterns.js';
+import * as w from '../../../../warnings.js';
+import fuzzymatch from '../../../1-parse/utils/fuzzymatch.js';
+import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js';
+import { ContentEditableBindings } from '../../../constants.js';
 import { walk } from 'zimmerframe';
-import { list } from '../../utils/string.js';
+import { list } from '../../../../utils/string.js';
 
 const aria_roles = roles_map.keys();
 const abstract_roles = aria_roles.filter((role) => roles_map.get(role)?.abstract);
@@ -686,7 +686,7 @@ function get_static_text_value(attribute) {
  * @param {RegularElement | SvelteElement} node
  * @param {AnalysisState} state
  */
-function check_element(node, state) {
+export function check_element(node, state) {
 	// foreign namespace means elements can have completely different meanings, therefore we don't check them
 	if (state.options.namespace === 'foreign') return;
 
@@ -1154,15 +1154,3 @@ function check_element(node, state) {
 		w.a11y_missing_content(node, node.name);
 	}
 }
-
-/**
- * @type {Visitors<SvelteNode, AnalysisState>}
- */
-export const a11y_validators = {
-	RegularElement(node, context) {
-		check_element(node, context.state);
-	},
-	SvelteElement(node, context) {
-		check_element(node, context.state);
-	}
-};
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/attribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/attribute.js
new file mode 100644
index 0000000000..8f60a67c62
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/attribute.js
@@ -0,0 +1,123 @@
+/** @import { Attribute, ElementLike } from '#compiler' */
+/** @import { Context } from '../../types' */
+import * as e from '../../../../errors.js';
+import { is_text_attribute } from '../../../../utils/ast.js';
+import * as w from '../../../../warnings.js';
+import { is_custom_element_node } from '../../../nodes.js';
+import { regex_only_whitespaces } from '../../../patterns.js';
+
+/**
+ * @param {Attribute} attribute
+ */
+export function validate_attribute_name(attribute) {
+	if (
+		attribute.name.includes(':') &&
+		!attribute.name.startsWith('xmlns:') &&
+		!attribute.name.startsWith('xlink:') &&
+		!attribute.name.startsWith('xml:')
+	) {
+		w.attribute_illegal_colon(attribute);
+	}
+}
+
+/**
+ * @param {Attribute} attribute
+ * @param {ElementLike} parent
+ */
+export function validate_attribute(attribute, parent) {
+	if (
+		Array.isArray(attribute.value) &&
+		attribute.value.length === 1 &&
+		attribute.value[0].type === 'ExpressionTag' &&
+		(parent.type === 'Component' ||
+			parent.type === 'SvelteComponent' ||
+			parent.type === 'SvelteSelf' ||
+			(parent.type === 'RegularElement' && is_custom_element_node(parent)))
+	) {
+		w.attribute_quoted(attribute);
+	}
+
+	if (attribute.value === true || !Array.isArray(attribute.value) || attribute.value.length === 1) {
+		return;
+	}
+
+	const is_quoted = attribute.value.at(-1)?.end !== attribute.end;
+
+	if (!is_quoted) {
+		e.attribute_unquoted_sequence(attribute);
+	}
+}
+
+/**
+ * @param {Context} context
+ * @param {Attribute} attribute
+ * @param {boolean} is_component
+ */
+export function validate_slot_attribute(context, attribute, is_component = false) {
+	const parent = context.path.at(-2);
+	let owner = undefined;
+
+	if (parent?.type === 'SnippetBlock') {
+		if (!is_text_attribute(attribute)) {
+			e.slot_attribute_invalid(attribute);
+		}
+		return;
+	}
+
+	let i = context.path.length;
+	while (i--) {
+		const ancestor = context.path[i];
+		if (
+			!owner &&
+			(ancestor.type === 'Component' ||
+				ancestor.type === 'SvelteComponent' ||
+				ancestor.type === 'SvelteSelf' ||
+				ancestor.type === 'SvelteElement' ||
+				(ancestor.type === 'RegularElement' && is_custom_element_node(ancestor)))
+		) {
+			owner = ancestor;
+		}
+	}
+
+	if (owner) {
+		if (!is_text_attribute(attribute)) {
+			e.slot_attribute_invalid(attribute);
+		}
+
+		if (
+			owner.type === 'Component' ||
+			owner.type === 'SvelteComponent' ||
+			owner.type === 'SvelteSelf'
+		) {
+			if (owner !== parent) {
+				e.slot_attribute_invalid_placement(attribute);
+			}
+
+			const name = attribute.value[0].data;
+
+			if (context.state.component_slots.has(name)) {
+				e.slot_attribute_duplicate(attribute, name, owner.name);
+			}
+
+			context.state.component_slots.add(name);
+
+			if (name === 'default') {
+				for (const node of owner.fragment.nodes) {
+					if (node.type === 'Text' && regex_only_whitespaces.test(node.data)) {
+						continue;
+					}
+
+					if (node.type === 'RegularElement' || node.type === 'SvelteFragment') {
+						if (node.attributes.some((a) => a.type === 'Attribute' && a.name === 'slot')) {
+							continue;
+						}
+					}
+
+					e.slot_default_duplicate(node);
+				}
+			}
+		}
+	} else if (!is_component) {
+		e.slot_attribute_invalid_placement(attribute);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
new file mode 100644
index 0000000000..347a59488a
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
@@ -0,0 +1,68 @@
+/** @import { Component, SvelteComponent, SvelteSelf } from '#compiler' */
+/** @import { Context } from '../../types' */
+import * as e from '../../../../errors.js';
+import { get_attribute_expression, is_expression_attribute } from '../../../../utils/ast.js';
+import {
+	validate_attribute,
+	validate_attribute_name,
+	validate_slot_attribute
+} from './attribute.js';
+
+/**
+ * @param {Component | SvelteComponent | SvelteSelf} node
+ * @param {Context} context
+ */
+export function visit_component(node, context) {
+	for (const attribute of node.attributes) {
+		if (
+			attribute.type !== 'Attribute' &&
+			attribute.type !== 'SpreadAttribute' &&
+			attribute.type !== 'LetDirective' &&
+			attribute.type !== 'OnDirective' &&
+			attribute.type !== 'BindDirective'
+		) {
+			e.component_invalid_directive(attribute);
+		}
+
+		if (
+			attribute.type === 'OnDirective' &&
+			(attribute.modifiers.length > 1 || attribute.modifiers.some((m) => m !== 'once'))
+		) {
+			e.event_handler_invalid_component_modifier(attribute);
+		}
+
+		if (attribute.type === 'Attribute') {
+			if (context.state.analysis.runes) {
+				validate_attribute(attribute, node);
+
+				if (is_expression_attribute(attribute)) {
+					const expression = get_attribute_expression(attribute);
+					if (expression.type === 'SequenceExpression') {
+						let i = /** @type {number} */ (expression.start);
+						while (--i > 0) {
+							const char = context.state.analysis.source[i];
+							if (char === '(') break; // parenthesized sequence expressions are ok
+							if (char === '{') e.attribute_invalid_sequence_expression(expression);
+						}
+					}
+				}
+			}
+
+			validate_attribute_name(attribute);
+
+			if (attribute.name === 'slot') {
+				validate_slot_attribute(context, attribute, true);
+			}
+		}
+
+		if (attribute.type === 'BindDirective' && attribute.name !== 'this') {
+			context.state.analysis.uses_component_bindings = true;
+		}
+	}
+
+	context.next({
+		...context.state,
+		parent_element: null,
+		component_slots: new Set()
+	});
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js
new file mode 100644
index 0000000000..2a2249080a
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js
@@ -0,0 +1,149 @@
+/** @import { Component, RegularElement, SvelteComponent, SvelteElement, SvelteSelf, TransitionDirective } from '#compiler' */
+/** @import { Context } from '../../types' */
+import { get_attribute_expression, is_expression_attribute } from '../../../../utils/ast.js';
+import { regex_illegal_attribute_character } from '../../../patterns.js';
+import * as e from '../../../../errors.js';
+import * as w from '../../../../warnings.js';
+import { EventModifiers } from '../../../constants.js';
+import {
+	validate_attribute,
+	validate_attribute_name,
+	validate_slot_attribute
+} from './attribute.js';
+
+/**
+ * @param {import('#compiler').RegularElement | SvelteElement} node
+ * @param {Context} context
+ */
+export function validate_element(node, context) {
+	let has_animate_directive = false;
+
+	/** @type {TransitionDirective | null} */
+	let in_transition = null;
+
+	/** @type {TransitionDirective | null} */
+	let out_transition = null;
+
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'Attribute') {
+			const is_expression = is_expression_attribute(attribute);
+
+			if (context.state.analysis.runes) {
+				validate_attribute(attribute, node);
+
+				if (is_expression) {
+					const expression = get_attribute_expression(attribute);
+					if (expression.type === 'SequenceExpression') {
+						let i = /** @type {number} */ (expression.start);
+						while (--i > 0) {
+							const char = context.state.analysis.source[i];
+							if (char === '(') break; // parenthesized sequence expressions are ok
+							if (char === '{') e.attribute_invalid_sequence_expression(expression);
+						}
+					}
+				}
+			}
+
+			if (regex_illegal_attribute_character.test(attribute.name)) {
+				e.attribute_invalid_name(attribute, attribute.name);
+			}
+
+			if (attribute.name.startsWith('on') && attribute.name.length > 2) {
+				if (!is_expression) {
+					e.attribute_invalid_event_handler(attribute);
+				}
+
+				const value = get_attribute_expression(attribute);
+				if (
+					value.type === 'Identifier' &&
+					value.name === attribute.name &&
+					!context.state.scope.get(value.name)
+				) {
+					w.attribute_global_event_reference(attribute, attribute.name);
+				}
+			}
+
+			if (attribute.name === 'slot') {
+				/** @type {RegularElement | SvelteElement | Component | SvelteComponent | SvelteSelf | undefined} */
+				validate_slot_attribute(context, attribute);
+			}
+
+			if (attribute.name === 'is' && context.state.options.namespace !== 'foreign') {
+				w.attribute_avoid_is(attribute);
+			}
+
+			const correct_name = react_attributes.get(attribute.name);
+			if (correct_name) {
+				w.attribute_invalid_property_name(attribute, attribute.name, correct_name);
+			}
+
+			validate_attribute_name(attribute);
+		} else if (attribute.type === 'AnimateDirective') {
+			const parent = context.path.at(-2);
+			if (parent?.type !== 'EachBlock') {
+				e.animation_invalid_placement(attribute);
+			} else if (!parent.key) {
+				e.animation_missing_key(attribute);
+			} else if (
+				parent.body.nodes.filter(
+					(n) =>
+						n.type !== 'Comment' &&
+						n.type !== 'ConstTag' &&
+						(n.type !== 'Text' || n.data.trim() !== '')
+				).length > 1
+			) {
+				e.animation_invalid_placement(attribute);
+			}
+
+			if (has_animate_directive) {
+				e.animation_duplicate(attribute);
+			} else {
+				has_animate_directive = true;
+			}
+		} else if (attribute.type === 'TransitionDirective') {
+			const existing = /** @type {TransitionDirective | null} */ (
+				(attribute.intro && in_transition) || (attribute.outro && out_transition)
+			);
+
+			if (existing) {
+				const a = existing.intro ? (existing.outro ? 'transition' : 'in') : 'out';
+				const b = attribute.intro ? (attribute.outro ? 'transition' : 'in') : 'out';
+
+				if (a === b) {
+					e.transition_duplicate(attribute, a);
+				} else {
+					e.transition_conflict(attribute, a, b);
+				}
+			}
+
+			if (attribute.intro) in_transition = attribute;
+			if (attribute.outro) out_transition = attribute;
+		} else if (attribute.type === 'OnDirective') {
+			let has_passive_modifier = false;
+			let conflicting_passive_modifier = '';
+			for (const modifier of attribute.modifiers) {
+				if (!EventModifiers.includes(modifier)) {
+					const list = `${EventModifiers.slice(0, -1).join(', ')} or ${EventModifiers.at(-1)}`;
+					e.event_handler_invalid_modifier(attribute, list);
+				}
+				if (modifier === 'passive') {
+					has_passive_modifier = true;
+				} else if (modifier === 'nonpassive' || modifier === 'preventDefault') {
+					conflicting_passive_modifier = modifier;
+				}
+				if (has_passive_modifier && conflicting_passive_modifier) {
+					e.event_handler_invalid_modifier_combination(
+						attribute,
+						'passive',
+						conflicting_passive_modifier
+					);
+				}
+			}
+		}
+	}
+}
+
+const react_attributes = new Map([
+	['className', 'class'],
+	['htmlFor', 'for']
+]);
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js
new file mode 100644
index 0000000000..da1f06d7f6
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js
@@ -0,0 +1,21 @@
+/** @import { ArrowFunctionExpression, FunctionDeclaration, FunctionExpression } from 'estree' */
+/** @import { Context } from '../../types' */
+
+/**
+ * @param {ArrowFunctionExpression | FunctionExpression | FunctionDeclaration} node
+ * @param {Context} context
+ */
+export function visit_function(node, context) {
+	// TODO retire this in favour of a more general solution based on bindings
+	node.metadata = {
+		// module context -> already hoisted
+		hoistable: context.state.ast_type === 'module' ? 'impossible' : false,
+		hoistable_params: [],
+		scope: context.state.scope
+	};
+
+	context.next({
+		...context.state,
+		function_depth: context.state.function_depth + 1
+	});
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
new file mode 100644
index 0000000000..dd790665ce
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
@@ -0,0 +1,167 @@
+/** @import { AssignmentExpression, Expression, Pattern, PrivateIdentifier, Super, UpdateExpression, VariableDeclarator } from 'estree' */
+/** @import { Fragment } from '#compiler' */
+/** @import { AnalysisState, Context } from '../../types' */
+/** @import { Scope } from '../../../scope' */
+/** @import { NodeLike } from '../../../../errors.js' */
+import * as e from '../../../../errors.js';
+import { extract_identifiers } from '../../../../utils/ast.js';
+import * as w from '../../../../warnings.js';
+
+/**
+ * @param {AssignmentExpression | UpdateExpression} node
+ * @param {Pattern | Expression} argument
+ * @param {AnalysisState} state
+ */
+export function validate_assignment(node, argument, state) {
+	validate_no_const_assignment(node, argument, state.scope, false);
+
+	if (argument.type === 'Identifier') {
+		const binding = state.scope.get(argument.name);
+
+		if (state.analysis.runes) {
+			if (binding?.kind === 'derived') {
+				e.constant_assignment(node, 'derived state');
+			}
+
+			if (binding?.kind === 'each') {
+				e.each_item_invalid_assignment(node);
+			}
+		}
+
+		if (binding?.kind === 'snippet') {
+			e.snippet_parameter_assignment(node);
+		}
+	}
+
+	let object = /** @type {Expression | Super} */ (argument);
+
+	/** @type {Expression | PrivateIdentifier | null} */
+	let property = null;
+
+	while (object.type === 'MemberExpression') {
+		property = object.property;
+		object = object.object;
+	}
+
+	if (object.type === 'ThisExpression' && property?.type === 'PrivateIdentifier') {
+		if (state.private_derived_state.includes(property.name)) {
+			e.constant_assignment(node, 'derived state');
+		}
+	}
+}
+
+/**
+ * @param {NodeLike} node
+ * @param {Pattern | Expression} argument
+ * @param {Scope} scope
+ * @param {boolean} is_binding
+ */
+export function validate_no_const_assignment(node, argument, scope, is_binding) {
+	if (argument.type === 'ArrayPattern') {
+		for (const element of argument.elements) {
+			if (element) {
+				validate_no_const_assignment(node, element, scope, is_binding);
+			}
+		}
+	} else if (argument.type === 'ObjectPattern') {
+		for (const element of argument.properties) {
+			if (element.type === 'Property') {
+				validate_no_const_assignment(node, element.value, scope, is_binding);
+			}
+		}
+	} else if (argument.type === 'Identifier') {
+		const binding = scope.get(argument.name);
+		if (binding?.declaration_kind === 'const' && binding.kind !== 'each') {
+			// e.invalid_const_assignment(
+			// 	node,
+			// 	is_binding,
+			// 	// This takes advantage of the fact that we don't assign initial for let directives and then/catch variables.
+			// 	// If we start doing that, we need another property on the binding to differentiate, or give up on the more precise error message.
+			// 	binding.kind !== 'state' &&
+			// 		binding.kind !== 'frozen_state' &&
+			// 		(binding.kind !== 'normal' || !binding.initial)
+			// );
+
+			// TODO have a more specific error message for assignments to things like `{:then foo}`
+			const thing = 'constant';
+
+			if (is_binding) {
+				e.constant_binding(node, thing);
+			} else {
+				e.constant_assignment(node, thing);
+			}
+		}
+	}
+}
+
+/**
+ * Validates that the opening of a control flow block is `{` immediately followed by the expected character.
+ * In legacy mode whitespace is allowed inbetween. TODO remove once legacy mode is gone and move this into parser instead.
+ * @param {{start: number; end: number}} node
+ * @param {AnalysisState} state
+ * @param {string} expected
+ */
+export function validate_opening_tag(node, state, expected) {
+	if (state.analysis.source[node.start + 1] !== expected) {
+		// avoid a sea of red and only mark the first few characters
+		e.block_unexpected_character({ start: node.start, end: node.start + 5 }, expected);
+	}
+}
+
+/**
+ * @param {Fragment | null | undefined} node
+ * @param {Context} context
+ */
+export function validate_block_not_empty(node, context) {
+	if (!node) return;
+	// Assumption: If the block has zero elements, someone's in the middle of typing it out,
+	// so don't warn in that case because it would be distracting.
+	if (node.nodes.length === 1 && node.nodes[0].type === 'Text' && !node.nodes[0].raw.trim()) {
+		w.block_empty(node.nodes[0]);
+	}
+}
+
+/**
+ * @param {VariableDeclarator} node
+ * @param {AnalysisState} state
+ */
+export function ensure_no_module_import_conflict(node, state) {
+	const ids = extract_identifiers(node.id);
+	for (const id of ids) {
+		if (
+			state.ast_type === 'instance' &&
+			state.scope === state.analysis.instance.scope &&
+			state.analysis.module.scope.get(id.name)?.declaration_kind === 'import'
+		) {
+			// TODO fix the message here
+			e.declaration_duplicate_module_import(node.id);
+		}
+	}
+}
+
+/**
+ * A 'safe' identifier means that the `foo` in `foo.bar` or `foo()` will not
+ * call functions that require component context to exist
+ * @param {Expression | Super} expression
+ * @param {Scope} scope
+ */
+export function is_safe_identifier(expression, scope) {
+	let node = expression;
+	while (node.type === 'MemberExpression') node = node.object;
+
+	if (node.type !== 'Identifier') return false;
+
+	const binding = scope.get(node.name);
+	if (!binding) return true;
+
+	if (binding.kind === 'store_sub') {
+		return is_safe_identifier({ name: node.name.slice(1), type: 'Identifier' }, scope);
+	}
+
+	return (
+		binding.declaration_kind !== 'import' &&
+		binding.kind !== 'prop' &&
+		binding.kind !== 'bindable_prop' &&
+		binding.kind !== 'rest_prop'
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index bd6cad135a..a223834d06 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -9,7 +9,7 @@ import type {
 	SvelteNode,
 	SvelteOptions
 } from '#compiler';
-import type { Identifier, LabeledStatement, Program, Statement, VariableDeclaration } from 'estree';
+import type { Identifier, LabeledStatement, Program, VariableDeclaration } from 'estree';
 import type { Scope, ScopeRoot } from './scope.js';
 
 export interface Js {
diff --git a/packages/svelte/src/compiler/phases/visitors.js b/packages/svelte/src/compiler/phases/visitors.js
index 35cf714eaf..5a52056ceb 100644
--- a/packages/svelte/src/compiler/phases/visitors.js
+++ b/packages/svelte/src/compiler/phases/visitors.js
@@ -8,6 +8,7 @@ const overrides = {
 	}
 };
 
+// TODO get rid of this
 /**
  * @template {{ type: string }} T
  * @template U
diff --git a/packages/svelte/src/compiler/utils/ast.js b/packages/svelte/src/compiler/utils/ast.js
index 7d786cb5fe..aef6c270a9 100644
--- a/packages/svelte/src/compiler/utils/ast.js
+++ b/packages/svelte/src/compiler/utils/ast.js
@@ -139,6 +139,7 @@ export function extract_identifiers(pattern) {
 
 /**
  * Extracts all identifiers and a stringified keypath from an expression.
+ * TODO replace this with `expression.dependencies`
  * @param {ESTree.Expression} expr
  * @returns {[keypath: string, ids: ESTree.Identifier[]]}
  */
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement-instance/_config.js
similarity index 100%
rename from packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement/_config.js
rename to packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement-instance/_config.js
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement/main.svelte b/packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement-instance/main.svelte
similarity index 100%
rename from packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement/main.svelte
rename to packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement-instance/main.svelte
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement-module/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement-module/_config.js
new file mode 100644
index 0000000000..53ab3c7bcd
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement-module/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'props_invalid_placement',
+		message:
+			'`$props()` can only be used at the top level of components as a variable declaration initializer'
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement/main.svelte.js b/packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement-module/main.svelte.js
similarity index 100%
rename from packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement/main.svelte.js
rename to packages/svelte/tests/compiler-errors/samples/runes-wrong-props-placement-module/main.svelte.js

From 2d9bc2565f0da921d3a0277f684dad2b4c43de89 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 30 Jul 2024 18:43:39 -0400
Subject: [PATCH 036/196] Version Packages (next) (#12667)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  3 +++
 packages/svelte/CHANGELOG.md   | 10 ++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 24247ad4ac..bece234879 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -365,6 +365,7 @@
     "lovely-zebras-own",
     "lucky-colts-remember",
     "lucky-geckos-swim",
+    "lucky-panthers-chew",
     "lucky-schools-hang",
     "lucky-teachers-exist",
     "lucky-toes-begin",
@@ -729,6 +730,8 @@
     "violet-otters-carry",
     "violet-pigs-jam",
     "warm-cherries-shake",
+    "warm-cycles-call",
+    "warm-planets-cry",
     "warm-waves-reply",
     "weak-drinks-speak",
     "weak-frogs-bow",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 7998f890dd..a3fbe31e9f 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.0.0-next.203
+
+### Patch Changes
+
+- chore: internal compiler refactoring ([#12651](https://github.com/sveltejs/svelte/pull/12651))
+
+- fix: widen `ComponentProps` constraint to accept more component shapes ([#12666](https://github.com/sveltejs/svelte/pull/12666))
+
+- feat: make `<svelte:component>` unnecessary in runes mode ([#12646](https://github.com/sveltejs/svelte/pull/12646))
+
 ## 5.0.0-next.202
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 9198dab8ea..8ea207abed 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.202",
+  "version": "5.0.0-next.203",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index e91677138f..9467a7af64 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.202';
+export const VERSION = '5.0.0-next.203';
 export const PUBLIC_VERSION = '5';

From 4b1b886855553baf8d9fd156606f931036628349 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 30 Jul 2024 20:50:57 -0400
Subject: [PATCH 037/196] chore: make `dev` state globally available (#12669)

* make `dev` state globally available

* tidy up
---
 .../3-transform/client/transform-client.js    | 20 +++++-----
 .../phases/3-transform/client/utils.js        | 16 ++++----
 .../client/visitors/javascript-runes.js       | 17 ++++-----
 .../3-transform/client/visitors/template.js   | 38 ++++++++-----------
 .../compiler/phases/3-transform/css/index.js  |  7 ++--
 .../3-transform/server/transform-server.js    | 10 ++---
 .../3-transform/server/visitors/ClassBody.js  |  6 +--
 .../server/visitors/RegularElement.js         |  6 +--
 .../server/visitors/SvelteElement.js          |  7 ++--
 .../src/compiler/phases/3-transform/utils.js  |  3 +-
 packages/svelte/src/compiler/state.js         | 10 ++++-
 11 files changed, 69 insertions(+), 71 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index dbc7cd5ca8..c6ac88b0de 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -12,7 +12,7 @@ import { javascript_visitors_runes } from './visitors/javascript-runes.js';
 import { javascript_visitors_legacy } from './visitors/javascript-legacy.js';
 import { serialize_get_binding } from './utils.js';
 import { render_stylesheet } from '../css/index.js';
-import { filename } from '../../../state.js';
+import { dev, filename } from '../../../state.js';
 
 /**
  * This function ensures visitor sets don't accidentally clobber each other
@@ -164,7 +164,7 @@ export function client_component(source, analysis, options) {
 			store_setup.push(
 				b.const(
 					binding.node,
-					options.dev
+					dev
 						? b.thunk(
 								b.sequence([
 									b.call('$.validate_store', store_reference, b.literal(name.slice(1))),
@@ -210,7 +210,7 @@ export function client_component(source, analysis, options) {
 					getter,
 					b.set(alias ?? name, [b.stmt(b.assignment('=', expression, b.id('$$value')))])
 				];
-			} else if (!options.dev) {
+			} else if (!dev) {
 				return b.init(alias ?? name, expression);
 			}
 		}
@@ -238,7 +238,7 @@ export function client_component(source, analysis, options) {
 			(binding.kind === 'prop' || binding.kind === 'bindable_prop') && !name.startsWith('$$')
 	);
 
-	if (analysis.runes && options.dev) {
+	if (dev && analysis.runes) {
 		const exports = analysis.exports.map(({ name, alias }) => b.literal(alias ?? name));
 		/** @type {ESTree.Literal[]} */
 		const bindable = [];
@@ -300,12 +300,12 @@ export function client_component(source, analysis, options) {
 				)
 			)
 		);
-	} else if (options.dev) {
+	} else if (dev) {
 		component_returned_object.push(b.spread(b.call(b.id('$.legacy_api'))));
 	}
 
 	const push_args = [b.id('$$props'), b.literal(analysis.runes)];
-	if (options.dev) push_args.push(b.id(analysis.name));
+	if (dev) push_args.push(b.id(analysis.name));
 
 	const component_block = b.block([
 		...store_setup,
@@ -345,10 +345,10 @@ export function client_component(source, analysis, options) {
 	}
 
 	const should_inject_context =
+		dev ||
 		analysis.needs_context ||
 		analysis.reactive_statements.size > 0 ||
-		component_returned_object.length > 0 ||
-		options.dev;
+		component_returned_object.length > 0;
 
 	if (should_inject_context) {
 		component_block.body.unshift(b.stmt(b.call('$.push', ...push_args)));
@@ -462,7 +462,7 @@ export function client_component(source, analysis, options) {
 		body.push(b.export_default(component));
 	}
 
-	if (options.dev) {
+	if (dev) {
 		if (filename) {
 			// add `App[$.FILENAME] = 'App.svelte'` so that we can print useful messages later
 			body.unshift(
@@ -498,7 +498,7 @@ export function client_component(source, analysis, options) {
 				)
 			)
 		);
-	} else if (options.dev) {
+	} else if (dev) {
 		component_block.body.unshift(b.stmt(b.call('$.check_target', b.id('new.target'))));
 	}
 
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 529318d4fc..825452fec8 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -16,6 +16,7 @@ import {
 	PROPS_IS_RUNES,
 	PROPS_IS_UPDATED
 } from '../../../../constants.js';
+import { dev } from '../../../state.js';
 
 /**
  * @template {ClientTransformState} State
@@ -212,7 +213,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 							assignment.right =
 								private_state.kind === 'frozen_state'
 									? b.call('$.freeze', value)
-									: serialize_proxy_reassignment(value, private_state.id, state);
+									: serialize_proxy_reassignment(value, private_state.id);
 							return assignment;
 						}
 					}
@@ -225,7 +226,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 							should_proxy_or_freeze(value, context.state.scope)
 							? private_state.kind === 'frozen_state'
 								? b.call('$.freeze', value)
-								: serialize_proxy_reassignment(value, private_state.id, state)
+								: serialize_proxy_reassignment(value, private_state.id)
 							: value
 					);
 				}
@@ -249,7 +250,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 					assignment.right =
 						public_state.kind === 'frozen_state'
 							? b.call('$.freeze', value)
-							: serialize_proxy_reassignment(value, public_state.id, state);
+							: serialize_proxy_reassignment(value, public_state.id);
 					return assignment;
 				}
 			}
@@ -317,7 +318,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 						context.state.analysis.runes &&
 							!options?.skip_proxy_and_freeze &&
 							should_proxy_or_freeze(value, context.state.scope)
-							? serialize_proxy_reassignment(value, left_name, state)
+							? serialize_proxy_reassignment(value, left_name)
 							: value
 					);
 				} else if (binding.kind === 'frozen_state') {
@@ -340,7 +341,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 							!options?.skip_proxy_and_freeze &&
 							should_proxy_or_freeze(value, context.state.scope) &&
 							binding.kind === 'bindable_prop'
-							? serialize_proxy_reassignment(value, left_name, state)
+							? serialize_proxy_reassignment(value, left_name)
 							: value
 					);
 				} else {
@@ -435,10 +436,9 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 /**
  * @param {Expression} value
  * @param {PrivateIdentifier | string} proxy_reference
- * @param {ClientTransformState} state
  */
-export function serialize_proxy_reassignment(value, proxy_reference, state) {
-	return state.options.dev
+export function serialize_proxy_reassignment(value, proxy_reference) {
+	return dev
 		? b.call(
 				'$.proxy',
 				value,
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
index f24514a8f9..e8b8a20de4 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
@@ -14,6 +14,7 @@ import {
 } from '../utils.js';
 import { extract_paths } from '../../../../utils/ast.js';
 import { regex_invalid_identifier_chars } from '../../../patterns.js';
+import { dev } from '../../../../state.js';
 
 /** @type {ComponentVisitors} */
 export const javascript_visitors_runes = {
@@ -148,11 +149,7 @@ export const javascript_visitors_runes = {
 									'set',
 									definition.key,
 									[value],
-									[
-										b.stmt(
-											b.call('$.set', member, serialize_proxy_reassignment(value, field.id, state))
-										)
-									]
+									[b.stmt(b.call('$.set', member, serialize_proxy_reassignment(value, field.id)))]
 								)
 							);
 						}
@@ -170,7 +167,7 @@ export const javascript_visitors_runes = {
 							);
 						}
 
-						if ((field.kind === 'derived' || field.kind === 'derived_call') && state.options.dev) {
+						if (dev && (field.kind === 'derived' || field.kind === 'derived_call')) {
 							body.push(
 								b.method(
 									'set',
@@ -188,7 +185,7 @@ export const javascript_visitors_runes = {
 			body.push(/** @type {MethodDefinition} **/ (visit(definition, child_state)));
 		}
 
-		if (state.options.dev && public_state.size > 0) {
+		if (dev && public_state.size > 0) {
 			// add an `[$.ADD_OWNER]` method so that a class with state fields can widen ownership
 			body.push(
 				b.method(
@@ -248,7 +245,7 @@ export const javascript_visitors_runes = {
 					/** @type {Expression[]} */
 					const args = [b.id('$$props'), b.array(seen.map((name) => b.literal(name)))];
 
-					if (state.options.dev) {
+					if (dev) {
 						// include rest name, so we can provide informative error messages
 						args.push(b.literal(declarator.id.name));
 					}
@@ -287,7 +284,7 @@ export const javascript_visitors_runes = {
 							/** @type {Expression[]} */
 							const args = [b.id('$$props'), b.array(seen.map((name) => b.literal(name)))];
 
-							if (state.options.dev) {
+							if (dev) {
 								// include rest name, so we can provide informative error messages
 								args.push(b.literal(/** @type {Identifier} */ (property.argument).name));
 							}
@@ -474,7 +471,7 @@ export const javascript_visitors_runes = {
 	BinaryExpression(node, { state, visit, next }) {
 		const operator = node.operator;
 
-		if (state.options.dev) {
+		if (dev) {
 			if (operator === '===' || operator === '!==') {
 				return b.call(
 					'$.strict_equals',
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index fb995b4e90..dacb810b47 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -53,7 +53,7 @@ import { regex_is_valid_identifier } from '../../../patterns.js';
 import { javascript_visitors_runes } from './javascript-runes.js';
 import { sanitize_template_string } from '../../../../utils/sanitize_template_string.js';
 import { walk } from 'zimmerframe';
-import { locator } from '../../../../state.js';
+import { dev, locator } from '../../../../state.js';
 import is_reference from 'is-reference';
 
 /**
@@ -780,18 +780,14 @@ function serialize_inline_component(node, component_name, context, anchor = cont
 		} else if (attribute.type === 'BindDirective') {
 			const expression = /** @type {Expression} */ (context.visit(attribute.expression));
 
-			if (
-				expression.type === 'MemberExpression' &&
-				context.state.options.dev &&
-				context.state.analysis.runes
-			) {
+			if (dev && expression.type === 'MemberExpression' && context.state.analysis.runes) {
 				context.state.init.push(serialize_validate_binding(context.state, attribute, expression));
 			}
 
 			if (attribute.name === 'this') {
 				bind_this = attribute.expression;
 			} else {
-				if (context.state.options.dev) {
+				if (dev) {
 					binding_initializers.push(
 						b.stmt(b.call(b.id('$.add_owner_effect'), b.thunk(expression), b.id(component_name)))
 					);
@@ -894,9 +890,7 @@ function serialize_inline_component(node, component_name, context, anchor = cont
 				push_prop(
 					b.init(
 						'children',
-						context.state.options.dev
-							? b.call('$.wrap_snippet', b.id(context.state.analysis.name), slot_fn)
-							: slot_fn
+						dev ? b.call('$.wrap_snippet', b.id(context.state.analysis.name), slot_fn) : slot_fn
 					)
 				);
 
@@ -968,7 +962,7 @@ function serialize_inline_component(node, component_name, context, anchor = cont
 					b.block([
 						...binding_initializers,
 						b.stmt(
-							context.state.options.dev
+							dev
 								? b.call('$.validate_dynamic_component', b.thunk(prev(b.id('$$anchor'))))
 								: prev(b.id('$$anchor'))
 						)
@@ -1696,7 +1690,7 @@ export const template_visitors = {
 		 */
 		const add_template = (template_name, args) => {
 			let call = b.call(get_template_function(namespace, state), ...args);
-			if (context.state.options.dev) {
+			if (dev) {
 				call = b.call(
 					'$.add_locations',
 					call,
@@ -1837,7 +1831,7 @@ export const template_visitors = {
 
 			// we need to eagerly evaluate the expression in order to hit any
 			// 'Cannot access x before initialization' errors
-			if (state.options.dev) {
+			if (dev) {
 				state.init.push(b.stmt(b.call('$.get', declaration.id)));
 			}
 		} else {
@@ -1871,7 +1865,7 @@ export const template_visitors = {
 
 			// we need to eagerly evaluate the expression in order to hit any
 			// 'Cannot access x before initialization' errors
-			if (state.options.dev) {
+			if (dev) {
 				state.init.push(b.stmt(b.call('$.get', tmp)));
 			}
 
@@ -1987,7 +1981,7 @@ export const template_visitors = {
 		/** @type {SourceLocation} */
 		let location = [-1, -1];
 
-		if (context.state.options.dev) {
+		if (dev) {
 			const loc = locator(node.start);
 			if (loc) {
 				location[0] = loc.line;
@@ -2370,7 +2364,7 @@ export const template_visitors = {
 
 		const get_tag = b.thunk(/** @type {Expression} */ (context.visit(node.tag)));
 
-		if (context.state.options.dev && context.state.metadata.namespace !== 'foreign') {
+		if (dev && context.state.metadata.namespace !== 'foreign') {
 			if (node.fragment.nodes.length > 0) {
 				context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', get_tag)));
 			}
@@ -2395,7 +2389,7 @@ export const template_visitors = {
 			).body
 		);
 
-		const location = context.state.options.dev && locator(node.start);
+		const location = dev && locator(node.start);
 
 		context.state.init.push(
 			b.stmt(
@@ -2614,7 +2608,7 @@ export const template_visitors = {
 
 				// we need to eagerly evaluate the expression in order to hit any
 				// 'Cannot access x before initialization' errors
-				if (context.state.options.dev) {
+				if (dev) {
 					declarations.push(b.stmt(getter));
 				}
 
@@ -2641,7 +2635,7 @@ export const template_visitors = {
 			declarations.push(b.let(node.index, index));
 		}
 
-		if (context.state.options.dev && (flags & EACH_KEYED) !== 0) {
+		if (dev && (flags & EACH_KEYED) !== 0) {
 			context.state.init.push(
 				b.stmt(b.call('$.validate_each_keys', b.thunk(collection), key_function))
 			);
@@ -2834,7 +2828,7 @@ export const template_visitors = {
 
 				// we need to eagerly evaluate the expression in order to hit any
 				// 'Cannot access x before initialization' errors
-				if (context.state.options.dev) {
+				if (dev) {
 					declarations.push(b.stmt(getters[name]));
 				}
 			}
@@ -2848,7 +2842,7 @@ export const template_visitors = {
 		/** @type {Expression} */
 		let snippet = b.arrow(args, body);
 
-		if (context.state.options.dev) {
+		if (dev) {
 			snippet = b.call('$.wrap_snippet', b.id(context.state.analysis.name), snippet);
 		}
 
@@ -2908,7 +2902,7 @@ export const template_visitors = {
 						type === 'AwaitBlock' ||
 						type === 'KeyBlock'
 				)) &&
-			context.state.options.dev &&
+			dev &&
 			context.state.analysis.runes
 		) {
 			context.state.init.push(
diff --git a/packages/svelte/src/compiler/phases/3-transform/css/index.js b/packages/svelte/src/compiler/phases/3-transform/css/index.js
index ef9c61b79f..0b88a481a0 100644
--- a/packages/svelte/src/compiler/phases/3-transform/css/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/css/index.js
@@ -5,11 +5,11 @@ import MagicString from 'magic-string';
 import { walk } from 'zimmerframe';
 import { is_keyframes_node, regex_css_name_boundary, remove_css_prefix } from '../../css.js';
 import { merge_with_preprocessor_map } from '../../../utils/mapped_code.js';
+import { dev } from '../../../state.js';
 
 /**
  * @typedef {{
  *   code: MagicString;
- *   dev: boolean;
  *   hash: string;
  *   selector: string;
  *   keyframes: string[];
@@ -31,7 +31,6 @@ export function render_stylesheet(source, analysis, options) {
 	/** @type {State} */
 	const state = {
 		code,
-		dev: options.dev,
 		hash: analysis.css.hash,
 		selector: `.${analysis.css.hash}`,
 		keyframes: analysis.css.keyframes,
@@ -60,7 +59,7 @@ export function render_stylesheet(source, analysis, options) {
 
 	merge_with_preprocessor_map(css, options, css.map.sources[0]);
 
-	if (options.dev && options.css === 'injected' && css.code) {
+	if (dev && options.css === 'injected' && css.code) {
 		css.code += `\n/*# sourceMappingURL=${css.map.toUrl()} */`;
 	}
 
@@ -122,7 +121,7 @@ const visitors = {
 	Rule(node, { state, next, visit }) {
 		// keep empty rules in dev, because it's convenient to
 		// see them in devtools
-		if (!state.dev && is_empty(node)) {
+		if (!dev && is_empty(node)) {
 			state.code.prependRight(node.start, '/* (empty) ');
 			state.code.appendLeft(node.end, '*/');
 			escape_comment_close(node, state.code);
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
index 2cc8a5b975..70d8c6c8be 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
@@ -6,7 +6,7 @@ import { walk } from 'zimmerframe';
 import { set_scope } from '../../scope.js';
 import { extract_identifiers } from '../../../utils/ast.js';
 import * as b from '../../../utils/builders.js';
-import { filename } from '../../../state.js';
+import { dev, filename } from '../../../state.js';
 import { render_stylesheet } from '../css/index.js';
 import { AssignmentExpression } from './visitors/AssignmentExpression.js';
 import { AwaitBlock } from './visitors/AwaitBlock.js';
@@ -269,10 +269,10 @@ export function server_component(analysis, options) {
 		.../** @type {Statement[]} */ (template.body)
 	]);
 
-	let should_inject_context = analysis.needs_context || options.dev;
+	let should_inject_context = dev || analysis.needs_context;
 
 	if (should_inject_context) {
-		component_block.body.unshift(b.stmt(b.call('$.push', options.dev && b.id(analysis.name))));
+		component_block.body.unshift(b.stmt(b.call('$.push', dev && b.id(analysis.name))));
 		component_block.body.push(b.stmt(b.call('$.pop')));
 	}
 
@@ -358,7 +358,7 @@ export function server_component(analysis, options) {
 			),
 			b.export_default(b.id(analysis.name))
 		);
-	} else if (options.dev) {
+	} else if (dev) {
 		body.push(
 			component_function,
 			b.stmt(
@@ -383,7 +383,7 @@ export function server_component(analysis, options) {
 		body.push(b.export_default(component_function));
 	}
 
-	if (options.dev && filename) {
+	if (dev && filename) {
 		// add `App[$.FILENAME] = 'App.svelte'` so that we can print useful messages later
 		body.unshift(
 			b.stmt(
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
index 97484f71bc..27524b92a7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
@@ -1,6 +1,7 @@
 /** @import { ClassBody, Expression, MethodDefinition, PropertyDefinition } from 'estree' */
 /** @import { Context } from '../types.js' */
 /** @import { StateField } from '../../client/types.js' */
+import { dev } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { get_rune } from '../../../scope.js';
 
@@ -92,10 +93,7 @@ export function ClassBodyRunes(node, context) {
 					// get foo() { return this.#foo; }
 					body.push(b.method('get', definition.key, [], [b.return(b.call(member))]));
 
-					if (
-						(field.kind === 'derived' || field.kind === 'derived_call') &&
-						context.state.options.dev
-					) {
+					if (dev && (field.kind === 'derived' || field.kind === 'derived_call')) {
 						body.push(
 							b.method(
 								'set',
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
index 975038f3ac..0c5f81ae13 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
@@ -2,7 +2,7 @@
 /** @import { RegularElement, Text } from '#compiler' */
 /** @import { ComponentContext, ComponentServerTransformState } from '../types.js' */
 /** @import { Scope } from '../../../scope.js' */
-import { locator } from '../../../../state.js';
+import { dev, locator } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { VoidElements } from '../../../constants.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
@@ -55,7 +55,7 @@ export function RegularElement(node, context) {
 		context.visit(node, state);
 	}
 
-	if (state.options.dev) {
+	if (dev) {
 		const location = /** @type {Location} */ (locator(node.start));
 		state.template.push(
 			b.stmt(
@@ -99,7 +99,7 @@ export function RegularElement(node, context) {
 		state.template.push(b.literal(`</${node.name}>`));
 	}
 
-	if (state.options.dev) {
+	if (dev) {
 		state.template.push(b.stmt(b.call('$.pop_element')));
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
index 35fda98235..ac30178ab0 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
@@ -1,6 +1,7 @@
 /** @import { BlockStatement, Expression } from 'estree' */
 /** @import { SvelteElement } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
+import { dev } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { determine_namespace_for_children } from '../../utils.js';
 import { serialize_element_attributes } from './shared/element.js';
@@ -18,7 +19,7 @@ export function SvelteElement(node, context) {
 		tag = b.id(tag_id);
 	}
 
-	if (context.state.options.dev) {
+	if (dev) {
 		if (node.fragment.nodes.length > 0) {
 			context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', b.thunk(tag))));
 		}
@@ -34,7 +35,7 @@ export function SvelteElement(node, context) {
 
 	serialize_element_attributes(node, { ...context, state });
 
-	if (context.state.options.dev) {
+	if (dev) {
 		context.state.template.push(b.stmt(b.call('$.push_element', tag, b.id('$$payload'))));
 	}
 
@@ -53,7 +54,7 @@ export function SvelteElement(node, context) {
 		)
 	);
 
-	if (context.state.options.dev) {
+	if (dev) {
 		context.state.template.push(b.stmt(b.call('$.pop_element')));
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js
index d55c481f1f..11bd0acef2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/utils.js
@@ -14,6 +14,7 @@ import { extract_identifiers } from '../../utils/ast.js';
 import check_graph_for_cycles from '../2-analyze/utils/check_graph_for_cycles.js';
 import is_reference from 'is-reference';
 import { set_scope } from '../scope.js';
+import { dev } from '../../state.js';
 
 /**
  * @param {Node} node
@@ -424,7 +425,7 @@ export function transform_inspect_rune(node, context) {
 	const { state, visit } = context;
 	const as_fn = state.options.generate === 'client';
 
-	if (!state.options.dev) return b.unary('void', b.literal(0));
+	if (!dev) return b.unary('void', b.literal(0));
 
 	if (node.callee.type === 'MemberExpression') {
 		const raw_inspect_args = /** @type {CallExpression} */ (node.callee.object).arguments;
diff --git a/packages/svelte/src/compiler/state.js b/packages/svelte/src/compiler/state.js
index 459c9a56c3..13b6f95545 100644
--- a/packages/svelte/src/compiler/state.js
+++ b/packages/svelte/src/compiler/state.js
@@ -20,6 +20,12 @@ export let filename;
  */
 export let source;
 
+/**
+ * True if compiling with `dev: true`
+ * @type {boolean}
+ */
+export let dev;
+
 export let locator = getLocator('', { offsetLine: 1 });
 
 /** @type {NonNullable<CompileOptions['warningFilter']>} */
@@ -61,13 +67,15 @@ export function reset_warning_filter(fn = () => true) {
 
 /**
  * @param {string} _source
- * @param {{ filename?: string, rootDir?: string }} options
+ * @param {{ dev?: boolean; filename?: string; rootDir?: string }} options
  */
 export function reset(_source, options) {
 	source = _source;
 	const root_dir = options.rootDir?.replace(/\\/g, '/');
 	filename = options.filename?.replace(/\\/g, '/');
 
+	dev = !!options.dev;
+
 	if (
 		typeof filename === 'string' &&
 		typeof root_dir === 'string' &&

From 64d2a2e20cae31acf2a318f9be22bef846b1abcf Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Wed, 31 Jul 2024 04:45:59 +0200
Subject: [PATCH 038/196] feat: allow ignoring runtime warnings (#12608)

* feat: allow ignoring binding_property_non_reactive

* chore: add comments before `to_ignore`

* chore: fix warnings regeneration

* chore: include client warnings code in svelte ignore extract

* feat: allow ignoring state_snapshot_uncloneable

* chore: abstract ignore into function

* feat: allow skipping of `hydration_attribute_changed`

* feat: allow skip of `hydration_html_changed`

* feat: allow skipping `ownership_invalid_binding`

* chore: revert extracting codes and use hardcoded list

* chore: update changeset

* feat: allow skipping `ownership_invalid_mutation`

* is_to_ignore -> is_ignored

* make is_ignored type safe

* tweak

* tweak naming

* tweak

* remove extra args

* comment is redundant, code contains enough information

* remove more unwanted args

* lint

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/large-emus-cough.md                |  5 +
 .../phases/3-transform/client/utils.js        | 70 ++++++++-----
 .../3-transform/client/visitors/global.js     | 16 ++-
 .../client/visitors/javascript-runes.js       | 20 ++--
 .../3-transform/client/visitors/template.js   | 99 ++++++++++++-------
 .../server/visitors/CallExpression.js         |  9 +-
 packages/svelte/src/compiler/state.js         | 10 ++
 .../compiler/utils/extract_svelte_ignore.js   | 13 ++-
 packages/svelte/src/constants.js              | 11 +++
 .../src/internal/client/dev/ownership.js      | 23 ++++-
 .../src/internal/client/dom/blocks/html.js    |  5 +-
 .../client/dom/elements/attributes.js         | 12 ++-
 packages/svelte/src/internal/client/index.js  |  3 +-
 packages/svelte/src/internal/shared/clone.js  |  7 +-
 .../_config.js                                | 11 +++
 .../main.svelte                               |  6 ++
 .../_config.js                                | 11 +++
 .../main.svelte                               |  6 ++
 .../_config.js                                | 16 +++
 .../main.svelte                               |  6 ++
 .../hydration-html-changed-ignored/_config.js | 16 +++
 .../main.svelte                               |  6 ++
 .../Child.svelte                              |  5 +
 .../Parent.svelte                             |  8 ++
 .../_config.js                                | 11 +++
 .../main.svelte                               |  6 ++
 .../Child.svelte                              | 45 +++++++++
 .../_config.js                                | 19 ++++
 .../main.svelte                               |  9 ++
 .../_config.js                                | 11 +++
 .../main.svelte                               | 11 +++
 31 files changed, 419 insertions(+), 87 deletions(-)
 create mode 100644 .changeset/large-emus-cough.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored-2/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored-2/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/hydration-attribute-changed-ignored/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/hydration-attribute-changed-ignored/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/hydration-html-changed-ignored/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/hydration-html-changed-ignored/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/Parent.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-ignored/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-ignored/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-ignored/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-snapshot-uncloneable-ignored/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-snapshot-uncloneable-ignored/main.svelte

diff --git a/.changeset/large-emus-cough.md b/.changeset/large-emus-cough.md
new file mode 100644
index 0000000000..b282b5faec
--- /dev/null
+++ b/.changeset/large-emus-cough.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: allow ignoring runtime warnings
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 825452fec8..704ccbe6d8 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -16,7 +16,7 @@ import {
 	PROPS_IS_RUNES,
 	PROPS_IS_UPDATED
 } from '../../../../constants.js';
-import { dev } from '../../../state.js';
+import { is_ignored, dev } from '../../../state.js';
 
 /**
  * @template {ClientTransformState} State
@@ -282,6 +282,22 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 		);
 	}
 
+	/**
+	 * @param {any} serialized
+	 * @returns
+	 */
+	function maybe_skip_ownership_validation(serialized) {
+		if (is_ignored(node, 'ownership_invalid_mutation')) {
+			return b.call('$.skip_ownership_validation', b.thunk(serialized));
+		}
+
+		return serialized;
+	}
+
+	if (binding.kind === 'derived') {
+		return maybe_skip_ownership_validation(fallback());
+	}
+
 	const is_store = binding.kind === 'store_sub';
 	const left_name = is_store ? left.name.slice(1) : left.name;
 
@@ -382,11 +398,13 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 					return /** @type {Expression} */ (visit(node));
 				}
 
-				return b.call(
-					'$.store_mutate',
-					serialize_get_binding(b.id(left_name), state),
-					b.assignment(node.operator, /** @type {Pattern}} */ (visit_node(node.left)), value),
-					b.call('$.untrack', b.id('$' + left_name))
+				return maybe_skip_ownership_validation(
+					b.call(
+						'$.store_mutate',
+						serialize_get_binding(b.id(left_name), state),
+						b.assignment(node.operator, /** @type {Pattern}} */ (visit_node(node.left)), value),
+						b.call('$.untrack', b.id('$' + left_name))
+					)
 				);
 			} else if (
 				!state.analysis.runes ||
@@ -394,16 +412,20 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 				(binding.mutated && binding.kind === 'bindable_prop')
 			) {
 				if (binding.kind === 'bindable_prop') {
-					return b.call(
-						left,
-						b.assignment(node.operator, /** @type {Pattern} */ (visit(node.left)), value),
-						b.true
+					return maybe_skip_ownership_validation(
+						b.call(
+							left,
+							b.assignment(node.operator, /** @type {Pattern} */ (visit(node.left)), value),
+							b.true
+						)
 					);
 				} else {
-					return b.call(
-						'$.mutate',
-						b.id(left_name),
-						b.assignment(node.operator, /** @type {Pattern} */ (visit(node.left)), value)
+					return maybe_skip_ownership_validation(
+						b.call(
+							'$.mutate',
+							b.id(left_name),
+							b.assignment(node.operator, /** @type {Pattern} */ (visit(node.left)), value)
+						)
 					);
 				}
 			} else if (
@@ -411,16 +433,20 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 				prefix != null &&
 				(node.operator === '+=' || node.operator === '-=')
 			) {
-				return b.update(
-					node.operator === '+=' ? '++' : '--',
-					/** @type {Expression} */ (visit(node.left)),
-					prefix
+				return maybe_skip_ownership_validation(
+					b.update(
+						node.operator === '+=' ? '++' : '--',
+						/** @type {Expression} */ (visit(node.left)),
+						prefix
+					)
 				);
 			} else {
-				return b.assignment(
-					node.operator,
-					/** @type {Pattern} */ (visit(node.left)),
-					/** @type {Expression} */ (visit(node.right))
+				return maybe_skip_ownership_validation(
+					b.assignment(
+						node.operator,
+						/** @type {Pattern} */ (visit(node.left)),
+						/** @type {Expression} */ (visit(node.right))
+					)
 				);
 			}
 		}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/global.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/global.js
index 8d4698c663..ac4fcc16c0 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/global.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/global.js
@@ -3,6 +3,7 @@
 import is_reference from 'is-reference';
 import { serialize_get_binding, serialize_set_binding } from '../utils.js';
 import * as b from '../../../../utils/builders.js';
+import { is_ignored } from '../../../../state.js';
 
 /** @type {Visitors} */
 export const global_visitors = {
@@ -115,6 +116,15 @@ export const global_visitors = {
 
 			return b.call(fn, ...args);
 		} else {
+			/** @param {any} serialized */
+			function maybe_skip_ownership_validation(serialized) {
+				if (is_ignored(node, 'ownership_invalid_mutation')) {
+					return b.call('$.skip_ownership_validation', b.thunk(serialized));
+				}
+
+				return serialized;
+			}
+
 			// turn it into an IIFEE assignment expression: i++ -> (() => { const $$value = i; i+=1; return $$value; })
 			const assignment = b.assignment(
 				node.operator === '++' ? '+=' : '-=',
@@ -130,9 +140,9 @@ export const global_visitors = {
 			const value = /** @type {Expression} */ (visit(argument));
 			if (serialized_assignment === assignment) {
 				// No change to output -> nothing to transform -> we can keep the original update expression
-				return next();
+				return maybe_skip_ownership_validation(next());
 			} else if (context.state.analysis.runes) {
-				return serialized_assignment;
+				return maybe_skip_ownership_validation(serialized_assignment);
 			} else {
 				/** @type {Statement[]} */
 				let statements;
@@ -146,7 +156,7 @@ export const global_visitors = {
 						b.return(b.id(tmp_id))
 					];
 				}
-				return b.call(b.thunk(b.block(statements)));
+				return maybe_skip_ownership_validation(b.call(b.thunk(b.block(statements))));
 			}
 		}
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
index e8b8a20de4..77c889ac8e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
@@ -1,10 +1,13 @@
 /** @import { CallExpression, Expression, Identifier, Literal, MethodDefinition, PrivateIdentifier, PropertyDefinition, VariableDeclarator } from 'estree' */
 /** @import { Binding } from '#compiler' */
 /** @import { ComponentVisitors, StateField } from '../types.js' */
+import { dev, is_ignored } from '../../../../state.js';
+import * as assert from '../../../../utils/assert.js';
+import { extract_paths } from '../../../../utils/ast.js';
+import * as b from '../../../../utils/builders.js';
+import { regex_invalid_identifier_chars } from '../../../patterns.js';
 import { get_rune } from '../../../scope.js';
 import { is_hoistable_function, transform_inspect_rune } from '../../utils.js';
-import * as b from '../../../../utils/builders.js';
-import * as assert from '../../../../utils/assert.js';
 import {
 	get_prop_source,
 	is_prop_source,
@@ -12,9 +15,6 @@ import {
 	serialize_proxy_reassignment,
 	should_proxy_or_freeze
 } from '../utils.js';
-import { extract_paths } from '../../../../utils/ast.js';
-import { regex_invalid_identifier_chars } from '../../../patterns.js';
-import { dev } from '../../../../state.js';
 
 /** @type {ComponentVisitors} */
 export const javascript_visitors_runes = {
@@ -197,7 +197,9 @@ export const javascript_visitors_runes = {
 							b.call(
 								'$.add_owner',
 								b.call('$.get', b.member(b.this, b.private_id(name))),
-								b.id('owner')
+								b.id('owner'),
+								b.literal(false),
+								is_ignored(node, 'ownership_invalid_binding') && b.true
 							)
 						)
 					),
@@ -446,7 +448,11 @@ export const javascript_visitors_runes = {
 		}
 
 		if (rune === '$state.snapshot') {
-			return b.call('$.snapshot', /** @type {Expression} */ (context.visit(node.arguments[0])));
+			return b.call(
+				'$.snapshot',
+				/** @type {Expression} */ (context.visit(node.arguments[0])),
+				is_ignored(node, 'state_snapshot_uncloneable') && b.true
+			);
 		}
 
 		if (rune === '$state.is') {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index dacb810b47..7d2de190e9 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -3,6 +3,26 @@
 /** @import { SourceLocation } from '#shared' */
 /** @import { Scope } from '../../../scope.js' */
 /** @import { ComponentClientTransformState, ComponentContext, ComponentVisitors } from '../types.js' */
+import is_reference from 'is-reference';
+import { walk } from 'zimmerframe';
+import {
+	AttributeAliases,
+	DOMBooleanAttributes,
+	EACH_INDEX_REACTIVE,
+	EACH_IS_ANIMATED,
+	EACH_IS_CONTROLLED,
+	EACH_IS_STRICT_EQUALS,
+	EACH_ITEM_REACTIVE,
+	EACH_KEYED,
+	is_capture_event,
+	TEMPLATE_FRAGMENT,
+	TEMPLATE_USE_IMPORT_NODE,
+	TRANSITION_GLOBAL,
+	TRANSITION_IN,
+	TRANSITION_OUT
+} from '../../../../../constants.js';
+import { escape_html } from '../../../../../escaping.js';
+import { dev, is_ignored, locator } from '../../../../state.js';
 import {
 	extract_identifiers,
 	extract_paths,
@@ -13,8 +33,9 @@ import {
 	object,
 	unwrap_optional
 } from '../../../../utils/ast.js';
+import * as b from '../../../../utils/builders.js';
+import { sanitize_template_string } from '../../../../utils/sanitize_template_string.js';
 import { binding_properties } from '../../../bindings.js';
-import { clean_nodes, determine_namespace_for_children, infer_namespace } from '../../utils.js';
 import {
 	DOMProperties,
 	LoadErrorElements,
@@ -22,39 +43,18 @@ import {
 	VoidElements
 } from '../../../constants.js';
 import { is_custom_element_node, is_element_node } from '../../../nodes.js';
-import * as b from '../../../../utils/builders.js';
+import { regex_is_valid_identifier } from '../../../patterns.js';
+import { clean_nodes, determine_namespace_for_children, infer_namespace } from '../../utils.js';
 import {
-	with_loc,
+	create_derived,
+	create_derived_block_argument,
 	function_visitor,
 	get_assignment_value,
 	serialize_get_binding,
 	serialize_set_binding,
-	create_derived,
-	create_derived_block_argument
+	with_loc
 } from '../utils.js';
-import {
-	AttributeAliases,
-	DOMBooleanAttributes,
-	EACH_INDEX_REACTIVE,
-	EACH_IS_ANIMATED,
-	EACH_IS_CONTROLLED,
-	EACH_IS_STRICT_EQUALS,
-	EACH_ITEM_REACTIVE,
-	EACH_KEYED,
-	is_capture_event,
-	TEMPLATE_FRAGMENT,
-	TEMPLATE_USE_IMPORT_NODE,
-	TRANSITION_GLOBAL,
-	TRANSITION_IN,
-	TRANSITION_OUT
-} from '../../../../../constants.js';
-import { escape_html } from '../../../../../escaping.js';
-import { regex_is_valid_identifier } from '../../../patterns.js';
 import { javascript_visitors_runes } from './javascript-runes.js';
-import { sanitize_template_string } from '../../../../utils/sanitize_template_string.js';
-import { walk } from 'zimmerframe';
-import { dev, locator } from '../../../../state.js';
-import is_reference from 'is-reference';
 
 /**
  * @param {RegularElement | SvelteElement} element
@@ -324,7 +324,8 @@ function serialize_element_spread_attributes(
 				b.id(id),
 				b.object(values),
 				lowercase_attributes,
-				b.literal(context.state.analysis.css.hash)
+				b.literal(context.state.analysis.css.hash),
+				is_ignored(element, 'hydration_attribute_changed') && b.true
 			)
 		)
 	);
@@ -489,7 +490,15 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 
 	// The foreign namespace doesn't have any special handling, everything goes through the attr function
 	if (context.state.metadata.namespace === 'foreign') {
-		const statement = b.stmt(b.call('$.set_attribute', node_id, b.literal(name), value));
+		const statement = b.stmt(
+			b.call(
+				'$.set_attribute',
+				node_id,
+				b.literal(name),
+				value,
+				is_ignored(element, 'hydration_attribute_changed') && b.true
+			)
+		);
 
 		if (attribute.metadata.expression.has_state) {
 			const id = state.scope.generate(`${node_id.name}_${name}`);
@@ -525,7 +534,15 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 		update = b.stmt(b.assignment('=', b.member(node_id, b.id(name)), value));
 	} else {
 		const callee = name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute';
-		update = b.stmt(b.call(callee, node_id, b.literal(name), value));
+		update = b.stmt(
+			b.call(
+				callee,
+				node_id,
+				b.literal(name),
+				value,
+				is_ignored(element, 'hydration_attribute_changed') && b.true
+			)
+		);
 	}
 
 	if (attribute.metadata.expression.has_state) {
@@ -780,7 +797,12 @@ function serialize_inline_component(node, component_name, context, anchor = cont
 		} else if (attribute.type === 'BindDirective') {
 			const expression = /** @type {Expression} */ (context.visit(attribute.expression));
 
-			if (dev && expression.type === 'MemberExpression' && context.state.analysis.runes) {
+			if (
+				dev &&
+				expression.type === 'MemberExpression' &&
+				context.state.analysis.runes &&
+				!is_ignored(node, 'binding_property_non_reactive')
+			) {
 				context.state.init.push(serialize_validate_binding(context.state, attribute, expression));
 			}
 
@@ -789,7 +811,14 @@ function serialize_inline_component(node, component_name, context, anchor = cont
 			} else {
 				if (dev) {
 					binding_initializers.push(
-						b.stmt(b.call(b.id('$.add_owner_effect'), b.thunk(expression), b.id(component_name)))
+						b.stmt(
+							b.call(
+								b.id('$.add_owner_effect'),
+								b.thunk(expression),
+								b.id(component_name),
+								is_ignored(node, 'ownership_invalid_binding') && b.true
+							)
+						)
 					);
 				}
 
@@ -1811,7 +1840,8 @@ export const template_visitors = {
 					context.state.node,
 					b.thunk(/** @type {Expression} */ (context.visit(node.expression))),
 					b.literal(context.state.metadata.namespace === 'svg'),
-					b.literal(context.state.metadata.namespace === 'mathml')
+					b.literal(context.state.metadata.namespace === 'mathml'),
+					is_ignored(node, 'hydration_html_changed') && b.true
 				)
 			)
 		);
@@ -2903,7 +2933,8 @@ export const template_visitors = {
 						type === 'KeyBlock'
 				)) &&
 			dev &&
-			context.state.analysis.runes
+			context.state.analysis.runes &&
+			!is_ignored(node, 'binding_property_non_reactive')
 		) {
 			context.state.init.push(
 				serialize_validate_binding(
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
index 91ff0f6771..4b15a772c9 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
@@ -1,7 +1,8 @@
 /** @import { CallExpression, Expression } from 'estree' */
 /** @import { Context } from '../types.js' */
-import { get_rune } from '../../../scope.js';
+import { is_ignored } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
+import { get_rune } from '../../../scope.js';
 import { transform_inspect_rune } from '../../utils.js';
 
 /**
@@ -25,7 +26,11 @@ export function CallExpression(node, context) {
 	}
 
 	if (rune === '$state.snapshot') {
-		return b.call('$.snapshot', /** @type {Expression} */ (context.visit(node.arguments[0])));
+		return b.call(
+			'$.snapshot',
+			/** @type {Expression} */ (context.visit(node.arguments[0])),
+			is_ignored(node, 'state_snapshot_uncloneable') && b.true
+		);
 	}
 
 	if (rune === '$state.is') {
diff --git a/packages/svelte/src/compiler/state.js b/packages/svelte/src/compiler/state.js
index 13b6f95545..3359b899bf 100644
--- a/packages/svelte/src/compiler/state.js
+++ b/packages/svelte/src/compiler/state.js
@@ -65,6 +65,16 @@ export function reset_warning_filter(fn = () => true) {
 	warning_filter = fn;
 }
 
+/**
+ *
+ * @param {SvelteNode | NodeLike} node
+ * @param {import('../constants.js').IGNORABLE_RUNTIME_WARNINGS[number]} code
+ * @returns
+ */
+export function is_ignored(node, code) {
+	return dev && !!ignore_map.get(node)?.some((codes) => codes.has(code));
+}
+
 /**
  * @param {string} _source
  * @param {{ dev?: boolean; filename?: string; rootDir?: string }} options
diff --git a/packages/svelte/src/compiler/utils/extract_svelte_ignore.js b/packages/svelte/src/compiler/utils/extract_svelte_ignore.js
index ff440d4c41..2f0d387307 100644
--- a/packages/svelte/src/compiler/utils/extract_svelte_ignore.js
+++ b/packages/svelte/src/compiler/utils/extract_svelte_ignore.js
@@ -1,3 +1,4 @@
+import { IGNORABLE_RUNTIME_WARNINGS } from '../../constants.js';
 import fuzzymatch from '../phases/1-parse/utils/fuzzymatch.js';
 import * as w from '../warnings.js';
 
@@ -16,6 +17,8 @@ const replacements = {
 	'unused-export-let': 'export_let_unused'
 };
 
+const codes = w.codes.concat(IGNORABLE_RUNTIME_WARNINGS);
+
 /**
  * @param {number} offset
  * @param {string} text
@@ -37,7 +40,7 @@ export function extract_svelte_ignore(offset, text, runes) {
 		for (const match of text.slice(length).matchAll(/([\w$-]+)(,)?/gm)) {
 			const code = match[1];
 
-			if (w.codes.includes(code)) {
+			if (codes.includes(code)) {
 				ignores.push(code);
 			} else {
 				const replacement = replacements[code] ?? code.replace(/-/g, '_');
@@ -46,10 +49,10 @@ export function extract_svelte_ignore(offset, text, runes) {
 				const start = offset + /** @type {number} */ (match.index);
 				const end = start + code.length;
 
-				if (w.codes.includes(replacement)) {
+				if (codes.includes(replacement)) {
 					w.legacy_code({ start, end }, code, replacement);
 				} else {
-					const suggestion = fuzzymatch(code, w.codes);
+					const suggestion = fuzzymatch(code, codes);
 					w.unknown_code({ start, end }, code, suggestion);
 				}
 			}
@@ -65,10 +68,10 @@ export function extract_svelte_ignore(offset, text, runes) {
 
 			ignores.push(code);
 
-			if (!w.codes.includes(code)) {
+			if (!codes.includes(code)) {
 				const replacement = replacements[code] ?? code.replace(/-/g, '_');
 
-				if (w.codes.includes(replacement)) {
+				if (codes.includes(replacement)) {
 					ignores.push(replacement);
 				}
 			}
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index 0cc2102925..12b17ecb30 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -199,6 +199,17 @@ const void_element_names = [
 	'wbr'
 ];
 
+// we use a list of ignorable runtime warnings because not every runtime warning
+// can be ignored and we want to keep the validation for svelte-ignore in place
+export const IGNORABLE_RUNTIME_WARNINGS = /** @type {const} */ ([
+	'state_snapshot_uncloneable',
+	'binding_property_non_reactive',
+	'hydration_attribute_changed',
+	'hydration_html_changed',
+	'ownership_invalid_binding',
+	'ownership_invalid_mutation'
+]);
+
 /** @param {string} name */
 export function is_void(name) {
 	return void_element_names.includes(name) || name.toLowerCase() === '!doctype';
diff --git a/packages/svelte/src/internal/client/dev/ownership.js b/packages/svelte/src/internal/client/dev/ownership.js
index 7d10118788..62d4a43e94 100644
--- a/packages/svelte/src/internal/client/dev/ownership.js
+++ b/packages/svelte/src/internal/client/dev/ownership.js
@@ -108,15 +108,16 @@ export function mark_module_end(component) {
  * @param {any} object
  * @param {any} owner
  * @param {boolean} [global]
+ * @param {boolean} [skip_warning]
  */
-export function add_owner(object, owner, global = false) {
+export function add_owner(object, owner, global = false, skip_warning = false) {
 	if (object && !global) {
 		const component = dev_current_component_function;
 		const metadata = object[STATE_SYMBOL];
 		if (metadata && !has_owner(metadata, component)) {
 			let original = get_owner(metadata);
 
-			if (owner[FILENAME] !== component[FILENAME]) {
+			if (owner[FILENAME] !== component[FILENAME] && !skip_warning) {
 				w.ownership_invalid_binding(component[FILENAME], owner[FILENAME], original[FILENAME]);
 			}
 		}
@@ -128,10 +129,11 @@ export function add_owner(object, owner, global = false) {
 /**
  * @param {() => unknown} get_object
  * @param {any} Component
+ * @param {boolean} [skip_warning]
  */
-export function add_owner_effect(get_object, Component) {
+export function add_owner_effect(get_object, Component, skip_warning = false) {
 	user_pre_effect(() => {
-		add_owner(get_object(), Component);
+		add_owner(get_object(), Component, false, skip_warning);
 	});
 }
 
@@ -227,10 +229,23 @@ function get_owner(metadata) {
 	);
 }
 
+let skip = false;
+
+/**
+ * @param {() => any} fn
+ */
+export function skip_ownership_validation(fn) {
+	skip = true;
+	fn();
+	skip = false;
+}
+
 /**
  * @param {ProxyMetadata} metadata
  */
 export function check_ownership(metadata) {
+	if (skip) return;
+
 	const component = get_component();
 
 	if (component && !has_owner(metadata, component)) {
diff --git a/packages/svelte/src/internal/client/dom/blocks/html.js b/packages/svelte/src/internal/client/dom/blocks/html.js
index 3c4051261e..63ca704c0f 100644
--- a/packages/svelte/src/internal/client/dom/blocks/html.js
+++ b/packages/svelte/src/internal/client/dom/blocks/html.js
@@ -37,9 +37,10 @@ function check_hash(element, server_hash, value) {
  * @param {() => string} get_value
  * @param {boolean} svg
  * @param {boolean} mathml
+ * @param {boolean} [skip_warning]
  * @returns {void}
  */
-export function html(node, get_value, svg, mathml) {
+export function html(node, get_value, svg, mathml, skip_warning) {
 	var anchor = node;
 
 	var value = '';
@@ -78,7 +79,7 @@ export function html(node, get_value, svg, mathml) {
 					throw HYDRATION_ERROR;
 				}
 
-				if (DEV) {
+				if (DEV && !skip_warning) {
 					check_hash(/** @type {Element} */ (next.parentNode), hash, value);
 				}
 
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 1321470062..6288aac197 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -82,8 +82,9 @@ export function set_checked(element, checked) {
  * @param {Element} element
  * @param {string} attribute
  * @param {string | null} value
+ * @param {boolean} [skip_warning]
  */
-export function set_attribute(element, attribute, value) {
+export function set_attribute(element, attribute, value, skip_warning) {
 	value = value == null ? null : value + '';
 
 	// @ts-expect-error
@@ -93,7 +94,9 @@ export function set_attribute(element, attribute, value) {
 		attributes[attribute] = element.getAttribute(attribute);
 
 		if (attribute === 'src' || attribute === 'href' || attribute === 'srcset') {
-			check_src_in_dev_hydration(element, attribute, value);
+			if (!skip_warning) {
+				check_src_in_dev_hydration(element, attribute, value);
+			}
 
 			// If we reset these attributes, they would result in another network request, which we want to avoid.
 			// We assume they are the same between client and server as checking if they are equal is expensive
@@ -150,9 +153,10 @@ export function set_custom_element_data(node, prop, value) {
  * @param {Record<string, any>} next New attributes - this function mutates this object
  * @param {boolean} lowercase_attributes
  * @param {string} css_hash
+ * @param {boolean} [skip_warning]
  * @returns {Record<string, any>}
  */
-export function set_attributes(element, prev, next, lowercase_attributes, css_hash) {
+export function set_attributes(element, prev, next, lowercase_attributes, css_hash, skip_warning) {
 	var has_hash = css_hash.length !== 0;
 	var current = prev || {};
 	var is_option_element = element.tagName === 'OPTION';
@@ -274,7 +278,7 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
 
 			if (setters.includes(name)) {
 				if (hydrating && (name === 'src' || name === 'href' || name === 'srcset')) {
-					check_src_in_dev_hydration(element, name, value);
+					if (!skip_warning) check_src_in_dev_hydration(element, name, value);
 				} else {
 					// @ts-ignore
 					element[name] = value;
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index c70cb6674b..edd50bff32 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -6,7 +6,8 @@ export {
 	add_owner,
 	mark_module_start,
 	mark_module_end,
-	add_owner_effect
+	add_owner_effect,
+	skip_ownership_validation
 } from './dev/ownership.js';
 export { check_target, legacy_api } from './dev/legacy.js';
 export { inspect } from './dev/inspect.js';
diff --git a/packages/svelte/src/internal/shared/clone.js b/packages/svelte/src/internal/shared/clone.js
index 9983ef619a..9027c15c4f 100644
--- a/packages/svelte/src/internal/shared/clone.js
+++ b/packages/svelte/src/internal/shared/clone.js
@@ -14,18 +14,19 @@ const empty = [];
 /**
  * @template T
  * @param {T} value
+ * @param {boolean} [skip_warning]
  * @returns {Snapshot<T>}
  */
-export function snapshot(value) {
+export function snapshot(value, skip_warning = false) {
 	if (DEV) {
 		/** @type {string[]} */
 		const paths = [];
 
 		const copy = clone(value, new Map(), '', paths);
-		if (paths.length === 1 && paths[0] === '') {
+		if (paths.length === 1 && paths[0] === '' && !skip_warning) {
 			// value could not be cloned
 			w.state_snapshot_uncloneable();
-		} else if (paths.length > 0) {
+		} else if (paths.length > 0 && !skip_warning) {
 			// some properties could not be cloned
 			const slice = paths.length > 10 ? paths.slice(0, 7) : paths.slice(0, 10);
 			const excess = paths.length - slice.length;
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored-2/_config.js b/packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored-2/_config.js
new file mode 100644
index 0000000000..e93067eb9d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored-2/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		dev: true
+	},
+	async test({ warnings, assert }) {
+		assert.deepEqual(warnings, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored-2/main.svelte
new file mode 100644
index 0000000000..218cfe7506
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored-2/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let arr = [];
+</script>
+
+<!-- svelte-ignore binding_property_non_reactive -->
+<input bind:value={arr[0]} />
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored/_config.js b/packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored/_config.js
new file mode 100644
index 0000000000..e93067eb9d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		dev: true
+	},
+	async test({ warnings, assert }) {
+		assert.deepEqual(warnings, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored/main.svelte b/packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored/main.svelte
new file mode 100644
index 0000000000..4cbd69d06b
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-property-non-reactive-ignored/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let arr = [];
+</script>
+
+<!-- svelte-ignore binding_property_non_reactive -->
+<svelte:component this={undefined} bind:this={arr[0]} />
diff --git a/packages/svelte/tests/runtime-runes/samples/hydration-attribute-changed-ignored/_config.js b/packages/svelte/tests/runtime-runes/samples/hydration-attribute-changed-ignored/_config.js
new file mode 100644
index 0000000000..6bbad1bf64
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydration-attribute-changed-ignored/_config.js
@@ -0,0 +1,16 @@
+import { test } from '../../test';
+
+export default test({
+	server_props: {
+		browser: false
+	},
+	props: {
+		browser: true
+	},
+	compileOptions: {
+		dev: true
+	},
+	async test({ warnings, assert }) {
+		assert.deepEqual(warnings, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/hydration-attribute-changed-ignored/main.svelte b/packages/svelte/tests/runtime-runes/samples/hydration-attribute-changed-ignored/main.svelte
new file mode 100644
index 0000000000..c06bf95341
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydration-attribute-changed-ignored/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let { browser } = $props();
+</script>
+
+<!-- svelte-ignore hydration_attribute_changed -->
+<img src={browser ? 'a' : 'b'} alt="" />
diff --git a/packages/svelte/tests/runtime-runes/samples/hydration-html-changed-ignored/_config.js b/packages/svelte/tests/runtime-runes/samples/hydration-html-changed-ignored/_config.js
new file mode 100644
index 0000000000..6bbad1bf64
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydration-html-changed-ignored/_config.js
@@ -0,0 +1,16 @@
+import { test } from '../../test';
+
+export default test({
+	server_props: {
+		browser: false
+	},
+	props: {
+		browser: true
+	},
+	compileOptions: {
+		dev: true
+	},
+	async test({ warnings, assert }) {
+		assert.deepEqual(warnings, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/hydration-html-changed-ignored/main.svelte b/packages/svelte/tests/runtime-runes/samples/hydration-html-changed-ignored/main.svelte
new file mode 100644
index 0000000000..fc1e4f4e50
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/hydration-html-changed-ignored/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	let { browser } = $props();
+</script>
+
+<!-- svelte-ignore hydration_html_changed -->
+{@html browser ? 'a' : 'b'}
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/Child.svelte b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/Child.svelte
new file mode 100644
index 0000000000..78b82caed9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	const { test = $bindable() } = $props();
+</script>
+
+{test}
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/Parent.svelte b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/Parent.svelte
new file mode 100644
index 0000000000..1a724a3832
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/Parent.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Child from './Child.svelte';
+
+	let { test } = $props();
+</script>
+
+<!-- svelte-ignore ownership_invalid_binding -->
+<Child bind:test />
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/_config.js b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/_config.js
new file mode 100644
index 0000000000..e93067eb9d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		dev: true
+	},
+	async test({ warnings, assert }) {
+		assert.deepEqual(warnings, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/main.svelte b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/main.svelte
new file mode 100644
index 0000000000..e0da1dfcab
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-binding-ignored/main.svelte
@@ -0,0 +1,6 @@
+<script>
+	import Parent from './Parent.svelte';
+	let test = $state({ test: '' });
+</script>
+
+<Parent {test} />
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-ignored/Child.svelte b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-ignored/Child.svelte
new file mode 100644
index 0000000000..32bcef5250
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-ignored/Child.svelte
@@ -0,0 +1,45 @@
+<script>
+	let { test, store } = $props();
+	let der = $derived(test);
+	let state = $state(test);
+</script>
+
+<button
+	onclick={() => {
+		//svelte-ignore ownership_invalid_mutation
+		test.test = Math.random();
+		//svelte-ignore ownership_invalid_mutation
+		test.test++;
+	}}
+>
+</button>
+
+<button
+	onclick={() => {
+		//svelte-ignore ownership_invalid_mutation
+		der.test = Math.random();
+		//svelte-ignore ownership_invalid_mutation
+		der.test++;
+	}}
+>
+</button>
+
+<button
+	onclick={() => {
+		//svelte-ignore ownership_invalid_mutation
+		state.test = Math.random();
+		//svelte-ignore ownership_invalid_mutation
+		state.test++;
+	}}
+>
+</button>
+
+<button
+	onclick={() => {
+		//svelte-ignore ownership_invalid_mutation
+		$store.test = Math.random();
+		//svelte-ignore ownership_invalid_mutation
+		$store.test++;
+	}}
+>
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-ignored/_config.js b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-ignored/_config.js
new file mode 100644
index 0000000000..44ac85aa28
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-ignored/_config.js
@@ -0,0 +1,19 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		dev: true
+	},
+	async test({ warnings, assert, target }) {
+		const [btn1, btn2, btn3, btn4] = target.querySelectorAll('button');
+		flushSync(() => {
+			btn1.click();
+			btn2.click();
+			btn3.click();
+			btn4.click();
+		});
+		assert.deepEqual(warnings, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-ignored/main.svelte b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-ignored/main.svelte
new file mode 100644
index 0000000000..b642dd32cf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/ownership-invalid-mutation-ignored/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { writable } from 'svelte/store';
+	import Child from './Child.svelte';
+	let test = $state({ test: 'a' });
+
+	const store = writable(test);
+</script>
+
+<Child {test} {store} />
diff --git a/packages/svelte/tests/runtime-runes/samples/state-snapshot-uncloneable-ignored/_config.js b/packages/svelte/tests/runtime-runes/samples/state-snapshot-uncloneable-ignored/_config.js
new file mode 100644
index 0000000000..e93067eb9d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-snapshot-uncloneable-ignored/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		dev: true
+	},
+	async test({ warnings, assert }) {
+		assert.deepEqual(warnings, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-snapshot-uncloneable-ignored/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-snapshot-uncloneable-ignored/main.svelte
new file mode 100644
index 0000000000..4bc1c1d1a0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-snapshot-uncloneable-ignored/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let arr = $state({
+		test: () => {}
+	});
+
+	// svelte-ignore state_snapshot_uncloneable
+	$state.snapshot(arr);
+</script>
+
+<!-- svelte-ignore state_snapshot_uncloneable -->
+<div {...$state.snapshot(arr)}>a</div>

From 5a05f6371a994286626a44168cb2c02f8a2ad567 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 31 Jul 2024 05:02:53 +0200
Subject: [PATCH 039/196] chore: perf tweaks for actions/styles/classes
 (#12654)

* chore: perf tweaks for actions/styles/classes

- check if we really need to add/remove the class (calling `includes` first is cheaper than always setting/removing it)
- check if we really need to update a style (calling `getPropertyValue/setProperty` is expensive)
- check if we should call the action's update function (this is not only a perf tweak but also a correctness fix)

closes #12652

* changeset

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/sharp-fishes-serve.md              |  5 +++
 .../3-transform/client/visitors/template.js   | 32 ++++++++++++++++---
 .../internal/client/dom/elements/actions.js   |  6 +++-
 .../src/internal/client/dom/elements/class.js |  2 ++
 .../src/internal/client/dom/elements/style.js | 22 +++++++++----
 5 files changed, 55 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/sharp-fishes-serve.md

diff --git a/.changeset/sharp-fishes-serve.md b/.changeset/sharp-fishes-serve.md
new file mode 100644
index 0000000000..89c8063606
--- /dev/null
+++ b/.changeset/sharp-fishes-serve.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+feat: perf tweaks for actions/styles/classes
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index 7d2de190e9..dfe3e93743 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -83,8 +83,15 @@ function get_attribute_name(element, attribute, context) {
  * @param {Identifier} element_id
  * @param {ComponentContext} context
  * @param {boolean} is_attributes_reactive
+ * @param {boolean} force_check Should be `true` if we can't rely on our cached value, because for example there's also a `style` attribute
  */
-function serialize_style_directives(style_directives, element_id, context, is_attributes_reactive) {
+function serialize_style_directives(
+	style_directives,
+	element_id,
+	context,
+	is_attributes_reactive,
+	force_check
+) {
 	const state = context.state;
 
 	for (const directive of style_directives) {
@@ -99,7 +106,8 @@ function serialize_style_directives(style_directives, element_id, context, is_at
 				element_id,
 				b.literal(directive.name),
 				value,
-				/** @type {Expression} */ (directive.modifiers.includes('important') ? b.true : undefined)
+				/** @type {Expression} */ (directive.modifiers.includes('important') ? b.true : undefined),
+				force_check ? b.true : undefined
 			)
 		);
 
@@ -2062,6 +2070,7 @@ export const template_visitors = {
 		let img_might_be_lazy = false;
 		let might_need_event_replaying = false;
 		let has_direction_attribute = false;
+		let has_style_attribute = false;
 
 		if (is_custom_element) {
 			// cloneNode is faster, but it does not instantiate the underlying class of the
@@ -2080,6 +2089,9 @@ export const template_visitors = {
 				if (attribute.name === 'dir') {
 					has_direction_attribute = true;
 				}
+				if (attribute.name === 'style') {
+					has_style_attribute = true;
+				}
 				if (
 					(attribute.name === 'value' || attribute.name === 'checked') &&
 					!is_text_attribute(attribute)
@@ -2229,7 +2241,13 @@ export const template_visitors = {
 
 		// class/style directives must be applied last since they could override class/style attributes
 		serialize_class_directives(class_directives, node_id, context, is_attributes_reactive);
-		serialize_style_directives(style_directives, node_id, context, is_attributes_reactive);
+		serialize_style_directives(
+			style_directives,
+			node_id,
+			context,
+			is_attributes_reactive,
+			has_style_attribute || node.metadata.has_spread
+		);
 
 		if (might_need_event_replaying) {
 			context.state.after_update.push(b.stmt(b.call('$.replay_events', node_id)));
@@ -2390,7 +2408,13 @@ export const template_visitors = {
 
 		// class/style directives must be applied last since they could override class/style attributes
 		serialize_class_directives(class_directives, element_id, inner_context, is_attributes_reactive);
-		serialize_style_directives(style_directives, element_id, inner_context, is_attributes_reactive);
+		serialize_style_directives(
+			style_directives,
+			element_id,
+			inner_context,
+			is_attributes_reactive,
+			true
+		);
 
 		const get_tag = b.thunk(/** @type {Expression} */ (context.visit(node.tag)));
 
diff --git a/packages/svelte/src/internal/client/dom/elements/actions.js b/packages/svelte/src/internal/client/dom/elements/actions.js
index f741843681..dad3ce6fef 100644
--- a/packages/svelte/src/internal/client/dom/elements/actions.js
+++ b/packages/svelte/src/internal/client/dom/elements/actions.js
@@ -1,5 +1,6 @@
 /** @import { ActionPayload } from '#client' */
 import { effect, render_effect } from '../../reactivity/effects.js';
+import { safe_not_equal } from '../../reactivity/equality.js';
 import { deep_read_state, untrack } from '../../runtime.js';
 
 /**
@@ -15,6 +16,8 @@ export function action(dom, action, get_value) {
 
 		if (get_value && payload?.update) {
 			var inited = false;
+			/** @type {P} */
+			var prev = /** @type {any} */ ({}); // initialize with something so it's never equal on first run
 
 			render_effect(() => {
 				var value = get_value();
@@ -24,7 +27,8 @@ export function action(dom, action, get_value) {
 				// together with actions and mutation, it wouldn't notice the change without a deep read.
 				deep_read_state(value);
 
-				if (inited) {
+				if (inited && safe_not_equal(prev, value)) {
+					prev = value;
 					/** @type {Function} */ (payload.update)(value);
 				}
 			});
diff --git a/packages/svelte/src/internal/client/dom/elements/class.js b/packages/svelte/src/internal/client/dom/elements/class.js
index 7ab725208c..22f3da0f44 100644
--- a/packages/svelte/src/internal/client/dom/elements/class.js
+++ b/packages/svelte/src/internal/client/dom/elements/class.js
@@ -107,8 +107,10 @@ function to_class(value) {
  */
 export function toggle_class(dom, class_name, value) {
 	if (value) {
+		if (dom.classList.contains(class_name)) return;
 		dom.classList.add(class_name);
 	} else {
+		if (!dom.classList.contains(class_name)) return;
 		dom.classList.remove(class_name);
 	}
 }
diff --git a/packages/svelte/src/internal/client/dom/elements/style.js b/packages/svelte/src/internal/client/dom/elements/style.js
index 96922bdc5f..dd297ff72b 100644
--- a/packages/svelte/src/internal/client/dom/elements/style.js
+++ b/packages/svelte/src/internal/client/dom/elements/style.js
@@ -3,15 +3,23 @@
  * @param {string} key
  * @param {string} value
  * @param {boolean} [important]
+ * @param {boolean} [force_check] Should be `true` if we can't rely on our cached value, because for example there's also a `style` attribute
  */
-export function set_style(dom, key, value, important) {
-	const style = dom.style;
-	const prev_value = style.getPropertyValue(key);
+export function set_style(dom, key, value, important, force_check) {
+	// @ts-expect-error
+	var attributes = (dom.__attributes ??= {});
+	var style = dom.style;
+	var style_key = 'style-' + key;
+
+	if (attributes[style_key] === value && (!force_check || style.getPropertyValue(key) === value)) {
+		return;
+	}
+
+	attributes[style_key] = value;
+
 	if (value == null) {
-		if (prev_value !== '') {
-			style.removeProperty(key);
-		}
-	} else if (prev_value !== value) {
+		style.removeProperty(key);
+	} else {
 		style.setProperty(key, value, important ? 'important' : '');
 	}
 }

From 21da63ddb626297736c62f4b1b570a3d7d277395 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 31 Jul 2024 08:46:17 -0400
Subject: [PATCH 040/196] Version Packages (next) (#12670)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 2 ++
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index bece234879..470e94a00a 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -319,6 +319,7 @@
     "kind-snakes-drive",
     "kind-spoons-return",
     "large-clouds-carry",
+    "large-emus-cough",
     "large-turkeys-deny",
     "large-waves-join",
     "late-bees-vanish",
@@ -531,6 +532,7 @@
     "seven-ravens-check",
     "shaggy-cameras-live",
     "shaggy-comics-jog",
+    "sharp-fishes-serve",
     "sharp-gorillas-impress",
     "sharp-kids-happen",
     "sharp-spies-live",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index a3fbe31e9f..5d78ffc170 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.204
+
+### Patch Changes
+
+- feat: allow ignoring runtime warnings ([#12608](https://github.com/sveltejs/svelte/pull/12608))
+
+- feat: perf tweaks for actions/styles/classes ([#12654](https://github.com/sveltejs/svelte/pull/12654))
+
 ## 5.0.0-next.203
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 8ea207abed..ff210d35ef 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.203",
+  "version": "5.0.0-next.204",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 9467a7af64..b90a02561f 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.203';
+export const VERSION = '5.0.0-next.204';
 export const PUBLIC_VERSION = '5';

From ccccac394b97df54ee33ea1679ea7126884aeeba Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 31 Jul 2024 11:31:37 -0400
Subject: [PATCH 041/196] chore: remove visitor merging logic (#12671)

---
 .../phases/2-analyze/css/css-analyze.js       | 130 +++++++++---------
 .../svelte/src/compiler/phases/visitors.js    |  74 ----------
 2 files changed, 62 insertions(+), 142 deletions(-)
 delete mode 100644 packages/svelte/src/compiler/phases/visitors.js

diff --git a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
index 4497617fbb..e4fa7a8084 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/css/css-analyze.js
@@ -4,7 +4,6 @@
 import { walk } from 'zimmerframe';
 import * as e from '../../../errors.js';
 import { is_keyframes_node } from '../../css.js';
-import { merge } from '../../visitors.js';
 
 /**
  * @typedef {Visitors<
@@ -50,17 +49,66 @@ function is_global_block_selector(simple_selector) {
 }
 
 /** @type {CssVisitors} */
-const analysis_visitors = {
+const css_visitors = {
 	Atrule(node, context) {
 		if (is_keyframes_node(node)) {
 			if (!node.prelude.startsWith('-global-')) {
 				context.state.keyframes.push(node.prelude);
 			}
 		}
+
+		context.next();
 	},
 	ComplexSelector(node, context) {
 		context.next(); // analyse relevant selectors first
 
+		{
+			const global = node.children.find(is_global);
+
+			if (global) {
+				const idx = node.children.indexOf(global);
+
+				if (global.selectors[0].args !== null && idx !== 0 && idx !== node.children.length - 1) {
+					// ensure `:global(...)` is not used in the middle of a selector (but multiple `global(...)` in sequence are ok)
+					for (let i = idx + 1; i < node.children.length; i++) {
+						if (!is_global(node.children[i])) {
+							e.css_global_invalid_placement(global.selectors[0]);
+						}
+					}
+				}
+			}
+		}
+
+		// ensure `:global(...)` do not lead to invalid css after `:global()` is removed
+		for (const relative_selector of node.children) {
+			for (let i = 0; i < relative_selector.selectors.length; i++) {
+				const selector = relative_selector.selectors[i];
+
+				if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
+					const child = selector.args?.children[0].children[0];
+					// ensure `:global(element)` to be at the first position in a compound selector
+					if (child?.selectors[0].type === 'TypeSelector' && i !== 0) {
+						e.css_global_invalid_selector_list(selector);
+					}
+
+					// ensure `:global(.class)` is not followed by a type selector, eg: `:global(.class)element`
+					if (relative_selector.selectors[i + 1]?.type === 'TypeSelector') {
+						e.css_type_selector_invalid_placement(relative_selector.selectors[i + 1]);
+					}
+
+					// ensure `:global(...)`contains a single selector
+					// (standalone :global() with multiple selectors is OK)
+					if (
+						selector.args !== null &&
+						selector.args.children.length > 1 &&
+						(node.children.length > 1 || relative_selector.selectors.length > 1)
+					) {
+						e.css_global_invalid_selector(selector);
+					}
+				}
+			}
+		}
+
 		node.metadata.rule = context.state.rule;
 
 		node.metadata.used ||= node.children.every(
@@ -119,22 +167,6 @@ const analysis_visitors = {
 			return is_global_block;
 		});
 
-		context.next({
-			...context.state,
-			rule: node
-		});
-
-		node.metadata.has_local_selectors = node.prelude.children.some((selector) => {
-			return selector.children.some(
-				({ metadata }) => !metadata.is_global && !metadata.is_global_like
-			);
-		});
-	}
-};
-
-/** @type {CssVisitors} */
-const validation_visitors = {
-	Rule(node, context) {
 		if (node.metadata.is_global_block) {
 			if (node.prelude.children.length > 1) {
 				e.css_global_block_invalid_list(node.prelude);
@@ -174,59 +206,21 @@ const validation_visitors = {
 			}
 		}
 
-		context.next();
-	},
-	ComplexSelector(node) {
-		{
-			const global = node.children.find(is_global);
-
-			if (global) {
-				const idx = node.children.indexOf(global);
-
-				if (global.selectors[0].args !== null && idx !== 0 && idx !== node.children.length - 1) {
-					// ensure `:global(...)` is not used in the middle of a selector (but multiple `global(...)` in sequence are ok)
-					for (let i = idx + 1; i < node.children.length; i++) {
-						if (!is_global(node.children[i])) {
-							e.css_global_invalid_placement(global.selectors[0]);
-						}
-					}
-				}
-			}
-		}
-
-		// ensure `:global(...)` do not lead to invalid css after `:global()` is removed
-		for (const relative_selector of node.children) {
-			for (let i = 0; i < relative_selector.selectors.length; i++) {
-				const selector = relative_selector.selectors[i];
-
-				if (selector.type === 'PseudoClassSelector' && selector.name === 'global') {
-					const child = selector.args?.children[0].children[0];
-					// ensure `:global(element)` to be at the first position in a compound selector
-					if (child?.selectors[0].type === 'TypeSelector' && i !== 0) {
-						e.css_global_invalid_selector_list(selector);
-					}
-
-					// ensure `:global(.class)` is not followed by a type selector, eg: `:global(.class)element`
-					if (relative_selector.selectors[i + 1]?.type === 'TypeSelector') {
-						e.css_type_selector_invalid_placement(relative_selector.selectors[i + 1]);
-					}
+		context.next({
+			...context.state,
+			rule: node
+		});
 
-					// ensure `:global(...)`contains a single selector
-					// (standalone :global() with multiple selectors is OK)
-					if (
-						selector.args !== null &&
-						selector.args.children.length > 1 &&
-						(node.children.length > 1 || relative_selector.selectors.length > 1)
-					) {
-						e.css_global_invalid_selector(selector);
-					}
-				}
-			}
-		}
+		node.metadata.has_local_selectors = node.prelude.children.some((selector) => {
+			return selector.children.some(
+				({ metadata }) => !metadata.is_global && !metadata.is_global_like
+			);
+		});
 	},
 	NestingSelector(node, context) {
 		const rule = /** @type {Css.Rule} */ (context.state.rule);
 		const parent_rule = rule.metadata.parent_rule;
+
 		if (!parent_rule) {
 			e.css_nesting_selector_invalid_placement(node);
 		} else if (
@@ -238,11 +232,11 @@ const validation_visitors = {
 		) {
 			e.css_global_block_invalid_modifier_start(node);
 		}
+
+		context.next();
 	}
 };
 
-const css_visitors = merge(analysis_visitors, validation_visitors);
-
 /**
  * @param {Css.StyleSheet} stylesheet
  * @param {ComponentAnalysis} analysis
diff --git a/packages/svelte/src/compiler/phases/visitors.js b/packages/svelte/src/compiler/phases/visitors.js
deleted file mode 100644
index 5a52056ceb..0000000000
--- a/packages/svelte/src/compiler/phases/visitors.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/** @import { Visitors, Context } from 'zimmerframe' */
-const overrides = {
-	visit() {
-		throw new Error('Cannot call visit() during analysis');
-	},
-	stop() {
-		throw new Error('Cannot call stop() during analysis');
-	}
-};
-
-// TODO get rid of this
-/**
- * @template {{ type: string }} T
- * @template U
- * @param  {...Visitors<T, U>} tasks
- * @returns
- */
-export function merge(...tasks) {
-	/** @type {Record<string, any[]>} */
-	const visitors = {};
-
-	for (const task of tasks) {
-		for (const key in task) {
-			if (!visitors[key]) visitors[key] = [];
-			visitors[key].push(task[key]);
-		}
-	}
-
-	/** @type {Visitors<T, U>} */
-	// @ts-expect-error
-	const combined = {};
-
-	for (const key in visitors) {
-		const fns = visitors[key];
-
-		/**
-		 * @param {T} node
-		 * @param {Context<T, U>} context
-		 */
-		function visitor(node, context) {
-			/**
-			 * @param {number} i
-			 * @param {U} state
-			 */
-			function go(i, state) {
-				const fn = fns[i];
-				if (!fn) return context.next(state);
-
-				let called_next = false;
-
-				fn(node, {
-					...context,
-					...overrides,
-					state,
-					next(next_state = state) {
-						called_next = true;
-						go(i + 1, next_state);
-					}
-				});
-
-				if (!called_next) {
-					go(i + 1, state);
-				}
-			}
-
-			go(0, context.state);
-		}
-
-		// @ts-expect-error
-		combined[key] = visitor;
-	}
-
-	return combined;
-}

From 01e7845180fb6da48f225078ed4dc61f441da592 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 31 Jul 2024 19:28:28 +0200
Subject: [PATCH 042/196] fix: always synchronously call `bind:this` (#12679)

fixes #12673

#12591 wrongfully applied the "wrap in effect if an action on this element" logic for `bind:this`
---
 .changeset/smooth-pens-exist.md               |  5 +
 .../3-transform/client/visitors/template.js   |  9 +-
 .../apply-directives-in-order-2/_config.js    |  1 +
 .../apply-directives-in-order-2/main.svelte   | 95 +++++++++++++++----
 4 files changed, 86 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/smooth-pens-exist.md

diff --git a/.changeset/smooth-pens-exist.md b/.changeset/smooth-pens-exist.md
new file mode 100644
index 0000000000..fcf1b91456
--- /dev/null
+++ b/.changeset/smooth-pens-exist.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: always synchronously call `bind:this`
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
index dfe3e93743..e9fa7ba899 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
@@ -3164,16 +3164,15 @@ export const template_visitors = {
 		}
 
 		const parent = /** @type {import('#compiler').SvelteNode} */ (context.path.at(-1));
-		const has_action_directive =
-			parent.type === 'RegularElement' && parent.attributes.find((a) => a.type === 'UseDirective');
 
 		// Bindings need to happen after attribute updates, therefore after the render effect, and in order with events/actions.
 		// bind:this is a special case as it's one-way and could influence the render effect.
 		if (node.name === 'this') {
-			state.init.push(
-				b.stmt(has_action_directive ? b.call('$.effect', b.thunk(call_expr)) : call_expr)
-			);
+			state.init.push(b.stmt(call_expr));
 		} else {
+			const has_action_directive =
+				parent.type === 'RegularElement' &&
+				parent.attributes.find((a) => a.type === 'UseDirective');
 			state.after_update.push(
 				b.stmt(has_action_directive ? b.call('$.effect', b.thunk(call_expr)) : call_expr)
 			);
diff --git a/packages/svelte/tests/runtime-legacy/samples/apply-directives-in-order-2/_config.js b/packages/svelte/tests/runtime-legacy/samples/apply-directives-in-order-2/_config.js
index bdf3e70919..98022d73ed 100644
--- a/packages/svelte/tests/runtime-legacy/samples/apply-directives-in-order-2/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/apply-directives-in-order-2/_config.js
@@ -22,6 +22,7 @@ export default test({
 		}
 
 		assert.deepEqual(value, [
+			'bind:this true',
 			'1',
 			'2',
 			'3',
diff --git a/packages/svelte/tests/runtime-legacy/samples/apply-directives-in-order-2/main.svelte b/packages/svelte/tests/runtime-legacy/samples/apply-directives-in-order-2/main.svelte
index e91c4b6a14..c536d722b5 100644
--- a/packages/svelte/tests/runtime-legacy/samples/apply-directives-in-order-2/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/apply-directives-in-order-2/main.svelte
@@ -1,29 +1,86 @@
 <script>
+	import { onMount } from 'svelte';
+
 	export let value = [];
 
-	function one(elem) { elem.addEventListener('input', () => { value.push('1'); }); }
-	function four(elem) { elem.addEventListener('input', () => { value.push('4'); }); }
-	function eight(elem) { elem.addEventListener('input', () => { value.push('8'); }); }
-	function twelve(elem) { elem.addEventListener('input', () => { value.push('12'); }); }
-	function fifteen(elem) { elem.addEventListener('input', () => { value.push('15'); }); }
-	function seventeen(elem) { elem.addEventListener('input', () => { value.push('17'); }); }
+	function one(elem) {
+		elem.addEventListener('input', () => {
+			value.push('1');
+		});
+	}
+	function four(elem) {
+		elem.addEventListener('input', () => {
+			value.push('4');
+		});
+	}
+	function eight(elem) {
+		elem.addEventListener('input', () => {
+			value.push('8');
+		});
+	}
+	function twelve(elem) {
+		elem.addEventListener('input', () => {
+			value.push('12');
+		});
+	}
+	function fifteen(elem) {
+		elem.addEventListener('input', () => {
+			value.push('15');
+		});
+	}
+	function seventeen(elem) {
+		elem.addEventListener('input', () => {
+			value.push('17');
+		});
+	}
 
 	const foo = {
-		set two(v) { value.push('2'); },
-		set six(v) { value.push('6'); },
-		set nine(v) { value.push('9'); },
-		set eleven(v) { value.push('11'); },
-		set thirteen(v) { value.push('13'); },
-		set sixteen(v) { value.push('16'); },
+		set two(v) {
+			value.push('2');
+		},
+		set six(v) {
+			value.push('6');
+		},
+		set nine(v) {
+			value.push('9');
+		},
+		set eleven(v) {
+			value.push('11');
+		},
+		set thirteen(v) {
+			value.push('13');
+		},
+		set sixteen(v) {
+			value.push('16');
+		}
+	};
+
+	function three() {
+		value.push('3');
+	}
+	function five() {
+		value.push('5');
+	}
+	function seven() {
+		value.push('7');
+	}
+	function ten() {
+		value.push('10');
+	}
+	function fourteen() {
+		value.push('14');
+	}
+	function eighteen() {
+		value.push('18');
 	}
 
-	function three() { value.push('3'); }
-	function five() { value.push('5'); }
-	function seven() { value.push('7'); }
-	function ten() { value.push('10'); }
-	function fourteen() { value.push('14'); }
-	function eighteen() { value.push('18'); }
+	let el;
 
+	onMount(() => {
+		// ensure that bind:this doesn't influence the order of directives
+		// and isn't affected itself by an action being on the element
+		value.push('bind:this ' + !!el);
+	});
 </script>
 
 <input use:one bind:value={foo.two} on:input={three} />
@@ -31,4 +88,4 @@
 <input on:input={seven} use:eight bind:value={foo.nine} />
 <input on:input={ten} bind:value={foo.eleven} use:twelve />
 <input bind:value={foo.thirteen} on:input={fourteen} use:fifteen />
-<input bind:value={foo.sixteen} use:seventeen on:input={eighteen} />
+<input bind:this={el} bind:value={foo.sixteen} use:seventeen on:input={eighteen} />

From 9411b6f9f1c6c78362ca97643063955a7256c296 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 31 Jul 2024 13:33:10 -0400
Subject: [PATCH 043/196] Version Packages (next) (#12680)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 1 +
 packages/svelte/CHANGELOG.md   | 6 ++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 470e94a00a..12de6942cb 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -599,6 +599,7 @@
     "smart-zebras-pay",
     "smart-zoos-vanish",
     "smooth-kids-protect",
+    "smooth-pens-exist",
     "smooth-pens-protect",
     "smooth-rings-rush",
     "soft-clocks-remember",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 5d78ffc170..6c0a5dc27b 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.0.0-next.205
+
+### Patch Changes
+
+- fix: always synchronously call `bind:this` ([#12679](https://github.com/sveltejs/svelte/pull/12679))
+
 ## 5.0.0-next.204
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index ff210d35ef..bd46b7c6c6 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.204",
+  "version": "5.0.0-next.205",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index b90a02561f..1b5a1e63c5 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.204';
+export const VERSION = '5.0.0-next.205';
 export const PUBLIC_VERSION = '5';

From 9eca3d07360ef01a7524af5b1c63155f86f22a65 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 1 Aug 2024 03:37:48 +0200
Subject: [PATCH 044/196] fix: allow nested `<dt>`/`<dd>` elements if they are
 within a `<dl>` element (#12681)

* fix: allow nested `<dt>`/`<dd>` elements if they are within a `<dl>` element

This introduces a resets array, which means descendants that are forbidden are allowed again, if an element within the resets array is encountered between the tag and the forbidden descendant

fixes #12676

* better name
---
 .changeset/mean-parents-film.md               |  5 ++++
 .../2-analyze/visitors/RegularElement.js      |  5 +++-
 packages/svelte/src/html-tree-validation.js   | 29 ++++++++++++++-----
 packages/svelte/src/internal/server/dev.js    | 21 +++++++++-----
 .../invalid-node-placement-6/errors.json      | 14 +++++++++
 .../invalid-node-placement-6/input.svelte     | 14 +++++++++
 6 files changed, 71 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/mean-parents-film.md
 create mode 100644 packages/svelte/tests/validator/samples/invalid-node-placement-6/errors.json
 create mode 100644 packages/svelte/tests/validator/samples/invalid-node-placement-6/input.svelte

diff --git a/.changeset/mean-parents-film.md b/.changeset/mean-parents-film.md
new file mode 100644
index 0000000000..689ae01ecc
--- /dev/null
+++ b/.changeset/mean-parents-film.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow nested `<dt>`/`<dd>` elements if they are within a `<dl>` element
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index 3207919ada..bde068184c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -98,6 +98,7 @@ export function RegularElement(node, context) {
 	if (context.state.parent_element) {
 		let past_parent = false;
 		let only_warn = false;
+		const ancestors = [context.state.parent_element];
 
 		for (let i = context.path.length - 1; i >= 0; i--) {
 			const ancestor = context.path[i];
@@ -129,7 +130,9 @@ export function RegularElement(node, context) {
 					past_parent = true;
 				}
 			} else if (ancestor.type === 'RegularElement') {
-				if (!is_tag_valid_with_ancestor(node.name, ancestor.name)) {
+				ancestors.push(ancestor.name);
+
+				if (!is_tag_valid_with_ancestor(node.name, ancestors)) {
 					if (only_warn) {
 						w.node_invalid_placement_ssr(node, `\`<${node.name}>\``, ancestor.name);
 					} else {
diff --git a/packages/svelte/src/html-tree-validation.js b/packages/svelte/src/html-tree-validation.js
index c7f2554966..fb4fbeadf5 100644
--- a/packages/svelte/src/html-tree-validation.js
+++ b/packages/svelte/src/html-tree-validation.js
@@ -2,13 +2,14 @@
  * Map of elements that have certain elements that are not allowed inside them, in the sense that they will auto-close the parent/ancestor element.
  * Theoretically one could take advantage of it but most of the time it will just result in confusing behavior and break when SSR'd.
  * There are more elements that are invalid inside other elements, but they're not auto-closed and so don't break SSR and are therefore not listed here.
- * @type {Record<string, { direct: string[]} | { descendant: string[] }>}
+ * @type {Record<string, { direct: string[]} | { descendant: string[]; reset_by?: string[] }>}
  */
 const autoclosing_children = {
 	// based on http://developers.whatwg.org/syntax.html#syntax-tag-omission
 	li: { direct: ['li'] },
-	dt: { descendant: ['dt', 'dd'] },
-	dd: { descendant: ['dt', 'dd'] },
+	// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dt#technical_summary
+	dt: { descendant: ['dt', 'dd'], reset_by: ['dl'] },
+	dd: { descendant: ['dt', 'dd'], reset_by: ['dl'] },
 	p: {
 		descendant: [
 			'address',
@@ -75,7 +76,7 @@ export function closing_tag_omitted(current, next) {
 /**
  * Map of elements that have certain elements that are not allowed inside them, in the sense that the browser will somehow repair the HTML.
  * There are more elements that are invalid inside other elements, but they're not repaired and so don't break SSR and are therefore not listed here.
- * @type {Record<string, { direct: string[]} | { descendant: string[]; only?: string[] } | { only: string[] }>}
+ * @type {Record<string, { direct: string[]} | { descendant: string[]; reset_by?: string[]; only?: string[] } | { only: string[] }>}
  */
 const disallowed_children = {
 	...autoclosing_children,
@@ -137,12 +138,24 @@ const disallowed_children = {
  * Returns false if the tag is not allowed inside the ancestor tag (which is grandparent and above) such that it will result
  * in the browser repairing the HTML, which will likely result in an error during hydration.
  * @param {string} tag
- * @param {string} ancestor Must not be the parent, but higher up the tree
+ * @param {string[]} ancestors All nodes starting with the parent, up until the ancestor, which means two entries minimum
  * @returns {boolean}
  */
-export function is_tag_valid_with_ancestor(tag, ancestor) {
-	const disallowed = disallowed_children[ancestor];
-	return !disallowed || ('descendant' in disallowed ? !disallowed.descendant.includes(tag) : true);
+export function is_tag_valid_with_ancestor(tag, ancestors) {
+	const target = ancestors[ancestors.length - 1];
+	const disallowed = disallowed_children[target];
+	if (!disallowed) return true;
+
+	if ('reset_by' in disallowed && disallowed.reset_by) {
+		for (let i = ancestors.length - 2; i >= 0; i--) {
+			// A reset means that forbidden descendants are allowed again
+			if (disallowed.reset_by.includes(ancestors[i])) {
+				return true;
+			}
+		}
+	}
+
+	return 'descendant' in disallowed ? !disallowed.descendant.includes(tag) : true;
 }
 
 /**
diff --git a/packages/svelte/src/internal/server/dev.js b/packages/svelte/src/internal/server/dev.js
index 1904995086..cc43d642fe 100644
--- a/packages/svelte/src/internal/server/dev.js
+++ b/packages/svelte/src/internal/server/dev.js
@@ -59,17 +59,22 @@ function print_error(payload, parent, child) {
 export function push_element(payload, tag, line, column) {
 	var filename = /** @type {Component} */ (current_component).function[FILENAME];
 	var child = { tag, parent, filename, line, column };
-	var ancestor = parent?.parent;
 
-	if (parent !== null && !is_tag_valid_with_parent(tag, parent.tag)) {
-		print_error(payload, parent, child);
-	}
+	if (parent !== null) {
+		var ancestor = parent.parent;
+		var ancestors = [parent.tag];
+
+		if (!is_tag_valid_with_parent(tag, parent.tag)) {
+			print_error(payload, parent, child);
+		}
 
-	while (ancestor != null) {
-		if (!is_tag_valid_with_ancestor(tag, ancestor.tag)) {
-			print_error(payload, ancestor, child);
+		while (ancestor != null) {
+			ancestors.push(ancestor.tag);
+			if (!is_tag_valid_with_ancestor(tag, ancestors)) {
+				print_error(payload, ancestor, child);
+			}
+			ancestor = ancestor.parent;
 		}
-		ancestor = ancestor.parent;
 	}
 
 	parent = child;
diff --git a/packages/svelte/tests/validator/samples/invalid-node-placement-6/errors.json b/packages/svelte/tests/validator/samples/invalid-node-placement-6/errors.json
new file mode 100644
index 0000000000..b80d739621
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/invalid-node-placement-6/errors.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "node_invalid_placement",
+		"message": "`<dt>` is invalid inside `<dd>`",
+		"start": {
+			"line": 11,
+			"column": 3
+		},
+		"end": {
+			"line": 11,
+			"column": 19
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/invalid-node-placement-6/input.svelte b/packages/svelte/tests/validator/samples/invalid-node-placement-6/input.svelte
new file mode 100644
index 0000000000..0077ffd36e
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/invalid-node-placement-6/input.svelte
@@ -0,0 +1,14 @@
+<dl>
+	<dt>valid</dt>
+	<dd>
+		<!-- dl resets the validation -->
+		<dl>
+			<dt>valid</dt>
+			<dd>valid</dd>
+		</dl>
+		<!-- other tags don't -->
+		<div>
+			<dt>invalid</dt>
+		</div>
+	</dd>
+</dl>

From 038754bfc61d2836c2181d83a57c7707b1d95525 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 1 Aug 2024 15:27:32 -0400
Subject: [PATCH 045/196] chore: client transform visitors refactor (#12683)

* start refactoring client transform visitor code

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* more

* tweak

* painful

* more

* simplify

* more

* more

* more

* more

* more

* tidy up

* changeset
---
 .changeset/twelve-scissors-kneel.md           |    5 +
 .../3-transform/client/transform-client.js    |  199 +-
 .../phases/3-transform/client/types.d.ts      |    3 +-
 .../phases/3-transform/client/utils.js        |   31 -
 .../client/visitors/AnimateDirective.js       |   28 +
 .../visitors/ArrowFunctionExpression.js       |   11 +
 .../client/visitors/AssignmentExpression.js   |   11 +
 .../3-transform/client/visitors/Attribute.js  |   14 +
 .../3-transform/client/visitors/AwaitBlock.js |   67 +
 .../client/visitors/BinaryExpression.js       |   34 +
 .../client/visitors/BindDirective.js          |  250 ++
 .../client/visitors/BreakStatement.js         |   20 +
 .../client/visitors/CallExpression.js         |   46 +
 .../3-transform/client/visitors/ClassBody.js  |  223 ++
 .../3-transform/client/visitors/Comment.js    |   11 +
 .../3-transform/client/visitors/Component.js  |   32 +
 .../3-transform/client/visitors/ConstTag.js   |   73 +
 .../3-transform/client/visitors/DebugTag.js   |   22 +
 .../3-transform/client/visitors/EachBlock.js  |  317 ++
 .../client/visitors/ExportNamedDeclaration.js |   19 +
 .../client/visitors/ExpressionStatement.js    |   23 +
 .../3-transform/client/visitors/Fragment.js   |  236 ++
 .../client/visitors/FunctionDeclaration.js    |   31 +
 .../client/visitors/FunctionExpression.js     |   11 +
 .../3-transform/client/visitors/HtmlTag.js    |   27 +
 .../3-transform/client/visitors/Identifier.js |   41 +
 .../3-transform/client/visitors/IfBlock.js    |   55 +
 .../client/visitors/ImportDeclaration.js      |   15 +
 .../3-transform/client/visitors/KeyBlock.js   |   19 +
 .../client/visitors/LabeledStatement.js       |   64 +
 .../client/visitors/LetDirective.js           |   50 +
 .../client/visitors/MemberExpression.js       |   28 +
 .../client/visitors/OnDirective.js            |   11 +
 .../client/visitors/RegularElement.js         |  719 ++++
 .../3-transform/client/visitors/RenderTag.js  |   47 +
 .../client/visitors/SlotElement.js            |   66 +
 .../client/visitors/SnippetBlock.js           |   86 +
 .../client/visitors/SpreadAttribute.js        |   10 +
 .../3-transform/client/visitors/SvelteBody.js |   14 +
 .../client/visitors/SvelteComponent.js        |   12 +
 .../client/visitors/SvelteDocument.js         |   14 +
 .../client/visitors/SvelteElement.js          |  235 ++
 .../client/visitors/SvelteFragment.js         |   17 +
 .../3-transform/client/visitors/SvelteHead.js |   20 +
 .../3-transform/client/visitors/SvelteSelf.js |   12 +
 .../client/visitors/SvelteWindow.js           |   14 +
 .../client/visitors/TitleElement.js           |   39 +
 .../client/visitors/TransitionDirective.js    |   29 +
 .../client/visitors/UpdateExpression.js       |  115 +
 .../client/visitors/UseDirective.js           |   34 +
 .../client/visitors/VariableDeclaration.js    |  328 ++
 .../3-transform/client/visitors/global.js     |  163 -
 .../client/visitors/javascript-legacy.js      |  188 -
 .../client/visitors/javascript-runes.js       |  513 ---
 .../3-transform/client/visitors/javascript.js |   30 -
 .../client/visitors/shared/component.js       |  366 ++
 .../client/visitors/shared/element.js         |  279 ++
 .../client/visitors/shared/fragment.js        |  159 +
 .../client/visitors/shared/function.js        |   34 +
 .../client/visitors/shared/utils.js           |  335 ++
 .../3-transform/client/visitors/template.js   | 3418 -----------------
 .../src/compiler/phases/3-transform/index.js  |    2 +-
 .../3-transform/server/transform-server.js    |   74 +-
 .../3-transform/server/visitors/ClassBody.js  |    7 +-
 .../server/visitors/ExpressionStatement.js    |   21 +-
 .../server/visitors/LabeledStatement.js       |    7 +-
 .../server/visitors/MemberExpression.js       |    8 +-
 .../server/visitors/PropertyDefinition.js     |    4 +-
 .../server/visitors/VariableDeclaration.js    |  213 +-
 .../src/compiler/phases/3-transform/utils.js  |    5 +-
 packages/svelte/src/compiler/phases/scope.js  |   21 +-
 71 files changed, 5050 insertions(+), 4635 deletions(-)
 create mode 100644 .changeset/twelve-scissors-kneel.md
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/AnimateDirective.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/ArrowFunctionExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/Attribute.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/BinaryExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/BreakStatement.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/Comment.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/ExportNamedDeclaration.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/ExpressionStatement.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/Identifier.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/ImportDeclaration.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/SpreadAttribute.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBody.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteComponent.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteDocument.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteFragment.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteHead.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteSelf.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteWindow.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/UseDirective.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
 delete mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/global.js
 delete mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-legacy.js
 delete mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
 delete mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
 delete mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js

diff --git a/.changeset/twelve-scissors-kneel.md b/.changeset/twelve-scissors-kneel.md
new file mode 100644
index 0000000000..0932c3b81b
--- /dev/null
+++ b/.changeset/twelve-scissors-kneel.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: internal refactoring of client transform visitors
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index c6ac88b0de..d37e34dc65 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -5,51 +5,122 @@
 import { walk } from 'zimmerframe';
 import * as b from '../../../utils/builders.js';
 import { set_scope } from '../../scope.js';
-import { template_visitors } from './visitors/template.js';
-import { global_visitors } from './visitors/global.js';
-import { javascript_visitors } from './visitors/javascript.js';
-import { javascript_visitors_runes } from './visitors/javascript-runes.js';
-import { javascript_visitors_legacy } from './visitors/javascript-legacy.js';
 import { serialize_get_binding } from './utils.js';
 import { render_stylesheet } from '../css/index.js';
 import { dev, filename } from '../../../state.js';
+import { AnimateDirective } from './visitors/AnimateDirective.js';
+import { ArrowFunctionExpression } from './visitors/ArrowFunctionExpression.js';
+import { AssignmentExpression } from './visitors/AssignmentExpression.js';
+import { Attribute } from './visitors/Attribute.js';
+import { AwaitBlock } from './visitors/AwaitBlock.js';
+import { BinaryExpression } from './visitors/BinaryExpression.js';
+import { BindDirective } from './visitors/BindDirective.js';
+import { BreakStatement } from './visitors/BreakStatement.js';
+import { CallExpression } from './visitors/CallExpression.js';
+import { ClassBody } from './visitors/ClassBody.js';
+import { Comment } from './visitors/Comment.js';
+import { Component } from './visitors/Component.js';
+import { ConstTag } from './visitors/ConstTag.js';
+import { DebugTag } from './visitors/DebugTag.js';
+import { EachBlock } from './visitors/EachBlock.js';
+import { ExportNamedDeclaration } from './visitors/ExportNamedDeclaration.js';
+import { ExpressionStatement } from './visitors/ExpressionStatement.js';
+import { Fragment } from './visitors/Fragment.js';
+import { FunctionDeclaration } from './visitors/FunctionDeclaration.js';
+import { FunctionExpression } from './visitors/FunctionExpression.js';
+import { HtmlTag } from './visitors/HtmlTag.js';
+import { Identifier } from './visitors/Identifier.js';
+import { IfBlock } from './visitors/IfBlock.js';
+import { ImportDeclaration } from './visitors/ImportDeclaration.js';
+import { KeyBlock } from './visitors/KeyBlock.js';
+import { LabeledStatement } from './visitors/LabeledStatement.js';
+import { LetDirective } from './visitors/LetDirective.js';
+import { MemberExpression } from './visitors/MemberExpression.js';
+import { OnDirective } from './visitors/OnDirective.js';
+import { RegularElement } from './visitors/RegularElement.js';
+import { RenderTag } from './visitors/RenderTag.js';
+import { SlotElement } from './visitors/SlotElement.js';
+import { SnippetBlock } from './visitors/SnippetBlock.js';
+import { SpreadAttribute } from './visitors/SpreadAttribute.js';
+import { SvelteBody } from './visitors/SvelteBody.js';
+import { SvelteComponent } from './visitors/SvelteComponent.js';
+import { SvelteDocument } from './visitors/SvelteDocument.js';
+import { SvelteElement } from './visitors/SvelteElement.js';
+import { SvelteFragment } from './visitors/SvelteFragment.js';
+import { SvelteHead } from './visitors/SvelteHead.js';
+import { SvelteSelf } from './visitors/SvelteSelf.js';
+import { SvelteWindow } from './visitors/SvelteWindow.js';
+import { TitleElement } from './visitors/TitleElement.js';
+import { TransitionDirective } from './visitors/TransitionDirective.js';
+import { UpdateExpression } from './visitors/UpdateExpression.js';
+import { UseDirective } from './visitors/UseDirective.js';
+import { VariableDeclaration } from './visitors/VariableDeclaration.js';
+
+/** @type {Visitors} */
+const visitors = {
+	_: set_scope,
+	AnimateDirective,
+	ArrowFunctionExpression,
+	AssignmentExpression,
+	Attribute,
+	AwaitBlock,
+	BinaryExpression,
+	BindDirective,
+	BreakStatement,
+	CallExpression,
+	ClassBody,
+	Comment,
+	Component,
+	ConstTag,
+	DebugTag,
+	EachBlock,
+	ExportNamedDeclaration,
+	ExpressionStatement,
+	Fragment,
+	FunctionDeclaration,
+	FunctionExpression,
+	HtmlTag,
+	Identifier,
+	IfBlock,
+	ImportDeclaration,
+	KeyBlock,
+	LabeledStatement,
+	LetDirective,
+	MemberExpression,
+	OnDirective,
+	RegularElement,
+	RenderTag,
+	SlotElement,
+	SnippetBlock,
+	SpreadAttribute,
+	SvelteBody,
+	SvelteComponent,
+	SvelteDocument,
+	SvelteElement,
+	SvelteFragment,
+	SvelteHead,
+	SvelteSelf,
+	SvelteWindow,
+	TitleElement,
+	TransitionDirective,
+	UpdateExpression,
+	UseDirective,
+	VariableDeclaration
+};
 
 /**
- * This function ensures visitor sets don't accidentally clobber each other
- * @param  {...Visitors} array
- * @returns {Visitors}
- */
-function combine_visitors(...array) {
-	/** @type {Record<string, any>} */
-	const visitors = {};
-
-	for (const member of array) {
-		for (const key in member) {
-			if (visitors[key]) {
-				throw new Error(`Duplicate visitor: ${key}`);
-			}
-
-			// @ts-ignore
-			visitors[key] = member[key];
-		}
-	}
-
-	return visitors;
-}
-
-/**
- * @param {string} source
  * @param {ComponentAnalysis} analysis
  * @param {ValidatedCompileOptions} options
  * @returns {ESTree.Program}
  */
-export function client_component(source, analysis, options) {
+export function client_component(analysis, options) {
 	/** @type {ComponentClientTransformState} */
 	const state = {
 		analysis,
 		options,
 		scope: analysis.module.scope,
-		scopes: analysis.template.scopes,
+		scopes: analysis.module.scopes,
+		is_instance: false,
 		hoisted: [b.import_all('$', 'svelte/internal/client')],
 		node: /** @type {any} */ (null), // populated by the root node
 		legacy_reactive_statements: new Map(),
@@ -78,57 +149,25 @@ export function client_component(source, analysis, options) {
 	};
 
 	const module = /** @type {ESTree.Program} */ (
-		walk(
-			/** @type {SvelteNode} */ (analysis.module.ast),
-			state,
-			combine_visitors(
-				set_scope(analysis.module.scopes),
-				global_visitors,
-				// @ts-expect-error TODO
-				javascript_visitors,
-				analysis.runes ? javascript_visitors_runes : javascript_visitors_legacy
-			)
-		)
+		walk(/** @type {SvelteNode} */ (analysis.module.ast), state, visitors)
 	);
 
-	const instance_state = { ...state, scope: analysis.instance.scope };
+	const instance_state = {
+		...state,
+		scope: analysis.instance.scope,
+		scopes: analysis.instance.scopes,
+		is_instance: true
+	};
+
 	const instance = /** @type {ESTree.Program} */ (
-		walk(
-			/** @type {SvelteNode} */ (analysis.instance.ast),
-			instance_state,
-			combine_visitors(
-				set_scope(analysis.instance.scopes),
-				global_visitors,
-				// @ts-expect-error TODO
-				javascript_visitors,
-				analysis.runes ? javascript_visitors_runes : javascript_visitors_legacy,
-				{
-					ImportDeclaration(node) {
-						state.hoisted.push(node);
-						return b.empty;
-					},
-					ExportNamedDeclaration(node, context) {
-						if (node.declaration) {
-							return context.visit(node.declaration);
-						}
-
-						return b.empty;
-					}
-				}
-			)
-		)
+		walk(/** @type {SvelteNode} */ (analysis.instance.ast), instance_state, visitors)
 	);
 
 	const template = /** @type {ESTree.Program} */ (
 		walk(
 			/** @type {SvelteNode} */ (analysis.template.ast),
-			{ ...state, scope: analysis.instance.scope },
-			combine_visitors(
-				set_scope(analysis.template.scopes),
-				global_visitors,
-				// @ts-expect-error TODO
-				template_visitors
-			)
+			{ ...state, scope: analysis.instance.scope, scopes: analysis.template.scopes },
+			visitors
 		)
 	);
 
@@ -589,17 +628,7 @@ export function client_module(analysis, options) {
 	};
 
 	const module = /** @type {ESTree.Program} */ (
-		walk(
-			/** @type {SvelteNode} */ (analysis.module.ast),
-			state,
-			combine_visitors(
-				set_scope(analysis.module.scopes),
-				global_visitors,
-				// @ts-expect-error
-				javascript_visitors,
-				javascript_visitors_runes
-			)
-		)
+		walk(/** @type {SvelteNode} */ (analysis.module.ast), state, visitors)
 	);
 
 	return {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
index 15cc09cf8b..b850e1b35c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
@@ -35,6 +35,7 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	readonly options: ValidatedCompileOptions;
 	readonly hoisted: Array<Statement | ModuleDeclaration>;
 	readonly events: Set<string>;
+	readonly is_instance: boolean;
 
 	/** Stuff that happens before the render effect(s) */
 	readonly before_init: Statement[];
@@ -78,7 +79,7 @@ export interface StateField {
 }
 
 export type Context = import('zimmerframe').Context<SvelteNode, ClientTransformState>;
-export type Visitors = import('zimmerframe').Visitors<SvelteNode, ClientTransformState>;
+export type Visitors = import('zimmerframe').Visitors<SvelteNode, any>;
 
 export type ComponentContext = import('zimmerframe').Context<
 	SvelteNode,
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 704ccbe6d8..60d5ebf802 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -476,37 +476,6 @@ export function serialize_proxy_reassignment(value, proxy_reference) {
 		: b.call('$.proxy', value);
 }
 
-/**
- * @param {ArrowFunctionExpression | FunctionExpression} node
- * @param {ComponentContext} context
- */
-export const function_visitor = (node, context) => {
-	const metadata = node.metadata;
-
-	let state = context.state;
-
-	if (node.type === 'FunctionExpression') {
-		const parent = /** @type {Node} */ (context.path.at(-1));
-		const in_constructor = parent.type === 'MethodDefinition' && parent.kind === 'constructor';
-
-		state = { ...context.state, in_constructor };
-	} else {
-		state = { ...context.state, in_constructor: false };
-	}
-
-	if (metadata?.hoistable === true) {
-		const params = serialize_hoistable_params(node, context);
-
-		return /** @type {FunctionExpression} */ ({
-			...node,
-			params,
-			body: context.visit(node.body, state)
-		});
-	}
-
-	context.next(state);
-};
-
 /**
  * @param {FunctionDeclaration | FunctionExpression | ArrowFunctionExpression} node
  * @param {ComponentContext} context
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AnimateDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AnimateDirective.js
new file mode 100644
index 0000000000..a70adbf334
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AnimateDirective.js
@@ -0,0 +1,28 @@
+/** @import { Expression } from 'estree' */
+/** @import { AnimateDirective } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+import { parse_directive_name } from './shared/utils.js';
+
+/**
+ * @param {AnimateDirective} node
+ * @param {ComponentContext} context
+ */
+export function AnimateDirective(node, context) {
+	const expression =
+		node.expression === null
+			? b.literal(null)
+			: b.thunk(/** @type {Expression} */ (context.visit(node.expression)));
+
+	// in after_update to ensure it always happens after bind:this
+	context.state.after_update.push(
+		b.stmt(
+			b.call(
+				'$.animation',
+				context.state.node,
+				b.thunk(/** @type {Expression} */ (context.visit(parse_directive_name(node.name)))),
+				expression
+			)
+		)
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ArrowFunctionExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ArrowFunctionExpression.js
new file mode 100644
index 0000000000..d06f2cdf67
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ArrowFunctionExpression.js
@@ -0,0 +1,11 @@
+/** @import { ArrowFunctionExpression } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+import { visit_function } from './shared/function.js';
+
+/**
+ * @param {ArrowFunctionExpression} node
+ * @param {ComponentContext} context
+ */
+export function ArrowFunctionExpression(node, context) {
+	return visit_function(node, context);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
new file mode 100644
index 0000000000..6b52647587
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
@@ -0,0 +1,11 @@
+/** @import { AssignmentExpression } from 'estree' */
+/** @import { Context } from '../types' */
+import { serialize_set_binding } from '../utils.js';
+
+/**
+ * @param {AssignmentExpression} node
+ * @param {Context} context
+ */
+export function AssignmentExpression(node, context) {
+	return serialize_set_binding(node, context, context.next);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Attribute.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Attribute.js
new file mode 100644
index 0000000000..732382a5d6
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Attribute.js
@@ -0,0 +1,14 @@
+/** @import { Attribute } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { is_event_attribute } from '../../../../utils/ast.js';
+import { serialize_event_attribute } from './shared/element.js';
+
+/**
+ * @param {Attribute} node
+ * @param {ComponentContext} context
+ */
+export function Attribute(node, context) {
+	if (is_event_attribute(node)) {
+		serialize_event_attribute(node, context);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
new file mode 100644
index 0000000000..21f16f3449
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
@@ -0,0 +1,67 @@
+/** @import { BlockStatement, Expression, Pattern } from 'estree' */
+/** @import { AwaitBlock } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+import { create_derived_block_argument } from '../utils.js';
+
+/**
+ * @param {AwaitBlock} node
+ * @param {ComponentContext} context
+ */
+export function AwaitBlock(node, context) {
+	context.state.template.push('<!>');
+
+	let then_block;
+	let catch_block;
+
+	if (node.then) {
+		/** @type {Pattern[]} */
+		const args = [b.id('$$anchor')];
+		const block = /** @type {BlockStatement} */ (context.visit(node.then));
+
+		if (node.value) {
+			const argument = create_derived_block_argument(node.value, context);
+
+			args.push(argument.id);
+
+			if (argument.declarations !== null) {
+				block.body.unshift(...argument.declarations);
+			}
+		}
+
+		then_block = b.arrow(args, block);
+	}
+
+	if (node.catch) {
+		/** @type {Pattern[]} */
+		const args = [b.id('$$anchor')];
+		const block = /** @type {BlockStatement} */ (context.visit(node.catch));
+
+		if (node.error) {
+			const argument = create_derived_block_argument(node.error, context);
+
+			args.push(argument.id);
+
+			if (argument.declarations !== null) {
+				block.body.unshift(...argument.declarations);
+			}
+		}
+
+		catch_block = b.arrow(args, block);
+	}
+
+	context.state.init.push(
+		b.stmt(
+			b.call(
+				'$.await',
+				context.state.node,
+				b.thunk(/** @type {Expression} */ (context.visit(node.expression))),
+				node.pending
+					? b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.pending)))
+					: b.literal(null),
+				then_block,
+				catch_block
+			)
+		)
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BinaryExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BinaryExpression.js
new file mode 100644
index 0000000000..c8c54a5a59
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BinaryExpression.js
@@ -0,0 +1,34 @@
+/** @import { Expression, BinaryExpression } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+import { dev } from '../../../../state.js';
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {BinaryExpression} node
+ * @param {ComponentContext} context
+ */
+export function BinaryExpression(node, context) {
+	if (dev) {
+		const operator = node.operator;
+
+		if (operator === '===' || operator === '!==') {
+			return b.call(
+				'$.strict_equals',
+				/** @type {Expression} */ (context.visit(node.left)),
+				/** @type {Expression} */ (context.visit(node.right)),
+				operator === '!==' && b.literal(false)
+			);
+		}
+
+		if (operator === '==' || operator === '!=') {
+			return b.call(
+				'$.equals',
+				/** @type {Expression} */ (context.visit(node.left)),
+				/** @type {Expression} */ (context.visit(node.right)),
+				operator === '!=' && b.literal(false)
+			);
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
new file mode 100644
index 0000000000..5211cbe392
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
@@ -0,0 +1,250 @@
+/** @import { CallExpression, Expression, MemberExpression } from 'estree' */
+/** @import { Attribute, BindDirective } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { dev, is_ignored } from '../../../../state.js';
+import { is_text_attribute } from '../../../../utils/ast.js';
+import * as b from '../../../../utils/builders.js';
+import { binding_properties } from '../../../bindings.js';
+import { serialize_set_binding } from '../utils.js';
+import { serialize_attribute_value } from './shared/element.js';
+import { serialize_bind_this, serialize_validate_binding } from './shared/utils.js';
+
+/**
+ * @param {BindDirective} node
+ * @param {ComponentContext} context
+ */
+export function BindDirective(node, context) {
+	const expression = node.expression;
+	const property = binding_properties[node.name];
+
+	const parent = /** @type {import('#compiler').SvelteNode} */ (context.path.at(-1));
+
+	if (
+		dev &&
+		context.state.analysis.runes &&
+		expression.type === 'MemberExpression' &&
+		(node.name !== 'this' ||
+			context.path.some(
+				({ type }) =>
+					type === 'IfBlock' || type === 'EachBlock' || type === 'AwaitBlock' || type === 'KeyBlock'
+			)) &&
+		!is_ignored(node, 'binding_property_non_reactive')
+	) {
+		context.state.init.push(
+			serialize_validate_binding(
+				context.state,
+				node,
+				/**@type {MemberExpression} */ (context.visit(expression))
+			)
+		);
+	}
+
+	const getter = b.thunk(/** @type {Expression} */ (context.visit(expression)));
+	const assignment = b.assignment('=', expression, b.id('$$value'));
+	const setter = b.arrow(
+		[b.id('$$value')],
+		serialize_set_binding(
+			assignment,
+			context,
+			() => /** @type {Expression} */ (context.visit(assignment)),
+			null,
+			{
+				skip_proxy_and_freeze: true
+			}
+		)
+	);
+
+	/** @type {CallExpression} */
+	let call;
+
+	if (property?.event) {
+		call = b.call(
+			'$.bind_property',
+			b.literal(node.name),
+			b.literal(property.event),
+			context.state.node,
+			setter,
+			property.bidirectional && getter
+		);
+	} else {
+		// special cases
+		switch (node.name) {
+			// window
+			case 'online':
+				call = b.call(`$.bind_online`, setter);
+				break;
+
+			case 'scrollX':
+			case 'scrollY':
+				call = b.call(
+					'$.bind_window_scroll',
+					b.literal(node.name === 'scrollX' ? 'x' : 'y'),
+					getter,
+					setter
+				);
+				break;
+
+			case 'innerWidth':
+			case 'innerHeight':
+			case 'outerWidth':
+			case 'outerHeight':
+				call = b.call('$.bind_window_size', b.literal(node.name), setter);
+				break;
+
+			// document
+			case 'activeElement':
+				call = b.call('$.bind_active_element', setter);
+				break;
+
+			// media
+			case 'muted':
+				call = b.call(`$.bind_muted`, context.state.node, getter, setter);
+				break;
+			case 'paused':
+				call = b.call(`$.bind_paused`, context.state.node, getter, setter);
+				break;
+			case 'volume':
+				call = b.call(`$.bind_volume`, context.state.node, getter, setter);
+				break;
+			case 'playbackRate':
+				call = b.call(`$.bind_playback_rate`, context.state.node, getter, setter);
+				break;
+			case 'currentTime':
+				call = b.call(`$.bind_current_time`, context.state.node, getter, setter);
+				break;
+			case 'buffered':
+				call = b.call(`$.bind_buffered`, context.state.node, setter);
+				break;
+			case 'played':
+				call = b.call(`$.bind_played`, context.state.node, setter);
+				break;
+			case 'seekable':
+				call = b.call(`$.bind_seekable`, context.state.node, setter);
+				break;
+			case 'seeking':
+				call = b.call(`$.bind_seeking`, context.state.node, setter);
+				break;
+			case 'ended':
+				call = b.call(`$.bind_ended`, context.state.node, setter);
+				break;
+			case 'readyState':
+				call = b.call(`$.bind_ready_state`, context.state.node, setter);
+				break;
+
+			// dimensions
+			case 'contentRect':
+			case 'contentBoxSize':
+			case 'borderBoxSize':
+			case 'devicePixelContentBoxSize':
+				call = b.call('$.bind_resize_observer', context.state.node, b.literal(node.name), setter);
+				break;
+
+			case 'clientWidth':
+			case 'clientHeight':
+			case 'offsetWidth':
+			case 'offsetHeight':
+				call = b.call('$.bind_element_size', context.state.node, b.literal(node.name), setter);
+				break;
+
+			// various
+			case 'value': {
+				if (parent?.type === 'RegularElement' && parent.name === 'select') {
+					call = b.call(`$.bind_select_value`, context.state.node, getter, setter);
+				} else {
+					call = b.call(`$.bind_value`, context.state.node, getter, setter);
+				}
+				break;
+			}
+
+			case 'files':
+				call = b.call(`$.bind_files`, context.state.node, getter, setter);
+				break;
+
+			case 'this':
+				call = serialize_bind_this(expression, context.state.node, context);
+				break;
+
+			case 'textContent':
+			case 'innerHTML':
+			case 'innerText':
+				call = b.call(
+					'$.bind_content_editable',
+					b.literal(node.name),
+					context.state.node,
+					getter,
+					setter
+				);
+				break;
+
+			// checkbox/radio
+			case 'checked':
+				call = b.call(`$.bind_checked`, context.state.node, getter, setter);
+				break;
+
+			case 'focused':
+				call = b.call(`$.bind_focused`, context.state.node, setter);
+				break;
+
+			case 'group': {
+				const indexes = node.metadata.parent_each_blocks.map((each) => {
+					// if we have a keyed block with an index, the index is wrapped in a source
+					return each.metadata.keyed && each.index
+						? b.call('$.get', each.metadata.index)
+						: each.metadata.index;
+				});
+
+				// We need to additionally invoke the value attribute signal to register it as a dependency,
+				// so that when the value is updated, the group binding is updated
+				let group_getter = getter;
+
+				if (parent?.type === 'RegularElement') {
+					const value = /** @type {any[]} */ (
+						/** @type {Attribute} */ (
+							parent.attributes.find(
+								(a) =>
+									a.type === 'Attribute' &&
+									a.name === 'value' &&
+									!is_text_attribute(a) &&
+									a.value !== true
+							)
+						)?.value
+					);
+					if (value !== undefined) {
+						group_getter = b.thunk(
+							b.block([
+								b.stmt(serialize_attribute_value(value, context)[1]),
+								b.return(/** @type {Expression} */ (context.visit(expression)))
+							])
+						);
+					}
+				}
+
+				call = b.call(
+					'$.bind_group',
+					node.metadata.binding_group_name,
+					b.array(indexes),
+					context.state.node,
+					group_getter,
+					setter
+				);
+				break;
+			}
+
+			default:
+				throw new Error('unknown binding ' + node.name);
+		}
+	}
+
+	// Bindings need to happen after attribute updates, therefore after the render effect, and in order with events/actions.
+	// bind:this is a special case as it's one-way and could influence the render effect.
+	if (node.name === 'this') {
+		context.state.init.push(b.stmt(call));
+	} else {
+		const has_action_directive =
+			parent.type === 'RegularElement' && parent.attributes.find((a) => a.type === 'UseDirective');
+
+		context.state.after_update.push(
+			b.stmt(has_action_directive ? b.call('$.effect', b.thunk(call)) : call)
+		);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BreakStatement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BreakStatement.js
new file mode 100644
index 0000000000..66b66c64f2
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BreakStatement.js
@@ -0,0 +1,20 @@
+/** @import { BreakStatement } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {BreakStatement} node
+ * @param {ComponentContext} context
+ */
+export function BreakStatement(node, context) {
+	if (context.state.analysis.runes || !node.label || node.label.name !== '$') {
+		return;
+	}
+
+	const in_reactive_statement =
+		context.path[1].type === 'LabeledStatement' && context.path[1].label.name === '$';
+
+	if (in_reactive_statement) {
+		return b.return();
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
new file mode 100644
index 0000000000..d58dfe73a7
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
@@ -0,0 +1,46 @@
+/** @import { CallExpression, Expression } from 'estree' */
+/** @import { Context } from '../types' */
+import { is_ignored } from '../../../../state.js';
+import * as b from '../../../../utils/builders.js';
+import { get_rune } from '../../../scope.js';
+import { transform_inspect_rune } from '../../utils.js';
+
+/**
+ * @param {CallExpression} node
+ * @param {Context} context
+ */
+export function CallExpression(node, context) {
+	switch (get_rune(node, context.state.scope)) {
+		case '$host':
+			return b.id('$$props.$$host');
+
+		case '$effect.tracking':
+			return b.call('$.effect_tracking');
+
+		case '$state.snapshot':
+			return b.call(
+				'$.snapshot',
+				/** @type {Expression} */ (context.visit(node.arguments[0])),
+				is_ignored(node, 'state_snapshot_uncloneable') && b.true
+			);
+
+		case '$state.is':
+			return b.call(
+				'$.is',
+				/** @type {Expression} */ (context.visit(node.arguments[0])),
+				/** @type {Expression} */ (context.visit(node.arguments[1]))
+			);
+
+		case '$effect.root':
+			return b.call(
+				'$.effect_root',
+				.../** @type {Expression[]} */ (node.arguments.map((arg) => context.visit(arg)))
+			);
+
+		case '$inspect':
+		case '$inspect().with':
+			return transform_inspect_rune(node, context);
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
new file mode 100644
index 0000000000..8d65f275ed
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
@@ -0,0 +1,223 @@
+/** @import { ClassBody, Expression, Identifier, Literal, MethodDefinition, PrivateIdentifier, PropertyDefinition } from 'estree' */
+/** @import {  } from '#compiler' */
+/** @import { Context, StateField } from '../types' */
+import { dev, is_ignored } from '../../../../state.js';
+import * as b from '../../../../utils/builders.js';
+import { regex_invalid_identifier_chars } from '../../../patterns.js';
+import { get_rune } from '../../../scope.js';
+import { serialize_proxy_reassignment, should_proxy_or_freeze } from '../utils.js';
+
+/**
+ * @param {ClassBody} node
+ * @param {Context} context
+ */
+export function ClassBody(node, context) {
+	if (!context.state.analysis.runes) {
+		context.next();
+		return;
+	}
+
+	/** @type {Map<string, StateField>} */
+	const public_state = new Map();
+
+	/** @type {Map<string, StateField>} */
+	const private_state = new Map();
+
+	/** @type {string[]} */
+	const private_ids = [];
+
+	for (const definition of node.body) {
+		if (
+			definition.type === 'PropertyDefinition' &&
+			(definition.key.type === 'Identifier' ||
+				definition.key.type === 'PrivateIdentifier' ||
+				definition.key.type === 'Literal')
+		) {
+			const type = definition.key.type;
+			const name = get_name(definition.key);
+			if (!name) continue;
+
+			const is_private = type === 'PrivateIdentifier';
+			if (is_private) private_ids.push(name);
+
+			if (definition.value?.type === 'CallExpression') {
+				const rune = get_rune(definition.value, context.state.scope);
+				if (
+					rune === '$state' ||
+					rune === '$state.frozen' ||
+					rune === '$derived' ||
+					rune === '$derived.by'
+				) {
+					/** @type {StateField} */
+					const field = {
+						kind:
+							rune === '$state'
+								? 'state'
+								: rune === '$state.frozen'
+									? 'frozen_state'
+									: rune === '$derived.by'
+										? 'derived_call'
+										: 'derived',
+						// @ts-expect-error this is set in the next pass
+						id: is_private ? definition.key : null
+					};
+
+					if (is_private) {
+						private_state.set(name, field);
+					} else {
+						public_state.set(name, field);
+					}
+				}
+			}
+		}
+	}
+
+	// each `foo = $state()` needs a backing `#foo` field
+	for (const [name, field] of public_state) {
+		let deconflicted = name;
+		while (private_ids.includes(deconflicted)) {
+			deconflicted = '_' + deconflicted;
+		}
+
+		private_ids.push(deconflicted);
+		field.id = b.private_id(deconflicted);
+	}
+
+	/** @type {Array<MethodDefinition | PropertyDefinition>} */
+	const body = [];
+
+	const child_state = { ...context.state, public_state, private_state };
+
+	// Replace parts of the class body
+	for (const definition of node.body) {
+		if (
+			definition.type === 'PropertyDefinition' &&
+			(definition.key.type === 'Identifier' ||
+				definition.key.type === 'PrivateIdentifier' ||
+				definition.key.type === 'Literal')
+		) {
+			const name = get_name(definition.key);
+			if (!name) continue;
+
+			const is_private = definition.key.type === 'PrivateIdentifier';
+			const field = (is_private ? private_state : public_state).get(name);
+
+			if (definition.value?.type === 'CallExpression' && field !== undefined) {
+				let value = null;
+
+				if (definition.value.arguments.length > 0) {
+					const init = /** @type {Expression} **/ (
+						context.visit(definition.value.arguments[0], child_state)
+					);
+
+					value =
+						field.kind === 'state'
+							? b.call(
+									'$.source',
+									should_proxy_or_freeze(init, context.state.scope) ? b.call('$.proxy', init) : init
+								)
+							: field.kind === 'frozen_state'
+								? b.call(
+										'$.source',
+										should_proxy_or_freeze(init, context.state.scope)
+											? b.call('$.freeze', init)
+											: init
+									)
+								: field.kind === 'derived_call'
+									? b.call('$.derived', init)
+									: b.call('$.derived', b.thunk(init));
+				} else {
+					// if no arguments, we know it's state as `$derived()` is a compile error
+					value = b.call('$.source');
+				}
+
+				if (is_private) {
+					body.push(b.prop_def(field.id, value));
+				} else {
+					// #foo;
+					const member = b.member(b.this, field.id);
+					body.push(b.prop_def(field.id, value));
+
+					// get foo() { return this.#foo; }
+					body.push(b.method('get', definition.key, [], [b.return(b.call('$.get', member))]));
+
+					if (field.kind === 'state') {
+						// set foo(value) { this.#foo = value; }
+						const value = b.id('value');
+						body.push(
+							b.method(
+								'set',
+								definition.key,
+								[value],
+								[b.stmt(b.call('$.set', member, serialize_proxy_reassignment(value, field.id)))]
+							)
+						);
+					}
+
+					if (field.kind === 'frozen_state') {
+						// set foo(value) { this.#foo = value; }
+						const value = b.id('value');
+						body.push(
+							b.method(
+								'set',
+								definition.key,
+								[value],
+								[b.stmt(b.call('$.set', member, b.call('$.freeze', value)))]
+							)
+						);
+					}
+
+					if (dev && (field.kind === 'derived' || field.kind === 'derived_call')) {
+						body.push(
+							b.method(
+								'set',
+								definition.key,
+								[b.id('_')],
+								[b.throw_error(`Cannot update a derived property ('${name}')`)]
+							)
+						);
+					}
+				}
+				continue;
+			}
+		}
+
+		body.push(/** @type {MethodDefinition} **/ (context.visit(definition, child_state)));
+	}
+
+	if (dev && public_state.size > 0) {
+		// add an `[$.ADD_OWNER]` method so that a class with state fields can widen ownership
+		body.push(
+			b.method(
+				'method',
+				b.id('$.ADD_OWNER'),
+				[b.id('owner')],
+				Array.from(public_state.keys()).map((name) =>
+					b.stmt(
+						b.call(
+							'$.add_owner',
+							b.call('$.get', b.member(b.this, b.private_id(name))),
+							b.id('owner'),
+							b.literal(false),
+							is_ignored(node, 'ownership_invalid_binding') && b.true
+						)
+					)
+				),
+				true
+			)
+		);
+	}
+
+	return { ...node, body };
+}
+
+/**
+ * @param {Identifier | PrivateIdentifier | Literal} node
+ */
+function get_name(node) {
+	if (node.type === 'Literal') {
+		return node.value?.toString().replace(regex_invalid_identifier_chars, '_');
+	} else {
+		return node.name;
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Comment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Comment.js
new file mode 100644
index 0000000000..b8d3c45903
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Comment.js
@@ -0,0 +1,11 @@
+/** @import { Comment } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+
+/**
+ * @param {Comment} node
+ * @param {ComponentContext} context
+ */
+export function Comment(node, context) {
+	// We'll only get here if comments are not filtered out, which they are unless preserveComments is true
+	context.state.template.push(`<!--${node.data}-->`);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
new file mode 100644
index 0000000000..b212fac0bc
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
@@ -0,0 +1,32 @@
+/** @import { Expression } from 'estree' */
+/** @import { Component } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+import { serialize_component } from './shared/component.js';
+
+/**
+ * @param {Component} node
+ * @param {ComponentContext} context
+ */
+export function Component(node, context) {
+	if (node.metadata.dynamic) {
+		// Handle dynamic references to what seems like static inline components
+		const component = serialize_component(node, '$$component', context, b.id('$$anchor'));
+		context.state.init.push(
+			b.stmt(
+				b.call(
+					'$.component',
+					context.state.node,
+					// TODO use untrack here to not update when binding changes?
+					// Would align with Svelte 4 behavior, but it's arguably nicer/expected to update this
+					b.thunk(/** @type {Expression} */ (context.visit(b.member_id(node.name)))),
+					b.arrow([b.id('$$anchor'), b.id('$$component')], b.block([component]))
+				)
+			)
+		);
+		return;
+	}
+
+	const component = serialize_component(node, node.name, context);
+	context.state.init.push(component);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
new file mode 100644
index 0000000000..10623ce3f5
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
@@ -0,0 +1,73 @@
+/** @import { Expression, Pattern } from 'estree' */
+/** @import { ConstTag } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { dev } from '../../../../state.js';
+import { extract_identifiers } from '../../../../utils/ast.js';
+import * as b from '../../../../utils/builders.js';
+import { create_derived } from '../utils.js';
+
+/**
+ * @param {ConstTag} node
+ * @param {ComponentContext} context
+ */
+export function ConstTag(node, context) {
+	const declaration = node.declaration.declarations[0];
+	// TODO we can almost certainly share some code with $derived(...)
+	if (declaration.id.type === 'Identifier') {
+		context.state.init.push(
+			b.const(
+				declaration.id,
+				create_derived(
+					context.state,
+					b.thunk(/** @type {Expression} */ (context.visit(declaration.init)))
+				)
+			)
+		);
+
+		context.state.getters[declaration.id.name] = b.call('$.get', declaration.id);
+
+		// we need to eagerly evaluate the expression in order to hit any
+		// 'Cannot access x before initialization' errors
+		if (dev) {
+			context.state.init.push(b.stmt(b.call('$.get', declaration.id)));
+		}
+	} else {
+		const identifiers = extract_identifiers(declaration.id);
+		const tmp = b.id(context.state.scope.generate('computed_const'));
+
+		const getters = { ...context.state.getters };
+
+		// Make all identifiers that are declared within the following computed regular
+		// variables, as they are not signals in that context yet
+		for (const node of identifiers) {
+			getters[node.name] = node;
+		}
+
+		const child_state = { ...context.state, getters };
+
+		// TODO optimise the simple `{ x } = y` case — we can just return `y`
+		// instead of destructuring it only to return a new object
+		const fn = b.arrow(
+			[],
+			b.block([
+				b.const(
+					/** @type {Pattern} */ (context.visit(declaration.id, child_state)),
+					/** @type {Expression} */ (context.visit(declaration.init, child_state))
+				),
+				b.return(b.object(identifiers.map((node) => b.prop('init', node, node))))
+			])
+		);
+
+		context.state.init.push(b.const(tmp, create_derived(context.state, fn)));
+
+		// we need to eagerly evaluate the expression in order to hit any
+		// 'Cannot access x before initialization' errors
+		if (dev) {
+			context.state.init.push(b.stmt(b.call('$.get', tmp)));
+		}
+
+		for (const node of identifiers) {
+			context.state.getters[node.name] = b.member(b.call('$.get', tmp), node);
+		}
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js
new file mode 100644
index 0000000000..7c6fd0d458
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/DebugTag.js
@@ -0,0 +1,22 @@
+/** @import { Expression} from 'estree' */
+/** @import { DebugTag } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {DebugTag} node
+ * @param {ComponentContext} context
+ */
+export function DebugTag(node, context) {
+	const object = b.object(
+		node.identifiers.map((identifier) =>
+			b.prop('init', identifier, /** @type {Expression} */ (context.visit(identifier)))
+		)
+	);
+
+	const call = b.call('console.log', object);
+
+	context.state.init.push(
+		b.stmt(b.call('$.template_effect', b.thunk(b.block([b.stmt(call), b.debugger]))))
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
new file mode 100644
index 0000000000..8329c822bc
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
@@ -0,0 +1,317 @@
+/** @import { BlockStatement, Expression, Identifier, MemberExpression, Pattern, Statement } from 'estree' */
+/** @import { Binding, EachBlock } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import {
+	EACH_INDEX_REACTIVE,
+	EACH_IS_ANIMATED,
+	EACH_IS_CONTROLLED,
+	EACH_IS_STRICT_EQUALS,
+	EACH_ITEM_REACTIVE,
+	EACH_KEYED
+} from '../../../../../constants.js';
+import { dev } from '../../../../state.js';
+import { extract_paths, object } from '../../../../utils/ast.js';
+import * as b from '../../../../utils/builders.js';
+import {
+	get_assignment_value,
+	serialize_get_binding,
+	serialize_set_binding,
+	with_loc
+} from '../utils.js';
+
+/**
+ * @param {EachBlock} node
+ * @param {ComponentContext} context
+ */
+export function EachBlock(node, context) {
+	const each_node_meta = node.metadata;
+	const collection = /** @type {Expression} */ (context.visit(node.expression));
+
+	if (!each_node_meta.is_controlled) {
+		context.state.template.push('<!>');
+	}
+
+	if (each_node_meta.array_name !== null) {
+		context.state.init.push(b.const(each_node_meta.array_name, b.thunk(collection)));
+	}
+
+	let flags = 0;
+
+	if (node.metadata.keyed) {
+		flags |= EACH_KEYED;
+
+		if (node.index) {
+			flags |= EACH_INDEX_REACTIVE;
+		}
+
+		// In runes mode, if key === item, we don't need to wrap the item in a source
+		const key_is_item =
+			/** @type {Expression} */ (node.key).type === 'Identifier' &&
+			node.context.type === 'Identifier' &&
+			node.context.name === node.key.name;
+
+		if (!context.state.analysis.runes || !key_is_item) {
+			flags |= EACH_ITEM_REACTIVE;
+		}
+	} else {
+		flags |= EACH_ITEM_REACTIVE;
+	}
+
+	// Since `animate:` can only appear on elements that are the sole child of a keyed each block,
+	// we can determine at compile time whether the each block is animated or not (in which
+	// case it should measure animated elements before and after reconciliation).
+	if (
+		node.key &&
+		node.body.nodes.some((child) => {
+			if (child.type !== 'RegularElement' && child.type !== 'SvelteElement') return false;
+			return child.attributes.some((attr) => attr.type === 'AnimateDirective');
+		})
+	) {
+		flags |= EACH_IS_ANIMATED;
+	}
+
+	if (each_node_meta.is_controlled) {
+		flags |= EACH_IS_CONTROLLED;
+	}
+
+	if (context.state.analysis.runes) {
+		flags |= EACH_IS_STRICT_EQUALS;
+	}
+
+	// If the array is a store expression, we need to invalidate it when the array is changed.
+	// This doesn't catch all cases, but all the ones that Svelte 4 catches, too.
+	let store_to_invalidate = '';
+	if (node.expression.type === 'Identifier' || node.expression.type === 'MemberExpression') {
+		const id = object(node.expression);
+		if (id) {
+			const binding = context.state.scope.get(id.name);
+			if (binding?.kind === 'store_sub') {
+				store_to_invalidate = id.name;
+			}
+		}
+	}
+
+	// Legacy mode: find the parent each blocks which contain the arrays to invalidate
+	const indirect_dependencies = collect_parent_each_blocks(context).flatMap((block) => {
+		const array = /** @type {Expression} */ (context.visit(block.expression));
+		const transitive_dependencies = serialize_transitive_dependencies(
+			block.metadata.references,
+			context
+		);
+		return [array, ...transitive_dependencies];
+	});
+
+	if (each_node_meta.array_name) {
+		indirect_dependencies.push(b.call(each_node_meta.array_name));
+	} else {
+		indirect_dependencies.push(collection);
+
+		const transitive_dependencies = serialize_transitive_dependencies(
+			each_node_meta.references,
+			context
+		);
+		indirect_dependencies.push(...transitive_dependencies);
+	}
+
+	const child_state = {
+		...context.state,
+		getters: { ...context.state.getters }
+	};
+
+	/** The state used when generating the key function, if necessary */
+	const key_state = {
+		...context.state,
+		getters: { ...context.state.getters }
+	};
+
+	/**
+	 * @param {Pattern} expression_for_id
+	 * @returns {Binding['mutation']}
+	 */
+	const create_mutation = (expression_for_id) => {
+		return (assignment, context) => {
+			if (assignment.left.type !== 'Identifier' && assignment.left.type !== 'MemberExpression') {
+				// serialize_set_binding turns other patterns into IIFEs and separates the assignments
+				// into separate expressions, at which point this is called again with an identifier or member expression
+				return serialize_set_binding(assignment, context, () => assignment);
+			}
+
+			const left = object(assignment.left);
+			const value = get_assignment_value(assignment, context);
+			const invalidate = b.call(
+				'$.invalidate_inner_signals',
+				b.thunk(b.sequence(indirect_dependencies))
+			);
+			const invalidate_store = store_to_invalidate
+				? b.call('$.invalidate_store', b.id('$$stores'), b.literal(store_to_invalidate))
+				: undefined;
+
+			const sequence = [];
+			if (!context.state.analysis.runes) sequence.push(invalidate);
+			if (invalidate_store) sequence.push(invalidate_store);
+
+			if (left === assignment.left) {
+				const assign = b.assignment('=', expression_for_id, value);
+				sequence.unshift(assign);
+				return b.sequence(sequence);
+			} else {
+				const original_left = /** @type {MemberExpression} */ (assignment.left);
+				const left = context.visit(original_left);
+				const assign = b.assignment(assignment.operator, left, value);
+				sequence.unshift(assign);
+				return b.sequence(sequence);
+			}
+		};
+	};
+
+	// We need to generate a unique identifier in case there's a bind:group below
+	// which needs a reference to the index
+	const index =
+		each_node_meta.contains_group_binding || !node.index ? each_node_meta.index : b.id(node.index);
+	const item = each_node_meta.item;
+	const binding = /** @type {Binding} */ (context.state.scope.get(item.name));
+	const getter = (/** @type {Identifier} */ id) => {
+		const item_with_loc = with_loc(item, id);
+		return b.call('$.unwrap', item_with_loc);
+	};
+	child_state.getters[item.name] = getter;
+
+	if (node.index) {
+		child_state.getters[node.index] = (id) => {
+			const index_with_loc = with_loc(index, id);
+			return (flags & EACH_INDEX_REACTIVE) === 0 ? index_with_loc : b.call('$.get', index_with_loc);
+		};
+
+		key_state.getters[node.index] = b.id(node.index);
+	}
+
+	/** @type {Statement[]} */
+	const declarations = [];
+
+	if (node.context.type === 'Identifier') {
+		binding.mutation = create_mutation(
+			b.member(
+				each_node_meta.array_name ? b.call(each_node_meta.array_name) : collection,
+				index,
+				true
+			)
+		);
+
+		key_state.getters[node.context.name] = node.context;
+	} else {
+		const unwrapped = getter(binding.node);
+		const paths = extract_paths(node.context);
+
+		for (const path of paths) {
+			const name = /** @type {Identifier} */ (path.node).name;
+			const binding = /** @type {Binding} */ (context.state.scope.get(name));
+			const needs_derived = path.has_default_value; // to ensure that default value is only called once
+			const fn = b.thunk(
+				/** @type {Expression} */ (context.visit(path.expression?.(unwrapped), child_state))
+			);
+
+			declarations.push(b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn));
+
+			const getter = needs_derived ? b.call('$.get', b.id(name)) : b.call(name);
+			child_state.getters[name] = getter;
+			binding.mutation = create_mutation(
+				/** @type {Pattern} */ (path.update_expression(unwrapped))
+			);
+
+			// we need to eagerly evaluate the expression in order to hit any
+			// 'Cannot access x before initialization' errors
+			if (dev) {
+				declarations.push(b.stmt(getter));
+			}
+
+			key_state.getters[name] = path.node;
+		}
+	}
+
+	const block = /** @type {BlockStatement} */ (context.visit(node.body, child_state));
+
+	/** @type {Expression} */
+	let key_function = b.id('$.index');
+
+	if (node.metadata.keyed) {
+		const expression = /** @type {Expression} */ (
+			context.visit(/** @type {Expression} */ (node.key), key_state)
+		);
+
+		key_function = b.arrow([node.context, index], expression);
+	}
+
+	if (node.index && each_node_meta.contains_group_binding) {
+		// We needed to create a unique identifier for the index above, but we want to use the
+		// original index name in the template, therefore create another binding
+		declarations.push(b.let(node.index, index));
+	}
+
+	if (dev && (flags & EACH_KEYED) !== 0) {
+		context.state.init.push(
+			b.stmt(b.call('$.validate_each_keys', b.thunk(collection), key_function))
+		);
+	}
+
+	/** @type {Expression[]} */
+	const args = [
+		context.state.node,
+		b.literal(flags),
+		each_node_meta.array_name ? each_node_meta.array_name : b.thunk(collection),
+		key_function,
+		b.arrow([b.id('$$anchor'), item, index], b.block(declarations.concat(block.body)))
+	];
+
+	if (node.fallback) {
+		args.push(
+			b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.fallback)))
+		);
+	}
+
+	context.state.init.push(b.stmt(b.call('$.each', ...args)));
+}
+
+/**
+ * @param {ComponentContext} context
+ */
+function collect_parent_each_blocks(context) {
+	return /** @type {EachBlock[]} */ (context.path.filter((node) => node.type === 'EachBlock'));
+}
+
+/**
+ * @param {Binding[]} references
+ * @param {ComponentContext} context
+ */
+function serialize_transitive_dependencies(references, context) {
+	/** @type {Set<Binding>} */
+	const dependencies = new Set();
+
+	for (const ref of references) {
+		const deps = collect_transitive_dependencies(ref);
+		for (const dep of deps) {
+			dependencies.add(dep);
+		}
+	}
+
+	return [...dependencies].map((dep) => serialize_get_binding({ ...dep.node }, context.state));
+}
+
+/**
+ * @param {Binding} binding
+ * @param {Set<Binding>} seen
+ * @returns {Binding[]}
+ */
+function collect_transitive_dependencies(binding, seen = new Set()) {
+	if (binding.kind !== 'legacy_reactive') return [];
+
+	for (const dep of binding.legacy_dependencies) {
+		if (!seen.has(dep)) {
+			seen.add(dep);
+			for (const transitive_dep of collect_transitive_dependencies(dep, seen)) {
+				seen.add(transitive_dep);
+			}
+		}
+	}
+
+	return [...seen];
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ExportNamedDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ExportNamedDeclaration.js
new file mode 100644
index 0000000000..cab7f90c3d
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ExportNamedDeclaration.js
@@ -0,0 +1,19 @@
+/** @import { ExportNamedDeclaration } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {ExportNamedDeclaration} node
+ * @param {ComponentContext} context
+ */
+export function ExportNamedDeclaration(node, context) {
+	if (context.state.is_instance) {
+		if (node.declaration) {
+			return context.visit(node.declaration);
+		}
+
+		return b.empty;
+	}
+
+	return context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ExpressionStatement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ExpressionStatement.js
new file mode 100644
index 0000000000..2aa416ec39
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ExpressionStatement.js
@@ -0,0 +1,23 @@
+/** @import { Expression, ExpressionStatement } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+import { get_rune } from '../../../scope.js';
+
+/**
+ * @param {ExpressionStatement} node
+ * @param {ComponentContext} context
+ */
+export function ExpressionStatement(node, context) {
+	if (node.expression.type === 'CallExpression') {
+		const rune = get_rune(node.expression, context.state.scope);
+
+		if (rune === '$effect' || rune === '$effect.pre') {
+			const callee = rune === '$effect' ? '$.user_effect' : '$.user_pre_effect';
+			const func = /** @type {Expression} */ (context.visit(node.expression.arguments[0]));
+
+			return b.stmt(b.call(callee, /** @type {Expression} */ (func)));
+		}
+	}
+
+	context.next();
+}
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
new file mode 100644
index 0000000000..368f33fd11
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js
@@ -0,0 +1,236 @@
+/** @import { Expression, Identifier, Statement } from 'estree' */
+/** @import { Fragment, Namespace, RegularElement } from '#compiler' */
+/** @import { SourceLocation } from '#shared' */
+/** @import { ComponentClientTransformState, ComponentContext } from '../types' */
+import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../../../constants.js';
+import { dev } from '../../../../state.js';
+import * as b from '../../../../utils/builders.js';
+import { clean_nodes, infer_namespace } from '../../utils.js';
+import { process_children } from './shared/fragment.js';
+import { serialize_render_stmt } from './shared/utils.js';
+
+/**
+ * @param {Fragment} node
+ * @param {ComponentContext} context
+ */
+export function Fragment(node, context) {
+	// Creates a new block which looks roughly like this:
+	// ```js
+	// // hoisted:
+	// const block_name = $.template(`...`);
+	//
+	// // for the main block:
+	// const id = block_name();
+	// // init stuff and possibly render effect
+	// $.append($$anchor, id);
+	// ```
+	// Adds the hoisted parts to `context.state.hoisted` and returns the statements of the main block.
+
+	const parent = context.path.at(-1) ?? node;
+
+	const namespace = infer_namespace(context.state.metadata.namespace, parent, node.nodes);
+
+	const { hoisted, trimmed, is_standalone, is_text_first } = clean_nodes(
+		parent,
+		node.nodes,
+		context.path,
+		namespace,
+		context.state,
+		context.state.preserve_whitespace,
+		context.state.options.preserveComments
+	);
+
+	if (hoisted.length === 0 && trimmed.length === 0) {
+		return b.block([]);
+	}
+
+	const is_single_element = trimmed.length === 1 && trimmed[0].type === 'RegularElement';
+	const is_single_child_not_needing_template =
+		trimmed.length === 1 &&
+		(trimmed[0].type === 'SvelteFragment' || trimmed[0].type === 'TitleElement');
+
+	const template_name = context.state.scope.root.unique('root'); // TODO infer name from parent
+
+	/** @type {Statement[]} */
+	const body = [];
+
+	/** @type {Statement | undefined} */
+	let close = undefined;
+
+	/** @type {ComponentClientTransformState} */
+	const state = {
+		...context.state,
+		before_init: [],
+		init: [],
+		update: [],
+		after_update: [],
+		template: [],
+		locations: [],
+		getters: { ...context.state.getters },
+		metadata: {
+			context: {
+				template_needs_import_node: false,
+				template_contains_script_tag: false
+			},
+			namespace,
+			bound_contenteditable: context.state.metadata.bound_contenteditable
+		}
+	};
+
+	for (const node of hoisted) {
+		context.visit(node, state);
+	}
+
+	if (is_text_first) {
+		// skip over inserted comment
+		body.push(b.stmt(b.call('$.next')));
+	}
+
+	/**
+	 * @param {Identifier} template_name
+	 * @param {Expression[]} args
+	 */
+	const add_template = (template_name, args) => {
+		let call = b.call(get_template_function(namespace, state), ...args);
+		if (dev) {
+			call = b.call(
+				'$.add_locations',
+				call,
+				b.member(b.id(context.state.analysis.name), b.id('$.FILENAME'), true),
+				serialize_locations(state.locations)
+			);
+		}
+
+		context.state.hoisted.push(b.var(template_name, call));
+	};
+
+	if (is_single_element) {
+		const element = /** @type {RegularElement} */ (trimmed[0]);
+
+		const id = b.id(context.state.scope.generate(element.name));
+
+		context.visit(element, {
+			...state,
+			node: id
+		});
+
+		/** @type {Expression[]} */
+		const args = [b.template([b.quasi(state.template.join(''), true)], [])];
+
+		if (state.metadata.context.template_needs_import_node) {
+			args.push(b.literal(TEMPLATE_USE_IMPORT_NODE));
+		}
+
+		add_template(template_name, args);
+
+		body.push(b.var(id, b.call(template_name)), ...state.before_init, ...state.init);
+		close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
+	} else if (is_single_child_not_needing_template) {
+		context.visit(trimmed[0], state);
+		body.push(...state.before_init, ...state.init);
+	} else if (trimmed.length > 0) {
+		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');
+
+		if (use_space_template) {
+			// special case — we can use `$.text` instead of creating a unique template
+			const id = b.id(context.state.scope.generate('text'));
+
+			process_children(trimmed, () => id, false, {
+				...context,
+				state
+			});
+
+			body.push(b.var(id, b.call('$.text')), ...state.before_init, ...state.init);
+			close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
+		} 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 });
+			} 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 });
+
+				let flags = TEMPLATE_FRAGMENT;
+
+				if (state.metadata.context.template_needs_import_node) {
+					flags |= TEMPLATE_USE_IMPORT_NODE;
+				}
+
+				if (state.template.length === 1 && state.template[0] === '<!>') {
+					// special case — we can use `$.comment` instead of creating a unique template
+					body.push(b.var(id, b.call('$.comment')));
+				} else {
+					add_template(template_name, [
+						b.template([b.quasi(state.template.join(''), true)], []),
+						b.literal(flags)
+					]);
+
+					body.push(b.var(id, b.call(template_name)));
+				}
+
+				close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
+			}
+
+			body.push(...state.before_init, ...state.init);
+		}
+	} else {
+		body.push(...state.before_init, ...state.init);
+	}
+
+	if (state.update.length > 0) {
+		body.push(serialize_render_stmt(state.update));
+	}
+
+	body.push(...state.after_update);
+
+	if (close !== undefined) {
+		// It's important that close is the last statement in the block, as any previous statements
+		// could contain element insertions into the template, which the close statement needs to
+		// know of when constructing the list of current inner elements.
+		body.push(close);
+	}
+
+	return b.block(body);
+}
+
+/**
+ *
+ * @param {Namespace} namespace
+ * @param {ComponentClientTransformState} state
+ * @returns
+ */
+function get_template_function(namespace, state) {
+	const contains_script_tag = state.metadata.context.template_contains_script_tag;
+	return namespace === 'svg'
+		? contains_script_tag
+			? '$.svg_template_with_script'
+			: '$.ns_template'
+		: namespace === 'mathml'
+			? '$.mathml_template'
+			: contains_script_tag
+				? '$.template_with_script'
+				: '$.template';
+}
+
+/**
+ * @param {SourceLocation[]} locations
+ */
+function serialize_locations(locations) {
+	return b.array(
+		locations.map((loc) => {
+			const expression = b.array([b.literal(loc[0]), b.literal(loc[1])]);
+
+			if (loc.length === 3) {
+				expression.elements.push(serialize_locations(loc[2]));
+			}
+
+			return expression;
+		})
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
new file mode 100644
index 0000000000..8f2eca91b1
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
@@ -0,0 +1,31 @@
+/** @import { FunctionDeclaration } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+import { serialize_hoistable_params } from '../utils.js';
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {FunctionDeclaration} node
+ * @param {ComponentContext} context
+ */
+export function FunctionDeclaration(node, context) {
+	const metadata = node.metadata;
+
+	const state = { ...context.state, in_constructor: false };
+
+	if (metadata?.hoistable === true) {
+		const params = serialize_hoistable_params(node, context);
+
+		context.state.hoisted.push(
+			/** @type {FunctionDeclaration} */ ({
+				...node,
+				id: node.id !== null ? context.visit(node.id, state) : null,
+				params,
+				body: context.visit(node.body, state)
+			})
+		);
+
+		return b.empty;
+	}
+
+	context.next(state);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionExpression.js
new file mode 100644
index 0000000000..884dfc8a33
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionExpression.js
@@ -0,0 +1,11 @@
+/** @import { FunctionExpression } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+import { visit_function } from './shared/function.js';
+
+/**
+ * @param {FunctionExpression} node
+ * @param {ComponentContext} context
+ */
+export function FunctionExpression(node, context) {
+	return visit_function(node, context);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js
new file mode 100644
index 0000000000..e9725f29e3
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/HtmlTag.js
@@ -0,0 +1,27 @@
+/** @import { Expression } from 'estree' */
+/** @import { HtmlTag } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { is_ignored } from '../../../../state.js';
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {HtmlTag} node
+ * @param {ComponentContext} context
+ */
+export function HtmlTag(node, context) {
+	context.state.template.push('<!>');
+
+	// push into init, so that bindings run afterwards, which might trigger another run and override hydration
+	context.state.init.push(
+		b.stmt(
+			b.call(
+				'$.html',
+				context.state.node,
+				b.thunk(/** @type {Expression} */ (context.visit(node.expression))),
+				b.literal(context.state.metadata.namespace === 'svg'),
+				b.literal(context.state.metadata.namespace === 'mathml'),
+				is_ignored(node, 'hydration_html_changed') && b.true
+			)
+		)
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Identifier.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Identifier.js
new file mode 100644
index 0000000000..7acdf179b6
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Identifier.js
@@ -0,0 +1,41 @@
+/** @import { Identifier, Node } from 'estree' */
+/** @import { Context } from '../types' */
+import is_reference from 'is-reference';
+import * as b from '../../../../utils/builders.js';
+import { serialize_get_binding } from '../utils.js';
+
+/**
+ * @param {Identifier} node
+ * @param {Context} context
+ */
+export function Identifier(node, context) {
+	const parent = /** @type {Node} */ (context.path.at(-1));
+
+	if (is_reference(node, parent)) {
+		if (node.name === '$$props') {
+			return b.id('$$sanitized_props');
+		}
+
+		// Optimize prop access: If it's a member read access, we can use the $$props object directly
+		const binding = context.state.scope.get(node.name);
+		if (
+			context.state.analysis.runes && // can't do this in legacy mode because the proxy does more than just read/write
+			binding !== null &&
+			node !== binding.node &&
+			binding.kind === 'rest_prop'
+		) {
+			const grand_parent = context.path.at(-2);
+
+			if (
+				parent?.type === 'MemberExpression' &&
+				!parent.computed &&
+				grand_parent?.type !== 'AssignmentExpression' &&
+				grand_parent?.type !== 'UpdateExpression'
+			) {
+				return b.id('$$props');
+			}
+		}
+
+		return serialize_get_binding(node, context.state);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js
new file mode 100644
index 0000000000..888f672be3
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/IfBlock.js
@@ -0,0 +1,55 @@
+/** @import { BlockStatement, Expression } from 'estree' */
+/** @import { IfBlock } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {IfBlock} node
+ * @param {ComponentContext} context
+ */
+export function IfBlock(node, context) {
+	context.state.template.push('<!>');
+
+	const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
+
+	const args = [
+		context.state.node,
+		b.thunk(/** @type {Expression} */ (context.visit(node.test))),
+		b.arrow([b.id('$$anchor')], consequent)
+	];
+
+	if (node.alternate || node.elseif) {
+		args.push(
+			node.alternate
+				? b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.alternate)))
+				: b.literal(null)
+		);
+	}
+
+	if (node.elseif) {
+		// We treat this...
+		//
+		//   {#if x}
+		//     ...
+		//   {:else}
+		//     {#if y}
+		//       <div transition:foo>...</div>
+		//     {/if}
+		//   {/if}
+		//
+		// ...slightly differently to this...
+		//
+		//   {#if x}
+		//     ...
+		//   {:else if y}
+		//     <div transition:foo>...</div>
+		//   {/if}
+		//
+		// ...even though they're logically equivalent. In the first case, the
+		// transition will only play when `y` changes, but in the second it
+		// should play when `x` or `y` change — both are considered 'local'
+		args.push(b.literal(true));
+	}
+
+	context.state.init.push(b.stmt(b.call('$.if', ...args)));
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ImportDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ImportDeclaration.js
new file mode 100644
index 0000000000..a222353687
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ImportDeclaration.js
@@ -0,0 +1,15 @@
+/** @import { ImportDeclaration } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {ImportDeclaration} node
+ * @param {ComponentContext} context
+ */
+export function ImportDeclaration(node, context) {
+	if ('hoisted' in context.state) {
+		context.state.hoisted.push(node);
+	}
+
+	return b.empty;
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js
new file mode 100644
index 0000000000..106a030515
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/KeyBlock.js
@@ -0,0 +1,19 @@
+/** @import { Expression } from 'estree' */
+/** @import { KeyBlock } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {KeyBlock} node
+ * @param {ComponentContext} context
+ */
+export function KeyBlock(node, context) {
+	context.state.template.push('<!>');
+
+	const key = /** @type {Expression} */ (context.visit(node.expression));
+	const body = /** @type {Expression} */ (context.visit(node.fragment));
+
+	context.state.init.push(
+		b.stmt(b.call('$.key', context.state.node, b.thunk(key), b.arrow([b.id('$$anchor')], body)))
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js
new file mode 100644
index 0000000000..24a6ed832c
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js
@@ -0,0 +1,64 @@
+/** @import { Expression, LabeledStatement, Statement } from 'estree' */
+/** @import { ReactiveStatement } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+import { serialize_get_binding } from '../utils.js';
+
+/**
+ * @param {LabeledStatement} node
+ * @param {ComponentContext} context
+ */
+export function LabeledStatement(node, context) {
+	if (context.state.analysis.runes || context.path.length > 1 || node.label.name !== '$') {
+		context.next();
+		return;
+	}
+
+	// To recreate Svelte 4 behaviour, we track the dependencies
+	// the compiler can 'see', but we untrack the effect itself
+	const reactive_statement = /** @type {ReactiveStatement} */ (
+		context.state.analysis.reactive_statements.get(node)
+	);
+
+	if (!reactive_statement) return; // not the instance context
+
+	let serialized_body = /** @type {Statement} */ (context.visit(node.body));
+
+	if (serialized_body.type !== 'BlockStatement') {
+		serialized_body = b.block([serialized_body]);
+	}
+
+	const body = serialized_body.body;
+
+	/** @type {Expression[]} */
+	const sequence = [];
+
+	for (const binding of reactive_statement.dependencies) {
+		if (binding.kind === 'normal') continue;
+
+		const name = binding.node.name;
+		let serialized = serialize_get_binding(b.id(name), context.state);
+
+		// If the binding is a prop, we need to deep read it because it could be fine-grained $state
+		// from a runes-component, where mutations don't trigger an update on the prop as a whole.
+		if (name === '$$props' || name === '$$restProps' || binding.kind === 'bindable_prop') {
+			serialized = b.call('$.deep_read_state', serialized);
+		}
+
+		sequence.push(serialized);
+	}
+
+	// these statements will be topologically ordered later
+	context.state.legacy_reactive_statements.set(
+		node,
+		b.stmt(
+			b.call(
+				'$.legacy_pre_effect',
+				sequence.length > 0 ? b.thunk(b.sequence(sequence)) : b.thunk(b.block([])),
+				b.thunk(b.block(body))
+			)
+		)
+	);
+
+	return b.empty;
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js
new file mode 100644
index 0000000000..2423c6e50e
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js
@@ -0,0 +1,50 @@
+/** @import { Expression } from 'estree' */
+/** @import { LetDirective } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+import { create_derived } from '../utils.js';
+
+/**
+ * @param {LetDirective} node
+ * @param {ComponentContext} context
+ */
+export function LetDirective(node, context) {
+	// let:x        -->  const x = $.derived(() => $$slotProps.x);
+	// let:x={{y, z}}  -->  const derived_x = $.derived(() => { const { y, z } = $$slotProps.x; return { y, z }));
+	if (node.expression && node.expression.type !== 'Identifier') {
+		const name = context.state.scope.generate(node.name);
+		const bindings = context.state.scope.get_bindings(node);
+
+		for (const binding of bindings) {
+			context.state.getters[binding.node.name] = b.member(
+				b.call('$.get', b.id(name)),
+				b.id(binding.node.name)
+			);
+		}
+
+		return b.const(
+			name,
+			b.call(
+				'$.derived',
+				b.thunk(
+					b.block([
+						b.let(
+							/** @type {Expression} */ (node.expression).type === 'ObjectExpression'
+								? // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
+									b.object_pattern(node.expression.properties)
+								: // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
+									b.array_pattern(node.expression.elements),
+							b.member(b.id('$$slotProps'), b.id(node.name))
+						),
+						b.return(b.object(bindings.map((binding) => b.init(binding.node.name, binding.node))))
+					])
+				)
+			)
+		);
+	} else {
+		return b.const(
+			node.expression === null ? node.name : node.expression.name,
+			create_derived(context.state, b.thunk(b.member(b.id('$$slotProps'), b.id(node.name))))
+		);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js
new file mode 100644
index 0000000000..bfa5b53e6f
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js
@@ -0,0 +1,28 @@
+/** @import { MemberExpression } from 'estree' */
+/** @import { Context } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {MemberExpression} node
+ * @param {Context} context
+ */
+export function MemberExpression(node, context) {
+	// rewrite `this.#foo` as `this.#foo.v` inside a constructor
+	if (node.property.type === 'PrivateIdentifier') {
+		const field = context.state.private_state.get(node.property.name);
+		if (field) {
+			return context.state.in_constructor ? b.member(node, b.id('v')) : b.call('$.get', node);
+		}
+	} else if (node.object.type === 'ThisExpression') {
+		// rewrite `this.foo` as `this.#foo.v` inside a constructor
+		if (node.property.type === 'Identifier' && !node.computed) {
+			const field = context.state.public_state.get(node.property.name);
+
+			if (field && context.state.in_constructor) {
+				return b.member(b.member(b.this, field.id), b.id('v'));
+			}
+		}
+	}
+
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js
new file mode 100644
index 0000000000..171b19844e
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js
@@ -0,0 +1,11 @@
+/** @import { OnDirective } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { serialize_event } from './shared/element.js';
+
+/**
+ * @param {OnDirective} node
+ * @param {ComponentContext} context
+ */
+export function OnDirective(node, context) {
+	serialize_event(node, node.metadata.expression, context);
+}
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
new file mode 100644
index 0000000000..ffbde5977f
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -0,0 +1,719 @@
+/** @import { Expression, ExpressionStatement, Identifier, Literal, MemberExpression, ObjectExpression, Statement } from 'estree' */
+/** @import { Attribute, BindDirective, ClassDirective, RegularElement, SpreadAttribute, StyleDirective } from '#compiler' */
+/** @import { SourceLocation } from '#shared' */
+/** @import { ComponentClientTransformState, ComponentContext } from '../types' */
+/** @import { Scope } from '../../../scope' */
+import { DOMBooleanAttributes } from '../../../../../constants.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 * as b from '../../../../utils/builders.js';
+import { DOMProperties, LoadErrorElements, VoidElements } from '../../../constants.js';
+import { is_custom_element_node } from '../../../nodes.js';
+import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
+import { serialize_get_binding } from '../utils.js';
+import {
+	get_attribute_name,
+	serialize_attribute_value,
+	serialize_class_directives,
+	serialize_event_attribute,
+	serialize_style_directives
+} from './shared/element.js';
+import { process_children } from './shared/fragment.js';
+import {
+	serialize_render_stmt,
+	serialize_update,
+	serialize_update_assignment
+} from './shared/utils.js';
+
+/**
+ * @param {RegularElement} node
+ * @param {ComponentContext} context
+ */
+export function RegularElement(node, context) {
+	/** @type {SourceLocation} */
+	let location = [-1, -1];
+
+	if (dev) {
+		const loc = locator(node.start);
+		if (loc) {
+			location[0] = loc.line;
+			location[1] = loc.column;
+			context.state.locations.push(location);
+		}
+	}
+
+	if (node.name === 'noscript') {
+		context.state.template.push('<noscript></noscript>');
+		return;
+	}
+
+	if (node.name === 'script') {
+		context.state.metadata.context.template_contains_script_tag = true;
+	}
+
+	const metadata = context.state.metadata;
+	const child_metadata = {
+		...context.state.metadata,
+		namespace: determine_namespace_for_children(node, context.state.metadata.namespace)
+	};
+
+	context.state.template.push(`<${node.name}`);
+
+	/** @type {Array<Attribute | SpreadAttribute>} */
+	const attributes = [];
+
+	/** @type {ClassDirective[]} */
+	const class_directives = [];
+
+	/** @type {StyleDirective[]} */
+	const style_directives = [];
+
+	/** @type {ExpressionStatement[]} */
+	const lets = [];
+
+	const is_custom_element = is_custom_element_node(node);
+	let needs_input_reset = false;
+	let needs_content_reset = false;
+
+	/** @type {BindDirective | null} */
+	let value_binding = null;
+
+	/** If true, needs `__value` for inputs */
+	let needs_special_value_handling = node.name === 'option' || node.name === 'select';
+	let is_content_editable = false;
+	let has_content_editable_binding = false;
+	let img_might_be_lazy = false;
+	let might_need_event_replaying = false;
+	let has_direction_attribute = false;
+	let has_style_attribute = false;
+
+	if (is_custom_element) {
+		// cloneNode is faster, but it does not instantiate the underlying class of the
+		// custom element until the template is connected to the dom, which would
+		// cause problems when setting properties on the custom element.
+		// Therefore we need to use importNode instead, which doesn't have this caveat.
+		metadata.context.template_needs_import_node = true;
+	}
+
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'Attribute') {
+			attributes.push(attribute);
+			if (node.name === 'img' && attribute.name === 'loading') {
+				img_might_be_lazy = true;
+			}
+			if (attribute.name === 'dir') {
+				has_direction_attribute = true;
+			}
+			if (attribute.name === 'style') {
+				has_style_attribute = true;
+			}
+			if (
+				(attribute.name === 'value' || attribute.name === 'checked') &&
+				!is_text_attribute(attribute)
+			) {
+				needs_input_reset = true;
+				needs_content_reset = true;
+			} else if (
+				attribute.name === 'contenteditable' &&
+				(attribute.value === true ||
+					(is_text_attribute(attribute) && attribute.value[0].data === 'true'))
+			) {
+				is_content_editable = true;
+			}
+		} else if (attribute.type === 'SpreadAttribute') {
+			attributes.push(attribute);
+			needs_input_reset = true;
+			needs_content_reset = true;
+			if (LoadErrorElements.includes(node.name)) {
+				might_need_event_replaying = true;
+			}
+		} else if (attribute.type === 'ClassDirective') {
+			class_directives.push(attribute);
+		} else if (attribute.type === 'StyleDirective') {
+			style_directives.push(attribute);
+		} else if (attribute.type === 'LetDirective') {
+			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+		} else {
+			if (attribute.type === 'BindDirective') {
+				if (attribute.name === 'group' || attribute.name === 'checked') {
+					needs_special_value_handling = true;
+					needs_input_reset = true;
+				} else if (attribute.name === 'value') {
+					value_binding = attribute;
+					needs_content_reset = true;
+					needs_input_reset = true;
+				} else if (
+					attribute.name === 'innerHTML' ||
+					attribute.name === 'innerText' ||
+					attribute.name === 'textContent'
+				) {
+					has_content_editable_binding = true;
+				}
+			} else if (attribute.type === 'UseDirective' && LoadErrorElements.includes(node.name)) {
+				might_need_event_replaying = true;
+			}
+			context.visit(attribute);
+		}
+	}
+
+	if (child_metadata.namespace === 'foreign') {
+		// input/select etc could mean something completely different in foreign namespace, so don't special-case them
+		needs_content_reset = false;
+		needs_input_reset = false;
+		needs_special_value_handling = false;
+		value_binding = null;
+	}
+
+	if (is_content_editable && has_content_editable_binding) {
+		child_metadata.bound_contenteditable = true;
+	}
+
+	if (needs_input_reset && node.name === 'input') {
+		context.state.init.push(b.stmt(b.call('$.remove_input_defaults', context.state.node)));
+	}
+
+	if (needs_content_reset && node.name === 'textarea') {
+		context.state.init.push(b.stmt(b.call('$.remove_textarea_child', context.state.node)));
+	}
+
+	if (value_binding !== null && node.name === 'select') {
+		setup_select_synchronization(value_binding, context);
+	}
+
+	const node_id = context.state.node;
+
+	// Let bindings first, they can be used on attributes
+	context.state.init.push(...lets);
+
+	// Then do attributes
+	let is_attributes_reactive = false;
+	if (node.metadata.has_spread) {
+		if (node.name === 'img') {
+			img_might_be_lazy = true;
+		}
+		serialize_element_spread_attributes(
+			attributes,
+			context,
+			node,
+			node_id,
+			// If value binding exists, that one takes care of calling $.init_select
+			value_binding === null && node.name === 'select' && child_metadata.namespace !== 'foreign'
+		);
+		is_attributes_reactive = true;
+	} else {
+		for (const attribute of /** @type {Attribute[]} */ (attributes)) {
+			if (is_event_attribute(attribute)) {
+				if (
+					(attribute.name === 'onload' || attribute.name === 'onerror') &&
+					LoadErrorElements.includes(node.name)
+				) {
+					might_need_event_replaying = true;
+				}
+				serialize_event_attribute(attribute, context);
+				continue;
+			}
+
+			if (needs_special_value_handling && attribute.name === 'value') {
+				serialize_element_special_value_attribute(node.name, node_id, attribute, context);
+				continue;
+			}
+
+			if (
+				!is_custom_element &&
+				attribute.name !== 'autofocus' &&
+				(attribute.value === true || is_text_attribute(attribute))
+			) {
+				const name = get_attribute_name(node, attribute, context);
+				const literal_value = /** @type {Literal} */ (
+					serialize_attribute_value(attribute.value, context)[1]
+				).value;
+				if (name !== 'class' || literal_value) {
+					// TODO namespace=foreign probably doesn't want to do template stuff at all and instead use programmatic methods
+					// to create the elements it needs.
+					context.state.template.push(
+						` ${attribute.name}${
+							DOMBooleanAttributes.includes(name) && literal_value === true
+								? ''
+								: `="${literal_value === true ? '' : escape_html(literal_value, true)}"`
+						}`
+					);
+					continue;
+				}
+			}
+
+			const is =
+				is_custom_element && child_metadata.namespace !== 'foreign'
+					? serialize_custom_element_attribute_update_assignment(node_id, attribute, context)
+					: serialize_element_attribute_update_assignment(node, node_id, attribute, context);
+			if (is) is_attributes_reactive = true;
+		}
+	}
+
+	// Apply the src and loading attributes for <img> elements after the element is appended to the document
+	if (img_might_be_lazy) {
+		context.state.after_update.push(b.stmt(b.call('$.handle_lazy_img', node_id)));
+	}
+
+	// class/style directives must be applied last since they could override class/style attributes
+	serialize_class_directives(class_directives, node_id, context, is_attributes_reactive);
+	serialize_style_directives(
+		style_directives,
+		node_id,
+		context,
+		is_attributes_reactive,
+		has_style_attribute || node.metadata.has_spread
+	);
+
+	if (might_need_event_replaying) {
+		context.state.after_update.push(b.stmt(b.call('$.replay_events', node_id)));
+	}
+
+	context.state.template.push('>');
+
+	/** @type {SourceLocation[]} */
+	const child_locations = [];
+
+	/** @type {ComponentClientTransformState} */
+	const state = {
+		...context.state,
+		metadata: child_metadata,
+		locations: child_locations,
+		scope: /** @type {Scope} */ (context.state.scopes.get(node.fragment)),
+		preserve_whitespace:
+			context.state.preserve_whitespace ||
+			((node.name === 'pre' || node.name === 'textarea') && child_metadata.namespace !== 'foreign')
+	};
+
+	const { hoisted, trimmed } = clean_nodes(
+		node,
+		node.fragment.nodes,
+		context.path,
+		child_metadata.namespace,
+		state,
+		node.name === 'script' || state.preserve_whitespace,
+		state.options.preserveComments
+	);
+
+	/** Whether or not we need to wrap the children in `{...}` to avoid declaration conflicts */
+	const has_declaration = node.fragment.nodes.some((node) => node.type === 'SnippetBlock');
+
+	const child_state = has_declaration
+		? { ...state, init: [], update: [], after_update: [] }
+		: state;
+
+	for (const node of hoisted) {
+		context.visit(node, child_state);
+	}
+
+	/** @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');
+
+	// The same applies if it's a `<template>` element, since we need to
+	// set the value of `hydrate_node` to `node.content`
+	if (node.name === 'template') {
+		needs_reset = true;
+
+		arg = b.member(arg, b.id('content'));
+		child_state.init.push(b.stmt(b.call('$.reset', arg)));
+	}
+
+	process_children(trimmed, () => b.call('$.child', arg), true, {
+		...context,
+		state: child_state
+	});
+
+	if (needs_reset) {
+		child_state.init.push(b.stmt(b.call('$.reset', context.state.node)));
+	}
+
+	if (has_declaration) {
+		context.state.init.push(
+			b.block([
+				...child_state.init,
+				child_state.update.length > 0 ? serialize_render_stmt(child_state.update) : b.empty,
+				...child_state.after_update
+			])
+		);
+	}
+
+	if (has_direction_attribute) {
+		// This fixes an issue with Chromium where updates to text content within an element
+		// does not update the direction when set to auto. If we just re-assign the dir, this fixes it.
+		context.state.update.push(
+			b.stmt(b.assignment('=', b.member(node_id, b.id('dir')), b.member(node_id, b.id('dir'))))
+		);
+	}
+
+	if (child_locations.length > 0) {
+		// @ts-expect-error
+		location.push(child_locations);
+	}
+
+	if (!VoidElements.includes(node.name)) {
+		context.state.template.push(`</${node.name}>`);
+	}
+}
+
+/**
+ * Special case: if we have a value binding on a select element, we need to set up synchronization
+ * between the value binding and inner signals, for indirect updates
+ * @param {BindDirective} value_binding
+ * @param {ComponentContext} context
+ */
+function setup_select_synchronization(value_binding, context) {
+	if (context.state.analysis.runes) return;
+
+	let bound = value_binding.expression;
+	while (bound.type === 'MemberExpression') {
+		bound = /** @type {Identifier | MemberExpression} */ (bound.object);
+	}
+
+	/** @type {string[]} */
+	const names = [];
+
+	for (const [name, refs] of context.state.scope.references) {
+		if (
+			refs.length > 0 &&
+			// prevent infinite loop
+			name !== bound.name
+		) {
+			names.push(name);
+		}
+	}
+
+	const invalidator = b.call(
+		'$.invalidate_inner_signals',
+		b.thunk(
+			b.block(
+				names.map((name) => {
+					const serialized = serialize_get_binding(b.id(name), context.state);
+					return b.stmt(serialized);
+				})
+			)
+		)
+	);
+
+	context.state.init.push(
+		b.stmt(
+			b.call(
+				'$.template_effect',
+				b.thunk(
+					b.block([
+						b.stmt(/** @type {Expression} */ (context.visit(value_binding.expression))),
+						b.stmt(invalidator)
+					])
+				)
+			)
+		)
+	);
+}
+
+/**
+ * @param {Array<Attribute | SpreadAttribute>} attributes
+ * @param {ComponentContext} context
+ * @param {RegularElement} element
+ * @param {Identifier} element_id
+ * @param {boolean} needs_select_handling
+ */
+function serialize_element_spread_attributes(
+	attributes,
+	context,
+	element,
+	element_id,
+	needs_select_handling
+) {
+	let needs_isolation = false;
+
+	/** @type {ObjectExpression['properties']} */
+	const values = [];
+
+	for (const attribute of attributes) {
+		if (attribute.type === 'Attribute') {
+			const name = get_attribute_name(element, attribute, context);
+			// TODO: handle has_call
+			const [, value] = serialize_attribute_value(attribute.value, context);
+
+			if (
+				name === 'is' &&
+				value.type === 'Literal' &&
+				context.state.metadata.namespace === 'html'
+			) {
+				context.state.template.push(` is="${escape_html(value.value, true)}"`);
+				continue;
+			}
+
+			if (
+				is_event_attribute(attribute) &&
+				(get_attribute_expression(attribute).type === 'ArrowFunctionExpression' ||
+					get_attribute_expression(attribute).type === 'FunctionExpression')
+			) {
+				// Give the event handler a stable ID so it isn't removed and readded on every update
+				const id = context.state.scope.generate('event_handler');
+				context.state.init.push(b.var(id, value));
+				values.push(b.init(attribute.name, b.id(id)));
+			} else {
+				values.push(b.init(name, value));
+			}
+		} else {
+			values.push(b.spread(/** @type {Expression} */ (context.visit(attribute))));
+		}
+
+		needs_isolation ||=
+			attribute.type === 'SpreadAttribute' && attribute.metadata.expression.has_call;
+	}
+
+	const lowercase_attributes =
+		element.metadata.svg || element.metadata.mathml || is_custom_element_node(element)
+			? b.false
+			: b.true;
+	const id = context.state.scope.generate('attributes');
+
+	const update = b.stmt(
+		b.assignment(
+			'=',
+			b.id(id),
+			b.call(
+				'$.set_attributes',
+				element_id,
+				b.id(id),
+				b.object(values),
+				lowercase_attributes,
+				b.literal(context.state.analysis.css.hash),
+				is_ignored(element, 'hydration_attribute_changed') && b.true
+			)
+		)
+	);
+
+	context.state.init.push(b.let(id));
+
+	// objects could contain reactive getters -> play it safe and always assume spread attributes are reactive
+	if (needs_isolation) {
+		context.state.init.push(serialize_update(update));
+	} else {
+		context.state.update.push(update);
+	}
+
+	if (needs_select_handling) {
+		context.state.init.push(
+			b.stmt(b.call('$.init_select', element_id, b.thunk(b.member(b.id(id), b.id('value')))))
+		);
+		context.state.update.push(
+			b.if(
+				b.binary('in', b.literal('value'), b.id(id)),
+				b.block([
+					// This ensures a one-way street to the DOM in case it's <select {value}>
+					// and not <select bind:value>. We need it in addition to $.init_select
+					// because the select value is not reflected as an attribute, so the
+					// mutation observer wouldn't notice.
+					b.stmt(b.call('$.select_option', element_id, b.member(b.id(id), b.id('value'))))
+				])
+			)
+		);
+	}
+}
+
+/**
+ * Serializes an assignment to an element property by adding relevant statements to either only
+ * the init or the the init and update arrays, depending on whether or not the value is dynamic.
+ * Resulting code for static looks something like this:
+ * ```js
+ * element.property = value;
+ * // or
+ * $.set_attribute(element, property, value);
+ * });
+ * ```
+ * Resulting code for dynamic looks something like this:
+ * ```js
+ * let value;
+ * $.template_effect(() => {
+ * 	if (value !== (value = 'new value')) {
+ * 		element.property = value;
+ * 		// or
+ * 		$.set_attribute(element, property, value);
+ * 	}
+ * });
+ * ```
+ * Returns true if attribute is deemed reactive, false otherwise.
+ * @param {RegularElement} element
+ * @param {Identifier} node_id
+ * @param {Attribute} attribute
+ * @param {ComponentContext} context
+ * @returns {boolean}
+ */
+function serialize_element_attribute_update_assignment(element, node_id, attribute, context) {
+	const state = context.state;
+	const name = get_attribute_name(element, attribute, context);
+	const is_svg = context.state.metadata.namespace === 'svg' || element.name === 'svg';
+	const is_mathml = context.state.metadata.namespace === 'mathml';
+	let [has_call, value] = serialize_attribute_value(attribute.value, context);
+
+	// The foreign namespace doesn't have any special handling, everything goes through the attr function
+	if (context.state.metadata.namespace === 'foreign') {
+		const statement = b.stmt(
+			b.call(
+				'$.set_attribute',
+				node_id,
+				b.literal(name),
+				value,
+				is_ignored(element, 'hydration_attribute_changed') && b.true
+			)
+		);
+
+		if (attribute.metadata.expression.has_state) {
+			const id = state.scope.generate(`${node_id.name}_${name}`);
+			serialize_update_assignment(state, id, undefined, value, statement);
+			return true;
+		} else {
+			state.init.push(statement);
+			return false;
+		}
+	}
+
+	if (name === 'autofocus') {
+		state.init.push(b.stmt(b.call('$.autofocus', node_id, value)));
+		return false;
+	}
+
+	/** @type {Statement} */
+	let update;
+
+	if (name === 'class') {
+		update = b.stmt(
+			b.call(
+				is_svg ? '$.set_svg_class' : is_mathml ? '$.set_mathml_class' : '$.set_class',
+				node_id,
+				value
+			)
+		);
+	} else if (name === 'value') {
+		update = b.stmt(b.call('$.set_value', node_id, value));
+	} else if (name === 'checked') {
+		update = b.stmt(b.call('$.set_checked', node_id, value));
+	} else if (DOMProperties.includes(name)) {
+		update = b.stmt(b.assignment('=', b.member(node_id, b.id(name)), value));
+	} else {
+		const callee = name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute';
+		update = b.stmt(
+			b.call(
+				callee,
+				node_id,
+				b.literal(name),
+				value,
+				is_ignored(element, 'hydration_attribute_changed') && b.true
+			)
+		);
+	}
+
+	if (attribute.metadata.expression.has_state) {
+		if (has_call) {
+			state.init.push(serialize_update(update));
+		} else {
+			state.update.push(update);
+		}
+		return true;
+	} else {
+		state.init.push(update);
+		return false;
+	}
+}
+
+/**
+ * Like `serialize_element_attribute_update_assignment` but without any special attribute treatment.
+ * @param {Identifier}	node_id
+ * @param {Attribute} attribute
+ * @param {ComponentContext} context
+ * @returns {boolean}
+ */
+function serialize_custom_element_attribute_update_assignment(node_id, attribute, context) {
+	const state = context.state;
+	const name = attribute.name; // don't lowercase, as we set the element's property, which might be case sensitive
+	let [has_call, value] = serialize_attribute_value(attribute.value, context);
+
+	const update = b.stmt(b.call('$.set_custom_element_data', node_id, b.literal(name), value));
+
+	if (attribute.metadata.expression.has_state) {
+		if (has_call) {
+			state.init.push(serialize_update(update));
+		} else {
+			state.update.push(update);
+		}
+		return true;
+	} else {
+		state.init.push(update);
+		return false;
+	}
+}
+
+/**
+ * Serializes an assignment to the value property of a `<select>`, `<option>` or `<input>` element
+ * that needs the hidden `__value` property.
+ * Returns true if attribute is deemed reactive, false otherwise.
+ * @param {string} element
+ * @param {Identifier} node_id
+ * @param {Attribute} attribute
+ * @param {ComponentContext} context
+ * @returns {boolean}
+ */
+function serialize_element_special_value_attribute(element, node_id, attribute, context) {
+	const state = context.state;
+	const [, value] = serialize_attribute_value(attribute.value, context);
+
+	const inner_assignment = b.assignment(
+		'=',
+		b.member(node_id, b.id('value')),
+		b.conditional(
+			b.binary('==', b.literal(null), b.assignment('=', b.member(node_id, b.id('__value')), value)),
+			b.literal(''), // render null/undefined values as empty string to support placeholder options
+			value
+		)
+	);
+	const is_reactive = attribute.metadata.expression.has_state;
+	const is_select_with_value =
+		// attribute.metadata.dynamic would give false negatives because even if the value does not change,
+		// the inner options could still change, so we need to always treat it as reactive
+		element === 'select' && attribute.value !== true && !is_text_attribute(attribute);
+
+	const update = b.stmt(
+		is_select_with_value
+			? b.sequence([
+					inner_assignment,
+					// This ensures a one-way street to the DOM in case it's <select {value}>
+					// and not <select bind:value>. We need it in addition to $.init_select
+					// because the select value is not reflected as an attribute, so the
+					// mutation observer wouldn't notice.
+					b.call('$.select_option', node_id, value)
+				])
+			: inner_assignment
+	);
+
+	if (is_select_with_value) {
+		state.init.push(b.stmt(b.call('$.init_select', node_id, b.thunk(value))));
+	}
+
+	if (is_reactive) {
+		const id = state.scope.generate(`${node_id.name}_value`);
+		serialize_update_assignment(
+			state,
+			id,
+			// `<option>` is a special case: The value property reflects to the DOM. If the value is set to undefined,
+			// that means the value should be set to the empty string. To be able to do that when the value is
+			// initially undefined, we need to set a value that is guaranteed to be different.
+			element === 'option' ? b.object([]) : undefined,
+			value,
+			update
+		);
+		return true;
+	} else {
+		state.init.push(update);
+		return false;
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js
new file mode 100644
index 0000000000..6da1f87c0d
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RenderTag.js
@@ -0,0 +1,47 @@
+/** @import { Expression } from 'estree' */
+/** @import { RenderTag } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { unwrap_optional } from '../../../../utils/ast.js';
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {RenderTag} node
+ * @param {ComponentContext} context
+ */
+export function RenderTag(node, context) {
+	context.state.template.push('<!>');
+	const callee = unwrap_optional(node.expression).callee;
+	const raw_args = unwrap_optional(node.expression).arguments;
+
+	/** @type {Expression[]} */
+	let args = [];
+	for (let i = 0; i < raw_args.length; i++) {
+		const raw = raw_args[i];
+		const arg = /** @type {Expression} */ (context.visit(raw));
+		if (node.metadata.args_with_call_expression.has(i)) {
+			const id = b.id(context.state.scope.generate('render_arg'));
+			context.state.init.push(b.var(id, b.call('$.derived_safe_equal', b.thunk(arg))));
+			args.push(b.thunk(b.call('$.get', id)));
+		} else {
+			args.push(b.thunk(arg));
+		}
+	}
+
+	let snippet_function = /** @type {Expression} */ (context.visit(callee));
+
+	if (node.metadata.dynamic) {
+		context.state.init.push(
+			b.stmt(b.call('$.snippet', context.state.node, b.thunk(snippet_function), ...args))
+		);
+	} else {
+		context.state.init.push(
+			b.stmt(
+				(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
+					snippet_function,
+					context.state.node,
+					...args
+				)
+			)
+		);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
new file mode 100644
index 0000000000..2b7a82f8a5
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
@@ -0,0 +1,66 @@
+/** @import { BlockStatement, Expression, ExpressionStatement, Property } from 'estree' */
+/** @import { SlotElement } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+import { serialize_attribute_value } from './shared/element.js';
+
+/**
+ * @param {SlotElement} node
+ * @param {ComponentContext} context
+ */
+export function SlotElement(node, context) {
+	// <slot {a}>fallback</slot>  -->   $.slot($$slots.default, { get a() { .. } }, () => ...fallback);
+	context.state.template.push('<!>');
+
+	/** @type {Property[]} */
+	const props = [];
+
+	/** @type {Expression[]} */
+	const spreads = [];
+
+	/** @type {ExpressionStatement[]} */
+	const lets = [];
+
+	let is_default = true;
+
+	/** @type {Expression} */
+	let name = b.literal('default');
+
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'SpreadAttribute') {
+			spreads.push(b.thunk(/** @type {Expression} */ (context.visit(attribute))));
+		} else if (attribute.type === 'Attribute') {
+			const [, value] = serialize_attribute_value(attribute.value, context);
+			if (attribute.name === 'name') {
+				name = value;
+				is_default = false;
+			} else if (attribute.name !== 'slot') {
+				if (attribute.metadata.expression.has_state) {
+					props.push(b.get(attribute.name, [b.return(value)]));
+				} else {
+					props.push(b.init(attribute.name, value));
+				}
+			}
+		} else if (attribute.type === 'LetDirective') {
+			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+		}
+	}
+
+	// Let bindings first, they can be used on attributes
+	context.state.init.push(...lets);
+
+	const props_expression =
+		spreads.length === 0 ? b.object(props) : b.call('$.spread_props', b.object(props), ...spreads);
+
+	const fallback =
+		node.fragment.nodes.length === 0
+			? b.literal(null)
+			: b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.fragment)));
+
+	const expression = is_default
+		? b.call('$.default_slot', b.id('$$props'))
+		: b.member(b.member(b.id('$$props'), b.id('$$slots')), name, true, true);
+
+	const slot = b.call('$.slot', context.state.node, expression, props_expression, fallback);
+	context.state.init.push(b.stmt(slot));
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
new file mode 100644
index 0000000000..cdb7455447
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
@@ -0,0 +1,86 @@
+/** @import { BlockStatement, Expression, Identifier, Pattern, Statement } from 'estree' */
+/** @import { SnippetBlock } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { dev } from '../../../../state.js';
+import { extract_paths } from '../../../../utils/ast.js';
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {SnippetBlock} node
+ * @param {ComponentContext} context
+ */
+export function SnippetBlock(node, context) {
+	// TODO hoist where possible
+	/** @type {Pattern[]} */
+	const args = [b.id('$$anchor')];
+
+	/** @type {BlockStatement} */
+	let body;
+
+	/** @type {Statement[]} */
+	const declarations = [];
+
+	const getters = { ...context.state.getters };
+	const child_state = { ...context.state, getters };
+
+	for (let i = 0; i < node.parameters.length; i++) {
+		const argument = node.parameters[i];
+
+		if (!argument) continue;
+
+		if (argument.type === 'Identifier') {
+			args.push({
+				type: 'AssignmentPattern',
+				left: argument,
+				right: b.id('$.noop')
+			});
+
+			getters[argument.name] = b.call(argument);
+			continue;
+		}
+
+		let arg_alias = `$$arg${i}`;
+		args.push(b.id(arg_alias));
+
+		const paths = extract_paths(argument);
+
+		for (const path of paths) {
+			const name = /** @type {Identifier} */ (path.node).name;
+			const needs_derived = path.has_default_value; // to ensure that default value is only called once
+			const fn = b.thunk(
+				/** @type {Expression} */ (context.visit(path.expression?.(b.maybe_call(b.id(arg_alias)))))
+			);
+
+			declarations.push(b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn));
+
+			getters[name] = needs_derived ? b.call('$.get', b.id(name)) : b.call(name);
+
+			// we need to eagerly evaluate the expression in order to hit any
+			// 'Cannot access x before initialization' errors
+			if (dev) {
+				declarations.push(b.stmt(getters[name]));
+			}
+		}
+	}
+
+	body = b.block([
+		...declarations,
+		.../** @type {BlockStatement} */ (context.visit(node.body, child_state)).body
+	]);
+
+	/** @type {Expression} */
+	let snippet = b.arrow(args, body);
+
+	if (dev) {
+		snippet = b.call('$.wrap_snippet', b.id(context.state.analysis.name), snippet);
+	}
+
+	const declaration = b.const(node.expression, snippet);
+
+	// Top-level snippets are hoisted so they can be referenced in the `<script>`
+	if (context.path.length === 1 && context.path[0].type === 'Fragment') {
+		context.state.analysis.top_level_snippets.push(declaration);
+	} else {
+		context.state.init.push(declaration);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SpreadAttribute.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SpreadAttribute.js
new file mode 100644
index 0000000000..36dfb87b7d
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SpreadAttribute.js
@@ -0,0 +1,10 @@
+/** @import { SpreadAttribute } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+
+/**
+ * @param {SpreadAttribute} node
+ * @param {ComponentContext} context
+ */
+export function SpreadAttribute(node, context) {
+	return context.visit(node.expression);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBody.js
new file mode 100644
index 0000000000..6c7637adee
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBody.js
@@ -0,0 +1,14 @@
+/** @import { SvelteBody } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {SvelteBody} node
+ * @param {ComponentContext} context
+ */
+export function SvelteBody(node, context) {
+	context.next({
+		...context.state,
+		node: b.id('$.document.body')
+	});
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteComponent.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteComponent.js
new file mode 100644
index 0000000000..8319def679
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteComponent.js
@@ -0,0 +1,12 @@
+/** @import { SvelteComponent } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { serialize_component } from './shared/component.js';
+
+/**
+ * @param {SvelteComponent} node
+ * @param {ComponentContext} context
+ */
+export function SvelteComponent(node, context) {
+	const component = serialize_component(node, '$$component', context);
+	context.state.init.push(component);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteDocument.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteDocument.js
new file mode 100644
index 0000000000..e11c53fffb
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteDocument.js
@@ -0,0 +1,14 @@
+/** @import { SvelteDocument } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {SvelteDocument} node
+ * @param {ComponentContext} context
+ */
+export function SvelteDocument(node, context) {
+	context.next({
+		...context.state,
+		node: b.id('$.document')
+	});
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
new file mode 100644
index 0000000000..8becd58c90
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
@@ -0,0 +1,235 @@
+/** @import { BlockStatement, Expression, ExpressionStatement, Identifier, Literal, MemberExpression, ObjectExpression, Statement } from 'estree' */
+/** @import { Attribute, ClassDirective, SpreadAttribute, StyleDirective, SvelteElement } from '#compiler' */
+/** @import { SourceLocation } from '#shared' */
+/** @import { ComponentClientTransformState, ComponentContext } from '../types' */
+/** @import { Scope } from '../../../scope' */
+import { dev, locator } from '../../../../state.js';
+import {
+	get_attribute_expression,
+	is_event_attribute,
+	is_text_attribute
+} from '../../../../utils/ast.js';
+import * as b from '../../../../utils/builders.js';
+import { determine_namespace_for_children } from '../../utils.js';
+import {
+	serialize_attribute_value,
+	serialize_class_directives,
+	serialize_style_directives
+} from './shared/element.js';
+import { serialize_render_stmt, serialize_update } from './shared/utils.js';
+
+/**
+ * @param {SvelteElement} node
+ * @param {ComponentContext} context
+ */
+export function SvelteElement(node, context) {
+	context.state.template.push(`<!>`);
+
+	/** @type {Array<Attribute | SpreadAttribute>} */
+	const attributes = [];
+
+	/** @type {Attribute['value'] | undefined} */
+	let dynamic_namespace = undefined;
+
+	/** @type {ClassDirective[]} */
+	const class_directives = [];
+
+	/** @type {StyleDirective[]} */
+	const style_directives = [];
+
+	/** @type {ExpressionStatement[]} */
+	const lets = [];
+
+	// Create a temporary context which picks up the init/update statements.
+	// They'll then be added to the function parameter of $.element
+	const element_id = b.id(context.state.scope.generate('$$element'));
+
+	/** @type {ComponentContext} */
+	const inner_context = {
+		...context,
+		state: {
+			...context.state,
+			node: element_id,
+			before_init: [],
+			init: [],
+			update: [],
+			after_update: []
+		}
+	};
+
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'Attribute') {
+			if (attribute.name === 'xmlns' && !is_text_attribute(attribute)) {
+				dynamic_namespace = attribute.value;
+			}
+			attributes.push(attribute);
+		} else if (attribute.type === 'SpreadAttribute') {
+			attributes.push(attribute);
+		} else if (attribute.type === 'ClassDirective') {
+			class_directives.push(attribute);
+		} else if (attribute.type === 'StyleDirective') {
+			style_directives.push(attribute);
+		} else if (attribute.type === 'LetDirective') {
+			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+		} else {
+			context.visit(attribute, inner_context.state);
+		}
+	}
+
+	// Let bindings first, they can be used on attributes
+	context.state.init.push(...lets); // create computeds in the outer context; the dynamic element is the single child of this slot
+
+	// Then do attributes
+	// Always use spread because we don't know whether the element is a custom element or not,
+	// therefore we need to do the "how to set an attribute" logic at runtime.
+	const is_attributes_reactive =
+		serialize_dynamic_element_attributes(attributes, inner_context, element_id) !== null;
+
+	// class/style directives must be applied last since they could override class/style attributes
+	serialize_class_directives(class_directives, element_id, inner_context, is_attributes_reactive);
+	serialize_style_directives(
+		style_directives,
+		element_id,
+		inner_context,
+		is_attributes_reactive,
+		true
+	);
+
+	const get_tag = b.thunk(/** @type {Expression} */ (context.visit(node.tag)));
+
+	if (dev && context.state.metadata.namespace !== 'foreign') {
+		if (node.fragment.nodes.length > 0) {
+			context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', get_tag)));
+		}
+		context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', get_tag)));
+	}
+
+	/** @type {Statement[]} */
+	const inner = inner_context.state.init;
+	if (inner_context.state.update.length > 0) {
+		inner.push(serialize_render_stmt(inner_context.state.update));
+	}
+	inner.push(...inner_context.state.after_update);
+	inner.push(
+		.../** @type {BlockStatement} */ (
+			context.visit(node.fragment, {
+				...context.state,
+				metadata: {
+					...context.state.metadata,
+					namespace: determine_namespace_for_children(node, context.state.metadata.namespace)
+				}
+			})
+		).body
+	);
+
+	const location = dev && locator(node.start);
+
+	context.state.init.push(
+		b.stmt(
+			b.call(
+				'$.element',
+				context.state.node,
+				get_tag,
+				node.metadata.svg || node.metadata.mathml ? b.true : b.false,
+				inner.length > 0 && b.arrow([element_id, b.id('$$anchor')], b.block(inner)),
+				dynamic_namespace && b.thunk(serialize_attribute_value(dynamic_namespace, context)[1]),
+				location && b.array([b.literal(location.line), b.literal(location.column)])
+			)
+		)
+	);
+}
+
+/**
+ * Serializes dynamic element attribute assignments.
+ * Returns the `true` if spread is deemed reactive.
+ * @param {Array<Attribute | SpreadAttribute>} attributes
+ * @param {ComponentContext} context
+ * @param {Identifier} element_id
+ * @returns {boolean}
+ */
+function serialize_dynamic_element_attributes(attributes, context, element_id) {
+	if (attributes.length === 0) {
+		if (context.state.analysis.css.hash) {
+			context.state.init.push(
+				b.stmt(b.call('$.set_class', element_id, b.literal(context.state.analysis.css.hash)))
+			);
+		}
+		return false;
+	}
+
+	// TODO why are we always treating this as a spread? needs docs, if that's not an error
+
+	let needs_isolation = false;
+	let is_reactive = false;
+
+	/** @type {ObjectExpression['properties']} */
+	const values = [];
+
+	for (const attribute of attributes) {
+		if (attribute.type === 'Attribute') {
+			const [, value] = serialize_attribute_value(attribute.value, context);
+
+			if (
+				is_event_attribute(attribute) &&
+				(get_attribute_expression(attribute).type === 'ArrowFunctionExpression' ||
+					get_attribute_expression(attribute).type === 'FunctionExpression')
+			) {
+				// Give the event handler a stable ID so it isn't removed and readded on every update
+				const id = context.state.scope.generate('event_handler');
+				context.state.init.push(b.var(id, value));
+				values.push(b.init(attribute.name, b.id(id)));
+			} else {
+				values.push(b.init(attribute.name, value));
+			}
+		} else {
+			values.push(b.spread(/** @type {Expression} */ (context.visit(attribute))));
+		}
+
+		is_reactive ||=
+			attribute.metadata.expression.has_state ||
+			// objects could contain reactive getters -> play it safe and always assume spread attributes are reactive
+			attribute.type === 'SpreadAttribute';
+		needs_isolation ||=
+			attribute.type === 'SpreadAttribute' && attribute.metadata.expression.has_call;
+	}
+
+	if (needs_isolation || is_reactive) {
+		const id = context.state.scope.generate('attributes');
+		context.state.init.push(b.let(id));
+
+		const update = b.stmt(
+			b.assignment(
+				'=',
+				b.id(id),
+				b.call(
+					'$.set_dynamic_element_attributes',
+					element_id,
+					b.id(id),
+					b.object(values),
+					b.literal(context.state.analysis.css.hash)
+				)
+			)
+		);
+
+		if (needs_isolation) {
+			context.state.init.push(serialize_update(update));
+			return false;
+		}
+
+		context.state.update.push(update);
+		return true;
+	}
+
+	context.state.init.push(
+		b.stmt(
+			b.call(
+				'$.set_dynamic_element_attributes',
+				element_id,
+				b.literal(null),
+				b.object(values),
+				b.literal(context.state.analysis.css.hash)
+			)
+		)
+	);
+	return false;
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteFragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteFragment.js
new file mode 100644
index 0000000000..fc5ca015c2
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteFragment.js
@@ -0,0 +1,17 @@
+/** @import { BlockStatement, ExpressionStatement } from 'estree' */
+/** @import { SvelteFragment } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+
+/**
+ * @param {SvelteFragment} node
+ * @param {ComponentContext} context
+ */
+export function SvelteFragment(node, context) {
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'LetDirective') {
+			context.state.init.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+		}
+	}
+
+	context.state.init.push(.../** @type {BlockStatement} */ (context.visit(node.fragment)).body);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteHead.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteHead.js
new file mode 100644
index 0000000000..941863163e
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteHead.js
@@ -0,0 +1,20 @@
+/** @import { BlockStatement } from 'estree' */
+/** @import { SvelteHead } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {SvelteHead} node
+ * @param {ComponentContext} context
+ */
+export function SvelteHead(node, context) {
+	// TODO attributes?
+	context.state.init.push(
+		b.stmt(
+			b.call(
+				'$.head',
+				b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.fragment)))
+			)
+		)
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteSelf.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteSelf.js
new file mode 100644
index 0000000000..11667026ad
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteSelf.js
@@ -0,0 +1,12 @@
+/** @import { SvelteSelf } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { serialize_component } from './shared/component.js';
+
+/**
+ * @param {SvelteSelf} node
+ * @param {ComponentContext} context
+ */
+export function SvelteSelf(node, context) {
+	const component = serialize_component(node, context.state.analysis.name, context);
+	context.state.init.push(component);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteWindow.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteWindow.js
new file mode 100644
index 0000000000..57ac3ee47b
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteWindow.js
@@ -0,0 +1,14 @@
+/** @import { SvelteWindow } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {SvelteWindow} node
+ * @param {ComponentContext} context
+ */
+export function SvelteWindow(node, context) {
+	context.next({
+		...context.state,
+		node: b.id('$.window')
+	});
+}
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
new file mode 100644
index 0000000000..dfd0a331d5
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js
@@ -0,0 +1,39 @@
+/** @import { TitleElement, Text } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+import { serialize_template_literal } from './shared/utils.js';
+
+/**
+ * @param {TitleElement} node
+ * @param {ComponentContext} context
+ */
+export function TitleElement(node, context) {
+	// TODO throw validation error when attributes present / when children something else than text/expression tags
+	// TODO only create update when expression is dynamic
+
+	if (node.fragment.nodes.length === 1 && node.fragment.nodes[0].type === 'Text') {
+		context.state.init.push(
+			b.stmt(
+				b.assignment(
+					'=',
+					b.member(b.id('$.document'), b.id('title')),
+					b.literal(/** @type {Text} */ (node.fragment.nodes[0]).data)
+				)
+			)
+		);
+	} else {
+		context.state.update.push(
+			b.stmt(
+				b.assignment(
+					'=',
+					b.member(b.id('$.document'), b.id('title')),
+					serialize_template_literal(
+						/** @type {any} */ (node.fragment.nodes),
+						context.visit,
+						context.state
+					)[1]
+				)
+			)
+		);
+	}
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js
new file mode 100644
index 0000000000..7b8a28452f
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/TransitionDirective.js
@@ -0,0 +1,29 @@
+/** @import { Expression } from 'estree' */
+/** @import { TransitionDirective } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import { TRANSITION_GLOBAL, TRANSITION_IN, TRANSITION_OUT } from '../../../../../constants.js';
+import * as b from '../../../../utils/builders.js';
+import { parse_directive_name } from './shared/utils.js';
+
+/**
+ * @param {TransitionDirective} node
+ * @param {ComponentContext} context
+ */
+export function TransitionDirective(node, context) {
+	let flags = node.modifiers.includes('global') ? TRANSITION_GLOBAL : 0;
+	if (node.intro) flags |= TRANSITION_IN;
+	if (node.outro) flags |= TRANSITION_OUT;
+
+	const args = [
+		b.literal(flags),
+		context.state.node,
+		b.thunk(/** @type {Expression} */ (context.visit(parse_directive_name(node.name))))
+	];
+
+	if (node.expression) {
+		args.push(b.thunk(/** @type {Expression} */ (context.visit(node.expression))));
+	}
+
+	// in after_update to ensure it always happens after bind:this
+	context.state.after_update.push(b.stmt(b.call('$.transition', ...args)));
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
new file mode 100644
index 0000000000..22676d4118
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
@@ -0,0 +1,115 @@
+/** @import { Expression, Pattern, Statement, UpdateExpression } from 'estree' */
+/** @import { Context } from '../types' */
+import { is_ignored } from '../../../../state.js';
+import * as b from '../../../../utils/builders.js';
+import { serialize_get_binding, serialize_set_binding } from '../utils.js';
+
+/**
+ * @param {UpdateExpression} node
+ * @param {Context} context
+ */
+export function UpdateExpression(node, context) {
+	const argument = node.argument;
+
+	if (argument.type === 'Identifier') {
+		const binding = context.state.scope.get(argument.name);
+		const is_store = binding?.kind === 'store_sub';
+		const name = is_store ? argument.name.slice(1) : argument.name;
+
+		// use runtime functions for smaller output
+		if (
+			binding?.kind === 'state' ||
+			binding?.kind === 'frozen_state' ||
+			binding?.kind === 'each' ||
+			binding?.kind === 'legacy_reactive' ||
+			binding?.kind === 'prop' ||
+			binding?.kind === 'bindable_prop' ||
+			is_store
+		) {
+			/** @type {Expression[]} */
+			const args = [];
+
+			let fn = '$.update';
+			if (node.prefix) fn += '_pre';
+
+			if (is_store) {
+				fn += '_store';
+				args.push(serialize_get_binding(b.id(name), context.state), b.call('$' + name));
+			} else {
+				if (binding.kind === 'prop' || binding.kind === 'bindable_prop') fn += '_prop';
+				args.push(b.id(name));
+			}
+
+			if (node.operator === '--') {
+				args.push(b.literal(-1));
+			}
+
+			return b.call(fn, ...args);
+		}
+
+		return context.next();
+	}
+
+	if (
+		argument.type === 'MemberExpression' &&
+		argument.object.type === 'ThisExpression' &&
+		argument.property.type === 'PrivateIdentifier' &&
+		context.state.private_state.has(argument.property.name)
+	) {
+		let fn = '$.update';
+		if (node.prefix) fn += '_pre';
+
+		/** @type {Expression[]} */
+		const args = [argument];
+		if (node.operator === '--') {
+			args.push(b.literal(-1));
+		}
+
+		return b.call(fn, ...args);
+	}
+
+	/** @param {any} serialized */
+	function maybe_skip_ownership_validation(serialized) {
+		if (is_ignored(node, 'ownership_invalid_mutation')) {
+			return b.call('$.skip_ownership_validation', b.thunk(serialized));
+		}
+
+		return serialized;
+	}
+
+	// turn it into an IIFE assignment expression: i++ -> (() => { const $$value = i; i+=1; return $$value; })
+	const assignment = b.assignment(
+		node.operator === '++' ? '+=' : '-=',
+		/** @type {Pattern} */ (argument),
+		b.literal(1)
+	);
+
+	const serialized_assignment = serialize_set_binding(
+		assignment,
+		context,
+		() => assignment,
+		node.prefix
+	);
+
+	const value = /** @type {Expression} */ (context.visit(argument));
+
+	if (serialized_assignment === assignment) {
+		// No change to output -> nothing to transform -> we can keep the original update expression
+		return maybe_skip_ownership_validation(context.next());
+	}
+
+	if (context.state.analysis.runes) {
+		return maybe_skip_ownership_validation(serialized_assignment);
+	}
+
+	/** @type {Statement[]} */
+	let statements;
+	if (node.prefix) {
+		statements = [b.stmt(serialized_assignment), b.return(value)];
+	} else {
+		const tmp_id = context.state.scope.generate('$$value');
+		statements = [b.const(tmp_id, value), b.stmt(serialized_assignment), b.return(b.id(tmp_id))];
+	}
+
+	return maybe_skip_ownership_validation(b.call(b.thunk(b.block(statements))));
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UseDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UseDirective.js
new file mode 100644
index 0000000000..f8f5798d2d
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UseDirective.js
@@ -0,0 +1,34 @@
+/** @import { Expression } from 'estree' */
+/** @import { UseDirective } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+import * as b from '../../../../utils/builders.js';
+import { parse_directive_name } from './shared/utils.js';
+
+/**
+ * @param {UseDirective} node
+ * @param {ComponentContext} context
+ */
+export function UseDirective(node, context) {
+	const params = [b.id('$$node')];
+
+	if (node.expression) {
+		params.push(b.id('$$action_arg'));
+	}
+
+	/** @type {Expression[]} */
+	const args = [
+		context.state.node,
+		b.arrow(
+			params,
+			b.call(/** @type {Expression} */ (context.visit(parse_directive_name(node.name))), ...params)
+		)
+	];
+
+	if (node.expression) {
+		args.push(b.thunk(/** @type {Expression} */ (context.visit(node.expression))));
+	}
+
+	// actions need to run after attribute updates in order with bindings/events
+	context.state.after_update.push(b.stmt(b.call('$.action', ...args)));
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
new file mode 100644
index 0000000000..5dfcec4847
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -0,0 +1,328 @@
+/** @import { CallExpression, Expression, Identifier, Literal, VariableDeclaration, VariableDeclarator } from 'estree' */
+/** @import { Binding } from '#compiler' */
+/** @import { ComponentContext } from '../types' */
+/** @import { Scope } from '../../../scope' */
+import { dev } from '../../../../state.js';
+import { extract_paths } from '../../../../utils/ast.js';
+import * as b from '../../../../utils/builders.js';
+import * as assert from '../../../../utils/assert.js';
+import { get_rune } from '../../../scope.js';
+import {
+	get_prop_source,
+	is_prop_source,
+	is_state_source,
+	should_proxy_or_freeze
+} from '../utils.js';
+import { is_hoistable_function } from '../../utils.js';
+
+/**
+ * @param {VariableDeclaration} node
+ * @param {ComponentContext} context
+ */
+export function VariableDeclaration(node, context) {
+	/** @type {VariableDeclarator[]} */
+	const declarations = [];
+
+	if (context.state.analysis.runes) {
+		for (const declarator of node.declarations) {
+			const init = declarator.init;
+			const rune = get_rune(init, context.state.scope);
+
+			if (
+				!rune ||
+				rune === '$effect.tracking' ||
+				rune === '$effect.root' ||
+				rune === '$inspect' ||
+				rune === '$state.snapshot' ||
+				rune === '$state.is'
+			) {
+				if (init != null && is_hoistable_function(init)) {
+					const hoistable_function = context.visit(init);
+					context.state.hoisted.push(
+						b.declaration('const', declarator.id, /** @type {Expression} */ (hoistable_function))
+					);
+					continue;
+				}
+				declarations.push(/** @type {VariableDeclarator} */ (context.visit(declarator)));
+				continue;
+			}
+
+			if (rune === '$props') {
+				/** @type {string[]} */
+				const seen = ['$$slots', '$$events', '$$legacy'];
+
+				if (context.state.analysis.custom_element) {
+					seen.push('$$host');
+				}
+
+				if (declarator.id.type === 'Identifier') {
+					/** @type {Expression[]} */
+					const args = [b.id('$$props'), b.array(seen.map((name) => b.literal(name)))];
+
+					if (dev) {
+						// include rest name, so we can provide informative error messages
+						args.push(b.literal(declarator.id.name));
+					}
+
+					declarations.push(b.declarator(declarator.id, b.call('$.rest_props', ...args)));
+				} else {
+					assert.equal(declarator.id.type, 'ObjectPattern');
+
+					for (const property of declarator.id.properties) {
+						if (property.type === 'Property') {
+							const key = /** @type {Identifier | Literal} */ (property.key);
+							const name = key.type === 'Identifier' ? key.name : /** @type {string} */ (key.value);
+
+							seen.push(name);
+
+							let id =
+								property.value.type === 'AssignmentPattern' ? property.value.left : property.value;
+							assert.equal(id.type, 'Identifier');
+							const binding = /** @type {Binding} */ (context.state.scope.get(id.name));
+							let initial =
+								binding.initial && /** @type {Expression} */ (context.visit(binding.initial));
+							// We're adding proxy here on demand and not within the prop runtime function so that
+							// people not using proxied state anywhere in their code don't have to pay the additional bundle size cost
+							if (
+								initial &&
+								binding.kind === 'bindable_prop' &&
+								should_proxy_or_freeze(initial, context.state.scope)
+							) {
+								initial = b.call('$.proxy', initial);
+							}
+
+							if (is_prop_source(binding, context.state)) {
+								declarations.push(
+									b.declarator(id, get_prop_source(binding, context.state, name, initial))
+								);
+							}
+						} else {
+							// RestElement
+							/** @type {Expression[]} */
+							const args = [b.id('$$props'), b.array(seen.map((name) => b.literal(name)))];
+
+							if (dev) {
+								// include rest name, so we can provide informative error messages
+								args.push(b.literal(/** @type {Identifier} */ (property.argument).name));
+							}
+
+							declarations.push(b.declarator(property.argument, b.call('$.rest_props', ...args)));
+						}
+					}
+				}
+
+				// TODO
+				continue;
+			}
+
+			const args = /** @type {CallExpression} */ (init).arguments;
+			const value =
+				args.length === 0 ? b.id('undefined') : /** @type {Expression} */ (context.visit(args[0]));
+
+			if (rune === '$state' || rune === '$state.frozen') {
+				/**
+				 * @param {Identifier} id
+				 * @param {Expression} value
+				 */
+				const create_state_declarator = (id, value) => {
+					const binding = /** @type {import('#compiler').Binding} */ (
+						context.state.scope.get(id.name)
+					);
+					if (should_proxy_or_freeze(value, context.state.scope)) {
+						value = b.call(rune === '$state' ? '$.proxy' : '$.freeze', value);
+					}
+					if (is_state_source(binding, context.state)) {
+						value = b.call('$.source', value);
+					}
+					return value;
+				};
+
+				if (declarator.id.type === 'Identifier') {
+					declarations.push(
+						b.declarator(declarator.id, create_state_declarator(declarator.id, value))
+					);
+				} else {
+					const tmp = context.state.scope.generate('tmp');
+					const paths = extract_paths(declarator.id);
+					declarations.push(
+						b.declarator(b.id(tmp), value),
+						...paths.map((path) => {
+							const value = path.expression?.(b.id(tmp));
+							const binding = context.state.scope.get(/** @type {Identifier} */ (path.node).name);
+							return b.declarator(
+								path.node,
+								binding?.kind === 'state' || binding?.kind === 'frozen_state'
+									? create_state_declarator(binding.node, value)
+									: value
+							);
+						})
+					);
+				}
+
+				continue;
+			}
+
+			if (rune === '$derived' || rune === '$derived.by') {
+				if (declarator.id.type === 'Identifier') {
+					declarations.push(
+						b.declarator(
+							declarator.id,
+							b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value))
+						)
+					);
+				} else {
+					const bindings = context.state.scope.get_bindings(declarator);
+					const object_id = context.state.scope.generate('derived_object');
+					const values_id = context.state.scope.generate('derived_values');
+					declarations.push(
+						b.declarator(
+							b.id(object_id),
+							b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value))
+						)
+					);
+					declarations.push(
+						b.declarator(
+							b.id(values_id),
+							b.call(
+								'$.derived',
+								b.thunk(
+									b.block([
+										b.let(declarator.id, b.call('$.get', b.id(object_id))),
+										b.return(b.array(bindings.map((binding) => binding.node)))
+									])
+								)
+							)
+						)
+					);
+					for (let i = 0; i < bindings.length; i++) {
+						const binding = bindings[i];
+						declarations.push(
+							b.declarator(
+								binding.node,
+								b.call(
+									'$.derived',
+									b.thunk(b.member(b.call('$.get', b.id(values_id)), b.literal(i), true))
+								)
+							)
+						);
+					}
+				}
+				continue;
+			}
+		}
+	} else {
+		for (const declarator of node.declarations) {
+			const bindings = /** @type {Binding[]} */ (context.state.scope.get_bindings(declarator));
+			const has_state = bindings.some((binding) => binding.kind === 'state');
+			const has_props = bindings.some((binding) => binding.kind === 'bindable_prop');
+
+			if (!has_state && !has_props) {
+				const init = declarator.init;
+
+				if (init != null && is_hoistable_function(init)) {
+					const hoistable_function = context.visit(init);
+
+					context.state.hoisted.push(
+						b.declaration('const', declarator.id, /** @type {Expression} */ (hoistable_function))
+					);
+
+					continue;
+				}
+
+				declarations.push(/** @type {VariableDeclarator} */ (context.visit(declarator)));
+				continue;
+			}
+
+			if (has_props) {
+				if (declarator.id.type !== 'Identifier') {
+					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
+					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
+					const tmp = context.state.scope.generate('tmp');
+					const paths = extract_paths(declarator.id);
+
+					declarations.push(
+						b.declarator(
+							b.id(tmp),
+							/** @type {Expression} */ (context.visit(/** @type {Expression} */ (declarator.init)))
+						)
+					);
+
+					for (const path of paths) {
+						const name = /** @type {Identifier} */ (path.node).name;
+						const binding = /** @type {Binding} */ (context.state.scope.get(name));
+						const value = path.expression?.(b.id(tmp));
+						declarations.push(
+							b.declarator(
+								path.node,
+								binding.kind === 'bindable_prop'
+									? get_prop_source(binding, context.state, binding.prop_alias ?? name, value)
+									: value
+							)
+						);
+					}
+
+					continue;
+				}
+
+				const binding = /** @type {Binding} */ (context.state.scope.get(declarator.id.name));
+
+				declarations.push(
+					b.declarator(
+						declarator.id,
+						get_prop_source(
+							binding,
+							context.state,
+							binding.prop_alias ?? declarator.id.name,
+							declarator.init && /** @type {Expression} */ (context.visit(declarator.init))
+						)
+					)
+				);
+
+				continue;
+			}
+
+			declarations.push(
+				...create_state_declarators(
+					declarator,
+					context.state.scope,
+					/** @type {Expression} */ (declarator.init && context.visit(declarator.init))
+				)
+			);
+		}
+	}
+
+	if (declarations.length === 0) {
+		return b.empty;
+	}
+
+	return {
+		...node,
+		declarations
+	};
+}
+
+/**
+ * Creates the output for a state declaration.
+ * @param {VariableDeclarator} declarator
+ * @param {Scope} scope
+ * @param {Expression} value
+ */
+function create_state_declarators(declarator, scope, value) {
+	if (declarator.id.type === 'Identifier') {
+		return [b.declarator(declarator.id, b.call('$.mutable_source', value))];
+	}
+
+	const tmp = scope.generate('tmp');
+	const paths = extract_paths(declarator.id);
+	return [
+		b.declarator(b.id(tmp), value),
+		...paths.map((path) => {
+			const value = path.expression?.(b.id(tmp));
+			const binding = scope.get(/** @type {Identifier} */ (path.node).name);
+			return b.declarator(
+				path.node,
+				binding?.kind === 'state' ? b.call('$.mutable_source', value) : value
+			);
+		})
+	];
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/global.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/global.js
deleted file mode 100644
index ac4fcc16c0..0000000000
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/global.js
+++ /dev/null
@@ -1,163 +0,0 @@
-/** @import { Expression, Node, Pattern, Statement } from 'estree' */
-/** @import { Visitors } from '../types' */
-import is_reference from 'is-reference';
-import { serialize_get_binding, serialize_set_binding } from '../utils.js';
-import * as b from '../../../../utils/builders.js';
-import { is_ignored } from '../../../../state.js';
-
-/** @type {Visitors} */
-export const global_visitors = {
-	Identifier(node, { path, state }) {
-		if (is_reference(node, /** @type {Node} */ (path.at(-1)))) {
-			if (node.name === '$$props') {
-				return b.id('$$sanitized_props');
-			}
-
-			// Optimize prop access: If it's a member read access, we can use the $$props object directly
-			const binding = state.scope.get(node.name);
-			if (
-				state.analysis.runes && // can't do this in legacy mode because the proxy does more than just read/write
-				binding !== null &&
-				node !== binding.node &&
-				binding.kind === 'rest_prop'
-			) {
-				const parent = path.at(-1);
-				const grand_parent = path.at(-2);
-				if (
-					parent?.type === 'MemberExpression' &&
-					!parent.computed &&
-					grand_parent?.type !== 'AssignmentExpression' &&
-					grand_parent?.type !== 'UpdateExpression'
-				) {
-					return b.id('$$props');
-				}
-			}
-
-			return serialize_get_binding(node, state);
-		}
-	},
-	MemberExpression(node, { state, next }) {
-		// rewrite `this.#foo` as `this.#foo.v` inside a constructor
-		if (node.property.type === 'PrivateIdentifier') {
-			const field = state.private_state.get(node.property.name);
-			if (field) {
-				return state.in_constructor ? b.member(node, b.id('v')) : b.call('$.get', node);
-			}
-		} else if (node.object.type === 'ThisExpression') {
-			// rewrite `this.foo` as `this.#foo.v` inside a constructor
-			if (node.property.type === 'Identifier' && !node.computed) {
-				const field = state.public_state.get(node.property.name);
-
-				if (field && state.in_constructor) {
-					return b.member(b.member(b.this, field.id), b.id('v'));
-				}
-			}
-		}
-		next();
-	},
-	AssignmentExpression(node, context) {
-		return serialize_set_binding(node, context, context.next);
-	},
-	UpdateExpression(node, context) {
-		const { state, next, visit } = context;
-		const argument = node.argument;
-
-		if (argument.type === 'Identifier') {
-			const binding = state.scope.get(argument.name);
-			const is_store = binding?.kind === 'store_sub';
-			const name = is_store ? argument.name.slice(1) : argument.name;
-
-			// use runtime functions for smaller output
-			if (
-				binding?.kind === 'state' ||
-				binding?.kind === 'frozen_state' ||
-				binding?.kind === 'each' ||
-				binding?.kind === 'legacy_reactive' ||
-				binding?.kind === 'prop' ||
-				binding?.kind === 'bindable_prop' ||
-				is_store
-			) {
-				/** @type {Expression[]} */
-				const args = [];
-
-				let fn = '$.update';
-				if (node.prefix) fn += '_pre';
-
-				if (is_store) {
-					fn += '_store';
-					args.push(serialize_get_binding(b.id(name), state), b.call('$' + name));
-				} else {
-					if (binding.kind === 'prop' || binding.kind === 'bindable_prop') fn += '_prop';
-					args.push(b.id(name));
-				}
-
-				if (node.operator === '--') {
-					args.push(b.literal(-1));
-				}
-
-				return b.call(fn, ...args);
-			}
-
-			return next();
-		} else if (
-			argument.type === 'MemberExpression' &&
-			argument.object.type === 'ThisExpression' &&
-			argument.property.type === 'PrivateIdentifier' &&
-			context.state.private_state.has(argument.property.name)
-		) {
-			let fn = '$.update';
-			if (node.prefix) fn += '_pre';
-
-			/** @type {Expression[]} */
-			const args = [argument];
-			if (node.operator === '--') {
-				args.push(b.literal(-1));
-			}
-
-			return b.call(fn, ...args);
-		} else {
-			/** @param {any} serialized */
-			function maybe_skip_ownership_validation(serialized) {
-				if (is_ignored(node, 'ownership_invalid_mutation')) {
-					return b.call('$.skip_ownership_validation', b.thunk(serialized));
-				}
-
-				return serialized;
-			}
-
-			// turn it into an IIFEE assignment expression: i++ -> (() => { const $$value = i; i+=1; return $$value; })
-			const assignment = b.assignment(
-				node.operator === '++' ? '+=' : '-=',
-				/** @type {Pattern} */ (argument),
-				b.literal(1)
-			);
-			const serialized_assignment = serialize_set_binding(
-				assignment,
-				context,
-				() => assignment,
-				node.prefix
-			);
-			const value = /** @type {Expression} */ (visit(argument));
-			if (serialized_assignment === assignment) {
-				// No change to output -> nothing to transform -> we can keep the original update expression
-				return maybe_skip_ownership_validation(next());
-			} else if (context.state.analysis.runes) {
-				return maybe_skip_ownership_validation(serialized_assignment);
-			} else {
-				/** @type {Statement[]} */
-				let statements;
-				if (node.prefix) {
-					statements = [b.stmt(serialized_assignment), b.return(value)];
-				} else {
-					const tmp_id = state.scope.generate('$$value');
-					statements = [
-						b.const(tmp_id, value),
-						b.stmt(serialized_assignment),
-						b.return(b.id(tmp_id))
-					];
-				}
-				return maybe_skip_ownership_validation(b.call(b.thunk(b.block(statements))));
-			}
-		}
-	}
-};
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-legacy.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-legacy.js
deleted file mode 100644
index 75496f356f..0000000000
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-legacy.js
+++ /dev/null
@@ -1,188 +0,0 @@
-/** @import { Binding, ReactiveStatement } from '#compiler' */
-/** @import { ComponentVisitors } from '../types.js' */
-/** @import { Scope } from '../../../scope.js' */
-/** @import { VariableDeclarator, Expression, Identifier, Statement } from 'estree' */
-import { is_hoistable_function } from '../../utils.js';
-import * as b from '../../../../utils/builders.js';
-import { extract_paths } from '../../../../utils/ast.js';
-import { get_prop_source, serialize_get_binding } from '../utils.js';
-
-/**
- * Creates the output for a state declaration.
- * @param {VariableDeclarator} declarator
- * @param {Scope} scope
- * @param {Expression} value
- */
-function create_state_declarators(declarator, scope, value) {
-	if (declarator.id.type === 'Identifier') {
-		return [b.declarator(declarator.id, b.call('$.mutable_source', value))];
-	}
-
-	const tmp = scope.generate('tmp');
-	const paths = extract_paths(declarator.id);
-	return [
-		b.declarator(b.id(tmp), value),
-		...paths.map((path) => {
-			const value = path.expression?.(b.id(tmp));
-			const binding = scope.get(/** @type {Identifier} */ (path.node).name);
-			return b.declarator(
-				path.node,
-				binding?.kind === 'state' ? b.call('$.mutable_source', value) : value
-			);
-		})
-	];
-}
-
-/** @type {ComponentVisitors} */
-export const javascript_visitors_legacy = {
-	VariableDeclaration(node, { state, visit }) {
-		/** @type {VariableDeclarator[]} */
-		const declarations = [];
-
-		for (const declarator of node.declarations) {
-			const bindings = /** @type {Binding[]} */ (state.scope.get_bindings(declarator));
-			const has_state = bindings.some((binding) => binding.kind === 'state');
-			const has_props = bindings.some((binding) => binding.kind === 'bindable_prop');
-
-			if (!has_state && !has_props) {
-				const init = declarator.init;
-				if (init != null && is_hoistable_function(init)) {
-					const hoistable_function = visit(init);
-					state.hoisted.push(
-						b.declaration('const', declarator.id, /** @type {Expression} */ (hoistable_function))
-					);
-					continue;
-				}
-				declarations.push(/** @type {VariableDeclarator} */ (visit(declarator)));
-				continue;
-			}
-
-			if (has_props) {
-				if (declarator.id.type !== 'Identifier') {
-					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
-					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
-					const tmp = state.scope.generate('tmp');
-					const paths = extract_paths(declarator.id);
-					declarations.push(
-						b.declarator(
-							b.id(tmp),
-							/** @type {Expression} */ (visit(/** @type {Expression} */ (declarator.init)))
-						)
-					);
-					for (const path of paths) {
-						const name = /** @type {Identifier} */ (path.node).name;
-						const binding = /** @type {Binding} */ (state.scope.get(name));
-						const value = path.expression?.(b.id(tmp));
-						declarations.push(
-							b.declarator(
-								path.node,
-								binding.kind === 'bindable_prop'
-									? get_prop_source(binding, state, binding.prop_alias ?? name, value)
-									: value
-							)
-						);
-					}
-					continue;
-				}
-
-				const binding = /** @type {Binding} */ (state.scope.get(declarator.id.name));
-
-				declarations.push(
-					b.declarator(
-						declarator.id,
-						get_prop_source(
-							binding,
-							state,
-							binding.prop_alias ?? declarator.id.name,
-							declarator.init && /** @type {Expression} */ (visit(declarator.init))
-						)
-					)
-				);
-
-				continue;
-			}
-
-			declarations.push(
-				...create_state_declarators(
-					declarator,
-					state.scope,
-					/** @type {Expression} */ (declarator.init && visit(declarator.init))
-				)
-			);
-		}
-
-		if (declarations.length === 0) {
-			return b.empty;
-		}
-
-		return {
-			...node,
-			declarations
-		};
-	},
-	LabeledStatement(node, context) {
-		if (context.path.length > 1 || node.label.name !== '$') {
-			context.next();
-			return;
-		}
-
-		const state = context.state;
-		// To recreate Svelte 4 behaviour, we track the dependencies
-		// the compiler can 'see', but we untrack the effect itself
-		const reactive_stmt = /** @type {ReactiveStatement} */ (
-			state.analysis.reactive_statements.get(node)
-		);
-
-		if (!reactive_stmt) return; // not the instance context
-
-		const { dependencies } = reactive_stmt;
-
-		let serialized_body = /** @type {Statement} */ (context.visit(node.body));
-
-		if (serialized_body.type !== 'BlockStatement') {
-			serialized_body = b.block([serialized_body]);
-		}
-
-		const body = serialized_body.body;
-
-		/** @type {Expression[]} */
-		const sequence = [];
-		for (const binding of dependencies) {
-			if (binding.kind === 'normal') continue;
-
-			const name = binding.node.name;
-			let serialized = serialize_get_binding(b.id(name), state);
-
-			// If the binding is a prop, we need to deep read it because it could be fine-grained $state
-			// from a runes-component, where mutations don't trigger an update on the prop as a whole.
-			if (name === '$$props' || name === '$$restProps' || binding.kind === 'bindable_prop') {
-				serialized = b.call('$.deep_read_state', serialized);
-			}
-
-			sequence.push(serialized);
-		}
-
-		// these statements will be topologically ordered later
-		state.legacy_reactive_statements.set(
-			node,
-			b.stmt(
-				b.call(
-					'$.legacy_pre_effect',
-					sequence.length > 0 ? b.thunk(b.sequence(sequence)) : b.thunk(b.block([])),
-					b.thunk(b.block(body))
-				)
-			)
-		);
-
-		return b.empty;
-	},
-	BreakStatement(node, context) {
-		if (!node.label || node.label.name !== '$') return;
-
-		const in_reactive_statement =
-			context.path[1].type === 'LabeledStatement' && context.path[1].label.name === '$';
-		if (in_reactive_statement) {
-			return b.return();
-		}
-	}
-};
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
deleted file mode 100644
index 77c889ac8e..0000000000
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript-runes.js
+++ /dev/null
@@ -1,513 +0,0 @@
-/** @import { CallExpression, Expression, Identifier, Literal, MethodDefinition, PrivateIdentifier, PropertyDefinition, VariableDeclarator } from 'estree' */
-/** @import { Binding } from '#compiler' */
-/** @import { ComponentVisitors, StateField } from '../types.js' */
-import { dev, is_ignored } from '../../../../state.js';
-import * as assert from '../../../../utils/assert.js';
-import { extract_paths } from '../../../../utils/ast.js';
-import * as b from '../../../../utils/builders.js';
-import { regex_invalid_identifier_chars } from '../../../patterns.js';
-import { get_rune } from '../../../scope.js';
-import { is_hoistable_function, transform_inspect_rune } from '../../utils.js';
-import {
-	get_prop_source,
-	is_prop_source,
-	is_state_source,
-	serialize_proxy_reassignment,
-	should_proxy_or_freeze
-} from '../utils.js';
-
-/** @type {ComponentVisitors} */
-export const javascript_visitors_runes = {
-	ClassBody(node, { state, visit }) {
-		/** @type {Map<string, StateField>} */
-		const public_state = new Map();
-
-		/** @type {Map<string, StateField>} */
-		const private_state = new Map();
-
-		/** @type {string[]} */
-		const private_ids = [];
-
-		for (const definition of node.body) {
-			if (
-				definition.type === 'PropertyDefinition' &&
-				(definition.key.type === 'Identifier' ||
-					definition.key.type === 'PrivateIdentifier' ||
-					definition.key.type === 'Literal')
-			) {
-				const type = definition.key.type;
-				const name = get_name(definition.key);
-				if (!name) continue;
-
-				const is_private = type === 'PrivateIdentifier';
-				if (is_private) private_ids.push(name);
-
-				if (definition.value?.type === 'CallExpression') {
-					const rune = get_rune(definition.value, state.scope);
-					if (
-						rune === '$state' ||
-						rune === '$state.frozen' ||
-						rune === '$derived' ||
-						rune === '$derived.by'
-					) {
-						/** @type {StateField} */
-						const field = {
-							kind:
-								rune === '$state'
-									? 'state'
-									: rune === '$state.frozen'
-										? 'frozen_state'
-										: rune === '$derived.by'
-											? 'derived_call'
-											: 'derived',
-							// @ts-expect-error this is set in the next pass
-							id: is_private ? definition.key : null
-						};
-
-						if (is_private) {
-							private_state.set(name, field);
-						} else {
-							public_state.set(name, field);
-						}
-					}
-				}
-			}
-		}
-
-		// each `foo = $state()` needs a backing `#foo` field
-		for (const [name, field] of public_state) {
-			let deconflicted = name;
-			while (private_ids.includes(deconflicted)) {
-				deconflicted = '_' + deconflicted;
-			}
-
-			private_ids.push(deconflicted);
-			field.id = b.private_id(deconflicted);
-		}
-
-		/** @type {Array<MethodDefinition | PropertyDefinition>} */
-		const body = [];
-
-		const child_state = { ...state, public_state, private_state };
-
-		// Replace parts of the class body
-		for (const definition of node.body) {
-			if (
-				definition.type === 'PropertyDefinition' &&
-				(definition.key.type === 'Identifier' ||
-					definition.key.type === 'PrivateIdentifier' ||
-					definition.key.type === 'Literal')
-			) {
-				const name = get_name(definition.key);
-				if (!name) continue;
-
-				const is_private = definition.key.type === 'PrivateIdentifier';
-				const field = (is_private ? private_state : public_state).get(name);
-
-				if (definition.value?.type === 'CallExpression' && field !== undefined) {
-					let value = null;
-
-					if (definition.value.arguments.length > 0) {
-						const init = /** @type {Expression} **/ (
-							visit(definition.value.arguments[0], child_state)
-						);
-
-						value =
-							field.kind === 'state'
-								? b.call(
-										'$.source',
-										should_proxy_or_freeze(init, state.scope) ? b.call('$.proxy', init) : init
-									)
-								: field.kind === 'frozen_state'
-									? b.call(
-											'$.source',
-											should_proxy_or_freeze(init, state.scope) ? b.call('$.freeze', init) : init
-										)
-									: field.kind === 'derived_call'
-										? b.call('$.derived', init)
-										: b.call('$.derived', b.thunk(init));
-					} else {
-						// if no arguments, we know it's state as `$derived()` is a compile error
-						value = b.call('$.source');
-					}
-
-					if (is_private) {
-						body.push(b.prop_def(field.id, value));
-					} else {
-						// #foo;
-						const member = b.member(b.this, field.id);
-						body.push(b.prop_def(field.id, value));
-
-						// get foo() { return this.#foo; }
-						body.push(b.method('get', definition.key, [], [b.return(b.call('$.get', member))]));
-
-						if (field.kind === 'state') {
-							// set foo(value) { this.#foo = value; }
-							const value = b.id('value');
-							body.push(
-								b.method(
-									'set',
-									definition.key,
-									[value],
-									[b.stmt(b.call('$.set', member, serialize_proxy_reassignment(value, field.id)))]
-								)
-							);
-						}
-
-						if (field.kind === 'frozen_state') {
-							// set foo(value) { this.#foo = value; }
-							const value = b.id('value');
-							body.push(
-								b.method(
-									'set',
-									definition.key,
-									[value],
-									[b.stmt(b.call('$.set', member, b.call('$.freeze', value)))]
-								)
-							);
-						}
-
-						if (dev && (field.kind === 'derived' || field.kind === 'derived_call')) {
-							body.push(
-								b.method(
-									'set',
-									definition.key,
-									[b.id('_')],
-									[b.throw_error(`Cannot update a derived property ('${name}')`)]
-								)
-							);
-						}
-					}
-					continue;
-				}
-			}
-
-			body.push(/** @type {MethodDefinition} **/ (visit(definition, child_state)));
-		}
-
-		if (dev && public_state.size > 0) {
-			// add an `[$.ADD_OWNER]` method so that a class with state fields can widen ownership
-			body.push(
-				b.method(
-					'method',
-					b.id('$.ADD_OWNER'),
-					[b.id('owner')],
-					Array.from(public_state.keys()).map((name) =>
-						b.stmt(
-							b.call(
-								'$.add_owner',
-								b.call('$.get', b.member(b.this, b.private_id(name))),
-								b.id('owner'),
-								b.literal(false),
-								is_ignored(node, 'ownership_invalid_binding') && b.true
-							)
-						)
-					),
-					true
-				)
-			);
-		}
-
-		return { ...node, body };
-	},
-	VariableDeclaration(node, { state, visit }) {
-		const declarations = [];
-
-		for (const declarator of node.declarations) {
-			const init = declarator.init;
-			const rune = get_rune(init, state.scope);
-			if (
-				!rune ||
-				rune === '$effect.tracking' ||
-				rune === '$effect.root' ||
-				rune === '$inspect' ||
-				rune === '$state.snapshot' ||
-				rune === '$state.is'
-			) {
-				if (init != null && is_hoistable_function(init)) {
-					const hoistable_function = visit(init);
-					state.hoisted.push(
-						b.declaration('const', declarator.id, /** @type {Expression} */ (hoistable_function))
-					);
-					continue;
-				}
-				declarations.push(/** @type {VariableDeclarator} */ (visit(declarator)));
-				continue;
-			}
-
-			if (rune === '$props') {
-				/** @type {string[]} */
-				const seen = ['$$slots', '$$events', '$$legacy'];
-
-				if (state.analysis.custom_element) {
-					seen.push('$$host');
-				}
-
-				if (declarator.id.type === 'Identifier') {
-					/** @type {Expression[]} */
-					const args = [b.id('$$props'), b.array(seen.map((name) => b.literal(name)))];
-
-					if (dev) {
-						// include rest name, so we can provide informative error messages
-						args.push(b.literal(declarator.id.name));
-					}
-
-					declarations.push(b.declarator(declarator.id, b.call('$.rest_props', ...args)));
-				} else {
-					assert.equal(declarator.id.type, 'ObjectPattern');
-
-					for (const property of declarator.id.properties) {
-						if (property.type === 'Property') {
-							const key = /** @type {Identifier | Literal} */ (property.key);
-							const name = key.type === 'Identifier' ? key.name : /** @type {string} */ (key.value);
-
-							seen.push(name);
-
-							let id =
-								property.value.type === 'AssignmentPattern' ? property.value.left : property.value;
-							assert.equal(id.type, 'Identifier');
-							const binding = /** @type {Binding} */ (state.scope.get(id.name));
-							let initial = binding.initial && /** @type {Expression} */ (visit(binding.initial));
-							// We're adding proxy here on demand and not within the prop runtime function so that
-							// people not using proxied state anywhere in their code don't have to pay the additional bundle size cost
-							if (
-								initial &&
-								binding.kind === 'bindable_prop' &&
-								should_proxy_or_freeze(initial, state.scope)
-							) {
-								initial = b.call('$.proxy', initial);
-							}
-
-							if (is_prop_source(binding, state)) {
-								declarations.push(b.declarator(id, get_prop_source(binding, state, name, initial)));
-							}
-						} else {
-							// RestElement
-							/** @type {Expression[]} */
-							const args = [b.id('$$props'), b.array(seen.map((name) => b.literal(name)))];
-
-							if (dev) {
-								// include rest name, so we can provide informative error messages
-								args.push(b.literal(/** @type {Identifier} */ (property.argument).name));
-							}
-
-							declarations.push(b.declarator(property.argument, b.call('$.rest_props', ...args)));
-						}
-					}
-				}
-
-				// TODO
-				continue;
-			}
-
-			const args = /** @type {CallExpression} */ (init).arguments;
-			const value =
-				args.length === 0 ? b.id('undefined') : /** @type {Expression} */ (visit(args[0]));
-
-			if (rune === '$state' || rune === '$state.frozen') {
-				/**
-				 * @param {Identifier} id
-				 * @param {Expression} value
-				 */
-				const create_state_declarator = (id, value) => {
-					const binding = /** @type {Binding} */ (state.scope.get(id.name));
-					if (should_proxy_or_freeze(value, state.scope)) {
-						value = b.call(rune === '$state' ? '$.proxy' : '$.freeze', value);
-					}
-					if (is_state_source(binding, state)) {
-						value = b.call('$.source', value);
-					}
-					return value;
-				};
-
-				if (declarator.id.type === 'Identifier') {
-					declarations.push(
-						b.declarator(declarator.id, create_state_declarator(declarator.id, value))
-					);
-				} else {
-					const tmp = state.scope.generate('tmp');
-					const paths = extract_paths(declarator.id);
-					declarations.push(
-						b.declarator(b.id(tmp), value),
-						...paths.map((path) => {
-							const value = path.expression?.(b.id(tmp));
-							const binding = state.scope.get(/** @type {Identifier} */ (path.node).name);
-							return b.declarator(
-								path.node,
-								binding?.kind === 'state' || binding?.kind === 'frozen_state'
-									? create_state_declarator(binding.node, value)
-									: value
-							);
-						})
-					);
-				}
-				continue;
-			}
-
-			if (rune === '$derived' || rune === '$derived.by') {
-				if (declarator.id.type === 'Identifier') {
-					declarations.push(
-						b.declarator(
-							declarator.id,
-							b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value))
-						)
-					);
-				} else {
-					const bindings = state.scope.get_bindings(declarator);
-					const object_id = state.scope.generate('derived_object');
-					const values_id = state.scope.generate('derived_values');
-					declarations.push(
-						b.declarator(
-							b.id(object_id),
-							b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value))
-						)
-					);
-					declarations.push(
-						b.declarator(
-							b.id(values_id),
-							b.call(
-								'$.derived',
-								b.thunk(
-									b.block([
-										b.let(declarator.id, b.call('$.get', b.id(object_id))),
-										b.return(b.array(bindings.map((binding) => binding.node)))
-									])
-								)
-							)
-						)
-					);
-					for (let i = 0; i < bindings.length; i++) {
-						const binding = bindings[i];
-						declarations.push(
-							b.declarator(
-								binding.node,
-								b.call(
-									'$.derived',
-									b.thunk(b.member(b.call('$.get', b.id(values_id)), b.literal(i), true))
-								)
-							)
-						);
-					}
-				}
-				continue;
-			}
-		}
-
-		if (declarations.length === 0) {
-			return b.empty;
-		}
-
-		return {
-			...node,
-			declarations
-		};
-	},
-	ExpressionStatement(node, context) {
-		if (node.expression.type === 'CallExpression') {
-			const callee = node.expression.callee;
-
-			if (
-				callee.type === 'Identifier' &&
-				callee.name === '$effect' &&
-				!context.state.scope.get('$effect')
-			) {
-				const func = context.visit(node.expression.arguments[0]);
-				return {
-					...node,
-					expression: b.call('$.user_effect', /** @type {Expression} */ (func))
-				};
-			}
-
-			if (
-				callee.type === 'MemberExpression' &&
-				callee.object.type === 'Identifier' &&
-				callee.object.name === '$effect' &&
-				callee.property.type === 'Identifier' &&
-				callee.property.name === 'pre' &&
-				!context.state.scope.get('$effect')
-			) {
-				const func = context.visit(node.expression.arguments[0]);
-				return {
-					...node,
-					expression: b.call('$.user_pre_effect', /** @type {Expression} */ (func))
-				};
-			}
-		}
-
-		context.next();
-	},
-	CallExpression(node, context) {
-		const rune = get_rune(node, context.state.scope);
-
-		if (rune === '$host') {
-			return b.id('$$props.$$host');
-		}
-
-		if (rune === '$effect.tracking') {
-			return b.call('$.effect_tracking');
-		}
-
-		if (rune === '$state.snapshot') {
-			return b.call(
-				'$.snapshot',
-				/** @type {Expression} */ (context.visit(node.arguments[0])),
-				is_ignored(node, 'state_snapshot_uncloneable') && b.true
-			);
-		}
-
-		if (rune === '$state.is') {
-			return b.call(
-				'$.is',
-				/** @type {Expression} */ (context.visit(node.arguments[0])),
-				/** @type {Expression} */ (context.visit(node.arguments[1]))
-			);
-		}
-
-		if (rune === '$effect.root') {
-			const args = /** @type {Expression[]} */ (node.arguments.map((arg) => context.visit(arg)));
-			return b.call('$.effect_root', ...args);
-		}
-
-		if (rune === '$inspect' || rune === '$inspect().with') {
-			return transform_inspect_rune(node, context);
-		}
-
-		context.next();
-	},
-	BinaryExpression(node, { state, visit, next }) {
-		const operator = node.operator;
-
-		if (dev) {
-			if (operator === '===' || operator === '!==') {
-				return b.call(
-					'$.strict_equals',
-					/** @type {Expression} */ (visit(node.left)),
-					/** @type {Expression} */ (visit(node.right)),
-					operator === '!==' && b.literal(false)
-				);
-			}
-
-			if (operator === '==' || operator === '!=') {
-				return b.call(
-					'$.equals',
-					/** @type {Expression} */ (visit(node.left)),
-					/** @type {Expression} */ (visit(node.right)),
-					operator === '!=' && b.literal(false)
-				);
-			}
-		}
-
-		next();
-	}
-};
-
-/**
- * @param {Identifier | PrivateIdentifier | Literal} node
- */
-function get_name(node) {
-	if (node.type === 'Literal') {
-		return node.value?.toString().replace(regex_invalid_identifier_chars, '_');
-	} else {
-		return node.name;
-	}
-}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript.js
deleted file mode 100644
index 99389988f1..0000000000
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/javascript.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/** @import { FunctionDeclaration } from 'estree' */
-/** @import { ComponentVisitors } from '../types.js' */
-import * as b from '../../../../utils/builders.js';
-import { function_visitor, serialize_hoistable_params } from '../utils.js';
-
-/** @type {ComponentVisitors} */
-export const javascript_visitors = {
-	FunctionExpression: function_visitor,
-	ArrowFunctionExpression: function_visitor,
-	FunctionDeclaration(node, context) {
-		const metadata = node.metadata;
-
-		const state = { ...context.state, in_constructor: false };
-
-		if (metadata?.hoistable === true) {
-			const params = serialize_hoistable_params(node, context);
-
-			context.state.hoisted.push(
-				/** @type {FunctionDeclaration} */ ({
-					...node,
-					id: node.id !== null ? context.visit(node.id, state) : null,
-					params,
-					body: context.visit(node.body, state)
-				})
-			);
-			return b.empty;
-		}
-		context.next(state);
-	}
-};
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
new file mode 100644
index 0000000000..72ea6b3ec2
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -0,0 +1,366 @@
+/** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Property, Statement } from 'estree' */
+/** @import { Attribute, Component, SvelteComponent, SvelteSelf, TemplateNode, Text } from '#compiler' */
+/** @import { ComponentContext } from '../../types.js' */
+import { dev, is_ignored } from '../../../../../state.js';
+import { get_attribute_chunks } from '../../../../../utils/ast.js';
+import * as b from '../../../../../utils/builders.js';
+import { is_element_node } from '../../../../nodes.js';
+import { create_derived, serialize_set_binding } from '../../utils.js';
+import {
+	serialize_bind_this,
+	serialize_event_handler,
+	serialize_validate_binding
+} from '../shared/utils.js';
+import { serialize_attribute_value } from '../shared/element.js';
+
+/**
+ * @param {Component | SvelteComponent | SvelteSelf} node
+ * @param {string} component_name
+ * @param {ComponentContext} context
+ * @param {Expression} anchor
+ * @returns {Statement}
+ */
+export function serialize_component(node, component_name, context, anchor = context.state.node) {
+	/** @type {Array<Property[] | Expression>} */
+	const props_and_spreads = [];
+
+	/** @type {ExpressionStatement[]} */
+	const lets = [];
+
+	/** @type {Record<string, TemplateNode[]>} */
+	const children = {};
+
+	/** @type {Record<string, Expression[]>} */
+	const events = {};
+
+	/** @type {Property[]} */
+	const custom_css_props = [];
+
+	/** @type {Identifier | MemberExpression | null} */
+	let bind_this = null;
+
+	/**
+	 * @type {ExpressionStatement[]}
+	 */
+	const binding_initializers = [];
+
+	/**
+	 * If this component has a slot property, it is a named slot within another component. In this case
+	 * the slot scope applies to the component itself, too, and not just its children.
+	 */
+	let slot_scope_applies_to_itself = false;
+
+	/**
+	 * Components may have a children prop and also have child nodes. In this case, we assume
+	 * that the child component isn't using render tags yet and pass the slot as $$slots.default.
+	 * We're not doing it for spread attributes, as this would result in too many false positives.
+	 */
+	let has_children_prop = false;
+
+	/**
+	 * @param {Property} prop
+	 */
+	function push_prop(prop) {
+		const current = props_and_spreads.at(-1);
+		const current_is_props = Array.isArray(current);
+		const props = current_is_props ? current : [];
+		props.push(prop);
+		if (!current_is_props) {
+			props_and_spreads.push(props);
+		}
+	}
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'LetDirective') {
+			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+		} else if (attribute.type === 'OnDirective') {
+			events[attribute.name] ||= [];
+			let handler = serialize_event_handler(attribute, null, context);
+			if (attribute.modifiers.includes('once')) {
+				handler = b.call('$.once', handler);
+			}
+			events[attribute.name].push(handler);
+		} else if (attribute.type === 'SpreadAttribute') {
+			const expression = /** @type {Expression} */ (context.visit(attribute));
+			if (attribute.metadata.expression.has_state) {
+				let value = expression;
+
+				if (attribute.metadata.expression.has_call) {
+					const id = b.id(context.state.scope.generate('spread_element'));
+					context.state.init.push(b.var(id, b.call('$.derived', b.thunk(value))));
+					value = b.call('$.get', id);
+				}
+
+				props_and_spreads.push(b.thunk(value));
+			} else {
+				props_and_spreads.push(expression);
+			}
+		} else if (attribute.type === 'Attribute') {
+			if (attribute.name.startsWith('--')) {
+				custom_css_props.push(
+					b.init(attribute.name, serialize_attribute_value(attribute.value, context)[1])
+				);
+				continue;
+			}
+
+			if (attribute.name === 'slot') {
+				slot_scope_applies_to_itself = true;
+			}
+
+			if (attribute.name === 'children') {
+				has_children_prop = true;
+			}
+
+			const [, value] = serialize_attribute_value(attribute.value, context);
+
+			if (attribute.metadata.expression.has_state) {
+				let arg = value;
+
+				// When we have a non-simple computation, anything other than an Identifier or Member expression,
+				// then there's a good chance it needs to be memoized to avoid over-firing when read within the
+				// child component.
+				const should_wrap_in_derived = get_attribute_chunks(attribute.value).some((n) => {
+					return (
+						n.type === 'ExpressionTag' &&
+						n.expression.type !== 'Identifier' &&
+						n.expression.type !== 'MemberExpression'
+					);
+				});
+
+				if (should_wrap_in_derived) {
+					const id = b.id(context.state.scope.generate(attribute.name));
+					context.state.init.push(b.var(id, create_derived(context.state, b.thunk(value))));
+					arg = b.call('$.get', id);
+				}
+
+				push_prop(b.get(attribute.name, [b.return(arg)]));
+			} else {
+				push_prop(b.init(attribute.name, value));
+			}
+		} else if (attribute.type === 'BindDirective') {
+			const expression = /** @type {Expression} */ (context.visit(attribute.expression));
+
+			if (
+				dev &&
+				expression.type === 'MemberExpression' &&
+				context.state.analysis.runes &&
+				!is_ignored(node, 'binding_property_non_reactive')
+			) {
+				context.state.init.push(serialize_validate_binding(context.state, attribute, expression));
+			}
+
+			if (attribute.name === 'this') {
+				bind_this = attribute.expression;
+			} else {
+				if (dev) {
+					binding_initializers.push(
+						b.stmt(
+							b.call(
+								b.id('$.add_owner_effect'),
+								b.thunk(expression),
+								b.id(component_name),
+								is_ignored(node, 'ownership_invalid_binding') && b.true
+							)
+						)
+					);
+				}
+
+				push_prop(b.get(attribute.name, [b.return(expression)]));
+
+				const assignment = b.assignment('=', attribute.expression, b.id('$$value'));
+				push_prop(
+					b.set(attribute.name, [
+						b.stmt(serialize_set_binding(assignment, context, () => context.visit(assignment)))
+					])
+				);
+			}
+		}
+	}
+
+	if (slot_scope_applies_to_itself) {
+		context.state.init.push(...lets);
+	}
+
+	if (Object.keys(events).length > 0) {
+		const events_expression = b.object(
+			Object.keys(events).map((name) =>
+				b.init(name, events[name].length > 1 ? b.array(events[name]) : events[name][0])
+			)
+		);
+		push_prop(b.init('$$events', events_expression));
+	}
+
+	/** @type {Statement[]} */
+	const snippet_declarations = [];
+
+	// Group children by slot
+	for (const child of node.fragment.nodes) {
+		if (child.type === 'SnippetBlock') {
+			// the SnippetBlock visitor adds a declaration to `init`, but if it's directly
+			// inside a component then we want to hoist them into a block so that they
+			// can be used as props without creating conflicts
+			context.visit(child, {
+				...context.state,
+				init: snippet_declarations
+			});
+
+			push_prop(b.prop('init', child.expression, child.expression));
+
+			continue;
+		}
+
+		let slot_name = 'default';
+
+		if (is_element_node(child)) {
+			const attribute = /** @type {Attribute | undefined} */ (
+				child.attributes.find(
+					(attribute) => attribute.type === 'Attribute' && attribute.name === 'slot'
+				)
+			);
+
+			if (attribute !== undefined) {
+				slot_name = /** @type {Text[]} */ (attribute.value)[0].data;
+			}
+		}
+
+		(children[slot_name] ||= []).push(child);
+	}
+
+	// Serialize each slot
+	/** @type {Property[]} */
+	const serialized_slots = [];
+	for (const slot_name of Object.keys(children)) {
+		const block = /** @type {BlockStatement} */ (
+			context.visit(
+				{
+					...node.fragment,
+					// @ts-expect-error
+					nodes: children[slot_name]
+				},
+				{
+					...context.state,
+					scope:
+						context.state.scopes.get(slot_name === 'default' ? children[slot_name][0] : node) ??
+						context.state.scope
+				}
+			)
+		);
+
+		if (block.body.length === 0) continue;
+
+		const slot_fn = b.arrow(
+			[b.id('$$anchor'), b.id('$$slotProps')],
+			b.block([
+				...(slot_name === 'default' && !slot_scope_applies_to_itself ? lets : []),
+				...block.body
+			])
+		);
+
+		if (slot_name === 'default' && !has_children_prop) {
+			if (lets.length === 0 && children.default.every((node) => node.type !== 'SvelteFragment')) {
+				// create `children` prop...
+				push_prop(
+					b.init(
+						'children',
+						dev ? b.call('$.wrap_snippet', b.id(context.state.analysis.name), slot_fn) : slot_fn
+					)
+				);
+
+				// and `$$slots.default: true` so that `<slot>` on the child works
+				serialized_slots.push(b.init(slot_name, b.true));
+			} else {
+				// create `$$slots.default`...
+				serialized_slots.push(b.init(slot_name, slot_fn));
+
+				// and a `children` prop that errors
+				push_prop(b.init('children', b.id('$.invalid_default_snippet')));
+			}
+		} else {
+			serialized_slots.push(b.init(slot_name, slot_fn));
+		}
+	}
+
+	if (serialized_slots.length > 0) {
+		push_prop(b.init('$$slots', b.object(serialized_slots)));
+	}
+
+	if (!context.state.analysis.runes) {
+		push_prop(b.init('$$legacy', b.true));
+	}
+
+	const props_expression =
+		props_and_spreads.length === 0 ||
+		(props_and_spreads.length === 1 && Array.isArray(props_and_spreads[0]))
+			? b.object(/** @type {Property[]} */ (props_and_spreads[0]) || [])
+			: b.call(
+					'$.spread_props',
+					...props_and_spreads.map((p) => (Array.isArray(p) ? b.object(p) : p))
+				);
+
+	/** @param {Expression} node_id */
+	let fn = (node_id) => {
+		return b.call(
+			// TODO We can remove this ternary once we remove legacy mode, since in runes mode dynamic components
+			// will be handled separately through the `$.component` function, and then the component name will
+			// always be referenced through just the identifier here.
+			node.type === 'SvelteComponent'
+				? component_name
+				: /** @type {Expression} */ (context.visit(b.member_id(component_name))),
+			node_id,
+			props_expression
+		);
+	};
+
+	if (bind_this !== null) {
+		const prev = fn;
+
+		fn = (node_id) => {
+			return serialize_bind_this(bind_this, prev(node_id), context);
+		};
+	}
+
+	const statements = [...snippet_declarations];
+
+	if (node.type === 'SvelteComponent') {
+		const prev = fn;
+
+		fn = (node_id) => {
+			return b.call(
+				'$.component',
+				node_id,
+				b.thunk(/** @type {Expression} */ (context.visit(node.expression))),
+				b.arrow(
+					[b.id('$$anchor'), b.id(component_name)],
+					b.block([
+						...binding_initializers,
+						b.stmt(
+							dev
+								? b.call('$.validate_dynamic_component', b.thunk(prev(b.id('$$anchor'))))
+								: prev(b.id('$$anchor'))
+						)
+					])
+				)
+			);
+		};
+	} else {
+		statements.push(...binding_initializers);
+	}
+
+	if (Object.keys(custom_css_props).length > 0) {
+		context.state.template.push(
+			context.state.metadata.namespace === 'svg'
+				? '<g><!></g>'
+				: '<div style="display: contents"><!></div>'
+		);
+
+		statements.push(
+			b.stmt(b.call('$.css_props', anchor, b.thunk(b.object(custom_css_props)))),
+			b.stmt(fn(b.member(anchor, b.id('lastChild')))),
+			b.stmt(b.call('$.reset', anchor))
+		);
+	} else {
+		context.state.template.push('<!>');
+		statements.push(b.stmt(fn(anchor)));
+	}
+
+	return statements.length > 1 ? b.block(statements) : statements[0];
+}
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
new file mode 100644
index 0000000000..f7042d68e7
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js
@@ -0,0 +1,279 @@
+/** @import { Expression, Identifier } from 'estree' */
+/** @import { Attribute, ClassDirective, DelegatedEvent, ExpressionMetadata, ExpressionTag, Namespace, OnDirective, RegularElement, StyleDirective, SvelteElement, SvelteNode } from '#compiler' */
+/** @import { ComponentContext } from '../../types' */
+import { AttributeAliases, is_capture_event } from '../../../../../../constants.js';
+import { is_ignored } from '../../../../../state.js';
+import { get_attribute_expression } from '../../../../../utils/ast.js';
+import * as b from '../../../../../utils/builders.js';
+import { DOMProperties, PassiveEvents } from '../../../../constants.js';
+import { serialize_get_binding } from '../../utils.js';
+import {
+	serialize_event_handler,
+	serialize_template_literal,
+	serialize_update,
+	serialize_update_assignment
+} from './utils.js';
+
+/**
+ * Serializes each style directive into something like `$.set_style(element, style_property, value)`
+ * and adds it either to init or update, depending on whether or not the value or the attributes are dynamic.
+ * @param {StyleDirective[]} style_directives
+ * @param {Identifier} element_id
+ * @param {ComponentContext} context
+ * @param {boolean} is_attributes_reactive
+ * @param {boolean} force_check Should be `true` if we can't rely on our cached value, because for example there's also a `style` attribute
+ */
+export function serialize_style_directives(
+	style_directives,
+	element_id,
+	context,
+	is_attributes_reactive,
+	force_check
+) {
+	const state = context.state;
+
+	for (const directive of style_directives) {
+		let value =
+			directive.value === true
+				? serialize_get_binding({ name: directive.name, type: 'Identifier' }, context.state)
+				: serialize_attribute_value(directive.value, context)[1];
+
+		const update = b.stmt(
+			b.call(
+				'$.set_style',
+				element_id,
+				b.literal(directive.name),
+				value,
+				/** @type {Expression} */ (directive.modifiers.includes('important') ? b.true : undefined),
+				force_check ? b.true : undefined
+			)
+		);
+
+		const { has_state, has_call } = directive.metadata.expression;
+
+		if (!is_attributes_reactive && has_call) {
+			state.init.push(serialize_update(update));
+		} else if (is_attributes_reactive || has_state || has_call) {
+			state.update.push(update);
+		} else {
+			state.init.push(update);
+		}
+	}
+}
+
+/**
+ * Serializes each class directive into something like `$.class_toogle(element, class_name, value)`
+ * and adds it either to init or update, depending on whether or not the value or the attributes are dynamic.
+ * @param {ClassDirective[]} class_directives
+ * @param {Identifier} element_id
+ * @param {ComponentContext} context
+ * @param {boolean} is_attributes_reactive
+ */
+export function serialize_class_directives(
+	class_directives,
+	element_id,
+	context,
+	is_attributes_reactive
+) {
+	const state = context.state;
+	for (const directive of class_directives) {
+		const value = /** @type {Expression} */ (context.visit(directive.expression));
+		const update = b.stmt(b.call('$.toggle_class', element_id, b.literal(directive.name), value));
+
+		const { has_state, has_call } = directive.metadata.expression;
+
+		if (!is_attributes_reactive && has_call) {
+			state.init.push(serialize_update(update));
+		} else if (is_attributes_reactive || has_state || has_call) {
+			state.update.push(update);
+		} else {
+			state.init.push(update);
+		}
+	}
+}
+
+/**
+ * @param {Attribute['value']} value
+ * @param {ComponentContext} context
+ * @returns {[has_call: boolean, Expression]}
+ */
+export function serialize_attribute_value(value, context) {
+	if (value === true) {
+		return [false, b.literal(true)];
+	}
+
+	if (!Array.isArray(value) || value.length === 1) {
+		const chunk = Array.isArray(value) ? value[0] : value;
+
+		if (chunk.type === 'Text') {
+			return [false, b.literal(chunk.data)];
+		}
+
+		return [
+			chunk.metadata.expression.has_call,
+			/** @type {Expression} */ (context.visit(chunk.expression))
+		];
+	}
+
+	return serialize_template_literal(value, context.visit, context.state);
+}
+
+/**
+ * @param {RegularElement | SvelteElement} element
+ * @param {Attribute} attribute
+ * @param {{ state: { metadata: { namespace: Namespace }}}} context
+ */
+export function get_attribute_name(element, attribute, context) {
+	let name = attribute.name;
+	if (
+		!element.metadata.svg &&
+		!element.metadata.mathml &&
+		context.state.metadata.namespace !== 'foreign'
+	) {
+		name = name.toLowerCase();
+		if (name in AttributeAliases) {
+			name = AttributeAliases[name];
+		}
+	}
+	return name;
+}
+
+/**
+ * @param {Attribute & { value: ExpressionTag | [ExpressionTag] }} node
+ * @param {ComponentContext} context
+ */
+export function serialize_event_attribute(node, context) {
+	/** @type {string[]} */
+	const modifiers = [];
+
+	let event_name = node.name.slice(2);
+	if (is_capture_event(event_name)) {
+		event_name = event_name.slice(0, -7);
+		modifiers.push('capture');
+	}
+
+	serialize_event(
+		{
+			name: event_name,
+			expression: get_attribute_expression(node),
+			modifiers,
+			delegated: node.metadata.delegated
+		},
+		!Array.isArray(node.value) && node.value?.type === 'ExpressionTag'
+			? node.value.metadata.expression
+			: null,
+		context
+	);
+}
+
+/**
+ * Serializes an event handler function of the `on:` directive or an attribute starting with `on`
+ * @param {{name: string;modifiers: string[];expression: Expression | null;delegated?: DelegatedEvent | null;}} node
+ * @param {null | ExpressionMetadata} metadata
+ * @param {ComponentContext} context
+ */
+export function serialize_event(node, metadata, context) {
+	const state = context.state;
+
+	/** @type {Expression} */
+	let expression;
+
+	if (node.expression) {
+		let handler = serialize_event_handler(node, metadata, context);
+		const event_name = node.name;
+		const delegated = node.delegated;
+
+		if (delegated != null) {
+			let delegated_assignment;
+
+			if (!state.events.has(event_name)) {
+				state.events.add(event_name);
+			}
+			// Hoist function if we can, otherwise we leave the function as is
+			if (delegated.type === 'hoistable') {
+				if (delegated.function === node.expression) {
+					const func_name = context.state.scope.root.unique('on_' + event_name);
+					state.hoisted.push(b.var(func_name, handler));
+					handler = func_name;
+				}
+				if (node.modifiers.includes('once')) {
+					handler = b.call('$.once', handler);
+				}
+				const hoistable_params = /** @type {Expression[]} */ (
+					delegated.function.metadata.hoistable_params
+				);
+				// When we hoist a function we assign an array with the function and all
+				// hoisted closure params.
+				const args = [handler, ...hoistable_params];
+				delegated_assignment = b.array(args);
+			} else {
+				if (node.modifiers.includes('once')) {
+					handler = b.call('$.once', handler);
+				}
+				delegated_assignment = handler;
+			}
+
+			state.init.push(
+				b.stmt(
+					b.assignment(
+						'=',
+						b.member(context.state.node, b.id('__' + event_name)),
+						delegated_assignment
+					)
+				)
+			);
+			return;
+		}
+
+		if (node.modifiers.includes('once')) {
+			handler = b.call('$.once', handler);
+		}
+
+		const args = [
+			b.literal(event_name),
+			context.state.node,
+			handler,
+			b.literal(node.modifiers.includes('capture'))
+		];
+
+		if (node.modifiers.includes('passive')) {
+			args.push(b.literal(true));
+		} else if (node.modifiers.includes('nonpassive')) {
+			args.push(b.literal(false));
+		} else if (
+			PassiveEvents.includes(node.name) &&
+			/** @type {OnDirective} */ (node).type !== 'OnDirective'
+		) {
+			// For on:something events we don't apply passive behaviour to match Svelte 4.
+			args.push(b.literal(true));
+		}
+
+		// Events need to run in order with bindings/actions
+		expression = b.call('$.event', ...args);
+	} else {
+		expression = b.call(
+			'$.event',
+			b.literal(node.name),
+			state.node,
+			serialize_event_handler(node, metadata, context)
+		);
+	}
+
+	const parent = /** @type {SvelteNode} */ (context.path.at(-1));
+	const has_action_directive =
+		parent.type === 'RegularElement' && parent.attributes.find((a) => a.type === 'UseDirective');
+	const statement = b.stmt(
+		has_action_directive ? b.call('$.effect', b.thunk(expression)) : expression
+	);
+
+	if (
+		parent.type === 'SvelteDocument' ||
+		parent.type === 'SvelteWindow' ||
+		parent.type === 'SvelteBody'
+	) {
+		// These nodes are above the component tree, and its events should run parent first
+		state.before_init.push(statement);
+	} else {
+		state.after_update.push(statement);
+	}
+}
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
new file mode 100644
index 0000000000..15f70711b4
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
@@ -0,0 +1,159 @@
+/** @import { Expression } from 'estree' */
+/** @import { ExpressionTag, SvelteNode, Text } from '#compiler' */
+/** @import { ComponentClientTransformState, ComponentContext } from '../../types' */
+import * as b from '../../../../../utils/builders.js';
+import { serialize_template_literal, serialize_update } from './utils.js';
+
+/**
+ * Processes an array of template nodes, joining sibling text/expression nodes
+ * (e.g. `{a} b {c}`) into a single update function. Along the way it creates
+ * corresponding template node references these updates are applied to.
+ * @param {SvelteNode[]} nodes
+ * @param {(is_text: boolean) => Expression} expression
+ * @param {boolean} is_element
+ * @param {ComponentContext} context
+ */
+export function process_children(nodes, expression, is_element, { visit, state }) {
+	const within_bound_contenteditable = state.metadata.bound_contenteditable;
+
+	/** @typedef {Array<Text | ExpressionTag>} Sequence */
+
+	/** @type {Sequence} */
+	let sequence = [];
+
+	/**
+	 * @param {Sequence} sequence
+	 */
+	function flush_sequence(sequence) {
+		if (sequence.length === 1) {
+			const node = sequence[0];
+
+			if (node.type === 'Text') {
+				let prev = expression;
+				expression = () => b.call('$.sibling', prev(true));
+				state.template.push(node.raw);
+				return;
+			}
+
+			state.template.push(' ');
+
+			const text_id = get_node_id(expression(true), state, 'text');
+
+			const update = b.stmt(
+				b.call('$.set_text', text_id, /** @type {Expression} */ (visit(node.expression, state)))
+			);
+
+			if (node.metadata.expression.has_call && !within_bound_contenteditable) {
+				state.init.push(serialize_update(update));
+			} else if (node.metadata.expression.has_state && !within_bound_contenteditable) {
+				state.update.push(update);
+			} else {
+				state.init.push(
+					b.stmt(
+						b.assignment(
+							'=',
+							b.member(text_id, b.id('nodeValue')),
+							/** @type {Expression} */ (visit(node.expression))
+						)
+					)
+				);
+			}
+
+			expression = (is_text) =>
+				is_text ? b.call('$.sibling', text_id, b.true) : b.call('$.sibling', text_id);
+		} else {
+			const text_id = get_node_id(expression(true), state, 'text');
+
+			state.template.push(' ');
+
+			const [has_call, value] = serialize_template_literal(sequence, visit, state);
+
+			const update = b.stmt(b.call('$.set_text', text_id, value));
+
+			if (has_call && !within_bound_contenteditable) {
+				state.init.push(serialize_update(update));
+			} else if (
+				sequence.some(
+					(node) => node.type === 'ExpressionTag' && node.metadata.expression.has_state
+				) &&
+				!within_bound_contenteditable
+			) {
+				state.update.push(update);
+			} else {
+				state.init.push(b.stmt(b.assignment('=', b.member(text_id, b.id('nodeValue')), value)));
+			}
+
+			expression = (is_text) =>
+				is_text ? b.call('$.sibling', text_id, b.true) : b.call('$.sibling', text_id);
+		}
+	}
+
+	for (let i = 0; i < nodes.length; i += 1) {
+		const node = nodes[i];
+
+		if (node.type === 'Text' || node.type === 'ExpressionTag') {
+			sequence.push(node);
+		} else {
+			if (sequence.length > 0) {
+				flush_sequence(sequence);
+				sequence = [];
+			}
+
+			if (
+				node.type === 'SvelteHead' ||
+				node.type === 'TitleElement' ||
+				node.type === 'SnippetBlock'
+			) {
+				// These nodes do not contribute to the sibling/child tree
+				// TODO what about e.g. ConstTag and all the other things that
+				// get hoisted inside clean_nodes?
+				visit(node, state);
+			} else {
+				if (node.type === 'EachBlock' && nodes.length === 1 && is_element) {
+					node.metadata.is_controlled = true;
+					visit(node, state);
+				} else {
+					const id = get_node_id(
+						expression(false),
+						state,
+						node.type === 'RegularElement' ? node.name : 'node'
+					);
+
+					expression = (is_text) =>
+						is_text ? b.call('$.sibling', id, b.true) : b.call('$.sibling', id);
+
+					visit(node, {
+						...state,
+						node: id
+					});
+				}
+			}
+		}
+	}
+
+	if (sequence.length > 0) {
+		// if the final item in a fragment is static text,
+		// we need to force `hydrate_node` to advance
+		if (sequence.length === 1 && sequence[0].type === 'Text' && nodes.length > 1) {
+			state.init.push(b.stmt(b.call('$.next')));
+		}
+
+		flush_sequence(sequence);
+	}
+}
+
+/**
+ * @param {Expression} expression
+ * @param {ComponentClientTransformState} state
+ * @param {string} name
+ */
+function get_node_id(expression, state, name) {
+	let id = expression;
+
+	if (id.type !== 'Identifier') {
+		id = b.id(state.scope.generate(name));
+
+		state.init.push(b.var(id, expression));
+	}
+	return id;
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
new file mode 100644
index 0000000000..80b8f87df2
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
@@ -0,0 +1,34 @@
+/** @import { ArrowFunctionExpression, FunctionExpression, Node } from 'estree' */
+/** @import { ComponentContext } from '../../types' */
+import { serialize_hoistable_params } from '../../utils.js';
+
+/**
+ * @param {ArrowFunctionExpression | FunctionExpression} node
+ * @param {ComponentContext} context
+ */
+export const visit_function = (node, context) => {
+	const metadata = node.metadata;
+
+	let state = context.state;
+
+	if (node.type === 'FunctionExpression') {
+		const parent = /** @type {Node} */ (context.path.at(-1));
+		const in_constructor = parent.type === 'MethodDefinition' && parent.kind === 'constructor';
+
+		state = { ...context.state, in_constructor };
+	} else {
+		state = { ...context.state, in_constructor: false };
+	}
+
+	if (metadata?.hoistable === true) {
+		const params = serialize_hoistable_params(node, context);
+
+		return /** @type {FunctionExpression} */ ({
+			...node,
+			params,
+			body: context.visit(node.body, state)
+		});
+	}
+
+	context.next(state);
+};
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
new file mode 100644
index 0000000000..8a4be97f70
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js
@@ -0,0 +1,335 @@
+/** @import { Expression, ExpressionStatement, Identifier, MemberExpression, Statement, Super, TemplateElement, TemplateLiteral } from 'estree' */
+/** @import { BindDirective, ExpressionMetadata, ExpressionTag, OnDirective, SvelteNode, Text } from '#compiler' */
+/** @import { ComponentClientTransformState, ComponentContext } from '../../types' */
+import { walk } from 'zimmerframe';
+import { object } from '../../../../../utils/ast.js';
+import * as b from '../../../../../utils/builders.js';
+import { sanitize_template_string } from '../../../../../utils/sanitize_template_string.js';
+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';
+
+/**
+ * @param {Array<Text | ExpressionTag>} values
+ * @param {(node: SvelteNode, state: any) => any} visit
+ * @param {ComponentClientTransformState} state
+ * @returns {[boolean, TemplateLiteral]}
+ */
+export function serialize_template_literal(values, visit, state) {
+	/** @type {TemplateElement[]} */
+	const quasis = [];
+
+	/** @type {Expression[]} */
+	const expressions = [];
+	let has_call = false;
+	let contains_multiple_call_expression = false;
+	quasis.push(b.quasi(''));
+
+	for (let i = 0; i < values.length; i++) {
+		const node = values[i];
+
+		if (node.type === 'ExpressionTag' && node.metadata.expression.has_call) {
+			if (has_call) {
+				contains_multiple_call_expression = true;
+			}
+			has_call = true;
+		}
+	}
+
+	for (let i = 0; i < values.length; i++) {
+		const node = values[i];
+
+		if (node.type === 'Text') {
+			const last = /** @type {TemplateElement} */ (quasis.at(-1));
+			last.value.raw += sanitize_template_string(node.data);
+		} else if (node.type === 'ExpressionTag' && node.expression.type === 'Literal') {
+			const last = /** @type {TemplateElement} */ (quasis.at(-1));
+			if (node.expression.value != null) {
+				last.value.raw += sanitize_template_string(node.expression.value + '');
+			}
+		} else {
+			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(/** @type {Expression} */ (visit(node.expression, state)))
+						)
+					)
+				);
+				expressions.push(b.call('$.get', id));
+			} else {
+				expressions.push(b.logical('??', visit(node.expression, state), b.literal('')));
+			}
+			quasis.push(b.quasi('', i + 1 === values.length));
+		}
+	}
+
+	// TODO instead of this tuple, return a `{ dynamic, complex, value }` object. will DRY stuff out
+	return [has_call, b.template(quasis, expressions)];
+}
+
+/**
+ * @param {Statement} statement
+ */
+export function serialize_update(statement) {
+	const body =
+		statement.type === 'ExpressionStatement' ? statement.expression : b.block([statement]);
+
+	return b.stmt(b.call('$.template_effect', b.thunk(body)));
+}
+
+/**
+ * @param {Statement[]} update
+ */
+export function serialize_render_stmt(update) {
+	return update.length === 1
+		? serialize_update(update[0])
+		: b.stmt(b.call('$.template_effect', b.thunk(b.block(update))));
+}
+
+/**
+ * For unfortunate legacy reasons, directive names can look like this `use:a.b-c`
+ * This turns that string into a member expression
+ * @param {string} name
+ */
+export function parse_directive_name(name) {
+	// this allow for accessing members of an object
+	const parts = name.split('.');
+	let part = /** @type {string} */ (parts.shift());
+
+	/** @type {Identifier | MemberExpression} */
+	let expression = b.id(part);
+
+	while ((part = /** @type {string} */ (parts.shift()))) {
+		const computed = !regex_is_valid_identifier.test(part);
+		expression = b.member(expression, computed ? b.literal(part) : b.id(part), computed);
+	}
+
+	return expression;
+}
+
+/**
+ * @param {ComponentClientTransformState} state
+ * @param {string} id
+ * @param {Expression | undefined} init
+ * @param {Expression} value
+ * @param {ExpressionStatement} update
+ */
+export function serialize_update_assignment(state, id, init, value, update) {
+	state.init.push(b.var(id, init));
+	state.update.push(
+		b.if(b.binary('!==', b.id(id), b.assignment('=', b.id(id), value)), b.block([update]))
+	);
+}
+
+/**
+ * Serializes the event handler function of the `on:` directive
+ * @param {Pick<OnDirective, 'name' | 'modifiers' | 'expression'>} node
+ * @param {null | ExpressionMetadata} metadata
+ * @param {ComponentContext} context
+ */
+export function serialize_event_handler(node, metadata, { state, visit }) {
+	/** @type {Expression} */
+	let handler;
+
+	if (node.expression) {
+		handler = node.expression;
+
+		// Event handlers can be dynamic (source/store/prop/conditional etc)
+		const dynamic_handler = () =>
+			b.function(
+				null,
+				[b.rest(b.id('$$args'))],
+				b.block([
+					b.return(
+						b.call(
+							b.member(/** @type {Expression} */ (visit(handler)), b.id('apply'), false, true),
+							b.this,
+							b.id('$$args')
+						)
+					)
+				])
+			);
+
+		if (
+			metadata?.has_call &&
+			!(
+				(handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') &&
+				handler.metadata.hoistable
+			)
+		) {
+			// Create a derived dynamic event handler
+			const id = b.id(state.scope.generate('event_handler'));
+
+			state.init.push(
+				b.var(id, b.call('$.derived', b.thunk(/** @type {Expression} */ (visit(handler)))))
+			);
+
+			handler = b.function(
+				null,
+				[b.rest(b.id('$$args'))],
+				b.block([
+					b.return(
+						b.call(
+							b.member(b.call('$.get', id), b.id('apply'), false, true),
+							b.this,
+							b.id('$$args')
+						)
+					)
+				])
+			);
+		} else if (handler.type === 'Identifier' || handler.type === 'MemberExpression') {
+			const id = object(handler);
+			const binding = id === null ? null : state.scope.get(id.name);
+			if (
+				binding !== null &&
+				(binding.kind === 'state' ||
+					binding.kind === 'frozen_state' ||
+					binding.declaration_kind === 'import' ||
+					binding.kind === 'legacy_reactive' ||
+					binding.kind === 'derived' ||
+					binding.kind === 'prop' ||
+					binding.kind === 'bindable_prop' ||
+					binding.kind === 'store_sub')
+			) {
+				handler = dynamic_handler();
+			} else {
+				handler = /** @type {Expression} */ (visit(handler));
+			}
+		} else if (handler.type === 'ConditionalExpression' || handler.type === 'LogicalExpression') {
+			handler = dynamic_handler();
+		} else {
+			handler = /** @type {Expression} */ (visit(handler));
+		}
+	} else {
+		state.analysis.needs_props = true;
+
+		// Function + .call to preserve "this" context as much as possible
+		handler = b.function(
+			null,
+			[b.id('$$arg')],
+			b.block([b.stmt(b.call('$.bubble_event.call', b.this, b.id('$$props'), b.id('$$arg')))])
+		);
+	}
+
+	if (node.modifiers.includes('stopPropagation')) {
+		handler = b.call('$.stopPropagation', handler);
+	}
+	if (node.modifiers.includes('stopImmediatePropagation')) {
+		handler = b.call('$.stopImmediatePropagation', handler);
+	}
+	if (node.modifiers.includes('preventDefault')) {
+		handler = b.call('$.preventDefault', handler);
+	}
+	if (node.modifiers.includes('self')) {
+		handler = b.call('$.self', handler);
+	}
+	if (node.modifiers.includes('trusted')) {
+		handler = b.call('$.trusted', handler);
+	}
+
+	return handler;
+}
+
+/**
+ * Serializes `bind:this` for components and elements.
+ * @param {Identifier | MemberExpression} expression
+ * @param {Expression} value
+ * @param {import('zimmerframe').Context<SvelteNode, ComponentClientTransformState>} context
+ */
+export function serialize_bind_this(expression, value, { state, visit }) {
+	/** @type {Identifier[]} */
+	const ids = [];
+
+	/** @type {Expression[]} */
+	const values = [];
+
+	/** @type {typeof state.getters} */
+	const getters = {};
+
+	// Pass in each context variables to the get/set functions, so that we can null out old values on teardown.
+	// Note that we only do this for each context variables, the consequence is that the value might be stale in
+	// some scenarios where the value is a member expression with changing computed parts or using a combination of multiple
+	// variables, but that was the same case in Svelte 4, too. Once legacy mode is gone completely, we can revisit this.
+	walk(expression, null, {
+		Identifier(node, { path }) {
+			if (Object.hasOwn(getters, node.name)) return;
+
+			const parent = /** @type {Expression} */ (path.at(-1));
+			if (!is_reference(node, parent)) return;
+
+			const binding = state.scope.get(node.name);
+			if (!binding) return;
+
+			for (const [owner, scope] of state.scopes) {
+				if (owner.type === 'EachBlock' && scope === binding.scope) {
+					ids.push(node);
+					values.push(/** @type {Expression} */ (visit(node)));
+					getters[node.name] = node;
+					break;
+				}
+			}
+		}
+	});
+
+	const child_state = { ...state, getters: { ...state.getters, ...getters } };
+
+	const get = /** @type {Expression} */ (visit(expression, child_state));
+	const set = /** @type {Expression} */ (
+		visit(b.assignment('=', expression, b.id('$$value')), child_state)
+	);
+
+	// If we're mutating a property, then it might already be non-existent.
+	// If we make all the object nodes optional, then it avoids any runtime exceptions.
+	/** @type {Expression | Super} */
+	let node = get;
+
+	while (node.type === 'MemberExpression') {
+		node.optional = true;
+		node = node.object;
+	}
+
+	return b.call(
+		'$.bind_this',
+		value,
+		b.arrow([b.id('$$value'), ...ids], set),
+		b.arrow([...ids], get),
+		values.length > 0 && b.thunk(b.array(values))
+	);
+}
+
+/**
+ * @param {ComponentClientTransformState} state
+ * @param {BindDirective} binding
+ * @param {MemberExpression} expression
+ */
+export function serialize_validate_binding(state, binding, expression) {
+	const string = state.analysis.source.slice(binding.start, binding.end);
+
+	const get_object = b.thunk(/** @type {Expression} */ (expression.object));
+	const get_property = b.thunk(
+		/** @type {Expression} */ (
+			expression.computed
+				? expression.property
+				: b.literal(/** @type {Identifier} */ (expression.property).name)
+		)
+	);
+
+	const loc = locator(binding.start);
+
+	return b.stmt(
+		b.call(
+			'$.validate_binding',
+			b.literal(string),
+			get_object,
+			get_property,
+			loc && b.literal(loc.line),
+			loc && b.literal(loc.column)
+		)
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
deleted file mode 100644
index e9fa7ba899..0000000000
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/template.js
+++ /dev/null
@@ -1,3418 +0,0 @@
-/** @import { BlockStatement, CallExpression, Expression, ExpressionStatement, Identifier, Literal, MemberExpression, ObjectExpression, Pattern, Property, Statement, Super, TemplateElement, TemplateLiteral } from 'estree' */
-/** @import { Attribute, BindDirective, Binding, ClassDirective, Component, DelegatedEvent, EachBlock, ExpressionMetadata, ExpressionTag, Namespace, OnDirective, RegularElement, SpreadAttribute, StyleDirective, SvelteComponent, SvelteElement, SvelteNode, SvelteSelf, TemplateNode, Text } from '#compiler' */
-/** @import { SourceLocation } from '#shared' */
-/** @import { Scope } from '../../../scope.js' */
-/** @import { ComponentClientTransformState, ComponentContext, ComponentVisitors } from '../types.js' */
-import is_reference from 'is-reference';
-import { walk } from 'zimmerframe';
-import {
-	AttributeAliases,
-	DOMBooleanAttributes,
-	EACH_INDEX_REACTIVE,
-	EACH_IS_ANIMATED,
-	EACH_IS_CONTROLLED,
-	EACH_IS_STRICT_EQUALS,
-	EACH_ITEM_REACTIVE,
-	EACH_KEYED,
-	is_capture_event,
-	TEMPLATE_FRAGMENT,
-	TEMPLATE_USE_IMPORT_NODE,
-	TRANSITION_GLOBAL,
-	TRANSITION_IN,
-	TRANSITION_OUT
-} from '../../../../../constants.js';
-import { escape_html } from '../../../../../escaping.js';
-import { dev, is_ignored, locator } from '../../../../state.js';
-import {
-	extract_identifiers,
-	extract_paths,
-	get_attribute_chunks,
-	get_attribute_expression,
-	is_event_attribute,
-	is_text_attribute,
-	object,
-	unwrap_optional
-} from '../../../../utils/ast.js';
-import * as b from '../../../../utils/builders.js';
-import { sanitize_template_string } from '../../../../utils/sanitize_template_string.js';
-import { binding_properties } from '../../../bindings.js';
-import {
-	DOMProperties,
-	LoadErrorElements,
-	PassiveEvents,
-	VoidElements
-} from '../../../constants.js';
-import { is_custom_element_node, is_element_node } from '../../../nodes.js';
-import { regex_is_valid_identifier } from '../../../patterns.js';
-import { clean_nodes, determine_namespace_for_children, infer_namespace } from '../../utils.js';
-import {
-	create_derived,
-	create_derived_block_argument,
-	function_visitor,
-	get_assignment_value,
-	serialize_get_binding,
-	serialize_set_binding,
-	with_loc
-} from '../utils.js';
-import { javascript_visitors_runes } from './javascript-runes.js';
-
-/**
- * @param {RegularElement | SvelteElement} element
- * @param {Attribute} attribute
- * @param {{ state: { metadata: { namespace: Namespace }}}} context
- */
-function get_attribute_name(element, attribute, context) {
-	let name = attribute.name;
-	if (
-		!element.metadata.svg &&
-		!element.metadata.mathml &&
-		context.state.metadata.namespace !== 'foreign'
-	) {
-		name = name.toLowerCase();
-		if (name in AttributeAliases) {
-			name = AttributeAliases[name];
-		}
-	}
-	return name;
-}
-
-/**
- * Serializes each style directive into something like `$.set_style(element, style_property, value)`
- * and adds it either to init or update, depending on whether or not the value or the attributes are dynamic.
- * @param {StyleDirective[]} style_directives
- * @param {Identifier} element_id
- * @param {ComponentContext} context
- * @param {boolean} is_attributes_reactive
- * @param {boolean} force_check Should be `true` if we can't rely on our cached value, because for example there's also a `style` attribute
- */
-function serialize_style_directives(
-	style_directives,
-	element_id,
-	context,
-	is_attributes_reactive,
-	force_check
-) {
-	const state = context.state;
-
-	for (const directive of style_directives) {
-		let value =
-			directive.value === true
-				? serialize_get_binding({ name: directive.name, type: 'Identifier' }, context.state)
-				: serialize_attribute_value(directive.value, context)[1];
-
-		const update = b.stmt(
-			b.call(
-				'$.set_style',
-				element_id,
-				b.literal(directive.name),
-				value,
-				/** @type {Expression} */ (directive.modifiers.includes('important') ? b.true : undefined),
-				force_check ? b.true : undefined
-			)
-		);
-
-		const { has_state, has_call } = directive.metadata.expression;
-
-		if (!is_attributes_reactive && has_call) {
-			state.init.push(serialize_update(update));
-		} else if (is_attributes_reactive || has_state || has_call) {
-			state.update.push(update);
-		} else {
-			state.init.push(update);
-		}
-	}
-}
-
-/**
- * For unfortunate legacy reasons, directive names can look like this `use:a.b-c`
- * This turns that string into a member expression
- * @param {string} name
- */
-function parse_directive_name(name) {
-	// this allow for accessing members of an object
-	const parts = name.split('.');
-	let part = /** @type {string} */ (parts.shift());
-
-	/** @type {Identifier | MemberExpression} */
-	let expression = b.id(part);
-
-	while ((part = /** @type {string} */ (parts.shift()))) {
-		const computed = !regex_is_valid_identifier.test(part);
-		expression = b.member(expression, computed ? b.literal(part) : b.id(part), computed);
-	}
-
-	return expression;
-}
-
-/**
- * Serializes each class directive into something like `$.class_toogle(element, class_name, value)`
- * and adds it either to init or update, depending on whether or not the value or the attributes are dynamic.
- * @param {ClassDirective[]} class_directives
- * @param {Identifier} element_id
- * @param {ComponentContext} context
- * @param {boolean} is_attributes_reactive
- */
-function serialize_class_directives(class_directives, element_id, context, is_attributes_reactive) {
-	const state = context.state;
-	for (const directive of class_directives) {
-		const value = /** @type {Expression} */ (context.visit(directive.expression));
-		const update = b.stmt(b.call('$.toggle_class', element_id, b.literal(directive.name), value));
-
-		const { has_state, has_call } = directive.metadata.expression;
-
-		if (!is_attributes_reactive && has_call) {
-			state.init.push(serialize_update(update));
-		} else if (is_attributes_reactive || has_state || has_call) {
-			state.update.push(update);
-		} else {
-			state.init.push(update);
-		}
-	}
-}
-
-/**
- * @param {Binding[]} references
- * @param {ComponentContext} context
- */
-function serialize_transitive_dependencies(references, context) {
-	/** @type {Set<Binding>} */
-	const dependencies = new Set();
-
-	for (const ref of references) {
-		const deps = collect_transitive_dependencies(ref);
-		for (const dep of deps) {
-			dependencies.add(dep);
-		}
-	}
-
-	return [...dependencies].map((dep) => serialize_get_binding({ ...dep.node }, context.state));
-}
-
-/**
- * @param {Binding} binding
- * @param {Set<Binding>} seen
- * @returns {Binding[]}
- */
-function collect_transitive_dependencies(binding, seen = new Set()) {
-	if (binding.kind !== 'legacy_reactive') return [];
-
-	for (const dep of binding.legacy_dependencies) {
-		if (!seen.has(dep)) {
-			seen.add(dep);
-			for (const transitive_dep of collect_transitive_dependencies(dep, seen)) {
-				seen.add(transitive_dep);
-			}
-		}
-	}
-
-	return [...seen];
-}
-
-/**
- * Special case: if we have a value binding on a select element, we need to set up synchronization
- * between the value binding and inner signals, for indirect updates
- * @param {BindDirective} value_binding
- * @param {ComponentContext} context
- */
-function setup_select_synchronization(value_binding, context) {
-	if (context.state.analysis.runes) return;
-
-	let bound = value_binding.expression;
-	while (bound.type === 'MemberExpression') {
-		bound = /** @type {Identifier | MemberExpression} */ (bound.object);
-	}
-
-	/** @type {string[]} */
-	const names = [];
-
-	for (const [name, refs] of context.state.scope.references) {
-		if (
-			refs.length > 0 &&
-			// prevent infinite loop
-			name !== bound.name
-		) {
-			names.push(name);
-		}
-	}
-
-	const invalidator = b.call(
-		'$.invalidate_inner_signals',
-		b.thunk(
-			b.block(
-				names.map((name) => {
-					const serialized = serialize_get_binding(b.id(name), context.state);
-					return b.stmt(serialized);
-				})
-			)
-		)
-	);
-
-	context.state.init.push(
-		b.stmt(
-			b.call(
-				'$.template_effect',
-				b.thunk(
-					b.block([
-						b.stmt(/** @type {Expression} */ (context.visit(value_binding.expression))),
-						b.stmt(invalidator)
-					])
-				)
-			)
-		)
-	);
-}
-
-/**
- * @param {Array<Attribute | SpreadAttribute>} attributes
- * @param {ComponentContext} context
- * @param {RegularElement} element
- * @param {Identifier} element_id
- * @param {boolean} needs_select_handling
- */
-function serialize_element_spread_attributes(
-	attributes,
-	context,
-	element,
-	element_id,
-	needs_select_handling
-) {
-	let needs_isolation = false;
-
-	/** @type {ObjectExpression['properties']} */
-	const values = [];
-
-	for (const attribute of attributes) {
-		if (attribute.type === 'Attribute') {
-			const name = get_attribute_name(element, attribute, context);
-			// TODO: handle has_call
-			const [, value] = serialize_attribute_value(attribute.value, context);
-
-			if (
-				name === 'is' &&
-				value.type === 'Literal' &&
-				context.state.metadata.namespace === 'html'
-			) {
-				context.state.template.push(` is="${escape_html(value.value, true)}"`);
-				continue;
-			}
-
-			if (
-				is_event_attribute(attribute) &&
-				(get_attribute_expression(attribute).type === 'ArrowFunctionExpression' ||
-					get_attribute_expression(attribute).type === 'FunctionExpression')
-			) {
-				// Give the event handler a stable ID so it isn't removed and readded on every update
-				const id = context.state.scope.generate('event_handler');
-				context.state.init.push(b.var(id, value));
-				values.push(b.init(attribute.name, b.id(id)));
-			} else {
-				values.push(b.init(name, value));
-			}
-		} else {
-			values.push(b.spread(/** @type {Expression} */ (context.visit(attribute))));
-		}
-
-		needs_isolation ||=
-			attribute.type === 'SpreadAttribute' && attribute.metadata.expression.has_call;
-	}
-
-	const lowercase_attributes =
-		element.metadata.svg || element.metadata.mathml || is_custom_element_node(element)
-			? b.false
-			: b.true;
-	const id = context.state.scope.generate('attributes');
-
-	const update = b.stmt(
-		b.assignment(
-			'=',
-			b.id(id),
-			b.call(
-				'$.set_attributes',
-				element_id,
-				b.id(id),
-				b.object(values),
-				lowercase_attributes,
-				b.literal(context.state.analysis.css.hash),
-				is_ignored(element, 'hydration_attribute_changed') && b.true
-			)
-		)
-	);
-
-	context.state.init.push(b.let(id));
-
-	// objects could contain reactive getters -> play it safe and always assume spread attributes are reactive
-	if (needs_isolation) {
-		context.state.init.push(serialize_update(update));
-	} else {
-		context.state.update.push(update);
-	}
-
-	if (needs_select_handling) {
-		context.state.init.push(
-			b.stmt(b.call('$.init_select', element_id, b.thunk(b.member(b.id(id), b.id('value')))))
-		);
-		context.state.update.push(
-			b.if(
-				b.binary('in', b.literal('value'), b.id(id)),
-				b.block([
-					// This ensures a one-way street to the DOM in case it's <select {value}>
-					// and not <select bind:value>. We need it in addition to $.init_select
-					// because the select value is not reflected as an attribute, so the
-					// mutation observer wouldn't notice.
-					b.stmt(b.call('$.select_option', element_id, b.member(b.id(id), b.id('value'))))
-				])
-			)
-		);
-	}
-}
-
-/**
- * Serializes dynamic element attribute assignments.
- * Returns the `true` if spread is deemed reactive.
- * @param {Array<Attribute | SpreadAttribute>} attributes
- * @param {ComponentContext} context
- * @param {Identifier} element_id
- * @returns {boolean}
- */
-function serialize_dynamic_element_attributes(attributes, context, element_id) {
-	if (attributes.length === 0) {
-		if (context.state.analysis.css.hash) {
-			context.state.init.push(
-				b.stmt(b.call('$.set_class', element_id, b.literal(context.state.analysis.css.hash)))
-			);
-		}
-		return false;
-	}
-
-	// TODO why are we always treating this as a spread? needs docs, if that's not an error
-
-	let needs_isolation = false;
-	let is_reactive = false;
-
-	/** @type {ObjectExpression['properties']} */
-	const values = [];
-
-	for (const attribute of attributes) {
-		if (attribute.type === 'Attribute') {
-			const [, value] = serialize_attribute_value(attribute.value, context);
-
-			if (
-				is_event_attribute(attribute) &&
-				(get_attribute_expression(attribute).type === 'ArrowFunctionExpression' ||
-					get_attribute_expression(attribute).type === 'FunctionExpression')
-			) {
-				// Give the event handler a stable ID so it isn't removed and readded on every update
-				const id = context.state.scope.generate('event_handler');
-				context.state.init.push(b.var(id, value));
-				values.push(b.init(attribute.name, b.id(id)));
-			} else {
-				values.push(b.init(attribute.name, value));
-			}
-		} else {
-			values.push(b.spread(/** @type {Expression} */ (context.visit(attribute))));
-		}
-
-		is_reactive ||=
-			attribute.metadata.expression.has_state ||
-			// objects could contain reactive getters -> play it safe and always assume spread attributes are reactive
-			attribute.type === 'SpreadAttribute';
-		needs_isolation ||=
-			attribute.type === 'SpreadAttribute' && attribute.metadata.expression.has_call;
-	}
-
-	if (needs_isolation || is_reactive) {
-		const id = context.state.scope.generate('attributes');
-		context.state.init.push(b.let(id));
-
-		const update = b.stmt(
-			b.assignment(
-				'=',
-				b.id(id),
-				b.call(
-					'$.set_dynamic_element_attributes',
-					element_id,
-					b.id(id),
-					b.object(values),
-					b.literal(context.state.analysis.css.hash)
-				)
-			)
-		);
-
-		if (needs_isolation) {
-			context.state.init.push(serialize_update(update));
-			return false;
-		}
-
-		context.state.update.push(update);
-		return true;
-	}
-
-	context.state.init.push(
-		b.stmt(
-			b.call(
-				'$.set_dynamic_element_attributes',
-				element_id,
-				b.literal(null),
-				b.object(values),
-				b.literal(context.state.analysis.css.hash)
-			)
-		)
-	);
-	return false;
-}
-
-/**
- * Serializes an assignment to an element property by adding relevant statements to either only
- * the init or the the init and update arrays, depending on whether or not the value is dynamic.
- * Resulting code for static looks something like this:
- * ```js
- * element.property = value;
- * // or
- * $.set_attribute(element, property, value);
- * });
- * ```
- * Resulting code for dynamic looks something like this:
- * ```js
- * let value;
- * $.template_effect(() => {
- * 	if (value !== (value = 'new value')) {
- * 		element.property = value;
- * 		// or
- * 		$.set_attribute(element, property, value);
- * 	}
- * });
- * ```
- * Returns true if attribute is deemed reactive, false otherwise.
- * @param {RegularElement} element
- * @param {Identifier} node_id
- * @param {Attribute} attribute
- * @param {ComponentContext} context
- * @returns {boolean}
- */
-function serialize_element_attribute_update_assignment(element, node_id, attribute, context) {
-	const state = context.state;
-	const name = get_attribute_name(element, attribute, context);
-	const is_svg = context.state.metadata.namespace === 'svg' || element.name === 'svg';
-	const is_mathml = context.state.metadata.namespace === 'mathml';
-	let [has_call, value] = serialize_attribute_value(attribute.value, context);
-
-	// The foreign namespace doesn't have any special handling, everything goes through the attr function
-	if (context.state.metadata.namespace === 'foreign') {
-		const statement = b.stmt(
-			b.call(
-				'$.set_attribute',
-				node_id,
-				b.literal(name),
-				value,
-				is_ignored(element, 'hydration_attribute_changed') && b.true
-			)
-		);
-
-		if (attribute.metadata.expression.has_state) {
-			const id = state.scope.generate(`${node_id.name}_${name}`);
-			serialize_update_assignment(state, id, undefined, value, statement);
-			return true;
-		} else {
-			state.init.push(statement);
-			return false;
-		}
-	}
-
-	if (name === 'autofocus') {
-		state.init.push(b.stmt(b.call('$.autofocus', node_id, value)));
-		return false;
-	}
-
-	/** @type {Statement} */
-	let update;
-
-	if (name === 'class') {
-		update = b.stmt(
-			b.call(
-				is_svg ? '$.set_svg_class' : is_mathml ? '$.set_mathml_class' : '$.set_class',
-				node_id,
-				value
-			)
-		);
-	} else if (name === 'value') {
-		update = b.stmt(b.call('$.set_value', node_id, value));
-	} else if (name === 'checked') {
-		update = b.stmt(b.call('$.set_checked', node_id, value));
-	} else if (DOMProperties.includes(name)) {
-		update = b.stmt(b.assignment('=', b.member(node_id, b.id(name)), value));
-	} else {
-		const callee = name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute';
-		update = b.stmt(
-			b.call(
-				callee,
-				node_id,
-				b.literal(name),
-				value,
-				is_ignored(element, 'hydration_attribute_changed') && b.true
-			)
-		);
-	}
-
-	if (attribute.metadata.expression.has_state) {
-		if (has_call) {
-			state.init.push(serialize_update(update));
-		} else {
-			state.update.push(update);
-		}
-		return true;
-	} else {
-		state.init.push(update);
-		return false;
-	}
-}
-
-/**
- * Like `serialize_element_attribute_update_assignment` but without any special attribute treatment.
- * @param {Identifier}	node_id
- * @param {Attribute} attribute
- * @param {ComponentContext} context
- * @returns {boolean}
- */
-function serialize_custom_element_attribute_update_assignment(node_id, attribute, context) {
-	const state = context.state;
-	const name = attribute.name; // don't lowercase, as we set the element's property, which might be case sensitive
-	let [has_call, value] = serialize_attribute_value(attribute.value, context);
-
-	const update = b.stmt(b.call('$.set_custom_element_data', node_id, b.literal(name), value));
-
-	if (attribute.metadata.expression.has_state) {
-		if (has_call) {
-			state.init.push(serialize_update(update));
-		} else {
-			state.update.push(update);
-		}
-		return true;
-	} else {
-		state.init.push(update);
-		return false;
-	}
-}
-
-/**
- * Serializes an assignment to the value property of a `<select>`, `<option>` or `<input>` element
- * that needs the hidden `__value` property.
- * Returns true if attribute is deemed reactive, false otherwise.
- * @param {string} element
- * @param {Identifier} node_id
- * @param {Attribute} attribute
- * @param {ComponentContext} context
- * @returns {boolean}
- */
-function serialize_element_special_value_attribute(element, node_id, attribute, context) {
-	const state = context.state;
-	const [, value] = serialize_attribute_value(attribute.value, context);
-
-	const inner_assignment = b.assignment(
-		'=',
-		b.member(node_id, b.id('value')),
-		b.conditional(
-			b.binary('==', b.literal(null), b.assignment('=', b.member(node_id, b.id('__value')), value)),
-			b.literal(''), // render null/undefined values as empty string to support placeholder options
-			value
-		)
-	);
-	const is_reactive = attribute.metadata.expression.has_state;
-	const is_select_with_value =
-		// attribute.metadata.dynamic would give false negatives because even if the value does not change,
-		// the inner options could still change, so we need to always treat it as reactive
-		element === 'select' && attribute.value !== true && !is_text_attribute(attribute);
-
-	const update = b.stmt(
-		is_select_with_value
-			? b.sequence([
-					inner_assignment,
-					// This ensures a one-way street to the DOM in case it's <select {value}>
-					// and not <select bind:value>. We need it in addition to $.init_select
-					// because the select value is not reflected as an attribute, so the
-					// mutation observer wouldn't notice.
-					b.call('$.select_option', node_id, value)
-				])
-			: inner_assignment
-	);
-
-	if (is_select_with_value) {
-		state.init.push(b.stmt(b.call('$.init_select', node_id, b.thunk(value))));
-	}
-
-	if (is_reactive) {
-		const id = state.scope.generate(`${node_id.name}_value`);
-		serialize_update_assignment(
-			state,
-			id,
-			// `<option>` is a special case: The value property reflects to the DOM. If the value is set to undefined,
-			// that means the value should be set to the empty string. To be able to do that when the value is
-			// initially undefined, we need to set a value that is guaranteed to be different.
-			element === 'option' ? b.object([]) : undefined,
-			value,
-			update
-		);
-		return true;
-	} else {
-		state.init.push(update);
-		return false;
-	}
-}
-
-/**
- * @param {ComponentClientTransformState} state
- * @param {string} id
- * @param {Expression | undefined} init
- * @param {Expression} value
- * @param {ExpressionStatement} update
- */
-function serialize_update_assignment(state, id, init, value, update) {
-	state.init.push(b.var(id, init));
-	state.update.push(
-		b.if(b.binary('!==', b.id(id), b.assignment('=', b.id(id), value)), b.block([update]))
-	);
-}
-
-/**
- * @param {ComponentContext} context
- */
-function collect_parent_each_blocks(context) {
-	return /** @type {EachBlock[]} */ (context.path.filter((node) => node.type === 'EachBlock'));
-}
-
-/**
- * @param {Component | SvelteComponent | SvelteSelf} node
- * @param {string} component_name
- * @param {ComponentContext} context
- * @param {Expression} anchor
- * @returns {Statement}
- */
-function serialize_inline_component(node, component_name, context, anchor = context.state.node) {
-	/** @type {Array<Property[] | Expression>} */
-	const props_and_spreads = [];
-
-	/** @type {ExpressionStatement[]} */
-	const lets = [];
-
-	/** @type {Record<string, TemplateNode[]>} */
-	const children = {};
-
-	/** @type {Record<string, Expression[]>} */
-	const events = {};
-
-	/** @type {Property[]} */
-	const custom_css_props = [];
-
-	/** @type {Identifier | MemberExpression | null} */
-	let bind_this = null;
-
-	/**
-	 * @type {ExpressionStatement[]}
-	 */
-	const binding_initializers = [];
-
-	/**
-	 * If this component has a slot property, it is a named slot within another component. In this case
-	 * the slot scope applies to the component itself, too, and not just its children.
-	 */
-	let slot_scope_applies_to_itself = false;
-
-	/**
-	 * Components may have a children prop and also have child nodes. In this case, we assume
-	 * that the child component isn't using render tags yet and pass the slot as $$slots.default.
-	 * We're not doing it for spread attributes, as this would result in too many false positives.
-	 */
-	let has_children_prop = false;
-
-	/**
-	 * @param {Property} prop
-	 */
-	function push_prop(prop) {
-		const current = props_and_spreads.at(-1);
-		const current_is_props = Array.isArray(current);
-		const props = current_is_props ? current : [];
-		props.push(prop);
-		if (!current_is_props) {
-			props_and_spreads.push(props);
-		}
-	}
-	for (const attribute of node.attributes) {
-		if (attribute.type === 'LetDirective') {
-			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
-		} else if (attribute.type === 'OnDirective') {
-			events[attribute.name] ||= [];
-			let handler = serialize_event_handler(attribute, null, context);
-			if (attribute.modifiers.includes('once')) {
-				handler = b.call('$.once', handler);
-			}
-			events[attribute.name].push(handler);
-		} else if (attribute.type === 'SpreadAttribute') {
-			const expression = /** @type {Expression} */ (context.visit(attribute));
-			if (attribute.metadata.expression.has_state) {
-				let value = expression;
-
-				if (attribute.metadata.expression.has_call) {
-					const id = b.id(context.state.scope.generate('spread_element'));
-					context.state.init.push(b.var(id, b.call('$.derived', b.thunk(value))));
-					value = b.call('$.get', id);
-				}
-
-				props_and_spreads.push(b.thunk(value));
-			} else {
-				props_and_spreads.push(expression);
-			}
-		} else if (attribute.type === 'Attribute') {
-			if (attribute.name.startsWith('--')) {
-				custom_css_props.push(
-					b.init(attribute.name, serialize_attribute_value(attribute.value, context)[1])
-				);
-				continue;
-			}
-
-			if (attribute.name === 'slot') {
-				slot_scope_applies_to_itself = true;
-			}
-
-			if (attribute.name === 'children') {
-				has_children_prop = true;
-			}
-
-			const [, value] = serialize_attribute_value(attribute.value, context);
-
-			if (attribute.metadata.expression.has_state) {
-				let arg = value;
-
-				// When we have a non-simple computation, anything other than an Identifier or Member expression,
-				// then there's a good chance it needs to be memoized to avoid over-firing when read within the
-				// child component.
-				const should_wrap_in_derived = get_attribute_chunks(attribute.value).some((n) => {
-					return (
-						n.type === 'ExpressionTag' &&
-						n.expression.type !== 'Identifier' &&
-						n.expression.type !== 'MemberExpression'
-					);
-				});
-
-				if (should_wrap_in_derived) {
-					const id = b.id(context.state.scope.generate(attribute.name));
-					context.state.init.push(b.var(id, create_derived(context.state, b.thunk(value))));
-					arg = b.call('$.get', id);
-				}
-
-				push_prop(b.get(attribute.name, [b.return(arg)]));
-			} else {
-				push_prop(b.init(attribute.name, value));
-			}
-		} else if (attribute.type === 'BindDirective') {
-			const expression = /** @type {Expression} */ (context.visit(attribute.expression));
-
-			if (
-				dev &&
-				expression.type === 'MemberExpression' &&
-				context.state.analysis.runes &&
-				!is_ignored(node, 'binding_property_non_reactive')
-			) {
-				context.state.init.push(serialize_validate_binding(context.state, attribute, expression));
-			}
-
-			if (attribute.name === 'this') {
-				bind_this = attribute.expression;
-			} else {
-				if (dev) {
-					binding_initializers.push(
-						b.stmt(
-							b.call(
-								b.id('$.add_owner_effect'),
-								b.thunk(expression),
-								b.id(component_name),
-								is_ignored(node, 'ownership_invalid_binding') && b.true
-							)
-						)
-					);
-				}
-
-				push_prop(b.get(attribute.name, [b.return(expression)]));
-
-				const assignment = b.assignment('=', attribute.expression, b.id('$$value'));
-				push_prop(
-					b.set(attribute.name, [
-						b.stmt(serialize_set_binding(assignment, context, () => context.visit(assignment)))
-					])
-				);
-			}
-		}
-	}
-
-	if (slot_scope_applies_to_itself) {
-		context.state.init.push(...lets);
-	}
-
-	if (Object.keys(events).length > 0) {
-		const events_expression = b.object(
-			Object.keys(events).map((name) =>
-				b.init(name, events[name].length > 1 ? b.array(events[name]) : events[name][0])
-			)
-		);
-		push_prop(b.init('$$events', events_expression));
-	}
-
-	/** @type {Statement[]} */
-	const snippet_declarations = [];
-
-	// Group children by slot
-	for (const child of node.fragment.nodes) {
-		if (child.type === 'SnippetBlock') {
-			// the SnippetBlock visitor adds a declaration to `init`, but if it's directly
-			// inside a component then we want to hoist them into a block so that they
-			// can be used as props without creating conflicts
-			context.visit(child, {
-				...context.state,
-				init: snippet_declarations
-			});
-
-			push_prop(b.prop('init', child.expression, child.expression));
-
-			continue;
-		}
-
-		let slot_name = 'default';
-
-		if (is_element_node(child)) {
-			const attribute = /** @type {Attribute | undefined} */ (
-				child.attributes.find(
-					(attribute) => attribute.type === 'Attribute' && attribute.name === 'slot'
-				)
-			);
-
-			if (attribute !== undefined) {
-				slot_name = /** @type {Text[]} */ (attribute.value)[0].data;
-			}
-		}
-
-		(children[slot_name] ||= []).push(child);
-	}
-
-	// Serialize each slot
-	/** @type {Property[]} */
-	const serialized_slots = [];
-	for (const slot_name of Object.keys(children)) {
-		const block = /** @type {BlockStatement} */ (
-			context.visit(
-				{
-					...node.fragment,
-					// @ts-expect-error
-					nodes: children[slot_name]
-				},
-				{
-					...context.state,
-					scope:
-						context.state.scopes.get(slot_name === 'default' ? children[slot_name][0] : node) ??
-						context.state.scope
-				}
-			)
-		);
-
-		if (block.body.length === 0) continue;
-
-		const slot_fn = b.arrow(
-			[b.id('$$anchor'), b.id('$$slotProps')],
-			b.block([
-				...(slot_name === 'default' && !slot_scope_applies_to_itself ? lets : []),
-				...block.body
-			])
-		);
-
-		if (slot_name === 'default' && !has_children_prop) {
-			if (lets.length === 0 && children.default.every((node) => node.type !== 'SvelteFragment')) {
-				// create `children` prop...
-				push_prop(
-					b.init(
-						'children',
-						dev ? b.call('$.wrap_snippet', b.id(context.state.analysis.name), slot_fn) : slot_fn
-					)
-				);
-
-				// and `$$slots.default: true` so that `<slot>` on the child works
-				serialized_slots.push(b.init(slot_name, b.true));
-			} else {
-				// create `$$slots.default`...
-				serialized_slots.push(b.init(slot_name, slot_fn));
-
-				// and a `children` prop that errors
-				push_prop(b.init('children', b.id('$.invalid_default_snippet')));
-			}
-		} else {
-			serialized_slots.push(b.init(slot_name, slot_fn));
-		}
-	}
-
-	if (serialized_slots.length > 0) {
-		push_prop(b.init('$$slots', b.object(serialized_slots)));
-	}
-
-	if (!context.state.analysis.runes) {
-		push_prop(b.init('$$legacy', b.true));
-	}
-
-	const props_expression =
-		props_and_spreads.length === 0 ||
-		(props_and_spreads.length === 1 && Array.isArray(props_and_spreads[0]))
-			? b.object(/** @type {Property[]} */ (props_and_spreads[0]) || [])
-			: b.call(
-					'$.spread_props',
-					...props_and_spreads.map((p) => (Array.isArray(p) ? b.object(p) : p))
-				);
-
-	/** @param {Expression} node_id */
-	let fn = (node_id) => {
-		return b.call(
-			// TODO We can remove this ternary once we remove legacy mode, since in runes mode dynamic components
-			// will be handled separately through the `$.component` function, and then the component name will
-			// always be referenced through just the identifier here.
-			node.type === 'SvelteComponent'
-				? component_name
-				: /** @type {Expression} */ (context.visit(b.member_id(component_name))),
-			node_id,
-			props_expression
-		);
-	};
-
-	if (bind_this !== null) {
-		const prev = fn;
-
-		fn = (node_id) => {
-			return serialize_bind_this(bind_this, prev(node_id), context);
-		};
-	}
-
-	const statements = [...snippet_declarations];
-
-	if (node.type === 'SvelteComponent') {
-		const prev = fn;
-
-		fn = (node_id) => {
-			return b.call(
-				'$.component',
-				node_id,
-				b.thunk(/** @type {Expression} */ (context.visit(node.expression))),
-				b.arrow(
-					[b.id('$$anchor'), b.id(component_name)],
-					b.block([
-						...binding_initializers,
-						b.stmt(
-							dev
-								? b.call('$.validate_dynamic_component', b.thunk(prev(b.id('$$anchor'))))
-								: prev(b.id('$$anchor'))
-						)
-					])
-				)
-			);
-		};
-	} else {
-		statements.push(...binding_initializers);
-	}
-
-	if (Object.keys(custom_css_props).length > 0) {
-		context.state.template.push(
-			context.state.metadata.namespace === 'svg'
-				? '<g><!></g>'
-				: '<div style="display: contents"><!></div>'
-		);
-
-		statements.push(
-			b.stmt(b.call('$.css_props', anchor, b.thunk(b.object(custom_css_props)))),
-			b.stmt(fn(b.member(anchor, b.id('lastChild')))),
-			b.stmt(b.call('$.reset', anchor))
-		);
-	} else {
-		context.state.template.push('<!>');
-		statements.push(b.stmt(fn(anchor)));
-	}
-
-	return statements.length > 1 ? b.block(statements) : statements[0];
-}
-
-/**
- * Serializes `bind:this` for components and elements.
- * @param {Identifier | MemberExpression} expression
- * @param {Expression} value
- * @param {import('zimmerframe').Context<SvelteNode, ComponentClientTransformState>} context
- */
-function serialize_bind_this(expression, value, { state, visit }) {
-	/** @type {Identifier[]} */
-	const ids = [];
-
-	/** @type {Expression[]} */
-	const values = [];
-
-	/** @type {typeof state.getters} */
-	const getters = {};
-
-	// Pass in each context variables to the get/set functions, so that we can null out old values on teardown.
-	// Note that we only do this for each context variables, the consequence is that the value might be stale in
-	// some scenarios where the value is a member expression with changing computed parts or using a combination of multiple
-	// variables, but that was the same case in Svelte 4, too. Once legacy mode is gone completely, we can revisit this.
-	walk(expression, null, {
-		Identifier(node, { path }) {
-			if (Object.hasOwn(getters, node.name)) return;
-
-			const parent = /** @type {Expression} */ (path.at(-1));
-			if (!is_reference(node, parent)) return;
-
-			const binding = state.scope.get(node.name);
-			if (!binding) return;
-
-			for (const [owner, scope] of state.scopes) {
-				if (owner.type === 'EachBlock' && scope === binding.scope) {
-					ids.push(node);
-					values.push(/** @type {Expression} */ (visit(node)));
-					getters[node.name] = node;
-					break;
-				}
-			}
-		}
-	});
-
-	const child_state = { ...state, getters: { ...state.getters, ...getters } };
-
-	const get = /** @type {Expression} */ (visit(expression, child_state));
-	const set = /** @type {Expression} */ (
-		visit(b.assignment('=', expression, b.id('$$value')), child_state)
-	);
-
-	// If we're mutating a property, then it might already be non-existent.
-	// If we make all the object nodes optional, then it avoids any runtime exceptions.
-	/** @type {Expression | Super} */
-	let node = get;
-
-	while (node.type === 'MemberExpression') {
-		node.optional = true;
-		node = node.object;
-	}
-
-	return b.call(
-		'$.bind_this',
-		value,
-		b.arrow([b.id('$$value'), ...ids], set),
-		b.arrow([...ids], get),
-		values.length > 0 && b.thunk(b.array(values))
-	);
-}
-
-/**
- * @param {SourceLocation[]} locations
- */
-function serialize_locations(locations) {
-	return b.array(
-		locations.map((loc) => {
-			const expression = b.array([b.literal(loc[0]), b.literal(loc[1])]);
-
-			if (loc.length === 3) {
-				expression.elements.push(serialize_locations(loc[2]));
-			}
-
-			return expression;
-		})
-	);
-}
-
-/**
- *
- * @param {Namespace} namespace
- * @param {ComponentClientTransformState} state
- * @returns
- */
-function get_template_function(namespace, state) {
-	const contains_script_tag = state.metadata.context.template_contains_script_tag;
-	return namespace === 'svg'
-		? contains_script_tag
-			? '$.svg_template_with_script'
-			: '$.ns_template'
-		: namespace === 'mathml'
-			? '$.mathml_template'
-			: contains_script_tag
-				? '$.template_with_script'
-				: '$.template';
-}
-
-/**
- *
- * @param {Statement} statement
- */
-function serialize_update(statement) {
-	const body =
-		statement.type === 'ExpressionStatement' ? statement.expression : b.block([statement]);
-
-	return b.stmt(b.call('$.template_effect', b.thunk(body)));
-}
-
-/**
- * @param {Statement[]} update
- */
-function serialize_render_stmt(update) {
-	return update.length === 1
-		? serialize_update(update[0])
-		: b.stmt(b.call('$.template_effect', b.thunk(b.block(update))));
-}
-
-/**
- * Serializes the event handler function of the `on:` directive
- * @param {Pick<OnDirective, 'name' | 'modifiers' | 'expression'>} node
- * @param {null | ExpressionMetadata} metadata
- * @param {ComponentContext} context
- */
-function serialize_event_handler(node, metadata, { state, visit }) {
-	/** @type {Expression} */
-	let handler;
-
-	if (node.expression) {
-		handler = node.expression;
-
-		// Event handlers can be dynamic (source/store/prop/conditional etc)
-		const dynamic_handler = () =>
-			b.function(
-				null,
-				[b.rest(b.id('$$args'))],
-				b.block([
-					b.return(
-						b.call(
-							b.member(/** @type {Expression} */ (visit(handler)), b.id('apply'), false, true),
-							b.this,
-							b.id('$$args')
-						)
-					)
-				])
-			);
-
-		if (
-			metadata?.has_call &&
-			!(
-				(handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') &&
-				handler.metadata.hoistable
-			)
-		) {
-			// Create a derived dynamic event handler
-			const id = b.id(state.scope.generate('event_handler'));
-
-			state.init.push(
-				b.var(id, b.call('$.derived', b.thunk(/** @type {Expression} */ (visit(handler)))))
-			);
-
-			handler = b.function(
-				null,
-				[b.rest(b.id('$$args'))],
-				b.block([
-					b.return(
-						b.call(
-							b.member(b.call('$.get', id), b.id('apply'), false, true),
-							b.this,
-							b.id('$$args')
-						)
-					)
-				])
-			);
-		} else if (handler.type === 'Identifier' || handler.type === 'MemberExpression') {
-			const id = object(handler);
-			const binding = id === null ? null : state.scope.get(id.name);
-			if (
-				binding !== null &&
-				(binding.kind === 'state' ||
-					binding.kind === 'frozen_state' ||
-					binding.declaration_kind === 'import' ||
-					binding.kind === 'legacy_reactive' ||
-					binding.kind === 'derived' ||
-					binding.kind === 'prop' ||
-					binding.kind === 'bindable_prop' ||
-					binding.kind === 'store_sub')
-			) {
-				handler = dynamic_handler();
-			} else {
-				handler = /** @type {Expression} */ (visit(handler));
-			}
-		} else if (handler.type === 'ConditionalExpression' || handler.type === 'LogicalExpression') {
-			handler = dynamic_handler();
-		} else {
-			handler = /** @type {Expression} */ (visit(handler));
-		}
-	} else {
-		state.analysis.needs_props = true;
-
-		// Function + .call to preserve "this" context as much as possible
-		handler = b.function(
-			null,
-			[b.id('$$arg')],
-			b.block([b.stmt(b.call('$.bubble_event.call', b.this, b.id('$$props'), b.id('$$arg')))])
-		);
-	}
-
-	if (node.modifiers.includes('stopPropagation')) {
-		handler = b.call('$.stopPropagation', handler);
-	}
-	if (node.modifiers.includes('stopImmediatePropagation')) {
-		handler = b.call('$.stopImmediatePropagation', handler);
-	}
-	if (node.modifiers.includes('preventDefault')) {
-		handler = b.call('$.preventDefault', handler);
-	}
-	if (node.modifiers.includes('self')) {
-		handler = b.call('$.self', handler);
-	}
-	if (node.modifiers.includes('trusted')) {
-		handler = b.call('$.trusted', handler);
-	}
-
-	return handler;
-}
-
-/**
- * Serializes an event handler function of the `on:` directive or an attribute starting with `on`
- * @param {{name: string;modifiers: string[];expression: Expression | null;delegated?: DelegatedEvent | null;}} node
- * @param {null | ExpressionMetadata} metadata
- * @param {ComponentContext} context
- */
-function serialize_event(node, metadata, context) {
-	const state = context.state;
-
-	/** @type {Expression} */
-	let expression;
-
-	if (node.expression) {
-		let handler = serialize_event_handler(node, metadata, context);
-		const event_name = node.name;
-		const delegated = node.delegated;
-
-		if (delegated != null) {
-			let delegated_assignment;
-
-			if (!state.events.has(event_name)) {
-				state.events.add(event_name);
-			}
-			// Hoist function if we can, otherwise we leave the function as is
-			if (delegated.type === 'hoistable') {
-				if (delegated.function === node.expression) {
-					const func_name = context.state.scope.root.unique('on_' + event_name);
-					state.hoisted.push(b.var(func_name, handler));
-					handler = func_name;
-				}
-				if (node.modifiers.includes('once')) {
-					handler = b.call('$.once', handler);
-				}
-				const hoistable_params = /** @type {Expression[]} */ (
-					delegated.function.metadata.hoistable_params
-				);
-				// When we hoist a function we assign an array with the function and all
-				// hoisted closure params.
-				const args = [handler, ...hoistable_params];
-				delegated_assignment = b.array(args);
-			} else {
-				if (node.modifiers.includes('once')) {
-					handler = b.call('$.once', handler);
-				}
-				delegated_assignment = handler;
-			}
-
-			state.init.push(
-				b.stmt(
-					b.assignment(
-						'=',
-						b.member(context.state.node, b.id('__' + event_name)),
-						delegated_assignment
-					)
-				)
-			);
-			return;
-		}
-
-		if (node.modifiers.includes('once')) {
-			handler = b.call('$.once', handler);
-		}
-
-		const args = [
-			b.literal(event_name),
-			context.state.node,
-			handler,
-			b.literal(node.modifiers.includes('capture'))
-		];
-
-		if (node.modifiers.includes('passive')) {
-			args.push(b.literal(true));
-		} else if (node.modifiers.includes('nonpassive')) {
-			args.push(b.literal(false));
-		} else if (
-			PassiveEvents.includes(node.name) &&
-			/** @type {OnDirective} */ (node).type !== 'OnDirective'
-		) {
-			// For on:something events we don't apply passive behaviour to match Svelte 4.
-			args.push(b.literal(true));
-		}
-
-		// Events need to run in order with bindings/actions
-		expression = b.call('$.event', ...args);
-	} else {
-		expression = b.call(
-			'$.event',
-			b.literal(node.name),
-			state.node,
-			serialize_event_handler(node, metadata, context)
-		);
-	}
-
-	const parent = /** @type {SvelteNode} */ (context.path.at(-1));
-	const has_action_directive =
-		parent.type === 'RegularElement' && parent.attributes.find((a) => a.type === 'UseDirective');
-	const statement = b.stmt(
-		has_action_directive ? b.call('$.effect', b.thunk(expression)) : expression
-	);
-
-	if (
-		parent.type === 'SvelteDocument' ||
-		parent.type === 'SvelteWindow' ||
-		parent.type === 'SvelteBody'
-	) {
-		// These nodes are above the component tree, and its events should run parent first
-		state.before_init.push(statement);
-	} else {
-		state.after_update.push(statement);
-	}
-}
-
-/**
- * @param {Attribute & { value: ExpressionTag | [ExpressionTag] }} node
- * @param {ComponentContext} context
- */
-function serialize_event_attribute(node, context) {
-	/** @type {string[]} */
-	const modifiers = [];
-
-	let event_name = node.name.slice(2);
-	if (is_capture_event(event_name)) {
-		event_name = event_name.slice(0, -7);
-		modifiers.push('capture');
-	}
-
-	serialize_event(
-		{
-			name: event_name,
-			expression: get_attribute_expression(node),
-			modifiers,
-			delegated: node.metadata.delegated
-		},
-		!Array.isArray(node.value) && node.value?.type === 'ExpressionTag'
-			? node.value.metadata.expression
-			: null,
-		context
-	);
-}
-
-/**
- * Processes an array of template nodes, joining sibling text/expression nodes
- * (e.g. `{a} b {c}`) into a single update function. Along the way it creates
- * corresponding template node references these updates are applied to.
- * @param {SvelteNode[]} nodes
- * @param {(is_text: boolean) => Expression} expression
- * @param {boolean} is_element
- * @param {ComponentContext} context
- */
-function process_children(nodes, expression, is_element, { visit, state }) {
-	const within_bound_contenteditable = state.metadata.bound_contenteditable;
-
-	/** @typedef {Array<Text | ExpressionTag>} Sequence */
-
-	/** @type {Sequence} */
-	let sequence = [];
-
-	/**
-	 * @param {Sequence} sequence
-	 */
-	function flush_sequence(sequence) {
-		if (sequence.length === 1) {
-			const node = sequence[0];
-
-			if (node.type === 'Text') {
-				let prev = expression;
-				expression = () => b.call('$.sibling', prev(true));
-				state.template.push(node.raw);
-				return;
-			}
-
-			state.template.push(' ');
-
-			const text_id = get_node_id(expression(true), state, 'text');
-
-			const update = b.stmt(
-				b.call('$.set_text', text_id, /** @type {Expression} */ (visit(node.expression, state)))
-			);
-
-			if (node.metadata.expression.has_call && !within_bound_contenteditable) {
-				state.init.push(serialize_update(update));
-			} else if (node.metadata.expression.has_state && !within_bound_contenteditable) {
-				state.update.push(update);
-			} else {
-				state.init.push(
-					b.stmt(
-						b.assignment(
-							'=',
-							b.member(text_id, b.id('nodeValue')),
-							/** @type {Expression} */ (visit(node.expression))
-						)
-					)
-				);
-			}
-
-			expression = (is_text) =>
-				is_text ? b.call('$.sibling', text_id, b.true) : b.call('$.sibling', text_id);
-		} else {
-			const text_id = get_node_id(expression(true), state, 'text');
-
-			state.template.push(' ');
-
-			const [has_call, value] = serialize_template_literal(sequence, visit, state);
-
-			const update = b.stmt(b.call('$.set_text', text_id, value));
-
-			if (has_call && !within_bound_contenteditable) {
-				state.init.push(serialize_update(update));
-			} else if (
-				sequence.some(
-					(node) => node.type === 'ExpressionTag' && node.metadata.expression.has_state
-				) &&
-				!within_bound_contenteditable
-			) {
-				state.update.push(update);
-			} else {
-				state.init.push(b.stmt(b.assignment('=', b.member(text_id, b.id('nodeValue')), value)));
-			}
-
-			expression = (is_text) =>
-				is_text ? b.call('$.sibling', text_id, b.true) : b.call('$.sibling', text_id);
-		}
-	}
-
-	for (let i = 0; i < nodes.length; i += 1) {
-		const node = nodes[i];
-
-		if (node.type === 'Text' || node.type === 'ExpressionTag') {
-			sequence.push(node);
-		} else {
-			if (sequence.length > 0) {
-				flush_sequence(sequence);
-				sequence = [];
-			}
-
-			if (
-				node.type === 'SvelteHead' ||
-				node.type === 'TitleElement' ||
-				node.type === 'SnippetBlock'
-			) {
-				// These nodes do not contribute to the sibling/child tree
-				// TODO what about e.g. ConstTag and all the other things that
-				// get hoisted inside clean_nodes?
-				visit(node, state);
-			} else {
-				if (node.type === 'EachBlock' && nodes.length === 1 && is_element) {
-					node.metadata.is_controlled = true;
-					visit(node, state);
-				} else {
-					const id = get_node_id(
-						expression(false),
-						state,
-						node.type === 'RegularElement' ? node.name : 'node'
-					);
-
-					expression = (is_text) =>
-						is_text ? b.call('$.sibling', id, b.true) : b.call('$.sibling', id);
-
-					visit(node, {
-						...state,
-						node: id
-					});
-				}
-			}
-		}
-	}
-
-	if (sequence.length > 0) {
-		// if the final item in a fragment is static text,
-		// we need to force `hydrate_node` to advance
-		if (sequence.length === 1 && sequence[0].type === 'Text' && nodes.length > 1) {
-			state.init.push(b.stmt(b.call('$.next')));
-		}
-
-		flush_sequence(sequence);
-	}
-}
-
-/**
- * @param {Expression} expression
- * @param {ComponentClientTransformState} state
- * @param {string} name
- */
-function get_node_id(expression, state, name) {
-	let id = expression;
-
-	if (id.type !== 'Identifier') {
-		id = b.id(state.scope.generate(name));
-
-		state.init.push(b.var(id, expression));
-	}
-	return id;
-}
-
-/**
- * @param {Attribute['value']} value
- * @param {ComponentContext} context
- * @returns {[has_call: boolean, Expression]}
- */
-function serialize_attribute_value(value, context) {
-	if (value === true) {
-		return [false, b.literal(true)];
-	}
-
-	if (!Array.isArray(value) || value.length === 1) {
-		const chunk = Array.isArray(value) ? value[0] : value;
-
-		if (chunk.type === 'Text') {
-			return [false, b.literal(chunk.data)];
-		}
-
-		return [
-			chunk.metadata.expression.has_call,
-			/** @type {Expression} */ (context.visit(chunk.expression))
-		];
-	}
-
-	return serialize_template_literal(value, context.visit, context.state);
-}
-
-/**
- * @param {Array<Text | ExpressionTag>} values
- * @param {(node: SvelteNode, state: any) => any} visit
- * @param {ComponentClientTransformState} state
- * @returns {[boolean, TemplateLiteral]}
- */
-function serialize_template_literal(values, visit, state) {
-	/** @type {TemplateElement[]} */
-	const quasis = [];
-
-	/** @type {Expression[]} */
-	const expressions = [];
-	let has_call = false;
-	let contains_multiple_call_expression = false;
-	quasis.push(b.quasi(''));
-
-	for (let i = 0; i < values.length; i++) {
-		const node = values[i];
-
-		if (node.type === 'ExpressionTag' && node.metadata.expression.has_call) {
-			if (has_call) {
-				contains_multiple_call_expression = true;
-			}
-			has_call = true;
-		}
-	}
-
-	for (let i = 0; i < values.length; i++) {
-		const node = values[i];
-
-		if (node.type === 'Text') {
-			const last = /** @type {TemplateElement} */ (quasis.at(-1));
-			last.value.raw += sanitize_template_string(node.data);
-		} else if (node.type === 'ExpressionTag' && node.expression.type === 'Literal') {
-			const last = /** @type {TemplateElement} */ (quasis.at(-1));
-			if (node.expression.value != null) {
-				last.value.raw += sanitize_template_string(node.expression.value + '');
-			}
-		} else {
-			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(/** @type {Expression} */ (visit(node.expression, state)))
-						)
-					)
-				);
-				expressions.push(b.call('$.get', id));
-			} else {
-				expressions.push(b.logical('??', visit(node.expression, state), b.literal('')));
-			}
-			quasis.push(b.quasi('', i + 1 === values.length));
-		}
-	}
-
-	// TODO instead of this tuple, return a `{ dynamic, complex, value }` object. will DRY stuff out
-	return [has_call, b.template(quasis, expressions)];
-}
-
-/** @type {ComponentVisitors} */
-export const template_visitors = {
-	Fragment(node, context) {
-		// Creates a new block which looks roughly like this:
-		// ```js
-		// // hoisted:
-		// const block_name = $.template(`...`);
-		//
-		// // for the main block:
-		// const id = block_name();
-		// // init stuff and possibly render effect
-		// $.append($$anchor, id);
-		// ```
-		// Adds the hoisted parts to `context.state.hoisted` and returns the statements of the main block.
-
-		const parent = context.path.at(-1) ?? node;
-
-		const namespace = infer_namespace(context.state.metadata.namespace, parent, node.nodes);
-
-		const { hoisted, trimmed, is_standalone, is_text_first } = clean_nodes(
-			parent,
-			node.nodes,
-			context.path,
-			namespace,
-			context.state,
-			context.state.preserve_whitespace,
-			context.state.options.preserveComments
-		);
-
-		if (hoisted.length === 0 && trimmed.length === 0) {
-			return b.block([]);
-		}
-
-		const is_single_element = trimmed.length === 1 && trimmed[0].type === 'RegularElement';
-		const is_single_child_not_needing_template =
-			trimmed.length === 1 &&
-			(trimmed[0].type === 'SvelteFragment' || trimmed[0].type === 'TitleElement');
-
-		const template_name = context.state.scope.root.unique('root'); // TODO infer name from parent
-
-		/** @type {Statement[]} */
-		const body = [];
-
-		/** @type {Statement | undefined} */
-		let close = undefined;
-
-		/** @type {ComponentClientTransformState} */
-		const state = {
-			...context.state,
-			before_init: [],
-			init: [],
-			update: [],
-			after_update: [],
-			template: [],
-			locations: [],
-			getters: { ...context.state.getters },
-			metadata: {
-				context: {
-					template_needs_import_node: false,
-					template_contains_script_tag: false
-				},
-				namespace,
-				bound_contenteditable: context.state.metadata.bound_contenteditable
-			}
-		};
-
-		for (const node of hoisted) {
-			context.visit(node, state);
-		}
-
-		if (is_text_first) {
-			// skip over inserted comment
-			body.push(b.stmt(b.call('$.next')));
-		}
-
-		/**
-		 * @param {Identifier} template_name
-		 * @param {Expression[]} args
-		 */
-		const add_template = (template_name, args) => {
-			let call = b.call(get_template_function(namespace, state), ...args);
-			if (dev) {
-				call = b.call(
-					'$.add_locations',
-					call,
-					b.member(b.id(context.state.analysis.name), b.id('$.FILENAME'), true),
-					serialize_locations(state.locations)
-				);
-			}
-
-			context.state.hoisted.push(b.var(template_name, call));
-		};
-
-		if (is_single_element) {
-			const element = /** @type {RegularElement} */ (trimmed[0]);
-
-			const id = b.id(context.state.scope.generate(element.name));
-
-			context.visit(element, {
-				...state,
-				node: id
-			});
-
-			/** @type {Expression[]} */
-			const args = [b.template([b.quasi(state.template.join(''), true)], [])];
-
-			if (state.metadata.context.template_needs_import_node) {
-				args.push(b.literal(TEMPLATE_USE_IMPORT_NODE));
-			}
-
-			add_template(template_name, args);
-
-			body.push(b.var(id, b.call(template_name)), ...state.before_init, ...state.init);
-			close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
-		} else if (is_single_child_not_needing_template) {
-			context.visit(trimmed[0], state);
-			body.push(...state.before_init, ...state.init);
-		} else if (trimmed.length > 0) {
-			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');
-
-			if (use_space_template) {
-				// special case — we can use `$.text` instead of creating a unique template
-				const id = b.id(context.state.scope.generate('text'));
-
-				process_children(trimmed, () => id, false, {
-					...context,
-					state
-				});
-
-				body.push(b.var(id, b.call('$.text')), ...state.before_init, ...state.init);
-				close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
-			} 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 });
-				} 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 });
-
-					let flags = TEMPLATE_FRAGMENT;
-
-					if (state.metadata.context.template_needs_import_node) {
-						flags |= TEMPLATE_USE_IMPORT_NODE;
-					}
-
-					if (state.template.length === 1 && state.template[0] === '<!>') {
-						// special case — we can use `$.comment` instead of creating a unique template
-						body.push(b.var(id, b.call('$.comment')));
-					} else {
-						add_template(template_name, [
-							b.template([b.quasi(state.template.join(''), true)], []),
-							b.literal(flags)
-						]);
-
-						body.push(b.var(id, b.call(template_name)));
-					}
-
-					close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
-				}
-
-				body.push(...state.before_init, ...state.init);
-			}
-		} else {
-			body.push(...state.before_init, ...state.init);
-		}
-
-		if (state.update.length > 0) {
-			body.push(serialize_render_stmt(state.update));
-		}
-
-		body.push(...state.after_update);
-
-		if (close !== undefined) {
-			// It's important that close is the last statement in the block, as any previous statements
-			// could contain element insertions into the template, which the close statement needs to
-			// know of when constructing the list of current inner elements.
-			body.push(close);
-		}
-
-		return b.block(body);
-	},
-	Comment(node, context) {
-		// We'll only get here if comments are not filtered out, which they are unless preserveComments is true
-		context.state.template.push(`<!--${node.data}-->`);
-	},
-	HtmlTag(node, context) {
-		context.state.template.push('<!>');
-
-		// push into init, so that bindings run afterwards, which might trigger another run and override hydration
-		context.state.init.push(
-			b.stmt(
-				b.call(
-					'$.html',
-					context.state.node,
-					b.thunk(/** @type {Expression} */ (context.visit(node.expression))),
-					b.literal(context.state.metadata.namespace === 'svg'),
-					b.literal(context.state.metadata.namespace === 'mathml'),
-					is_ignored(node, 'hydration_html_changed') && b.true
-				)
-			)
-		);
-	},
-	ConstTag(node, { state, visit }) {
-		const declaration = node.declaration.declarations[0];
-		// TODO we can almost certainly share some code with $derived(...)
-		if (declaration.id.type === 'Identifier') {
-			state.init.push(
-				b.const(
-					declaration.id,
-					create_derived(state, b.thunk(/** @type {Expression} */ (visit(declaration.init))))
-				)
-			);
-
-			state.getters[declaration.id.name] = b.call('$.get', declaration.id);
-
-			// we need to eagerly evaluate the expression in order to hit any
-			// 'Cannot access x before initialization' errors
-			if (dev) {
-				state.init.push(b.stmt(b.call('$.get', declaration.id)));
-			}
-		} else {
-			const identifiers = extract_identifiers(declaration.id);
-			const tmp = b.id(state.scope.generate('computed_const'));
-
-			const getters = { ...state.getters };
-
-			// Make all identifiers that are declared within the following computed regular
-			// variables, as they are not signals in that context yet
-			for (const node of identifiers) {
-				getters[node.name] = node;
-			}
-
-			const child_state = { ...state, getters };
-
-			// TODO optimise the simple `{ x } = y` case — we can just return `y`
-			// instead of destructuring it only to return a new object
-			const fn = b.arrow(
-				[],
-				b.block([
-					b.const(
-						/** @type {Pattern} */ (visit(declaration.id, child_state)),
-						/** @type {Expression} */ (visit(declaration.init, child_state))
-					),
-					b.return(b.object(identifiers.map((node) => b.prop('init', node, node))))
-				])
-			);
-
-			state.init.push(b.const(tmp, create_derived(state, fn)));
-
-			// we need to eagerly evaluate the expression in order to hit any
-			// 'Cannot access x before initialization' errors
-			if (dev) {
-				state.init.push(b.stmt(b.call('$.get', tmp)));
-			}
-
-			for (const node of identifiers) {
-				state.getters[node.name] = b.member(b.call('$.get', tmp), node);
-			}
-		}
-	},
-	DebugTag(node, { state, visit }) {
-		state.init.push(
-			b.stmt(
-				b.call(
-					'$.template_effect',
-					b.thunk(
-						b.block([
-							b.stmt(
-								b.call(
-									'console.log',
-									b.object(
-										node.identifiers.map((identifier) =>
-											b.prop('init', identifier, /** @type {Expression} */ (visit(identifier)))
-										)
-									)
-								)
-							),
-							b.debugger
-						])
-					)
-				)
-			)
-		);
-	},
-	RenderTag(node, context) {
-		context.state.template.push('<!>');
-		const callee = unwrap_optional(node.expression).callee;
-		const raw_args = unwrap_optional(node.expression).arguments;
-
-		/** @type {Expression[]} */
-		let args = [];
-		for (let i = 0; i < raw_args.length; i++) {
-			const raw = raw_args[i];
-			const arg = /** @type {Expression} */ (context.visit(raw));
-			if (node.metadata.args_with_call_expression.has(i)) {
-				const id = b.id(context.state.scope.generate('render_arg'));
-				context.state.init.push(b.var(id, b.call('$.derived_safe_equal', b.thunk(arg))));
-				args.push(b.thunk(b.call('$.get', id)));
-			} else {
-				args.push(b.thunk(arg));
-			}
-		}
-
-		let snippet_function = /** @type {Expression} */ (context.visit(callee));
-
-		if (node.metadata.dynamic) {
-			context.state.init.push(
-				b.stmt(b.call('$.snippet', context.state.node, b.thunk(snippet_function), ...args))
-			);
-		} else {
-			context.state.init.push(
-				b.stmt(
-					(node.expression.type === 'CallExpression' ? b.call : b.maybe_call)(
-						snippet_function,
-						context.state.node,
-						...args
-					)
-				)
-			);
-		}
-	},
-	AnimateDirective(node, { state, visit }) {
-		const expression =
-			node.expression === null
-				? b.literal(null)
-				: b.thunk(/** @type {Expression} */ (visit(node.expression)));
-
-		// in after_update to ensure it always happens after bind:this
-		state.after_update.push(
-			b.stmt(
-				b.call(
-					'$.animation',
-					state.node,
-					b.thunk(/** @type {Expression} */ (visit(parse_directive_name(node.name)))),
-					expression
-				)
-			)
-		);
-	},
-	ClassDirective(node, { state, next }) {
-		throw new Error('Node should have been handled elsewhere');
-	},
-	StyleDirective(node, { state, next }) {
-		throw new Error('Node should have been handled elsewhere');
-	},
-	TransitionDirective(node, { state, visit }) {
-		let flags = node.modifiers.includes('global') ? TRANSITION_GLOBAL : 0;
-		if (node.intro) flags |= TRANSITION_IN;
-		if (node.outro) flags |= TRANSITION_OUT;
-
-		const args = [
-			b.literal(flags),
-			state.node,
-			b.thunk(/** @type {Expression} */ (visit(parse_directive_name(node.name))))
-		];
-
-		if (node.expression) {
-			args.push(b.thunk(/** @type {Expression} */ (visit(node.expression))));
-		}
-
-		// in after_update to ensure it always happens after bind:this
-		state.after_update.push(b.stmt(b.call('$.transition', ...args)));
-	},
-	RegularElement(node, context) {
-		/** @type {SourceLocation} */
-		let location = [-1, -1];
-
-		if (dev) {
-			const loc = locator(node.start);
-			if (loc) {
-				location[0] = loc.line;
-				location[1] = loc.column;
-				context.state.locations.push(location);
-			}
-		}
-
-		if (node.name === 'noscript') {
-			context.state.template.push('<noscript></noscript>');
-			return;
-		}
-		if (node.name === 'script') {
-			context.state.metadata.context.template_contains_script_tag = true;
-		}
-
-		const metadata = context.state.metadata;
-		const child_metadata = {
-			...context.state.metadata,
-			namespace: determine_namespace_for_children(node, context.state.metadata.namespace)
-		};
-
-		context.state.template.push(`<${node.name}`);
-
-		/** @type {Array<Attribute | SpreadAttribute>} */
-		const attributes = [];
-
-		/** @type {ClassDirective[]} */
-		const class_directives = [];
-
-		/** @type {StyleDirective[]} */
-		const style_directives = [];
-
-		/** @type {ExpressionStatement[]} */
-		const lets = [];
-
-		const is_custom_element = is_custom_element_node(node);
-		let needs_input_reset = false;
-		let needs_content_reset = false;
-
-		/** @type {BindDirective | null} */
-		let value_binding = null;
-
-		/** If true, needs `__value` for inputs */
-		let needs_special_value_handling = node.name === 'option' || node.name === 'select';
-		let is_content_editable = false;
-		let has_content_editable_binding = false;
-		let img_might_be_lazy = false;
-		let might_need_event_replaying = false;
-		let has_direction_attribute = false;
-		let has_style_attribute = false;
-
-		if (is_custom_element) {
-			// cloneNode is faster, but it does not instantiate the underlying class of the
-			// custom element until the template is connected to the dom, which would
-			// cause problems when setting properties on the custom element.
-			// Therefore we need to use importNode instead, which doesn't have this caveat.
-			metadata.context.template_needs_import_node = true;
-		}
-
-		for (const attribute of node.attributes) {
-			if (attribute.type === 'Attribute') {
-				attributes.push(attribute);
-				if (node.name === 'img' && attribute.name === 'loading') {
-					img_might_be_lazy = true;
-				}
-				if (attribute.name === 'dir') {
-					has_direction_attribute = true;
-				}
-				if (attribute.name === 'style') {
-					has_style_attribute = true;
-				}
-				if (
-					(attribute.name === 'value' || attribute.name === 'checked') &&
-					!is_text_attribute(attribute)
-				) {
-					needs_input_reset = true;
-					needs_content_reset = true;
-				} else if (
-					attribute.name === 'contenteditable' &&
-					(attribute.value === true ||
-						(is_text_attribute(attribute) && attribute.value[0].data === 'true'))
-				) {
-					is_content_editable = true;
-				}
-			} else if (attribute.type === 'SpreadAttribute') {
-				attributes.push(attribute);
-				needs_input_reset = true;
-				needs_content_reset = true;
-				if (LoadErrorElements.includes(node.name)) {
-					might_need_event_replaying = true;
-				}
-			} else if (attribute.type === 'ClassDirective') {
-				class_directives.push(attribute);
-			} else if (attribute.type === 'StyleDirective') {
-				style_directives.push(attribute);
-			} else if (attribute.type === 'LetDirective') {
-				lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
-			} else {
-				if (attribute.type === 'BindDirective') {
-					if (attribute.name === 'group' || attribute.name === 'checked') {
-						needs_special_value_handling = true;
-						needs_input_reset = true;
-					} else if (attribute.name === 'value') {
-						value_binding = attribute;
-						needs_content_reset = true;
-						needs_input_reset = true;
-					} else if (
-						attribute.name === 'innerHTML' ||
-						attribute.name === 'innerText' ||
-						attribute.name === 'textContent'
-					) {
-						has_content_editable_binding = true;
-					}
-				} else if (attribute.type === 'UseDirective' && LoadErrorElements.includes(node.name)) {
-					might_need_event_replaying = true;
-				}
-				context.visit(attribute);
-			}
-		}
-
-		if (child_metadata.namespace === 'foreign') {
-			// input/select etc could mean something completely different in foreign namespace, so don't special-case them
-			needs_content_reset = false;
-			needs_input_reset = false;
-			needs_special_value_handling = false;
-			value_binding = null;
-		}
-
-		if (is_content_editable && has_content_editable_binding) {
-			child_metadata.bound_contenteditable = true;
-		}
-
-		if (needs_input_reset && node.name === 'input') {
-			context.state.init.push(b.stmt(b.call('$.remove_input_defaults', context.state.node)));
-		}
-
-		if (needs_content_reset && node.name === 'textarea') {
-			context.state.init.push(b.stmt(b.call('$.remove_textarea_child', context.state.node)));
-		}
-
-		if (value_binding !== null && node.name === 'select') {
-			setup_select_synchronization(value_binding, context);
-		}
-
-		const node_id = context.state.node;
-
-		// Let bindings first, they can be used on attributes
-		context.state.init.push(...lets);
-
-		// Then do attributes
-		let is_attributes_reactive = false;
-		if (node.metadata.has_spread) {
-			if (node.name === 'img') {
-				img_might_be_lazy = true;
-			}
-			serialize_element_spread_attributes(
-				attributes,
-				context,
-				node,
-				node_id,
-				// If value binding exists, that one takes care of calling $.init_select
-				value_binding === null && node.name === 'select' && child_metadata.namespace !== 'foreign'
-			);
-			is_attributes_reactive = true;
-		} else {
-			for (const attribute of /** @type {Attribute[]} */ (attributes)) {
-				if (is_event_attribute(attribute)) {
-					if (
-						(attribute.name === 'onload' || attribute.name === 'onerror') &&
-						LoadErrorElements.includes(node.name)
-					) {
-						might_need_event_replaying = true;
-					}
-					serialize_event_attribute(attribute, context);
-					continue;
-				}
-
-				if (needs_special_value_handling && attribute.name === 'value') {
-					serialize_element_special_value_attribute(node.name, node_id, attribute, context);
-					continue;
-				}
-
-				if (
-					!is_custom_element &&
-					attribute.name !== 'autofocus' &&
-					(attribute.value === true || is_text_attribute(attribute))
-				) {
-					const name = get_attribute_name(node, attribute, context);
-					const literal_value = /** @type {Literal} */ (
-						serialize_attribute_value(attribute.value, context)[1]
-					).value;
-					if (name !== 'class' || literal_value) {
-						// TODO namespace=foreign probably doesn't want to do template stuff at all and instead use programmatic methods
-						// to create the elements it needs.
-						context.state.template.push(
-							` ${attribute.name}${
-								DOMBooleanAttributes.includes(name) && literal_value === true
-									? ''
-									: `="${literal_value === true ? '' : escape_html(literal_value, true)}"`
-							}`
-						);
-						continue;
-					}
-				}
-
-				const is =
-					is_custom_element && child_metadata.namespace !== 'foreign'
-						? serialize_custom_element_attribute_update_assignment(node_id, attribute, context)
-						: serialize_element_attribute_update_assignment(node, node_id, attribute, context);
-				if (is) is_attributes_reactive = true;
-			}
-		}
-
-		// Apply the src and loading attributes for <img> elements after the element is appended to the document
-		if (img_might_be_lazy) {
-			context.state.after_update.push(b.stmt(b.call('$.handle_lazy_img', node_id)));
-		}
-
-		// class/style directives must be applied last since they could override class/style attributes
-		serialize_class_directives(class_directives, node_id, context, is_attributes_reactive);
-		serialize_style_directives(
-			style_directives,
-			node_id,
-			context,
-			is_attributes_reactive,
-			has_style_attribute || node.metadata.has_spread
-		);
-
-		if (might_need_event_replaying) {
-			context.state.after_update.push(b.stmt(b.call('$.replay_events', node_id)));
-		}
-
-		context.state.template.push('>');
-
-		/** @type {SourceLocation[]} */
-		const child_locations = [];
-
-		/** @type {ComponentClientTransformState} */
-		const state = {
-			...context.state,
-			metadata: child_metadata,
-			locations: child_locations,
-			scope: /** @type {Scope} */ (context.state.scopes.get(node.fragment)),
-			preserve_whitespace:
-				context.state.preserve_whitespace ||
-				((node.name === 'pre' || node.name === 'textarea') &&
-					child_metadata.namespace !== 'foreign')
-		};
-
-		const { hoisted, trimmed } = clean_nodes(
-			node,
-			node.fragment.nodes,
-			context.path,
-			child_metadata.namespace,
-			state,
-			node.name === 'script' || state.preserve_whitespace,
-			state.options.preserveComments
-		);
-
-		/** Whether or not we need to wrap the children in `{...}` to avoid declaration conflicts */
-		const has_declaration = node.fragment.nodes.some((node) => node.type === 'SnippetBlock');
-
-		const child_state = has_declaration
-			? { ...state, init: [], update: [], after_update: [] }
-			: state;
-
-		for (const node of hoisted) {
-			context.visit(node, child_state);
-		}
-
-		/** @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');
-
-		// The same applies if it's a `<template>` element, since we need to
-		// set the value of `hydrate_node` to `node.content`
-		if (node.name === 'template') {
-			needs_reset = true;
-
-			arg = b.member(arg, b.id('content'));
-			child_state.init.push(b.stmt(b.call('$.reset', arg)));
-		}
-
-		process_children(trimmed, () => b.call('$.child', arg), true, {
-			...context,
-			state: child_state
-		});
-
-		if (needs_reset) {
-			child_state.init.push(b.stmt(b.call('$.reset', context.state.node)));
-		}
-
-		if (has_declaration) {
-			context.state.init.push(
-				b.block([
-					...child_state.init,
-					child_state.update.length > 0 ? serialize_render_stmt(child_state.update) : b.empty,
-					...child_state.after_update
-				])
-			);
-		}
-
-		if (has_direction_attribute) {
-			// This fixes an issue with Chromium where updates to text content within an element
-			// does not update the direction when set to auto. If we just re-assign the dir, this fixes it.
-			context.state.update.push(
-				b.stmt(b.assignment('=', b.member(node_id, b.id('dir')), b.member(node_id, b.id('dir'))))
-			);
-		}
-
-		if (child_locations.length > 0) {
-			// @ts-expect-error
-			location.push(child_locations);
-		}
-
-		if (!VoidElements.includes(node.name)) {
-			context.state.template.push(`</${node.name}>`);
-		}
-	},
-	SvelteElement(node, context) {
-		context.state.template.push(`<!>`);
-
-		/** @type {Array<Attribute | SpreadAttribute>} */
-		const attributes = [];
-
-		/** @type {Attribute['value'] | undefined} */
-		let dynamic_namespace = undefined;
-
-		/** @type {ClassDirective[]} */
-		const class_directives = [];
-
-		/** @type {StyleDirective[]} */
-		const style_directives = [];
-
-		/** @type {ExpressionStatement[]} */
-		const lets = [];
-
-		// Create a temporary context which picks up the init/update statements.
-		// They'll then be added to the function parameter of $.element
-		const element_id = b.id(context.state.scope.generate('$$element'));
-
-		/** @type {ComponentContext} */
-		const inner_context = {
-			...context,
-			state: {
-				...context.state,
-				node: element_id,
-				before_init: [],
-				init: [],
-				update: [],
-				after_update: []
-			}
-		};
-
-		for (const attribute of node.attributes) {
-			if (attribute.type === 'Attribute') {
-				if (attribute.name === 'xmlns' && !is_text_attribute(attribute)) {
-					dynamic_namespace = attribute.value;
-				}
-				attributes.push(attribute);
-			} else if (attribute.type === 'SpreadAttribute') {
-				attributes.push(attribute);
-			} else if (attribute.type === 'ClassDirective') {
-				class_directives.push(attribute);
-			} else if (attribute.type === 'StyleDirective') {
-				style_directives.push(attribute);
-			} else if (attribute.type === 'LetDirective') {
-				lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
-			} else {
-				context.visit(attribute, inner_context.state);
-			}
-		}
-
-		// Let bindings first, they can be used on attributes
-		context.state.init.push(...lets); // create computeds in the outer context; the dynamic element is the single child of this slot
-
-		// Then do attributes
-		// Always use spread because we don't know whether the element is a custom element or not,
-		// therefore we need to do the "how to set an attribute" logic at runtime.
-		const is_attributes_reactive =
-			serialize_dynamic_element_attributes(attributes, inner_context, element_id) !== null;
-
-		// class/style directives must be applied last since they could override class/style attributes
-		serialize_class_directives(class_directives, element_id, inner_context, is_attributes_reactive);
-		serialize_style_directives(
-			style_directives,
-			element_id,
-			inner_context,
-			is_attributes_reactive,
-			true
-		);
-
-		const get_tag = b.thunk(/** @type {Expression} */ (context.visit(node.tag)));
-
-		if (dev && context.state.metadata.namespace !== 'foreign') {
-			if (node.fragment.nodes.length > 0) {
-				context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', get_tag)));
-			}
-			context.state.init.push(b.stmt(b.call('$.validate_dynamic_element_tag', get_tag)));
-		}
-
-		/** @type {Statement[]} */
-		const inner = inner_context.state.init;
-		if (inner_context.state.update.length > 0) {
-			inner.push(serialize_render_stmt(inner_context.state.update));
-		}
-		inner.push(...inner_context.state.after_update);
-		inner.push(
-			.../** @type {BlockStatement} */ (
-				context.visit(node.fragment, {
-					...context.state,
-					metadata: {
-						...context.state.metadata,
-						namespace: determine_namespace_for_children(node, context.state.metadata.namespace)
-					}
-				})
-			).body
-		);
-
-		const location = dev && locator(node.start);
-
-		context.state.init.push(
-			b.stmt(
-				b.call(
-					'$.element',
-					context.state.node,
-					get_tag,
-					node.metadata.svg || node.metadata.mathml ? b.true : b.false,
-					inner.length > 0 && b.arrow([element_id, b.id('$$anchor')], b.block(inner)),
-					dynamic_namespace && b.thunk(serialize_attribute_value(dynamic_namespace, context)[1]),
-					location && b.array([b.literal(location.line), b.literal(location.column)])
-				)
-			)
-		);
-	},
-	EachBlock(node, context) {
-		const each_node_meta = node.metadata;
-		const collection = /** @type {Expression} */ (context.visit(node.expression));
-
-		if (!each_node_meta.is_controlled) {
-			context.state.template.push('<!>');
-		}
-
-		if (each_node_meta.array_name !== null) {
-			context.state.init.push(b.const(each_node_meta.array_name, b.thunk(collection)));
-		}
-
-		let flags = 0;
-
-		if (node.metadata.keyed) {
-			flags |= EACH_KEYED;
-
-			if (node.index) {
-				flags |= EACH_INDEX_REACTIVE;
-			}
-
-			// In runes mode, if key === item, we don't need to wrap the item in a source
-			const key_is_item =
-				/** @type {Expression} */ (node.key).type === 'Identifier' &&
-				node.context.type === 'Identifier' &&
-				node.context.name === node.key.name;
-
-			if (!context.state.analysis.runes || !key_is_item) {
-				flags |= EACH_ITEM_REACTIVE;
-			}
-		} else {
-			flags |= EACH_ITEM_REACTIVE;
-		}
-
-		// Since `animate:` can only appear on elements that are the sole child of a keyed each block,
-		// we can determine at compile time whether the each block is animated or not (in which
-		// case it should measure animated elements before and after reconciliation).
-		if (
-			node.key &&
-			node.body.nodes.some((child) => {
-				if (child.type !== 'RegularElement' && child.type !== 'SvelteElement') return false;
-				return child.attributes.some((attr) => attr.type === 'AnimateDirective');
-			})
-		) {
-			flags |= EACH_IS_ANIMATED;
-		}
-
-		if (each_node_meta.is_controlled) {
-			flags |= EACH_IS_CONTROLLED;
-		}
-
-		if (context.state.analysis.runes) {
-			flags |= EACH_IS_STRICT_EQUALS;
-		}
-
-		// If the array is a store expression, we need to invalidate it when the array is changed.
-		// This doesn't catch all cases, but all the ones that Svelte 4 catches, too.
-		let store_to_invalidate = '';
-		if (node.expression.type === 'Identifier' || node.expression.type === 'MemberExpression') {
-			const id = object(node.expression);
-			if (id) {
-				const binding = context.state.scope.get(id.name);
-				if (binding?.kind === 'store_sub') {
-					store_to_invalidate = id.name;
-				}
-			}
-		}
-
-		// Legacy mode: find the parent each blocks which contain the arrays to invalidate
-		const indirect_dependencies = collect_parent_each_blocks(context).flatMap((block) => {
-			const array = /** @type {Expression} */ (context.visit(block.expression));
-			const transitive_dependencies = serialize_transitive_dependencies(
-				block.metadata.references,
-				context
-			);
-			return [array, ...transitive_dependencies];
-		});
-
-		if (each_node_meta.array_name) {
-			indirect_dependencies.push(b.call(each_node_meta.array_name));
-		} else {
-			indirect_dependencies.push(collection);
-
-			const transitive_dependencies = serialize_transitive_dependencies(
-				each_node_meta.references,
-				context
-			);
-			indirect_dependencies.push(...transitive_dependencies);
-		}
-
-		const child_state = {
-			...context.state,
-			getters: { ...context.state.getters }
-		};
-
-		/** The state used when generating the key function, if necessary */
-		const key_state = {
-			...context.state,
-			getters: { ...context.state.getters }
-		};
-
-		/**
-		 * @param {Pattern} expression_for_id
-		 * @returns {Binding['mutation']}
-		 */
-		const create_mutation = (expression_for_id) => {
-			return (assignment, context) => {
-				if (assignment.left.type !== 'Identifier' && assignment.left.type !== 'MemberExpression') {
-					// serialize_set_binding turns other patterns into IIFEs and separates the assignments
-					// into separate expressions, at which point this is called again with an identifier or member expression
-					return serialize_set_binding(assignment, context, () => assignment);
-				}
-
-				const left = object(assignment.left);
-				const value = get_assignment_value(assignment, context);
-				const invalidate = b.call(
-					'$.invalidate_inner_signals',
-					b.thunk(b.sequence(indirect_dependencies))
-				);
-				const invalidate_store = store_to_invalidate
-					? b.call('$.invalidate_store', b.id('$$stores'), b.literal(store_to_invalidate))
-					: undefined;
-
-				const sequence = [];
-				if (!context.state.analysis.runes) sequence.push(invalidate);
-				if (invalidate_store) sequence.push(invalidate_store);
-
-				if (left === assignment.left) {
-					const assign = b.assignment('=', expression_for_id, value);
-					sequence.unshift(assign);
-					return b.sequence(sequence);
-				} else {
-					const original_left = /** @type {MemberExpression} */ (assignment.left);
-					const left = context.visit(original_left);
-					const assign = b.assignment(assignment.operator, left, value);
-					sequence.unshift(assign);
-					return b.sequence(sequence);
-				}
-			};
-		};
-
-		// We need to generate a unique identifier in case there's a bind:group below
-		// which needs a reference to the index
-		const index =
-			each_node_meta.contains_group_binding || !node.index
-				? each_node_meta.index
-				: b.id(node.index);
-		const item = each_node_meta.item;
-		const binding = /** @type {Binding} */ (context.state.scope.get(item.name));
-		const getter = (/** @type {Identifier} */ id) => {
-			const item_with_loc = with_loc(item, id);
-			return b.call('$.unwrap', item_with_loc);
-		};
-		child_state.getters[item.name] = getter;
-
-		if (node.index) {
-			child_state.getters[node.index] = (id) => {
-				const index_with_loc = with_loc(index, id);
-				return (flags & EACH_INDEX_REACTIVE) === 0
-					? index_with_loc
-					: b.call('$.get', index_with_loc);
-			};
-
-			key_state.getters[node.index] = b.id(node.index);
-		}
-
-		/** @type {Statement[]} */
-		const declarations = [];
-
-		if (node.context.type === 'Identifier') {
-			binding.mutation = create_mutation(
-				b.member(
-					each_node_meta.array_name ? b.call(each_node_meta.array_name) : collection,
-					index,
-					true
-				)
-			);
-
-			key_state.getters[node.context.name] = node.context;
-		} else {
-			const unwrapped = getter(binding.node);
-			const paths = extract_paths(node.context);
-
-			for (const path of paths) {
-				const name = /** @type {Identifier} */ (path.node).name;
-				const binding = /** @type {Binding} */ (context.state.scope.get(name));
-				const needs_derived = path.has_default_value; // to ensure that default value is only called once
-				const fn = b.thunk(
-					/** @type {Expression} */ (context.visit(path.expression?.(unwrapped), child_state))
-				);
-
-				declarations.push(
-					b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn)
-				);
-
-				const getter = needs_derived ? b.call('$.get', b.id(name)) : b.call(name);
-				child_state.getters[name] = getter;
-				binding.mutation = create_mutation(
-					/** @type {Pattern} */ (path.update_expression(unwrapped))
-				);
-
-				// we need to eagerly evaluate the expression in order to hit any
-				// 'Cannot access x before initialization' errors
-				if (dev) {
-					declarations.push(b.stmt(getter));
-				}
-
-				key_state.getters[name] = path.node;
-			}
-		}
-
-		const block = /** @type {BlockStatement} */ (context.visit(node.body, child_state));
-
-		/** @type {Expression} */
-		let key_function = b.id('$.index');
-
-		if (node.metadata.keyed) {
-			const expression = /** @type {Expression} */ (
-				context.visit(/** @type {Expression} */ (node.key), key_state)
-			);
-
-			key_function = b.arrow([node.context, index], expression);
-		}
-
-		if (node.index && each_node_meta.contains_group_binding) {
-			// We needed to create a unique identifier for the index above, but we want to use the
-			// original index name in the template, therefore create another binding
-			declarations.push(b.let(node.index, index));
-		}
-
-		if (dev && (flags & EACH_KEYED) !== 0) {
-			context.state.init.push(
-				b.stmt(b.call('$.validate_each_keys', b.thunk(collection), key_function))
-			);
-		}
-
-		/** @type {Expression[]} */
-		const args = [
-			context.state.node,
-			b.literal(flags),
-			each_node_meta.array_name ? each_node_meta.array_name : b.thunk(collection),
-			key_function,
-			b.arrow([b.id('$$anchor'), item, index], b.block(declarations.concat(block.body)))
-		];
-
-		if (node.fallback) {
-			args.push(
-				b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.fallback)))
-			);
-		}
-
-		context.state.init.push(b.stmt(b.call('$.each', ...args)));
-	},
-	IfBlock(node, context) {
-		context.state.template.push('<!>');
-
-		const consequent = /** @type {BlockStatement} */ (context.visit(node.consequent));
-
-		const args = [
-			context.state.node,
-			b.thunk(/** @type {Expression} */ (context.visit(node.test))),
-			b.arrow([b.id('$$anchor')], consequent)
-		];
-
-		if (node.alternate || node.elseif) {
-			args.push(
-				node.alternate
-					? b.arrow(
-							[b.id('$$anchor')],
-							/** @type {BlockStatement} */ (context.visit(node.alternate))
-						)
-					: b.literal(null)
-			);
-		}
-
-		if (node.elseif) {
-			// We treat this...
-			//
-			//   {#if x}
-			//     ...
-			//   {:else}
-			//     {#if y}
-			//       <div transition:foo>...</div>
-			//     {/if}
-			//   {/if}
-			//
-			// ...slightly differently to this...
-			//
-			//   {#if x}
-			//     ...
-			//   {:else if y}
-			//     <div transition:foo>...</div>
-			//   {/if}
-			//
-			// ...even though they're logically equivalent. In the first case, the
-			// transition will only play when `y` changes, but in the second it
-			// should play when `x` or `y` change — both are considered 'local'
-			args.push(b.literal(true));
-		}
-
-		context.state.init.push(b.stmt(b.call('$.if', ...args)));
-	},
-	AwaitBlock(node, context) {
-		context.state.template.push('<!>');
-
-		let then_block;
-		let catch_block;
-
-		if (node.then) {
-			/** @type {Pattern[]} */
-			const args = [b.id('$$anchor')];
-			const block = /** @type {BlockStatement} */ (context.visit(node.then));
-
-			if (node.value) {
-				const argument = create_derived_block_argument(node.value, context);
-
-				args.push(argument.id);
-
-				if (argument.declarations !== null) {
-					block.body.unshift(...argument.declarations);
-				}
-			}
-
-			then_block = b.arrow(args, block);
-		}
-
-		if (node.catch) {
-			/** @type {Pattern[]} */
-			const args = [b.id('$$anchor')];
-			const block = /** @type {BlockStatement} */ (context.visit(node.catch));
-
-			if (node.error) {
-				const argument = create_derived_block_argument(node.error, context);
-
-				args.push(argument.id);
-
-				if (argument.declarations !== null) {
-					block.body.unshift(...argument.declarations);
-				}
-			}
-
-			catch_block = b.arrow(args, block);
-		}
-
-		context.state.init.push(
-			b.stmt(
-				b.call(
-					'$.await',
-					context.state.node,
-					b.thunk(/** @type {Expression} */ (context.visit(node.expression))),
-					node.pending
-						? b.arrow(
-								[b.id('$$anchor')],
-								/** @type {BlockStatement} */ (context.visit(node.pending))
-							)
-						: b.literal(null),
-					then_block,
-					catch_block
-				)
-			)
-		);
-	},
-	KeyBlock(node, context) {
-		context.state.template.push('<!>');
-		const key = /** @type {Expression} */ (context.visit(node.expression));
-		const body = /** @type {Expression} */ (context.visit(node.fragment));
-		context.state.init.push(
-			b.stmt(b.call('$.key', context.state.node, b.thunk(key), b.arrow([b.id('$$anchor')], body)))
-		);
-	},
-	SnippetBlock(node, context) {
-		// TODO hoist where possible
-		/** @type {Pattern[]} */
-		const args = [b.id('$$anchor')];
-
-		/** @type {BlockStatement} */
-		let body;
-
-		/** @type {Statement[]} */
-		const declarations = [];
-
-		const getters = { ...context.state.getters };
-		const child_state = { ...context.state, getters };
-
-		for (let i = 0; i < node.parameters.length; i++) {
-			const argument = node.parameters[i];
-
-			if (!argument) continue;
-
-			if (argument.type === 'Identifier') {
-				args.push({
-					type: 'AssignmentPattern',
-					left: argument,
-					right: b.id('$.noop')
-				});
-
-				getters[argument.name] = b.call(argument);
-				continue;
-			}
-
-			let arg_alias = `$$arg${i}`;
-			args.push(b.id(arg_alias));
-
-			const paths = extract_paths(argument);
-
-			for (const path of paths) {
-				const name = /** @type {Identifier} */ (path.node).name;
-				const binding = /** @type {Binding} */ (context.state.scope.get(name));
-				const needs_derived = path.has_default_value; // to ensure that default value is only called once
-				const fn = b.thunk(
-					/** @type {Expression} */ (
-						context.visit(path.expression?.(b.maybe_call(b.id(arg_alias))))
-					)
-				);
-
-				declarations.push(
-					b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn)
-				);
-
-				getters[name] = needs_derived ? b.call('$.get', b.id(name)) : b.call(name);
-
-				// we need to eagerly evaluate the expression in order to hit any
-				// 'Cannot access x before initialization' errors
-				if (dev) {
-					declarations.push(b.stmt(getters[name]));
-				}
-			}
-		}
-
-		body = b.block([
-			...declarations,
-			.../** @type {BlockStatement} */ (context.visit(node.body, child_state)).body
-		]);
-
-		/** @type {Expression} */
-		let snippet = b.arrow(args, body);
-
-		if (dev) {
-			snippet = b.call('$.wrap_snippet', b.id(context.state.analysis.name), snippet);
-		}
-
-		const declaration = b.const(node.expression, snippet);
-
-		// Top-level snippets are hoisted so they can be referenced in the `<script>`
-		if (context.path.length === 1 && context.path[0].type === 'Fragment') {
-			context.state.analysis.top_level_snippets.push(declaration);
-		} else {
-			context.state.init.push(declaration);
-		}
-	},
-	FunctionExpression: function_visitor,
-	ArrowFunctionExpression: function_visitor,
-	FunctionDeclaration(node, context) {
-		context.next({ ...context.state, in_constructor: false });
-	},
-	OnDirective(node, context) {
-		serialize_event(node, node.metadata.expression, context);
-	},
-	UseDirective(node, { state, next, visit }) {
-		const params = [b.id('$$node')];
-
-		if (node.expression) {
-			params.push(b.id('$$action_arg'));
-		}
-
-		/** @type {Expression[]} */
-		const args = [
-			state.node,
-			b.arrow(
-				params,
-				b.call(/** @type {Expression} */ (visit(parse_directive_name(node.name))), ...params)
-			)
-		];
-
-		if (node.expression) {
-			args.push(b.thunk(/** @type {Expression} */ (visit(node.expression))));
-		}
-
-		// actions need to run after attribute updates in order with bindings/events
-		state.after_update.push(b.stmt(b.call('$.action', ...args)));
-		next();
-	},
-	BindDirective(node, context) {
-		const { state, path, visit } = context;
-		const expression = node.expression;
-		const property = binding_properties[node.name];
-
-		if (
-			expression.type === 'MemberExpression' &&
-			(node.name !== 'this' ||
-				path.some(
-					({ type }) =>
-						type === 'IfBlock' ||
-						type === 'EachBlock' ||
-						type === 'AwaitBlock' ||
-						type === 'KeyBlock'
-				)) &&
-			dev &&
-			context.state.analysis.runes &&
-			!is_ignored(node, 'binding_property_non_reactive')
-		) {
-			context.state.init.push(
-				serialize_validate_binding(
-					context.state,
-					node,
-					/**@type {MemberExpression} */ (visit(expression))
-				)
-			);
-		}
-
-		const getter = b.thunk(/** @type {Expression} */ (visit(expression)));
-		const assignment = b.assignment('=', expression, b.id('$$value'));
-		const setter = b.arrow(
-			[b.id('$$value')],
-			serialize_set_binding(
-				assignment,
-				context,
-				() => /** @type {Expression} */ (visit(assignment)),
-				null,
-				{
-					skip_proxy_and_freeze: true
-				}
-			)
-		);
-
-		/** @type {CallExpression} */
-		let call_expr;
-
-		if (property?.event) {
-			call_expr = b.call(
-				'$.bind_property',
-				b.literal(node.name),
-				b.literal(property.event),
-				state.node,
-				setter,
-				property.bidirectional && getter
-			);
-		} else {
-			// special cases
-			switch (node.name) {
-				// window
-				case 'online':
-					call_expr = b.call(`$.bind_online`, setter);
-					break;
-
-				case 'scrollX':
-				case 'scrollY':
-					call_expr = b.call(
-						'$.bind_window_scroll',
-						b.literal(node.name === 'scrollX' ? 'x' : 'y'),
-						getter,
-						setter
-					);
-					break;
-
-				case 'innerWidth':
-				case 'innerHeight':
-				case 'outerWidth':
-				case 'outerHeight':
-					call_expr = b.call('$.bind_window_size', b.literal(node.name), setter);
-					break;
-
-				// document
-				case 'activeElement':
-					call_expr = b.call('$.bind_active_element', setter);
-					break;
-
-				// media
-				case 'muted':
-					call_expr = b.call(`$.bind_muted`, state.node, getter, setter);
-					break;
-				case 'paused':
-					call_expr = b.call(`$.bind_paused`, state.node, getter, setter);
-					break;
-				case 'volume':
-					call_expr = b.call(`$.bind_volume`, state.node, getter, setter);
-					break;
-				case 'playbackRate':
-					call_expr = b.call(`$.bind_playback_rate`, state.node, getter, setter);
-					break;
-				case 'currentTime':
-					call_expr = b.call(`$.bind_current_time`, state.node, getter, setter);
-					break;
-				case 'buffered':
-					call_expr = b.call(`$.bind_buffered`, state.node, setter);
-					break;
-				case 'played':
-					call_expr = b.call(`$.bind_played`, state.node, setter);
-					break;
-				case 'seekable':
-					call_expr = b.call(`$.bind_seekable`, state.node, setter);
-					break;
-				case 'seeking':
-					call_expr = b.call(`$.bind_seeking`, state.node, setter);
-					break;
-				case 'ended':
-					call_expr = b.call(`$.bind_ended`, state.node, setter);
-					break;
-				case 'readyState':
-					call_expr = b.call(`$.bind_ready_state`, state.node, setter);
-					break;
-
-				// dimensions
-				case 'contentRect':
-				case 'contentBoxSize':
-				case 'borderBoxSize':
-				case 'devicePixelContentBoxSize':
-					call_expr = b.call('$.bind_resize_observer', state.node, b.literal(node.name), setter);
-					break;
-
-				case 'clientWidth':
-				case 'clientHeight':
-				case 'offsetWidth':
-				case 'offsetHeight':
-					call_expr = b.call('$.bind_element_size', state.node, b.literal(node.name), setter);
-					break;
-
-				// various
-				case 'value': {
-					const parent = path.at(-1);
-					if (parent?.type === 'RegularElement' && parent.name === 'select') {
-						call_expr = b.call(`$.bind_select_value`, state.node, getter, setter);
-					} else {
-						call_expr = b.call(`$.bind_value`, state.node, getter, setter);
-					}
-					break;
-				}
-
-				case 'files':
-					call_expr = b.call(`$.bind_files`, state.node, getter, setter);
-					break;
-
-				case 'this':
-					call_expr = serialize_bind_this(node.expression, state.node, context);
-					break;
-				case 'textContent':
-				case 'innerHTML':
-				case 'innerText':
-					call_expr = b.call(
-						'$.bind_content_editable',
-						b.literal(node.name),
-						state.node,
-						getter,
-						setter
-					);
-					break;
-
-				// checkbox/radio
-				case 'checked':
-					call_expr = b.call(`$.bind_checked`, state.node, getter, setter);
-					break;
-				case 'focused':
-					call_expr = b.call(`$.bind_focused`, state.node, setter);
-					break;
-				case 'group': {
-					const indexes = node.metadata.parent_each_blocks.map((each) => {
-						// if we have a keyed block with an index, the index is wrapped in a source
-						return each.metadata.keyed && each.index
-							? b.call('$.get', each.metadata.index)
-							: each.metadata.index;
-					});
-
-					// We need to additionally invoke the value attribute signal to register it as a dependency,
-					// so that when the value is updated, the group binding is updated
-					let group_getter = getter;
-					const parent = path.at(-1);
-					if (parent?.type === 'RegularElement') {
-						const value = /** @type {any[]} */ (
-							/** @type {Attribute} */ (
-								parent.attributes.find(
-									(a) =>
-										a.type === 'Attribute' &&
-										a.name === 'value' &&
-										!is_text_attribute(a) &&
-										a.value !== true
-								)
-							)?.value
-						);
-						if (value !== undefined) {
-							group_getter = b.thunk(
-								b.block([
-									b.stmt(serialize_attribute_value(value, context)[1]),
-									b.return(/** @type {Expression} */ (visit(expression)))
-								])
-							);
-						}
-					}
-
-					call_expr = b.call(
-						'$.bind_group',
-						node.metadata.binding_group_name,
-						b.array(indexes),
-						state.node,
-						group_getter,
-						setter
-					);
-					break;
-				}
-
-				default:
-					throw new Error('unknown binding ' + node.name);
-			}
-		}
-
-		const parent = /** @type {import('#compiler').SvelteNode} */ (context.path.at(-1));
-
-		// Bindings need to happen after attribute updates, therefore after the render effect, and in order with events/actions.
-		// bind:this is a special case as it's one-way and could influence the render effect.
-		if (node.name === 'this') {
-			state.init.push(b.stmt(call_expr));
-		} else {
-			const has_action_directive =
-				parent.type === 'RegularElement' &&
-				parent.attributes.find((a) => a.type === 'UseDirective');
-			state.after_update.push(
-				b.stmt(has_action_directive ? b.call('$.effect', b.thunk(call_expr)) : call_expr)
-			);
-		}
-	},
-	Component(node, context) {
-		if (node.metadata.dynamic) {
-			// Handle dynamic references to what seems like static inline components
-			const component = serialize_inline_component(node, '$$component', context, b.id('$$anchor'));
-			context.state.init.push(
-				b.stmt(
-					b.call(
-						'$.component',
-						context.state.node,
-						// TODO use untrack here to not update when binding changes?
-						// Would align with Svelte 4 behavior, but it's arguably nicer/expected to update this
-						b.thunk(/** @type {Expression} */ (context.visit(b.member_id(node.name)))),
-						b.arrow([b.id('$$anchor'), b.id('$$component')], b.block([component]))
-					)
-				)
-			);
-			return;
-		}
-
-		const component = serialize_inline_component(node, node.name, context);
-		context.state.init.push(component);
-	},
-	SvelteSelf(node, context) {
-		const component = serialize_inline_component(node, context.state.analysis.name, context);
-		context.state.init.push(component);
-	},
-	SvelteComponent(node, context) {
-		let component = serialize_inline_component(node, '$$component', context);
-
-		context.state.init.push(component);
-	},
-	Attribute(node, context) {
-		if (is_event_attribute(node)) {
-			serialize_event_attribute(node, context);
-		}
-	},
-	LetDirective(node, { state }) {
-		// let:x        -->  const x = $.derived(() => $$slotProps.x);
-		// let:x={{y, z}}  -->  const derived_x = $.derived(() => { const { y, z } = $$slotProps.x; return { y, z }));
-		if (node.expression && node.expression.type !== 'Identifier') {
-			const name = state.scope.generate(node.name);
-			const bindings = state.scope.get_bindings(node);
-
-			for (const binding of bindings) {
-				state.getters[binding.node.name] = b.member(
-					b.call('$.get', b.id(name)),
-					b.id(binding.node.name)
-				);
-			}
-
-			return b.const(
-				name,
-				b.call(
-					'$.derived',
-					b.thunk(
-						b.block([
-							b.let(
-								/** @type {Expression} */ (node.expression).type === 'ObjectExpression'
-									? // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
-										b.object_pattern(node.expression.properties)
-									: // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
-										b.array_pattern(node.expression.elements),
-								b.member(b.id('$$slotProps'), b.id(node.name))
-							),
-							b.return(b.object(bindings.map((binding) => b.init(binding.node.name, binding.node))))
-						])
-					)
-				)
-			);
-		} else {
-			const name = node.expression === null ? node.name : node.expression.name;
-			return b.const(
-				name,
-				create_derived(state, b.thunk(b.member(b.id('$$slotProps'), b.id(node.name))))
-			);
-		}
-	},
-	SpreadAttribute(node, { visit }) {
-		return visit(node.expression);
-	},
-	SvelteFragment(node, context) {
-		/** @type {Statement[]} */
-		const lets = [];
-
-		for (const attribute of node.attributes) {
-			if (attribute.type === 'LetDirective') {
-				lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
-			}
-		}
-
-		context.state.init.push(...lets);
-		context.state.init.push(.../** @type {BlockStatement} */ (context.visit(node.fragment)).body);
-	},
-	SlotElement(node, context) {
-		// <slot {a}>fallback</slot>  -->   $.slot($$slots.default, { get a() { .. } }, () => ...fallback);
-		context.state.template.push('<!>');
-
-		/** @type {Property[]} */
-		const props = [];
-
-		/** @type {Expression[]} */
-		const spreads = [];
-
-		/** @type {ExpressionStatement[]} */
-		const lets = [];
-
-		let is_default = true;
-
-		/** @type {Expression} */
-		let name = b.literal('default');
-
-		for (const attribute of node.attributes) {
-			if (attribute.type === 'SpreadAttribute') {
-				spreads.push(b.thunk(/** @type {Expression} */ (context.visit(attribute))));
-			} else if (attribute.type === 'Attribute') {
-				const [, value] = serialize_attribute_value(attribute.value, context);
-				if (attribute.name === 'name') {
-					name = value;
-					is_default = false;
-				} else if (attribute.name !== 'slot') {
-					if (attribute.metadata.expression.has_state) {
-						props.push(b.get(attribute.name, [b.return(value)]));
-					} else {
-						props.push(b.init(attribute.name, value));
-					}
-				}
-			} else if (attribute.type === 'LetDirective') {
-				lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
-			}
-		}
-
-		// Let bindings first, they can be used on attributes
-		context.state.init.push(...lets);
-
-		const props_expression =
-			spreads.length === 0
-				? b.object(props)
-				: b.call('$.spread_props', b.object(props), ...spreads);
-
-		const fallback =
-			node.fragment.nodes.length === 0
-				? b.literal(null)
-				: b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.fragment)));
-
-		const expression = is_default
-			? b.call('$.default_slot', b.id('$$props'))
-			: b.member(b.member(b.id('$$props'), b.id('$$slots')), name, true, true);
-
-		const slot = b.call('$.slot', context.state.node, expression, props_expression, fallback);
-		context.state.init.push(b.stmt(slot));
-	},
-	SvelteHead(node, context) {
-		// TODO attributes?
-		context.state.init.push(
-			b.stmt(
-				b.call(
-					'$.head',
-					b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.fragment)))
-				)
-			)
-		);
-	},
-	TitleElement(node, { state, visit }) {
-		// TODO throw validation error when attributes present / when children something else than text/expression tags
-		if (node.fragment.nodes.length === 1 && node.fragment.nodes[0].type === 'Text') {
-			state.init.push(
-				b.stmt(
-					b.assignment(
-						'=',
-						b.member(b.id('$.document'), b.id('title')),
-						b.literal(/** @type {Text} */ (node.fragment.nodes[0]).data)
-					)
-				)
-			);
-		} else {
-			state.update.push(
-				b.stmt(
-					b.assignment(
-						'=',
-						b.member(b.id('$.document'), b.id('title')),
-						serialize_template_literal(/** @type {any} */ (node.fragment.nodes), visit, state)[1]
-					)
-				)
-			);
-		}
-	},
-	SvelteBody(node, context) {
-		context.next({
-			...context.state,
-			node: b.id('$.document.body')
-		});
-	},
-	SvelteWindow(node, context) {
-		context.next({
-			...context.state,
-			node: b.id('$.window')
-		});
-	},
-	SvelteDocument(node, context) {
-		context.next({
-			...context.state,
-			node: b.id('$.document')
-		});
-	},
-	CallExpression: javascript_visitors_runes.CallExpression,
-	VariableDeclaration: javascript_visitors_runes.VariableDeclaration
-};
-
-/**
- * @param {ComponentClientTransformState} state
- * @param {BindDirective} binding
- * @param {MemberExpression} expression
- */
-function serialize_validate_binding(state, binding, expression) {
-	const string = state.analysis.source.slice(binding.start, binding.end);
-
-	const get_object = b.thunk(/** @type {Expression} */ (expression.object));
-	const get_property = b.thunk(
-		/** @type {Expression} */ (
-			expression.computed
-				? expression.property
-				: b.literal(/** @type {Identifier} */ (expression.property).name)
-		)
-	);
-
-	const loc = locator(binding.start);
-
-	return b.stmt(
-		b.call(
-			'$.validate_binding',
-			b.literal(string),
-			get_object,
-			get_property,
-			loc && b.literal(loc.line),
-			loc && b.literal(loc.column)
-		)
-	);
-}
diff --git a/packages/svelte/src/compiler/phases/3-transform/index.js b/packages/svelte/src/compiler/phases/3-transform/index.js
index 00ecdb395f..478be63041 100644
--- a/packages/svelte/src/compiler/phases/3-transform/index.js
+++ b/packages/svelte/src/compiler/phases/3-transform/index.js
@@ -30,7 +30,7 @@ export function transform_component(analysis, source, options) {
 	const program =
 		options.generate === 'server'
 			? server_component(analysis, options)
-			: client_component(source, analysis, options);
+			: client_component(analysis, options);
 
 	const js_source_name = get_source_name(options.filename, options.outputFilename, 'input.svelte');
 	const js = print(program, {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
index 70d8c6c8be..0c600b3cbb 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
@@ -11,20 +11,20 @@ import { render_stylesheet } from '../css/index.js';
 import { AssignmentExpression } from './visitors/AssignmentExpression.js';
 import { AwaitBlock } from './visitors/AwaitBlock.js';
 import { CallExpression } from './visitors/CallExpression.js';
-import { ClassBodyRunes } from './visitors/ClassBody.js';
+import { ClassBody } from './visitors/ClassBody.js';
 import { Component } from './visitors/Component.js';
 import { ConstTag } from './visitors/ConstTag.js';
 import { DebugTag } from './visitors/DebugTag.js';
 import { EachBlock } from './visitors/EachBlock.js';
-import { ExpressionStatementRunes } from './visitors/ExpressionStatement.js';
+import { ExpressionStatement } from './visitors/ExpressionStatement.js';
 import { Fragment } from './visitors/Fragment.js';
 import { HtmlTag } from './visitors/HtmlTag.js';
 import { Identifier } from './visitors/Identifier.js';
 import { IfBlock } from './visitors/IfBlock.js';
 import { KeyBlock } from './visitors/KeyBlock.js';
-import { LabeledStatementLegacy } from './visitors/LabeledStatement.js';
-import { MemberExpressionRunes } from './visitors/MemberExpression.js';
-import { PropertyDefinitionRunes } from './visitors/PropertyDefinition.js';
+import { LabeledStatement } from './visitors/LabeledStatement.js';
+import { MemberExpression } from './visitors/MemberExpression.js';
+import { PropertyDefinition } from './visitors/PropertyDefinition.js';
 import { RegularElement } from './visitors/RegularElement.js';
 import { RenderTag } from './visitors/RenderTag.js';
 import { SlotElement } from './visitors/SlotElement.js';
@@ -37,34 +37,21 @@ import { SvelteHead } from './visitors/SvelteHead.js';
 import { SvelteSelf } from './visitors/SvelteSelf.js';
 import { TitleElement } from './visitors/TitleElement.js';
 import { UpdateExpression } from './visitors/UpdateExpression.js';
-import {
-	VariableDeclarationLegacy,
-	VariableDeclarationRunes
-} from './visitors/VariableDeclaration.js';
+import { VariableDeclaration } from './visitors/VariableDeclaration.js';
 
 /** @type {Visitors} */
 const global_visitors = {
+	_: set_scope,
 	AssignmentExpression,
 	CallExpression,
+	ClassBody,
+	ExpressionStatement,
 	Identifier,
-	UpdateExpression
-};
-
-/** @type {Visitors} */
-const javascript_visitors_runes = {
-	...global_visitors,
-	ClassBody: ClassBodyRunes,
-	ExpressionStatement: ExpressionStatementRunes,
-	MemberExpression: MemberExpressionRunes,
-	PropertyDefinition: PropertyDefinitionRunes,
-	VariableDeclaration: VariableDeclarationRunes
-};
-
-/** @type {Visitors} */
-const javascript_visitors_legacy = {
-	...global_visitors,
-	LabeledStatement: LabeledStatementLegacy,
-	VariableDeclaration: VariableDeclarationLegacy
+	LabeledStatement,
+	MemberExpression,
+	PropertyDefinition,
+	UpdateExpression,
+	VariableDeclaration
 };
 
 /** @type {ComponentVisitors} */
@@ -102,7 +89,7 @@ export function server_component(analysis, options) {
 		analysis,
 		options,
 		scope: analysis.module.scope,
-		scopes: analysis.template.scopes,
+		scopes: analysis.module.scopes,
 		hoisted: [b.import_all('$', 'svelte/internal/server')],
 		legacy_reactive_statements: new Map(),
 		// these are set inside the `Fragment` visitor, and cannot be used until then
@@ -115,25 +102,15 @@ export function server_component(analysis, options) {
 	};
 
 	const module = /** @type {Program} */ (
-		walk(
-			/** @type {SvelteNode} */ (analysis.module.ast),
-			state,
-			// @ts-expect-error TODO: zimmerframe types
-			{
-				...set_scope(analysis.module.scopes),
-				...(analysis.runes ? javascript_visitors_runes : javascript_visitors_legacy)
-			}
-		)
+		walk(/** @type {SvelteNode} */ (analysis.module.ast), state, global_visitors)
 	);
 
 	const instance = /** @type {Program} */ (
 		walk(
 			/** @type {SvelteNode} */ (analysis.instance.ast),
-			state,
-			// @ts-expect-error TODO: zimmerframe types
+			{ ...state, scopes: analysis.instance.scopes },
 			{
-				...set_scope(analysis.instance.scopes),
-				...(analysis.runes ? javascript_visitors_runes : javascript_visitors_legacy),
+				...global_visitors,
 				ImportDeclaration(node) {
 					state.hoisted.push(node);
 					return b.empty;
@@ -152,13 +129,9 @@ export function server_component(analysis, options) {
 	const template = /** @type {Program} */ (
 		walk(
 			/** @type {SvelteNode} */ (analysis.template.ast),
-			state,
-			// @ts-expect-error TODO: zimmerframe types
-			{
-				...set_scope(analysis.template.scopes),
-				...global_visitors,
-				...template_visitors
-			}
+			{ ...state, scopes: analysis.template.scopes },
+			// @ts-expect-error don't know, don't care
+			{ ...global_visitors, ...template_visitors }
 		)
 	);
 
@@ -423,10 +396,7 @@ export function server_module(analysis, options) {
 	};
 
 	const module = /** @type {Program} */ (
-		walk(/** @type {SvelteNode} */ (analysis.module.ast), state, {
-			...set_scope(analysis.module.scopes),
-			...javascript_visitors_runes
-		})
+		walk(/** @type {SvelteNode} */ (analysis.module.ast), state, global_visitors)
 	);
 
 	return {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
index 27524b92a7..466af6870a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
@@ -9,7 +9,12 @@ import { get_rune } from '../../../scope.js';
  * @param {ClassBody} node
  * @param {Context} context
  */
-export function ClassBodyRunes(node, context) {
+export function ClassBody(node, context) {
+	if (!context.state.analysis.runes) {
+		context.next();
+		return;
+	}
+
 	/** @type {Map<string, StateField>} */
 	const public_derived = new Map();
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ExpressionStatement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ExpressionStatement.js
index 18434dd0a6..9db887aada 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ExpressionStatement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ExpressionStatement.js
@@ -1,28 +1,17 @@
 /** @import { ExpressionStatement } from 'estree' */
 /** @import { Context } from '../types.js' */
 import * as b from '../../../../utils/builders.js';
+import { get_rune } from '../../../scope.js';
 
 /**
  * @param {ExpressionStatement} node
  * @param {Context} context
  */
-export function ExpressionStatementRunes(node, context) {
-	const expression = node.expression;
+export function ExpressionStatement(node, context) {
+	const rune = get_rune(node.expression, context.state.scope);
 
-	if (expression.type === 'CallExpression') {
-		const callee = expression.callee;
-
-		if (callee.type === 'Identifier' && callee.name === '$effect') {
-			return b.empty;
-		}
-
-		if (
-			callee.type === 'MemberExpression' &&
-			callee.object.type === 'Identifier' &&
-			callee.object.name === '$effect'
-		) {
-			return b.empty;
-		}
+	if (rune === '$effect' || rune === '$effect.pre' || rune === '$effect.root') {
+		return b.empty;
 	}
 
 	context.next();
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/LabeledStatement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/LabeledStatement.js
index 25942abf2a..2b394e94e3 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/LabeledStatement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/LabeledStatement.js
@@ -6,9 +6,10 @@ import * as b from '../../../../utils/builders.js';
  * @param {LabeledStatement} node
  * @param {Context} context
  */
-export function LabeledStatementLegacy(node, context) {
-	if (context.path.length > 1) return;
-	if (node.label.name !== '$') return;
+export function LabeledStatement(node, context) {
+	if (context.state.analysis.runes || context.path.length > 1 || node.label.name !== '$') {
+		return;
+	}
 
 	// TODO bail out if we're in module context
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js
index 4bfa80787f..527c8cf6ed 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/MemberExpression.js
@@ -6,8 +6,12 @@ import * as b from '../../../../utils/builders.js';
  * @param {MemberExpression} node
  * @param {Context} context
  */
-export function MemberExpressionRunes(node, context) {
-	if (node.object.type === 'ThisExpression' && node.property.type === 'PrivateIdentifier') {
+export function MemberExpression(node, context) {
+	if (
+		context.state.analysis.runes &&
+		node.object.type === 'ThisExpression' &&
+		node.property.type === 'PrivateIdentifier'
+	) {
 		const field = context.state.private_derived.get(node.property.name);
 
 		if (field) {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
index 9bbf819ec1..72831dce86 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
@@ -7,8 +7,8 @@ import { get_rune } from '../../../scope.js';
  * @param {PropertyDefinition} node
  * @param {Context} context
  */
-export function PropertyDefinitionRunes(node, context) {
-	if (node.value != null && node.value.type === 'CallExpression') {
+export function PropertyDefinition(node, context) {
+	if (context.state.analysis.runes && node.value != null && node.value.type === 'CallExpression') {
 		const rune = get_rune(node.value, context.state.scope);
 
 		if (rune === '$state' || rune === '$state.frozen' || rune === '$derived') {
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
index 0e48487ece..f7809af43a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
@@ -11,136 +11,127 @@ import { walk } from 'zimmerframe';
  * @param {VariableDeclaration} node
  * @param {Context} context
  */
-export function VariableDeclarationRunes(node, context) {
+export function VariableDeclaration(node, context) {
+	/** @type {VariableDeclarator[]} */
 	const declarations = [];
 
-	for (const declarator of node.declarations) {
-		const init = declarator.init;
-		const rune = get_rune(init, context.state.scope);
-		if (!rune || rune === '$effect.tracking' || rune === '$inspect' || rune === '$effect.root') {
-			declarations.push(/** @type {VariableDeclarator} */ (context.visit(declarator)));
-			continue;
-		}
+	if (context.state.analysis.runes) {
+		for (const declarator of node.declarations) {
+			const init = declarator.init;
+			const rune = get_rune(init, context.state.scope);
+			if (!rune || rune === '$effect.tracking' || rune === '$inspect' || rune === '$effect.root') {
+				declarations.push(/** @type {VariableDeclarator} */ (context.visit(declarator)));
+				continue;
+			}
 
-		if (rune === '$props') {
-			// remove $bindable() from props declaration
-			const id = walk(declarator.id, null, {
-				AssignmentPattern(node) {
-					if (
-						node.right.type === 'CallExpression' &&
-						get_rune(node.right, context.state.scope) === '$bindable'
-					) {
-						const right = node.right.arguments.length
-							? /** @type {Expression} */ (context.visit(node.right.arguments[0]))
-							: b.id('undefined');
-						return b.assignment_pattern(node.left, right);
+			if (rune === '$props') {
+				// remove $bindable() from props declaration
+				const id = walk(declarator.id, null, {
+					AssignmentPattern(node) {
+						if (
+							node.right.type === 'CallExpression' &&
+							get_rune(node.right, context.state.scope) === '$bindable'
+						) {
+							const right = node.right.arguments.length
+								? /** @type {Expression} */ (context.visit(node.right.arguments[0]))
+								: b.id('undefined');
+							return b.assignment_pattern(node.left, right);
+						}
 					}
-				}
-			});
-			declarations.push(b.declarator(id, b.id('$$props')));
-			continue;
-		}
-
-		const args = /** @type {CallExpression} */ (init).arguments;
-		const value =
-			args.length === 0 ? b.id('undefined') : /** @type {Expression} */ (context.visit(args[0]));
-
-		if (rune === '$derived.by') {
-			declarations.push(
-				b.declarator(/** @type {Pattern} */ (context.visit(declarator.id)), b.call(value))
-			);
-			continue;
-		}
-
-		if (declarator.id.type === 'Identifier') {
-			declarations.push(b.declarator(declarator.id, value));
-			continue;
-		}
-
-		if (rune === '$derived') {
-			declarations.push(b.declarator(/** @type {Pattern} */ (context.visit(declarator.id)), value));
-			continue;
-		}
+				});
+				declarations.push(b.declarator(id, b.id('$$props')));
+				continue;
+			}
 
-		declarations.push(...create_state_declarators(declarator, context.state.scope, value));
-	}
+			const args = /** @type {CallExpression} */ (init).arguments;
+			const value =
+				args.length === 0 ? b.id('undefined') : /** @type {Expression} */ (context.visit(args[0]));
 
-	return {
-		...node,
-		declarations
-	};
-}
+			if (rune === '$derived.by') {
+				declarations.push(
+					b.declarator(/** @type {Pattern} */ (context.visit(declarator.id)), b.call(value))
+				);
+				continue;
+			}
 
-/**
- * @param {VariableDeclaration} node
- * @param {Context} context
- */
-export function VariableDeclarationLegacy(node, { state, visit }) {
-	/** @type {VariableDeclarator[]} */
-	const declarations = [];
+			if (declarator.id.type === 'Identifier') {
+				declarations.push(b.declarator(declarator.id, value));
+				continue;
+			}
 
-	for (const declarator of node.declarations) {
-		const bindings = /** @type {Binding[]} */ (state.scope.get_bindings(declarator));
-		const has_state = bindings.some((binding) => binding.kind === 'state');
-		const has_props = bindings.some((binding) => binding.kind === 'bindable_prop');
+			if (rune === '$derived') {
+				declarations.push(
+					b.declarator(/** @type {Pattern} */ (context.visit(declarator.id)), value)
+				);
+				continue;
+			}
 
-		if (!has_state && !has_props) {
-			declarations.push(/** @type {VariableDeclarator} */ (visit(declarator)));
-			continue;
+			declarations.push(...create_state_declarators(declarator, context.state.scope, value));
 		}
+	} else {
+		for (const declarator of node.declarations) {
+			const bindings = /** @type {Binding[]} */ (context.state.scope.get_bindings(declarator));
+			const has_state = bindings.some((binding) => binding.kind === 'state');
+			const has_props = bindings.some((binding) => binding.kind === 'bindable_prop');
+
+			if (!has_state && !has_props) {
+				declarations.push(/** @type {VariableDeclarator} */ (context.visit(declarator)));
+				continue;
+			}
 
-		if (has_props) {
-			if (declarator.id.type !== 'Identifier') {
-				// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
-				// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
-				const tmp = state.scope.generate('tmp');
-				const paths = extract_paths(declarator.id);
-				declarations.push(
-					b.declarator(
-						b.id(tmp),
-						/** @type {Expression} */ (visit(/** @type {Expression} */ (declarator.init)))
-					)
-				);
-				for (const path of paths) {
-					const value = path.expression?.(b.id(tmp));
-					const name = /** @type {Identifier} */ (path.node).name;
-					const binding = /** @type {Binding} */ (state.scope.get(name));
-					const prop = b.member(b.id('$$props'), b.literal(binding.prop_alias ?? name), true);
+			if (has_props) {
+				if (declarator.id.type !== 'Identifier') {
+					// Turn export let into props. It's really really weird because export let { x: foo, z: [bar]} = ..
+					// means that foo and bar are the props (i.e. the leafs are the prop names), not x and z.
+					const tmp = context.state.scope.generate('tmp');
+					const paths = extract_paths(declarator.id);
 					declarations.push(
-						b.declarator(path.node, b.call('$.value_or_fallback', prop, b.thunk(value)))
+						b.declarator(
+							b.id(tmp),
+							/** @type {Expression} */ (context.visit(/** @type {Expression} */ (declarator.init)))
+						)
 					);
+					for (const path of paths) {
+						const value = path.expression?.(b.id(tmp));
+						const name = /** @type {Identifier} */ (path.node).name;
+						const binding = /** @type {Binding} */ (context.state.scope.get(name));
+						const prop = b.member(b.id('$$props'), b.literal(binding.prop_alias ?? name), true);
+						declarations.push(
+							b.declarator(path.node, b.call('$.value_or_fallback', prop, b.thunk(value)))
+						);
+					}
+					continue;
 				}
-				continue;
-			}
 
-			const binding = /** @type {Binding} */ (state.scope.get(declarator.id.name));
-			const prop = b.member(
-				b.id('$$props'),
-				b.literal(binding.prop_alias ?? declarator.id.name),
-				true
-			);
+				const binding = /** @type {Binding} */ (context.state.scope.get(declarator.id.name));
+				const prop = b.member(
+					b.id('$$props'),
+					b.literal(binding.prop_alias ?? declarator.id.name),
+					true
+				);
 
-			/** @type {Expression} */
-			let init = prop;
-			if (declarator.init) {
-				const default_value = /** @type {Expression} */ (visit(declarator.init));
-				init = is_expression_async(default_value)
-					? b.await(b.call('$.value_or_fallback_async', prop, b.thunk(default_value, true)))
-					: b.call('$.value_or_fallback', prop, b.thunk(default_value));
-			}
+				/** @type {Expression} */
+				let init = prop;
+				if (declarator.init) {
+					const default_value = /** @type {Expression} */ (context.visit(declarator.init));
+					init = is_expression_async(default_value)
+						? b.await(b.call('$.value_or_fallback_async', prop, b.thunk(default_value, true)))
+						: b.call('$.value_or_fallback', prop, b.thunk(default_value));
+				}
 
-			declarations.push(b.declarator(declarator.id, init));
+				declarations.push(b.declarator(declarator.id, init));
 
-			continue;
-		}
+				continue;
+			}
 
-		declarations.push(
-			...create_state_declarators(
-				declarator,
-				state.scope,
-				/** @type {Expression} */ (declarator.init && visit(declarator.init))
-			)
-		);
+			declarations.push(
+				...create_state_declarators(
+					declarator,
+					context.state.scope,
+					/** @type {Expression} */ (declarator.init && context.visit(declarator.init))
+				)
+			);
+		}
 	}
 
 	return {
diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js
index 11bd0acef2..2b35fa67d7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/utils.js
@@ -49,8 +49,6 @@ function sort_const_tags(nodes, state) {
 	/** @type {Map<Compiler.Binding, Tag>} */
 	const tags = new Map();
 
-	const { _ } = set_scope(state.scopes);
-
 	for (const node of nodes) {
 		if (node.type === 'ConstTag') {
 			const declaration = node.declaration.declarations[0];
@@ -63,7 +61,8 @@ function sort_const_tags(nodes, state) {
 			const deps = new Set();
 
 			walk(declaration.init, state, {
-				_,
+				// @ts-expect-error don't know, don't care
+				_: set_scope,
 				Identifier(node, context) {
 					const parent = /** @type {Expression} */ (context.path.at(-1));
 
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 167f61e034..6051dda570 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -738,22 +738,13 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 }
 
 /**
- * @template {{ scope: Scope }} State
- * @param {Map<SvelteNode, Scope>} scopes
- * @returns {Visitors<SvelteNode, State>}
+ * @template {{ scope: Scope, scopes: Map<SvelteNode, Scope> }} State
+ * @param {SvelteNode} node
+ * @param {Context<SvelteNode, State>} context
  */
-export function set_scope(scopes) {
-	return {
-		/**
-		 *
-		 * @param {SvelteNode} node
-		 * @param {Context<SvelteNode, State>} context
-		 */
-		_(node, { next, state }) {
-			const scope = scopes.get(node);
-			next(scope !== undefined && scope !== state.scope ? { ...state, scope } : state);
-		}
-	};
+export function set_scope(node, { next, state }) {
+	const scope = state.scopes.get(node);
+	next(scope !== undefined && scope !== state.scope ? { ...state, scope } : state);
 }
 
 /**

From 44a1324a2a256aa0ac39dd9f60400f06abae8575 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 1 Aug 2024 15:43:44 -0400
Subject: [PATCH 046/196] chore: rename derived_call to derived_by (#12689)

---
 .../src/compiler/phases/3-transform/client/types.d.ts       | 2 +-
 .../phases/3-transform/client/visitors/ClassBody.js         | 6 +++---
 .../phases/3-transform/server/visitors/ClassBody.js         | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
index b850e1b35c..64b461e723 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
@@ -74,7 +74,7 @@ export interface ComponentClientTransformState extends ClientTransformState {
 }
 
 export interface StateField {
-	kind: 'state' | 'frozen_state' | 'derived' | 'derived_call';
+	kind: 'state' | 'frozen_state' | 'derived' | 'derived_by';
 	id: PrivateIdentifier;
 }
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
index 8d65f275ed..b817c929e2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
@@ -56,7 +56,7 @@ export function ClassBody(node, context) {
 								: rune === '$state.frozen'
 									? 'frozen_state'
 									: rune === '$derived.by'
-										? 'derived_call'
+										? 'derived_by'
 										: 'derived',
 						// @ts-expect-error this is set in the next pass
 						id: is_private ? definition.key : null
@@ -123,7 +123,7 @@ export function ClassBody(node, context) {
 											? b.call('$.freeze', init)
 											: init
 									)
-								: field.kind === 'derived_call'
+								: field.kind === 'derived_by'
 									? b.call('$.derived', init)
 									: b.call('$.derived', b.thunk(init));
 				} else {
@@ -167,7 +167,7 @@ export function ClassBody(node, context) {
 						);
 					}
 
-					if (dev && (field.kind === 'derived' || field.kind === 'derived_call')) {
+					if (dev && (field.kind === 'derived' || field.kind === 'derived_by')) {
 						body.push(
 							b.method(
 								'set',
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
index 466af6870a..365084a284 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/ClassBody.js
@@ -39,7 +39,7 @@ export function ClassBody(node, context) {
 				if (rune === '$derived' || rune === '$derived.by') {
 					/** @type {StateField} */
 					const field = {
-						kind: rune === '$derived.by' ? 'derived_call' : 'derived',
+						kind: rune === '$derived.by' ? 'derived_by' : 'derived',
 						// @ts-expect-error this is set in the next pass
 						id: is_private ? definition.key : null
 					};
@@ -86,7 +86,7 @@ export function ClassBody(node, context) {
 					context.visit(definition.value.arguments[0], child_state)
 				);
 				const value =
-					field.kind === 'derived_call' ? b.call('$.once', init) : b.call('$.once', b.thunk(init));
+					field.kind === 'derived_by' ? b.call('$.once', init) : b.call('$.once', b.thunk(init));
 
 				if (is_private) {
 					body.push(b.prop_def(field.id, value));
@@ -98,7 +98,7 @@ export function ClassBody(node, context) {
 					// get foo() { return this.#foo; }
 					body.push(b.method('get', definition.key, [], [b.return(b.call(member))]));
 
-					if (dev && (field.kind === 'derived' || field.kind === 'derived_call')) {
+					if (dev && (field.kind === 'derived' || field.kind === 'derived_by')) {
 						body.push(
 							b.method(
 								'set',

From a45ad5df7bcdf9429e20a325628fa472ad002369 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 1 Aug 2024 15:49:27 -0400
Subject: [PATCH 047/196] chore: dedupe void element lists (#12690)

* chore: dedupe void element lists

* fix
---
 .../compiler/phases/1-parse/state/element.js  |  2 +-
 .../2-analyze/visitors/RegularElement.js      |  5 ++--
 .../client/visitors/RegularElement.js         |  5 ++--
 .../server/visitors/RegularElement.js         |  4 +--
 .../svelte/src/compiler/phases/constants.js   | 19 -------------
 packages/svelte/src/constants.js              | 24 -----------------
 packages/svelte/src/internal/server/index.js  | 23 +++-------------
 .../svelte/src/internal/shared/validate.js    |  2 +-
 packages/svelte/src/utils.js                  | 27 +++++++++++++++++++
 9 files changed, 40 insertions(+), 71 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index 17e999b96c..bdadf41347 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -1,7 +1,7 @@
 /** @import { Expression } from 'estree' */
 /** @import * as Compiler from '#compiler' */
 /** @import { Parser } from '../index.js' */
-import { is_void } from '../../../../constants.js';
+import { is_void } from '../../../../utils.js';
 import read_expression from '../read/expression.js';
 import { read_script } from '../read/script.js';
 import read_style from '../read/style.js';
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index bde068184c..d398dde09a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -1,12 +1,13 @@
 /** @import { RegularElement } from '#compiler' */
 /** @import { Context } from '../types' */
+import { is_void } from '../../../../utils.js';
 import {
 	is_tag_valid_with_ancestor,
 	is_tag_valid_with_parent
 } from '../../../../html-tree-validation.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
-import { MathMLElements, SVGElements, VoidElements } from '../../constants.js';
+import { MathMLElements, SVGElements } from '../../constants.js';
 import { create_attribute } from '../../nodes.js';
 import { regex_starts_with_newline } from '../../patterns.js';
 import { check_element } from './shared/a11y.js';
@@ -157,7 +158,7 @@ export function RegularElement(node, context) {
 	if (
 		context.state.analysis.source[node.end - 2] === '/' &&
 		context.state.options.namespace !== 'foreign' &&
-		!VoidElements.includes(node_name) &&
+		!is_void(node_name) &&
 		!SVGElements.includes(node_name)
 	) {
 		w.element_invalid_self_closing_tag(node, node.name);
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 ffbde5977f..8344c67c0a 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
@@ -4,6 +4,7 @@
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 /** @import { Scope } from '../../../scope' */
 import { DOMBooleanAttributes } from '../../../../../constants.js';
+import { is_void } from '../../../../../utils.js';
 import { escape_html } from '../../../../../escaping.js';
 import { dev, is_ignored, locator } from '../../../../state.js';
 import {
@@ -12,7 +13,7 @@ import {
 	is_text_attribute
 } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
-import { DOMProperties, LoadErrorElements, VoidElements } from '../../../constants.js';
+import { DOMProperties, LoadErrorElements } from '../../../constants.js';
 import { is_custom_element_node } from '../../../nodes.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
 import { serialize_get_binding } from '../utils.js';
@@ -358,7 +359,7 @@ export function RegularElement(node, context) {
 		location.push(child_locations);
 	}
 
-	if (!VoidElements.includes(node.name)) {
+	if (!is_void(node.name)) {
 		context.state.template.push(`</${node.name}>`);
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
index 0c5f81ae13..ef27ef1c39 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
@@ -2,9 +2,9 @@
 /** @import { RegularElement, Text } from '#compiler' */
 /** @import { ComponentContext, ComponentServerTransformState } from '../types.js' */
 /** @import { Scope } from '../../../scope.js' */
+import { is_void } from '../../../../../utils.js';
 import { dev, locator } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
-import { VoidElements } from '../../../constants.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
 import { serialize_element_attributes } from './shared/element.js';
 import { process_children, serialize_template } from './shared/utils.js';
@@ -95,7 +95,7 @@ export function RegularElement(node, context) {
 		);
 	}
 
-	if (!VoidElements.includes(node.name) || namespace === 'foreign') {
+	if (!is_void(node.name) || namespace === 'foreign') {
 		state.template.push(b.literal(`</${node.name}>`));
 	}
 
diff --git a/packages/svelte/src/compiler/phases/constants.js b/packages/svelte/src/compiler/phases/constants.js
index 898a77c4bf..4046f665ef 100644
--- a/packages/svelte/src/compiler/phases/constants.js
+++ b/packages/svelte/src/compiler/phases/constants.js
@@ -8,25 +8,6 @@ export const DOMProperties = [
 	...DOMBooleanAttributes
 ];
 
-export const VoidElements = [
-	'area',
-	'base',
-	'br',
-	'col',
-	'embed',
-	'hr',
-	'img',
-	'input',
-	'keygen',
-	'link',
-	'menuitem',
-	'meta',
-	'param',
-	'source',
-	'track',
-	'wbr'
-];
-
 export const PassiveEvents = ['wheel', 'touchstart', 'touchmove', 'touchend', 'touchcancel'];
 
 export const Runes = /** @type {const} */ ([
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index 12b17ecb30..42653d91c1 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -180,25 +180,6 @@ export const reserved = [
 	'yield'
 ];
 
-const void_element_names = [
-	'area',
-	'base',
-	'br',
-	'col',
-	'command',
-	'embed',
-	'hr',
-	'img',
-	'input',
-	'keygen',
-	'link',
-	'meta',
-	'param',
-	'source',
-	'track',
-	'wbr'
-];
-
 // we use a list of ignorable runtime warnings because not every runtime warning
 // can be ignored and we want to keep the validation for svelte-ignore in place
 export const IGNORABLE_RUNTIME_WARNINGS = /** @type {const} */ ([
@@ -209,8 +190,3 @@ export const IGNORABLE_RUNTIME_WARNINGS = /** @type {const} */ ([
 	'ownership_invalid_binding',
 	'ownership_invalid_mutation'
 ]);
-
-/** @param {string} name */
-export function is_void(name) {
-	return void_element_names.includes(name) || name.toLowerCase() === '!doctype';
-}
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index b3ced7d828..343b9fde0d 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -11,36 +11,19 @@ import {
 	ELEMENT_PRESERVE_ATTRIBUTE_CASE,
 	ELEMENT_IS_NAMESPACED
 } from '../../constants.js';
+
 import { escape_html } from '../../escaping.js';
 import { DEV } from 'esm-env';
 import { current_component, pop, push } from './context.js';
 import { EMPTY_COMMENT, BLOCK_CLOSE, BLOCK_OPEN } from './hydration.js';
 import { validate_store } from '../shared/validate.js';
+import { is_void } from '../../utils.js';
 
 // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
 // https://infra.spec.whatwg.org/#noncharacter
 const INVALID_ATTR_NAME_CHAR_REGEX =
 	/[\s'">/=\u{FDD0}-\u{FDEF}\u{FFFE}\u{FFFF}\u{1FFFE}\u{1FFFF}\u{2FFFE}\u{2FFFF}\u{3FFFE}\u{3FFFF}\u{4FFFE}\u{4FFFF}\u{5FFFE}\u{5FFFF}\u{6FFFE}\u{6FFFF}\u{7FFFE}\u{7FFFF}\u{8FFFE}\u{8FFFF}\u{9FFFE}\u{9FFFF}\u{AFFFE}\u{AFFFF}\u{BFFFE}\u{BFFFF}\u{CFFFE}\u{CFFFF}\u{DFFFE}\u{DFFFF}\u{EFFFE}\u{EFFFF}\u{FFFFE}\u{FFFFF}\u{10FFFE}\u{10FFFF}]/u;
 
-export const VoidElements = new Set([
-	'area',
-	'base',
-	'br',
-	'col',
-	'embed',
-	'hr',
-	'img',
-	'input',
-	'keygen',
-	'link',
-	'menuitem',
-	'meta',
-	'param',
-	'source',
-	'track',
-	'wbr'
-]);
-
 /**
  * @param {Payload} to_copy
  * @returns {Payload}
@@ -82,7 +65,7 @@ export function element(payload, tag, attributes_fn = noop, children_fn = noop)
 		attributes_fn();
 		payload.out += `>`;
 
-		if (!VoidElements.has(tag)) {
+		if (!is_void(tag)) {
 			children_fn();
 			if (!RawTextElements.includes(tag)) {
 				payload.out += EMPTY_COMMENT;
diff --git a/packages/svelte/src/internal/shared/validate.js b/packages/svelte/src/internal/shared/validate.js
index d0b5f32337..852c0e83bf 100644
--- a/packages/svelte/src/internal/shared/validate.js
+++ b/packages/svelte/src/internal/shared/validate.js
@@ -1,6 +1,6 @@
 /** @import { TemplateNode } from '#client' */
 /** @import { Getters } from '#shared' */
-import { is_void } from '../../constants.js';
+import { is_void } from '../../utils.js';
 import * as w from './warnings.js';
 import * as e from './errors.js';
 
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index 3bb9b3559e..6e083d5d6d 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -12,3 +12,30 @@ export function hash(str) {
 	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
 	return (hash >>> 0).toString(36);
 }
+
+const VOID_ELEMENT_NAMES = [
+	'area',
+	'base',
+	'br',
+	'col',
+	'command',
+	'embed',
+	'hr',
+	'img',
+	'input',
+	'keygen',
+	'link',
+	'meta',
+	'param',
+	'source',
+	'track',
+	'wbr'
+];
+
+/**
+ * Returns `true` if `name` is of a void element
+ * @param {string} name
+ */
+export function is_void(name) {
+	return VOID_ELEMENT_NAMES.includes(name) || name.toLowerCase() === '!doctype';
+}

From 4aa815f1ec13722f4f0fbc1a0dcbe707fa476294 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 1 Aug 2024 15:57:40 -0400
Subject: [PATCH 048/196] chore: dedupe list of reserved words (#12691)

---
 .../src/compiler/phases/1-parse/index.js      |  4 +-
 .../svelte/src/compiler/phases/constants.js   | 40 -------------
 packages/svelte/src/compiler/phases/scope.js  |  5 +-
 packages/svelte/src/constants.js              | 51 ----------------
 packages/svelte/src/utils.js                  | 59 +++++++++++++++++++
 5 files changed, 64 insertions(+), 95 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/1-parse/index.js b/packages/svelte/src/compiler/phases/1-parse/index.js
index c5808f313a..1bf52cd932 100644
--- a/packages/svelte/src/compiler/phases/1-parse/index.js
+++ b/packages/svelte/src/compiler/phases/1-parse/index.js
@@ -3,11 +3,11 @@
 import { isIdentifierStart, isIdentifierChar } from 'acorn';
 import fragment from './state/fragment.js';
 import { regex_whitespace } from '../patterns.js';
-import { reserved } from '../../../constants.js';
 import full_char_code_at from './utils/full_char_code_at.js';
 import * as e from '../../errors.js';
 import { create_fragment } from './utils/create.js';
 import read_options from './read/options.js';
+import { is_reserved } from '../../../utils.js';
 
 const regex_position_indicator = / \(\d+:\d+\)$/;
 
@@ -219,7 +219,7 @@ export class Parser {
 
 		const identifier = this.template.slice(this.index, (this.index = i));
 
-		if (!allow_reserved && reserved.includes(identifier)) {
+		if (!allow_reserved && is_reserved(identifier)) {
 			e.unexpected_reserved_word(start, identifier);
 		}
 
diff --git a/packages/svelte/src/compiler/phases/constants.js b/packages/svelte/src/compiler/phases/constants.js
index 4046f665ef..8696692e99 100644
--- a/packages/svelte/src/compiler/phases/constants.js
+++ b/packages/svelte/src/compiler/phases/constants.js
@@ -188,43 +188,3 @@ export const EventModifiers = [
 	'self',
 	'trusted'
 ];
-
-export const JsKeywords = [
-	'class',
-	'break',
-	'const',
-	'let',
-	'var',
-	'continue',
-	'if',
-	'for',
-	'while',
-	'do',
-	'new',
-	'static',
-	'true',
-	'false',
-	'void',
-	'with',
-	'yield',
-	'await',
-	'typeof',
-	'throw',
-	'throws',
-	'null',
-	'delete',
-	'default',
-	'catch',
-	'debugger',
-	'case',
-	'arguments',
-	'else',
-	'extends',
-	'export',
-	'import',
-	'extends',
-	'switch',
-	'instanceof',
-	'return',
-	'this'
-];
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 6051dda570..49ccfed4ec 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -12,7 +12,8 @@ import {
 	object,
 	unwrap_pattern
 } from '../utils/ast.js';
-import { JsKeywords, Runes } from './constants.js';
+import { Runes } from './constants.js';
+import { is_reserved } from '../../utils.js';
 
 export class Scope {
 	/** @type {ScopeRoot} */
@@ -148,7 +149,7 @@ export class Scope {
 			this.references.has(name) ||
 			this.declarations.has(name) ||
 			this.root.conflicts.has(name) ||
-			JsKeywords.includes(name)
+			is_reserved(name)
 		) {
 			name = `${preferred_name}_${n++}`;
 		}
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index 42653d91c1..049a3821a9 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -129,57 +129,6 @@ export function is_capture_event(name, mode = 'exclude-on') {
 		: name !== 'ongotpointercapture' && name !== 'onlostpointercapture';
 }
 
-export const reserved = [
-	'arguments',
-	'await',
-	'break',
-	'case',
-	'catch',
-	'class',
-	'const',
-	'continue',
-	'debugger',
-	'default',
-	'delete',
-	'do',
-	'else',
-	'enum',
-	'eval',
-	'export',
-	'extends',
-	'false',
-	'finally',
-	'for',
-	'function',
-	'if',
-	'implements',
-	'import',
-	'in',
-	'instanceof',
-	'interface',
-	'let',
-	'new',
-	'null',
-	'package',
-	'private',
-	'protected',
-	'public',
-	'return',
-	'static',
-	'super',
-	'switch',
-	'this',
-	'throw',
-	'true',
-	'try',
-	'typeof',
-	'var',
-	'void',
-	'while',
-	'with',
-	'yield'
-];
-
 // we use a list of ignorable runtime warnings because not every runtime warning
 // can be ignored and we want to keep the validation for svelte-ignore in place
 export const IGNORABLE_RUNTIME_WARNINGS = /** @type {const} */ ([
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index 6e083d5d6d..1ba3dff435 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -39,3 +39,62 @@ const VOID_ELEMENT_NAMES = [
 export function is_void(name) {
 	return VOID_ELEMENT_NAMES.includes(name) || name.toLowerCase() === '!doctype';
 }
+
+const RESERVED_WORDS = [
+	'arguments',
+	'await',
+	'break',
+	'case',
+	'catch',
+	'class',
+	'const',
+	'continue',
+	'debugger',
+	'default',
+	'delete',
+	'do',
+	'else',
+	'enum',
+	'eval',
+	'export',
+	'extends',
+	'false',
+	'finally',
+	'for',
+	'function',
+	'if',
+	'implements',
+	'import',
+	'in',
+	'instanceof',
+	'interface',
+	'let',
+	'new',
+	'null',
+	'package',
+	'private',
+	'protected',
+	'public',
+	'return',
+	'static',
+	'super',
+	'switch',
+	'this',
+	'throw',
+	'true',
+	'try',
+	'typeof',
+	'var',
+	'void',
+	'while',
+	'with',
+	'yield'
+];
+
+/**
+ * Returns `true` if `word` is a reserved JavaScript keyword
+ * @param {string} word
+ */
+export function is_reserved(word) {
+	return RESERVED_WORDS.includes(word);
+}

From f984307f9c28f65e2b27f47fa8e5567feaa054a7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 1 Aug 2024 16:07:52 -0400
Subject: [PATCH 049/196] chore: tidy up is_capture_event (#12693)

---
 .../compiler/phases/2-analyze/visitors/Attribute.js |  7 ++++---
 .../3-transform/client/visitors/shared/element.js   | 13 ++++---------
 packages/svelte/src/constants.js                    | 13 -------------
 .../src/internal/client/dom/elements/attributes.js  |  8 ++------
 packages/svelte/src/utils.js                        |  7 +++++++
 5 files changed, 17 insertions(+), 31 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 86637b1944..bd6cb5ba4b 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,8 @@
 /** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression } from 'estree' */
 /** @import { Attribute, DelegatedEvent, RegularElement } from '#compiler' */
 /** @import { Context } from '../types' */
-import { DelegatedEvents, is_capture_event } from '../../../../constants.js';
+import { DelegatedEvents } from '../../../../constants.js';
+import { is_capture_event } from '../../../../utils.js';
 import {
 	get_attribute_chunks,
 	get_attribute_expression,
@@ -205,9 +206,9 @@ function get_delegated_event(event_name, handler, context) {
  * @param {string} event_name
  */
 function get_attribute_event_name(event_name) {
-	if (is_capture_event(event_name, 'include-on')) {
+	event_name = event_name.slice(2);
+	if (is_capture_event(event_name)) {
 		event_name = event_name.slice(0, -7);
 	}
-	event_name = event_name.slice(2);
 	return event_name;
 }
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 f7042d68e7..5e744d7b8d 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
@@ -1,18 +1,13 @@
 /** @import { Expression, Identifier } from 'estree' */
 /** @import { Attribute, ClassDirective, DelegatedEvent, ExpressionMetadata, ExpressionTag, Namespace, OnDirective, RegularElement, StyleDirective, SvelteElement, SvelteNode } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
-import { AttributeAliases, is_capture_event } from '../../../../../../constants.js';
-import { is_ignored } from '../../../../../state.js';
+import { AttributeAliases } from '../../../../../../constants.js';
+import { is_capture_event } from '../../../../../../utils.js';
 import { get_attribute_expression } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { DOMProperties, PassiveEvents } from '../../../../constants.js';
+import { PassiveEvents } from '../../../../constants.js';
 import { serialize_get_binding } from '../../utils.js';
-import {
-	serialize_event_handler,
-	serialize_template_literal,
-	serialize_update,
-	serialize_update_assignment
-} from './utils.js';
+import { serialize_event_handler, serialize_template_literal, serialize_update } from './utils.js';
 
 /**
  * Serializes each style directive into something like `$.set_style(element, style_property, value)`
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index 049a3821a9..9f6be362b9 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -116,19 +116,6 @@ export const DOMBooleanAttributes = [
 export const namespace_svg = 'http://www.w3.org/2000/svg';
 export const namespace_mathml = 'http://www.w3.org/1998/Math/MathML';
 
-/**
- * @param {string} name
- * @param {"include-on" | "exclude-on"} [mode] - wether if name starts with `on` or `on` is excluded at this point
- */
-export function is_capture_event(name, mode = 'exclude-on') {
-	if (!name.endsWith('capture')) {
-		return false;
-	}
-	return mode == 'exclude-on'
-		? name !== 'gotpointercapture' && name !== 'lostpointercapture'
-		: name !== 'ongotpointercapture' && name !== 'onlostpointercapture';
-}
-
 // we use a list of ignorable runtime warnings because not every runtime warning
 // can be ignored and we want to keep the validation for svelte-ignore in place
 export const IGNORABLE_RUNTIME_WARNINGS = /** @type {const} */ ([
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 6288aac197..7e9f943d53 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -1,17 +1,13 @@
 import { DEV } from 'esm-env';
 import { hydrating } from '../hydration.js';
 import { get_descriptors, get_prototype_of } from '../../../shared/utils.js';
-import {
-	AttributeAliases,
-	DelegatedEvents,
-	is_capture_event,
-	namespace_svg
-} from '../../../../constants.js';
+import { AttributeAliases, DelegatedEvents, namespace_svg } from '../../../../constants.js';
 import { create_event, delegate } from './events.js';
 import { add_form_reset_listener, autofocus } from './misc.js';
 import * as w from '../../warnings.js';
 import { LOADING_ATTR_SYMBOL } from '../../constants.js';
 import { queue_idle_task, queue_micro_task } from '../task.js';
+import { is_capture_event } from '../../../../utils.js';
 
 /**
  * The value/checked attribute in the template actually corresponds to the defaultValue property, so we need
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index 1ba3dff435..87d9edd31f 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -98,3 +98,10 @@ const RESERVED_WORDS = [
 export function is_reserved(word) {
 	return RESERVED_WORDS.includes(word);
 }
+
+/**
+ * @param {string} name
+ */
+export function is_capture_event(name) {
+	return name.endsWith('capture') && name !== 'gotpointercapture' && name !== 'lostpointercapture';
+}

From 79ef6451518852665c0b9e482b60e44fae4e811b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 1 Aug 2024 19:52:05 -0400
Subject: [PATCH 050/196] chore: improve constants (#12695)

* chore: consistently uppercase constants

* expose helpers

* use helpers

* tidy up

* why was that there

* fix

* tweak

* fix

* tidy up

* cheat, to preserve treeshakeability
---
 .../compiler/phases/1-parse/read/options.js   |   6 +-
 .../src/compiler/phases/2-analyze/index.js    |  17 +-
 .../phases/2-analyze/visitors/Attribute.js    |   7 +-
 .../2-analyze/visitors/BindDirective.js       |   6 +-
 .../phases/2-analyze/visitors/Identifier.js   |   7 +-
 .../2-analyze/visitors/RegularElement.js      |   9 +-
 .../2-analyze/visitors/SvelteElement.js       |   6 +-
 .../phases/2-analyze/visitors/shared/a11y.js  |   7 +-
 .../2-analyze/visitors/shared/element.js      |  17 +-
 .../client/visitors/RegularElement.js         |  19 +-
 .../client/visitors/shared/element.js         |  19 +-
 .../server/visitors/shared/element.js         |  32 +-
 .../svelte/src/compiler/phases/constants.js   | 190 -----------
 packages/svelte/src/compiler/phases/scope.js  |  10 +-
 packages/svelte/src/constants.js              |  91 +----
 .../client/dom/blocks/svelte-element.js       |   4 +-
 .../client/dom/elements/attributes.js         |  11 +-
 packages/svelte/src/internal/client/render.js |  12 +-
 packages/svelte/src/internal/server/index.js  |  12 +-
 packages/svelte/src/utils.js                  | 311 ++++++++++++++++++
 20 files changed, 421 insertions(+), 372 deletions(-)
 delete mode 100644 packages/svelte/src/compiler/phases/constants.js

diff --git a/packages/svelte/src/compiler/phases/1-parse/read/options.js b/packages/svelte/src/compiler/phases/1-parse/read/options.js
index 27527dd162..751fe5f672 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/options.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/options.js
@@ -1,6 +1,6 @@
 /** @import { ObjectExpression } from 'estree' */
 /** @import { SvelteOptionsRaw, Root, SvelteOptions } from '#compiler' */
-import { namespace_mathml, namespace_svg } from '../../../../constants.js';
+import { NAMESPACE_MATHML, NAMESPACE_SVG } from '../../../../constants.js';
 import * as e from '../../../errors.js';
 
 const regex_valid_tag_name = /^[a-zA-Z][a-zA-Z0-9]*-[a-zA-Z0-9-]+$/;
@@ -155,9 +155,9 @@ export default function read_options(node) {
 			case 'namespace': {
 				const value = get_static_value(attribute);
 
-				if (value === namespace_svg) {
+				if (value === NAMESPACE_SVG) {
 					component_options.namespace = 'svg';
-				} else if (value === namespace_mathml) {
+				} else if (value === NAMESPACE_MATHML) {
 					component_options.namespace = 'mathml';
 				} else if (
 					value === 'html' ||
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 2a4241a338..6d90ca1617 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -7,13 +7,12 @@ import * as e from '../../errors.js';
 import * as w from '../../warnings.js';
 import { is_text_attribute } from '../../utils/ast.js';
 import * as b from '../../utils/builders.js';
-import { ReservedKeywords, Runes } from '../constants.js';
 import { Scope, ScopeRoot, create_scopes, get_rune } from '../scope.js';
 import check_graph_for_cycles from './utils/check_graph_for_cycles.js';
 import { create_attribute } from '../nodes.js';
 import { analyze_css } from './css/css-analyze.js';
 import { prune } from './css/css-prune.js';
-import { hash } from '../../../utils.js';
+import { hash, is_rune } from '../../../utils.js';
 import { warn_unused } from './css/css-warn.js';
 import { extract_svelte_ignore } from '../../utils/extract_svelte_ignore.js';
 import { ignore_map, ignore_stack, pop_ignore, push_ignore } from '../../state.js';
@@ -203,6 +202,8 @@ function get_component_name(filename) {
 	return name[0].toUpperCase() + name.slice(1);
 }
 
+const RESERVED = ['$$props', '$$restProps', '$$slots'];
+
 /**
  * @param {Program} ast
  * @param {ValidatedModuleCompileOptions} options
@@ -212,7 +213,7 @@ export function analyze_module(ast, options) {
 	const { scope, scopes } = create_scopes(ast, new ScopeRoot(), false, null);
 
 	for (const [name, references] of scope.references) {
-		if (name[0] !== '$' || ReservedKeywords.includes(name)) continue;
+		if (name[0] !== '$' || RESERVED.includes(name)) continue;
 		if (name === '$' || name[1] === '$') {
 			e.global_reference_invalid(references[0].node, name);
 		}
@@ -257,7 +258,7 @@ export function analyze_component(root, source, options) {
 
 	// create synthetic bindings for store subscriptions
 	for (const [name, references] of module.scope.references) {
-		if (name[0] !== '$' || ReservedKeywords.includes(name)) continue;
+		if (name[0] !== '$' || RESERVED.includes(name)) continue;
 		if (name === '$' || name[1] === '$') {
 			e.global_reference_invalid(references[0].node, name);
 		}
@@ -269,7 +270,7 @@ export function analyze_component(root, source, options) {
 		// is referencing a rune and not a global store.
 		if (
 			options.runes === false ||
-			!Runes.includes(/** @type {any} */ (name)) ||
+			!is_rune(name) ||
 			(declaration !== null &&
 				// const state = $state(0) is valid
 				(get_rune(declaration.initial, instance.scope) === null ||
@@ -307,7 +308,7 @@ export function analyze_component(root, source, options) {
 			if (options.runes !== false) {
 				if (declaration === null && /[a-z]/.test(store_name[0])) {
 					e.global_reference_invalid(references[0].node, name);
-				} else if (declaration !== null && Runes.includes(/** @type {any} */ (name))) {
+				} else if (declaration !== null && is_rune(name)) {
 					for (const { node, path } of references) {
 						if (path.at(-1)?.type === 'CallExpression') {
 							w.store_rune_conflict(node, store_name);
@@ -339,9 +340,7 @@ export function analyze_component(root, source, options) {
 
 	const component_name = get_component_name(options.filename ?? 'Component');
 
-	const runes =
-		options.runes ??
-		Array.from(module.scope.references).some(([name]) => Runes.includes(/** @type {any} */ (name)));
+	const runes = options.runes ?? Array.from(module.scope.references.keys()).some(is_rune);
 
 	// TODO remove all the ?? stuff, we don't need it now that we're validating the config
 	/** @type {ComponentAnalysis} */
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 bd6cb5ba4b..824f784a6b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -1,8 +1,7 @@
 /** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression } from 'estree' */
 /** @import { Attribute, DelegatedEvent, RegularElement } from '#compiler' */
 /** @import { Context } from '../types' */
-import { DelegatedEvents } from '../../../../constants.js';
-import { is_capture_event } from '../../../../utils.js';
+import { is_capture_event, is_delegated } from '../../../../utils.js';
 import {
 	get_attribute_chunks,
 	get_attribute_expression,
@@ -60,7 +59,7 @@ export function Attribute(node, context) {
  */
 function get_delegated_event(event_name, handler, context) {
 	// Handle delegated event handlers. Bail-out if not a delegated event.
-	if (!handler || !DelegatedEvents.includes(event_name)) {
+	if (!handler || !is_delegated(event_name)) {
 		return null;
 	}
 
@@ -119,7 +118,7 @@ function get_delegated_event(event_name, handler, context) {
 					if (
 						element.type !== 'RegularElement' ||
 						element.metadata.has_spread ||
-						!DelegatedEvents.includes(event_name)
+						!is_delegated(event_name)
 					) {
 						return non_hoistable;
 					}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index 183958afa4..ad70cd2717 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -9,8 +9,8 @@ import { validate_no_const_assignment } from './shared/utils.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { binding_properties } from '../../bindings.js';
-import { ContentEditableBindings, SVGElements } from '../../constants.js';
 import fuzzymatch from '../../1-parse/utils/fuzzymatch.js';
+import { is_content_editable_binding, is_svg } from '../../../../utils.js';
 
 /**
  * @param {BindDirective} node
@@ -197,7 +197,7 @@ export function BindDirective(node, context) {
 				}
 			}
 
-			if (node.name === 'offsetWidth' && SVGElements.includes(parent.name)) {
+			if (node.name === 'offsetWidth' && is_svg(parent.name)) {
 				e.bind_invalid_target(
 					node,
 					node.name,
@@ -205,7 +205,7 @@ export function BindDirective(node, context) {
 				);
 			}
 
-			if (ContentEditableBindings.includes(node.name)) {
+			if (is_content_editable_binding(node.name)) {
 				const contenteditable = /** @type {Attribute} */ (
 					parent.attributes.find((a) => a.type === 'Attribute' && a.name === 'contenteditable')
 				);
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 2f586c9207..c00d521610 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -1,11 +1,10 @@
 /** @import { Expression, Identifier } from 'estree' */
-/** @import { SvelteNode } from '#compiler' */
 /** @import { Context } from '../types' */
 import is_reference from 'is-reference';
-import { Runes } from '../../constants.js';
 import { should_proxy_or_freeze } from '../../3-transform/client/utils.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
+import { is_rune } from '../../../../utils.js';
 
 /**
  * @param {Identifier} node
@@ -34,7 +33,7 @@ export function Identifier(node, context) {
 
 	if (context.state.analysis.runes) {
 		if (
-			Runes.includes(/** @type {Runes[number]} */ (node.name)) &&
+			is_rune(node.name) &&
 			context.state.scope.get(node.name) === null &&
 			context.state.scope.get(node.name.slice(1)) === null
 		) {
@@ -49,7 +48,7 @@ export function Identifier(node, context) {
 				current = parent;
 				parent = /** @type {Expression} */ (context.path[--i]);
 
-				if (!Runes.includes(/** @type {Runes[number]} */ (name))) {
+				if (!is_rune(name)) {
 					if (name === '$effect.active') {
 						e.rune_renamed(parent, '$effect.active', '$effect.tracking');
 					}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index d398dde09a..5c15f70ba2 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -1,13 +1,12 @@
 /** @import { RegularElement } from '#compiler' */
 /** @import { Context } from '../types' */
-import { is_void } from '../../../../utils.js';
+import { is_mathml, is_svg, is_void } from '../../../../utils.js';
 import {
 	is_tag_valid_with_ancestor,
 	is_tag_valid_with_parent
 } from '../../../../html-tree-validation.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
-import { MathMLElements, SVGElements } from '../../constants.js';
 import { create_attribute } from '../../nodes.js';
 import { regex_starts_with_newline } from '../../patterns.js';
 import { check_element } from './shared/a11y.js';
@@ -92,8 +91,8 @@ export function RegularElement(node, context) {
 	);
 
 	if (context.state.options.namespace !== 'foreign') {
-		if (SVGElements.includes(node.name)) node.metadata.svg = true;
-		else if (MathMLElements.includes(node.name)) node.metadata.mathml = true;
+		node.metadata.svg = is_svg(node.name);
+		node.metadata.mathml = is_mathml(node.name);
 	}
 
 	if (context.state.parent_element) {
@@ -159,7 +158,7 @@ export function RegularElement(node, context) {
 		context.state.analysis.source[node.end - 2] === '/' &&
 		context.state.options.namespace !== 'foreign' &&
 		!is_void(node_name) &&
-		!SVGElements.includes(node_name)
+		!is_svg(node_name)
 	) {
 		w.element_invalid_self_closing_tag(node, node.name);
 	}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
index df9e1da3a9..bb161dcf06 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
@@ -1,6 +1,6 @@
 /** @import { Attribute, SvelteElement, Text } from '#compiler' */
 /** @import { Context } from '../types' */
-import { namespace_mathml, namespace_svg } from '../../../../constants.js';
+import { NAMESPACE_MATHML, NAMESPACE_SVG } from '../../../../constants.js';
 import { is_text_attribute } from '../../../utils/ast.js';
 import { check_element } from './shared/a11y.js';
 import { validate_element } from './shared/element.js';
@@ -23,8 +23,8 @@ export function SvelteElement(node, context) {
 	);
 
 	if (xmlns) {
-		node.metadata.svg = xmlns.value[0].data === namespace_svg;
-		node.metadata.mathml = xmlns.value[0].data === namespace_mathml;
+		node.metadata.svg = xmlns.value[0].data === NAMESPACE_SVG;
+		node.metadata.mathml = xmlns.value[0].data === NAMESPACE_MATHML;
 	} else {
 		let i = context.path.length;
 		while (i--) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
index 0d83e12de4..2213ae102a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
@@ -14,9 +14,9 @@ import {
 import * as w from '../../../../warnings.js';
 import fuzzymatch from '../../../1-parse/utils/fuzzymatch.js';
 import { is_event_attribute, is_text_attribute } from '../../../../utils/ast.js';
-import { ContentEditableBindings } from '../../../constants.js';
 import { walk } from 'zimmerframe';
 import { list } from '../../../../utils/string.js';
+import { is_content_editable_binding } from '../../../../../utils.js';
 
 const aria_roles = roles_map.keys();
 const abstract_roles = aria_roles.filter((role) => roles_map.get(role)?.abstract);
@@ -720,10 +720,7 @@ export function check_element(node, state) {
 					has_contenteditable_attr = true;
 				}
 			}
-		} else if (
-			attribute.type === 'BindDirective' &&
-			ContentEditableBindings.includes(attribute.name)
-		) {
+		} else if (attribute.type === 'BindDirective' && is_content_editable_binding(attribute.name)) {
 			has_contenteditable_binding = true;
 		}
 	}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js
index 2a2249080a..0771f74ccf 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js
@@ -4,13 +4,24 @@ import { get_attribute_expression, is_expression_attribute } from '../../../../u
 import { regex_illegal_attribute_character } from '../../../patterns.js';
 import * as e from '../../../../errors.js';
 import * as w from '../../../../warnings.js';
-import { EventModifiers } from '../../../constants.js';
 import {
 	validate_attribute,
 	validate_attribute_name,
 	validate_slot_attribute
 } from './attribute.js';
 
+const EVENT_MODIFIERS = [
+	'preventDefault',
+	'stopPropagation',
+	'stopImmediatePropagation',
+	'capture',
+	'once',
+	'passive',
+	'nonpassive',
+	'self',
+	'trusted'
+];
+
 /**
  * @param {import('#compiler').RegularElement | SvelteElement} node
  * @param {Context} context
@@ -122,8 +133,8 @@ export function validate_element(node, context) {
 			let has_passive_modifier = false;
 			let conflicting_passive_modifier = '';
 			for (const modifier of attribute.modifiers) {
-				if (!EventModifiers.includes(modifier)) {
-					const list = `${EventModifiers.slice(0, -1).join(', ')} or ${EventModifiers.at(-1)}`;
+				if (!EVENT_MODIFIERS.includes(modifier)) {
+					const list = `${EVENT_MODIFIERS.slice(0, -1).join(', ')} or ${EVENT_MODIFIERS.at(-1)}`;
 					e.event_handler_invalid_modifier(attribute, list);
 				}
 				if (modifier === 'passive') {
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 8344c67c0a..740fb2bb4d 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,8 +3,12 @@
 /** @import { SourceLocation } from '#shared' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
 /** @import { Scope } from '../../../scope' */
-import { DOMBooleanAttributes } from '../../../../../constants.js';
-import { is_void } from '../../../../../utils.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 {
@@ -13,7 +17,6 @@ import {
 	is_text_attribute
 } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
-import { DOMProperties, LoadErrorElements } from '../../../constants.js';
 import { is_custom_element_node } from '../../../nodes.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
 import { serialize_get_binding } from '../utils.js';
@@ -130,7 +133,7 @@ export function RegularElement(node, context) {
 			attributes.push(attribute);
 			needs_input_reset = true;
 			needs_content_reset = true;
-			if (LoadErrorElements.includes(node.name)) {
+			if (is_load_error_element(node.name)) {
 				might_need_event_replaying = true;
 			}
 		} else if (attribute.type === 'ClassDirective') {
@@ -155,7 +158,7 @@ export function RegularElement(node, context) {
 				) {
 					has_content_editable_binding = true;
 				}
-			} else if (attribute.type === 'UseDirective' && LoadErrorElements.includes(node.name)) {
+			} else if (attribute.type === 'UseDirective' && is_load_error_element(node.name)) {
 				might_need_event_replaying = true;
 			}
 			context.visit(attribute);
@@ -211,7 +214,7 @@ export function RegularElement(node, context) {
 			if (is_event_attribute(attribute)) {
 				if (
 					(attribute.name === 'onload' || attribute.name === 'onerror') &&
-					LoadErrorElements.includes(node.name)
+					is_load_error_element(node.name)
 				) {
 					might_need_event_replaying = true;
 				}
@@ -238,7 +241,7 @@ export function RegularElement(node, context) {
 					// to create the elements it needs.
 					context.state.template.push(
 						` ${attribute.name}${
-							DOMBooleanAttributes.includes(name) && literal_value === true
+							is_boolean_attribute(name) && literal_value === true
 								? ''
 								: `="${literal_value === true ? '' : escape_html(literal_value, true)}"`
 						}`
@@ -599,7 +602,7 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 		update = b.stmt(b.call('$.set_value', node_id, value));
 	} else if (name === 'checked') {
 		update = b.stmt(b.call('$.set_checked', node_id, value));
-	} else if (DOMProperties.includes(name)) {
+	} else if (is_dom_property(name)) {
 		update = b.stmt(b.assignment('=', b.member(node_id, b.id(name)), value));
 	} else {
 		const callee = name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute';
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 5e744d7b8d..7f1127c7c5 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
@@ -1,11 +1,13 @@
 /** @import { Expression, Identifier } from 'estree' */
 /** @import { Attribute, ClassDirective, DelegatedEvent, ExpressionMetadata, ExpressionTag, Namespace, OnDirective, RegularElement, StyleDirective, SvelteElement, SvelteNode } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
-import { AttributeAliases } from '../../../../../../constants.js';
-import { is_capture_event } from '../../../../../../utils.js';
+import {
+	is_capture_event,
+	is_passive_event,
+	normalize_attribute
+} from '../../../../../../utils.js';
 import { get_attribute_expression } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { PassiveEvents } from '../../../../constants.js';
 import { serialize_get_binding } from '../../utils.js';
 import { serialize_event_handler, serialize_template_literal, serialize_update } from './utils.js';
 
@@ -119,18 +121,15 @@ export function serialize_attribute_value(value, context) {
  * @param {{ state: { metadata: { namespace: Namespace }}}} context
  */
 export function get_attribute_name(element, attribute, context) {
-	let name = attribute.name;
 	if (
 		!element.metadata.svg &&
 		!element.metadata.mathml &&
 		context.state.metadata.namespace !== 'foreign'
 	) {
-		name = name.toLowerCase();
-		if (name in AttributeAliases) {
-			name = AttributeAliases[name];
-		}
+		return normalize_attribute(attribute.name);
 	}
-	return name;
+
+	return attribute.name;
 }
 
 /**
@@ -236,7 +235,7 @@ export function serialize_event(node, metadata, context) {
 		} else if (node.modifiers.includes('nonpassive')) {
 			args.push(b.literal(false));
 		} else if (
-			PassiveEvents.includes(node.name) &&
+			is_passive_event(node.name) &&
 			/** @type {OnDirective} */ (node).type !== 'OnDirective'
 		) {
 			// For on:something events we don't apply passive behaviour to match Svelte 4.
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index 052b3c5d6f..51bcd605fc 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -7,11 +7,6 @@ import {
 	is_text_attribute
 } from '../../../../../utils/ast.js';
 import { binding_properties } from '../../../../bindings.js';
-import {
-	ContentEditableBindings,
-	LoadErrorElements,
-	WhitespaceInsensitiveAttributes
-} from '../../../../constants.js';
 import {
 	create_attribute,
 	create_expression_metadata,
@@ -20,11 +15,17 @@ import {
 import { regex_starts_with_newline } from '../../../../patterns.js';
 import * as b from '../../../../../utils/builders.js';
 import {
-	DOMBooleanAttributes,
 	ELEMENT_IS_NAMESPACED,
 	ELEMENT_PRESERVE_ATTRIBUTE_CASE
 } from '../../../../../../constants.js';
 import { serialize_attribute_value } from './utils.js';
+import {
+	is_boolean_attribute,
+	is_content_editable_binding,
+	is_load_error_element
+} from '../../../../../../utils.js';
+
+const WHITESPACE_INSENSITIVE_ATTRIBUTES = ['class', 'style'];
 
 /**
  * Writes the output to the template output. Some elements may have attributes on them that require the
@@ -77,7 +78,7 @@ export function serialize_element_attributes(node, context) {
 			} else if (is_event_attribute(attribute)) {
 				if (
 					(attribute.name === 'onload' || attribute.name === 'onerror') &&
-					LoadErrorElements.includes(node.name)
+					is_load_error_element(node.name)
 				) {
 					events_to_capture.add(attribute.name);
 				}
@@ -108,7 +109,7 @@ export function serialize_element_attributes(node, context) {
 			const binding = binding_properties[attribute.name];
 			if (binding?.omit_in_ssr) continue;
 
-			if (ContentEditableBindings.includes(attribute.name)) {
+			if (is_content_editable_binding(attribute.name)) {
 				content = /** @type {Expression} */ (context.visit(attribute.expression));
 			} else if (attribute.name === 'value' && node.name === 'textarea') {
 				content = b.call(
@@ -170,12 +171,12 @@ export function serialize_element_attributes(node, context) {
 		} else if (attribute.type === 'SpreadAttribute') {
 			attributes.push(attribute);
 			has_spread = true;
-			if (LoadErrorElements.includes(node.name)) {
+			if (is_load_error_element(node.name)) {
 				events_to_capture.add('onload');
 				events_to_capture.add('onerror');
 			}
 		} else if (attribute.type === 'UseDirective') {
-			if (LoadErrorElements.includes(node.name)) {
+			if (is_load_error_element(node.name)) {
 				events_to_capture.add('onload');
 				events_to_capture.add('onerror');
 			}
@@ -227,14 +228,14 @@ export function serialize_element_attributes(node, context) {
 					serialize_attribute_value(
 						attribute.value,
 						context,
-						WhitespaceInsensitiveAttributes.includes(name)
+						WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
 					)
 				).value;
 				if (name !== 'class' || literal_value) {
 					context.state.template.push(
 						b.literal(
 							` ${attribute.name}${
-								DOMBooleanAttributes.includes(name) && literal_value === true
+								is_boolean_attribute(name) && literal_value === true
 									? ''
 									: `="${literal_value === true ? '' : String(literal_value)}"`
 							}`
@@ -245,15 +246,14 @@ export function serialize_element_attributes(node, context) {
 			}
 
 			const name = get_attribute_name(node, attribute, context);
-			const is_boolean = DOMBooleanAttributes.includes(name);
 			const value = serialize_attribute_value(
 				attribute.value,
 				context,
-				WhitespaceInsensitiveAttributes.includes(name)
+				WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
 			);
 
 			context.state.template.push(
-				b.call('$.attr', b.literal(name), value, is_boolean && b.literal(is_boolean))
+				b.call('$.attr', b.literal(name), value, is_boolean_attribute(name) && b.true)
 			);
 		}
 	}
@@ -344,7 +344,7 @@ function serialize_element_spread_attributes(
 				const value = serialize_attribute_value(
 					attribute.value,
 					context,
-					WhitespaceInsensitiveAttributes.includes(name)
+					WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
 				);
 				return b.prop('init', b.key(name), value);
 			}
diff --git a/packages/svelte/src/compiler/phases/constants.js b/packages/svelte/src/compiler/phases/constants.js
deleted file mode 100644
index 8696692e99..0000000000
--- a/packages/svelte/src/compiler/phases/constants.js
+++ /dev/null
@@ -1,190 +0,0 @@
-import { AttributeAliases, DOMBooleanAttributes } from '../../constants.js';
-
-export const DOMProperties = [
-	...Object.values(AttributeAliases),
-	'value',
-	'inert',
-	'volume',
-	...DOMBooleanAttributes
-];
-
-export const PassiveEvents = ['wheel', 'touchstart', 'touchmove', 'touchend', 'touchcancel'];
-
-export const Runes = /** @type {const} */ ([
-	'$state',
-	'$state.frozen',
-	'$state.snapshot',
-	'$state.is',
-	'$props',
-	'$bindable',
-	'$derived',
-	'$derived.by',
-	'$effect',
-	'$effect.pre',
-	'$effect.tracking',
-	'$effect.root',
-	'$inspect',
-	'$inspect().with',
-	'$host'
-]);
-
-/**
- * Whitespace inside one of these elements will not result in
- * a whitespace node being created in any circumstances. (This
- * list is almost certainly very incomplete)
- * TODO this is currently unused
- */
-export const ElementsWithoutText = ['audio', 'datalist', 'dl', 'optgroup', 'select', 'video'];
-
-export const ReservedKeywords = ['$$props', '$$restProps', '$$slots'];
-
-/** Attributes where whitespace can be compacted */
-export const WhitespaceInsensitiveAttributes = ['class', 'style'];
-
-export const ContentEditableBindings = ['textContent', 'innerHTML', 'innerText'];
-
-export const LoadErrorElements = [
-	'body',
-	'embed',
-	'iframe',
-	'img',
-	'link',
-	'object',
-	'script',
-	'style',
-	'track'
-];
-
-export const SVGElements = [
-	'altGlyph',
-	'altGlyphDef',
-	'altGlyphItem',
-	'animate',
-	'animateColor',
-	'animateMotion',
-	'animateTransform',
-	'circle',
-	'clipPath',
-	'color-profile',
-	'cursor',
-	'defs',
-	'desc',
-	'discard',
-	'ellipse',
-	'feBlend',
-	'feColorMatrix',
-	'feComponentTransfer',
-	'feComposite',
-	'feConvolveMatrix',
-	'feDiffuseLighting',
-	'feDisplacementMap',
-	'feDistantLight',
-	'feDropShadow',
-	'feFlood',
-	'feFuncA',
-	'feFuncB',
-	'feFuncG',
-	'feFuncR',
-	'feGaussianBlur',
-	'feImage',
-	'feMerge',
-	'feMergeNode',
-	'feMorphology',
-	'feOffset',
-	'fePointLight',
-	'feSpecularLighting',
-	'feSpotLight',
-	'feTile',
-	'feTurbulence',
-	'filter',
-	'font',
-	'font-face',
-	'font-face-format',
-	'font-face-name',
-	'font-face-src',
-	'font-face-uri',
-	'foreignObject',
-	'g',
-	'glyph',
-	'glyphRef',
-	'hatch',
-	'hatchpath',
-	'hkern',
-	'image',
-	'line',
-	'linearGradient',
-	'marker',
-	'mask',
-	'mesh',
-	'meshgradient',
-	'meshpatch',
-	'meshrow',
-	'metadata',
-	'missing-glyph',
-	'mpath',
-	'path',
-	'pattern',
-	'polygon',
-	'polyline',
-	'radialGradient',
-	'rect',
-	'set',
-	'solidcolor',
-	'stop',
-	'svg',
-	'switch',
-	'symbol',
-	'text',
-	'textPath',
-	'tref',
-	'tspan',
-	'unknown',
-	'use',
-	'view',
-	'vkern'
-];
-
-export const MathMLElements = [
-	'annotation',
-	'annotation-xml',
-	'maction',
-	'math',
-	'merror',
-	'mfrac',
-	'mi',
-	'mmultiscripts',
-	'mn',
-	'mo',
-	'mover',
-	'mpadded',
-	'mphantom',
-	'mprescripts',
-	'mroot',
-	'mrow',
-	'ms',
-	'mspace',
-	'msqrt',
-	'mstyle',
-	'msub',
-	'msubsup',
-	'msup',
-	'mtable',
-	'mtd',
-	'mtext',
-	'mtr',
-	'munder',
-	'munderover',
-	'semantics'
-];
-
-export const EventModifiers = [
-	'preventDefault',
-	'stopPropagation',
-	'stopImmediatePropagation',
-	'capture',
-	'once',
-	'passive',
-	'nonpassive',
-	'self',
-	'trusted'
-];
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 49ccfed4ec..82f9591a82 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -1,5 +1,5 @@
 /** @import { ClassDeclaration, Expression, FunctionDeclaration, Identifier, ImportDeclaration, MemberExpression, Node, Pattern, VariableDeclarator } from 'estree' */
-/** @import { Context, Visitor, Visitors } from 'zimmerframe' */
+/** @import { Context, Visitor } from 'zimmerframe' */
 /** @import { AnimateDirective, Binding, DeclarationKind, EachBlock, ElementLike, LetDirective, SvelteNode, TransitionDirective, UseDirective } from '#compiler' */
 import is_reference from 'is-reference';
 import { walk } from 'zimmerframe';
@@ -12,8 +12,7 @@ import {
 	object,
 	unwrap_pattern
 } from '../utils/ast.js';
-import { Runes } from './constants.js';
-import { is_reserved } from '../../utils.js';
+import { is_reserved, is_rune } from '../../utils.js';
 
 export class Scope {
 	/** @type {ScopeRoot} */
@@ -752,7 +751,6 @@ export function set_scope(node, { next, state }) {
  * Returns the name of the rune if the given expression is a `CallExpression` using a rune.
  * @param {Node | EachBlock | null | undefined} node
  * @param {Scope} scope
- * @returns {Runes[number] | null}
  */
 export function get_rune(node, scope) {
 	if (!node) return null;
@@ -778,10 +776,10 @@ export function get_rune(node, scope) {
 
 	joined = n.name + joined;
 
-	if (!Runes.includes(/** @type {any} */ (joined))) return null;
+	if (!is_rune(joined)) return null;
 
 	const binding = scope.get(n.name);
 	if (binding !== null) return null; // rune name, but references a variable or store
 
-	return /** @type {typeof Runes[number] | null} */ (joined);
+	return joined;
 }
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index 9f6be362b9..9a4aa58193 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -34,87 +34,8 @@ export const UNINITIALIZED = Symbol();
 export const FILENAME = Symbol('filename');
 export const HMR = Symbol('hmr');
 
-/** List of elements that require raw contents and should not have SSR comments put in them */
-export const RawTextElements = ['textarea', 'script', 'style', 'title'];
-
-/** List of Element events that will be delegated */
-export const DelegatedEvents = [
-	'beforeinput',
-	'click',
-	'change',
-	'dblclick',
-	'contextmenu',
-	'focusin',
-	'focusout',
-	'input',
-	'keydown',
-	'keyup',
-	'mousedown',
-	'mousemove',
-	'mouseout',
-	'mouseover',
-	'mouseup',
-	'pointerdown',
-	'pointermove',
-	'pointerout',
-	'pointerover',
-	'pointerup',
-	'touchend',
-	'touchmove',
-	'touchstart'
-];
-
-/** List of Element events that will be delegated and are passive */
-export const PassiveDelegatedEvents = ['touchstart', 'touchmove', 'touchend'];
-
-/**
- * @type {Record<string, string>}
- * List of attribute names that should be aliased to their property names
- * because they behave differently between setting them as an attribute and
- * setting them as a property.
- */
-export const AttributeAliases = {
-	// no `class: 'className'` because we handle that separately
-	formnovalidate: 'formNoValidate',
-	ismap: 'isMap',
-	nomodule: 'noModule',
-	playsinline: 'playsInline',
-	readonly: 'readOnly'
-};
-
-/**
- * Attributes that are boolean, i.e. they are present or not present.
- */
-export const DOMBooleanAttributes = [
-	'allowfullscreen',
-	'async',
-	'autofocus',
-	'autoplay',
-	'checked',
-	'controls',
-	'default',
-	'disabled',
-	'formnovalidate',
-	'hidden',
-	'indeterminate',
-	'ismap',
-	'loop',
-	'multiple',
-	'muted',
-	'nomodule',
-	'novalidate',
-	'open',
-	'playsinline',
-	'readonly',
-	'required',
-	'reversed',
-	'seamless',
-	'selected',
-	'webkitdirectory'
-];
-
-export const namespace_svg = 'http://www.w3.org/2000/svg';
-export const namespace_mathml = 'http://www.w3.org/1998/Math/MathML';
+export const NAMESPACE_SVG = 'http://www.w3.org/2000/svg';
+export const NAMESPACE_MATHML = 'http://www.w3.org/1998/Math/MathML';
 
 // we use a list of ignorable runtime warnings because not every runtime warning
 // can be ignored and we want to keep the validation for svelte-ignore in place
@@ -126,3 +47,11 @@ export const IGNORABLE_RUNTIME_WARNINGS = /** @type {const} */ ([
 	'ownership_invalid_binding',
 	'ownership_invalid_mutation'
 ]);
+
+/**
+ * Whitespace inside one of these elements will not result in
+ * a whitespace node being created in any circumstances. (This
+ * list is almost certainly very incomplete)
+ * TODO this is currently unused
+ */
+export const ELEMENTS_WITHOUT_TEXT = ['audio', 'datalist', 'dl', 'optgroup', 'select', 'video'];
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
index e6886bb7fa..0620dde638 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
@@ -1,5 +1,5 @@
 /** @import { Effect, EffectNodes, TemplateNode } from '#client' */
-import { FILENAME, namespace_svg } from '../../../../constants.js';
+import { FILENAME, NAMESPACE_SVG } from '../../../../constants.js';
 import {
 	hydrate_next,
 	hydrate_node,
@@ -68,7 +68,7 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 
 	block(() => {
 		const next_tag = get_tag() || null;
-		var ns = get_namespace ? get_namespace() : is_svg || next_tag === 'svg' ? namespace_svg : null;
+		var ns = get_namespace ? get_namespace() : is_svg || next_tag === 'svg' ? NAMESPACE_SVG : null;
 
 		// Assumption: Noone changes the namespace but not the tag (what would that even mean?)
 		if (next_tag === tag) return;
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index 7e9f943d53..d0e2145937 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -1,13 +1,13 @@
 import { DEV } from 'esm-env';
 import { hydrating } from '../hydration.js';
 import { get_descriptors, get_prototype_of } from '../../../shared/utils.js';
-import { AttributeAliases, DelegatedEvents, namespace_svg } from '../../../../constants.js';
+import { NAMESPACE_SVG } from '../../../../constants.js';
 import { create_event, delegate } from './events.js';
 import { add_form_reset_listener, autofocus } from './misc.js';
 import * as w from '../../warnings.js';
 import { LOADING_ATTR_SYMBOL } from '../../constants.js';
 import { queue_idle_task, queue_micro_task } from '../task.js';
-import { is_capture_event } from '../../../../utils.js';
+import { is_capture_event, is_delegated, normalize_attribute } from '../../../../utils.js';
 
 /**
  * The value/checked attribute in the template actually corresponds to the defaultValue property, so we need
@@ -212,7 +212,7 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
 			const opts = {};
 			const event_handle_key = '$$' + key;
 			let event_name = key.slice(2);
-			var delegated = DelegatedEvents.includes(event_name);
+			var delegated = is_delegated(event_name);
 
 			if (is_capture_event(event_name)) {
 				event_name = event_name.slice(0, -7);
@@ -268,8 +268,7 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
 		} else {
 			var name = key;
 			if (lowercase_attributes) {
-				name = name.toLowerCase();
-				name = AttributeAliases[name] || name;
+				name = normalize_attribute(name);
 			}
 
 			if (setters.includes(name)) {
@@ -331,7 +330,7 @@ export function set_dynamic_element_attributes(node, prev, next, css_hash) {
 		/** @type {Element & ElementCSSInlineStyle} */ (node),
 		prev,
 		next,
-		node.namespaceURI !== namespace_svg,
+		node.namespaceURI !== NAMESPACE_SVG,
 		css_hash
 	);
 }
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index 2d784872f7..3cc2771e33 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -2,13 +2,8 @@
 /** @import { Component, ComponentType, SvelteComponent } from '../../index.js' */
 import { DEV } from 'esm-env';
 import { clear_text_content, empty, init_operations } from './dom/operations.js';
-import {
-	HYDRATION_END,
-	HYDRATION_ERROR,
-	HYDRATION_START,
-	PassiveDelegatedEvents
-} from '../../constants.js';
-import { flush_sync, push, pop, current_component_context, current_effect } from './runtime.js';
+import { HYDRATION_END, HYDRATION_ERROR, HYDRATION_START } from '../../constants.js';
+import { push, pop, current_component_context, current_effect } from './runtime.js';
 import { effect_root, branch } from './reactivity/effects.js';
 import {
 	hydrate_next,
@@ -27,6 +22,7 @@ import { reset_head_anchor } from './dom/blocks/svelte-head.js';
 import * as w from './warnings.js';
 import * as e from './errors.js';
 import { assign_nodes } from './dom/template.js';
+import { is_passive_event } from '../../utils.js';
 
 /**
  * This is normally true — block effects should run their intro transitions —
@@ -195,7 +191,7 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro
 			if (registered_events.has(event_name)) continue;
 			registered_events.add(event_name);
 
-			var passive = PassiveDelegatedEvents.includes(event_name);
+			var passive = is_passive_event(event_name);
 
 			// Add the event listener to both the container and the document.
 			// The container listener ensures we catch events from within in case
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 343b9fde0d..8ab7e52162 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -6,8 +6,6 @@ import { is_promise, noop } from '../shared/utils.js';
 import { subscribe_to_store } from '../../store/utils.js';
 import {
 	UNINITIALIZED,
-	DOMBooleanAttributes,
-	RawTextElements,
 	ELEMENT_PRESERVE_ATTRIBUTE_CASE,
 	ELEMENT_IS_NAMESPACED
 } from '../../constants.js';
@@ -17,13 +15,16 @@ import { DEV } from 'esm-env';
 import { current_component, pop, push } from './context.js';
 import { EMPTY_COMMENT, BLOCK_CLOSE, BLOCK_OPEN } from './hydration.js';
 import { validate_store } from '../shared/validate.js';
-import { is_void } from '../../utils.js';
+import { is_boolean_attribute, is_void } from '../../utils.js';
 
 // https://html.spec.whatwg.org/multipage/syntax.html#attributes-2
 // https://infra.spec.whatwg.org/#noncharacter
 const INVALID_ATTR_NAME_CHAR_REGEX =
 	/[\s'">/=\u{FDD0}-\u{FDEF}\u{FFFE}\u{FFFF}\u{1FFFE}\u{1FFFF}\u{2FFFE}\u{2FFFF}\u{3FFFE}\u{3FFFF}\u{4FFFE}\u{4FFFF}\u{5FFFE}\u{5FFFF}\u{6FFFE}\u{6FFFF}\u{7FFFE}\u{7FFFF}\u{8FFFE}\u{8FFFF}\u{9FFFE}\u{9FFFF}\u{AFFFE}\u{AFFFF}\u{BFFFE}\u{BFFFF}\u{CFFFE}\u{CFFFF}\u{DFFFE}\u{DFFFF}\u{EFFFE}\u{EFFFF}\u{FFFFE}\u{FFFFF}\u{10FFFE}\u{10FFFF}]/u;
 
+/** List of elements that require raw contents and should not have SSR comments put in them */
+const RAW_TEXT_ELEMENTS = ['textarea', 'script', 'style', 'title'];
+
 /**
  * @param {Payload} to_copy
  * @returns {Payload}
@@ -67,7 +68,7 @@ export function element(payload, tag, attributes_fn = noop, children_fn = noop)
 
 		if (!is_void(tag)) {
 			children_fn();
-			if (!RawTextElements.includes(tag)) {
+			if (!RAW_TEXT_ELEMENTS.includes(tag)) {
 				payload.out += EMPTY_COMMENT;
 			}
 			payload.out += `</${tag}>`;
@@ -225,8 +226,7 @@ export function spread_attributes(attrs, classes, styles, flags = 0) {
 			name = name.toLowerCase();
 		}
 
-		const is_boolean = is_html && DOMBooleanAttributes.includes(name);
-		attr_str += attr(name, attrs[name], is_boolean);
+		attr_str += attr(name, attrs[name], is_html && is_boolean_attribute(name));
 	}
 
 	return attr_str;
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index 87d9edd31f..60250075c6 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -105,3 +105,314 @@ export function is_reserved(word) {
 export function is_capture_event(name) {
 	return name.endsWith('capture') && name !== 'gotpointercapture' && name !== 'lostpointercapture';
 }
+
+/** List of Element events that will be delegated */
+export const DELEGATED_EVENTS = [
+	'beforeinput',
+	'click',
+	'change',
+	'dblclick',
+	'contextmenu',
+	'focusin',
+	'focusout',
+	'input',
+	'keydown',
+	'keyup',
+	'mousedown',
+	'mousemove',
+	'mouseout',
+	'mouseover',
+	'mouseup',
+	'pointerdown',
+	'pointermove',
+	'pointerout',
+	'pointerover',
+	'pointerup',
+	'touchend',
+	'touchmove',
+	'touchstart'
+];
+
+/**
+ * Returns `true` if `event_name` is a delegated event
+ * @param {string} event_name
+ */
+export function is_delegated(event_name) {
+	return DELEGATED_EVENTS.includes(event_name);
+}
+
+/**
+ * Attributes that are boolean, i.e. they are present or not present.
+ */
+export const DOM_BOOLEAN_ATTRIBUTES = [
+	'allowfullscreen',
+	'async',
+	'autofocus',
+	'autoplay',
+	'checked',
+	'controls',
+	'default',
+	'disabled',
+	'formnovalidate',
+	'hidden',
+	'indeterminate',
+	'ismap',
+	'loop',
+	'multiple',
+	'muted',
+	'nomodule',
+	'novalidate',
+	'open',
+	'playsinline',
+	'readonly',
+	'required',
+	'reversed',
+	'seamless',
+	'selected',
+	'webkitdirectory'
+];
+
+/**
+ * Returns `true` if `name` is a boolean attribute
+ * @param {string} name
+ */
+export function is_boolean_attribute(name) {
+	return DOM_BOOLEAN_ATTRIBUTES.includes(name);
+}
+
+/**
+ * @type {Record<string, string>}
+ * List of attribute names that should be aliased to their property names
+ * because they behave differently between setting them as an attribute and
+ * setting them as a property.
+ */
+const ATTRIBUTE_ALIASES = {
+	// no `class: 'className'` because we handle that separately
+	formnovalidate: 'formNoValidate',
+	ismap: 'isMap',
+	nomodule: 'noModule',
+	playsinline: 'playsInline',
+	readonly: 'readOnly'
+};
+
+/**
+ * @param {string} name
+ */
+export function normalize_attribute(name) {
+	name = name.toLowerCase();
+	return ATTRIBUTE_ALIASES[name] ?? name;
+}
+
+const DOM_PROPERTIES = [
+	...DOM_BOOLEAN_ATTRIBUTES,
+	'formNoValidate',
+	'isMap',
+	'noModule',
+	'playsInline',
+	'readOnly',
+	'value',
+	'inert',
+	'volume'
+];
+
+/**
+ * @param {string} name
+ */
+export function is_dom_property(name) {
+	return DOM_PROPERTIES.includes(name);
+}
+
+const PASSIVE_EVENTS = ['wheel', 'touchstart', 'touchmove', 'touchend', 'touchcancel'];
+
+/**
+ * Returns `true` if `name` is a passive event
+ * @param {string} name
+ */
+export function is_passive_event(name) {
+	return PASSIVE_EVENTS.includes(name);
+}
+
+const CONTENT_EDITABLE_BINDINGS = ['textContent', 'innerHTML', 'innerText'];
+
+/** @param {string} name */
+export function is_content_editable_binding(name) {
+	return CONTENT_EDITABLE_BINDINGS.includes(name);
+}
+
+const LOAD_ERROR_ELEMENTS = [
+	'body',
+	'embed',
+	'iframe',
+	'img',
+	'link',
+	'object',
+	'script',
+	'style',
+	'track'
+];
+
+/**
+ * Returns `true` if the element emits `load` and `error` events
+ * @param {string} name
+ */
+export function is_load_error_element(name) {
+	return LOAD_ERROR_ELEMENTS.includes(name);
+}
+
+const SVG_ELEMENTS = [
+	'altGlyph',
+	'altGlyphDef',
+	'altGlyphItem',
+	'animate',
+	'animateColor',
+	'animateMotion',
+	'animateTransform',
+	'circle',
+	'clipPath',
+	'color-profile',
+	'cursor',
+	'defs',
+	'desc',
+	'discard',
+	'ellipse',
+	'feBlend',
+	'feColorMatrix',
+	'feComponentTransfer',
+	'feComposite',
+	'feConvolveMatrix',
+	'feDiffuseLighting',
+	'feDisplacementMap',
+	'feDistantLight',
+	'feDropShadow',
+	'feFlood',
+	'feFuncA',
+	'feFuncB',
+	'feFuncG',
+	'feFuncR',
+	'feGaussianBlur',
+	'feImage',
+	'feMerge',
+	'feMergeNode',
+	'feMorphology',
+	'feOffset',
+	'fePointLight',
+	'feSpecularLighting',
+	'feSpotLight',
+	'feTile',
+	'feTurbulence',
+	'filter',
+	'font',
+	'font-face',
+	'font-face-format',
+	'font-face-name',
+	'font-face-src',
+	'font-face-uri',
+	'foreignObject',
+	'g',
+	'glyph',
+	'glyphRef',
+	'hatch',
+	'hatchpath',
+	'hkern',
+	'image',
+	'line',
+	'linearGradient',
+	'marker',
+	'mask',
+	'mesh',
+	'meshgradient',
+	'meshpatch',
+	'meshrow',
+	'metadata',
+	'missing-glyph',
+	'mpath',
+	'path',
+	'pattern',
+	'polygon',
+	'polyline',
+	'radialGradient',
+	'rect',
+	'set',
+	'solidcolor',
+	'stop',
+	'svg',
+	'switch',
+	'symbol',
+	'text',
+	'textPath',
+	'tref',
+	'tspan',
+	'unknown',
+	'use',
+	'view',
+	'vkern'
+];
+
+/** @param {string} name */
+export function is_svg(name) {
+	return SVG_ELEMENTS.includes(name);
+}
+
+const MATHML_ELEMENTS = [
+	'annotation',
+	'annotation-xml',
+	'maction',
+	'math',
+	'merror',
+	'mfrac',
+	'mi',
+	'mmultiscripts',
+	'mn',
+	'mo',
+	'mover',
+	'mpadded',
+	'mphantom',
+	'mprescripts',
+	'mroot',
+	'mrow',
+	'ms',
+	'mspace',
+	'msqrt',
+	'mstyle',
+	'msub',
+	'msubsup',
+	'msup',
+	'mtable',
+	'mtd',
+	'mtext',
+	'mtr',
+	'munder',
+	'munderover',
+	'semantics'
+];
+
+/** @param {string} name */
+export function is_mathml(name) {
+	return MATHML_ELEMENTS.includes(name);
+}
+
+const RUNES = /** @type {const} */ ([
+	'$state',
+	'$state.frozen',
+	'$state.snapshot',
+	'$state.is',
+	'$props',
+	'$bindable',
+	'$derived',
+	'$derived.by',
+	'$effect',
+	'$effect.pre',
+	'$effect.tracking',
+	'$effect.root',
+	'$inspect',
+	'$inspect().with',
+	'$host'
+]);
+
+/**
+ * @param {string} name
+ * @returns {name is RUNES[number]}
+ */
+export function is_rune(name) {
+	return RUNES.includes(/** @type {RUNES[number]} */ (name));
+}

From 4fd7834169a02bcbab4a9d0c9f97f790a9a4e4f2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 1 Aug 2024 20:31:14 -0400
Subject: [PATCH 051/196] chore: rename serialize_ prefix to build_ (#12696)

---
 .../3-transform/client/transform-client.js    |  8 +--
 .../phases/3-transform/client/utils.js        | 30 ++++-----
 .../client/visitors/AssignmentExpression.js   |  4 +-
 .../3-transform/client/visitors/Attribute.js  |  4 +-
 .../client/visitors/BindDirective.js          | 14 ++--
 .../3-transform/client/visitors/ClassBody.js  |  4 +-
 .../3-transform/client/visitors/Component.js  |  6 +-
 .../3-transform/client/visitors/EachBlock.js  | 19 ++----
 .../3-transform/client/visitors/Fragment.js   | 10 +--
 .../client/visitors/FunctionDeclaration.js    |  4 +-
 .../3-transform/client/visitors/Identifier.js |  4 +-
 .../client/visitors/LabeledStatement.js       |  4 +-
 .../client/visitors/OnDirective.js            |  4 +-
 .../client/visitors/RegularElement.js         | 64 +++++++++----------
 .../client/visitors/SlotElement.js            |  4 +-
 .../client/visitors/SvelteComponent.js        |  4 +-
 .../client/visitors/SvelteElement.js          | 30 ++++-----
 .../3-transform/client/visitors/SvelteSelf.js |  4 +-
 .../client/visitors/TitleElement.js           |  4 +-
 .../client/visitors/UpdateExpression.js       | 11 +---
 .../client/visitors/shared/component.js       | 24 +++----
 .../client/visitors/shared/element.js         | 30 ++++-----
 .../client/visitors/shared/fragment.js        |  8 +--
 .../client/visitors/shared/function.js        |  4 +-
 .../client/visitors/shared/utils.js           | 16 ++---
 .../server/visitors/AssignmentExpression.js   | 10 +--
 .../3-transform/server/visitors/Component.js  |  4 +-
 .../3-transform/server/visitors/Fragment.js   |  4 +-
 .../3-transform/server/visitors/Identifier.js |  4 +-
 .../server/visitors/RegularElement.js         | 10 +--
 .../server/visitors/SlotElement.js            |  4 +-
 .../server/visitors/SvelteComponent.js        |  8 +--
 .../server/visitors/SvelteElement.js          |  8 +--
 .../3-transform/server/visitors/SvelteSelf.js |  4 +-
 .../server/visitors/TitleElement.js           |  4 +-
 .../server/visitors/shared/component.js       |  8 +--
 .../server/visitors/shared/element.js         | 42 ++++++------
 .../server/visitors/shared/utils.js           |  8 +--
 38 files changed, 200 insertions(+), 236 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index d37e34dc65..fee42359ed 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -5,7 +5,7 @@
 import { walk } from 'zimmerframe';
 import * as b from '../../../utils/builders.js';
 import { set_scope } from '../../scope.js';
-import { serialize_get_binding } from './utils.js';
+import { build_getter } from './utils.js';
 import { render_stylesheet } from '../css/index.js';
 import { dev, filename } from '../../../state.js';
 import { AnimateDirective } from './visitors/AnimateDirective.js';
@@ -198,7 +198,7 @@ export function client_component(analysis, options) {
 			}
 
 			// We're creating an arrow function that gets the store value which minifies better for two or more references
-			const store_reference = serialize_get_binding(b.id(name.slice(1)), instance_state);
+			const store_reference = build_getter(b.id(name.slice(1)), instance_state);
 			const store_get = b.call('$.store_get', store_reference, b.literal(name), b.id('$$stores'));
 			store_setup.push(
 				b.const(
@@ -240,7 +240,7 @@ export function client_component(analysis, options) {
 	/** @type {Array<ESTree.Property | ESTree.SpreadElement>} */
 	const component_returned_object = analysis.exports.flatMap(({ name, alias }) => {
 		const binding = instance_state.scope.get(name);
-		const expression = serialize_get_binding(b.id(name), instance_state);
+		const expression = build_getter(b.id(name), instance_state);
 		const getter = b.get(alias ?? name, [b.return(expression)]);
 
 		if (expression.type === 'Identifier') {
@@ -365,7 +365,7 @@ export function client_component(analysis, options) {
 						'$.bind_prop',
 						b.id('$$props'),
 						b.literal(alias ?? name),
-						serialize_get_binding(b.id(name), instance_state)
+						build_getter(b.id(name), instance_state)
 					)
 				)
 			);
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 60d5ebf802..de23d1f789 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -32,7 +32,7 @@ export function get_assignment_value(node, { state, visit }) {
 			: // turn something like x += 1 into x = x + 1
 				b.binary(
 					/** @type {BinaryOperator} */ (operator.slice(0, -1)),
-					serialize_get_binding(node.left, state),
+					build_getter(node.left, state),
 					/** @type {Expression} */ (visit(node.right))
 				);
 	} else if (
@@ -72,7 +72,7 @@ export function is_state_source(binding, state) {
  * @param {ClientTransformState} state
  * @returns {Expression}
  */
-export function serialize_get_binding(node, state) {
+export function build_getter(node, state) {
 	const binding = state.scope.get(node.name);
 
 	if (binding === null || node === binding.node) {
@@ -130,7 +130,7 @@ export function serialize_get_binding(node, state) {
  * @param {{skip_proxy_and_freeze?: boolean}} [options]
  * @returns {Expression}
  */
-export function serialize_set_binding(node, context, fallback, prefix, options) {
+export function build_setter(node, context, fallback, prefix, options) {
 	const { state, visit } = context;
 
 	const assignee = node.left;
@@ -154,9 +154,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 			const value = path.expression?.(b.id(tmp_id));
 			const assignment = b.assignment('=', path.node, value);
 			original_assignments.push(assignment);
-			assignments.push(
-				serialize_set_binding(assignment, context, () => assignment, prefix, options)
-			);
+			assignments.push(build_setter(assignment, context, () => assignment, prefix, options));
 		}
 
 		if (assignments.every((assignment, i) => assignment === original_assignments[i])) {
@@ -213,7 +211,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 							assignment.right =
 								private_state.kind === 'frozen_state'
 									? b.call('$.freeze', value)
-									: serialize_proxy_reassignment(value, private_state.id);
+									: build_proxy_reassignment(value, private_state.id);
 							return assignment;
 						}
 					}
@@ -226,7 +224,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 							should_proxy_or_freeze(value, context.state.scope)
 							? private_state.kind === 'frozen_state'
 								? b.call('$.freeze', value)
-								: serialize_proxy_reassignment(value, private_state.id)
+								: build_proxy_reassignment(value, private_state.id)
 							: value
 					);
 				}
@@ -250,7 +248,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 					assignment.right =
 						public_state.kind === 'frozen_state'
 							? b.call('$.freeze', value)
-							: serialize_proxy_reassignment(value, public_state.id);
+							: build_proxy_reassignment(value, public_state.id);
 					return assignment;
 				}
 			}
@@ -324,7 +322,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 			if ((binding.kind === 'prop' || binding.kind === 'bindable_prop') && !is_initial_proxy) {
 				return b.call(left, value);
 			} else if (is_store) {
-				return b.call('$.store_set', serialize_get_binding(b.id(left_name), state), value);
+				return b.call('$.store_set', build_getter(b.id(left_name), state), value);
 			} else {
 				let call;
 				if (binding.kind === 'state') {
@@ -334,7 +332,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 						context.state.analysis.runes &&
 							!options?.skip_proxy_and_freeze &&
 							should_proxy_or_freeze(value, context.state.scope)
-							? serialize_proxy_reassignment(value, left_name)
+							? build_proxy_reassignment(value, left_name)
 							: value
 					);
 				} else if (binding.kind === 'frozen_state') {
@@ -357,7 +355,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 							!options?.skip_proxy_and_freeze &&
 							should_proxy_or_freeze(value, context.state.scope) &&
 							binding.kind === 'bindable_prop'
-							? serialize_proxy_reassignment(value, left_name)
+							? build_proxy_reassignment(value, left_name)
 							: value
 					);
 				} else {
@@ -401,7 +399,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 				return maybe_skip_ownership_validation(
 					b.call(
 						'$.store_mutate',
-						serialize_get_binding(b.id(left_name), state),
+						build_getter(b.id(left_name), state),
 						b.assignment(node.operator, /** @type {Pattern}} */ (visit_node(node.left)), value),
 						b.call('$.untrack', b.id('$' + left_name))
 					)
@@ -453,7 +451,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
 	};
 
 	if (value.type === 'BinaryExpression' && /** @type {any} */ (value.operator) === '??') {
-		return b.logical('??', serialize_get_binding(b.id(left_name), state), serialize());
+		return b.logical('??', build_getter(b.id(left_name), state), serialize());
 	}
 
 	return serialize();
@@ -463,7 +461,7 @@ export function serialize_set_binding(node, context, fallback, prefix, options)
  * @param {Expression} value
  * @param {PrivateIdentifier | string} proxy_reference
  */
-export function serialize_proxy_reassignment(value, proxy_reference) {
+export function build_proxy_reassignment(value, proxy_reference) {
 	return dev
 		? b.call(
 				'$.proxy',
@@ -549,7 +547,7 @@ function get_hoistable_params(node, context) {
  * @param {ComponentContext} context
  * @returns {Pattern[]}
  */
-export function serialize_hoistable_params(node, context) {
+export function build_hoistable_params(node, context) {
 	const hoistable_params = get_hoistable_params(node, context);
 	node.metadata.hoistable_params = hoistable_params;
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
index 6b52647587..fefc11bf1f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
@@ -1,11 +1,11 @@
 /** @import { AssignmentExpression } from 'estree' */
 /** @import { Context } from '../types' */
-import { serialize_set_binding } from '../utils.js';
+import { build_setter } from '../utils.js';
 
 /**
  * @param {AssignmentExpression} node
  * @param {Context} context
  */
 export function AssignmentExpression(node, context) {
-	return serialize_set_binding(node, context, context.next);
+	return build_setter(node, context, context.next);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Attribute.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Attribute.js
index 732382a5d6..1fcf110216 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Attribute.js
@@ -1,7 +1,7 @@
 /** @import { Attribute } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { is_event_attribute } from '../../../../utils/ast.js';
-import { serialize_event_attribute } from './shared/element.js';
+import { build_event_attribute } from './shared/element.js';
 
 /**
  * @param {Attribute} node
@@ -9,6 +9,6 @@ import { serialize_event_attribute } from './shared/element.js';
  */
 export function Attribute(node, context) {
 	if (is_event_attribute(node)) {
-		serialize_event_attribute(node, context);
+		build_event_attribute(node, context);
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
index 5211cbe392..c7aa8fddf2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
@@ -5,9 +5,9 @@ import { dev, is_ignored } from '../../../../state.js';
 import { is_text_attribute } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
 import { binding_properties } from '../../../bindings.js';
-import { serialize_set_binding } from '../utils.js';
-import { serialize_attribute_value } from './shared/element.js';
-import { serialize_bind_this, serialize_validate_binding } from './shared/utils.js';
+import { build_setter } from '../utils.js';
+import { build_attribute_value } from './shared/element.js';
+import { build_bind_this, build_validate_binding } from './shared/utils.js';
 
 /**
  * @param {BindDirective} node
@@ -31,7 +31,7 @@ export function BindDirective(node, context) {
 		!is_ignored(node, 'binding_property_non_reactive')
 	) {
 		context.state.init.push(
-			serialize_validate_binding(
+			build_validate_binding(
 				context.state,
 				node,
 				/**@type {MemberExpression} */ (context.visit(expression))
@@ -43,7 +43,7 @@ export function BindDirective(node, context) {
 	const assignment = b.assignment('=', expression, b.id('$$value'));
 	const setter = b.arrow(
 		[b.id('$$value')],
-		serialize_set_binding(
+		build_setter(
 			assignment,
 			context,
 			() => /** @type {Expression} */ (context.visit(assignment)),
@@ -161,7 +161,7 @@ export function BindDirective(node, context) {
 				break;
 
 			case 'this':
-				call = serialize_bind_this(expression, context.state.node, context);
+				call = build_bind_this(expression, context.state.node, context);
 				break;
 
 			case 'textContent':
@@ -212,7 +212,7 @@ export function BindDirective(node, context) {
 					if (value !== undefined) {
 						group_getter = b.thunk(
 							b.block([
-								b.stmt(serialize_attribute_value(value, context)[1]),
+								b.stmt(build_attribute_value(value, context)[1]),
 								b.return(/** @type {Expression} */ (context.visit(expression)))
 							])
 						);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
index b817c929e2..aa9931ade3 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
@@ -5,7 +5,7 @@ import { dev, is_ignored } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { regex_invalid_identifier_chars } from '../../../patterns.js';
 import { get_rune } from '../../../scope.js';
-import { serialize_proxy_reassignment, should_proxy_or_freeze } from '../utils.js';
+import { build_proxy_reassignment, should_proxy_or_freeze } from '../utils.js';
 
 /**
  * @param {ClassBody} node
@@ -149,7 +149,7 @@ export function ClassBody(node, context) {
 								'set',
 								definition.key,
 								[value],
-								[b.stmt(b.call('$.set', member, serialize_proxy_reassignment(value, field.id)))]
+								[b.stmt(b.call('$.set', member, build_proxy_reassignment(value, field.id)))]
 							)
 						);
 					}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
index b212fac0bc..9ecde4849e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js
@@ -2,7 +2,7 @@
 /** @import { Component } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
-import { serialize_component } from './shared/component.js';
+import { build_component } from './shared/component.js';
 
 /**
  * @param {Component} node
@@ -11,7 +11,7 @@ import { serialize_component } from './shared/component.js';
 export function Component(node, context) {
 	if (node.metadata.dynamic) {
 		// Handle dynamic references to what seems like static inline components
-		const component = serialize_component(node, '$$component', context, b.id('$$anchor'));
+		const component = build_component(node, '$$component', context, b.id('$$anchor'));
 		context.state.init.push(
 			b.stmt(
 				b.call(
@@ -27,6 +27,6 @@ export function Component(node, context) {
 		return;
 	}
 
-	const component = serialize_component(node, node.name, context);
+	const component = build_component(node, node.name, context);
 	context.state.init.push(component);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
index 8329c822bc..622c5b579f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
@@ -12,12 +12,7 @@ import {
 import { dev } from '../../../../state.js';
 import { extract_paths, object } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
-import {
-	get_assignment_value,
-	serialize_get_binding,
-	serialize_set_binding,
-	with_loc
-} from '../utils.js';
+import { get_assignment_value, build_getter, build_setter, with_loc } from '../utils.js';
 
 /**
  * @param {EachBlock} node
@@ -94,7 +89,7 @@ export function EachBlock(node, context) {
 	// Legacy mode: find the parent each blocks which contain the arrays to invalidate
 	const indirect_dependencies = collect_parent_each_blocks(context).flatMap((block) => {
 		const array = /** @type {Expression} */ (context.visit(block.expression));
-		const transitive_dependencies = serialize_transitive_dependencies(
+		const transitive_dependencies = build_transitive_dependencies(
 			block.metadata.references,
 			context
 		);
@@ -106,7 +101,7 @@ export function EachBlock(node, context) {
 	} else {
 		indirect_dependencies.push(collection);
 
-		const transitive_dependencies = serialize_transitive_dependencies(
+		const transitive_dependencies = build_transitive_dependencies(
 			each_node_meta.references,
 			context
 		);
@@ -131,9 +126,9 @@ export function EachBlock(node, context) {
 	const create_mutation = (expression_for_id) => {
 		return (assignment, context) => {
 			if (assignment.left.type !== 'Identifier' && assignment.left.type !== 'MemberExpression') {
-				// serialize_set_binding turns other patterns into IIFEs and separates the assignments
+				// build_setter turns other patterns into IIFEs and separates the assignments
 				// into separate expressions, at which point this is called again with an identifier or member expression
-				return serialize_set_binding(assignment, context, () => assignment);
+				return build_setter(assignment, context, () => assignment);
 			}
 
 			const left = object(assignment.left);
@@ -282,7 +277,7 @@ function collect_parent_each_blocks(context) {
  * @param {Binding[]} references
  * @param {ComponentContext} context
  */
-function serialize_transitive_dependencies(references, context) {
+function build_transitive_dependencies(references, context) {
 	/** @type {Set<Binding>} */
 	const dependencies = new Set();
 
@@ -293,7 +288,7 @@ function serialize_transitive_dependencies(references, context) {
 		}
 	}
 
-	return [...dependencies].map((dep) => serialize_get_binding({ ...dep.node }, context.state));
+	return [...dependencies].map((dep) => build_getter({ ...dep.node }, context.state));
 }
 
 /**
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 368f33fd11..1696d9213e 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
@@ -7,7 +7,7 @@ import { dev } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { clean_nodes, infer_namespace } from '../../utils.js';
 import { process_children } from './shared/fragment.js';
-import { serialize_render_stmt } from './shared/utils.js';
+import { build_render_statement } from './shared/utils.js';
 
 /**
  * @param {Fragment} node
@@ -97,7 +97,7 @@ export function Fragment(node, context) {
 				'$.add_locations',
 				call,
 				b.member(b.id(context.state.analysis.name), b.id('$.FILENAME'), true),
-				serialize_locations(state.locations)
+				build_locations(state.locations)
 			);
 		}
 
@@ -184,7 +184,7 @@ export function Fragment(node, context) {
 	}
 
 	if (state.update.length > 0) {
-		body.push(serialize_render_stmt(state.update));
+		body.push(build_render_statement(state.update));
 	}
 
 	body.push(...state.after_update);
@@ -221,13 +221,13 @@ function get_template_function(namespace, state) {
 /**
  * @param {SourceLocation[]} locations
  */
-function serialize_locations(locations) {
+function build_locations(locations) {
 	return b.array(
 		locations.map((loc) => {
 			const expression = b.array([b.literal(loc[0]), b.literal(loc[1])]);
 
 			if (loc.length === 3) {
-				expression.elements.push(serialize_locations(loc[2]));
+				expression.elements.push(build_locations(loc[2]));
 			}
 
 			return expression;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
index 8f2eca91b1..f223d748ca 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
@@ -1,6 +1,6 @@
 /** @import { FunctionDeclaration } from 'estree' */
 /** @import { ComponentContext } from '../types' */
-import { serialize_hoistable_params } from '../utils.js';
+import { build_hoistable_params } from '../utils.js';
 import * as b from '../../../../utils/builders.js';
 
 /**
@@ -13,7 +13,7 @@ export function FunctionDeclaration(node, context) {
 	const state = { ...context.state, in_constructor: false };
 
 	if (metadata?.hoistable === true) {
-		const params = serialize_hoistable_params(node, context);
+		const params = build_hoistable_params(node, context);
 
 		context.state.hoisted.push(
 			/** @type {FunctionDeclaration} */ ({
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Identifier.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Identifier.js
index 7acdf179b6..ae62909eff 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Identifier.js
@@ -2,7 +2,7 @@
 /** @import { Context } from '../types' */
 import is_reference from 'is-reference';
 import * as b from '../../../../utils/builders.js';
-import { serialize_get_binding } from '../utils.js';
+import { build_getter } from '../utils.js';
 
 /**
  * @param {Identifier} node
@@ -36,6 +36,6 @@ export function Identifier(node, context) {
 			}
 		}
 
-		return serialize_get_binding(node, context.state);
+		return build_getter(node, context.state);
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js
index 24a6ed832c..262e44dfcb 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js
@@ -2,7 +2,7 @@
 /** @import { ReactiveStatement } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
-import { serialize_get_binding } from '../utils.js';
+import { build_getter } from '../utils.js';
 
 /**
  * @param {LabeledStatement} node
@@ -37,7 +37,7 @@ export function LabeledStatement(node, context) {
 		if (binding.kind === 'normal') continue;
 
 		const name = binding.node.name;
-		let serialized = serialize_get_binding(b.id(name), context.state);
+		let serialized = build_getter(b.id(name), context.state);
 
 		// If the binding is a prop, we need to deep read it because it could be fine-grained $state
 		// from a runes-component, where mutations don't trigger an update on the prop as a whole.
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js
index 171b19844e..dc7da67e16 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js
@@ -1,11 +1,11 @@
 /** @import { OnDirective } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import { serialize_event } from './shared/element.js';
+import { build_event } from './shared/element.js';
 
 /**
  * @param {OnDirective} node
  * @param {ComponentContext} context
  */
 export function OnDirective(node, context) {
-	serialize_event(node, node.metadata.expression, context);
+	build_event(node, node.metadata.expression, context);
 }
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 740fb2bb4d..0a107943aa 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
@@ -19,20 +19,16 @@ import {
 import * as b from '../../../../utils/builders.js';
 import { is_custom_element_node } from '../../../nodes.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
-import { serialize_get_binding } from '../utils.js';
+import { build_getter } from '../utils.js';
 import {
 	get_attribute_name,
-	serialize_attribute_value,
-	serialize_class_directives,
-	serialize_event_attribute,
-	serialize_style_directives
+	build_attribute_value,
+	build_class_directives,
+	build_event_attribute,
+	build_style_directives
 } from './shared/element.js';
 import { process_children } from './shared/fragment.js';
-import {
-	serialize_render_stmt,
-	serialize_update,
-	serialize_update_assignment
-} from './shared/utils.js';
+import { build_render_statement, build_update, build_update_assignment } from './shared/utils.js';
 
 /**
  * @param {RegularElement} node
@@ -200,7 +196,7 @@ export function RegularElement(node, context) {
 		if (node.name === 'img') {
 			img_might_be_lazy = true;
 		}
-		serialize_element_spread_attributes(
+		build_element_spread_attributes(
 			attributes,
 			context,
 			node,
@@ -218,12 +214,12 @@ export function RegularElement(node, context) {
 				) {
 					might_need_event_replaying = true;
 				}
-				serialize_event_attribute(attribute, context);
+				build_event_attribute(attribute, context);
 				continue;
 			}
 
 			if (needs_special_value_handling && attribute.name === 'value') {
-				serialize_element_special_value_attribute(node.name, node_id, attribute, context);
+				build_element_special_value_attribute(node.name, node_id, attribute, context);
 				continue;
 			}
 
@@ -234,7 +230,7 @@ export function RegularElement(node, context) {
 			) {
 				const name = get_attribute_name(node, attribute, context);
 				const literal_value = /** @type {Literal} */ (
-					serialize_attribute_value(attribute.value, context)[1]
+					build_attribute_value(attribute.value, context)[1]
 				).value;
 				if (name !== 'class' || literal_value) {
 					// TODO namespace=foreign probably doesn't want to do template stuff at all and instead use programmatic methods
@@ -252,8 +248,8 @@ export function RegularElement(node, context) {
 
 			const is =
 				is_custom_element && child_metadata.namespace !== 'foreign'
-					? serialize_custom_element_attribute_update_assignment(node_id, attribute, context)
-					: serialize_element_attribute_update_assignment(node, node_id, attribute, context);
+					? build_custom_element_attribute_update_assignment(node_id, attribute, context)
+					: build_element_attribute_update_assignment(node, node_id, attribute, context);
 			if (is) is_attributes_reactive = true;
 		}
 	}
@@ -264,8 +260,8 @@ export function RegularElement(node, context) {
 	}
 
 	// class/style directives must be applied last since they could override class/style attributes
-	serialize_class_directives(class_directives, node_id, context, is_attributes_reactive);
-	serialize_style_directives(
+	build_class_directives(class_directives, node_id, context, is_attributes_reactive);
+	build_style_directives(
 		style_directives,
 		node_id,
 		context,
@@ -343,7 +339,7 @@ export function RegularElement(node, context) {
 		context.state.init.push(
 			b.block([
 				...child_state.init,
-				child_state.update.length > 0 ? serialize_render_stmt(child_state.update) : b.empty,
+				child_state.update.length > 0 ? build_render_statement(child_state.update) : b.empty,
 				...child_state.after_update
 			])
 		);
@@ -399,7 +395,7 @@ function setup_select_synchronization(value_binding, context) {
 		b.thunk(
 			b.block(
 				names.map((name) => {
-					const serialized = serialize_get_binding(b.id(name), context.state);
+					const serialized = build_getter(b.id(name), context.state);
 					return b.stmt(serialized);
 				})
 			)
@@ -428,7 +424,7 @@ function setup_select_synchronization(value_binding, context) {
  * @param {Identifier} element_id
  * @param {boolean} needs_select_handling
  */
-function serialize_element_spread_attributes(
+function build_element_spread_attributes(
 	attributes,
 	context,
 	element,
@@ -444,7 +440,7 @@ function serialize_element_spread_attributes(
 		if (attribute.type === 'Attribute') {
 			const name = get_attribute_name(element, attribute, context);
 			// TODO: handle has_call
-			const [, value] = serialize_attribute_value(attribute.value, context);
+			const [, value] = build_attribute_value(attribute.value, context);
 
 			if (
 				name === 'is' &&
@@ -501,7 +497,7 @@ function serialize_element_spread_attributes(
 
 	// objects could contain reactive getters -> play it safe and always assume spread attributes are reactive
 	if (needs_isolation) {
-		context.state.init.push(serialize_update(update));
+		context.state.init.push(build_update(update));
 	} else {
 		context.state.update.push(update);
 	}
@@ -553,12 +549,12 @@ function serialize_element_spread_attributes(
  * @param {ComponentContext} context
  * @returns {boolean}
  */
-function serialize_element_attribute_update_assignment(element, node_id, attribute, context) {
+function build_element_attribute_update_assignment(element, node_id, attribute, context) {
 	const state = context.state;
 	const name = get_attribute_name(element, attribute, context);
 	const is_svg = context.state.metadata.namespace === 'svg' || element.name === 'svg';
 	const is_mathml = context.state.metadata.namespace === 'mathml';
-	let [has_call, value] = serialize_attribute_value(attribute.value, context);
+	let [has_call, value] = build_attribute_value(attribute.value, context);
 
 	// The foreign namespace doesn't have any special handling, everything goes through the attr function
 	if (context.state.metadata.namespace === 'foreign') {
@@ -574,7 +570,7 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 
 		if (attribute.metadata.expression.has_state) {
 			const id = state.scope.generate(`${node_id.name}_${name}`);
-			serialize_update_assignment(state, id, undefined, value, statement);
+			build_update_assignment(state, id, undefined, value, statement);
 			return true;
 		} else {
 			state.init.push(statement);
@@ -619,7 +615,7 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 
 	if (attribute.metadata.expression.has_state) {
 		if (has_call) {
-			state.init.push(serialize_update(update));
+			state.init.push(build_update(update));
 		} else {
 			state.update.push(update);
 		}
@@ -631,22 +627,22 @@ function serialize_element_attribute_update_assignment(element, node_id, attribu
 }
 
 /**
- * Like `serialize_element_attribute_update_assignment` but without any special attribute treatment.
+ * Like `build_element_attribute_update_assignment` but without any special attribute treatment.
  * @param {Identifier}	node_id
  * @param {Attribute} attribute
  * @param {ComponentContext} context
  * @returns {boolean}
  */
-function serialize_custom_element_attribute_update_assignment(node_id, attribute, context) {
+function build_custom_element_attribute_update_assignment(node_id, attribute, context) {
 	const state = context.state;
 	const name = attribute.name; // don't lowercase, as we set the element's property, which might be case sensitive
-	let [has_call, value] = serialize_attribute_value(attribute.value, context);
+	let [has_call, value] = build_attribute_value(attribute.value, context);
 
 	const update = b.stmt(b.call('$.set_custom_element_data', node_id, b.literal(name), value));
 
 	if (attribute.metadata.expression.has_state) {
 		if (has_call) {
-			state.init.push(serialize_update(update));
+			state.init.push(build_update(update));
 		} else {
 			state.update.push(update);
 		}
@@ -667,9 +663,9 @@ function serialize_custom_element_attribute_update_assignment(node_id, attribute
  * @param {ComponentContext} context
  * @returns {boolean}
  */
-function serialize_element_special_value_attribute(element, node_id, attribute, context) {
+function build_element_special_value_attribute(element, node_id, attribute, context) {
 	const state = context.state;
-	const [, value] = serialize_attribute_value(attribute.value, context);
+	const [, value] = build_attribute_value(attribute.value, context);
 
 	const inner_assignment = b.assignment(
 		'=',
@@ -705,7 +701,7 @@ function serialize_element_special_value_attribute(element, node_id, attribute,
 
 	if (is_reactive) {
 		const id = state.scope.generate(`${node_id.name}_value`);
-		serialize_update_assignment(
+		build_update_assignment(
 			state,
 			id,
 			// `<option>` is a special case: The value property reflects to the DOM. If the value is set to undefined,
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
index 2b7a82f8a5..a2ba5efff3 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
@@ -2,7 +2,7 @@
 /** @import { SlotElement } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
-import { serialize_attribute_value } from './shared/element.js';
+import { build_attribute_value } from './shared/element.js';
 
 /**
  * @param {SlotElement} node
@@ -30,7 +30,7 @@ export function SlotElement(node, context) {
 		if (attribute.type === 'SpreadAttribute') {
 			spreads.push(b.thunk(/** @type {Expression} */ (context.visit(attribute))));
 		} else if (attribute.type === 'Attribute') {
-			const [, value] = serialize_attribute_value(attribute.value, context);
+			const [, value] = build_attribute_value(attribute.value, context);
 			if (attribute.name === 'name') {
 				name = value;
 				is_default = false;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteComponent.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteComponent.js
index 8319def679..f24fa9cec5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteComponent.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteComponent.js
@@ -1,12 +1,12 @@
 /** @import { SvelteComponent } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import { serialize_component } from './shared/component.js';
+import { build_component } from './shared/component.js';
 
 /**
  * @param {SvelteComponent} node
  * @param {ComponentContext} context
  */
 export function SvelteComponent(node, context) {
-	const component = serialize_component(node, '$$component', context);
+	const component = build_component(node, '$$component', context);
 	context.state.init.push(component);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
index 8becd58c90..c1391d9a25 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
@@ -12,11 +12,11 @@ import {
 import * as b from '../../../../utils/builders.js';
 import { determine_namespace_for_children } from '../../utils.js';
 import {
-	serialize_attribute_value,
-	serialize_class_directives,
-	serialize_style_directives
+	build_attribute_value,
+	build_class_directives,
+	build_style_directives
 } from './shared/element.js';
-import { serialize_render_stmt, serialize_update } from './shared/utils.js';
+import { build_render_statement, build_update } from './shared/utils.js';
 
 /**
  * @param {SvelteElement} node
@@ -83,17 +83,11 @@ export function SvelteElement(node, context) {
 	// Always use spread because we don't know whether the element is a custom element or not,
 	// therefore we need to do the "how to set an attribute" logic at runtime.
 	const is_attributes_reactive =
-		serialize_dynamic_element_attributes(attributes, inner_context, element_id) !== null;
+		build_dynamic_element_attributes(attributes, inner_context, element_id) !== null;
 
 	// class/style directives must be applied last since they could override class/style attributes
-	serialize_class_directives(class_directives, element_id, inner_context, is_attributes_reactive);
-	serialize_style_directives(
-		style_directives,
-		element_id,
-		inner_context,
-		is_attributes_reactive,
-		true
-	);
+	build_class_directives(class_directives, element_id, inner_context, is_attributes_reactive);
+	build_style_directives(style_directives, element_id, inner_context, is_attributes_reactive, true);
 
 	const get_tag = b.thunk(/** @type {Expression} */ (context.visit(node.tag)));
 
@@ -107,7 +101,7 @@ export function SvelteElement(node, context) {
 	/** @type {Statement[]} */
 	const inner = inner_context.state.init;
 	if (inner_context.state.update.length > 0) {
-		inner.push(serialize_render_stmt(inner_context.state.update));
+		inner.push(build_render_statement(inner_context.state.update));
 	}
 	inner.push(...inner_context.state.after_update);
 	inner.push(
@@ -132,7 +126,7 @@ export function SvelteElement(node, context) {
 				get_tag,
 				node.metadata.svg || node.metadata.mathml ? b.true : b.false,
 				inner.length > 0 && b.arrow([element_id, b.id('$$anchor')], b.block(inner)),
-				dynamic_namespace && b.thunk(serialize_attribute_value(dynamic_namespace, context)[1]),
+				dynamic_namespace && b.thunk(build_attribute_value(dynamic_namespace, context)[1]),
 				location && b.array([b.literal(location.line), b.literal(location.column)])
 			)
 		)
@@ -147,7 +141,7 @@ export function SvelteElement(node, context) {
  * @param {Identifier} element_id
  * @returns {boolean}
  */
-function serialize_dynamic_element_attributes(attributes, context, element_id) {
+function build_dynamic_element_attributes(attributes, context, element_id) {
 	if (attributes.length === 0) {
 		if (context.state.analysis.css.hash) {
 			context.state.init.push(
@@ -167,7 +161,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
 
 	for (const attribute of attributes) {
 		if (attribute.type === 'Attribute') {
-			const [, value] = serialize_attribute_value(attribute.value, context);
+			const [, value] = build_attribute_value(attribute.value, context);
 
 			if (
 				is_event_attribute(attribute) &&
@@ -212,7 +206,7 @@ function serialize_dynamic_element_attributes(attributes, context, element_id) {
 		);
 
 		if (needs_isolation) {
-			context.state.init.push(serialize_update(update));
+			context.state.init.push(build_update(update));
 			return false;
 		}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteSelf.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteSelf.js
index 11667026ad..815f6376e4 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteSelf.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteSelf.js
@@ -1,12 +1,12 @@
 /** @import { SvelteSelf } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import { serialize_component } from './shared/component.js';
+import { build_component } from './shared/component.js';
 
 /**
  * @param {SvelteSelf} node
  * @param {ComponentContext} context
  */
 export function SvelteSelf(node, context) {
-	const component = serialize_component(node, context.state.analysis.name, context);
+	const component = build_component(node, context.state.analysis.name, context);
 	context.state.init.push(component);
 }
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 dfd0a331d5..93ff3cc664 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,7 +1,7 @@
 /** @import { TitleElement, Text } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
-import { serialize_template_literal } from './shared/utils.js';
+import { build_template_literal } from './shared/utils.js';
 
 /**
  * @param {TitleElement} node
@@ -27,7 +27,7 @@ export function TitleElement(node, context) {
 				b.assignment(
 					'=',
 					b.member(b.id('$.document'), b.id('title')),
-					serialize_template_literal(
+					build_template_literal(
 						/** @type {any} */ (node.fragment.nodes),
 						context.visit,
 						context.state
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
index 22676d4118..5f8685eb3b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
@@ -2,7 +2,7 @@
 /** @import { Context } from '../types' */
 import { is_ignored } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
-import { serialize_get_binding, serialize_set_binding } from '../utils.js';
+import { build_getter, build_setter } from '../utils.js';
 
 /**
  * @param {UpdateExpression} node
@@ -34,7 +34,7 @@ export function UpdateExpression(node, context) {
 
 			if (is_store) {
 				fn += '_store';
-				args.push(serialize_get_binding(b.id(name), context.state), b.call('$' + name));
+				args.push(build_getter(b.id(name), context.state), b.call('$' + name));
 			} else {
 				if (binding.kind === 'prop' || binding.kind === 'bindable_prop') fn += '_prop';
 				args.push(b.id(name));
@@ -84,12 +84,7 @@ export function UpdateExpression(node, context) {
 		b.literal(1)
 	);
 
-	const serialized_assignment = serialize_set_binding(
-		assignment,
-		context,
-		() => assignment,
-		node.prefix
-	);
+	const serialized_assignment = build_setter(assignment, context, () => assignment, node.prefix);
 
 	const value = /** @type {Expression} */ (context.visit(argument));
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 72ea6b3ec2..eaeee5fdbc 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -5,13 +5,9 @@ import { dev, is_ignored } from '../../../../../state.js';
 import { get_attribute_chunks } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { is_element_node } from '../../../../nodes.js';
-import { create_derived, serialize_set_binding } from '../../utils.js';
-import {
-	serialize_bind_this,
-	serialize_event_handler,
-	serialize_validate_binding
-} from '../shared/utils.js';
-import { serialize_attribute_value } from '../shared/element.js';
+import { create_derived, build_setter } from '../../utils.js';
+import { build_bind_this, build_event_handler, build_validate_binding } from '../shared/utils.js';
+import { build_attribute_value } from '../shared/element.js';
 
 /**
  * @param {Component | SvelteComponent | SvelteSelf} node
@@ -20,7 +16,7 @@ import { serialize_attribute_value } from '../shared/element.js';
  * @param {Expression} anchor
  * @returns {Statement}
  */
-export function serialize_component(node, component_name, context, anchor = context.state.node) {
+export function build_component(node, component_name, context, anchor = context.state.node) {
 	/** @type {Array<Property[] | Expression>} */
 	const props_and_spreads = [];
 
@@ -74,7 +70,7 @@ export function serialize_component(node, component_name, context, anchor = cont
 			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
 		} else if (attribute.type === 'OnDirective') {
 			events[attribute.name] ||= [];
-			let handler = serialize_event_handler(attribute, null, context);
+			let handler = build_event_handler(attribute, null, context);
 			if (attribute.modifiers.includes('once')) {
 				handler = b.call('$.once', handler);
 			}
@@ -97,7 +93,7 @@ export function serialize_component(node, component_name, context, anchor = cont
 		} else if (attribute.type === 'Attribute') {
 			if (attribute.name.startsWith('--')) {
 				custom_css_props.push(
-					b.init(attribute.name, serialize_attribute_value(attribute.value, context)[1])
+					b.init(attribute.name, build_attribute_value(attribute.value, context)[1])
 				);
 				continue;
 			}
@@ -110,7 +106,7 @@ export function serialize_component(node, component_name, context, anchor = cont
 				has_children_prop = true;
 			}
 
-			const [, value] = serialize_attribute_value(attribute.value, context);
+			const [, value] = build_attribute_value(attribute.value, context);
 
 			if (attribute.metadata.expression.has_state) {
 				let arg = value;
@@ -145,7 +141,7 @@ export function serialize_component(node, component_name, context, anchor = cont
 				context.state.analysis.runes &&
 				!is_ignored(node, 'binding_property_non_reactive')
 			) {
-				context.state.init.push(serialize_validate_binding(context.state, attribute, expression));
+				context.state.init.push(build_validate_binding(context.state, attribute, expression));
 			}
 
 			if (attribute.name === 'this') {
@@ -169,7 +165,7 @@ export function serialize_component(node, component_name, context, anchor = cont
 				const assignment = b.assignment('=', attribute.expression, b.id('$$value'));
 				push_prop(
 					b.set(attribute.name, [
-						b.stmt(serialize_set_binding(assignment, context, () => context.visit(assignment)))
+						b.stmt(build_setter(assignment, context, () => context.visit(assignment)))
 					])
 				);
 			}
@@ -314,7 +310,7 @@ export function serialize_component(node, component_name, context, anchor = cont
 		const prev = fn;
 
 		fn = (node_id) => {
-			return serialize_bind_this(bind_this, prev(node_id), context);
+			return build_bind_this(bind_this, prev(node_id), context);
 		};
 	}
 
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 7f1127c7c5..e63593ca0e 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
@@ -8,8 +8,8 @@ import {
 } from '../../../../../../utils.js';
 import { get_attribute_expression } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { serialize_get_binding } from '../../utils.js';
-import { serialize_event_handler, serialize_template_literal, serialize_update } from './utils.js';
+import { build_getter } from '../../utils.js';
+import { build_event_handler, build_template_literal, build_update } from './utils.js';
 
 /**
  * Serializes each style directive into something like `$.set_style(element, style_property, value)`
@@ -20,7 +20,7 @@ import { serialize_event_handler, serialize_template_literal, serialize_update }
  * @param {boolean} is_attributes_reactive
  * @param {boolean} force_check Should be `true` if we can't rely on our cached value, because for example there's also a `style` attribute
  */
-export function serialize_style_directives(
+export function build_style_directives(
 	style_directives,
 	element_id,
 	context,
@@ -32,8 +32,8 @@ export function serialize_style_directives(
 	for (const directive of style_directives) {
 		let value =
 			directive.value === true
-				? serialize_get_binding({ name: directive.name, type: 'Identifier' }, context.state)
-				: serialize_attribute_value(directive.value, context)[1];
+				? build_getter({ name: directive.name, type: 'Identifier' }, context.state)
+				: build_attribute_value(directive.value, context)[1];
 
 		const update = b.stmt(
 			b.call(
@@ -49,7 +49,7 @@ export function serialize_style_directives(
 		const { has_state, has_call } = directive.metadata.expression;
 
 		if (!is_attributes_reactive && has_call) {
-			state.init.push(serialize_update(update));
+			state.init.push(build_update(update));
 		} else if (is_attributes_reactive || has_state || has_call) {
 			state.update.push(update);
 		} else {
@@ -66,7 +66,7 @@ export function serialize_style_directives(
  * @param {ComponentContext} context
  * @param {boolean} is_attributes_reactive
  */
-export function serialize_class_directives(
+export function build_class_directives(
 	class_directives,
 	element_id,
 	context,
@@ -80,7 +80,7 @@ export function serialize_class_directives(
 		const { has_state, has_call } = directive.metadata.expression;
 
 		if (!is_attributes_reactive && has_call) {
-			state.init.push(serialize_update(update));
+			state.init.push(build_update(update));
 		} else if (is_attributes_reactive || has_state || has_call) {
 			state.update.push(update);
 		} else {
@@ -94,7 +94,7 @@ export function serialize_class_directives(
  * @param {ComponentContext} context
  * @returns {[has_call: boolean, Expression]}
  */
-export function serialize_attribute_value(value, context) {
+export function build_attribute_value(value, context) {
 	if (value === true) {
 		return [false, b.literal(true)];
 	}
@@ -112,7 +112,7 @@ export function serialize_attribute_value(value, context) {
 		];
 	}
 
-	return serialize_template_literal(value, context.visit, context.state);
+	return build_template_literal(value, context.visit, context.state);
 }
 
 /**
@@ -136,7 +136,7 @@ export function get_attribute_name(element, attribute, context) {
  * @param {Attribute & { value: ExpressionTag | [ExpressionTag] }} node
  * @param {ComponentContext} context
  */
-export function serialize_event_attribute(node, context) {
+export function build_event_attribute(node, context) {
 	/** @type {string[]} */
 	const modifiers = [];
 
@@ -146,7 +146,7 @@ export function serialize_event_attribute(node, context) {
 		modifiers.push('capture');
 	}
 
-	serialize_event(
+	build_event(
 		{
 			name: event_name,
 			expression: get_attribute_expression(node),
@@ -166,14 +166,14 @@ export function serialize_event_attribute(node, context) {
  * @param {null | ExpressionMetadata} metadata
  * @param {ComponentContext} context
  */
-export function serialize_event(node, metadata, context) {
+export function build_event(node, metadata, context) {
 	const state = context.state;
 
 	/** @type {Expression} */
 	let expression;
 
 	if (node.expression) {
-		let handler = serialize_event_handler(node, metadata, context);
+		let handler = build_event_handler(node, metadata, context);
 		const event_name = node.name;
 		const delegated = node.delegated;
 
@@ -249,7 +249,7 @@ export function serialize_event(node, metadata, context) {
 			'$.event',
 			b.literal(node.name),
 			state.node,
-			serialize_event_handler(node, metadata, context)
+			build_event_handler(node, metadata, context)
 		);
 	}
 
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 15f70711b4..d03efc4fc3 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
@@ -2,7 +2,7 @@
 /** @import { ExpressionTag, SvelteNode, Text } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../../types' */
 import * as b from '../../../../../utils/builders.js';
-import { serialize_template_literal, serialize_update } from './utils.js';
+import { build_template_literal, build_update } from './utils.js';
 
 /**
  * Processes an array of template nodes, joining sibling text/expression nodes
@@ -44,7 +44,7 @@ export function process_children(nodes, expression, is_element, { visit, state }
 			);
 
 			if (node.metadata.expression.has_call && !within_bound_contenteditable) {
-				state.init.push(serialize_update(update));
+				state.init.push(build_update(update));
 			} else if (node.metadata.expression.has_state && !within_bound_contenteditable) {
 				state.update.push(update);
 			} else {
@@ -66,12 +66,12 @@ export function process_children(nodes, expression, is_element, { visit, state }
 
 			state.template.push(' ');
 
-			const [has_call, value] = serialize_template_literal(sequence, visit, state);
+			const [has_call, value] = build_template_literal(sequence, visit, state);
 
 			const update = b.stmt(b.call('$.set_text', text_id, value));
 
 			if (has_call && !within_bound_contenteditable) {
-				state.init.push(serialize_update(update));
+				state.init.push(build_update(update));
 			} else if (
 				sequence.some(
 					(node) => node.type === 'ExpressionTag' && node.metadata.expression.has_state
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
index 80b8f87df2..9939621890 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
@@ -1,6 +1,6 @@
 /** @import { ArrowFunctionExpression, FunctionExpression, Node } from 'estree' */
 /** @import { ComponentContext } from '../../types' */
-import { serialize_hoistable_params } from '../../utils.js';
+import { build_hoistable_params } from '../../utils.js';
 
 /**
  * @param {ArrowFunctionExpression | FunctionExpression} node
@@ -21,7 +21,7 @@ export const visit_function = (node, context) => {
 	}
 
 	if (metadata?.hoistable === true) {
-		const params = serialize_hoistable_params(node, context);
+		const params = build_hoistable_params(node, context);
 
 		return /** @type {FunctionExpression} */ ({
 			...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 8a4be97f70..f13830d715 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
@@ -16,7 +16,7 @@ import { locator } from '../../../../../state.js';
  * @param {ComponentClientTransformState} state
  * @returns {[boolean, TemplateLiteral]}
  */
-export function serialize_template_literal(values, visit, state) {
+export function build_template_literal(values, visit, state) {
 	/** @type {TemplateElement[]} */
 	const quasis = [];
 
@@ -76,7 +76,7 @@ export function serialize_template_literal(values, visit, state) {
 /**
  * @param {Statement} statement
  */
-export function serialize_update(statement) {
+export function build_update(statement) {
 	const body =
 		statement.type === 'ExpressionStatement' ? statement.expression : b.block([statement]);
 
@@ -86,9 +86,9 @@ export function serialize_update(statement) {
 /**
  * @param {Statement[]} update
  */
-export function serialize_render_stmt(update) {
+export function build_render_statement(update) {
 	return update.length === 1
-		? serialize_update(update[0])
+		? build_update(update[0])
 		: b.stmt(b.call('$.template_effect', b.thunk(b.block(update))));
 }
 
@@ -120,7 +120,7 @@ export function parse_directive_name(name) {
  * @param {Expression} value
  * @param {ExpressionStatement} update
  */
-export function serialize_update_assignment(state, id, init, value, update) {
+export function build_update_assignment(state, id, init, value, update) {
 	state.init.push(b.var(id, init));
 	state.update.push(
 		b.if(b.binary('!==', b.id(id), b.assignment('=', b.id(id), value)), b.block([update]))
@@ -133,7 +133,7 @@ export function serialize_update_assignment(state, id, init, value, update) {
  * @param {null | ExpressionMetadata} metadata
  * @param {ComponentContext} context
  */
-export function serialize_event_handler(node, metadata, { state, visit }) {
+export function build_event_handler(node, metadata, { state, visit }) {
 	/** @type {Expression} */
 	let handler;
 
@@ -242,7 +242,7 @@ export function serialize_event_handler(node, metadata, { state, visit }) {
  * @param {Expression} value
  * @param {import('zimmerframe').Context<SvelteNode, ComponentClientTransformState>} context
  */
-export function serialize_bind_this(expression, value, { state, visit }) {
+export function build_bind_this(expression, value, { state, visit }) {
 	/** @type {Identifier[]} */
 	const ids = [];
 
@@ -308,7 +308,7 @@ export function serialize_bind_this(expression, value, { state, visit }) {
  * @param {BindDirective} binding
  * @param {MemberExpression} expression
  */
-export function serialize_validate_binding(state, binding, expression) {
+export function build_validate_binding(state, binding, expression) {
 	const string = state.analysis.source.slice(binding.start, binding.end);
 
 	const get_object = b.thunk(/** @type {Expression} */ (expression.object));
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
index 3cee0a4eb8..c349f64b3d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
@@ -3,7 +3,7 @@
 /** @import { Context, ServerTransformState } from '../types.js' */
 import * as b from '../../../../utils/builders.js';
 import { extract_paths } from '../../../../utils/ast.js';
-import { serialize_get_binding } from './shared/utils.js';
+import { build_getter } from './shared/utils.js';
 
 /**
  * @param {AssignmentExpression} node
@@ -27,7 +27,7 @@ export function AssignmentExpression(node, context) {
 		const assignments = extract_paths(node.left).map((path) => {
 			const value = path.expression?.(rhs);
 
-			let assignment = serialize_assignment('=', path.node, value, context);
+			let assignment = build_assignment('=', path.node, value, context);
 			if (assignment !== null) changed = true;
 
 			return assignment ?? b.assignment('=', path.node, value);
@@ -53,7 +53,7 @@ export function AssignmentExpression(node, context) {
 		return sequence;
 	}
 
-	return serialize_assignment(node.operator, node.left, node.right, context) || context.next();
+	return build_assignment(node.operator, node.left, node.right, context) || context.next();
 }
 
 /**
@@ -64,7 +64,7 @@ export function AssignmentExpression(node, context) {
  * @param {import('zimmerframe').Context<SvelteNode, ServerTransformState>} context
  * @returns {Expression | null}
  */
-function serialize_assignment(operator, left, right, context) {
+function build_assignment(operator, left, right, context) {
 	let object = left;
 
 	while (object.type === 'MemberExpression') {
@@ -89,7 +89,7 @@ function serialize_assignment(operator, left, right, context) {
 			// turn `x += 1` into `x = x + 1`
 			value = b.binary(
 				/** @type {BinaryOperator} */ (operator.slice(0, -1)),
-				serialize_get_binding(left, context.state),
+				build_getter(left, context.state),
 				value
 			);
 		}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/Component.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Component.js
index 2d07861581..33bf99b84d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/Component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Component.js
@@ -1,12 +1,12 @@
 /** @import { Component } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '../../../../utils/builders.js';
-import { serialize_inline_component } from './shared/component.js';
+import { build_inline_component } from './shared/component.js';
 
 /**
  * @param {Component} node
  * @param {ComponentContext} context
  */
 export function Component(node, context) {
-	serialize_inline_component(node, b.id(node.name), context);
+	build_inline_component(node, b.id(node.name), context);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/Fragment.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Fragment.js
index 1bc4b71457..64fde5b85c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/Fragment.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Fragment.js
@@ -2,7 +2,7 @@
 /** @import { ComponentContext, ComponentServerTransformState } from '../types.js' */
 import { clean_nodes, infer_namespace } from '../../utils.js';
 import * as b from '../../../../utils/builders.js';
-import { empty_comment, process_children, serialize_template } from './shared/utils.js';
+import { empty_comment, process_children, build_template } from './shared/utils.js';
 
 /**
  * @param {Fragment} node
@@ -42,5 +42,5 @@ export function Fragment(node, context) {
 
 	process_children(trimmed, { ...context, state });
 
-	return b.block([...state.init, ...serialize_template(state.template)]);
+	return b.block([...state.init, ...build_template(state.template)]);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/Identifier.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Identifier.js
index 1305f78426..b8c2699d54 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/Identifier.js
@@ -2,7 +2,7 @@
 /** @import { Context } from '../types.js' */
 import is_reference from 'is-reference';
 import * as b from '../../../../utils/builders.js';
-import { serialize_get_binding } from './shared/utils.js';
+import { build_getter } from './shared/utils.js';
 
 /**
  * @param {Identifier} node
@@ -14,6 +14,6 @@ export function Identifier(node, context) {
 			return b.id('$$sanitized_props');
 		}
 
-		return serialize_get_binding(node, context.state);
+		return build_getter(node, context.state);
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
index ef27ef1c39..642b9ba430 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
@@ -6,8 +6,8 @@ import { is_void } from '../../../../../utils.js';
 import { dev, locator } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { clean_nodes, determine_namespace_for_children } from '../../utils.js';
-import { serialize_element_attributes } from './shared/element.js';
-import { process_children, serialize_template } from './shared/utils.js';
+import { build_element_attributes } from './shared/element.js';
+import { process_children, build_template } from './shared/utils.js';
 
 /**
  * @param {RegularElement} node
@@ -26,7 +26,7 @@ export function RegularElement(node, context) {
 	};
 
 	context.state.template.push(b.literal(`<${node.name}`));
-	const body = serialize_element_attributes(node, { ...context, state });
+	const body = build_element_attributes(node, { ...context, state });
 	context.state.template.push(b.literal('>'));
 
 	if ((node.name === 'script' || node.name === 'style') && node.fragment.nodes.length === 1) {
@@ -89,8 +89,8 @@ export function RegularElement(node, context) {
 		state.template.push(
 			b.if(
 				id,
-				b.block(serialize_template([id])),
-				b.block([...inner_state.init, ...serialize_template(inner_state.template)])
+				b.block(build_template([id])),
+				b.block([...inner_state.init, ...build_template(inner_state.template)])
 			)
 		);
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js
index 4111b37861..01f98a5908 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SlotElement.js
@@ -2,7 +2,7 @@
 /** @import { SlotElement } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '../../../../utils/builders.js';
-import { empty_comment, serialize_attribute_value } from './shared/utils.js';
+import { empty_comment, build_attribute_value } from './shared/utils.js';
 
 /**
  * @param {SlotElement} node
@@ -22,7 +22,7 @@ export function SlotElement(node, context) {
 		if (attribute.type === 'SpreadAttribute') {
 			spreads.push(/** @type {Expression} */ (context.visit(attribute)));
 		} else if (attribute.type === 'Attribute') {
-			const value = serialize_attribute_value(attribute.value, context, false, true);
+			const value = build_attribute_value(attribute.value, context, false, true);
 
 			if (attribute.name === 'name') {
 				expression = b.member(b.member_id('$$props.$$slots'), value, true, true);
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteComponent.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteComponent.js
index 492ee6dbed..973ac790d6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteComponent.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteComponent.js
@@ -1,16 +1,12 @@
 /** @import { Expression } from 'estree' */
 /** @import { SvelteComponent } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import { serialize_inline_component } from './shared/component.js';
+import { build_inline_component } from './shared/component.js';
 
 /**
  * @param {SvelteComponent} node
  * @param {ComponentContext} context
  */
 export function SvelteComponent(node, context) {
-	serialize_inline_component(
-		node,
-		/** @type {Expression} */ (context.visit(node.expression)),
-		context
-	);
+	build_inline_component(node, /** @type {Expression} */ (context.visit(node.expression)), context);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
index ac30178ab0..acd9330698 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
@@ -4,8 +4,8 @@
 import { dev } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { determine_namespace_for_children } from '../../utils.js';
-import { serialize_element_attributes } from './shared/element.js';
-import { serialize_template } from './shared/utils.js';
+import { build_element_attributes } from './shared/element.js';
+import { build_template } from './shared/utils.js';
 
 /**
  * @param {SvelteElement} node
@@ -33,13 +33,13 @@ export function SvelteElement(node, context) {
 		init: []
 	};
 
-	serialize_element_attributes(node, { ...context, state });
+	build_element_attributes(node, { ...context, state });
 
 	if (dev) {
 		context.state.template.push(b.stmt(b.call('$.push_element', tag, b.id('$$payload'))));
 	}
 
-	const attributes = b.block([...state.init, ...serialize_template(state.template)]);
+	const attributes = b.block([...state.init, ...build_template(state.template)]);
 	const children = /** @type {BlockStatement} */ (context.visit(node.fragment, state));
 
 	context.state.template.push(
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteSelf.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteSelf.js
index ea855ae88b..a992abd3ea 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteSelf.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteSelf.js
@@ -1,12 +1,12 @@
 /** @import { SvelteSelf } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '../../../../utils/builders.js';
-import { serialize_inline_component } from './shared/component.js';
+import { build_inline_component } from './shared/component.js';
 
 /**
  * @param {SvelteSelf} node
  * @param {ComponentContext} context
  */
 export function SvelteSelf(node, context) {
-	serialize_inline_component(node, b.id(context.state.analysis.name), context);
+	build_inline_component(node, b.id(context.state.analysis.name), context);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/TitleElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/TitleElement.js
index fcec6cb719..ae215d37f8 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/TitleElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/TitleElement.js
@@ -1,7 +1,7 @@
 /** @import { TitleElement } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
 import * as b from '../../../../utils/builders.js';
-import { process_children, serialize_template } from './shared/utils.js';
+import { process_children, build_template } from './shared/utils.js';
 
 /**
  * @param {TitleElement} node
@@ -13,5 +13,5 @@ export function TitleElement(node, context) {
 	process_children(node.fragment.nodes, { ...context, state: { ...context.state, template } });
 	template.push(b.literal('</title>'));
 
-	context.state.init.push(...serialize_template(template, b.id('$$payload.title'), '='));
+	context.state.init.push(...build_template(template, b.id('$$payload.title'), '='));
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
index 19e0fd6e43..60b3498510 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
@@ -1,7 +1,7 @@
 /** @import { BlockStatement, Expression, Pattern, Property, Statement } from 'estree' */
 /** @import { Attribute, Component, LetDirective, SvelteComponent, SvelteSelf, TemplateNode, Text } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
-import { empty_comment, serialize_attribute_value } from './utils.js';
+import { empty_comment, build_attribute_value } from './utils.js';
 import * as b from '../../../../../utils/builders.js';
 import { is_element_node } from '../../../../nodes.js';
 
@@ -10,7 +10,7 @@ import { is_element_node } from '../../../../nodes.js';
  * @param {Expression} expression
  * @param {ComponentContext} context
  */
-export function serialize_inline_component(node, expression, context) {
+export function build_inline_component(node, expression, context) {
 	/** @type {Array<Property[] | Expression>} */
 	const props_and_spreads = [];
 
@@ -59,7 +59,7 @@ export function serialize_inline_component(node, expression, context) {
 			props_and_spreads.push(/** @type {Expression} */ (context.visit(attribute)));
 		} else if (attribute.type === 'Attribute') {
 			if (attribute.name.startsWith('--')) {
-				const value = serialize_attribute_value(attribute.value, context, false, true);
+				const value = build_attribute_value(attribute.value, context, false, true);
 				custom_css_props.push(b.init(attribute.name, value));
 				continue;
 			}
@@ -68,7 +68,7 @@ export function serialize_inline_component(node, expression, context) {
 				has_children_prop = true;
 			}
 
-			const value = serialize_attribute_value(attribute.value, context, false, true);
+			const value = build_attribute_value(attribute.value, context, false, true);
 			push_prop(b.prop('init', b.key(attribute.name), value));
 		} else if (attribute.type === 'BindDirective' && attribute.name !== 'this') {
 			// TODO this needs to turn the whole thing into a while loop because the binding could be mutated eagerly in the child
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index 51bcd605fc..fc99b87822 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -18,7 +18,7 @@ import {
 	ELEMENT_IS_NAMESPACED,
 	ELEMENT_PRESERVE_ATTRIBUTE_CASE
 } from '../../../../../../constants.js';
-import { serialize_attribute_value } from './utils.js';
+import { build_attribute_value } from './utils.js';
 import {
 	is_boolean_attribute,
 	is_content_editable_binding,
@@ -33,7 +33,7 @@ const WHITESPACE_INSENSITIVE_ATTRIBUTES = ['class', 'style'];
  * @param {RegularElement | SvelteElement} node
  * @param {import('zimmerframe').Context<SvelteNode, ComponentServerTransformState>} context
  */
-export function serialize_element_attributes(node, context) {
+export function build_element_attributes(node, context) {
 	/** @type {Array<Attribute | SpreadAttribute>} */
 	const attributes = [];
 
@@ -67,7 +67,7 @@ export function serialize_element_attributes(node, context) {
 						// also see related code in analysis phase
 						attribute.value[0].data = '\n' + attribute.value[0].data;
 					}
-					content = b.call('$.escape', serialize_attribute_value(attribute.value, context));
+					content = b.call('$.escape', build_attribute_value(attribute.value, context));
 				} else if (node.name !== 'select') {
 					// omit value attribute for select elements, it's irrelevant for the initially selected value and has no
 					// effect on the selected value after the user interacts with the select element (the value _property_ does, but not the attribute)
@@ -139,12 +139,12 @@ export function serialize_element_attributes(node, context) {
 							expression: is_checkbox
 								? b.call(
 										b.member(attribute.expression, b.id('includes')),
-										serialize_attribute_value(value_attribute.value, context)
+										build_attribute_value(value_attribute.value, context)
 									)
 								: b.binary(
 										'===',
 										attribute.expression,
-										serialize_attribute_value(value_attribute.value, context)
+										build_attribute_value(value_attribute.value, context)
 									),
 							metadata: {
 								expression: create_expression_metadata()
@@ -185,14 +185,14 @@ export function serialize_element_attributes(node, context) {
 		} else if (attribute.type === 'StyleDirective') {
 			style_directives.push(attribute);
 		} else if (attribute.type === 'LetDirective') {
-			// do nothing, these are handled inside `serialize_inline_component`
+			// do nothing, these are handled inside `build_inline_component`
 		} else {
 			context.visit(attribute);
 		}
 	}
 
 	if (class_directives.length > 0 && !has_spread) {
-		const class_attribute = serialize_class_directives(
+		const class_attribute = build_class_directives(
 			class_directives,
 			/** @type {Attribute | null} */ (attributes[class_index] ?? null)
 		);
@@ -202,7 +202,7 @@ export function serialize_element_attributes(node, context) {
 	}
 
 	if (style_directives.length > 0 && !has_spread) {
-		serialize_style_directives(
+		build_style_directives(
 			style_directives,
 			/** @type {Attribute | null} */ (attributes[style_index] ?? null),
 			context
@@ -213,19 +213,13 @@ export function serialize_element_attributes(node, context) {
 	}
 
 	if (has_spread) {
-		serialize_element_spread_attributes(
-			node,
-			attributes,
-			style_directives,
-			class_directives,
-			context
-		);
+		build_element_spread_attributes(node, attributes, style_directives, class_directives, context);
 	} else {
 		for (const attribute of /** @type {Attribute[]} */ (attributes)) {
 			if (attribute.value === true || is_text_attribute(attribute)) {
 				const name = get_attribute_name(node, attribute, context);
 				const literal_value = /** @type {Literal} */ (
-					serialize_attribute_value(
+					build_attribute_value(
 						attribute.value,
 						context,
 						WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
@@ -246,7 +240,7 @@ export function serialize_element_attributes(node, context) {
 			}
 
 			const name = get_attribute_name(node, attribute, context);
-			const value = serialize_attribute_value(
+			const value = build_attribute_value(
 				attribute.value,
 				context,
 				WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
@@ -290,7 +284,7 @@ function get_attribute_name(element, attribute, context) {
  * @param {ClassDirective[]} class_directives
  * @param {ComponentContext} context
  */
-function serialize_element_spread_attributes(
+function build_element_spread_attributes(
 	element,
 	attributes,
 	style_directives,
@@ -324,7 +318,7 @@ function serialize_element_spread_attributes(
 				directive.name,
 				directive.value === true
 					? b.id(directive.name)
-					: serialize_attribute_value(directive.value, context, true)
+					: build_attribute_value(directive.value, context, true)
 			)
 		);
 
@@ -341,7 +335,7 @@ function serialize_element_spread_attributes(
 		attributes.map((attribute) => {
 			if (attribute.type === 'Attribute') {
 				const name = get_attribute_name(element, attribute, context);
-				const value = serialize_attribute_value(
+				const value = build_attribute_value(
 					attribute.value,
 					context,
 					WHITESPACE_INSENSITIVE_ATTRIBUTES.includes(name)
@@ -363,7 +357,7 @@ function serialize_element_spread_attributes(
  * @param {Attribute | null} class_attribute
  * @returns
  */
-function serialize_class_directives(class_directives, class_attribute) {
+function build_class_directives(class_directives, class_attribute) {
 	const expressions = class_directives.map((directive) =>
 		b.conditional(directive.expression, b.literal(directive.name), b.literal(''))
 	);
@@ -415,12 +409,12 @@ function serialize_class_directives(class_directives, class_attribute) {
  * @param {Attribute | null} style_attribute
  * @param {ComponentContext} context
  */
-function serialize_style_directives(style_directives, style_attribute, context) {
+function build_style_directives(style_directives, style_attribute, context) {
 	const styles = style_directives.map((directive) => {
 		let value =
 			directive.value === true
 				? b.id(directive.name)
-				: serialize_attribute_value(directive.value, context, true);
+				: build_attribute_value(directive.value, context, true);
 		if (directive.modifiers.includes('important')) {
 			value = b.binary('+', value, b.literal(' !important'));
 		}
@@ -432,7 +426,7 @@ function serialize_style_directives(style_directives, style_attribute, context)
 			? b.object(styles)
 			: b.call(
 					'$.merge_styles',
-					serialize_attribute_value(style_attribute.value, context, true),
+					build_attribute_value(style_attribute.value, context, true),
 					b.object(styles)
 				);
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
index f7dc979e4c..fa93c8af92 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/utils.js
@@ -94,7 +94,7 @@ function is_statement(node) {
  * @param {AssignmentOperator} operator
  * @returns {Statement[]}
  */
-export function serialize_template(template, out = b.id('$$payload.out'), operator = '+=') {
+export function build_template(template, out = b.id('$$payload.out'), operator = '+=') {
 	/** @type {TemplateElement[]} */
 	let quasis = [];
 
@@ -152,7 +152,7 @@ export function serialize_template(template, out = b.id('$$payload.out'), operat
  * @param {boolean} is_component
  * @returns {Expression}
  */
-export function serialize_attribute_value(
+export function build_attribute_value(
 	value,
 	context,
 	trim_whitespace = false,
@@ -207,7 +207,7 @@ export function serialize_attribute_value(
  * @param {ServerTransformState} state
  * @returns {Expression}
  */
-export function serialize_get_binding(node, state) {
+export function build_getter(node, state) {
 	const binding = state.scope.get(node.name);
 
 	if (binding === null || node === binding.node) {
@@ -221,7 +221,7 @@ export function serialize_get_binding(node, state) {
 			'$.store_get',
 			b.assignment('??=', b.id('$$store_subs'), b.object([])),
 			b.literal(node.name),
-			serialize_get_binding(store_id, state)
+			build_getter(store_id, state)
 		);
 	}
 

From 81e0b5e20f6e5f2397f0a0025de297ad0176cde2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 1 Aug 2024 21:42:58 -0400
Subject: [PATCH 052/196] chore: remove binding.mutation (#12697)

* chore: remove binding.mutation

* regenerate types
---
 .../phases/3-transform/client/transform-client.js |  2 ++
 .../compiler/phases/3-transform/client/types.d.ts | 10 +++++++++-
 .../compiler/phases/3-transform/client/utils.js   |  6 ++++--
 .../3-transform/client/visitors/EachBlock.js      | 15 ++++++++-------
 packages/svelte/src/compiler/phases/scope.js      |  1 -
 packages/svelte/src/compiler/types/index.d.ts     |  2 --
 packages/svelte/types/index.d.ts                  |  3 ---
 7 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index fee42359ed..82d49f0ad7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -137,6 +137,7 @@ export function client_component(analysis, options) {
 		public_state: new Map(),
 		private_state: new Map(),
 		getters: {},
+		setters: {},
 		in_constructor: false,
 
 		// these are set inside the `Fragment` visitor, and cannot be used until then
@@ -624,6 +625,7 @@ export function client_module(analysis, options) {
 		public_state: new Map(),
 		private_state: new Map(),
 		getters: {},
+		setters: {},
 		in_constructor: false
 	};
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
index 64b461e723..0284c82d1e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
@@ -4,7 +4,8 @@ import type {
 	LabeledStatement,
 	Identifier,
 	PrivateIdentifier,
-	Expression
+	Expression,
+	AssignmentExpression
 } from 'estree';
 import type { Namespace, SvelteNode, ValidatedCompileOptions } from '#compiler';
 import type { TransformState } from '../types.js';
@@ -28,6 +29,13 @@ export interface ClientTransformState extends TransformState {
 	 * will be replaced with `node` (e.g. `x` -> `$.get(x)`)
 	 */
 	readonly getters: Record<string, Expression | ((id: Identifier) => Expression)>;
+	/**
+	 * Counterpart to `getters`
+	 */
+	readonly setters: Record<
+		string,
+		(assignment: AssignmentExpression, context: Context) => Expression
+	>;
 }
 
 export interface ComponentClientTransformState extends ClientTransformState {
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 de23d1f789..58fae325ef 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -265,8 +265,10 @@ export function build_setter(node, context, fallback, prefix, options) {
 
 	if (!binding) return fallback();
 
-	if (binding.mutation !== null) {
-		return binding.mutation(node, context);
+	if (Object.hasOwn(state.setters, left.name)) {
+		const setter = state.setters[left.name];
+		// @ts-expect-error
+		return setter(node, context);
 	}
 
 	if (binding.kind === 'legacy_reactive_import') {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
index 622c5b579f..a82677817a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
@@ -1,6 +1,6 @@
-/** @import { BlockStatement, Expression, Identifier, MemberExpression, Pattern, Statement } from 'estree' */
+/** @import { AssignmentExpression, BlockStatement, Expression, Identifier, MemberExpression, Pattern, Statement } from 'estree' */
 /** @import { Binding, EachBlock } from '#compiler' */
-/** @import { ComponentContext } from '../types' */
+/** @import { ComponentContext, Context } from '../types' */
 import {
 	EACH_INDEX_REACTIVE,
 	EACH_IS_ANIMATED,
@@ -110,7 +110,8 @@ export function EachBlock(node, context) {
 
 	const child_state = {
 		...context.state,
-		getters: { ...context.state.getters }
+		getters: { ...context.state.getters },
+		setters: { ...context.state.setters }
 	};
 
 	/** The state used when generating the key function, if necessary */
@@ -121,7 +122,7 @@ export function EachBlock(node, context) {
 
 	/**
 	 * @param {Pattern} expression_for_id
-	 * @returns {Binding['mutation']}
+	 * @returns {(assignment: AssignmentExpression, context: Context) => Expression}
 	 */
 	const create_mutation = (expression_for_id) => {
 		return (assignment, context) => {
@@ -151,7 +152,7 @@ export function EachBlock(node, context) {
 				return b.sequence(sequence);
 			} else {
 				const original_left = /** @type {MemberExpression} */ (assignment.left);
-				const left = context.visit(original_left);
+				const left = /** @type {Pattern} */ (context.visit(original_left));
 				const assign = b.assignment(assignment.operator, left, value);
 				sequence.unshift(assign);
 				return b.sequence(sequence);
@@ -184,7 +185,7 @@ export function EachBlock(node, context) {
 	const declarations = [];
 
 	if (node.context.type === 'Identifier') {
-		binding.mutation = create_mutation(
+		child_state.setters[node.context.name] = create_mutation(
 			b.member(
 				each_node_meta.array_name ? b.call(each_node_meta.array_name) : collection,
 				index,
@@ -209,7 +210,7 @@ export function EachBlock(node, context) {
 
 			const getter = needs_derived ? b.call('$.get', b.id(name)) : b.call(name);
 			child_state.getters[name] = getter;
-			binding.mutation = create_mutation(
+			child_state.setters[name] = create_mutation(
 				/** @type {Pattern} */ (path.update_expression(unwrapped))
 			);
 
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 82f9591a82..5eba0d3cf2 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -118,7 +118,6 @@ export class Scope {
 			declaration_kind,
 			is_called: false,
 			prop_alias: null,
-			mutation: null,
 			reassigned: false,
 			metadata: null
 		};
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index c7bf2ff3e1..47dc9d7eb6 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -307,8 +307,6 @@ export interface Binding {
 	legacy_dependencies: Binding[];
 	/** Legacy props: the `class` in `{ export klass as class}`. $props(): The `class` in { class: klass } = $props() */
 	prop_alias: string | null;
-	/** If this is set, all mutations should use this expression */
-	mutation: ((assignment: AssignmentExpression, context: Context<any, any>) => Expression) | null;
 	/** Additional metadata, varies per binding type */
 	metadata: {
 		/** `true` if is (inside) a rest parameter */
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index b3230c9413..8ba68e1d2d 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -584,7 +584,6 @@ declare module 'svelte/animate' {
 declare module 'svelte/compiler' {
 	import type { AssignmentExpression, ClassDeclaration, Expression, FunctionDeclaration, Identifier, ImportDeclaration, ArrayExpression, MemberExpression, ObjectExpression, Pattern, Node, VariableDeclarator, ArrowFunctionExpression, VariableDeclaration, FunctionExpression, Program, ChainExpression, SimpleCallExpression } from 'estree';
 	import type { SourceMap } from 'magic-string';
-	import type { Context } from 'zimmerframe';
 	import type { Location } from 'locate-character';
 	/**
 	 * `compile` converts your `.svelte` source code into a JavaScript module that exports a component
@@ -957,8 +956,6 @@ declare module 'svelte/compiler' {
 		legacy_dependencies: Binding[];
 		/** Legacy props: the `class` in `{ export klass as class}`. $props(): The `class` in { class: klass } = $props() */
 		prop_alias: string | null;
-		/** If this is set, all mutations should use this expression */
-		mutation: ((assignment: AssignmentExpression, context: Context<any, any>) => Expression) | null;
 		/** Additional metadata, varies per binding type */
 		metadata: {
 			/** `true` if is (inside) a rest parameter */

From a1db4931ffd8b3b54bcad1bd2749911e0a799347 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 1 Aug 2024 23:00:57 -0400
Subject: [PATCH 053/196] Version Packages (next) (#12682)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 2 ++
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 12de6942cb..780fa7714b 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -374,6 +374,7 @@
     "many-trees-fix",
     "mean-jokes-exist",
     "mean-numbers-cry",
+    "mean-parents-film",
     "metal-clouds-raise",
     "metal-lobsters-burn",
     "metal-pans-trade",
@@ -717,6 +718,7 @@
     "twelve-cows-learn",
     "twelve-dragons-join",
     "twelve-onions-juggle",
+    "twelve-scissors-kneel",
     "twelve-worms-jog",
     "twenty-gifts-develop",
     "two-brooms-fail",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 6c0a5dc27b..42d4af5343 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.206
+
+### Patch Changes
+
+- fix: allow nested `<dt>`/`<dd>` elements if they are within a `<dl>` element ([#12681](https://github.com/sveltejs/svelte/pull/12681))
+
+- chore: internal refactoring of client transform visitors ([#12683](https://github.com/sveltejs/svelte/pull/12683))
+
 ## 5.0.0-next.205
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index bd46b7c6c6..baf6257726 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.205",
+  "version": "5.0.0-next.206",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 1b5a1e63c5..b49e2068ea 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.205';
+export const VERSION = '5.0.0-next.206';
 export const PUBLIC_VERSION = '5';

From 31659508b0b05b99283dc91798530b3bcfa9715a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 1 Aug 2024 23:01:58 -0400
Subject: [PATCH 054/196] fix: only create `document.title` effect if value is
 dynamic (#12698)

* fix: dont create an effect for static title

* improve build_template_literal

* tidy up

* changeset

* simplify

* simplify

* tweak
---
 .changeset/strange-pears-perform.md           |  5 +++
 .../client/visitors/BindDirective.js          |  3 +-
 .../client/visitors/RegularElement.js         | 23 ++++++------
 .../client/visitors/SlotElement.js            |  3 +-
 .../client/visitors/SvelteElement.js          |  4 +-
 .../client/visitors/TitleElement.js           | 35 +++++-------------
 .../client/visitors/shared/component.js       |  4 +-
 .../client/visitors/shared/element.js         | 16 ++++----
 .../client/visitors/shared/fragment.js        |  9 +----
 .../client/visitors/shared/utils.js           | 37 +++++++++++--------
 10 files changed, 65 insertions(+), 74 deletions(-)
 create mode 100644 .changeset/strange-pears-perform.md

diff --git a/.changeset/strange-pears-perform.md b/.changeset/strange-pears-perform.md
new file mode 100644
index 0000000000..93a0c6a9f6
--- /dev/null
+++ b/.changeset/strange-pears-perform.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: only create `document.title` effect if value is dynamic
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
index c7aa8fddf2..611e5e570d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
@@ -209,10 +209,11 @@ export function BindDirective(node, context) {
 							)
 						)?.value
 					);
+
 					if (value !== undefined) {
 						group_getter = b.thunk(
 							b.block([
-								b.stmt(build_attribute_value(value, context)[1]),
+								b.stmt(build_attribute_value(value, context).value),
 								b.return(/** @type {Expression} */ (context.visit(expression)))
 							])
 						);
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 0a107943aa..b14c9bea9b 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
@@ -229,17 +229,16 @@ export function RegularElement(node, context) {
 				(attribute.value === true || is_text_attribute(attribute))
 			) {
 				const name = get_attribute_name(node, attribute, context);
-				const literal_value = /** @type {Literal} */ (
-					build_attribute_value(attribute.value, context)[1]
-				).value;
-				if (name !== 'class' || literal_value) {
+				const value = is_text_attribute(attribute) ? attribute.value[0].data : true;
+
+				if (name !== 'class' || value) {
 					// TODO namespace=foreign probably doesn't want to do template stuff at all and instead use programmatic methods
 					// to create the elements it needs.
 					context.state.template.push(
 						` ${attribute.name}${
-							is_boolean_attribute(name) && literal_value === true
+							is_boolean_attribute(name) && value === true
 								? ''
-								: `="${literal_value === true ? '' : escape_html(literal_value, true)}"`
+								: `="${value === true ? '' : escape_html(value, true)}"`
 						}`
 					);
 					continue;
@@ -440,7 +439,7 @@ function build_element_spread_attributes(
 		if (attribute.type === 'Attribute') {
 			const name = get_attribute_name(element, attribute, context);
 			// TODO: handle has_call
-			const [, value] = build_attribute_value(attribute.value, context);
+			const { value } = build_attribute_value(attribute.value, context);
 
 			if (
 				name === 'is' &&
@@ -554,7 +553,7 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 	const name = get_attribute_name(element, attribute, context);
 	const is_svg = context.state.metadata.namespace === 'svg' || element.name === 'svg';
 	const is_mathml = context.state.metadata.namespace === 'mathml';
-	let [has_call, value] = build_attribute_value(attribute.value, context);
+	let { has_call, value } = build_attribute_value(attribute.value, context);
 
 	// The foreign namespace doesn't have any special handling, everything goes through the attr function
 	if (context.state.metadata.namespace === 'foreign') {
@@ -636,7 +635,7 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 function build_custom_element_attribute_update_assignment(node_id, attribute, context) {
 	const state = context.state;
 	const name = attribute.name; // don't lowercase, as we set the element's property, which might be case sensitive
-	let [has_call, value] = build_attribute_value(attribute.value, context);
+	let { has_call, value } = build_attribute_value(attribute.value, context);
 
 	const update = b.stmt(b.call('$.set_custom_element_data', node_id, b.literal(name), value));
 
@@ -665,7 +664,7 @@ function build_custom_element_attribute_update_assignment(node_id, attribute, co
  */
 function build_element_special_value_attribute(element, node_id, attribute, context) {
 	const state = context.state;
-	const [, value] = build_attribute_value(attribute.value, context);
+	const { value } = build_attribute_value(attribute.value, context);
 
 	const inner_assignment = b.assignment(
 		'=',
@@ -676,7 +675,7 @@ function build_element_special_value_attribute(element, node_id, attribute, cont
 			value
 		)
 	);
-	const is_reactive = attribute.metadata.expression.has_state;
+
 	const is_select_with_value =
 		// attribute.metadata.dynamic would give false negatives because even if the value does not change,
 		// the inner options could still change, so we need to always treat it as reactive
@@ -699,7 +698,7 @@ function build_element_special_value_attribute(element, node_id, attribute, cont
 		state.init.push(b.stmt(b.call('$.init_select', node_id, b.thunk(value))));
 	}
 
-	if (is_reactive) {
+	if (attribute.metadata.expression.has_state) {
 		const id = state.scope.generate(`${node_id.name}_value`);
 		build_update_assignment(
 			state,
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
index a2ba5efff3..80e6a3635d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
@@ -30,7 +30,8 @@ export function SlotElement(node, context) {
 		if (attribute.type === 'SpreadAttribute') {
 			spreads.push(b.thunk(/** @type {Expression} */ (context.visit(attribute))));
 		} else if (attribute.type === 'Attribute') {
-			const [, value] = build_attribute_value(attribute.value, context);
+			const { value } = build_attribute_value(attribute.value, context);
+
 			if (attribute.name === 'name') {
 				name = value;
 				is_default = false;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
index c1391d9a25..23f6ea5b6b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
@@ -126,7 +126,7 @@ export function SvelteElement(node, context) {
 				get_tag,
 				node.metadata.svg || node.metadata.mathml ? b.true : b.false,
 				inner.length > 0 && b.arrow([element_id, b.id('$$anchor')], b.block(inner)),
-				dynamic_namespace && b.thunk(build_attribute_value(dynamic_namespace, context)[1]),
+				dynamic_namespace && b.thunk(build_attribute_value(dynamic_namespace, context).value),
 				location && b.array([b.literal(location.line), b.literal(location.column)])
 			)
 		)
@@ -161,7 +161,7 @@ function build_dynamic_element_attributes(attributes, context, element_id) {
 
 	for (const attribute of attributes) {
 		if (attribute.type === 'Attribute') {
-			const [, value] = build_attribute_value(attribute.value, context);
+			const { value } = build_attribute_value(attribute.value, context);
 
 			if (
 				is_event_attribute(attribute) &&
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 93ff3cc664..b10eb34ad9 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
@@ -8,32 +8,17 @@ import { build_template_literal } from './shared/utils.js';
  * @param {ComponentContext} context
  */
 export function TitleElement(node, context) {
-	// TODO throw validation error when attributes present / when children something else than text/expression tags
-	// TODO only create update when expression is dynamic
+	const { has_state, value } = build_template_literal(
+		/** @type {any} */ (node.fragment.nodes),
+		context.visit,
+		context.state
+	);
 
-	if (node.fragment.nodes.length === 1 && node.fragment.nodes[0].type === 'Text') {
-		context.state.init.push(
-			b.stmt(
-				b.assignment(
-					'=',
-					b.member(b.id('$.document'), b.id('title')),
-					b.literal(/** @type {Text} */ (node.fragment.nodes[0]).data)
-				)
-			)
-		);
+	const statement = b.stmt(b.assignment('=', b.member(b.id('$.document'), b.id('title')), value));
+
+	if (has_state) {
+		context.state.update.push(statement);
 	} else {
-		context.state.update.push(
-			b.stmt(
-				b.assignment(
-					'=',
-					b.member(b.id('$.document'), b.id('title')),
-					build_template_literal(
-						/** @type {any} */ (node.fragment.nodes),
-						context.visit,
-						context.state
-					)[1]
-				)
-			)
-		);
+		context.state.init.push(statement);
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index eaeee5fdbc..d498ef10ea 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -93,7 +93,7 @@ export function build_component(node, component_name, context, anchor = context.
 		} else if (attribute.type === 'Attribute') {
 			if (attribute.name.startsWith('--')) {
 				custom_css_props.push(
-					b.init(attribute.name, build_attribute_value(attribute.value, context)[1])
+					b.init(attribute.name, build_attribute_value(attribute.value, context).value)
 				);
 				continue;
 			}
@@ -106,7 +106,7 @@ export function build_component(node, component_name, context, anchor = context.
 				has_children_prop = true;
 			}
 
-			const [, value] = build_attribute_value(attribute.value, context);
+			const { value } = build_attribute_value(attribute.value, context);
 
 			if (attribute.metadata.expression.has_state) {
 				let arg = value;
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 e63593ca0e..06563cd033 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
@@ -33,7 +33,7 @@ export function build_style_directives(
 		let value =
 			directive.value === true
 				? build_getter({ name: directive.name, type: 'Identifier' }, context.state)
-				: build_attribute_value(directive.value, context)[1];
+				: build_attribute_value(directive.value, context).value;
 
 		const update = b.stmt(
 			b.call(
@@ -92,24 +92,24 @@ export function build_class_directives(
 /**
  * @param {Attribute['value']} value
  * @param {ComponentContext} context
- * @returns {[has_call: boolean, Expression]}
  */
 export function build_attribute_value(value, context) {
 	if (value === true) {
-		return [false, b.literal(true)];
+		return { has_state: false, has_call: false, value: b.literal(true) };
 	}
 
 	if (!Array.isArray(value) || value.length === 1) {
 		const chunk = Array.isArray(value) ? value[0] : value;
 
 		if (chunk.type === 'Text') {
-			return [false, b.literal(chunk.data)];
+			return { has_state: false, has_call: false, value: b.literal(chunk.data) };
 		}
 
-		return [
-			chunk.metadata.expression.has_call,
-			/** @type {Expression} */ (context.visit(chunk.expression))
-		];
+		return {
+			has_state: chunk.metadata.expression.has_call,
+			has_call: chunk.metadata.expression.has_call,
+			value: /** @type {Expression} */ (context.visit(chunk.expression))
+		};
 	}
 
 	return build_template_literal(value, context.visit, context.state);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index d03efc4fc3..58ecd392fc 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
@@ -66,18 +66,13 @@ export function process_children(nodes, expression, is_element, { visit, state }
 
 			state.template.push(' ');
 
-			const [has_call, value] = build_template_literal(sequence, visit, state);
+			const { has_state, has_call, value } = build_template_literal(sequence, visit, state);
 
 			const update = b.stmt(b.call('$.set_text', text_id, value));
 
 			if (has_call && !within_bound_contenteditable) {
 				state.init.push(build_update(update));
-			} else if (
-				sequence.some(
-					(node) => node.type === 'ExpressionTag' && node.metadata.expression.has_state
-				) &&
-				!within_bound_contenteditable
-			) {
+			} else if (has_state && !within_bound_contenteditable) {
 				state.update.push(update);
 			} else {
 				state.init.push(b.stmt(b.assignment('=', b.member(text_id, b.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 f13830d715..b6b11c6909 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
@@ -14,26 +14,30 @@ import { locator } from '../../../../../state.js';
  * @param {Array<Text | ExpressionTag>} values
  * @param {(node: SvelteNode, state: any) => any} visit
  * @param {ComponentClientTransformState} state
- * @returns {[boolean, TemplateLiteral]}
  */
 export function build_template_literal(values, visit, state) {
-	/** @type {TemplateElement[]} */
-	const quasis = [];
-
 	/** @type {Expression[]} */
 	const expressions = [];
+
+	let quasi = b.quasi('');
+	const quasis = [quasi];
+
 	let has_call = false;
+	let has_state = false;
 	let contains_multiple_call_expression = false;
-	quasis.push(b.quasi(''));
 
 	for (let i = 0; i < values.length; i++) {
 		const node = values[i];
 
-		if (node.type === 'ExpressionTag' && node.metadata.expression.has_call) {
-			if (has_call) {
-				contains_multiple_call_expression = true;
+		if (node.type === 'ExpressionTag') {
+			if (node.metadata.expression.has_call) {
+				if (has_call) {
+					contains_multiple_call_expression = true;
+				}
+				has_call = true;
 			}
-			has_call = true;
+
+			has_state ||= node.metadata.expression.has_state;
 		}
 	}
 
@@ -41,12 +45,10 @@ export function build_template_literal(values, visit, state) {
 		const node = values[i];
 
 		if (node.type === 'Text') {
-			const last = /** @type {TemplateElement} */ (quasis.at(-1));
-			last.value.raw += sanitize_template_string(node.data);
+			quasi.value.raw += sanitize_template_string(node.data);
 		} else if (node.type === 'ExpressionTag' && node.expression.type === 'Literal') {
-			const last = /** @type {TemplateElement} */ (quasis.at(-1));
 			if (node.expression.value != null) {
-				last.value.raw += sanitize_template_string(node.expression.value + '');
+				quasi.value.raw += sanitize_template_string(node.expression.value + '');
 			}
 		} else {
 			if (contains_multiple_call_expression) {
@@ -65,12 +67,15 @@ export function build_template_literal(values, visit, state) {
 			} else {
 				expressions.push(b.logical('??', visit(node.expression, state), b.literal('')));
 			}
-			quasis.push(b.quasi('', i + 1 === values.length));
+
+			quasi = b.quasi('', i + 1 === values.length);
+			quasis.push(quasi);
 		}
 	}
 
-	// TODO instead of this tuple, return a `{ dynamic, complex, value }` object. will DRY stuff out
-	return [has_call, b.template(quasis, expressions)];
+	const value = b.template(quasis, expressions);
+
+	return { value, has_state, has_call };
 }
 
 /**

From 70197fe4ca4be3d44b5dc8ceb3beb25afa5b0fc7 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Fri, 2 Aug 2024 14:07:01 +0200
Subject: [PATCH 055/196] fix: maintain imports in modules (#12704)

* fix: maintain imports in modules

* chore: add snapshot test
---
 .../3-transform/client/visitors/ImportDeclaration.js       | 3 ++-
 .../samples/imports-in-modules/_expected/client/export.js  | 1 +
 .../imports-in-modules/_expected/client/index.svelte.js    | 7 +++++++
 .../imports-in-modules/_expected/client/module.svelte.js   | 5 +++++
 .../samples/imports-in-modules/_expected/server/export.js  | 1 +
 .../imports-in-modules/_expected/server/index.svelte.js    | 6 ++++++
 .../imports-in-modules/_expected/server/module.svelte.js   | 5 +++++
 .../tests/snapshot/samples/imports-in-modules/export.js    | 1 +
 .../tests/snapshot/samples/imports-in-modules/index.svelte | 3 +++
 .../snapshot/samples/imports-in-modules/module.svelte.js   | 3 +++
 10 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/export.js
 create mode 100644 packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/module.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/export.js
 create mode 100644 packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/module.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/imports-in-modules/export.js
 create mode 100644 packages/svelte/tests/snapshot/samples/imports-in-modules/index.svelte
 create mode 100644 packages/svelte/tests/snapshot/samples/imports-in-modules/module.svelte.js

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ImportDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ImportDeclaration.js
index a222353687..29700246d4 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ImportDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ImportDeclaration.js
@@ -9,7 +9,8 @@ import * as b from '../../../../utils/builders.js';
 export function ImportDeclaration(node, context) {
 	if ('hoisted' in context.state) {
 		context.state.hoisted.push(node);
+		return b.empty;
 	}
 
-	return b.empty;
+	context.next();
 }
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/export.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/export.js
new file mode 100644
index 0000000000..b4bb7075da
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/export.js
@@ -0,0 +1 @@
+export * from '../../export.js';
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..464ef519af
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/index.svelte.js
@@ -0,0 +1,7 @@
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+import { random } from './module.svelte';
+
+export default function Imports_in_modules($$anchor) {
+	
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/module.svelte.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/module.svelte.js
new file mode 100644
index 0000000000..6edbc8af77
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/client/module.svelte.js
@@ -0,0 +1,5 @@
+/* module.svelte.js generated by Svelte VERSION */
+import * as $ from "svelte/internal/client";
+import { random } from './export';
+
+export { random };
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/export.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/export.js
new file mode 100644
index 0000000000..b4bb7075da
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/export.js
@@ -0,0 +1 @@
+export * from '../../export.js';
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..35b64b4186
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/index.svelte.js
@@ -0,0 +1,6 @@
+import * as $ from "svelte/internal/server";
+import { random } from './module.svelte';
+
+export default function Imports_in_modules($$payload) {
+	
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/module.svelte.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/module.svelte.js
new file mode 100644
index 0000000000..e51aae5a25
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/_expected/server/module.svelte.js
@@ -0,0 +1,5 @@
+/* module.svelte.js generated by Svelte VERSION */
+import * as $ from "svelte/internal/server";
+import { random } from './export';
+
+export { random };
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/export.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/export.js
new file mode 100644
index 0000000000..07ed4a67bd
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/export.js
@@ -0,0 +1 @@
+export const random = 42;
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/index.svelte b/packages/svelte/tests/snapshot/samples/imports-in-modules/index.svelte
new file mode 100644
index 0000000000..518377177f
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/index.svelte
@@ -0,0 +1,3 @@
+<script>
+	import { random } from './module.svelte';
+</script>
diff --git a/packages/svelte/tests/snapshot/samples/imports-in-modules/module.svelte.js b/packages/svelte/tests/snapshot/samples/imports-in-modules/module.svelte.js
new file mode 100644
index 0000000000..b39abe1b0e
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/imports-in-modules/module.svelte.js
@@ -0,0 +1,3 @@
+import { random } from './export';
+
+export { random };

From be28f8256b53cc015c463b264e8aa67765d8f779 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 2 Aug 2024 14:07:59 +0200
Subject: [PATCH 056/196] Version Packages (next) (#12699)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 1 +
 packages/svelte/CHANGELOG.md   | 6 ++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 780fa7714b..dd88b32b44 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -630,6 +630,7 @@
     "stale-jeans-refuse",
     "stale-nails-listen",
     "strange-apricots-happen",
+    "strange-pears-perform",
     "strange-roses-brake",
     "strong-apricots-destroy",
     "strong-gifts-smoke",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 42d4af5343..3fcd9bdc0d 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.0.0-next.207
+
+### Patch Changes
+
+- fix: only create `document.title` effect if value is dynamic ([#12698](https://github.com/sveltejs/svelte/pull/12698))
+
 ## 5.0.0-next.206
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index baf6257726..40260b3143 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.206",
+  "version": "5.0.0-next.207",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index b49e2068ea..8f1c8a89ea 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.206';
+export const VERSION = '5.0.0-next.207';
 export const PUBLIC_VERSION = '5';

From e4e66e237ff31e1e98faade337ab39bfaae19f62 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Fri, 2 Aug 2024 15:20:37 +0200
Subject: [PATCH 057/196] feat: allow for `svelte:options` css injected
 (#12660)

* feat: allow for `svelte:options` css injected

* chore: update test with different class

* fix: regenerate types

* remove external option

* regenerate

* Update .changeset/eight-comics-tell.md

* fix

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 .changeset/eight-comics-tell.md                     |  5 +++++
 packages/svelte/messages/compile-errors/template.md |  2 +-
 packages/svelte/src/compiler/errors.js              |  4 ++--
 .../src/compiler/phases/1-parse/read/options.js     | 11 +++++++++++
 packages/svelte/src/compiler/types/template.d.ts    |  1 +
 .../css-injected-options-nested/Nested.svelte       |  9 +++++++++
 .../samples/css-injected-options-nested/_config.js  |  7 +++++++
 .../css-injected-options-nested/_expected.css       |  4 ++++
 .../css-injected-options-nested/_expected.html      |  1 +
 .../css-injected-options-nested/_expected_head.html |  5 +++++
 .../samples/css-injected-options-nested/main.svelte | 13 +++++++++++++
 .../samples/css-injected-options/_config.js         |  7 +++++++
 .../samples/css-injected-options/_expected.css      |  4 ++++
 .../samples/css-injected-options/_expected.html     |  1 +
 .../css-injected-options/_expected_head.html        |  5 +++++
 .../samples/css-injected-options/main.svelte        |  9 +++++++++
 .../validator/samples/namespace-invalid/errors.json |  2 +-
 .../samples/namespace-non-literal/errors.json       |  2 +-
 packages/svelte/types/index.d.ts                    |  1 +
 19 files changed, 88 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/eight-comics-tell.md
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/Nested.svelte
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_config.js
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/main.svelte
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/css-injected-options/_config.js
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/css-injected-options/main.svelte

diff --git a/.changeset/eight-comics-tell.md b/.changeset/eight-comics-tell.md
new file mode 100644
index 0000000000..fa506aba46
--- /dev/null
+++ b/.changeset/eight-comics-tell.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: add support for `<svelte:options css="injected" />`
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
index 4e24714647..7920329c8b 100644
--- a/packages/svelte/messages/compile-errors/template.md
+++ b/packages/svelte/messages/compile-errors/template.md
@@ -324,7 +324,7 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 
 ## svelte_options_invalid_attribute_value
 
-> Valid values are %list%
+> Value must be %list%, if specified
 
 ## svelte_options_invalid_customelement
 
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 0b91336ee0..958c86a817 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -1275,13 +1275,13 @@ export function svelte_options_invalid_attribute(node) {
 }
 
 /**
- * Valid values are %list%
+ * Value must be %list%, if specified
  * @param {null | number | NodeLike} node
  * @param {string} list
  * @returns {never}
  */
 export function svelte_options_invalid_attribute_value(node, list) {
-	e(node, "svelte_options_invalid_attribute_value", `Valid values are ${list}`);
+	e(node, "svelte_options_invalid_attribute_value", `Value must be ${list}, if specified`);
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/options.js b/packages/svelte/src/compiler/phases/1-parse/read/options.js
index 751fe5f672..7c83946336 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/options.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/options.js
@@ -175,6 +175,17 @@ export default function read_options(node) {
 
 				break;
 			}
+			case 'css': {
+				const value = get_static_value(attribute);
+
+				if (value === 'injected') {
+					component_options.css = value;
+				} else {
+					e.svelte_options_invalid_attribute_value(attribute, `"injected"`);
+				}
+
+				break;
+			}
 			case 'immutable': {
 				component_options.immutable = get_boolean_value(attribute);
 				break;
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index ee6315a98c..373822a873 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -75,6 +75,7 @@ export interface SvelteOptions {
 	accessors?: boolean;
 	preserveWhitespace?: boolean;
 	namespace?: Namespace;
+	css?: 'injected';
 	customElement?: {
 		tag: string;
 		shadow?: 'open' | 'none';
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/Nested.svelte b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/Nested.svelte
new file mode 100644
index 0000000000..81243bf114
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/Nested.svelte
@@ -0,0 +1,9 @@
+<svelte:options css="injected" />
+
+<div class="bar">bar</div>
+
+<style>
+	.bar {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_config.js b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_config.js
new file mode 100644
index 0000000000..286454e931
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		css: 'external'
+	}
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css
new file mode 100644
index 0000000000..bddefdd00c
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.css
@@ -0,0 +1,4 @@
+
+.foo.svelte-sg04hs {
+	color: red;
+}
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html
new file mode 100644
index 0000000000..1f0b2b95fe
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected.html
@@ -0,0 +1 @@
+<!--[--><div class="bar svelte-ievf05">bar</div><!----> <div class="foo svelte-sg04hs">foo</div><!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html
new file mode 100644
index 0000000000..806f6c2db2
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/_expected_head.html
@@ -0,0 +1,5 @@
+<style id="svelte-ievf05">
+	.bar.svelte-ievf05 {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/main.svelte b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/main.svelte
new file mode 100644
index 0000000000..a2b9f38de3
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options-nested/main.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import Nested from './Nested.svelte';
+</script>
+
+<Nested />
+
+<div class="foo">foo</div>
+
+<style>
+	.foo {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_config.js b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_config.js
new file mode 100644
index 0000000000..286454e931
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		css: 'external'
+	}
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css
new file mode 100644
index 0000000000..8882c6ec7e
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.css
@@ -0,0 +1,4 @@
+
+	.foo.svelte-sg04hs {
+		color: red;
+	}
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html
new file mode 100644
index 0000000000..8ebe1ad73e
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected.html
@@ -0,0 +1 @@
+<div class="foo svelte-sg04hs">foo</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html
new file mode 100644
index 0000000000..7281935646
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/_expected_head.html
@@ -0,0 +1,5 @@
+<style id="svelte-sg04hs">
+	.foo.svelte-sg04hs {
+		color: red;
+	}
+</style>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/css-injected-options/main.svelte b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/main.svelte
new file mode 100644
index 0000000000..7387067b9b
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/css-injected-options/main.svelte
@@ -0,0 +1,9 @@
+<svelte:options css="injected" />
+
+<div class="foo">foo</div>
+
+<style>
+	.foo {
+		color: red;
+	}
+</style>
diff --git a/packages/svelte/tests/validator/samples/namespace-invalid/errors.json b/packages/svelte/tests/validator/samples/namespace-invalid/errors.json
index ae98ee7e25..bcd2dc1d9c 100644
--- a/packages/svelte/tests/validator/samples/namespace-invalid/errors.json
+++ b/packages/svelte/tests/validator/samples/namespace-invalid/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "svelte_options_invalid_attribute_value",
-		"message": "Valid values are \"html\", \"mathml\", \"svg\" or \"foreign\"",
+		"message": "Value must be \"html\", \"mathml\", \"svg\" or \"foreign\", if specified",
 		"start": {
 			"line": 1,
 			"column": 16
diff --git a/packages/svelte/tests/validator/samples/namespace-non-literal/errors.json b/packages/svelte/tests/validator/samples/namespace-non-literal/errors.json
index 439dbd032b..d7d637fbb1 100644
--- a/packages/svelte/tests/validator/samples/namespace-non-literal/errors.json
+++ b/packages/svelte/tests/validator/samples/namespace-non-literal/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "svelte_options_invalid_attribute_value",
-		"message": "Valid values are \"html\", \"mathml\", \"svg\" or \"foreign\"",
+		"message": "Value must be \"html\", \"mathml\", \"svg\" or \"foreign\", if specified",
 		"start": {
 			"line": 1,
 			"column": 16
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 8ba68e1d2d..8212c52cc0 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1533,6 +1533,7 @@ declare module 'svelte/compiler' {
 		accessors?: boolean;
 		preserveWhitespace?: boolean;
 		namespace?: Namespace;
+		css?: 'injected';
 		customElement?: {
 			tag: string;
 			shadow?: 'open' | 'none';

From 3286617e3cc64a4ac44e3262b2c6d70939c4b727 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Fri, 2 Aug 2024 15:25:32 +0200
Subject: [PATCH 058/196] feat: function called as tagged template literal is
 reactively called (#12692)

* feat: function called as tagged template literal is reactively called

Co-authored-by: Oscar Dominguez <dominguez.celada@gmail.com>

* chore: re-organize import of visitors

* simplify

---------

Co-authored-by: Oscar Dominguez <dominguez.celada@gmail.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/serious-owls-think.md              |  5 ++++
 .../src/compiler/phases/2-analyze/index.js    |  2 ++
 .../2-analyze/visitors/CallExpression.js      | 29 ++-----------------
 .../visitors/TaggedTemplateExpression.js      | 23 +++++++++++++++
 .../phases/2-analyze/visitors/shared/utils.js | 25 +++++++++++++++-
 .../_config.js                                | 17 +++++++++++
 .../main.svelte                               |  8 +++++
 7 files changed, 81 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/serious-owls-think.md
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/tagged-template-literal-reactive/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/tagged-template-literal-reactive/main.svelte

diff --git a/.changeset/serious-owls-think.md b/.changeset/serious-owls-think.md
new file mode 100644
index 0000000000..7093f5af4c
--- /dev/null
+++ b/.changeset/serious-owls-think.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: function called as tagged template literal is reactively called
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 6d90ca1617..40e8719a40 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -57,6 +57,7 @@ import { SvelteElement } from './visitors/SvelteElement.js';
 import { SvelteFragment } from './visitors/SvelteFragment.js';
 import { SvelteHead } from './visitors/SvelteHead.js';
 import { SvelteSelf } from './visitors/SvelteSelf.js';
+import { TaggedTemplateExpression } from './visitors/TaggedTemplateExpression.js';
 import { Text } from './visitors/Text.js';
 import { TitleElement } from './visitors/TitleElement.js';
 import { UpdateExpression } from './visitors/UpdateExpression.js';
@@ -160,6 +161,7 @@ const visitors = {
 	SvelteFragment,
 	SvelteComponent,
 	SvelteSelf,
+	TaggedTemplateExpression,
 	Text,
 	TitleElement,
 	UpdateExpression,
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 9d5a3ef5c1..98b9a3d7ec 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -4,7 +4,7 @@
 import { get_rune } from '../../scope.js';
 import * as e from '../../../errors.js';
 import { get_parent, unwrap_optional } from '../../../utils/ast.js';
-import { is_safe_identifier } from './shared/utils.js';
+import { is_known_safe_call, is_safe_identifier } from './shared/utils.js';
 
 /**
  * @param {CallExpression} node
@@ -150,7 +150,7 @@ export function CallExpression(node, context) {
 			break;
 	}
 
-	if (context.state.expression && !is_known_safe_call(node, context)) {
+	if (context.state.expression && !is_known_safe_call(node.callee, context)) {
 		context.state.expression.has_call = true;
 		context.state.expression.has_state = true;
 	}
@@ -182,28 +182,3 @@ export function CallExpression(node, context) {
 		context.next();
 	}
 }
-
-/**
- * @param {CallExpression} node
- * @param {Context} context
- * @returns {boolean}
- */
-function is_known_safe_call(node, context) {
-	const callee = node.callee;
-
-	// String / Number / BigInt / Boolean casting calls
-	if (callee.type === 'Identifier') {
-		const name = callee.name;
-		const binding = context.state.scope.get(name);
-		if (
-			binding === null &&
-			(name === 'BigInt' || name === 'String' || name === 'Number' || name === 'Boolean')
-		) {
-			return true;
-		}
-	}
-
-	// TODO add more cases
-
-	return false;
-}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
new file mode 100644
index 0000000000..b079b67512
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
@@ -0,0 +1,23 @@
+/** @import { TaggedTemplateExpression, VariableDeclarator } from 'estree' */
+/** @import { Context } from '../types' */
+import { is_known_safe_call } from './shared/utils.js';
+
+/**
+ * @param {TaggedTemplateExpression} node
+ * @param {Context} context
+ */
+export function TaggedTemplateExpression(node, context) {
+	if (context.state.expression && !is_known_safe_call(node.tag, context)) {
+		context.state.expression.has_call = true;
+		context.state.expression.has_state = true;
+	}
+
+	if (node.tag.type === 'Identifier') {
+		const binding = context.state.scope.get(node.tag.name);
+
+		if (binding !== null) {
+			binding.is_called = true;
+		}
+	}
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
index dd790665ce..2980ac3cbe 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
@@ -1,4 +1,4 @@
-/** @import { AssignmentExpression, Expression, Pattern, PrivateIdentifier, Super, UpdateExpression, VariableDeclarator } from 'estree' */
+/** @import { AssignmentExpression, CallExpression, Expression, Pattern, PrivateIdentifier, Super, TaggedTemplateExpression, UpdateExpression, VariableDeclarator } from 'estree' */
 /** @import { Fragment } from '#compiler' */
 /** @import { AnalysisState, Context } from '../../types' */
 /** @import { Scope } from '../../../scope' */
@@ -165,3 +165,26 @@ export function is_safe_identifier(expression, scope) {
 		binding.kind !== 'rest_prop'
 	);
 }
+
+/**
+ * @param {Expression | Super} callee
+ * @param {Context} context
+ * @returns {boolean}
+ */
+export function is_known_safe_call(callee, context) {
+	// String / Number / BigInt / Boolean casting calls
+	if (callee.type === 'Identifier') {
+		const name = callee.name;
+		const binding = context.state.scope.get(name);
+		if (
+			binding === null &&
+			(name === 'BigInt' || name === 'String' || name === 'Number' || name === 'Boolean')
+		) {
+			return true;
+		}
+	}
+
+	// TODO add more cases
+
+	return false;
+}
diff --git a/packages/svelte/tests/runtime-runes/samples/tagged-template-literal-reactive/_config.js b/packages/svelte/tests/runtime-runes/samples/tagged-template-literal-reactive/_config.js
new file mode 100644
index 0000000000..beef0bbff2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/tagged-template-literal-reactive/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	async test({ assert, target, ok }) {
+		const button = target.querySelector('button');
+
+		assert.htmlEqual(target.innerHTML, `0 <button></button>`);
+
+		flushSync(() => {
+			button?.click();
+		});
+
+		assert.htmlEqual(target.innerHTML, `1 <button></button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/tagged-template-literal-reactive/main.svelte b/packages/svelte/tests/runtime-runes/samples/tagged-template-literal-reactive/main.svelte
new file mode 100644
index 0000000000..7b9da329c2
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/tagged-template-literal-reactive/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let count = $state(0);
+	function showCount() {
+		return count;
+	}
+</script>
+
+{showCount``} <button onclick={() => count++}></button>

From 8e04a91c6701aef2b41bf99c157107458f82ef23 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 2 Aug 2024 12:28:04 -0400
Subject: [PATCH 059/196] Version Packages (next) (#12707)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 2 ++
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index dd88b32b44..ef858b3956 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -135,6 +135,7 @@
     "early-ads-tie",
     "early-months-whisper",
     "eight-carrots-hunt",
+    "eight-comics-tell",
     "eight-cougars-watch",
     "eight-hornets-punch",
     "eight-jeans-compare",
@@ -521,6 +522,7 @@
     "serious-gorillas-eat",
     "serious-kids-deliver",
     "serious-needles-joke",
+    "serious-owls-think",
     "serious-poems-brake",
     "serious-socks-cover",
     "serious-zebras-scream",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 3fcd9bdc0d..1007ba88b1 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.208
+
+### Patch Changes
+
+- feat: add support for `<svelte:options css="injected" />` ([#12660](https://github.com/sveltejs/svelte/pull/12660))
+
+- feat: function called as tagged template literal is reactively called ([#12692](https://github.com/sveltejs/svelte/pull/12692))
+
 ## 5.0.0-next.207
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 40260b3143..1f3cdb86e1 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.207",
+  "version": "5.0.0-next.208",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 8f1c8a89ea..c70a430439 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.207';
+export const VERSION = '5.0.0-next.208';
 export const PUBLIC_VERSION = '5';

From 93cfa6cd6969956f32c6bdcc6153949110432eac Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Sat, 3 Aug 2024 16:47:21 +0200
Subject: [PATCH 060/196] fix: add css hash to custom element rendered with
 `svelte:element` (#12715)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: add css hash to custom element rendered with `svelte:element`

* simplify

* skip arg where possible

* drive-by improvements — remove some unnecessary arguments where possible

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/chilly-carpets-switch.md           |  5 +++
 .../client/visitors/RegularElement.js         | 10 +++---
 .../client/visitors/SvelteElement.js          |  4 +--
 .../client/dom/elements/attributes.js         | 35 +++++++++++--------
 .../_config.js                                | 14 ++++++++
 .../main.svelte                               |  8 +++++
 6 files changed, 53 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/chilly-carpets-switch.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/main.svelte

diff --git a/.changeset/chilly-carpets-switch.md b/.changeset/chilly-carpets-switch.md
new file mode 100644
index 0000000000..ca8660969a
--- /dev/null
+++ b/.changeset/chilly-carpets-switch.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add css hash to custom element rendered with `svelte:element`
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 b14c9bea9b..13ebb41d5b 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
@@ -470,10 +470,8 @@ function build_element_spread_attributes(
 			attribute.type === 'SpreadAttribute' && attribute.metadata.expression.has_call;
 	}
 
-	const lowercase_attributes =
-		element.metadata.svg || element.metadata.mathml || is_custom_element_node(element)
-			? b.false
-			: b.true;
+	const preserve_attribute_case =
+		element.metadata.svg || element.metadata.mathml || is_custom_element_node(element);
 	const id = context.state.scope.generate('attributes');
 
 	const update = b.stmt(
@@ -485,8 +483,8 @@ function build_element_spread_attributes(
 				element_id,
 				b.id(id),
 				b.object(values),
-				lowercase_attributes,
-				b.literal(context.state.analysis.css.hash),
+				context.state.analysis.css.hash !== '' && b.literal(context.state.analysis.css.hash),
+				preserve_attribute_case && b.true,
 				is_ignored(element, 'hydration_attribute_changed') && b.true
 			)
 		)
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
index 23f6ea5b6b..72174d1015 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
@@ -200,7 +200,7 @@ function build_dynamic_element_attributes(attributes, context, element_id) {
 					element_id,
 					b.id(id),
 					b.object(values),
-					b.literal(context.state.analysis.css.hash)
+					context.state.analysis.css.hash !== '' && b.literal(context.state.analysis.css.hash)
 				)
 			)
 		);
@@ -221,7 +221,7 @@ function build_dynamic_element_attributes(attributes, context, element_id) {
 				element_id,
 				b.literal(null),
 				b.object(values),
-				b.literal(context.state.analysis.css.hash)
+				context.state.analysis.css.hash !== '' && b.literal(context.state.analysis.css.hash)
 			)
 		)
 	);
diff --git a/packages/svelte/src/internal/client/dom/elements/attributes.js b/packages/svelte/src/internal/client/dom/elements/attributes.js
index d0e2145937..7e42efae11 100644
--- a/packages/svelte/src/internal/client/dom/elements/attributes.js
+++ b/packages/svelte/src/internal/client/dom/elements/attributes.js
@@ -147,13 +147,19 @@ export function set_custom_element_data(node, prop, value) {
  * @param {Element & ElementCSSInlineStyle} element
  * @param {Record<string, any> | undefined} prev
  * @param {Record<string, any>} next New attributes - this function mutates this object
- * @param {boolean} lowercase_attributes
- * @param {string} css_hash
+ * @param {string} [css_hash]
+ * @param {boolean} preserve_attribute_case
  * @param {boolean} [skip_warning]
  * @returns {Record<string, any>}
  */
-export function set_attributes(element, prev, next, lowercase_attributes, css_hash, skip_warning) {
-	var has_hash = css_hash.length !== 0;
+export function set_attributes(
+	element,
+	prev,
+	next,
+	css_hash,
+	preserve_attribute_case = false,
+	skip_warning
+) {
 	var current = prev || {};
 	var is_option_element = element.tagName === 'OPTION';
 
@@ -163,8 +169,8 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
 		}
 	}
 
-	if (has_hash && !next.class) {
-		next.class = '';
+	if (css_hash !== undefined) {
+		next.class = next.class ? next.class + ' ' + css_hash : css_hash;
 	}
 
 	var setters = setters_cache.get(element.nodeName);
@@ -267,7 +273,7 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
 			element.value = element[key] = element.__value = value;
 		} else {
 			var name = key;
-			if (lowercase_attributes) {
+			if (!preserve_attribute_case) {
 				name = normalize_attribute(name);
 			}
 
@@ -279,11 +285,6 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
 					element[name] = value;
 				}
 			} else if (typeof value !== 'function') {
-				if (has_hash && name === 'class') {
-					if (value) value += ' ';
-					value += css_hash;
-				}
-
 				set_attribute(element, name, value);
 			}
 		}
@@ -309,7 +310,7 @@ export function set_attributes(element, prev, next, lowercase_attributes, css_ha
  * @param {Element} node
  * @param {Record<string, any> | undefined} prev
  * @param {Record<string, any>} next The new attributes - this function mutates this object
- * @param {string} css_hash
+ * @param {string} [css_hash]
  */
 export function set_dynamic_element_attributes(node, prev, next, css_hash) {
 	if (node.tagName.includes('-')) {
@@ -319,6 +320,10 @@ export function set_dynamic_element_attributes(node, prev, next, css_hash) {
 			}
 		}
 
+		if (css_hash !== undefined) {
+			next.class = next.class ? next.class + ' ' + css_hash : css_hash;
+		}
+
 		for (key in next) {
 			set_custom_element_data(node, key, next[key]);
 		}
@@ -330,8 +335,8 @@ export function set_dynamic_element_attributes(node, prev, next, css_hash) {
 		/** @type {Element & ElementCSSInlineStyle} */ (node),
 		prev,
 		next,
-		node.namespaceURI !== NAMESPACE_SVG,
-		css_hash
+		css_hash,
+		node.namespaceURI !== NAMESPACE_SVG
 	);
 }
 
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js b/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js
new file mode 100644
index 0000000000..eae8101e6e
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/_config.js
@@ -0,0 +1,14 @@
+import { ok, test } from '../../test';
+
+export default test({
+	html: `<custom-element class="red svelte-p153w3"></custom-element><custom-element class="red svelte-p153w3"></custom-element>`,
+
+	async test({ assert, target }) {
+		const [el, el2] = target.querySelectorAll('custom-element');
+		ok(el);
+		ok(el2);
+
+		assert.deepEqual(el.className, 'red svelte-p153w3');
+		assert.deepEqual(el2.className, 'red svelte-p153w3');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/main.svelte b/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/main.svelte
new file mode 100644
index 0000000000..d01a602293
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/svelte-element-custom-element-css-hash/main.svelte
@@ -0,0 +1,8 @@
+<svelte:element this={'custom-element'} class="red"></svelte:element>
+<custom-element class="red"></custom-element>
+
+<style>
+	.red {
+		color: red;
+	}
+</style>

From e66416bec779ba4fba58c1bc670e119052489baf Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 3 Aug 2024 22:18:33 -0400
Subject: [PATCH 061/196] feat: more efficient code generation when referencing
 globals (#12712)

* feat: more efficient code generation when referencing globals

* update test
---
 .changeset/red-kings-draw.md                  |  5 +++
 .../2-analyze/visitors/CallExpression.js      |  4 +--
 .../2-analyze/visitors/MemberExpression.js    |  4 +--
 .../visitors/TaggedTemplateExpression.js      |  4 +--
 .../phases/2-analyze/visitors/shared/utils.js | 27 ++++++++--------
 .../samples/effect-tracking/main.svelte       |  6 ++--
 .../purity/_expected/client/index.svelte.js   | 32 +++++++++++++++++++
 .../purity/_expected/server/index.svelte.js   | 12 +++++++
 .../snapshot/samples/purity/index.svelte      | 12 +++++++
 9 files changed, 83 insertions(+), 23 deletions(-)
 create mode 100644 .changeset/red-kings-draw.md
 create mode 100644 packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/purity/_expected/server/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/purity/index.svelte

diff --git a/.changeset/red-kings-draw.md b/.changeset/red-kings-draw.md
new file mode 100644
index 0000000000..56ce4afff3
--- /dev/null
+++ b/.changeset/red-kings-draw.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: more efficient code generation when referencing globals
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 98b9a3d7ec..57cdae0c66 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -4,7 +4,7 @@
 import { get_rune } from '../../scope.js';
 import * as e from '../../../errors.js';
 import { get_parent, unwrap_optional } from '../../../utils/ast.js';
-import { is_known_safe_call, is_safe_identifier } from './shared/utils.js';
+import { is_pure, is_safe_identifier } from './shared/utils.js';
 
 /**
  * @param {CallExpression} node
@@ -150,7 +150,7 @@ export function CallExpression(node, context) {
 			break;
 	}
 
-	if (context.state.expression && !is_known_safe_call(node.callee, context)) {
+	if (context.state.expression && !is_pure(node.callee, context)) {
 		context.state.expression.has_call = true;
 		context.state.expression.has_state = true;
 	}
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 633275b63a..245a164c71 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
@@ -1,7 +1,7 @@
 /** @import { MemberExpression } from 'estree' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
-import { is_safe_identifier } from './shared/utils.js';
+import { is_pure, is_safe_identifier } from './shared/utils.js';
 
 /**
  * @param {MemberExpression} node
@@ -15,7 +15,7 @@ export function MemberExpression(node, context) {
 		}
 	}
 
-	if (context.state.expression) {
+	if (context.state.expression && !is_pure(node, context)) {
 		context.state.expression.has_state = true;
 	}
 
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 b079b67512..eacb8a342a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/TaggedTemplateExpression.js
@@ -1,13 +1,13 @@
 /** @import { TaggedTemplateExpression, VariableDeclarator } from 'estree' */
 /** @import { Context } from '../types' */
-import { is_known_safe_call } from './shared/utils.js';
+import { is_pure } from './shared/utils.js';
 
 /**
  * @param {TaggedTemplateExpression} node
  * @param {Context} context
  */
 export function TaggedTemplateExpression(node, context) {
-	if (context.state.expression && !is_known_safe_call(node.tag, context)) {
+	if (context.state.expression && !is_pure(node.tag, context)) {
 		context.state.expression.has_call = true;
 		context.state.expression.has_state = true;
 	}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
index 2980ac3cbe..963882d396 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
@@ -4,7 +4,7 @@
 /** @import { Scope } from '../../../scope' */
 /** @import { NodeLike } from '../../../../errors.js' */
 import * as e from '../../../../errors.js';
-import { extract_identifiers } from '../../../../utils/ast.js';
+import { extract_identifiers, object } from '../../../../utils/ast.js';
 import * as w from '../../../../warnings.js';
 
 /**
@@ -167,24 +167,23 @@ export function is_safe_identifier(expression, scope) {
 }
 
 /**
- * @param {Expression | Super} callee
+ * @param {Expression | Super} node
  * @param {Context} context
  * @returns {boolean}
  */
-export function is_known_safe_call(callee, context) {
-	// String / Number / BigInt / Boolean casting calls
-	if (callee.type === 'Identifier') {
-		const name = callee.name;
-		const binding = context.state.scope.get(name);
-		if (
-			binding === null &&
-			(name === 'BigInt' || name === 'String' || name === 'Number' || name === 'Boolean')
-		) {
-			return true;
-		}
+export function is_pure(node, context) {
+	if (node.type !== 'Identifier' && node.type !== 'MemberExpression') {
+		return false;
 	}
 
-	// TODO add more cases
+	const left = object(node);
+	if (!left) return false;
+
+	if (left.type === 'Identifier') {
+		const binding = context.state.scope.get(left.name);
+		if (binding === null) return true; // globals are assumed to be safe
+	}
 
+	// TODO add more cases (safe Svelte imports, etc)
 	return false;
 }
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-tracking/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-tracking/main.svelte
index bb48958880..1e2ea446a5 100644
--- a/packages/svelte/tests/runtime-runes/samples/effect-tracking/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/effect-tracking/main.svelte
@@ -1,5 +1,5 @@
 <script>
-	import {untrack} from 'svelte';
+	import { untrack } from 'svelte';
 
 	const foo = $effect.tracking();
 	let bar = $state(false);
@@ -10,5 +10,5 @@
 
 <p>{foo}</p>
 <p>{bar}</p>
-<p>{$effect.tracking()}</p>
-<p>{untrack(() => $effect.tracking())}</p>
+<p>{(bar, $effect.tracking())}</p>
+<p>{untrack(() => (bar, $effect.tracking()))}</p>
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..2863caba49
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
@@ -0,0 +1,32 @@
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+
+var root = $.template(`<p> </p> <p> </p> <!>`, 1);
+
+export default function Purity($$anchor) {
+	let min = 0;
+	let max = 100;
+	let number = 50;
+	let value = 'hello';
+	var fragment = root();
+	var p = $.first_child(fragment);
+	var text = $.child(p);
+
+	text.nodeValue = Math.max(min, Math.min(max, number));
+	$.reset(p);
+
+	var p_1 = $.sibling($.sibling(p, true));
+	var text_1 = $.child(p_1);
+
+	text_1.nodeValue = location.href;
+	$.reset(p_1);
+
+	var node = $.sibling($.sibling(p_1, true));
+
+	Child(node, {
+		prop: encodeURIComponent(value),
+		$$legacy: true
+	});
+
+	$.append($$anchor, fragment);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..3528e8d1b4
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/server/index.svelte.js
@@ -0,0 +1,12 @@
+import * as $ from "svelte/internal/server";
+
+export default function Purity($$payload) {
+	let min = 0;
+	let max = 100;
+	let number = 50;
+	let value = 'hello';
+
+	$$payload.out += `<p>${$.escape(Math.max(min, Math.min(max, number)))}</p> <p>${$.escape(location.href)}</p> `;
+	Child($$payload, { prop: encodeURIComponent(value) });
+	$$payload.out += `<!---->`;
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/purity/index.svelte b/packages/svelte/tests/snapshot/samples/purity/index.svelte
new file mode 100644
index 0000000000..79db5dc7b1
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/purity/index.svelte
@@ -0,0 +1,12 @@
+<script>
+	let min = 0;
+	let max = 100;
+	let number = 50;
+
+	let value = 'hello';
+</script>
+
+<p>{Math.max(min, Math.min(max, number))}</p>
+<p>{location.href}</p>
+
+<Child prop={encodeURIComponent(value)} />

From 76cb89c75000b384946adfea39cfe83e47d1bd8f Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Mon, 5 Aug 2024 16:26:33 +0100
Subject: [PATCH 062/196] fix: allow deletion of $$restProps properties
 (#12736)

---
 .changeset/loud-news-deliver.md                   |  5 +++++
 .../src/internal/client/reactivity/props.js       |  7 +++++++
 .../samples/rest-props-delete/App.svelte          | 10 ++++++++++
 .../samples/rest-props-delete/_config.js          | 15 +++++++++++++++
 .../samples/rest-props-delete/main.svelte         |  5 +++++
 5 files changed, 42 insertions(+)
 create mode 100644 .changeset/loud-news-deliver.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/rest-props-delete/App.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/rest-props-delete/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/rest-props-delete/main.svelte

diff --git a/.changeset/loud-news-deliver.md b/.changeset/loud-news-deliver.md
new file mode 100644
index 0000000000..f562caff8f
--- /dev/null
+++ b/.changeset/loud-news-deliver.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow deletion of $$restProps properties
diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index b822f8d4ec..81c3e4d743 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -126,6 +126,13 @@ const legacy_rest_props_handler = {
 			};
 		}
 	},
+	deleteProperty(target, key) {
+		// Svelte 4 allowed for deletions on $$restProps
+		if (target.exclude.includes(key)) return false;
+		target.exclude.push(key);
+		update(target.version);
+		return true;
+	},
 	has(target, key) {
 		if (target.exclude.includes(key)) return false;
 		return key in target.props;
diff --git a/packages/svelte/tests/runtime-legacy/samples/rest-props-delete/App.svelte b/packages/svelte/tests/runtime-legacy/samples/rest-props-delete/App.svelte
new file mode 100644
index 0000000000..37825576e5
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/rest-props-delete/App.svelte
@@ -0,0 +1,10 @@
+<script>
+	function prune() {
+		$$restProps.a
+		delete $$restProps.a
+	}
+</script>
+
+<button on:click={prune}>delete a</button>
+
+{JSON.stringify($$restProps)}
diff --git a/packages/svelte/tests/runtime-legacy/samples/rest-props-delete/_config.js b/packages/svelte/tests/runtime-legacy/samples/rest-props-delete/_config.js
new file mode 100644
index 0000000000..853af731f9
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/rest-props-delete/_config.js
@@ -0,0 +1,15 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>delete a</button>\n{"a":1,"b":2}`,
+
+	test({ assert, target }) {
+		const [btn1] = target.querySelectorAll('button');
+
+		btn1.click();
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<button>delete a</button>\n{"b":2}`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/rest-props-delete/main.svelte b/packages/svelte/tests/runtime-legacy/samples/rest-props-delete/main.svelte
new file mode 100644
index 0000000000..461848a3b3
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/rest-props-delete/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	import App from "./App.svelte";
+</script>
+
+<App a={1} b={2} />

From 8bde2d57108a834ed935cf0bce829badfde93930 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Mon, 5 Aug 2024 16:27:12 +0100
Subject: [PATCH 063/196] fix: add touch events on microtask to avoid Chromium
 bug (#12735)

---
 .changeset/healthy-mangos-brush.md                        | 5 +++++
 .../svelte/src/internal/client/dom/elements/events.js     | 8 ++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/healthy-mangos-brush.md

diff --git a/.changeset/healthy-mangos-brush.md b/.changeset/healthy-mangos-brush.md
new file mode 100644
index 0000000000..3eeada7ad4
--- /dev/null
+++ b/.changeset/healthy-mangos-brush.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: add touch events on microtask to avoid Chromium bug
diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js
index c01055d016..2c9a63436d 100644
--- a/packages/svelte/src/internal/client/dom/elements/events.js
+++ b/packages/svelte/src/internal/client/dom/elements/events.js
@@ -59,8 +59,12 @@ export function create_event(event_name, dom, handler, options) {
 	// Chrome has a bug where pointer events don't work when attached to a DOM element that has been cloned
 	// with cloneNode() and the DOM element is disconnected from the document. To ensure the event works, we
 	// defer the attachment till after it's been appended to the document. TODO: remove this once Chrome fixes
-	// this bug. The same applies to wheel events.
-	if (event_name.startsWith('pointer') || event_name === 'wheel') {
+	// this bug. The same applies to wheel events and touch events.
+	if (
+		event_name.startsWith('pointer') ||
+		event_name.startsWith('touch') ||
+		event_name === 'wheel'
+	) {
 		queue_micro_task(() => {
 			dom.addEventListener(event_name, target_handler, options);
 		});

From e78cfd393e16fb754f7393b535d2120815010381 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Mon, 5 Aug 2024 17:03:27 +0100
Subject: [PATCH 064/196] fix: correctly handle SvelteDate methods with
 arguments (#12738)

* fix: correctly handle SvelteDate methods with arguments

* tweak

* Update packages/svelte/src/reactivity/date.js

* Update packages/svelte/src/reactivity/date.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* Update packages/svelte/src/reactivity/date.test.ts

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/dirty-pens-look.md               |  5 +++++
 packages/svelte/src/reactivity/date.js      |  8 +++++++
 packages/svelte/src/reactivity/date.test.ts | 24 +++++++++++++++++++++
 3 files changed, 37 insertions(+)
 create mode 100644 .changeset/dirty-pens-look.md

diff --git a/.changeset/dirty-pens-look.md b/.changeset/dirty-pens-look.md
new file mode 100644
index 0000000000..16536edce7
--- /dev/null
+++ b/.changeset/dirty-pens-look.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly handle SvelteDate methods with arguments
diff --git a/packages/svelte/src/reactivity/date.js b/packages/svelte/src/reactivity/date.js
index 1b64097e73..a1fb73c5f5 100644
--- a/packages/svelte/src/reactivity/date.js
+++ b/packages/svelte/src/reactivity/date.js
@@ -32,6 +32,14 @@ export class SvelteDate extends Date {
 			if (method.startsWith('get') || method.startsWith('to')) {
 				// @ts-ignore
 				proto[method] = function (...args) {
+					// don't memoize if there are arguments
+					// @ts-ignore
+					if (args.length > 0) {
+						get(this.#time);
+						// @ts-ignore
+						return date_proto[method].apply(this, args);
+					}
+
 					var d = this.#deriveds.get(method);
 
 					if (d === undefined) {
diff --git a/packages/svelte/src/reactivity/date.test.ts b/packages/svelte/src/reactivity/date.test.ts
index d1732d26b1..e2702d9ff6 100644
--- a/packages/svelte/src/reactivity/date.test.ts
+++ b/packages/svelte/src/reactivity/date.test.ts
@@ -555,6 +555,30 @@ test('Date fine grained tests', () => {
 	cleanup();
 });
 
+test('Date.toLocaleString', () => {
+	const date = new SvelteDate(initial_date);
+
+	const log: any = [];
+
+	const cleanup = effect_root(() => {
+		render_effect(() => {
+			log.push(date.toLocaleString(undefined, { month: 'long', year: 'numeric' }));
+		});
+		render_effect(() => {
+			log.push(date.toLocaleString(undefined, { month: 'long' }));
+		});
+	});
+
+	flushSync();
+
+	assert.deepEqual(log, [
+		initial_date.toLocaleString(undefined, { month: 'long', year: 'numeric' }),
+		initial_date.toLocaleString(undefined, { month: 'long' })
+	]);
+
+	cleanup();
+});
+
 test('Date.instanceOf', () => {
 	assert.equal(new SvelteDate() instanceof Date, true);
 });

From 59ea0b9e13f3833b74afa1958f92276a38e16806 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 5 Aug 2024 12:25:40 -0400
Subject: [PATCH 065/196] fix: better event handling (#12722)

* simplify

* fix/simplify

* fix/simplify

* start getting a grip of this mess

* tidy up

* more

* more

* more

* tidy up

* make things a bit less weird

* tweak

* more

* more

* add once once

* consolidate event handling code

* some progress. man, this stuff is entangled

* more

* tidy up

* simplify

* simplify

* more

* fix

* fix test names

* fix a bug

* tidy up

* changeset

* simplify

* regenerate

* tidy up

* tidy up

* tidy up

* simplify

* the module declaration case is already accounted for, above

* simplify/document

* typo

* "hoistable" is a misnomer

* hoist non_hoistable, rename

* more typos

* tweak

* regenerate
---
 .changeset/smart-cars-know.md                 |   5 +
 .changeset/wild-pumas-count.md                |   5 +
 .../phases/2-analyze/visitors/Attribute.js    |  63 ++++----
 .../2-analyze/visitors/shared/function.js     |   5 +-
 .../phases/3-transform/client/utils.js        |  12 +-
 .../3-transform/client/visitors/Attribute.js  |   4 +-
 .../client/visitors/FunctionDeclaration.js    |  18 +--
 .../client/visitors/OnDirective.js            |  33 +++-
 .../client/visitors/RegularElement.js         |  11 +-
 .../3-transform/client/visitors/SvelteBody.js |   7 +-
 .../client/visitors/SvelteDocument.js         |   7 +-
 .../client/visitors/SvelteElement.js          |   3 +
 .../client/visitors/SvelteWindow.js           |   8 +-
 .../client/visitors/VariableDeclaration.js    |  14 +-
 .../client/visitors/shared/component.js       |  18 ++-
 .../client/visitors/shared/element.js         | 151 +-----------------
 .../client/visitors/shared/events.js          | 144 +++++++++++++++++
 .../client/visitors/shared/function.js        |   6 +-
 .../client/visitors/shared/special_element.js |  23 +++
 .../client/visitors/shared/utils.js           | 111 +------------
 .../src/compiler/phases/3-transform/utils.js  |   4 +-
 .../svelte/src/compiler/phases/types.d.ts     |  12 +-
 .../svelte/src/compiler/types/template.d.ts   |   4 +-
 .../src/internal/client/reactivity/effects.js |   2 +-
 .../_config.js                                |   0
 .../main.svelte                               |   0
 .../dynamic-event-handler-3/Button.svelte     |   3 +
 .../dynamic-event-handler-3/_config.js        |  34 ++++
 .../dynamic-event-handler-3/main.svelte       |  27 ++++
 .../_config.js                                |   0
 .../main.svelte                               |   0
 .../event-attribute-not-reactive/_config.js   |  19 +++
 .../event-attribute-not-reactive/main.svelte  |  19 +++
 packages/svelte/types/index.d.ts              |   4 +-
 34 files changed, 414 insertions(+), 362 deletions(-)
 create mode 100644 .changeset/smart-cars-know.md
 create mode 100644 .changeset/wild-pumas-count.md
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/special_element.js
 rename packages/svelte/tests/runtime-runes/samples/{dynamic-element-event-handler-2 => dynamic-event-handler-2}/_config.js (100%)
 rename packages/svelte/tests/runtime-runes/samples/{dynamic-element-event-handler-2 => dynamic-event-handler-2}/main.svelte (100%)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-3/Button.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-3/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-3/main.svelte
 rename packages/svelte/tests/runtime-runes/samples/{dynamic-element-event-handler => dynamic-event-handler}/_config.js (100%)
 rename packages/svelte/tests/runtime-runes/samples/{dynamic-element-event-handler => dynamic-event-handler}/main.svelte (100%)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-attribute-not-reactive/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-attribute-not-reactive/main.svelte

diff --git a/.changeset/smart-cars-know.md b/.changeset/smart-cars-know.md
new file mode 100644
index 0000000000..5b87239e41
--- /dev/null
+++ b/.changeset/smart-cars-know.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid recreating handlers for component events
diff --git a/.changeset/wild-pumas-count.md b/.changeset/wild-pumas-count.md
new file mode 100644
index 0000000000..5d34731ef2
--- /dev/null
+++ b/.changeset/wild-pumas-count.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: call correct event handler for properties of non-reactive objects
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 824f784a6b..85dfc6c67e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -40,8 +40,8 @@ export function Attribute(node, context) {
 			const delegated_event = get_delegated_event(node.name.slice(2), expression, context);
 
 			if (delegated_event !== null) {
-				if (delegated_event.type === 'hoistable') {
-					delegated_event.function.metadata.hoistable = true;
+				if (delegated_event.hoisted) {
+					delegated_event.function.metadata.hoisted = true;
 				}
 
 				node.metadata.delegated = delegated_event;
@@ -50,6 +50,9 @@ export function Attribute(node, context) {
 	}
 }
 
+/** @type {DelegatedEvent} */
+const unhoisted = { hoisted: false };
+
 /**
  * Checks if given event attribute can be delegated/hoisted and returns the corresponding info if so
  * @param {string} event_name
@@ -58,26 +61,24 @@ export function Attribute(node, context) {
  * @returns {null | DelegatedEvent}
  */
 function get_delegated_event(event_name, handler, context) {
-	// Handle delegated event handlers. Bail-out if not a delegated event.
+	// Handle delegated event handlers. Bail out if not a delegated event.
 	if (!handler || !is_delegated(event_name)) {
 		return null;
 	}
 
-	// If we are not working with a RegularElement, then bail-out.
+	// If we are not working with a RegularElement, then bail out.
 	const element = context.path.at(-1);
 	if (element?.type !== 'RegularElement') {
 		return null;
 	}
 
-	/** @type {DelegatedEvent} */
-	const non_hoistable = { type: 'non-hoistable' };
 	/** @type {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression | null} */
 	let target_function = null;
 	let binding = null;
 
 	if (element.metadata.has_spread) {
 		// event attribute becomes part of the dynamic spread array
-		return non_hoistable;
+		return unhoisted;
 	}
 
 	if (handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') {
@@ -86,14 +87,14 @@ function get_delegated_event(event_name, handler, context) {
 		binding = context.state.scope.get(handler.name);
 
 		if (context.state.analysis.module.scope.references.has(handler.name)) {
-			// If a binding with the same name is referenced in the module scope (even if not declared there), bail-out
-			return non_hoistable;
+			// If a binding with the same name is referenced in the module scope (even if not declared there), bail out
+			return unhoisted;
 		}
 
 		if (binding != null) {
 			for (const { path } of binding.references) {
 				const parent = path.at(-1);
-				if (parent == null) return non_hoistable;
+				if (parent === undefined) return unhoisted;
 
 				const grandparent = path.at(-2);
 
@@ -120,17 +121,17 @@ function get_delegated_event(event_name, handler, context) {
 						element.metadata.has_spread ||
 						!is_delegated(event_name)
 					) {
-						return non_hoistable;
+						return unhoisted;
 					}
 				} else if (parent.type !== 'FunctionDeclaration' && parent.type !== 'VariableDeclarator') {
-					return non_hoistable;
+					return unhoisted;
 				}
 			}
 		}
 
-		// If the binding is exported, bail-out
+		// If the binding is exported, bail out
 		if (context.state.analysis.exports.find((node) => node.name === handler.name)) {
-			return non_hoistable;
+			return unhoisted;
 		}
 
 		if (binding !== null && binding.initial !== null && !binding.mutated && !binding.is_called) {
@@ -146,27 +147,25 @@ function get_delegated_event(event_name, handler, context) {
 		}
 	}
 
-	// If we can't find a function, bail-out
-	if (target_function == null) return non_hoistable;
-	// If the function is marked as non-hoistable, bail-out
-	if (target_function.metadata.hoistable === 'impossible') return non_hoistable;
-	// If the function has more than one arg, then bail-out
-	if (target_function.params.length > 1) return non_hoistable;
+	// If we can't find a function, or the function has multiple parameters, bail out
+	if (target_function == null || target_function.params.length > 1) {
+		return unhoisted;
+	}
 
 	const visited_references = new Set();
 	const scope = target_function.metadata.scope;
 	for (const [reference] of scope.references) {
-		// Bail-out if the arguments keyword is used
-		if (reference === 'arguments') return non_hoistable;
-		// Bail-out if references a store subscription
-		if (scope.get(`$${reference}`)?.kind === 'store_sub') return non_hoistable;
+		// Bail out if the arguments keyword is used
+		if (reference === 'arguments') return unhoisted;
+		// Bail out if references a store subscription
+		if (scope.get(`$${reference}`)?.kind === 'store_sub') return unhoisted;
 
 		const binding = scope.get(reference);
 		const local_binding = context.state.scope.get(reference);
 
 		// If we are referencing a binding that is shadowed in another scope then bail out.
 		if (local_binding !== null && binding !== null && local_binding.node !== binding.node) {
-			return non_hoistable;
+			return unhoisted;
 		}
 
 		// If we have multiple references to the same store using $ prefix, bail out.
@@ -175,17 +174,17 @@ function get_delegated_event(event_name, handler, context) {
 			binding.kind === 'store_sub' &&
 			visited_references.has(reference.slice(1))
 		) {
-			return non_hoistable;
+			return unhoisted;
 		}
 
-		// If we reference the index within an each block, then bail-out.
-		if (binding !== null && binding.initial?.type === 'EachBlock') return non_hoistable;
+		// If we reference the index within an each block, then bail out.
+		if (binding !== null && binding.initial?.type === 'EachBlock') return unhoisted;
 
 		if (
 			binding !== null &&
-			// Bail-out if the the binding is a rest param
+			// Bail out if the the binding is a rest param
 			(binding.declaration_kind === 'rest_param' ||
-				// Bail-out if we reference anything from the EachBlock (for now) that mutates in non-runes mode,
+				// Bail out if we reference anything from the EachBlock (for now) that mutates in non-runes mode,
 				(((!context.state.analysis.runes && binding.kind === 'each') ||
 					// or any normal not reactive bindings that are mutated.
 					binding.kind === 'normal' ||
@@ -193,12 +192,12 @@ function get_delegated_event(event_name, handler, context) {
 					binding.kind === 'legacy_reactive_import') &&
 					binding.mutated))
 		) {
-			return non_hoistable;
+			return unhoisted;
 		}
 		visited_references.add(reference);
 	}
 
-	return { type: 'hoistable', function: target_function };
+	return { hoisted: true, function: target_function };
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js
index da1f06d7f6..c6151992bf 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/function.js
@@ -8,9 +8,8 @@
 export function visit_function(node, context) {
 	// TODO retire this in favour of a more general solution based on bindings
 	node.metadata = {
-		// module context -> already hoisted
-		hoistable: context.state.ast_type === 'module' ? 'impossible' : false,
-		hoistable_params: [],
+		hoisted: false,
+		hoisted_params: [],
 		scope: context.state.scope
 	};
 
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 58fae325ef..57ede67bb3 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -481,7 +481,7 @@ export function build_proxy_reassignment(value, proxy_reference) {
  * @param {ComponentContext} context
  * @returns {Pattern[]}
  */
-function get_hoistable_params(node, context) {
+function get_hoisted_params(node, context) {
 	const scope = context.state.scope;
 
 	/** @type {Identifier[]} */
@@ -549,15 +549,15 @@ function get_hoistable_params(node, context) {
  * @param {ComponentContext} context
  * @returns {Pattern[]}
  */
-export function build_hoistable_params(node, context) {
-	const hoistable_params = get_hoistable_params(node, context);
-	node.metadata.hoistable_params = hoistable_params;
+export function build_hoisted_params(node, context) {
+	const hoisted_params = get_hoisted_params(node, context);
+	node.metadata.hoisted_params = hoisted_params;
 
 	/** @type {Pattern[]} */
 	const params = [];
 
 	if (node.params.length === 0) {
-		if (hoistable_params.length > 0) {
+		if (hoisted_params.length > 0) {
 			// For the event object
 			params.push(b.id('_'));
 		}
@@ -567,7 +567,7 @@ export function build_hoistable_params(node, context) {
 		}
 	}
 
-	params.push(...hoistable_params);
+	params.push(...hoisted_params);
 	return params;
 }
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Attribute.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Attribute.js
index 1fcf110216..3cab0d7eec 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Attribute.js
@@ -1,7 +1,7 @@
 /** @import { Attribute } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { is_event_attribute } from '../../../../utils/ast.js';
-import { build_event_attribute } from './shared/element.js';
+import { visit_event_attribute } from './shared/events.js';
 
 /**
  * @param {Attribute} node
@@ -9,6 +9,6 @@ import { build_event_attribute } from './shared/element.js';
  */
 export function Attribute(node, context) {
 	if (is_event_attribute(node)) {
-		build_event_attribute(node, context);
+		visit_event_attribute(node, context);
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
index f223d748ca..ed8fefc6ba 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/FunctionDeclaration.js
@@ -1,6 +1,6 @@
 /** @import { FunctionDeclaration } from 'estree' */
 /** @import { ComponentContext } from '../types' */
-import { build_hoistable_params } from '../utils.js';
+import { build_hoisted_params } from '../utils.js';
 import * as b from '../../../../utils/builders.js';
 
 /**
@@ -8,21 +8,13 @@ import * as b from '../../../../utils/builders.js';
  * @param {ComponentContext} context
  */
 export function FunctionDeclaration(node, context) {
-	const metadata = node.metadata;
-
 	const state = { ...context.state, in_constructor: false };
 
-	if (metadata?.hoistable === true) {
-		const params = build_hoistable_params(node, context);
+	if (node.metadata?.hoisted === true) {
+		const params = build_hoisted_params(node, context);
+		const body = context.visit(node.body, state);
 
-		context.state.hoisted.push(
-			/** @type {FunctionDeclaration} */ ({
-				...node,
-				id: node.id !== null ? context.visit(node.id, state) : null,
-				params,
-				body: context.visit(node.body, state)
-			})
-		);
+		context.state.hoisted.push(/** @type {FunctionDeclaration} */ ({ ...node, params, body }));
 
 		return b.empty;
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js
index dc7da67e16..9bd22b7eb4 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/OnDirective.js
@@ -1,11 +1,38 @@
-/** @import { OnDirective } from '#compiler' */
+/** @import { OnDirective, SvelteNode } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import { build_event } from './shared/element.js';
+import * as b from '../../../../utils/builders.js';
+import { build_event, build_event_handler } from './shared/events.js';
+
+const modifiers = [
+	'stopPropagation',
+	'stopImmediatePropagation',
+	'preventDefault',
+	'self',
+	'trusted',
+	'once'
+];
 
 /**
  * @param {OnDirective} node
  * @param {ComponentContext} context
  */
 export function OnDirective(node, context) {
-	build_event(node, node.metadata.expression, context);
+	if (!node.expression) {
+		context.state.analysis.needs_props = true;
+	}
+
+	let handler = build_event_handler(node.expression, node.metadata.expression, context);
+
+	for (const modifier of modifiers) {
+		if (node.modifiers.includes(modifier)) {
+			handler = b.call('$.' + modifier, handler);
+		}
+	}
+
+	const capture = node.modifiers.includes('capture');
+	const passive =
+		node.modifiers.includes('passive') ||
+		(node.modifiers.includes('nonpassive') ? false : undefined);
+
+	return build_event(node.name, context.state.node, handler, capture, passive);
 }
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 13ebb41d5b..2063027782 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
@@ -24,11 +24,11 @@ import {
 	get_attribute_name,
 	build_attribute_value,
 	build_class_directives,
-	build_event_attribute,
 	build_style_directives
 } from './shared/element.js';
 import { process_children } from './shared/fragment.js';
 import { build_render_statement, build_update, build_update_assignment } from './shared/utils.js';
+import { visit_event_attribute } from './shared/events.js';
 
 /**
  * @param {RegularElement} node
@@ -138,6 +138,13 @@ export function RegularElement(node, context) {
 			style_directives.push(attribute);
 		} else if (attribute.type === 'LetDirective') {
 			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+		} else if (attribute.type === 'OnDirective') {
+			const handler = /** @type {Expression} */ (context.visit(attribute));
+			const has_action_directive = node.attributes.find((a) => a.type === 'UseDirective');
+
+			context.state.after_update.push(
+				b.stmt(has_action_directive ? b.call('$.effect', b.thunk(handler)) : handler)
+			);
 		} else {
 			if (attribute.type === 'BindDirective') {
 				if (attribute.name === 'group' || attribute.name === 'checked') {
@@ -214,7 +221,7 @@ export function RegularElement(node, context) {
 				) {
 					might_need_event_replaying = true;
 				}
-				build_event_attribute(attribute, context);
+				visit_event_attribute(attribute, context);
 				continue;
 			}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBody.js
index 6c7637adee..c046b21534 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteBody.js
@@ -1,14 +1,11 @@
 /** @import { SvelteBody } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import { visit_special_element } from './shared/special_element.js';
 
 /**
  * @param {SvelteBody} node
  * @param {ComponentContext} context
  */
 export function SvelteBody(node, context) {
-	context.next({
-		...context.state,
-		node: b.id('$.document.body')
-	});
+	visit_special_element(node, '$.document.body', context);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteDocument.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteDocument.js
index e11c53fffb..bff32fa570 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteDocument.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteDocument.js
@@ -1,14 +1,11 @@
 /** @import { SvelteDocument } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import { visit_special_element } from './shared/special_element.js';
 
 /**
  * @param {SvelteDocument} node
  * @param {ComponentContext} context
  */
 export function SvelteDocument(node, context) {
-	context.next({
-		...context.state,
-		node: b.id('$.document')
-	});
+	visit_special_element(node, '$.document', context);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
index 72174d1015..90e74259f1 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
@@ -71,6 +71,9 @@ export function SvelteElement(node, context) {
 			style_directives.push(attribute);
 		} else if (attribute.type === 'LetDirective') {
 			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+		} else if (attribute.type === 'OnDirective') {
+			const handler = /** @type {Expression} */ (context.visit(attribute, inner_context.state));
+			inner_context.state.after_update.push(b.stmt(handler));
 		} else {
 			context.visit(attribute, inner_context.state);
 		}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteWindow.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteWindow.js
index 57ac3ee47b..a29fec60bf 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteWindow.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteWindow.js
@@ -1,14 +1,12 @@
+/** @import { Expression } from 'estree' */
 /** @import { SvelteWindow } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '../../../../utils/builders.js';
+import { visit_special_element } from './shared/special_element.js';
 
 /**
  * @param {SvelteWindow} node
  * @param {ComponentContext} context
  */
 export function SvelteWindow(node, context) {
-	context.next({
-		...context.state,
-		node: b.id('$.window')
-	});
+	visit_special_element(node, '$.window', context);
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index 5dfcec4847..1f024ee450 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -13,7 +13,7 @@ import {
 	is_state_source,
 	should_proxy_or_freeze
 } from '../utils.js';
-import { is_hoistable_function } from '../../utils.js';
+import { is_hoisted_function } from '../../utils.js';
 
 /**
  * @param {VariableDeclaration} node
@@ -36,11 +36,11 @@ export function VariableDeclaration(node, context) {
 				rune === '$state.snapshot' ||
 				rune === '$state.is'
 			) {
-				if (init != null && is_hoistable_function(init)) {
-					const hoistable_function = context.visit(init);
+				if (init != null && is_hoisted_function(init)) {
 					context.state.hoisted.push(
-						b.declaration('const', declarator.id, /** @type {Expression} */ (hoistable_function))
+						b.declaration('const', declarator.id, /** @type {Expression} */ (context.visit(init)))
 					);
+
 					continue;
 				}
 				declarations.push(/** @type {VariableDeclarator} */ (context.visit(declarator)));
@@ -219,11 +219,9 @@ export function VariableDeclaration(node, context) {
 			if (!has_state && !has_props) {
 				const init = declarator.init;
 
-				if (init != null && is_hoistable_function(init)) {
-					const hoistable_function = context.visit(init);
-
+				if (init != null && is_hoisted_function(init)) {
 					context.state.hoisted.push(
-						b.declaration('const', declarator.id, /** @type {Expression} */ (hoistable_function))
+						b.declaration('const', declarator.id, /** @type {Expression} */ (context.visit(init)))
 					);
 
 					continue;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index d498ef10ea..ab1abc82da 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -6,8 +6,9 @@ import { get_attribute_chunks } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { is_element_node } from '../../../../nodes.js';
 import { create_derived, build_setter } from '../../utils.js';
-import { build_bind_this, build_event_handler, build_validate_binding } from '../shared/utils.js';
+import { build_bind_this, build_validate_binding } from '../shared/utils.js';
 import { build_attribute_value } from '../shared/element.js';
+import { build_event_handler } from './events.js';
 
 /**
  * @param {Component | SvelteComponent | SvelteSelf} node
@@ -69,12 +70,21 @@ export function build_component(node, component_name, context, anchor = context.
 		if (attribute.type === 'LetDirective') {
 			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
 		} else if (attribute.type === 'OnDirective') {
-			events[attribute.name] ||= [];
-			let handler = build_event_handler(attribute, null, context);
+			if (!attribute.expression) {
+				context.state.analysis.needs_props = true;
+			}
+
+			let handler = build_event_handler(
+				attribute.expression,
+				attribute.metadata.expression,
+				context
+			);
+
 			if (attribute.modifiers.includes('once')) {
 				handler = b.call('$.once', handler);
 			}
-			events[attribute.name].push(handler);
+
+			(events[attribute.name] ||= []).push(handler);
 		} else if (attribute.type === 'SpreadAttribute') {
 			const expression = /** @type {Expression} */ (context.visit(attribute));
 			if (attribute.metadata.expression.has_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 06563cd033..28d6684a57 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
@@ -1,15 +1,10 @@
 /** @import { Expression, Identifier } from 'estree' */
-/** @import { Attribute, ClassDirective, DelegatedEvent, ExpressionMetadata, ExpressionTag, Namespace, OnDirective, RegularElement, StyleDirective, SvelteElement, SvelteNode } from '#compiler' */
+/** @import { Attribute, ClassDirective, ExpressionMetadata, Namespace, RegularElement, StyleDirective, SvelteElement } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
-import {
-	is_capture_event,
-	is_passive_event,
-	normalize_attribute
-} from '../../../../../../utils.js';
-import { get_attribute_expression } from '../../../../../utils/ast.js';
+import { normalize_attribute } from '../../../../../../utils.js';
 import * as b from '../../../../../utils/builders.js';
 import { build_getter } from '../../utils.js';
-import { build_event_handler, build_template_literal, build_update } from './utils.js';
+import { build_template_literal, build_update } from './utils.js';
 
 /**
  * Serializes each style directive into something like `$.set_style(element, style_property, value)`
@@ -131,143 +126,3 @@ export function get_attribute_name(element, attribute, context) {
 
 	return attribute.name;
 }
-
-/**
- * @param {Attribute & { value: ExpressionTag | [ExpressionTag] }} node
- * @param {ComponentContext} context
- */
-export function build_event_attribute(node, context) {
-	/** @type {string[]} */
-	const modifiers = [];
-
-	let event_name = node.name.slice(2);
-	if (is_capture_event(event_name)) {
-		event_name = event_name.slice(0, -7);
-		modifiers.push('capture');
-	}
-
-	build_event(
-		{
-			name: event_name,
-			expression: get_attribute_expression(node),
-			modifiers,
-			delegated: node.metadata.delegated
-		},
-		!Array.isArray(node.value) && node.value?.type === 'ExpressionTag'
-			? node.value.metadata.expression
-			: null,
-		context
-	);
-}
-
-/**
- * Serializes an event handler function of the `on:` directive or an attribute starting with `on`
- * @param {{name: string;modifiers: string[];expression: Expression | null;delegated?: DelegatedEvent | null;}} node
- * @param {null | ExpressionMetadata} metadata
- * @param {ComponentContext} context
- */
-export function build_event(node, metadata, context) {
-	const state = context.state;
-
-	/** @type {Expression} */
-	let expression;
-
-	if (node.expression) {
-		let handler = build_event_handler(node, metadata, context);
-		const event_name = node.name;
-		const delegated = node.delegated;
-
-		if (delegated != null) {
-			let delegated_assignment;
-
-			if (!state.events.has(event_name)) {
-				state.events.add(event_name);
-			}
-			// Hoist function if we can, otherwise we leave the function as is
-			if (delegated.type === 'hoistable') {
-				if (delegated.function === node.expression) {
-					const func_name = context.state.scope.root.unique('on_' + event_name);
-					state.hoisted.push(b.var(func_name, handler));
-					handler = func_name;
-				}
-				if (node.modifiers.includes('once')) {
-					handler = b.call('$.once', handler);
-				}
-				const hoistable_params = /** @type {Expression[]} */ (
-					delegated.function.metadata.hoistable_params
-				);
-				// When we hoist a function we assign an array with the function and all
-				// hoisted closure params.
-				const args = [handler, ...hoistable_params];
-				delegated_assignment = b.array(args);
-			} else {
-				if (node.modifiers.includes('once')) {
-					handler = b.call('$.once', handler);
-				}
-				delegated_assignment = handler;
-			}
-
-			state.init.push(
-				b.stmt(
-					b.assignment(
-						'=',
-						b.member(context.state.node, b.id('__' + event_name)),
-						delegated_assignment
-					)
-				)
-			);
-			return;
-		}
-
-		if (node.modifiers.includes('once')) {
-			handler = b.call('$.once', handler);
-		}
-
-		const args = [
-			b.literal(event_name),
-			context.state.node,
-			handler,
-			b.literal(node.modifiers.includes('capture'))
-		];
-
-		if (node.modifiers.includes('passive')) {
-			args.push(b.literal(true));
-		} else if (node.modifiers.includes('nonpassive')) {
-			args.push(b.literal(false));
-		} else if (
-			is_passive_event(node.name) &&
-			/** @type {OnDirective} */ (node).type !== 'OnDirective'
-		) {
-			// For on:something events we don't apply passive behaviour to match Svelte 4.
-			args.push(b.literal(true));
-		}
-
-		// Events need to run in order with bindings/actions
-		expression = b.call('$.event', ...args);
-	} else {
-		expression = b.call(
-			'$.event',
-			b.literal(node.name),
-			state.node,
-			build_event_handler(node, metadata, context)
-		);
-	}
-
-	const parent = /** @type {SvelteNode} */ (context.path.at(-1));
-	const has_action_directive =
-		parent.type === 'RegularElement' && parent.attributes.find((a) => a.type === 'UseDirective');
-	const statement = b.stmt(
-		has_action_directive ? b.call('$.effect', b.thunk(expression)) : expression
-	);
-
-	if (
-		parent.type === 'SvelteDocument' ||
-		parent.type === 'SvelteWindow' ||
-		parent.type === 'SvelteBody'
-	) {
-		// These nodes are above the component tree, and its events should run parent first
-		state.before_init.push(statement);
-	} else {
-		state.after_update.push(statement);
-	}
-}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
new file mode 100644
index 0000000000..9510715a91
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
@@ -0,0 +1,144 @@
+/** @import { Expression } from 'estree' */
+/** @import { Attribute, ExpressionMetadata, ExpressionTag, OnDirective, SvelteNode } from '#compiler' */
+/** @import { ComponentContext } from '../../types' */
+import { is_capture_event, is_passive_event } from '../../../../../../utils.js';
+import * as b from '../../../../../utils/builders.js';
+
+/**
+ * @param {Attribute} node
+ * @param {ComponentContext} context
+ */
+export function visit_event_attribute(node, context) {
+	let capture = false;
+
+	let event_name = node.name.slice(2);
+	if (is_capture_event(event_name)) {
+		event_name = event_name.slice(0, -7);
+		capture = true;
+	}
+
+	// we still need to support the weird `onclick="{() => {...}}" form
+	const tag = Array.isArray(node.value)
+		? /** @type {ExpressionTag} */ (node.value[0])
+		: /** @type {ExpressionTag} */ (node.value);
+
+	let handler = build_event_handler(tag.expression, tag.metadata.expression, context);
+
+	if (node.metadata.delegated) {
+		let delegated_assignment;
+
+		if (!context.state.events.has(event_name)) {
+			context.state.events.add(event_name);
+		}
+
+		// Hoist function if we can, otherwise we leave the function as is
+		if (node.metadata.delegated.hoisted) {
+			if (node.metadata.delegated.function === tag.expression) {
+				const func_name = context.state.scope.root.unique('on_' + event_name);
+				context.state.hoisted.push(b.var(func_name, handler));
+				handler = func_name;
+			}
+
+			const hoisted_params = /** @type {Expression[]} */ (
+				node.metadata.delegated.function.metadata.hoisted_params
+			);
+
+			// When we hoist a function we assign an array with the function and all
+			// hoisted closure params.
+			const args = [handler, ...hoisted_params];
+			delegated_assignment = b.array(args);
+		} else {
+			delegated_assignment = handler;
+		}
+
+		context.state.init.push(
+			b.stmt(
+				b.assignment(
+					'=',
+					b.member(context.state.node, b.id('__' + event_name)),
+					delegated_assignment
+				)
+			)
+		);
+	} else {
+		const statement = b.stmt(
+			build_event(event_name, context.state.node, handler, capture, undefined)
+		);
+
+		const type = /** @type {SvelteNode} */ (context.path.at(-1)).type;
+
+		if (type === 'SvelteDocument' || type === 'SvelteWindow' || type === 'SvelteBody') {
+			// These nodes are above the component tree, and its events should run parent first
+			context.state.init.push(statement);
+		} else {
+			context.state.after_update.push(statement);
+		}
+	}
+}
+
+/**
+ * Creates a `$.event(...)` call for non-delegated event handlers
+ * @param {string} event_name
+ * @param {Expression} node
+ * @param {Expression} handler
+ * @param {boolean} capture
+ * @param {boolean | undefined} passive
+ */
+export function build_event(event_name, node, handler, capture, passive) {
+	return b.call(
+		'$.event',
+		b.literal(event_name),
+		node,
+		handler,
+		capture && b.true,
+		passive === undefined ? undefined : b.literal(passive)
+	);
+}
+
+/**
+ * Creates an event handler
+ * @param {Expression | null} node
+ * @param {ExpressionMetadata} metadata
+ * @param {ComponentContext} context
+ * @returns {Expression}
+ */
+export function build_event_handler(node, metadata, context) {
+	if (node === null) {
+		// bubble event
+		return b.function(
+			null,
+			[b.id('$$arg')],
+			b.block([b.stmt(b.call('$.bubble_event.call', b.this, b.id('$$props'), b.id('$$arg')))])
+		);
+	}
+
+	let handler = /** @type {Expression} */ (context.visit(node));
+
+	// inline handler
+	if (handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') {
+		return handler;
+	}
+
+	// function declared in the script
+	if (
+		handler.type === 'Identifier' &&
+		context.state.scope.get(handler.name)?.declaration_kind !== 'import'
+	) {
+		return handler;
+	}
+
+	if (metadata.has_call) {
+		// memoize where necessary
+		const id = b.id(context.state.scope.generate('event_handler'));
+
+		context.state.init.push(b.var(id, b.call('$.derived', b.thunk(handler))));
+		handler = b.call('$.get', id);
+	}
+
+	// wrap the handler in a function, so the expression is re-evaluated for each event
+	return b.function(
+		null,
+		[b.rest(b.id('$$args'))],
+		b.block([b.stmt(b.call(b.member(handler, b.id('apply'), false, true), b.this, b.id('$$args')))])
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
index 9939621890..e66cdcb091 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
@@ -1,6 +1,6 @@
 /** @import { ArrowFunctionExpression, FunctionExpression, Node } from 'estree' */
 /** @import { ComponentContext } from '../../types' */
-import { build_hoistable_params } from '../../utils.js';
+import { build_hoisted_params } from '../../utils.js';
 
 /**
  * @param {ArrowFunctionExpression | FunctionExpression} node
@@ -20,8 +20,8 @@ export const visit_function = (node, context) => {
 		state = { ...context.state, in_constructor: false };
 	}
 
-	if (metadata?.hoistable === true) {
-		const params = build_hoistable_params(node, context);
+	if (metadata?.hoisted === true) {
+		const params = build_hoisted_params(node, context);
 
 		return /** @type {FunctionExpression} */ ({
 			...node,
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/special_element.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/special_element.js
new file mode 100644
index 0000000000..6a0be55949
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/special_element.js
@@ -0,0 +1,23 @@
+/** @import { Expression } from 'estree' */
+/** @import { SvelteBody, SvelteDocument, SvelteWindow } from '#compiler' */
+/** @import { ComponentContext } from '../../types' */
+import { is_event_attribute } from '../../../../../utils/ast.js';
+import * as b from '../../../../../utils/builders.js';
+
+/**
+ *
+ * @param {SvelteBody | SvelteDocument | SvelteWindow} node
+ * @param {string} id
+ * @param {ComponentContext} context
+ */
+export function visit_special_element(node, id, context) {
+	const state = { ...context.state, node: b.id(id) };
+
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'OnDirective') {
+			context.state.init.push(b.stmt(/** @type {Expression} */ (context.visit(attribute, state))));
+		} else {
+			context.visit(attribute, state);
+		}
+	}
+}
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 b6b11c6909..04b7b36186 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,5 +1,5 @@
 /** @import { Expression, ExpressionStatement, Identifier, MemberExpression, Statement, Super, TemplateElement, TemplateLiteral } from 'estree' */
-/** @import { BindDirective, ExpressionMetadata, ExpressionTag, OnDirective, SvelteNode, Text } from '#compiler' */
+/** @import { BindDirective, DelegatedEvent, ExpressionMetadata, ExpressionTag, OnDirective, SvelteNode, Text } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../../types' */
 import { walk } from 'zimmerframe';
 import { object } from '../../../../../utils/ast.js';
@@ -132,115 +132,6 @@ export function build_update_assignment(state, id, init, value, update) {
 	);
 }
 
-/**
- * Serializes the event handler function of the `on:` directive
- * @param {Pick<OnDirective, 'name' | 'modifiers' | 'expression'>} node
- * @param {null | ExpressionMetadata} metadata
- * @param {ComponentContext} context
- */
-export function build_event_handler(node, metadata, { state, visit }) {
-	/** @type {Expression} */
-	let handler;
-
-	if (node.expression) {
-		handler = node.expression;
-
-		// Event handlers can be dynamic (source/store/prop/conditional etc)
-		const dynamic_handler = () =>
-			b.function(
-				null,
-				[b.rest(b.id('$$args'))],
-				b.block([
-					b.return(
-						b.call(
-							b.member(/** @type {Expression} */ (visit(handler)), b.id('apply'), false, true),
-							b.this,
-							b.id('$$args')
-						)
-					)
-				])
-			);
-
-		if (
-			metadata?.has_call &&
-			!(
-				(handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') &&
-				handler.metadata.hoistable
-			)
-		) {
-			// Create a derived dynamic event handler
-			const id = b.id(state.scope.generate('event_handler'));
-
-			state.init.push(
-				b.var(id, b.call('$.derived', b.thunk(/** @type {Expression} */ (visit(handler)))))
-			);
-
-			handler = b.function(
-				null,
-				[b.rest(b.id('$$args'))],
-				b.block([
-					b.return(
-						b.call(
-							b.member(b.call('$.get', id), b.id('apply'), false, true),
-							b.this,
-							b.id('$$args')
-						)
-					)
-				])
-			);
-		} else if (handler.type === 'Identifier' || handler.type === 'MemberExpression') {
-			const id = object(handler);
-			const binding = id === null ? null : state.scope.get(id.name);
-			if (
-				binding !== null &&
-				(binding.kind === 'state' ||
-					binding.kind === 'frozen_state' ||
-					binding.declaration_kind === 'import' ||
-					binding.kind === 'legacy_reactive' ||
-					binding.kind === 'derived' ||
-					binding.kind === 'prop' ||
-					binding.kind === 'bindable_prop' ||
-					binding.kind === 'store_sub')
-			) {
-				handler = dynamic_handler();
-			} else {
-				handler = /** @type {Expression} */ (visit(handler));
-			}
-		} else if (handler.type === 'ConditionalExpression' || handler.type === 'LogicalExpression') {
-			handler = dynamic_handler();
-		} else {
-			handler = /** @type {Expression} */ (visit(handler));
-		}
-	} else {
-		state.analysis.needs_props = true;
-
-		// Function + .call to preserve "this" context as much as possible
-		handler = b.function(
-			null,
-			[b.id('$$arg')],
-			b.block([b.stmt(b.call('$.bubble_event.call', b.this, b.id('$$props'), b.id('$$arg')))])
-		);
-	}
-
-	if (node.modifiers.includes('stopPropagation')) {
-		handler = b.call('$.stopPropagation', handler);
-	}
-	if (node.modifiers.includes('stopImmediatePropagation')) {
-		handler = b.call('$.stopImmediatePropagation', handler);
-	}
-	if (node.modifiers.includes('preventDefault')) {
-		handler = b.call('$.preventDefault', handler);
-	}
-	if (node.modifiers.includes('self')) {
-		handler = b.call('$.self', handler);
-	}
-	if (node.modifiers.includes('trusted')) {
-		handler = b.call('$.trusted', handler);
-	}
-
-	return handler;
-}
-
 /**
  * Serializes `bind:this` for components and elements.
  * @param {Identifier | MemberExpression} expression
diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js
index 2b35fa67d7..188ae6739f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/utils.js
@@ -20,13 +20,13 @@ import { dev } from '../../state.js';
  * @param {Node} node
  * @returns {boolean}
  */
-export function is_hoistable_function(node) {
+export function is_hoisted_function(node) {
 	if (
 		node.type === 'ArrowFunctionExpression' ||
 		node.type === 'FunctionExpression' ||
 		node.type === 'FunctionDeclaration'
 	) {
-		return node.metadata?.hoistable === true;
+		return node.metadata?.hoisted === true;
 	}
 	return false;
 }
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index a223834d06..96c0f65eb7 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -82,24 +82,24 @@ export interface ComponentAnalysis extends Analysis {
 declare module 'estree' {
 	interface ArrowFunctionExpression {
 		metadata: {
-			hoistable: boolean | 'impossible';
-			hoistable_params: Pattern[];
+			hoisted: boolean;
+			hoisted_params: Pattern[];
 			scope: Scope;
 		};
 	}
 
 	interface FunctionExpression {
 		metadata: {
-			hoistable: boolean | 'impossible';
-			hoistable_params: Pattern[];
+			hoisted: boolean;
+			hoisted_params: Pattern[];
 			scope: Scope;
 		};
 	}
 
 	interface FunctionDeclaration {
 		metadata: {
-			hoistable: boolean | 'impossible';
-			hoistable_params: Pattern[];
+			hoisted: boolean;
+			hoisted_params: Pattern[];
 			scope: Scope;
 		};
 	}
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 373822a873..86341d07d0 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -214,10 +214,10 @@ export interface OnDirective extends BaseNode {
 
 export type DelegatedEvent =
 	| {
-			type: 'hoistable';
+			hoisted: true;
 			function: ArrowFunctionExpression | FunctionExpression | FunctionDeclaration;
 	  }
-	| { type: 'non-hoistable' };
+	| { hoisted: false };
 
 /** A `style:` directive */
 export interface StyleDirective extends BaseNode {
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index cf2e7cc11d..9fd238c866 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -252,7 +252,7 @@ export function legacy_pre_effect(deps, fn) {
 		deps();
 
 		// If this legacy pre effect has already run before the end of the reset, then
-		// bail-out to emulate the same behavior.
+		// bail out to emulate the same behavior.
 		if (token.ran) return;
 
 		token.ran = true;
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-element-event-handler-2/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-2/_config.js
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/dynamic-element-event-handler-2/_config.js
rename to packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-2/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-element-event-handler-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-2/main.svelte
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/dynamic-element-event-handler-2/main.svelte
rename to packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-2/main.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-3/Button.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-3/Button.svelte
new file mode 100644
index 0000000000..8fcd7c705d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-3/Button.svelte
@@ -0,0 +1,3 @@
+<button on:click>
+	<slot />
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-3/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-3/_config.js
new file mode 100644
index 0000000000..b87e8c4ce1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-3/_config.js
@@ -0,0 +1,34 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs, target }) {
+		const [b1, b2, b3] = target.querySelectorAll('button');
+
+		b2?.click();
+		b2?.click();
+		b3?.click();
+		b3?.click();
+
+		b1?.click();
+
+		b2?.click();
+		b2?.click();
+		b3?.click();
+		b3?.click();
+
+		assert.deepEqual(logs, [
+			'creating handler (1)',
+			1,
+			2,
+			'creating handler (1)',
+			3,
+			4,
+			'creating handler (2)',
+			6,
+			8,
+			'creating handler (2)',
+			10,
+			12
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-3/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-3/main.svelte
new file mode 100644
index 0000000000..2f7bb13043
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dynamic-event-handler-3/main.svelte
@@ -0,0 +1,27 @@
+<script>
+	import Button from './Button.svelte';
+
+	let count = $state(0);
+	let d = $state(1);
+
+	function create_handler() {
+		const change = d;
+
+		console.log(`creating handler (${change})`);
+
+		return function increment() {
+			count += change;
+			console.log(count);
+		};
+	}
+</script>
+
+<button on:click={() => (d += 1)}>increase d ({d})</button>
+
+<button on:click={create_handler()}>
+	clicks: {count}
+</button>
+
+<Button on:click={create_handler()}>
+	clicks: {count}
+</Button>
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-element-event-handler/_config.js b/packages/svelte/tests/runtime-runes/samples/dynamic-event-handler/_config.js
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/dynamic-element-event-handler/_config.js
rename to packages/svelte/tests/runtime-runes/samples/dynamic-event-handler/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/dynamic-element-event-handler/main.svelte b/packages/svelte/tests/runtime-runes/samples/dynamic-event-handler/main.svelte
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/dynamic-element-event-handler/main.svelte
rename to packages/svelte/tests/runtime-runes/samples/dynamic-event-handler/main.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-not-reactive/_config.js b/packages/svelte/tests/runtime-runes/samples/event-attribute-not-reactive/_config.js
new file mode 100644
index 0000000000..3dfeaa2952
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-not-reactive/_config.js
@@ -0,0 +1,19 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	test({ assert, target }) {
+		const [btn1, btn2, btn3] = target.querySelectorAll('button');
+
+		flushSync(() => btn3.click());
+		assert.htmlEqual(/** @type {string} */ (btn3.textContent), 'clicks: 1');
+
+		flushSync(() => btn2.click());
+		flushSync(() => btn3.click());
+		assert.htmlEqual(/** @type {string} */ (btn3.textContent), 'clicks: 0');
+
+		flushSync(() => btn1.click());
+		flushSync(() => btn3.click());
+		assert.htmlEqual(/** @type {string} */ (btn3.textContent), 'clicks: 1');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-not-reactive/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute-not-reactive/main.svelte
new file mode 100644
index 0000000000..9de44f23d9
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-not-reactive/main.svelte
@@ -0,0 +1,19 @@
+<script>
+	let count = $state(0);
+
+	const handlers = {
+		current: increment
+	};
+
+	function increment() {
+		count += 1;
+	}
+
+	function decrement() {
+		count -= 1;
+	}
+</script>
+
+<button onclick={() => (handlers.current = increment)}>increment</button>
+<button onclick={() => (handlers.current = decrement)}>decrement</button>
+<button onclick={handlers.current}>clicks: {count}</button>
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 8212c52cc0..969f89222d 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1672,10 +1672,10 @@ declare module 'svelte/compiler' {
 
 	type DelegatedEvent =
 		| {
-				type: 'hoistable';
+				hoisted: true;
 				function: ArrowFunctionExpression | FunctionExpression | FunctionDeclaration;
 		  }
-		| { type: 'non-hoistable' };
+		| { hoisted: false };
 
 	/** A `style:` directive */
 	interface StyleDirective extends BaseNode {

From e747a6f75d67a33fc95cb60afbe9f7c024fb65be Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 5 Aug 2024 12:26:03 -0400
Subject: [PATCH 066/196] Version Packages (next) (#12718)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  5 +++++
 packages/svelte/CHANGELOG.md   | 14 ++++++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index ef858b3956..1f55abbc7d 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -67,6 +67,7 @@
     "chilled-ladybugs-invite",
     "chilled-pumas-invite",
     "chilled-seas-jog",
+    "chilly-carpets-switch",
     "chilly-dolphins-lick",
     "chilly-laws-juggle",
     "chilly-pans-raise",
@@ -115,6 +116,7 @@
     "dirty-donuts-yell",
     "dirty-eyes-itch",
     "dirty-garlics-design",
+    "dirty-pens-look",
     "dirty-pianos-eat",
     "dirty-tips-add",
     "dry-clocks-grow",
@@ -264,6 +266,7 @@
     "happy-moles-live",
     "happy-suits-film",
     "healthy-ants-film",
+    "healthy-mangos-brush",
     "healthy-planes-vanish",
     "healthy-zebras-accept",
     "heavy-comics-move",
@@ -354,6 +357,7 @@
     "loud-cheetahs-flow",
     "loud-insects-arrive",
     "loud-mugs-smile",
+    "loud-news-deliver",
     "loud-numbers-flow",
     "loud-penguins-unite",
     "loud-ravens-drop",
@@ -495,6 +499,7 @@
     "red-cycles-pretend",
     "red-doors-own",
     "red-feet-worry",
+    "red-kings-draw",
     "red-poets-study",
     "red-pots-pretend",
     "rich-cobras-exist",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 1007ba88b1..5b31ce4818 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,19 @@
 # svelte
 
+## 5.0.0-next.209
+
+### Patch Changes
+
+- fix: add css hash to custom element rendered with `svelte:element` ([#12715](https://github.com/sveltejs/svelte/pull/12715))
+
+- fix: correctly handle SvelteDate methods with arguments ([#12738](https://github.com/sveltejs/svelte/pull/12738))
+
+- fix: add touch events on microtask to avoid Chromium bug ([#12735](https://github.com/sveltejs/svelte/pull/12735))
+
+- fix: allow deletion of $restProps properties ([#12736](https://github.com/sveltejs/svelte/pull/12736))
+
+- feat: more efficient code generation when referencing globals ([#12712](https://github.com/sveltejs/svelte/pull/12712))
+
 ## 5.0.0-next.208
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 1f3cdb86e1..dc5d52bbbf 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.208",
+  "version": "5.0.0-next.209",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index c70a430439..fee11f47e8 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.208';
+export const VERSION = '5.0.0-next.209';
 export const PUBLIC_VERSION = '5';

From 98ae05b5693ad5722a4fa0de1bcaca329338c949 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 5 Aug 2024 13:42:05 -0400
Subject: [PATCH 067/196] Version Packages (next) (#12741)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 2 ++
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 1f55abbc7d..efe9a46a51 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -598,6 +598,7 @@
     "small-planets-destroy",
     "small-sheep-type",
     "small-spiders-fail",
+    "smart-cars-know",
     "smart-cherries-leave",
     "smart-fans-crash",
     "smart-grapes-mate",
@@ -765,6 +766,7 @@
     "wild-foxes-wonder",
     "wild-moose-compare",
     "wild-poems-design",
+    "wild-pumas-count",
     "wise-apples-care",
     "wise-dancers-hang",
     "wise-dodos-tell",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 5b31ce4818..19db51983b 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.210
+
+### Patch Changes
+
+- fix: avoid recreating handlers for component events ([#12722](https://github.com/sveltejs/svelte/pull/12722))
+
+- fix: call correct event handler for properties of non-reactive objects ([#12722](https://github.com/sveltejs/svelte/pull/12722))
+
 ## 5.0.0-next.209
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index dc5d52bbbf..6b5a7c671b 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.209",
+  "version": "5.0.0-next.210",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index fee11f47e8..cb12a054f7 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.209';
+export const VERSION = '5.0.0-next.210';
 export const PUBLIC_VERSION = '5';

From bd9a2d2077592fb44bc4bf474d10f34f900602d7 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 6 Aug 2024 15:12:55 +0100
Subject: [PATCH 068/196] fix: ensure unowned deriveds correctly update
 (#12747)

---
 .changeset/olive-forks-grin.md                 |  5 +++++
 packages/svelte/src/internal/client/runtime.js |  7 +++++--
 packages/svelte/tests/signals/test.ts          | 17 +++++++++++++++++
 3 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/olive-forks-grin.md

diff --git a/.changeset/olive-forks-grin.md b/.changeset/olive-forks-grin.md
new file mode 100644
index 0000000000..6b66827c86
--- /dev/null
+++ b/.changeset/olive-forks-grin.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure unowned deriveds correctly update
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 779548a65c..d04d66ba8a 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -162,9 +162,9 @@ export function check_dirtiness(reaction) {
 
 	if ((flags & MAYBE_DIRTY) !== 0) {
 		var dependencies = reaction.deps;
+		var is_unowned = (flags & UNOWNED) !== 0;
 
 		if (dependencies !== null) {
-			var is_unowned = (flags & UNOWNED) !== 0;
 			var i;
 
 			if ((flags & DISCONNECTED) !== 0) {
@@ -198,7 +198,10 @@ export function check_dirtiness(reaction) {
 			}
 		}
 
-		set_signal_status(reaction, CLEAN);
+		// Unowned signals should never be marked as clean.
+		if (!is_unowned) {
+			set_signal_status(reaction, CLEAN);
+		}
 	}
 
 	return false;
diff --git a/packages/svelte/tests/signals/test.ts b/packages/svelte/tests/signals/test.ts
index 9e537b7659..d14d5fe964 100644
--- a/packages/svelte/tests/signals/test.ts
+++ b/packages/svelte/tests/signals/test.ts
@@ -676,4 +676,21 @@ describe('signals', () => {
 			assert.equal(d.deps?.length, 1);
 		};
 	});
+
+	test('unowned deriveds correctly update', () => {
+		return () => {
+			const arr1 = proxy<{ a: number }[]>([]);
+			const arr2 = proxy([]);
+			const combined = derived(() => [...arr1, ...arr2]);
+			const derived_length = derived(() => $.get(combined).length);
+
+			assert.deepEqual($.get(combined), []);
+			assert.equal($.get(derived_length), 0);
+
+			arr1.push({ a: 1 });
+
+			assert.deepEqual($.get(combined), [{ a: 1 }]);
+			assert.equal($.get(derived_length), 1);
+		};
+	});
 });

From d06174e4616bd6c461982c3b8dab4a0a2e1def79 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 6 Aug 2024 16:46:36 +0100
Subject: [PATCH 069/196] chore: add error for derived self referencing
 (#12746)

* chore: add warning for derived self referencin

* update build

* address feedback

* address feedback

* build

* messages shouldn't end with a period

* simplify test

* regenerate

* newlines are free

* no need to export this, we can move it closer to where it's used

* fix double negative

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/new-cooks-roll.md                  |  5 +++++
 .../svelte/messages/client-errors/errors.md   |  4 ++++
 packages/svelte/src/internal/client/errors.js | 16 ++++++++++++++
 .../internal/client/reactivity/deriveds.js    | 21 +++++++++++++++++++
 .../samples/derived-fn-recursive/_config.js   | 21 +++++++++++++++++++
 .../samples/derived-fn-recursive/main.svelte  | 11 ++++++++++
 6 files changed, 78 insertions(+)
 create mode 100644 .changeset/new-cooks-roll.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-fn-recursive/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/derived-fn-recursive/main.svelte

diff --git a/.changeset/new-cooks-roll.md b/.changeset/new-cooks-roll.md
new file mode 100644
index 0000000000..d13c52a799
--- /dev/null
+++ b/.changeset/new-cooks-roll.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: add error for derived self referencing
diff --git a/packages/svelte/messages/client-errors/errors.md b/packages/svelte/messages/client-errors/errors.md
index 442a9e7684..f0ca476ff1 100644
--- a/packages/svelte/messages/client-errors/errors.md
+++ b/packages/svelte/messages/client-errors/errors.md
@@ -18,6 +18,10 @@
 
 > Attempted to instantiate %component% with `new %name%`, which is no longer valid in Svelte 5. If this component is not under your control, set the `compatibility.componentApi` compiler option to `4` to keep it working. See https://svelte-5-preview.vercel.app/docs/breaking-changes#components-are-no-longer-classes for more information
 
+## derived_references_self
+
+> A derived value cannot reference itself recursively
+
 ## each_key_duplicate
 
 > Keyed each block has duplicate key at indexes %a% and %b%
diff --git a/packages/svelte/src/internal/client/errors.js b/packages/svelte/src/internal/client/errors.js
index e0d6b73c39..20a338fd5b 100644
--- a/packages/svelte/src/internal/client/errors.js
+++ b/packages/svelte/src/internal/client/errors.js
@@ -93,6 +93,22 @@ export function component_api_invalid_new(component, name) {
 	}
 }
 
+/**
+ * A derived value cannot reference itself recursively
+ * @returns {never}
+ */
+export function derived_references_self() {
+	if (DEV) {
+		const error = new Error(`derived_references_self\nA derived value cannot reference itself recursively`);
+
+		error.name = 'Svelte error';
+		throw error;
+	} else {
+		// TODO print a link to the documentation
+		throw new Error("derived_references_self");
+	}
+}
+
 /**
  * Keyed each block has duplicate key `%value%` at indexes %a% and %b%
  * @param {string} a
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
index 2b9f87dfbf..2063b96cb0 100644
--- a/packages/svelte/src/internal/client/reactivity/deriveds.js
+++ b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -1,4 +1,5 @@
 /** @import { Derived } from '#client' */
+import { DEV } from 'esm-env';
 import { CLEAN, DERIVED, DESTROYED, DIRTY, MAYBE_DIRTY, UNOWNED } from '../constants.js';
 import {
 	current_reaction,
@@ -11,6 +12,7 @@ import {
 	increment_version
 } from '../runtime.js';
 import { equals, safe_equals } from './equality.js';
+import * as e from '../errors.js';
 
 export let updating_derived = false;
 
@@ -79,17 +81,36 @@ function destroy_derived_children(derived) {
 	}
 }
 
+/**
+ * The currently updating deriveds, used to detect infinite recursion
+ * in dev mode and provide a nicer error than 'too much recursion'
+ * @type {Derived[]}
+ */
+let stack = [];
+
 /**
  * @param {Derived} derived
  * @returns {void}
  */
 export function update_derived(derived) {
+	if (DEV) {
+		if (stack.includes(derived)) {
+			e.derived_references_self();
+		}
+
+		stack.push(derived);
+	}
+
 	var previous_updating_derived = updating_derived;
 	updating_derived = true;
 	destroy_derived_children(derived);
 	var value = update_reaction(derived);
 	updating_derived = previous_updating_derived;
 
+	if (DEV) {
+		stack.pop();
+	}
+
 	var status =
 		(current_skip_reaction || (derived.f & UNOWNED) !== 0) && derived.deps !== null
 			? MAYBE_DIRTY
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-fn-recursive/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-fn-recursive/_config.js
new file mode 100644
index 0000000000..ae38cafd69
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-fn-recursive/_config.js
@@ -0,0 +1,21 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>increment</button>\n0`,
+
+	mode: ['client'],
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		btn?.click();
+
+		assert.throws(
+			flushSync,
+			'derived_references_self\nA derived value cannot reference itself recursively'
+		);
+
+		assert.htmlEqual(target.innerHTML, `<button>increment</button>\n0`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-fn-recursive/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-fn-recursive/main.svelte
new file mode 100644
index 0000000000..4ccb5e2d47
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/derived-fn-recursive/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let count = $state(0);
+	let even = $derived.by(() => {
+		return count > 0 ? even : 0;
+	})
+
+</script>
+
+<button onclick={() => count++}>increment</button>
+
+{even}

From 1942f87ed9e2d51f5a86a982d1492e55182ba10b Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 6 Aug 2024 16:49:01 +0100
Subject: [PATCH 070/196] fix: improve prop binding warning validation for
 stores (#12745)

* fix: improve prop binding warning validation for stores

* ts

* address feedback

* add comment

* failing test

* fix/simplify

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/healthy-dancers-play.md            |  5 +++
 .../client/visitors/BindDirective.js          | 12 +++---
 .../client/visitors/shared/component.js       |  4 +-
 .../client/visitors/shared/utils.js           | 40 ++++++++++---------
 .../binding-property-store/Child.svelte       |  5 +++
 .../samples/binding-property-store/_config.js | 11 +++++
 .../binding-property-store/main.svelte        | 12 ++++++
 7 files changed, 61 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/healthy-dancers-play.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/binding-property-store/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/binding-property-store/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/binding-property-store/main.svelte

diff --git a/.changeset/healthy-dancers-play.md b/.changeset/healthy-dancers-play.md
new file mode 100644
index 0000000000..6fe572bb67
--- /dev/null
+++ b/.changeset/healthy-dancers-play.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improve prop binding warning validation for stores
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
index 611e5e570d..8b9064d59a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
@@ -7,7 +7,7 @@ import * as b from '../../../../utils/builders.js';
 import { binding_properties } from '../../../bindings.js';
 import { build_setter } from '../utils.js';
 import { build_attribute_value } from './shared/element.js';
-import { build_bind_this, build_validate_binding } from './shared/utils.js';
+import { build_bind_this, validate_binding } from './shared/utils.js';
 
 /**
  * @param {BindDirective} node
@@ -30,12 +30,10 @@ export function BindDirective(node, context) {
 			)) &&
 		!is_ignored(node, 'binding_property_non_reactive')
 	) {
-		context.state.init.push(
-			build_validate_binding(
-				context.state,
-				node,
-				/**@type {MemberExpression} */ (context.visit(expression))
-			)
+		validate_binding(
+			context.state,
+			node,
+			/**@type {MemberExpression} */ (context.visit(expression))
 		);
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index ab1abc82da..6416e26318 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -6,7 +6,7 @@ import { get_attribute_chunks } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { is_element_node } from '../../../../nodes.js';
 import { create_derived, build_setter } from '../../utils.js';
-import { build_bind_this, build_validate_binding } from '../shared/utils.js';
+import { build_bind_this, validate_binding } from '../shared/utils.js';
 import { build_attribute_value } from '../shared/element.js';
 import { build_event_handler } from './events.js';
 
@@ -151,7 +151,7 @@ export function build_component(node, component_name, context, anchor = context.
 				context.state.analysis.runes &&
 				!is_ignored(node, 'binding_property_non_reactive')
 			) {
-				context.state.init.push(build_validate_binding(context.state, attribute, expression));
+				validate_binding(context.state, attribute, expression);
 			}
 
 			if (attribute.name === 'this') {
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 04b7b36186..874ebe3131 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
@@ -204,28 +204,30 @@ export function build_bind_this(expression, value, { state, visit }) {
  * @param {BindDirective} binding
  * @param {MemberExpression} expression
  */
-export function build_validate_binding(state, binding, expression) {
-	const string = state.analysis.source.slice(binding.start, binding.end);
-
-	const get_object = b.thunk(/** @type {Expression} */ (expression.object));
-	const get_property = b.thunk(
-		/** @type {Expression} */ (
-			expression.computed
-				? expression.property
-				: b.literal(/** @type {Identifier} */ (expression.property).name)
-		)
-	);
+export function validate_binding(state, binding, expression) {
+	// If we are referencing a $store.foo then we don't need to add validation
+	const left = object(binding.expression);
+	const left_binding = left && state.scope.get(left.name);
+	if (left_binding?.kind === 'store_sub') return;
 
 	const loc = locator(binding.start);
 
-	return b.stmt(
-		b.call(
-			'$.validate_binding',
-			b.literal(string),
-			get_object,
-			get_property,
-			loc && b.literal(loc.line),
-			loc && b.literal(loc.column)
+	state.init.push(
+		b.stmt(
+			b.call(
+				'$.validate_binding',
+				b.literal(state.analysis.source.slice(binding.start, binding.end)),
+				b.thunk(/** @type {Expression} */ (expression.object)),
+				b.thunk(
+					/** @type {Expression} */ (
+						expression.computed
+							? expression.property
+							: b.literal(/** @type {Identifier} */ (expression.property).name)
+					)
+				),
+				loc && b.literal(loc.line),
+				loc && b.literal(loc.column)
+			)
 		)
 	);
 }
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-property-store/Child.svelte b/packages/svelte/tests/runtime-runes/samples/binding-property-store/Child.svelte
new file mode 100644
index 0000000000..c1bd5ff3ed
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-property-store/Child.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { value = $bindable() } = $props();
+</script>
+
+<input type="number" bind:value />
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-property-store/_config.js b/packages/svelte/tests/runtime-runes/samples/binding-property-store/_config.js
new file mode 100644
index 0000000000..e93067eb9d
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-property-store/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+	compileOptions: {
+		dev: true
+	},
+	async test({ warnings, assert }) {
+		assert.deepEqual(warnings, []);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-property-store/main.svelte b/packages/svelte/tests/runtime-runes/samples/binding-property-store/main.svelte
new file mode 100644
index 0000000000..206d0ceb44
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/binding-property-store/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { writable } from 'svelte/store';
+	import Child from './Child.svelte';
+
+	let a = writable({ value: 0 });
+	let b = writable({ nested: { value: 0 } });
+</script>
+
+<Child bind:value={$a.value} />
+<Child bind:value={$b.nested.value} />
+<p>{$a.value}</p>
+<p>{$b.nested.value}</p>

From 60148d335286582192808e5721c60fb5c968be57 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 8 Aug 2024 15:39:18 +0200
Subject: [PATCH 071/196] fix: order of arguments for `push_element` in
 `svelte:element` (#12763)

* fix: order of arguments for `push_element` in `svelte:element`

* chore: move test to runtime

* fix: add line and column to function call
---
 .changeset/six-apes-peel.md                      |  5 +++++
 .../3-transform/server/visitors/SvelteElement.js | 16 ++++++++++++++--
 .../invalid-nested-svelte-element/_config.js     |  7 +++++++
 .../invalid-nested-svelte-element/_expected.html |  1 +
 .../_expected_head.html                          |  1 +
 .../invalid-nested-svelte-element/main.svelte    |  3 +++
 6 files changed, 31 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/six-apes-peel.md
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_config.js
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected_head.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte

diff --git a/.changeset/six-apes-peel.md b/.changeset/six-apes-peel.md
new file mode 100644
index 0000000000..e642a1f507
--- /dev/null
+++ b/.changeset/six-apes-peel.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: order of arguments for `push_element` in `svelte:element`
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
index acd9330698..390fde6811 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/SvelteElement.js
@@ -1,7 +1,8 @@
+/** @import { Location } from 'locate-character' */
 /** @import { BlockStatement, Expression } from 'estree' */
 /** @import { SvelteElement } from '#compiler' */
 /** @import { ComponentContext } from '../types.js' */
-import { dev } from '../../../../state.js';
+import { dev, locator } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { determine_namespace_for_children } from '../../utils.js';
 import { build_element_attributes } from './shared/element.js';
@@ -36,7 +37,18 @@ export function SvelteElement(node, context) {
 	build_element_attributes(node, { ...context, state });
 
 	if (dev) {
-		context.state.template.push(b.stmt(b.call('$.push_element', tag, b.id('$$payload'))));
+		const location = /** @type {Location} */ (locator(node.start));
+		context.state.template.push(
+			b.stmt(
+				b.call(
+					'$.push_element',
+					b.id('$$payload'),
+					tag,
+					b.literal(location.line),
+					b.literal(location.column)
+				)
+			)
+		);
 	}
 
 	const attributes = b.block([...state.init, ...build_template(state.template)]);
diff --git a/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_config.js b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_config.js
new file mode 100644
index 0000000000..ed0ead960b
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	}
+});
diff --git a/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected.html b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected.html
new file mode 100644
index 0000000000..70b23b87bc
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected.html
@@ -0,0 +1 @@
+<!--[--><!----><p ><!----><p ><!----></p><!----><!----></p><!----><!--]-->
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected_head.html b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected_head.html
new file mode 100644
index 0000000000..27c37f693b
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/_expected_head.html
@@ -0,0 +1 @@
+<script>console.error("node_invalid_placement_ssr: `<p>` (packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte:1:0) cannot contain `<p>` (packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte:2:1)\n\nThis can cause content to shift around as the browser repairs the HTML, and will likely result in a `hydration_mismatch` warning.")</script>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte
new file mode 100644
index 0000000000..a152dd2b79
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/invalid-nested-svelte-element/main.svelte
@@ -0,0 +1,3 @@
+<svelte:element this={'p'}>
+	<svelte:element this={'p'}></svelte:element>
+</svelte:element>

From ec8a029db4721ef6839c10b0d69112a4cb04eaa1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 8 Aug 2024 14:23:34 -0400
Subject: [PATCH 072/196] fix: skip `is_standalone` optimisation for dynamic
 components (#12767)

* fix: skip `is_standalone` optimisation for dynamic components

* changeset
---
 .changeset/nice-bottles-greet.md                 |  5 +++++
 .../src/compiler/phases/3-transform/utils.js     |  1 +
 .../member-expression-component/Row.svelte       |  5 +++++
 .../member-expression-component/_config.js       | 16 ++++++++++++++++
 .../member-expression-component/main.svelte      | 13 +++++++++++++
 5 files changed, 40 insertions(+)
 create mode 100644 .changeset/nice-bottles-greet.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/member-expression-component/Row.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/member-expression-component/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/member-expression-component/main.svelte

diff --git a/.changeset/nice-bottles-greet.md b/.changeset/nice-bottles-greet.md
new file mode 100644
index 0000000000..88864809fe
--- /dev/null
+++ b/.changeset/nice-bottles-greet.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: skip `is_standalone` optimisation for dynamic components
diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js
index 188ae6739f..8a1a00d862 100644
--- a/packages/svelte/src/compiler/phases/3-transform/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/utils.js
@@ -283,6 +283,7 @@ export function clean_nodes(
 			((first.type === 'RenderTag' && !first.metadata.dynamic) ||
 				(first.type === 'Component' &&
 					!state.options.hmr &&
+					!first.metadata.dynamic &&
 					!first.attributes.some(
 						(attribute) => attribute.type === 'Attribute' && attribute.name.startsWith('--')
 					))),
diff --git a/packages/svelte/tests/runtime-runes/samples/member-expression-component/Row.svelte b/packages/svelte/tests/runtime-runes/samples/member-expression-component/Row.svelte
new file mode 100644
index 0000000000..9169cbb6da
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/member-expression-component/Row.svelte
@@ -0,0 +1,5 @@
+<script>
+	let { id } = $props();
+</script>
+
+<span>{id}</span>
diff --git a/packages/svelte/tests/runtime-runes/samples/member-expression-component/_config.js b/packages/svelte/tests/runtime-runes/samples/member-expression-component/_config.js
new file mode 100644
index 0000000000..e15157dbcc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/member-expression-component/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>flip</button> <span>0</span><span>1</span><span>2</span>`,
+
+	async test({ assert, target }) {
+		const button = target.querySelector('button');
+
+		flushSync(() => button?.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>flip</button> <span>2</span><span>1</span><span>0</span>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/member-expression-component/main.svelte b/packages/svelte/tests/runtime-runes/samples/member-expression-component/main.svelte
new file mode 100644
index 0000000000..647fda6bad
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/member-expression-component/main.svelte
@@ -0,0 +1,13 @@
+<script>
+	import Row from './Row.svelte';
+
+	const items = $state([{ id: 0 }, { id: 1 }, { id: 2 }]);
+
+	const Table = { Row };
+</script>
+
+<button onclick={() => items.reverse()}> flip </button>
+
+{#each items as item (item.id)}
+	<Table.Row id={item.id} />
+{/each}

From 37020384cabc05f94c75694d9061873301870f14 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 10 Aug 2024 06:32:40 -0400
Subject: [PATCH 073/196] Version Packages (next) (#12750)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  5 +++++
 packages/svelte/CHANGELOG.md   | 14 ++++++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index efe9a46a51..5030d31aec 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -266,6 +266,7 @@
     "happy-moles-live",
     "happy-suits-film",
     "healthy-ants-film",
+    "healthy-dancers-play",
     "healthy-mangos-brush",
     "healthy-planes-vanish",
     "healthy-zebras-accept",
@@ -416,8 +417,10 @@
     "nervous-turkeys-end",
     "new-boats-wait",
     "new-brooms-grin",
+    "new-cooks-roll",
     "new-rabbits-flow",
     "nice-avocados-move",
+    "nice-bottles-greet",
     "nice-jobs-breathe",
     "nine-cooks-join",
     "ninety-days-visit",
@@ -436,6 +439,7 @@
     "old-oranges-compete",
     "olive-apples-lick",
     "olive-cobras-wonder",
+    "olive-forks-grin",
     "olive-kangaroos-brake",
     "olive-mice-fix",
     "olive-moons-act",
@@ -569,6 +573,7 @@
     "silver-mice-double",
     "silver-points-approve",
     "silver-sheep-knock",
+    "six-apes-peel",
     "six-bears-trade",
     "six-boats-shave",
     "six-chicken-kneel",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 19db51983b..ba128ef63a 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,19 @@
 # svelte
 
+## 5.0.0-next.211
+
+### Patch Changes
+
+- fix: improve prop binding warning validation for stores ([#12745](https://github.com/sveltejs/svelte/pull/12745))
+
+- chore: add error for derived self referencing ([#12746](https://github.com/sveltejs/svelte/pull/12746))
+
+- fix: skip `is_standalone` optimisation for dynamic components ([#12767](https://github.com/sveltejs/svelte/pull/12767))
+
+- fix: ensure unowned deriveds correctly update ([#12747](https://github.com/sveltejs/svelte/pull/12747))
+
+- fix: order of arguments for `push_element` in `svelte:element` ([#12763](https://github.com/sveltejs/svelte/pull/12763))
+
 ## 5.0.0-next.210
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 6b5a7c671b..7eef44f29f 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.210",
+  "version": "5.0.0-next.211",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index cb12a054f7..afa49ac254 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.210';
+export const VERSION = '5.0.0-next.211';
 export const PUBLIC_VERSION = '5';

From 9f28503bef8ed832a05391aece95e6d12e087949 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Sat, 10 Aug 2024 03:33:35 -0700
Subject: [PATCH 074/196] chore: publish package provenance info (#12779)

---
 .changeset/fluffy-kings-complain.md | 5 +++++
 .github/workflows/release.yml       | 1 +
 packages/svelte/package.json        | 3 +++
 3 files changed, 9 insertions(+)
 create mode 100644 .changeset/fluffy-kings-complain.md

diff --git a/.changeset/fluffy-kings-complain.md b/.changeset/fluffy-kings-complain.md
new file mode 100644
index 0000000000..9eed7768d7
--- /dev/null
+++ b/.changeset/fluffy-kings-complain.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: publish package provenance info
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index d97642601f..e474e60e2b 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -12,6 +12,7 @@ jobs:
     if: github.repository == 'sveltejs/svelte'
     permissions:
       contents: write # to create release (changesets/action)
+      id-token: write # OpenID Connect token needed for provenance
       pull-requests: write # to create pull request (changesets/action)
     name: Release
     runs-on: ubuntu-latest
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 7eef44f29f..c35a6e6af8 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -154,5 +154,8 @@
     "project": [
       "src/**"
     ]
+  },
+  "publishConfig": {
+    "provenance": true
   }
 }

From d6e26c0953f0dc899e6bd4267f5bded05483d295 Mon Sep 17 00:00:00 2001
From: ottomated <31470743+ottomated@users.noreply.github.com>
Date: Sat, 10 Aug 2024 04:08:06 -0700
Subject: [PATCH 075/196] chore: speed up exclude_from_object (#12783)

* speed up exclude_from_object

* changeset

* convert prop names to string at compile time

* faster still

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/brown-insects-float.md                  |  5 +++++
 packages/svelte/src/compiler/utils/ast.js          |  6 +++++-
 packages/svelte/src/internal/client/runtime.js     | 14 +++++++++-----
 .../_config.js                                     | 13 ++++++++-----
 .../main.svelte                                    |  4 ++--
 5 files changed, 29 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/brown-insects-float.md

diff --git a/.changeset/brown-insects-float.md b/.changeset/brown-insects-float.md
new file mode 100644
index 0000000000..58d397b427
--- /dev/null
+++ b/.changeset/brown-insects-float.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+perf: speed up $.exclude_from_object
diff --git a/packages/svelte/src/compiler/utils/ast.js b/packages/svelte/src/compiler/utils/ast.js
index aef6c270a9..1998b0c98e 100644
--- a/packages/svelte/src/compiler/utils/ast.js
+++ b/packages/svelte/src/compiler/utils/ast.js
@@ -276,15 +276,19 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 					const rest_expression = (object) => {
 						/** @type {ESTree.Expression[]} */
 						const props = [];
+
 						for (const p of param.properties) {
 							if (p.type === 'Property' && p.key.type !== 'PrivateIdentifier') {
 								if (p.key.type === 'Identifier' && !p.computed) {
 									props.push(b.literal(p.key.name));
+								} else if (p.key.type === 'Literal') {
+									props.push(b.literal(String(p.key.value)));
 								} else {
-									props.push(p.key);
+									props.push(b.call('String', p.key));
 								}
 							}
 						}
+
 						return b.call('$.exclude_from_object', expression(object), b.array(props));
 					};
 
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index d04d66ba8a..f748fa3993 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -991,12 +991,16 @@ export function update_pre(signal, d = 1) {
  * @returns {Record<string, unknown>}
  */
 export function exclude_from_object(obj, keys) {
-	obj = { ...obj };
-	let key;
-	for (key of keys) {
-		delete obj[key];
+	/** @type {Record<string, unknown>} */
+	var result = {};
+
+	for (var key in obj) {
+		if (!keys.includes(key)) {
+			result[key] = obj[key];
+		}
 	}
-	return obj;
+
+	return result;
 }
 
 /**
diff --git a/packages/svelte/tests/runtime-legacy/samples/each-block-destructured-object-literal-rest/_config.js b/packages/svelte/tests/runtime-legacy/samples/each-block-destructured-object-literal-rest/_config.js
index fc91ce3f6d..3915e2eda3 100644
--- a/packages/svelte/tests/runtime-legacy/samples/each-block-destructured-object-literal-rest/_config.js
+++ b/packages/svelte/tests/runtime-legacy/samples/each-block-destructured-object-literal-rest/_config.js
@@ -9,18 +9,21 @@ export default test({
 					quote: 'q1',
 					'wrong-quote': 'wq1',
 					16: '16',
+					17: '17',
 					class: 'class'
 				},
 				{
 					quote: 'q2',
 					'wrong-quote': 'wq2',
 					16: 'sixteen',
+					17: 'seventeen',
 					class: 'glass'
 				},
 				{
 					quote: 'q3',
 					'wrong-quote': 'wq3',
 					16: 'seize',
+					17: 'dix-sept',
 					class: 'mass'
 				}
 			]
@@ -28,19 +31,19 @@ export default test({
 	},
 
 	html: `
-    <p class="class">Quote: q1, Wrong Quote: wq1, 16: 16</p>
-    <p class="glass">Quote: q2, Wrong Quote: wq2, 16: sixteen</p>
-    <p class="mass">Quote: q3, Wrong Quote: wq3, 16: seize</p>
+    <p class="class">Quote: q1, Wrong Quote: wq1, 16: 16, 17: 17</p>
+    <p class="glass">Quote: q2, Wrong Quote: wq2, 16: sixteen, 17: seventeen</p>
+    <p class="mass">Quote: q3, Wrong Quote: wq3, 16: seize, 17: dix-sept</p>
 	`,
 
 	test({ assert, component, target }) {
 		component.objectsArray = [
-			{ quote: 'new-quote', 'wrong-quote': 'wq4', 16: 'ten+six', role: 'role' }
+			{ quote: 'new-quote', 'wrong-quote': 'wq4', 16: 'ten+six', 17: 'ten+seven', role: 'role' }
 		];
 		assert.htmlEqual(
 			target.innerHTML,
 			`
-			<p role="role">Quote: new-quote, Wrong Quote: wq4, 16: ten+six</p>
+			<p role="role">Quote: new-quote, Wrong Quote: wq4, 16: ten+six, 17: ten+seven</p>
 		`
 		);
 	}
diff --git a/packages/svelte/tests/runtime-legacy/samples/each-block-destructured-object-literal-rest/main.svelte b/packages/svelte/tests/runtime-legacy/samples/each-block-destructured-object-literal-rest/main.svelte
index 943b3b7940..84a4f1b4fe 100644
--- a/packages/svelte/tests/runtime-legacy/samples/each-block-destructured-object-literal-rest/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/each-block-destructured-object-literal-rest/main.svelte
@@ -2,6 +2,6 @@
 	export let objectsArray;
 </script>
 
-{#each objectsArray as { "quote": quotedProp, "wrong-quote": wrongQuote, 16: sixteen, ...props } }
-	<p {...props}>Quote: {quotedProp}, Wrong Quote: {wrongQuote}, 16: {sixteen}</p>
+{#each objectsArray as { "quote": quotedProp, "wrong-quote": wrongQuote, 16: sixteen, [10 + 7]: seventeen, ...props }}
+	<p {...props}>Quote: {quotedProp}, Wrong Quote: {wrongQuote}, 16: {sixteen}, 17: {seventeen}</p>
 {/each}

From 7de3e3b70362003a525d9aa841fdcac9605b622d Mon Sep 17 00:00:00 2001
From: ottomated <31470743+ottomated@users.noreply.github.com>
Date: Sat, 10 Aug 2024 04:49:24 -0700
Subject: [PATCH 076/196] feat: simplify derived object destructuring (#12781)

* simplify derived object destructuring

* add test for destructuring an array

* add changeset

* shorter temp variable name

* skip intermediate derived for simple cases

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/wicked-years-drive.md              |  5 ++
 .../client/visitors/VariableDeclaration.js    | 50 ++++++++-----------
 .../samples/derived-destructured/_config.js   |  2 +-
 .../samples/derived-destructured/main.svelte  |  5 +-
 4 files changed, 30 insertions(+), 32 deletions(-)
 create mode 100644 .changeset/wicked-years-drive.md

diff --git a/.changeset/wicked-years-drive.md b/.changeset/wicked-years-drive.md
new file mode 100644
index 0000000000..27610ab7c2
--- /dev/null
+++ b/.changeset/wicked-years-drive.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: simplify derived object destructuring
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index 1f024ee450..914db108e3 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -171,39 +171,29 @@ export function VariableDeclaration(node, context) {
 						)
 					);
 				} else {
-					const bindings = context.state.scope.get_bindings(declarator);
-					const object_id = context.state.scope.generate('derived_object');
-					const values_id = context.state.scope.generate('derived_values');
-					declarations.push(
-						b.declarator(
-							b.id(object_id),
-							b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value))
-						)
-					);
-					declarations.push(
-						b.declarator(
-							b.id(values_id),
-							b.call(
-								'$.derived',
-								b.thunk(
-									b.block([
-										b.let(declarator.id, b.call('$.get', b.id(object_id))),
-										b.return(b.array(bindings.map((binding) => binding.node)))
-									])
-								)
-							)
-						)
-					);
+					const bindings = extract_paths(declarator.id);
+
+					const init = /** @type {CallExpression} */ (declarator.init);
+
+					/** @type {Identifier} */
+					let id;
+					let rhs = value;
+
+					if (init.arguments[0].type === 'Identifier') {
+						id = init.arguments[0];
+					} else {
+						id = b.id(context.state.scope.generate('$$d'));
+						rhs = b.call('$.get', id);
+
+						declarations.push(
+							b.declarator(id, b.call('$.derived', rune === '$derived.by' ? value : b.thunk(value)))
+						);
+					}
+
 					for (let i = 0; i < bindings.length; i++) {
 						const binding = bindings[i];
 						declarations.push(
-							b.declarator(
-								binding.node,
-								b.call(
-									'$.derived',
-									b.thunk(b.member(b.call('$.get', b.id(values_id)), b.literal(i), true))
-								)
-							)
+							b.declarator(binding.node, b.call('$.derived', b.thunk(binding.expression(rhs))))
 						);
 					}
 				}
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-destructured/_config.js b/packages/svelte/tests/runtime-runes/samples/derived-destructured/_config.js
index 059c693802..24f9163fd2 100644
--- a/packages/svelte/tests/runtime-runes/samples/derived-destructured/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/derived-destructured/_config.js
@@ -1,5 +1,5 @@
 import { test } from '../../test';
 
 export default test({
-	html: `true 1 2 baz`
+	html: `true 1 2 baz 1 2 3`
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-destructured/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-destructured/main.svelte
index 99892cd748..73d2cca23f 100644
--- a/packages/svelte/tests/runtime-runes/samples/derived-destructured/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/derived-destructured/main.svelte
@@ -1,6 +1,9 @@
 <script>
   let stuff = $state({ foo: true, bar: [1, 2, {baz: 'baz'}] });
   let { foo, bar: [a, b, { baz }]} = $derived(stuff);
+
+	let stuff2 = $state([1, 2, 3]);
+	let [d, e, f] = $derived(stuff2);
 </script>
 
-{foo} {a} {b} {baz}
+{foo} {a} {b} {baz} {d} {e} {f}
\ No newline at end of file

From 9ff33f1346ba9f9b9a1bf841bc14f966ccac2a3e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 10 Aug 2024 08:08:48 -0400
Subject: [PATCH 077/196] Version Packages (next) (#12786)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  3 +++
 packages/svelte/CHANGELOG.md   | 10 ++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 5030d31aec..62f19ca629 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -53,6 +53,7 @@
     "bright-snakes-sing",
     "brown-geckos-fry",
     "brown-houses-obey",
+    "brown-insects-float",
     "brown-months-fry",
     "brown-spoons-boil",
     "calm-buses-clap",
@@ -193,6 +194,7 @@
     "fluffy-colts-grin",
     "fluffy-dolls-share",
     "fluffy-humans-worry",
+    "fluffy-kings-complain",
     "fluffy-ravens-juggle",
     "forty-bikes-buy",
     "forty-comics-invent",
@@ -767,6 +769,7 @@
     "wicked-hairs-cheer",
     "wicked-wasps-allow",
     "wicked-ways-reply",
+    "wicked-years-drive",
     "wild-cows-chew",
     "wild-foxes-wonder",
     "wild-moose-compare",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index ba128ef63a..05da28a721 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.0.0-next.212
+
+### Patch Changes
+
+- perf: speed up $.exclude_from_object ([#12783](https://github.com/sveltejs/svelte/pull/12783))
+
+- chore: publish package provenance info ([#12779](https://github.com/sveltejs/svelte/pull/12779))
+
+- feat: simplify derived object destructuring ([#12781](https://github.com/sveltejs/svelte/pull/12781))
+
 ## 5.0.0-next.211
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index c35a6e6af8..19eece8252 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.211",
+  "version": "5.0.0-next.212",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index afa49ac254..84c2f0521c 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.211';
+export const VERSION = '5.0.0-next.212';
 export const PUBLIC_VERSION = '5';

From c32a91891fc647998f738371a012fcba97d56e50 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sat, 10 Aug 2024 13:44:06 +0100
Subject: [PATCH 078/196] fix: ensure event handlers referencing $host are not
 hoisted (#12775)

---
 .changeset/smooth-windows-explain.md                   |  5 +++++
 .../compiler/phases/2-analyze/visitors/Attribute.js    |  4 ++--
 .../custom-elements-samples/host-rune/_config.js       | 10 ++++++----
 .../custom-elements-samples/host-rune/main.svelte      |  5 +++++
 4 files changed, 18 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/smooth-windows-explain.md

diff --git a/.changeset/smooth-windows-explain.md b/.changeset/smooth-windows-explain.md
new file mode 100644
index 0000000000..82f86945ea
--- /dev/null
+++ b/.changeset/smooth-windows-explain.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure event handlers referencing $host are not hoisted
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 85dfc6c67e..05ba0d486f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -155,8 +155,8 @@ function get_delegated_event(event_name, handler, context) {
 	const visited_references = new Set();
 	const scope = target_function.metadata.scope;
 	for (const [reference] of scope.references) {
-		// Bail out if the arguments keyword is used
-		if (reference === 'arguments') return unhoisted;
+		// Bail out if the arguments keyword is used or $host is referenced
+		if (reference === 'arguments' || reference === '$host') return unhoisted;
 		// Bail out if references a store subscription
 		if (scope.get(`$${reference}`)?.kind === 'store_sub') return unhoisted;
 
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/_config.js
index 0c2625dc20..bf09e864fa 100644
--- a/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/_config.js
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/_config.js
@@ -14,11 +14,13 @@ export default test({
 
 		await tick();
 
-		el.shadowRoot.querySelector('button').click();
-		assert.deepEqual(events, ['greeting', 'hello']);
+		el.shadowRoot.querySelectorAll('button')[0].click();
+		el.shadowRoot.querySelectorAll('button')[1].click();
+		assert.deepEqual(events, ['greeting', 'hello', 'greeting', 'welcome']);
 
 		el.removeEventListener('greeting', handle_evt);
-		el.shadowRoot.querySelector('button').click();
-		assert.deepEqual(events, ['greeting', 'hello']);
+		el.shadowRoot.querySelectorAll('button')[0].click();
+		el.shadowRoot.querySelectorAll('button')[1].click();
+		assert.deepEqual(events, ['greeting', 'hello', 'greeting', 'welcome']);
 	}
 });
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/main.svelte b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/main.svelte
index 080e7a2740..2eddf77e9b 100644
--- a/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/main.svelte
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/host-rune/main.svelte
@@ -4,6 +4,11 @@
 	function greet(greeting) {
 		$host().dispatchEvent(new CustomEvent('greeting', { detail: greeting }))
 	}
+
+	function welcome() {
+		$host().dispatchEvent(new CustomEvent('greeting', { detail: 'welcome' }))
+	}
 </script>
 
 <button onclick={() => greet('hello')}>say hello</button>
+<button onclick={welcome}>say welcome</button>

From 19819d0477203615bdb037bae3c8666f17837081 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sat, 10 Aug 2024 17:36:30 +0100
Subject: [PATCH 079/196] fix: provide more hydration mismatch coverage
 (#12755)

* fix: provide more hydration mismatch coverage

* tweak

* add test for safari borking stuff

* fix

* fix windows test

* failing test

* oops

* revert playground changes

* simplify

* template content hydration logic should really be separate from reset logic

* actually the test is incorrect, and now i cant seem to recreate what i saw before... hmm

* update comment to no longer mention templates

* failing test

* delete test for now

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/stupid-rivers-stare.md             |  5 ++++
 .../client/visitors/RegularElement.js         |  3 +--
 .../src/internal/client/dom/hydration.js      | 27 +++++++++++++++----
 packages/svelte/src/internal/client/index.js  |  2 +-
 .../samples/safari-borking/_config.js         |  5 ++++
 .../samples/safari-borking/_expected.html     |  1 +
 .../samples/safari-borking/_override.html     |  1 +
 .../samples/safari-borking/main.svelte        |  5 ++++
 .../surrounding-whitespace/_expected.html     |  2 ++
 packages/svelte/tests/hydration/test.ts       | 13 ++++-----
 playgrounds/demo/ssr-dev.js                   |  4 ++-
 11 files changed, 53 insertions(+), 15 deletions(-)
 create mode 100644 .changeset/stupid-rivers-stare.md
 create mode 100644 packages/svelte/tests/hydration/samples/safari-borking/_config.js
 create mode 100644 packages/svelte/tests/hydration/samples/safari-borking/_expected.html
 create mode 100644 packages/svelte/tests/hydration/samples/safari-borking/_override.html
 create mode 100644 packages/svelte/tests/hydration/samples/safari-borking/main.svelte
 create mode 100644 packages/svelte/tests/hydration/samples/surrounding-whitespace/_expected.html

diff --git a/.changeset/stupid-rivers-stare.md b/.changeset/stupid-rivers-stare.md
new file mode 100644
index 0000000000..d1d730cd21
--- /dev/null
+++ b/.changeset/stupid-rivers-stare.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: provide more hydration mismatch coverage
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 2063027782..94864fecef 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
@@ -327,9 +327,8 @@ export function RegularElement(node, context) {
 	// set the value of `hydrate_node` to `node.content`
 	if (node.name === 'template') {
 		needs_reset = true;
-
+		child_state.init.push(b.stmt(b.call('$.hydrate_template', arg)));
 		arg = b.member(arg, b.id('content'));
-		child_state.init.push(b.stmt(b.call('$.reset', arg)));
 	}
 
 	process_children(trimmed, () => b.call('$.child', arg), true, {
diff --git a/packages/svelte/src/internal/client/dom/hydration.js b/packages/svelte/src/internal/client/dom/hydration.js
index 5f0880a676..82ad0df613 100644
--- a/packages/svelte/src/internal/client/dom/hydration.js
+++ b/packages/svelte/src/internal/client/dom/hydration.js
@@ -30,21 +30,38 @@ export let hydrate_node;
 
 /** @param {TemplateNode} node */
 export function set_hydrate_node(node) {
+	if (node === null) {
+		w.hydration_mismatch();
+		throw HYDRATION_ERROR;
+	}
+
 	return (hydrate_node = node);
 }
 
 export function hydrate_next() {
-	if (hydrate_node === null) {
+	return set_hydrate_node(/** @type {TemplateNode} */ (hydrate_node.nextSibling));
+}
+
+/** @param {TemplateNode} node */
+export function reset(node) {
+	if (!hydrating) return;
+
+	// If the node has remaining siblings, something has gone wrong
+	if (hydrate_node.nextSibling !== null) {
 		w.hydration_mismatch();
 		throw HYDRATION_ERROR;
 	}
-	return (hydrate_node = /** @type {TemplateNode} */ (hydrate_node.nextSibling));
+
+	hydrate_node = node;
 }
 
-/** @param {TemplateNode} node */
-export function reset(node) {
+/**
+ * @param {HTMLTemplateElement} template
+ */
+export function hydrate_template(template) {
 	if (hydrating) {
-		hydrate_node = node;
+		// @ts-expect-error TemplateNode doesn't include DocumentFragment, but it's actually fine
+		hydrate_node = template.content;
 	}
 }
 
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index edd50bff32..d1885e7d00 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -66,7 +66,7 @@ export {
 	bind_focused
 } from './dom/elements/bindings/universal.js';
 export { bind_window_scroll, bind_window_size } from './dom/elements/bindings/window.js';
-export { next, reset } from './dom/hydration.js';
+export { hydrate_template, next, reset } from './dom/hydration.js';
 export {
 	once,
 	preventDefault,
diff --git a/packages/svelte/tests/hydration/samples/safari-borking/_config.js b/packages/svelte/tests/hydration/samples/safari-borking/_config.js
new file mode 100644
index 0000000000..cf22ff2c85
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/safari-borking/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	expect_hydration_error: true
+});
diff --git a/packages/svelte/tests/hydration/samples/safari-borking/_expected.html b/packages/svelte/tests/hydration/samples/safari-borking/_expected.html
new file mode 100644
index 0000000000..3f23afe0bf
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/safari-borking/_expected.html
@@ -0,0 +1 @@
+<h1>call +636-555-3226 now</h1>
diff --git a/packages/svelte/tests/hydration/samples/safari-borking/_override.html b/packages/svelte/tests/hydration/samples/safari-borking/_override.html
new file mode 100644
index 0000000000..fcbb5c1830
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/safari-borking/_override.html
@@ -0,0 +1 @@
+<!--[--><h1>call <a href="tel:+636-555-3226">+636-555-3226</a> now</h1><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/safari-borking/main.svelte b/packages/svelte/tests/hydration/samples/safari-borking/main.svelte
new file mode 100644
index 0000000000..1385fbb2a4
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/safari-borking/main.svelte
@@ -0,0 +1,5 @@
+<script>
+	const message = `call +636-555-3226 now`;
+</script>
+
+<h1>{message}</h1>
diff --git a/packages/svelte/tests/hydration/samples/surrounding-whitespace/_expected.html b/packages/svelte/tests/hydration/samples/surrounding-whitespace/_expected.html
new file mode 100644
index 0000000000..e728b682d0
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/surrounding-whitespace/_expected.html
@@ -0,0 +1,2 @@
+		<!-- unrelated comment -->
+		<!--[--><!--[-->hello<!--]--><!--]-->
diff --git a/packages/svelte/tests/hydration/test.ts b/packages/svelte/tests/hydration/test.ts
index d592a65de3..7247778d0f 100644
--- a/packages/svelte/tests/hydration/test.ts
+++ b/packages/svelte/tests/hydration/test.ts
@@ -113,15 +113,16 @@ const { test, run } = suite<HydrationTest>(async (config, cwd) => {
 			throw new Error(`Unexpected errors: ${errors.join('\n')}`);
 		}
 
-		if (!override) {
-			const expected = read(`${cwd}/_expected.html`) ?? rendered.html;
-			flushSync();
-			assert.equal(target.innerHTML.trim(), expected.trim());
-		}
+		flushSync();
+
+		const normalize = (string: string) => string.trim().replace(/\r\n/g, '\n');
+
+		const expected = read(`${cwd}/_expected.html`) ?? rendered.html;
+		assert.equal(normalize(target.innerHTML), normalize(expected));
 
 		if (rendered.head) {
 			const expected = read(`${cwd}/_expected_head.html`) ?? rendered.head;
-			assert.equal(head.innerHTML.trim(), expected.trim());
+			assert.equal(normalize(head.innerHTML), normalize(expected));
 		}
 
 		if (config.snapshot) {
diff --git a/playgrounds/demo/ssr-dev.js b/playgrounds/demo/ssr-dev.js
index 617b49e652..65390b70ca 100644
--- a/playgrounds/demo/ssr-dev.js
+++ b/playgrounds/demo/ssr-dev.js
@@ -27,7 +27,9 @@ polka()
 
 		const html = transformed_template
 			.replace(`<!--ssr-head-->`, head)
-			.replace(`<!--ssr-body-->`, body);
+			.replace(`<!--ssr-body-->`, body)
+			// check that Safari doesn't break hydration
+			.replaceAll('+636-555-3226', '<a href="tel:+636-555-3226">+636-555-3226</a>');
 
 		res.writeHead(200, { 'Content-Type': 'text/html' }).end(html);
 	})

From 057316ccd135263348755396bac207e8785d57d9 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 10 Aug 2024 12:52:17 -0400
Subject: [PATCH 080/196] chore: simpler fallback values (#12788)

* DRY

* value_or_fallback_async doesnt do anything

* rename value_or_fallback to fallback

* DRY

* DRY

* make lazy the exception

* changeset
---
 .changeset/witty-frogs-cheat.md               |  5 ++++
 .../server/visitors/VariableDeclaration.js    | 10 +++----
 packages/svelte/src/compiler/utils/ast.js     | 26 ++++++++++++++-----
 packages/svelte/src/internal/client/index.js  |  4 +--
 .../svelte/src/internal/client/runtime.js     | 20 --------------
 packages/svelte/src/internal/server/index.js  | 22 ++--------------
 packages/svelte/src/internal/shared/utils.js  | 15 +++++++++++
 7 files changed, 46 insertions(+), 56 deletions(-)
 create mode 100644 .changeset/witty-frogs-cheat.md

diff --git a/.changeset/witty-frogs-cheat.md b/.changeset/witty-frogs-cheat.md
new file mode 100644
index 0000000000..2b5b81006a
--- /dev/null
+++ b/.changeset/witty-frogs-cheat.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: simpler fallback values
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
index f7809af43a..bd8a8f435e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
@@ -2,7 +2,7 @@
 /** @import { Binding } from '#compiler' */
 /** @import { Context } from '../types.js' */
 /** @import { Scope } from '../../../scope.js' */
-import { extract_paths, is_expression_async } from '../../../../utils/ast.js';
+import { build_fallback, extract_paths } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
 import { get_rune } from '../../../scope.js';
 import { walk } from 'zimmerframe';
@@ -96,9 +96,7 @@ export function VariableDeclaration(node, context) {
 						const name = /** @type {Identifier} */ (path.node).name;
 						const binding = /** @type {Binding} */ (context.state.scope.get(name));
 						const prop = b.member(b.id('$$props'), b.literal(binding.prop_alias ?? name), true);
-						declarations.push(
-							b.declarator(path.node, b.call('$.value_or_fallback', prop, b.thunk(value)))
-						);
+						declarations.push(b.declarator(path.node, build_fallback(prop, value)));
 					}
 					continue;
 				}
@@ -114,9 +112,7 @@ export function VariableDeclaration(node, context) {
 				let init = prop;
 				if (declarator.init) {
 					const default_value = /** @type {Expression} */ (context.visit(declarator.init));
-					init = is_expression_async(default_value)
-						? b.await(b.call('$.value_or_fallback_async', prop, b.thunk(default_value, true)))
-						: b.call('$.value_or_fallback', prop, b.thunk(default_value));
+					init = build_fallback(prop, default_value);
 				}
 
 				declarations.push(b.declarator(declarator.id, init));
diff --git a/packages/svelte/src/compiler/utils/ast.js b/packages/svelte/src/compiler/utils/ast.js
index 1998b0c98e..95b5d2fb2d 100644
--- a/packages/svelte/src/compiler/utils/ast.js
+++ b/packages/svelte/src/compiler/utils/ast.js
@@ -368,12 +368,7 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 
 		case 'AssignmentPattern': {
 			/** @type {DestructuredAssignment['expression']} */
-			const fallback_expression = (object) =>
-				is_expression_async(param.right)
-					? b.await(
-							b.call('$.value_or_fallback_async', expression(object), b.thunk(param.right, true))
-						)
-					: b.call('$.value_or_fallback', expression(object), b.thunk(param.right));
+			const fallback_expression = (object) => build_fallback(expression(object), param.right);
 
 			if (param.left.type === 'Identifier') {
 				assignments.push({
@@ -549,3 +544,22 @@ export function is_expression_async(expression) {
 			return false;
 	}
 }
+
+/**
+ *
+ * @param {ESTree.Expression} expression
+ * @param {ESTree.Expression} fallback
+ */
+export function build_fallback(expression, fallback) {
+	if (is_simple_expression(fallback)) {
+		return b.call('$.fallback', expression, fallback);
+	}
+
+	if (fallback.type === 'AwaitExpression' && is_simple_expression(fallback.argument)) {
+		return b.await(b.call('$.fallback', expression, fallback.argument));
+	}
+
+	return is_expression_async(fallback)
+		? b.await(b.call('$.fallback', expression, b.thunk(fallback, true), b.true))
+		: b.call('$.fallback', expression, b.thunk(fallback), b.true);
+}
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index d1885e7d00..dc51d3caae 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -134,8 +134,6 @@ export {
 	untrack,
 	update,
 	update_pre,
-	value_or_fallback,
-	value_or_fallback_async,
 	exclude_from_object,
 	pop,
 	push,
@@ -164,7 +162,7 @@ export {
 	$document as document
 } from './dom/operations.js';
 export { snapshot } from '../shared/clone.js';
-export { noop } from '../shared/utils.js';
+export { noop, fallback } from '../shared/utils.js';
 export {
 	invalid_default_snippet,
 	validate_dynamic_element_tag,
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index f748fa3993..8939244cf8 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -1003,26 +1003,6 @@ export function exclude_from_object(obj, keys) {
 	return result;
 }
 
-/**
- * @template V
- * @param {V} value
- * @param {() => V} fallback lazy because could contain side effects
- * @returns {V}
- */
-export function value_or_fallback(value, fallback) {
-	return value === undefined ? fallback() : value;
-}
-
-/**
- * @template V
- * @param {V} value
- * @param {() => Promise<V>} fallback lazy because could contain side effects
- * @returns {Promise<V>}
- */
-export async function value_or_fallback_async(value, fallback) {
-	return value === undefined ? fallback() : value;
-}
-
 /**
  * @param {Record<string, unknown>} props
  * @param {any} runes
diff --git a/packages/svelte/src/internal/server/index.js b/packages/svelte/src/internal/server/index.js
index 8ab7e52162..422784d765 100644
--- a/packages/svelte/src/internal/server/index.js
+++ b/packages/svelte/src/internal/server/index.js
@@ -383,26 +383,6 @@ export function unsubscribe_stores(store_values) {
 	}
 }
 
-/**
- * @template V
- * @param {V} value
- * @param {() => V} fallback lazy because could contain side effects
- * @returns {V}
- */
-export function value_or_fallback(value, fallback) {
-	return value === undefined ? fallback() : value;
-}
-
-/**
- * @template V
- * @param {V} value
- * @param {() => Promise<V>} fallback lazy because could contain side effects
- * @returns {Promise<V>}
- */
-export async function value_or_fallback_async(value, fallback) {
-	return value === undefined ? fallback() : value;
-}
-
 /**
  * @param {Payload} payload
  * @param {void | ((payload: Payload, props: Record<string, unknown>) => void)} slot_fn
@@ -536,6 +516,8 @@ export { push_element, pop_element } from './dev.js';
 
 export { snapshot } from '../shared/clone.js';
 
+export { fallback } from '../shared/utils.js';
+
 export {
 	invalid_default_snippet,
 	validate_dynamic_element_tag,
diff --git a/packages/svelte/src/internal/shared/utils.js b/packages/svelte/src/internal/shared/utils.js
index 5285b2c2e1..f32af747a4 100644
--- a/packages/svelte/src/internal/shared/utils.js
+++ b/packages/svelte/src/internal/shared/utils.js
@@ -46,3 +46,18 @@ export function run_all(arr) {
 		arr[i]();
 	}
 }
+
+/**
+ * @template V
+ * @param {V} value
+ * @param {V | (() => V)} fallback
+ * @param {boolean} [lazy]
+ * @returns {V}
+ */
+export function fallback(value, fallback, lazy = false) {
+	return value === undefined
+		? lazy
+			? /** @type {() => V} */ (fallback)()
+			: /** @type {V} */ (fallback)
+		: value;
+}

From d8954d7addb2848947e961f40c6fd2c735c420a5 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sat, 10 Aug 2024 18:15:09 +0100
Subject: [PATCH 081/196] fix: ensure custom elements do not sync flush on
 mount (#12787)

* fix: ensure Svelte4Components do not sync flush

* fix: ensure Svelte4Components do not sync flush

* lint

* feedback

* simplify test, remove redundant comments

* prettier

* fix test

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/cool-turtles-travel.md             |  5 +++++
 packages/svelte/src/legacy/legacy-client.js   |  5 ++++-
 .../effect-sequence/_config.js                | 20 +++++++++++++++++++
 .../effect-sequence/main.svelte               |  7 +++++++
 .../escaped-css/_config.js                    |  1 +
 5 files changed, 37 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/cool-turtles-travel.md
 create mode 100644 packages/svelte/tests/runtime-browser/custom-elements-samples/effect-sequence/_config.js
 create mode 100644 packages/svelte/tests/runtime-browser/custom-elements-samples/effect-sequence/main.svelte

diff --git a/.changeset/cool-turtles-travel.md b/.changeset/cool-turtles-travel.md
new file mode 100644
index 0000000000..31145e6e76
--- /dev/null
+++ b/.changeset/cool-turtles-travel.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure custom elements do not sync flush on mount
diff --git a/packages/svelte/src/legacy/legacy-client.js b/packages/svelte/src/legacy/legacy-client.js
index a11f3f9cee..ff145f3fb2 100644
--- a/packages/svelte/src/legacy/legacy-client.js
+++ b/packages/svelte/src/legacy/legacy-client.js
@@ -110,7 +110,10 @@ class Svelte4Component {
 			recover: options.recover
 		});
 
-		flush_sync();
+		// We don't flush_sync for custom element wrappers
+		if (!options?.props?.$$host) {
+			flush_sync();
+		}
 
 		this.#events = props.$$events;
 
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/effect-sequence/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/effect-sequence/_config.js
new file mode 100644
index 0000000000..84eb9bc13a
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/effect-sequence/_config.js
@@ -0,0 +1,20 @@
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		let changed = false;
+
+		target.innerHTML = '<child-element></child-element>';
+
+		await tick(); // wait for element to upgrade
+
+		target.addEventListener('change', () => {
+			changed = true;
+		});
+
+		await tick(); // wait for effect
+
+		assert.equal(changed, true);
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/effect-sequence/main.svelte b/packages/svelte/tests/runtime-browser/custom-elements-samples/effect-sequence/main.svelte
new file mode 100644
index 0000000000..0f639d6e57
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/effect-sequence/main.svelte
@@ -0,0 +1,7 @@
+<svelte:options customElement="child-element" />
+
+<script>
+	$effect(() => {
+		$host().dispatchEvent(new CustomEvent('change', { bubbles: true }));
+	});
+</script>
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/escaped-css/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/escaped-css/_config.js
index 0cbfd63821..892da67df7 100644
--- a/packages/svelte/tests/runtime-browser/custom-elements-samples/escaped-css/_config.js
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/escaped-css/_config.js
@@ -5,6 +5,7 @@ export default test({
 	async test({ assert, target }) {
 		target.innerHTML = '<custom-element></custom-element>';
 		await tick();
+		await tick();
 		/** @type {any} */
 		const ce = target.querySelector('custom-element');
 		const icon = ce.shadowRoot.querySelector('.icon');

From 1a3dbda20ce5a60d373d1c5127fd892bbd4441ba Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 10 Aug 2024 13:20:19 -0400
Subject: [PATCH 082/196] Version Packages (next) (#12789)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  4 ++++
 packages/svelte/CHANGELOG.md   | 12 ++++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 62f19ca629..10c332ff19 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -98,6 +98,7 @@
     "cool-poems-watch",
     "cool-rabbits-tickle",
     "cool-roses-trade",
+    "cool-turtles-travel",
     "cuddly-pianos-drop",
     "cuddly-points-tickle",
     "curly-cooks-cheer",
@@ -618,6 +619,7 @@
     "smooth-pens-exist",
     "smooth-pens-protect",
     "smooth-rings-rush",
+    "smooth-windows-explain",
     "soft-clocks-remember",
     "soft-geese-learn",
     "soft-months-grab",
@@ -653,6 +655,7 @@
     "strong-pans-doubt",
     "stupid-bottles-lay",
     "stupid-parents-crash",
+    "stupid-rivers-stare",
     "sweet-bottles-check",
     "sweet-mangos-beg",
     "sweet-pens-sniff",
@@ -785,6 +788,7 @@
     "wise-ties-clap",
     "witty-bikes-shave",
     "witty-camels-warn",
+    "witty-frogs-cheat",
     "witty-hornets-think",
     "witty-phones-retire",
     "witty-readers-provide",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 05da28a721..f7d6e9257e 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,17 @@
 # svelte
 
+## 5.0.0-next.213
+
+### Patch Changes
+
+- fix: ensure custom elements do not sync flush on mount ([#12787](https://github.com/sveltejs/svelte/pull/12787))
+
+- fix: ensure event handlers referencing $host are not hoisted ([#12775](https://github.com/sveltejs/svelte/pull/12775))
+
+- fix: provide more hydration mismatch coverage ([#12755](https://github.com/sveltejs/svelte/pull/12755))
+
+- chore: simpler fallback values ([#12788](https://github.com/sveltejs/svelte/pull/12788))
+
 ## 5.0.0-next.212
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 19eece8252..b6d6393487 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.212",
+  "version": "5.0.0-next.213",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 84c2f0521c..b08ee5d3a0 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.212';
+export const VERSION = '5.0.0-next.213';
 export const PUBLIC_VERSION = '5';

From 536be645faefc2a7724fa458ac7eec1c375ae948 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sat, 10 Aug 2024 18:31:41 +0100
Subject: [PATCH 083/196] fix: ensure custom element styles append correctly
 during prod (#12777)

* fix: ensure custom element styles append correctly during prod

* fix

* fix

* fix

* feedback

* only add third argument for custom elements

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/hip-goats-smoke.md                                | 5 +++++
 .../compiler/phases/3-transform/client/transform-client.js   | 4 +++-
 packages/svelte/src/internal/client/dom/css.js               | 5 +++--
 3 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/hip-goats-smoke.md

diff --git a/.changeset/hip-goats-smoke.md b/.changeset/hip-goats-smoke.md
new file mode 100644
index 0000000000..ce023460b7
--- /dev/null
+++ b/.changeset/hip-goats-smoke.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure custom element styles append correctly during prod
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index 82d49f0ad7..6ebb77f2e9 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -380,7 +380,9 @@ export function client_component(analysis, options) {
 		state.hoisted.push(b.const('$$css', b.object([b.init('hash', hash), b.init('code', code)])));
 
 		component_block.body.unshift(
-			b.stmt(b.call('$.append_styles', b.id('$$anchor'), b.id('$$css')))
+			b.stmt(
+				b.call('$.append_styles', b.id('$$anchor'), b.id('$$css'), options.customElement && b.true)
+			)
 		);
 	}
 
diff --git a/packages/svelte/src/internal/client/dom/css.js b/packages/svelte/src/internal/client/dom/css.js
index 1cccb42b3e..dbf862543f 100644
--- a/packages/svelte/src/internal/client/dom/css.js
+++ b/packages/svelte/src/internal/client/dom/css.js
@@ -6,10 +6,11 @@ var seen = new Set();
 /**
  * @param {Node} anchor
  * @param {{ hash: string, code: string }} css
+ * @param {boolean} [is_custom_element]
  */
-export function append_styles(anchor, css) {
+export function append_styles(anchor, css, is_custom_element = false) {
 	// in dev, always check the DOM, so that styles can be replaced with HMR
-	if (!DEV) {
+	if (!DEV && !is_custom_element) {
 		if (seen.has(css)) return;
 		seen.add(css);
 	}

From 8ac13f76f199b32a27913dc06532ca3e7444d2de Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 10 Aug 2024 13:32:10 -0400
Subject: [PATCH 084/196] chore: print compiler warnings when using sandbox
 (#12793)

---
 playgrounds/sandbox/run.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/playgrounds/sandbox/run.js b/playgrounds/sandbox/run.js
index 0b72c18f46..9c48a6c97b 100644
--- a/playgrounds/sandbox/run.js
+++ b/playgrounds/sandbox/run.js
@@ -63,11 +63,18 @@ for (const generate of /** @type {const} */ (['client', 'server'])) {
 			runes: argv.values.runes
 		});
 
+		for (const warning of compiled.warnings) {
+			console.warn(warning.code);
+			console.warn(warning.frame);
+		}
+
 		fs.writeFileSync(
 			output_js,
 			compiled.js.code + '\n//# sourceMappingURL=' + path.basename(output_map)
 		);
+
 		fs.writeFileSync(output_map, compiled.js.map.toString());
+
 		if (compiled.css) {
 			fs.writeFileSync(output_css, compiled.css.code);
 		}

From f13c722ce4b7c42b22c1a4bdf9a4721ea0a5b08e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 10 Aug 2024 13:32:18 -0400
Subject: [PATCH 085/196] chore: increase debug stack trace (#12792)

---
 .vscode/launch.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/.vscode/launch.json b/.vscode/launch.json
index 41d8017ce2..fc593c0d06 100644
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -21,7 +21,10 @@
 			"type": "node",
 			"request": "launch",
 			"name": "Run sandbox",
-			"program": "${workspaceFolder}/playgrounds/sandbox/run.js"
+			"program": "${workspaceFolder}/playgrounds/sandbox/run.js",
+			"env": {
+				"NODE_OPTIONS": "--stack-trace-limit=10000"
+			}
 		}
 	],
 	"compounds": [

From 57a7b0cd4801528ed567788cab9c0de8264050d5 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 10 Aug 2024 15:19:22 -0400
Subject: [PATCH 086/196] chore: transformers (#12780)

* clear out getters on new scope

* fix

* fix

* fix

* fix

* consolidate legacy_reactive_import logic

* unused

* $$sanitized_props

* use getters mechanism for store_sub

* snapshot

* fix

* tests passing

* remove some stuff

* more

* fix

* tidy up

* simplify

* simplify

* getters -> transformers

* update

* use update transformers

* add assign transformer

* more

* tweak

* remove junk

* unused

* simplify

* tidy up

* tweak

* assign_property

* fix

* tidy up

* tidy up

* move store code

* this appears to be unused

* tidy up

* tweak

* simplify

* move code

* move stuff

* note to self

* move stuff

* each blocks

* note to self

* lengthen stack trace

* tweak

* more

* tidy up

* tidy up

* remove some junk

* tidy up

* move stuff

* remove stuff

* tweak

* tweak

* fix

* tweak

* tidy up

* tidy up

* tidy up

* tweak

* simplify

* tidy up

* simplify

* tidy up

* improve output

* delete comments

* more

* unused

* tidy up

* tidy up

* fix

* move some stuff

* tweak

* tidy up

* DRY

* synchronise

* DRY out

* tidy up

* tidy up

* tidy up

* add test that fails on main

* snapshot test

* changesets

* lint

* ugh
---
 .changeset/nine-ants-invite.md                |   5 +
 .changeset/perfect-hairs-matter.md            |   5 +
 .../phases/2-analyze/visitors/Attribute.js    |   4 +-
 .../phases/2-analyze/visitors/EachBlock.js    |  11 +-
 .../phases/2-analyze/visitors/Identifier.js   |  12 +-
 .../2-analyze/visitors/shared/component.js    |  49 +-
 .../3-transform/client/transform-client.js    |  50 +-
 .../phases/3-transform/client/types.d.ts      |  32 +-
 .../phases/3-transform/client/utils.js        | 439 +-----------------
 .../client/visitors/AssignmentExpression.js   | 126 ++++-
 .../3-transform/client/visitors/AwaitBlock.js |  36 +-
 .../client/visitors/BindDirective.js          |  13 +-
 .../client/visitors/BlockStatement.js         |  12 +
 .../3-transform/client/visitors/ConstTag.js   |  13 +-
 .../3-transform/client/visitors/EachBlock.js  | 134 +++---
 .../3-transform/client/visitors/Fragment.js   |   2 +-
 .../client/visitors/LabeledStatement.js       |   2 +-
 .../client/visitors/LetDirective.js           |  14 +-
 .../3-transform/client/visitors/Program.js    | 123 +++++
 .../client/visitors/RegularElement.js         |  11 +-
 .../client/visitors/SnippetBlock.js           |  14 +-
 .../client/visitors/UpdateExpression.js       | 103 ++--
 .../client/visitors/shared/component.js       |  63 +--
 .../client/visitors/shared/declarations.js    |  53 +++
 .../client/visitors/shared/element.js         |   2 +-
 .../client/visitors/shared/utils.js           |  20 +-
 .../server/visitors/AssignmentExpression.js   |  64 +--
 .../server/visitors/shared/component.js       |  21 +-
 .../phases/3-transform/shared/assignments.js  |  77 +++
 .../src/compiler/phases/3-transform/utils.js  |   2 +-
 packages/svelte/src/compiler/phases/scope.js  | 127 +++--
 packages/svelte/src/compiler/types/index.d.ts |   4 +-
 .../svelte/src/compiler/types/template.d.ts   |   8 +
 packages/svelte/src/compiler/utils/ast.js     |  12 +
 packages/svelte/src/compiler/utils/slot.js    |  20 +
 .../samples/each-blocks-update/_config.js     |  27 ++
 .../samples/each-blocks-update/main.svelte    |   9 +
 .../_expected/client/index.svelte.js          |  12 +
 .../_expected/server/index.svelte.js          |   9 +
 .../destructured-assignments/index.svelte.js  |   6 +
 packages/svelte/types/index.d.ts              |  11 +-
 41 files changed, 907 insertions(+), 850 deletions(-)
 create mode 100644 .changeset/nine-ants-invite.md
 create mode 100644 .changeset/perfect-hairs-matter.md
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/BlockStatement.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
 create mode 100644 packages/svelte/src/compiler/phases/3-transform/shared/assignments.js
 create mode 100644 packages/svelte/src/compiler/utils/slot.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/each-blocks-update/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/each-blocks-update/main.svelte
 create mode 100644 packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/server/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/destructured-assignments/index.svelte.js

diff --git a/.changeset/nine-ants-invite.md b/.changeset/nine-ants-invite.md
new file mode 100644
index 0000000000..fdf33c27a9
--- /dev/null
+++ b/.changeset/nine-ants-invite.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: invalidate signals following ++/-- inside each block
diff --git a/.changeset/perfect-hairs-matter.md b/.changeset/perfect-hairs-matter.md
new file mode 100644
index 0000000000..8ec02f7507
--- /dev/null
+++ b/.changeset/perfect-hairs-matter.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: better code generation for destructuring assignments
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 05ba0d486f..102091c78d 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -187,9 +187,7 @@ function get_delegated_event(event_name, handler, context) {
 				// Bail out if we reference anything from the EachBlock (for now) that mutates in non-runes mode,
 				(((!context.state.analysis.runes && binding.kind === 'each') ||
 					// or any normal not reactive bindings that are mutated.
-					binding.kind === 'normal' ||
-					// or any reactive imports (those are rewritten) (can only happen in legacy mode)
-					binding.kind === 'legacy_reactive_import') &&
+					binding.kind === 'normal') &&
 					binding.mutated))
 		) {
 			return unhoisted;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
index 2e09c756e3..ebf20d5aa6 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
@@ -1,5 +1,6 @@
 /** @import { EachBlock } from '#compiler' */
 /** @import { Context } from '../types' */
+/** @import { Scope } from '../../scope' */
 import * as e from '../../../errors.js';
 import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
 
@@ -25,5 +26,13 @@ export function EachBlock(node, context) {
 			node.key.type !== 'Identifier' || !node.index || node.key.name !== node.index;
 	}
 
-	context.next();
+	// evaluate expression in parent scope
+	context.visit(node.expression, {
+		...context.state,
+		scope: /** @type {Scope} */ (context.state.scope.parent)
+	});
+
+	context.visit(node.body);
+	if (node.key) context.visit(node.key);
+	if (node.fallback) context.visit(node.fallback);
 }
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 c00d521610..2e4595ec08 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -80,16 +80,8 @@ export function Identifier(node, context) {
 				binding.declaration_kind !== 'function') ||
 				binding.declaration_kind === 'import')
 		) {
-			if (binding.declaration_kind === 'import') {
-				if (
-					binding.mutated &&
-					// TODO could be more fine-grained - not every mention in the template implies a state binding
-					(context.state.reactive_statement || context.state.ast_type === 'template') &&
-					parent.type === 'MemberExpression'
-				) {
-					binding.kind = 'legacy_reactive_import';
-				}
-			} else if (
+			if (
+				binding.declaration_kind !== 'import' &&
 				binding.mutated &&
 				// TODO could be more fine-grained - not every mention in the template implies a state binding
 				(context.state.reactive_statement || context.state.ast_type === 'template')
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
index 347a59488a..e6bb3c067e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
@@ -1,7 +1,8 @@
-/** @import { Component, SvelteComponent, SvelteSelf } from '#compiler' */
+/** @import { Comment, Component, Fragment, SvelteComponent, SvelteSelf } from '#compiler' */
 /** @import { Context } from '../../types' */
 import * as e from '../../../../errors.js';
 import { get_attribute_expression, is_expression_attribute } from '../../../../utils/ast.js';
+import { determine_slot } from '../../../../utils/slot.js';
 import {
 	validate_attribute,
 	validate_attribute_name,
@@ -60,9 +61,45 @@ export function visit_component(node, context) {
 		}
 	}
 
-	context.next({
-		...context.state,
-		parent_element: null,
-		component_slots: new Set()
-	});
+	// If the component has a slot attribute — `<Foo slot="whatever" .../>` —
+	// then `let:` directives apply to other attributes, instead of just the
+	// top-level contents of the component. Yes, this is very weird.
+	const default_state = determine_slot(node)
+		? context.state
+		: { ...context.state, scope: node.metadata.scopes.default };
+
+	for (const attribute of node.attributes) {
+		context.visit(attribute, attribute.type === 'LetDirective' ? default_state : context.state);
+	}
+
+	/** @type {Comment[]} */
+	let comments = [];
+
+	/** @type {Record<string, Fragment['nodes']>} */
+	const nodes = { default: [] };
+
+	for (const child of node.fragment.nodes) {
+		if (child.type === 'Comment') {
+			comments.push(child);
+			continue;
+		}
+
+		const slot_name = determine_slot(child) ?? 'default';
+		(nodes[slot_name] ??= []).push(...comments, child);
+
+		if (slot_name !== 'default') comments = [];
+	}
+
+	const component_slots = new Set();
+
+	for (const slot_name in nodes) {
+		const state = {
+			...context.state,
+			scope: node.metadata.scopes[slot_name],
+			parent_element: null,
+			component_slots
+		};
+
+		context.visit({ ...node.fragment, nodes: nodes[slot_name] }, state);
+	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index 6ebb77f2e9..c4af60f24b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -4,7 +4,6 @@
 /** @import { Visitors, ComponentClientTransformState, ClientTransformState } from './types' */
 import { walk } from 'zimmerframe';
 import * as b from '../../../utils/builders.js';
-import { set_scope } from '../../scope.js';
 import { build_getter } from './utils.js';
 import { render_stylesheet } from '../css/index.js';
 import { dev, filename } from '../../../state.js';
@@ -15,6 +14,7 @@ import { Attribute } from './visitors/Attribute.js';
 import { AwaitBlock } from './visitors/AwaitBlock.js';
 import { BinaryExpression } from './visitors/BinaryExpression.js';
 import { BindDirective } from './visitors/BindDirective.js';
+import { BlockStatement } from './visitors/BlockStatement.js';
 import { BreakStatement } from './visitors/BreakStatement.js';
 import { CallExpression } from './visitors/CallExpression.js';
 import { ClassBody } from './visitors/ClassBody.js';
@@ -37,6 +37,7 @@ import { LabeledStatement } from './visitors/LabeledStatement.js';
 import { LetDirective } from './visitors/LetDirective.js';
 import { MemberExpression } from './visitors/MemberExpression.js';
 import { OnDirective } from './visitors/OnDirective.js';
+import { Program } from './visitors/Program.js';
 import { RegularElement } from './visitors/RegularElement.js';
 import { RenderTag } from './visitors/RenderTag.js';
 import { SlotElement } from './visitors/SlotElement.js';
@@ -58,7 +59,23 @@ import { VariableDeclaration } from './visitors/VariableDeclaration.js';
 
 /** @type {Visitors} */
 const visitors = {
-	_: set_scope,
+	_: function set_scope(node, { next, state }) {
+		const scope = state.scopes.get(node);
+
+		if (scope && scope !== state.scope) {
+			const transform = { ...state.transform };
+
+			for (const [name, binding] of scope.declarations) {
+				if (binding.kind === 'normal') {
+					delete transform[name];
+				}
+			}
+
+			next({ ...state, transform, scope });
+		} else {
+			next();
+		}
+	},
 	AnimateDirective,
 	ArrowFunctionExpression,
 	AssignmentExpression,
@@ -66,6 +83,7 @@ const visitors = {
 	AwaitBlock,
 	BinaryExpression,
 	BindDirective,
+	BlockStatement,
 	BreakStatement,
 	CallExpression,
 	ClassBody,
@@ -88,6 +106,7 @@ const visitors = {
 	LetDirective,
 	MemberExpression,
 	OnDirective,
+	Program,
 	RegularElement,
 	RenderTag,
 	SlotElement,
@@ -123,6 +142,7 @@ export function client_component(analysis, options) {
 		is_instance: false,
 		hoisted: [b.import_all('$', 'svelte/internal/client')],
 		node: /** @type {any} */ (null), // populated by the root node
+		legacy_reactive_imports: [],
 		legacy_reactive_statements: new Map(),
 		metadata: {
 			context: {
@@ -136,8 +156,7 @@ export function client_component(analysis, options) {
 		preserve_whitespace: options.preserveWhitespace,
 		public_state: new Map(),
 		private_state: new Map(),
-		getters: {},
-		setters: {},
+		transform: {},
 		in_constructor: false,
 
 		// these are set inside the `Fragment` visitor, and cannot be used until then
@@ -155,6 +174,7 @@ export function client_component(analysis, options) {
 
 	const instance_state = {
 		...state,
+		transform: { ...state.transform },
 		scope: analysis.instance.scope,
 		scopes: analysis.instance.scopes,
 		is_instance: true
@@ -167,21 +187,17 @@ export function client_component(analysis, options) {
 	const template = /** @type {ESTree.Program} */ (
 		walk(
 			/** @type {SvelteNode} */ (analysis.template.ast),
-			{ ...state, scope: analysis.instance.scope, scopes: analysis.template.scopes },
+			{
+				...state,
+				transform: instance_state.transform,
+				scope: analysis.instance.scope,
+				scopes: analysis.template.scopes
+			},
 			visitors
 		)
 	);
 
-	// Very very dirty way of making import statements reactive in legacy mode if needed
-	if (!analysis.runes) {
-		for (const [name, binding] of analysis.module.scope.declarations) {
-			if (binding.kind === 'legacy_reactive_import') {
-				instance.body.unshift(
-					b.var('$$_import_' + name, b.call('$.reactive_import', b.thunk(b.id(name))))
-				);
-			}
-		}
-	}
+	instance.body.unshift(...state.legacy_reactive_imports);
 
 	/** @type {ESTree.Statement[]} */
 	const store_setup = [];
@@ -623,11 +639,9 @@ export function client_module(analysis, options) {
 		options,
 		scope: analysis.module.scope,
 		scopes: analysis.module.scopes,
-		legacy_reactive_statements: new Map(),
 		public_state: new Map(),
 		private_state: new Map(),
-		getters: {},
-		setters: {},
+		transform: {},
 		in_constructor: false
 	};
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
index 0284c82d1e..cae1a10940 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
@@ -5,7 +5,8 @@ import type {
 	Identifier,
 	PrivateIdentifier,
 	Expression,
-	AssignmentExpression
+	AssignmentExpression,
+	UpdateExpression
 } from 'estree';
 import type { Namespace, SvelteNode, ValidatedCompileOptions } from '#compiler';
 import type { TransformState } from '../types.js';
@@ -22,19 +23,18 @@ export interface ClientTransformState extends TransformState {
 	 */
 	readonly in_constructor: boolean;
 
-	/** The $: calls, which will be ordered in the end */
-	readonly legacy_reactive_statements: Map<LabeledStatement, Statement>;
-	/**
-	 * A map of `[name, node]` pairs, where `Identifier` nodes matching `name`
-	 * will be replaced with `node` (e.g. `x` -> `$.get(x)`)
-	 */
-	readonly getters: Record<string, Expression | ((id: Identifier) => Expression)>;
-	/**
-	 * Counterpart to `getters`
-	 */
-	readonly setters: Record<
+	readonly transform: Record<
 		string,
-		(assignment: AssignmentExpression, context: Context) => Expression
+		{
+			/** turn `foo` into e.g. `$.get(foo)` */
+			read: (id: Identifier) => Expression;
+			/** turn `foo = bar` into e.g. `$.set(foo, bar)` */
+			assign?: (node: Identifier, value: Expression) => Expression;
+			/** turn `foo.bar = baz` into e.g. `$.mutate(foo, $.get(foo).bar = baz);` */
+			mutate?: (node: Identifier, mutation: AssignmentExpression) => Expression;
+			/** turn `foo++` into e.g. `$.update(foo)` */
+			update?: (node: UpdateExpression) => Expression;
+		}
 	>;
 }
 
@@ -79,6 +79,12 @@ export interface ComponentClientTransformState extends ClientTransformState {
 
 	/** The anchor node for the current context */
 	readonly node: Identifier;
+
+	/** Imports that should be re-evaluated in legacy mode following a mutation */
+	readonly legacy_reactive_imports: Statement[];
+
+	/** The $: calls, which will be ordered in the end */
+	readonly legacy_reactive_statements: Map<LabeledStatement, Statement>;
 }
 
 export interface StateField {
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 57ede67bb3..d5e6420d5d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -1,59 +1,17 @@
-/** @import { ArrowFunctionExpression, AssignmentExpression, BinaryOperator, Expression, FunctionDeclaration, FunctionExpression, Identifier, MemberExpression, Node, Pattern, PrivateIdentifier, Statement } from 'estree' */
+/** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression, Identifier, Pattern, PrivateIdentifier, Statement } from 'estree' */
 /** @import { Binding, SvelteNode } from '#compiler' */
 /** @import { ClientTransformState, ComponentClientTransformState, ComponentContext } from './types.js' */
 /** @import { Scope } from '../../scope.js' */
 import * as b from '../../../utils/builders.js';
-import {
-	extract_identifiers,
-	extract_paths,
-	is_expression_async,
-	is_simple_expression,
-	object
-} from '../../../utils/ast.js';
+import { extract_identifiers, is_simple_expression } from '../../../utils/ast.js';
 import {
 	PROPS_IS_LAZY_INITIAL,
 	PROPS_IS_IMMUTABLE,
 	PROPS_IS_RUNES,
 	PROPS_IS_UPDATED
 } from '../../../../constants.js';
-import { is_ignored, dev } from '../../../state.js';
-
-/**
- * @template {ClientTransformState} State
- * @param {AssignmentExpression} node
- * @param {import('zimmerframe').Context<SvelteNode, State>} context
- * @returns
- */
-export function get_assignment_value(node, { state, visit }) {
-	if (node.left.type === 'Identifier') {
-		const operator = node.operator;
-		return operator === '='
-			? /** @type {Expression} */ (visit(node.right))
-			: // turn something like x += 1 into x = x + 1
-				b.binary(
-					/** @type {BinaryOperator} */ (operator.slice(0, -1)),
-					build_getter(node.left, state),
-					/** @type {Expression} */ (visit(node.right))
-				);
-	} else if (
-		node.left.type === 'MemberExpression' &&
-		node.left.object.type === 'ThisExpression' &&
-		node.left.property.type === 'PrivateIdentifier' &&
-		state.private_state.has(node.left.property.name)
-	) {
-		const operator = node.operator;
-		return operator === '='
-			? /** @type {Expression} */ (visit(node.right))
-			: // turn something like x += 1 into x = x + 1
-				b.binary(
-					/** @type {BinaryOperator} */ (operator.slice(0, -1)),
-					/** @type {Expression} */ (visit(node.left)),
-					/** @type {Expression} */ (visit(node.right))
-				);
-	} else {
-		return /** @type {Expression} */ (visit(node.right));
-	}
-}
+import { dev } from '../../../state.js';
+import { get_value } from './visitors/shared/declarations.js';
 
 /**
  * @param {Binding} binding
@@ -73,392 +31,18 @@ export function is_state_source(binding, state) {
  * @returns {Expression}
  */
 export function build_getter(node, state) {
-	const binding = state.scope.get(node.name);
-
-	if (binding === null || node === binding.node) {
-		// No associated binding or the declaration itself which shouldn't be transformed
-		return node;
-	}
+	if (Object.hasOwn(state.transform, node.name)) {
+		const binding = state.scope.get(node.name);
 
-	if (Object.hasOwn(state.getters, node.name)) {
-		const getter = state.getters[node.name];
-		return typeof getter === 'function' ? getter(node) : getter;
-	}
-
-	if (binding.node.name === '$$props') {
-		// Special case for $$props which only exists in the old world
-		return b.id('$$sanitized_props');
-	}
-
-	if (binding.kind === 'store_sub') {
-		return b.call(node);
-	}
-
-	if (binding.kind === 'prop' || binding.kind === 'bindable_prop') {
-		if (is_prop_source(binding, state)) {
-			return b.call(node);
+		// don't transform the declaration itself
+		if (node !== binding?.node) {
+			return state.transform[node.name].read(node);
 		}
-
-		if (binding.prop_alias) {
-			const key = b.key(binding.prop_alias);
-			return b.member(b.id('$$props'), key, key.type === 'Literal');
-		}
-		return b.member(b.id('$$props'), node);
-	}
-
-	if (binding.kind === 'legacy_reactive_import') {
-		return b.call('$$_import_' + node.name);
-	}
-
-	if (
-		is_state_source(binding, state) ||
-		binding.kind === 'derived' ||
-		binding.kind === 'legacy_reactive'
-	) {
-		return b.call('$.get', node);
 	}
 
 	return node;
 }
 
-/**
- * @template {ClientTransformState} State
- * @param {AssignmentExpression} node
- * @param {import('zimmerframe').Context<SvelteNode, State>} context
- * @param {() => any} fallback
- * @param {boolean | null} [prefix] - If the assignment is a transformed update expression, set this. Else `null`
- * @param {{skip_proxy_and_freeze?: boolean}} [options]
- * @returns {Expression}
- */
-export function build_setter(node, context, fallback, prefix, options) {
-	const { state, visit } = context;
-
-	const assignee = node.left;
-	if (
-		assignee.type === 'ArrayPattern' ||
-		assignee.type === 'ObjectPattern' ||
-		assignee.type === 'RestElement'
-	) {
-		// Turn assignment into an IIFE, so that `$.set` calls etc don't produce invalid code
-		const tmp_id = context.state.scope.generate('tmp');
-
-		/** @type {AssignmentExpression[]} */
-		const original_assignments = [];
-
-		/** @type {Expression[]} */
-		const assignments = [];
-
-		const paths = extract_paths(assignee);
-
-		for (const path of paths) {
-			const value = path.expression?.(b.id(tmp_id));
-			const assignment = b.assignment('=', path.node, value);
-			original_assignments.push(assignment);
-			assignments.push(build_setter(assignment, context, () => assignment, prefix, options));
-		}
-
-		if (assignments.every((assignment, i) => assignment === original_assignments[i])) {
-			// No change to output -> nothing to transform -> we can keep the original assignment
-			return fallback();
-		}
-
-		const rhs_expression = /** @type {Expression} */ (visit(node.right));
-
-		const iife_is_async =
-			is_expression_async(rhs_expression) ||
-			assignments.some((assignment) => is_expression_async(assignment));
-
-		const iife = b.arrow(
-			[],
-			b.block([
-				b.const(tmp_id, rhs_expression),
-				b.stmt(b.sequence(assignments)),
-				// return because it could be used in a nested expression where the value is needed.
-				// example: { foo: ({ bar } = { bar: 1 })}
-				b.return(b.id(tmp_id))
-			])
-		);
-
-		if (iife_is_async) {
-			return b.await(b.call(b.async(iife)));
-		} else {
-			return b.call(iife);
-		}
-	}
-
-	if (assignee.type !== 'Identifier' && assignee.type !== 'MemberExpression') {
-		throw new Error(`Unexpected assignment type ${assignee.type}`);
-	}
-
-	// Handle class private/public state assignment cases
-	if (assignee.type === 'MemberExpression') {
-		if (
-			assignee.object.type === 'ThisExpression' &&
-			assignee.property.type === 'PrivateIdentifier'
-		) {
-			const private_state = context.state.private_state.get(assignee.property.name);
-			const value = get_assignment_value(node, context);
-			if (private_state !== undefined) {
-				if (state.in_constructor) {
-					// See if we should wrap value in $.proxy
-					if (
-						context.state.analysis.runes &&
-						!options?.skip_proxy_and_freeze &&
-						should_proxy_or_freeze(value, context.state.scope)
-					) {
-						const assignment = fallback();
-						if (assignment.type === 'AssignmentExpression') {
-							assignment.right =
-								private_state.kind === 'frozen_state'
-									? b.call('$.freeze', value)
-									: build_proxy_reassignment(value, private_state.id);
-							return assignment;
-						}
-					}
-				} else {
-					return b.call(
-						'$.set',
-						assignee,
-						context.state.analysis.runes &&
-							!options?.skip_proxy_and_freeze &&
-							should_proxy_or_freeze(value, context.state.scope)
-							? private_state.kind === 'frozen_state'
-								? b.call('$.freeze', value)
-								: build_proxy_reassignment(value, private_state.id)
-							: value
-					);
-				}
-			}
-		} else if (
-			assignee.object.type === 'ThisExpression' &&
-			assignee.property.type === 'Identifier' &&
-			state.in_constructor
-		) {
-			const public_state = context.state.public_state.get(assignee.property.name);
-			const value = get_assignment_value(node, context);
-			// See if we should wrap value in $.proxy
-			if (
-				context.state.analysis.runes &&
-				public_state !== undefined &&
-				!options?.skip_proxy_and_freeze &&
-				should_proxy_or_freeze(value, context.state.scope)
-			) {
-				const assignment = fallback();
-				if (assignment.type === 'AssignmentExpression') {
-					assignment.right =
-						public_state.kind === 'frozen_state'
-							? b.call('$.freeze', value)
-							: build_proxy_reassignment(value, public_state.id);
-					return assignment;
-				}
-			}
-		}
-	}
-
-	const left = object(assignee);
-
-	if (left === null) {
-		return fallback();
-	}
-
-	const binding = state.scope.get(left.name);
-
-	if (!binding) return fallback();
-
-	if (Object.hasOwn(state.setters, left.name)) {
-		const setter = state.setters[left.name];
-		// @ts-expect-error
-		return setter(node, context);
-	}
-
-	if (binding.kind === 'legacy_reactive_import') {
-		return b.call(
-			'$$_import_' + binding.node.name,
-			b.assignment(
-				node.operator,
-				/** @type {Pattern} */ (visit(node.left)),
-				/** @type {Expression} */ (visit(node.right))
-			)
-		);
-	}
-
-	/**
-	 * @param {any} serialized
-	 * @returns
-	 */
-	function maybe_skip_ownership_validation(serialized) {
-		if (is_ignored(node, 'ownership_invalid_mutation')) {
-			return b.call('$.skip_ownership_validation', b.thunk(serialized));
-		}
-
-		return serialized;
-	}
-
-	if (binding.kind === 'derived') {
-		return maybe_skip_ownership_validation(fallback());
-	}
-
-	const is_store = binding.kind === 'store_sub';
-	const left_name = is_store ? left.name.slice(1) : left.name;
-
-	if (
-		binding.kind !== 'state' &&
-		binding.kind !== 'frozen_state' &&
-		binding.kind !== 'prop' &&
-		binding.kind !== 'bindable_prop' &&
-		binding.kind !== 'each' &&
-		binding.kind !== 'legacy_reactive' &&
-		!is_store
-	) {
-		// TODO error if it's a computed (or rest prop)? or does that already happen elsewhere?
-		return fallback();
-	}
-
-	const value = get_assignment_value(node, context);
-
-	const serialize = () => {
-		if (left === node.left) {
-			const is_initial_proxy =
-				binding.initial !== null &&
-				should_proxy_or_freeze(/**@type {Expression}*/ (binding.initial), context.state.scope);
-			if ((binding.kind === 'prop' || binding.kind === 'bindable_prop') && !is_initial_proxy) {
-				return b.call(left, value);
-			} else if (is_store) {
-				return b.call('$.store_set', build_getter(b.id(left_name), state), value);
-			} else {
-				let call;
-				if (binding.kind === 'state') {
-					call = b.call(
-						'$.set',
-						b.id(left_name),
-						context.state.analysis.runes &&
-							!options?.skip_proxy_and_freeze &&
-							should_proxy_or_freeze(value, context.state.scope)
-							? build_proxy_reassignment(value, left_name)
-							: value
-					);
-				} else if (binding.kind === 'frozen_state') {
-					call = b.call(
-						'$.set',
-						b.id(left_name),
-						context.state.analysis.runes &&
-							!options?.skip_proxy_and_freeze &&
-							should_proxy_or_freeze(value, context.state.scope)
-							? b.call('$.freeze', value)
-							: value
-					);
-				} else if (
-					(binding.kind === 'prop' || binding.kind === 'bindable_prop') &&
-					is_initial_proxy
-				) {
-					call = b.call(
-						left,
-						context.state.analysis.runes &&
-							!options?.skip_proxy_and_freeze &&
-							should_proxy_or_freeze(value, context.state.scope) &&
-							binding.kind === 'bindable_prop'
-							? build_proxy_reassignment(value, left_name)
-							: value
-					);
-				} else {
-					call = b.call('$.set', b.id(left_name), value);
-				}
-
-				if (state.scope.get(`$${left.name}`)?.kind === 'store_sub') {
-					return b.call('$.store_unsub', call, b.literal(`$${left.name}`), b.id('$$stores'));
-				} else {
-					return call;
-				}
-			}
-		} else {
-			if (is_store) {
-				// If we are assigning to a store property, we need to ensure we don't
-				// capture the read for the store as part of the member expression to
-				// keep consistency with how store $ shorthand reads work in Svelte 4.
-				/**
-				 *
-				 * @param {Expression | Pattern} node
-				 * @returns {Expression}
-				 */
-				function visit_node(node) {
-					if (node.type === 'MemberExpression') {
-						return {
-							...node,
-							object: visit_node(/** @type {Expression} */ (node.object)),
-							property: /** @type {MemberExpression} */ (visit(node)).property
-						};
-					}
-					if (node.type === 'Identifier') {
-						const binding = state.scope.get(node.name);
-
-						if (binding !== null && binding.kind === 'store_sub') {
-							return b.call('$.untrack', b.thunk(/** @type {Expression} */ (visit(node))));
-						}
-					}
-					return /** @type {Expression} */ (visit(node));
-				}
-
-				return maybe_skip_ownership_validation(
-					b.call(
-						'$.store_mutate',
-						build_getter(b.id(left_name), state),
-						b.assignment(node.operator, /** @type {Pattern}} */ (visit_node(node.left)), value),
-						b.call('$.untrack', b.id('$' + left_name))
-					)
-				);
-			} else if (
-				!state.analysis.runes ||
-				// this condition can go away once legacy mode is gone; only necessary for interop with legacy parent bindings
-				(binding.mutated && binding.kind === 'bindable_prop')
-			) {
-				if (binding.kind === 'bindable_prop') {
-					return maybe_skip_ownership_validation(
-						b.call(
-							left,
-							b.assignment(node.operator, /** @type {Pattern} */ (visit(node.left)), value),
-							b.true
-						)
-					);
-				} else {
-					return maybe_skip_ownership_validation(
-						b.call(
-							'$.mutate',
-							b.id(left_name),
-							b.assignment(node.operator, /** @type {Pattern} */ (visit(node.left)), value)
-						)
-					);
-				}
-			} else if (
-				node.right.type === 'Literal' &&
-				prefix != null &&
-				(node.operator === '+=' || node.operator === '-=')
-			) {
-				return maybe_skip_ownership_validation(
-					b.update(
-						node.operator === '+=' ? '++' : '--',
-						/** @type {Expression} */ (visit(node.left)),
-						prefix
-					)
-				);
-			} else {
-				return maybe_skip_ownership_validation(
-					b.assignment(
-						node.operator,
-						/** @type {Pattern} */ (visit(node.left)),
-						/** @type {Expression} */ (visit(node.right))
-					)
-				);
-			}
-		}
-	};
-
-	if (value.type === 'BinaryExpression' && /** @type {any} */ (value.operator) === '??') {
-		return b.logical('??', build_getter(b.id(left_name), state), serialize());
-	}
-
-	return serialize();
-}
-
 /**
  * @param {Expression} value
  * @param {PrivateIdentifier | string} proxy_reference
@@ -507,7 +91,7 @@ function get_hoisted_params(node, context) {
 				binding = /** @type {Binding} */ (scope.get(binding.node.name.slice(1)));
 			}
 
-			const expression = context.state.getters[reference];
+			let expression = context.state.transform[reference]?.read(b.id(binding.node.name));
 
 			if (
 				// If it's a destructured derived binding, then we can extract the derived signal reference and use that.
@@ -706,6 +290,7 @@ export function with_loc(target, source) {
  */
 export function create_derived_block_argument(node, context) {
 	if (node.type === 'Identifier') {
+		context.state.transform[node.name] = { read: get_value };
 		return { id: node, declarations: null };
 	}
 
@@ -723,6 +308,8 @@ export function create_derived_block_argument(node, context) {
 	const declarations = [b.var(value, create_derived(context.state, b.thunk(block)))];
 
 	for (const id of identifiers) {
+		context.state.transform[id.name] = { read: get_value };
+
 		declarations.push(
 			b.var(id, create_derived(context.state, b.thunk(b.member(b.call('$.get', value), id))))
 		);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
index fefc11bf1f..afd2d50ba4 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
@@ -1,11 +1,129 @@
-/** @import { AssignmentExpression } from 'estree' */
-/** @import { Context } from '../types' */
-import { build_setter } from '../utils.js';
+/** @import { AssignmentExpression, AssignmentOperator, Expression, Pattern } from 'estree' */
+/** @import { Context } from '../types.js' */
+import * as b from '../../../../utils/builders.js';
+import { build_assignment_value } from '../../../../utils/ast.js';
+import { is_ignored } from '../../../../state.js';
+import { build_proxy_reassignment, should_proxy_or_freeze } from '../utils.js';
+import { visit_assignment_expression } from '../../shared/assignments.js';
 
 /**
  * @param {AssignmentExpression} node
  * @param {Context} context
  */
 export function AssignmentExpression(node, context) {
-	return build_setter(node, context, context.next);
+	return visit_assignment_expression(node, context, build_assignment);
+}
+
+/**
+ * @param {AssignmentOperator} operator
+ * @param {Pattern} left
+ * @param {Expression} right
+ * @param {Context} context
+ * @returns {Expression | null}
+ */
+export function build_assignment(operator, left, right, context) {
+	// Handle class private/public state assignment cases
+	if (
+		context.state.analysis.runes &&
+		left.type === 'MemberExpression' &&
+		left.object.type === 'ThisExpression'
+	) {
+		if (left.property.type === 'PrivateIdentifier') {
+			const private_state = context.state.private_state.get(left.property.name);
+
+			if (private_state !== undefined) {
+				let transformed = false;
+				let value = /** @type {Expression} */ (
+					context.visit(build_assignment_value(operator, left, right))
+				);
+
+				if (should_proxy_or_freeze(value, context.state.scope)) {
+					transformed = true;
+					value =
+						private_state.kind === 'frozen_state'
+							? b.call('$.freeze', value)
+							: build_proxy_reassignment(value, private_state.id);
+				}
+
+				if (!context.state.in_constructor) {
+					return b.call('$.set', left, value);
+				} else if (transformed) {
+					return b.assignment(operator, /** @type {Pattern} */ (context.visit(left)), value);
+				}
+			}
+		} else if (left.property.type === 'Identifier' && context.state.in_constructor) {
+			const public_state = context.state.public_state.get(left.property.name);
+
+			if (public_state !== undefined && should_proxy_or_freeze(right, context.state.scope)) {
+				const value = /** @type {Expression} */ (context.visit(right));
+
+				return b.assignment(
+					operator,
+					/** @type {Pattern} */ (context.visit(left)),
+					public_state.kind === 'frozen_state'
+						? b.call('$.freeze', value)
+						: build_proxy_reassignment(value, public_state.id)
+				);
+			}
+		}
+	}
+
+	let object = left;
+
+	while (object.type === 'MemberExpression') {
+		// @ts-expect-error
+		object = object.object;
+	}
+
+	if (object.type !== 'Identifier') {
+		return null;
+	}
+
+	const binding = context.state.scope.get(object.name);
+	if (!binding) return null;
+
+	const transform = Object.hasOwn(context.state.transform, object.name)
+		? context.state.transform[object.name]
+		: null;
+
+	// reassignment
+	if (object === left && transform?.assign) {
+		let value = /** @type {Expression} */ (
+			context.visit(build_assignment_value(operator, left, right))
+		);
+
+		// special case — if an element binding, we know it's a primitive
+		const path = context.path.map((node) => node.type);
+		const is_primitive = path.at(-1) === 'BindDirective' && path.at(-2) === 'RegularElement';
+
+		if (
+			!is_primitive &&
+			binding.kind !== 'prop' &&
+			context.state.analysis.runes &&
+			should_proxy_or_freeze(value, context.state.scope)
+		) {
+			value =
+				binding.kind === 'frozen_state'
+					? b.call('$.freeze', value)
+					: build_proxy_reassignment(value, object.name);
+		}
+
+		return transform.assign(object, value);
+	}
+
+	/** @type {Expression} */
+	let mutation = b.assignment(
+		operator,
+		/** @type {Pattern} */ (context.visit(left)),
+		/** @type {Expression} */ (context.visit(right))
+	);
+
+	// mutation
+	if (transform?.mutate) {
+		mutation = transform.mutate(object, mutation);
+	}
+
+	return is_ignored(left, 'ownership_invalid_mutation')
+		? b.call('$.skip_ownership_validation', b.thunk(mutation))
+		: mutation;
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
index 21f16f3449..f956a5cf30 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
@@ -1,4 +1,4 @@
-/** @import { BlockStatement, Expression, Pattern } from 'estree' */
+/** @import { BlockStatement, Expression, Pattern, Statement } from 'estree' */
 /** @import { AwaitBlock } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
@@ -15,39 +15,29 @@ export function AwaitBlock(node, context) {
 	let catch_block;
 
 	if (node.then) {
+		const argument = node.value && create_derived_block_argument(node.value, context);
+
 		/** @type {Pattern[]} */
 		const args = [b.id('$$anchor')];
-		const block = /** @type {BlockStatement} */ (context.visit(node.then));
-
-		if (node.value) {
-			const argument = create_derived_block_argument(node.value, context);
+		if (argument) args.push(argument.id);
 
-			args.push(argument.id);
-
-			if (argument.declarations !== null) {
-				block.body.unshift(...argument.declarations);
-			}
-		}
+		const declarations = argument?.declarations ?? [];
+		const block = /** @type {BlockStatement} */ (context.visit(node.then));
 
-		then_block = b.arrow(args, block);
+		then_block = b.arrow(args, b.block([...declarations, ...block.body]));
 	}
 
 	if (node.catch) {
+		const argument = node.error && create_derived_block_argument(node.error, context);
+
 		/** @type {Pattern[]} */
 		const args = [b.id('$$anchor')];
-		const block = /** @type {BlockStatement} */ (context.visit(node.catch));
-
-		if (node.error) {
-			const argument = create_derived_block_argument(node.error, context);
+		if (argument) args.push(argument.id);
 
-			args.push(argument.id);
-
-			if (argument.declarations !== null) {
-				block.body.unshift(...argument.declarations);
-			}
-		}
+		const declarations = argument?.declarations ?? [];
+		const block = /** @type {BlockStatement} */ (context.visit(node.catch));
 
-		catch_block = b.arrow(args, block);
+		catch_block = b.arrow(args, b.block([...declarations, ...block.body]));
 	}
 
 	context.state.init.push(
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
index 8b9064d59a..81bafcc18a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BindDirective.js
@@ -5,7 +5,6 @@ import { dev, is_ignored } from '../../../../state.js';
 import { is_text_attribute } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
 import { binding_properties } from '../../../bindings.js';
-import { build_setter } from '../utils.js';
 import { build_attribute_value } from './shared/element.js';
 import { build_bind_this, validate_binding } from './shared/utils.js';
 
@@ -38,18 +37,10 @@ export function BindDirective(node, context) {
 	}
 
 	const getter = b.thunk(/** @type {Expression} */ (context.visit(expression)));
-	const assignment = b.assignment('=', expression, b.id('$$value'));
+
 	const setter = b.arrow(
 		[b.id('$$value')],
-		build_setter(
-			assignment,
-			context,
-			() => /** @type {Expression} */ (context.visit(assignment)),
-			null,
-			{
-				skip_proxy_and_freeze: true
-			}
-		)
+		/** @type {Expression} */ (context.visit(b.assignment('=', expression, b.id('$$value'))))
 	);
 
 	/** @type {CallExpression} */
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/BlockStatement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BlockStatement.js
new file mode 100644
index 0000000000..502fbd471e
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/BlockStatement.js
@@ -0,0 +1,12 @@
+/** @import { BlockStatement } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+import { add_state_transformers } from './shared/declarations.js';
+
+/**
+ * @param {BlockStatement} node
+ * @param {ComponentContext} context
+ */
+export function BlockStatement(node, context) {
+	add_state_transformers(context);
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
index 10623ce3f5..bfff38338b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ConstTag.js
@@ -5,6 +5,7 @@ import { dev } from '../../../../state.js';
 import { extract_identifiers } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
 import { create_derived } from '../utils.js';
+import { get_value } from './shared/declarations.js';
 
 /**
  * @param {ConstTag} node
@@ -24,7 +25,7 @@ export function ConstTag(node, context) {
 			)
 		);
 
-		context.state.getters[declaration.id.name] = b.call('$.get', declaration.id);
+		context.state.transform[declaration.id.name] = { read: get_value };
 
 		// we need to eagerly evaluate the expression in order to hit any
 		// 'Cannot access x before initialization' errors
@@ -35,15 +36,15 @@ export function ConstTag(node, context) {
 		const identifiers = extract_identifiers(declaration.id);
 		const tmp = b.id(context.state.scope.generate('computed_const'));
 
-		const getters = { ...context.state.getters };
+		const transform = { ...context.state.transform };
 
 		// Make all identifiers that are declared within the following computed regular
 		// variables, as they are not signals in that context yet
 		for (const node of identifiers) {
-			getters[node.name] = node;
+			delete transform[node.name];
 		}
 
-		const child_state = { ...context.state, getters };
+		const child_state = { ...context.state, transform };
 
 		// TODO optimise the simple `{ x } = y` case — we can just return `y`
 		// instead of destructuring it only to return a new object
@@ -67,7 +68,9 @@ export function ConstTag(node, context) {
 		}
 
 		for (const node of identifiers) {
-			context.state.getters[node.name] = b.member(b.call('$.get', tmp), node);
+			context.state.transform[node.name] = {
+				read: (node) => b.member(b.call('$.get', tmp), node)
+			};
 		}
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
index a82677817a..fa19509c06 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
@@ -1,6 +1,7 @@
-/** @import { AssignmentExpression, BlockStatement, Expression, Identifier, MemberExpression, Pattern, Statement } from 'estree' */
+/** @import { BlockStatement, Expression, Identifier, Pattern, Statement } from 'estree' */
 /** @import { Binding, EachBlock } from '#compiler' */
-/** @import { ComponentContext, Context } from '../types' */
+/** @import { ComponentContext } from '../types' */
+/** @import { Scope } from '../../../scope' */
 import {
 	EACH_INDEX_REACTIVE,
 	EACH_IS_ANIMATED,
@@ -12,7 +13,8 @@ import {
 import { dev } from '../../../../state.js';
 import { extract_paths, object } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
-import { get_assignment_value, build_getter, build_setter, with_loc } from '../utils.js';
+import { build_getter, with_loc } from '../utils.js';
+import { get_value } from './shared/declarations.js';
 
 /**
  * @param {EachBlock} node
@@ -20,7 +22,15 @@ import { get_assignment_value, build_getter, build_setter, with_loc } from '../u
  */
 export function EachBlock(node, context) {
 	const each_node_meta = node.metadata;
-	const collection = /** @type {Expression} */ (context.visit(node.expression));
+
+	// expression should be evaluated in the parent scope, not the scope
+	// created by the each block itself
+	const collection = /** @type {Expression} */ (
+		context.visit(node.expression, {
+			...context.state,
+			scope: /** @type {Scope} */ (context.state.scope.parent)
+		})
+	);
 
 	if (!each_node_meta.is_controlled) {
 		context.state.template.push('<!>');
@@ -110,54 +120,13 @@ export function EachBlock(node, context) {
 
 	const child_state = {
 		...context.state,
-		getters: { ...context.state.getters },
-		setters: { ...context.state.setters }
+		transform: { ...context.state.transform }
 	};
 
 	/** The state used when generating the key function, if necessary */
 	const key_state = {
 		...context.state,
-		getters: { ...context.state.getters }
-	};
-
-	/**
-	 * @param {Pattern} expression_for_id
-	 * @returns {(assignment: AssignmentExpression, context: Context) => Expression}
-	 */
-	const create_mutation = (expression_for_id) => {
-		return (assignment, context) => {
-			if (assignment.left.type !== 'Identifier' && assignment.left.type !== 'MemberExpression') {
-				// build_setter turns other patterns into IIFEs and separates the assignments
-				// into separate expressions, at which point this is called again with an identifier or member expression
-				return build_setter(assignment, context, () => assignment);
-			}
-
-			const left = object(assignment.left);
-			const value = get_assignment_value(assignment, context);
-			const invalidate = b.call(
-				'$.invalidate_inner_signals',
-				b.thunk(b.sequence(indirect_dependencies))
-			);
-			const invalidate_store = store_to_invalidate
-				? b.call('$.invalidate_store', b.id('$$stores'), b.literal(store_to_invalidate))
-				: undefined;
-
-			const sequence = [];
-			if (!context.state.analysis.runes) sequence.push(invalidate);
-			if (invalidate_store) sequence.push(invalidate_store);
-
-			if (left === assignment.left) {
-				const assign = b.assignment('=', expression_for_id, value);
-				sequence.unshift(assign);
-				return b.sequence(sequence);
-			} else {
-				const original_left = /** @type {MemberExpression} */ (assignment.left);
-				const left = /** @type {Pattern} */ (context.visit(original_left));
-				const assign = b.assignment(assignment.operator, left, value);
-				sequence.unshift(assign);
-				return b.sequence(sequence);
-			}
-		};
+		transform: { ...context.state.transform }
 	};
 
 	// We need to generate a unique identifier in case there's a bind:group below
@@ -170,37 +139,59 @@ export function EachBlock(node, context) {
 		const item_with_loc = with_loc(item, id);
 		return b.call('$.unwrap', item_with_loc);
 	};
-	child_state.getters[item.name] = getter;
 
 	if (node.index) {
-		child_state.getters[node.index] = (id) => {
-			const index_with_loc = with_loc(index, id);
-			return (flags & EACH_INDEX_REACTIVE) === 0 ? index_with_loc : b.call('$.get', index_with_loc);
+		child_state.transform[node.index] = {
+			read: (id) => {
+				const index_with_loc = with_loc(index, id);
+				return (flags & EACH_INDEX_REACTIVE) === 0
+					? index_with_loc
+					: b.call('$.get', index_with_loc);
+			}
 		};
 
-		key_state.getters[node.index] = b.id(node.index);
+		delete key_state.transform[node.index];
 	}
 
 	/** @type {Statement[]} */
 	const declarations = [];
 
+	const invalidate = b.call(
+		'$.invalidate_inner_signals',
+		b.thunk(b.sequence(indirect_dependencies))
+	);
+
+	const invalidate_store = store_to_invalidate
+		? b.call('$.invalidate_store', b.id('$$stores'), b.literal(store_to_invalidate))
+		: undefined;
+
+	/** @type {Expression[]} */
+	const sequence = [];
+	if (!context.state.analysis.runes) sequence.push(invalidate);
+	if (invalidate_store) sequence.push(invalidate_store);
+
 	if (node.context.type === 'Identifier') {
-		child_state.setters[node.context.name] = create_mutation(
-			b.member(
-				each_node_meta.array_name ? b.call(each_node_meta.array_name) : collection,
-				index,
-				true
-			)
-		);
+		child_state.transform[node.context.name] = {
+			read: getter,
+			assign: (_, value) => {
+				const left = b.member(
+					each_node_meta.array_name ? b.call(each_node_meta.array_name) : collection,
+					index,
+					true
+				);
+
+				return b.sequence([b.assignment('=', left, value), ...sequence]);
+			},
+			mutate: (_, mutation) => b.sequence([mutation, ...sequence])
+		};
 
-		key_state.getters[node.context.name] = node.context;
+		delete key_state.transform[node.context.name];
 	} else {
 		const unwrapped = getter(binding.node);
 		const paths = extract_paths(node.context);
 
 		for (const path of paths) {
 			const name = /** @type {Identifier} */ (path.node).name;
-			const binding = /** @type {Binding} */ (context.state.scope.get(name));
 			const needs_derived = path.has_default_value; // to ensure that default value is only called once
 			const fn = b.thunk(
 				/** @type {Expression} */ (context.visit(path.expression?.(unwrapped), child_state))
@@ -208,19 +199,26 @@ export function EachBlock(node, context) {
 
 			declarations.push(b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn));
 
-			const getter = needs_derived ? b.call('$.get', b.id(name)) : b.call(name);
-			child_state.getters[name] = getter;
-			child_state.setters[name] = create_mutation(
-				/** @type {Pattern} */ (path.update_expression(unwrapped))
-			);
+			const read = needs_derived ? get_value : b.call;
+
+			child_state.transform[name] = {
+				read,
+				assign: (node, value) => {
+					const left = /** @type {Pattern} */ (path.update_expression(unwrapped));
+					return b.sequence([b.assignment('=', left, value), ...sequence]);
+				},
+				mutate: (node, mutation) => {
+					return b.sequence([mutation, ...sequence]);
+				}
+			};
 
 			// we need to eagerly evaluate the expression in order to hit any
 			// 'Cannot access x before initialization' errors
 			if (dev) {
-				declarations.push(b.stmt(getter));
+				declarations.push(b.stmt(read(b.id(name))));
 			}
 
-			key_state.getters[name] = path.node;
+			delete key_state.transform[name];
 		}
 	}
 
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 1696d9213e..e7312d15aa 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
@@ -66,7 +66,7 @@ export function Fragment(node, context) {
 		after_update: [],
 		template: [],
 		locations: [],
-		getters: { ...context.state.getters },
+		transform: { ...context.state.transform },
 		metadata: {
 			context: {
 				template_needs_import_node: false,
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js
index 262e44dfcb..87f56262a8 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LabeledStatement.js
@@ -34,7 +34,7 @@ export function LabeledStatement(node, context) {
 	const sequence = [];
 
 	for (const binding of reactive_statement.dependencies) {
-		if (binding.kind === 'normal') continue;
+		if (binding.kind === 'normal' && binding.declaration_kind !== 'import') continue;
 
 		const name = binding.node.name;
 		let serialized = build_getter(b.id(name), context.state);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js
index 2423c6e50e..c455ea3219 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js
@@ -16,10 +16,9 @@ export function LetDirective(node, context) {
 		const bindings = context.state.scope.get_bindings(node);
 
 		for (const binding of bindings) {
-			context.state.getters[binding.node.name] = b.member(
-				b.call('$.get', b.id(name)),
-				b.id(binding.node.name)
-			);
+			context.state.transform[binding.node.name] = {
+				read: (node) => b.member(b.call('$.get', b.id(name)), node)
+			};
 		}
 
 		return b.const(
@@ -42,8 +41,13 @@ export function LetDirective(node, context) {
 			)
 		);
 	} else {
+		const name = node.expression === null ? node.name : node.expression.name;
+		context.state.transform[name] = {
+			read: (node) => b.call('$.get', node)
+		};
+
 		return b.const(
-			node.expression === null ? node.name : node.expression.name,
+			name,
 			create_derived(context.state, b.thunk(b.member(b.id('$$slotProps'), b.id(node.name))))
 		);
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
new file mode 100644
index 0000000000..c222d74d6e
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
@@ -0,0 +1,123 @@
+/** @import { Expression, MemberExpression, Program } from 'estree' */
+/** @import { ComponentContext } from '../types' */
+import { build_getter, is_prop_source } from '../utils.js';
+import * as b from '../../../../utils/builders.js';
+import { add_state_transformers } from './shared/declarations.js';
+
+/**
+ * @param {Program} _
+ * @param {ComponentContext} context
+ */
+export function Program(_, context) {
+	if (!context.state.analysis.runes) {
+		context.state.transform['$$props'] = {
+			read: (node) => ({ ...node, name: '$$sanitized_props' })
+		};
+
+		for (const [name, binding] of context.state.scope.declarations) {
+			if (binding.declaration_kind === 'import' && binding.mutated) {
+				const id = b.id('$$_import_' + name);
+
+				context.state.transform[name] = {
+					read: (_) => b.call(id),
+					mutate: (_, mutation) => b.call(id, mutation)
+				};
+
+				context.state.legacy_reactive_imports.push(
+					b.var(id, b.call('$.reactive_import', b.thunk(b.id(name))))
+				);
+			}
+		}
+	}
+
+	for (const [name, binding] of context.state.scope.declarations) {
+		if (binding.kind === 'store_sub') {
+			const store = /** @type {Expression} */ (context.visit(b.id(name.slice(1))));
+
+			context.state.transform[name] = {
+				read: b.call,
+				assign: (_, value) => b.call('$.store_set', store, value),
+				mutate: (node, mutation) => {
+					// We need to untrack the store read, for consistency with Svelte 4
+					const untracked = b.call('$.untrack', node);
+
+					/**
+					 *
+					 * @param {Expression} n
+					 * @returns {Expression}
+					 */
+					function replace(n) {
+						if (n.type === 'MemberExpression') {
+							return {
+								...n,
+								object: replace(/** @type {Expression} */ (n.object)),
+								property: n.property
+							};
+						}
+
+						return untracked;
+					}
+
+					return b.call(
+						'$.store_mutate',
+						store,
+						b.assignment(
+							mutation.operator,
+							/** @type {MemberExpression} */ (
+								replace(/** @type {MemberExpression} */ (mutation.left))
+							),
+							mutation.right
+						),
+						untracked
+					);
+				},
+				update: (node) => {
+					return b.call(
+						node.prefix ? '$.update_pre_store' : '$.update_store',
+						build_getter(b.id(name.slice(1)), context.state),
+						b.call(node.argument),
+						node.operator === '--' && b.literal(-1)
+					);
+				}
+			};
+		}
+
+		if (binding.kind === 'prop' || binding.kind === 'bindable_prop') {
+			if (is_prop_source(binding, context.state)) {
+				context.state.transform[name] = {
+					read: b.call,
+					assign: (node, value) => b.call(node, value),
+					mutate: (node, value) => {
+						if (binding.kind === 'bindable_prop') {
+							// only necessary for interop with legacy parent bindings
+							return b.call(node, value, b.true);
+						}
+
+						return value;
+					},
+					update: (node) => {
+						return b.call(
+							node.prefix ? '$.update_pre_prop' : '$.update_prop',
+							node.argument,
+							node.operator === '--' && b.literal(-1)
+						);
+					}
+				};
+			} else if (binding.prop_alias) {
+				const key = b.key(binding.prop_alias);
+
+				context.state.transform[name] = {
+					read: (_) => b.member(b.id('$$props'), key, key.type === 'Literal')
+				};
+			} else {
+				context.state.transform[name] = {
+					read: (node) => b.member(b.id('$$props'), node)
+				};
+			}
+		}
+	}
+
+	add_state_transformers(context);
+
+	context.next();
+}
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 94864fecef..890713f22a 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
@@ -100,6 +100,13 @@ export function RegularElement(node, context) {
 		metadata.context.template_needs_import_node = true;
 	}
 
+	// visit let directives first, to set state
+	for (const attribute of node.attributes) {
+		if (attribute.type === 'LetDirective') {
+			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+		}
+	}
+
 	for (const attribute of node.attributes) {
 		if (attribute.type === 'Attribute') {
 			attributes.push(attribute);
@@ -136,8 +143,6 @@ export function RegularElement(node, context) {
 			class_directives.push(attribute);
 		} else if (attribute.type === 'StyleDirective') {
 			style_directives.push(attribute);
-		} else if (attribute.type === 'LetDirective') {
-			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
 		} else if (attribute.type === 'OnDirective') {
 			const handler = /** @type {Expression} */ (context.visit(attribute));
 			const has_action_directive = node.attributes.find((a) => a.type === 'UseDirective');
@@ -145,7 +150,7 @@ export function RegularElement(node, context) {
 			context.state.after_update.push(
 				b.stmt(has_action_directive ? b.call('$.effect', b.thunk(handler)) : handler)
 			);
-		} else {
+		} else if (attribute.type !== 'LetDirective') {
 			if (attribute.type === 'BindDirective') {
 				if (attribute.name === 'group' || attribute.name === 'checked') {
 					needs_special_value_handling = true;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
index cdb7455447..b62a58c8d7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SnippetBlock.js
@@ -4,6 +4,7 @@
 import { dev } from '../../../../state.js';
 import { extract_paths } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
+import { get_value } from './shared/declarations.js';
 
 /**
  * @param {SnippetBlock} node
@@ -20,8 +21,8 @@ export function SnippetBlock(node, context) {
 	/** @type {Statement[]} */
 	const declarations = [];
 
-	const getters = { ...context.state.getters };
-	const child_state = { ...context.state, getters };
+	const transform = { ...context.state.transform };
+	const child_state = { ...context.state, transform };
 
 	for (let i = 0; i < node.parameters.length; i++) {
 		const argument = node.parameters[i];
@@ -35,7 +36,8 @@ export function SnippetBlock(node, context) {
 				right: b.id('$.noop')
 			});
 
-			getters[argument.name] = b.call(argument);
+			transform[argument.name] = { read: b.call };
+
 			continue;
 		}
 
@@ -53,12 +55,14 @@ export function SnippetBlock(node, context) {
 
 			declarations.push(b.let(path.node, needs_derived ? b.call('$.derived_safe_equal', fn) : fn));
 
-			getters[name] = needs_derived ? b.call('$.get', b.id(name)) : b.call(name);
+			transform[name] = {
+				read: needs_derived ? get_value : b.call
+			};
 
 			// we need to eagerly evaluate the expression in order to hit any
 			// 'Cannot access x before initialization' errors
 			if (dev) {
-				declarations.push(b.stmt(getters[name]));
+				declarations.push(b.stmt(transform[name].read(b.id(name))));
 			}
 		}
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
index 5f8685eb3b..91383a5679 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/UpdateExpression.js
@@ -1,8 +1,8 @@
-/** @import { Expression, Pattern, Statement, UpdateExpression } from 'estree' */
+/** @import { Expression, Node, Pattern, Statement, UpdateExpression } from 'estree' */
 /** @import { Context } from '../types' */
 import { is_ignored } from '../../../../state.js';
+import { object } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
-import { build_getter, build_setter } from '../utils.js';
 
 /**
  * @param {UpdateExpression} node
@@ -11,45 +11,6 @@ import { build_getter, build_setter } from '../utils.js';
 export function UpdateExpression(node, context) {
 	const argument = node.argument;
 
-	if (argument.type === 'Identifier') {
-		const binding = context.state.scope.get(argument.name);
-		const is_store = binding?.kind === 'store_sub';
-		const name = is_store ? argument.name.slice(1) : argument.name;
-
-		// use runtime functions for smaller output
-		if (
-			binding?.kind === 'state' ||
-			binding?.kind === 'frozen_state' ||
-			binding?.kind === 'each' ||
-			binding?.kind === 'legacy_reactive' ||
-			binding?.kind === 'prop' ||
-			binding?.kind === 'bindable_prop' ||
-			is_store
-		) {
-			/** @type {Expression[]} */
-			const args = [];
-
-			let fn = '$.update';
-			if (node.prefix) fn += '_pre';
-
-			if (is_store) {
-				fn += '_store';
-				args.push(build_getter(b.id(name), context.state), b.call('$' + name));
-			} else {
-				if (binding.kind === 'prop' || binding.kind === 'bindable_prop') fn += '_prop';
-				args.push(b.id(name));
-			}
-
-			if (node.operator === '--') {
-				args.push(b.literal(-1));
-			}
-
-			return b.call(fn, ...args);
-		}
-
-		return context.next();
-	}
-
 	if (
 		argument.type === 'MemberExpression' &&
 		argument.object.type === 'ThisExpression' &&
@@ -68,43 +29,41 @@ export function UpdateExpression(node, context) {
 		return b.call(fn, ...args);
 	}
 
-	/** @param {any} serialized */
-	function maybe_skip_ownership_validation(serialized) {
-		if (is_ignored(node, 'ownership_invalid_mutation')) {
-			return b.call('$.skip_ownership_validation', b.thunk(serialized));
-		}
-
-		return serialized;
+	if (argument.type !== 'Identifier' && argument.type !== 'MemberExpression') {
+		throw new Error('An impossible state was reached');
 	}
 
-	// turn it into an IIFE assignment expression: i++ -> (() => { const $$value = i; i+=1; return $$value; })
-	const assignment = b.assignment(
-		node.operator === '++' ? '+=' : '-=',
-		/** @type {Pattern} */ (argument),
-		b.literal(1)
-	);
+	const left = object(argument);
+	if (left === null) return context.next();
 
-	const serialized_assignment = build_setter(assignment, context, () => assignment, node.prefix);
+	if (left === argument) {
+		const transform = context.state.transform;
+		const update = transform[left.name]?.update;
 
-	const value = /** @type {Expression} */ (context.visit(argument));
-
-	if (serialized_assignment === assignment) {
-		// No change to output -> nothing to transform -> we can keep the original update expression
-		return maybe_skip_ownership_validation(context.next());
+		if (update && Object.hasOwn(transform, left.name)) {
+			return update(node);
+		}
 	}
 
-	if (context.state.analysis.runes) {
-		return maybe_skip_ownership_validation(serialized_assignment);
-	}
+	const assignment = /** @type {Expression} */ (
+		context.visit(
+			b.assignment(
+				node.operator === '++' ? '+=' : '-=',
+				/** @type {Pattern} */ (argument),
+				b.literal(1)
+			)
+		)
+	);
 
-	/** @type {Statement[]} */
-	let statements;
-	if (node.prefix) {
-		statements = [b.stmt(serialized_assignment), b.return(value)];
-	} else {
-		const tmp_id = context.state.scope.generate('$$value');
-		statements = [b.const(tmp_id, value), b.stmt(serialized_assignment), b.return(b.id(tmp_id))];
-	}
+	const parent = /** @type {Node} */ (context.path.at(-1));
+	const is_standalone = parent.type === 'ExpressionStatement'; // TODO and possibly others, but not e.g. the `test` of a WhileStatement
+
+	const update =
+		node.prefix || is_standalone
+			? assignment
+			: b.binary(node.operator === '++' ? '-' : '+', assignment, b.literal(1));
 
-	return maybe_skip_ownership_validation(b.call(b.thunk(b.block(statements))));
+	return is_ignored(node, 'ownership_invalid_mutation')
+		? b.call('$.skip_ownership_validation', b.thunk(update))
+		: update;
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 6416e26318..44f943ddec 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -1,14 +1,14 @@
 /** @import { BlockStatement, Expression, ExpressionStatement, Identifier, MemberExpression, Property, Statement } from 'estree' */
-/** @import { Attribute, Component, SvelteComponent, SvelteSelf, TemplateNode, Text } from '#compiler' */
+/** @import { Component, SvelteComponent, SvelteSelf, TemplateNode } from '#compiler' */
 /** @import { ComponentContext } from '../../types.js' */
 import { dev, is_ignored } from '../../../../../state.js';
 import { get_attribute_chunks } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { is_element_node } from '../../../../nodes.js';
-import { create_derived, build_setter } from '../../utils.js';
+import { create_derived } from '../../utils.js';
 import { build_bind_this, validate_binding } from '../shared/utils.js';
 import { build_attribute_value } from '../shared/element.js';
 import { build_event_handler } from './events.js';
+import { determine_slot } from '../../../../../utils/slot.js';
 
 /**
  * @param {Component | SvelteComponent | SvelteSelf} node
@@ -24,6 +24,15 @@ export function build_component(node, component_name, context, anchor = context.
 	/** @type {ExpressionStatement[]} */
 	const lets = [];
 
+	/** @type {Record<string, typeof context.state>} */
+	const states = {
+		default: {
+			...context.state,
+			scope: node.metadata.scopes.default,
+			transform: { ...context.state.transform }
+		}
+	};
+
 	/** @type {Record<string, TemplateNode[]>} */
 	const children = {};
 
@@ -45,7 +54,7 @@ export function build_component(node, component_name, context, anchor = context.
 	 * If this component has a slot property, it is a named slot within another component. In this case
 	 * the slot scope applies to the component itself, too, and not just its children.
 	 */
-	let slot_scope_applies_to_itself = false;
+	let slot_scope_applies_to_itself = !!determine_slot(node);
 
 	/**
 	 * Components may have a children prop and also have child nodes. In this case, we assume
@@ -66,9 +75,20 @@ export function build_component(node, component_name, context, anchor = context.
 			props_and_spreads.push(props);
 		}
 	}
+
+	if (slot_scope_applies_to_itself) {
+		for (const attribute of node.attributes) {
+			if (attribute.type === 'LetDirective') {
+				lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+			}
+		}
+	}
+
 	for (const attribute of node.attributes) {
 		if (attribute.type === 'LetDirective') {
-			lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute)));
+			if (!slot_scope_applies_to_itself) {
+				lets.push(/** @type {ExpressionStatement} */ (context.visit(attribute, states.default)));
+			}
 		} else if (attribute.type === 'OnDirective') {
 			if (!attribute.expression) {
 				context.state.analysis.needs_props = true;
@@ -174,9 +194,7 @@ export function build_component(node, component_name, context, anchor = context.
 
 				const assignment = b.assignment('=', attribute.expression, b.id('$$value'));
 				push_prop(
-					b.set(attribute.name, [
-						b.stmt(build_setter(assignment, context, () => context.visit(assignment)))
-					])
+					b.set(attribute.name, [b.stmt(/** @type {Expression} */ (context.visit(assignment)))])
 				);
 			}
 		}
@@ -214,19 +232,7 @@ export function build_component(node, component_name, context, anchor = context.
 			continue;
 		}
 
-		let slot_name = 'default';
-
-		if (is_element_node(child)) {
-			const attribute = /** @type {Attribute | undefined} */ (
-				child.attributes.find(
-					(attribute) => attribute.type === 'Attribute' && attribute.name === 'slot'
-				)
-			);
-
-			if (attribute !== undefined) {
-				slot_name = /** @type {Text[]} */ (attribute.value)[0].data;
-			}
-		}
+		let slot_name = determine_slot(child) ?? 'default';
 
 		(children[slot_name] ||= []).push(child);
 	}
@@ -242,12 +248,15 @@ export function build_component(node, component_name, context, anchor = context.
 					// @ts-expect-error
 					nodes: children[slot_name]
 				},
-				{
-					...context.state,
-					scope:
-						context.state.scopes.get(slot_name === 'default' ? children[slot_name][0] : node) ??
-						context.state.scope
-				}
+				slot_name === 'default'
+					? slot_scope_applies_to_itself
+						? context.state
+						: states.default
+					: {
+							...context.state,
+							scope: node.metadata.scopes[slot_name],
+							transform: { ...context.state.transform }
+						}
 			)
 		);
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
new file mode 100644
index 0000000000..5a03fd9be4
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
@@ -0,0 +1,53 @@
+/** @import { BinaryOperator, Expression, Identifier } from 'estree' */
+/** @import { ComponentContext, Context } from '../../types' */
+import { build_proxy_reassignment, is_state_source, should_proxy_or_freeze } from '../../utils.js';
+import * as b from '../../../../../utils/builders.js';
+
+/**
+ * Turns `foo` into `$.get(foo)`
+ * @param {Identifier} node
+ */
+export function get_value(node) {
+	return b.call('$.get', node);
+}
+
+/**
+ *
+ * @param {Context | ComponentContext} context
+ */
+export function add_state_transformers(context) {
+	for (const [name, binding] of context.state.scope.declarations) {
+		if (
+			is_state_source(binding, context.state) ||
+			binding.kind === 'derived' ||
+			binding.kind === 'legacy_reactive'
+		) {
+			context.state.transform[name] = {
+				read: get_value,
+				assign: (node, value) => {
+					let call = b.call('$.set', node, value);
+
+					if (context.state.scope.get(`$${node.name}`)?.kind === 'store_sub') {
+						call = b.call('$.store_unsub', call, b.literal(`$${node.name}`), b.id('$$stores'));
+					}
+
+					return call;
+				},
+				mutate: (node, mutation) => {
+					if (context.state.analysis.runes) {
+						return mutation;
+					}
+
+					return b.call('$.mutate', node, mutation);
+				},
+				update: (node) => {
+					return b.call(
+						node.prefix ? '$.update_pre' : '$.update',
+						node.argument,
+						node.operator === '--' && b.literal(-1)
+					);
+				}
+			};
+		}
+	}
+}
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 28d6684a57..7d5c61c056 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
@@ -101,7 +101,7 @@ export function build_attribute_value(value, context) {
 		}
 
 		return {
-			has_state: chunk.metadata.expression.has_call,
+			has_state: chunk.metadata.expression.has_state,
 			has_call: chunk.metadata.expression.has_call,
 			value: /** @type {Expression} */ (context.visit(chunk.expression))
 		};
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 874ebe3131..b11c2ed224 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
@@ -145,8 +145,10 @@ export function build_bind_this(expression, value, { state, visit }) {
 	/** @type {Expression[]} */
 	const values = [];
 
-	/** @type {typeof state.getters} */
-	const getters = {};
+	/** @type {string[]} */
+	const seen = [];
+
+	const transform = { ...state.transform };
 
 	// Pass in each context variables to the get/set functions, so that we can null out old values on teardown.
 	// Note that we only do this for each context variables, the consequence is that the value might be stale in
@@ -154,7 +156,8 @@ export function build_bind_this(expression, value, { state, visit }) {
 	// variables, but that was the same case in Svelte 4, too. Once legacy mode is gone completely, we can revisit this.
 	walk(expression, null, {
 		Identifier(node, { path }) {
-			if (Object.hasOwn(getters, node.name)) return;
+			if (seen.includes(node.name)) return;
+			seen.push(node.name);
 
 			const parent = /** @type {Expression} */ (path.at(-1));
 			if (!is_reference(node, parent)) return;
@@ -166,14 +169,21 @@ export function build_bind_this(expression, value, { state, visit }) {
 				if (owner.type === 'EachBlock' && scope === binding.scope) {
 					ids.push(node);
 					values.push(/** @type {Expression} */ (visit(node)));
-					getters[node.name] = node;
+
+					if (transform[node.name]) {
+						transform[node.name] = {
+							...transform[node.name],
+							read: (node) => node
+						};
+					}
+
 					break;
 				}
 			}
 		}
 	});
 
-	const child_state = { ...state, getters: { ...state.getters, ...getters } };
+	const child_state = { ...state, transform };
 
 	const get = /** @type {Expression} */ (visit(expression, child_state));
 	const set = /** @type {Expression} */ (
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
index c349f64b3d..e92d54c3b7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
@@ -1,59 +1,16 @@
-/** @import { AssignmentExpression, AssignmentOperator, BinaryOperator, Expression, Node, Pattern } from 'estree' */
+/** @import { AssignmentExpression, AssignmentOperator, Expression, Pattern } from 'estree' */
 /** @import { SvelteNode } from '#compiler' */
 /** @import { Context, ServerTransformState } from '../types.js' */
 import * as b from '../../../../utils/builders.js';
-import { extract_paths } from '../../../../utils/ast.js';
-import { build_getter } from './shared/utils.js';
+import { build_assignment_value } from '../../../../utils/ast.js';
+import { visit_assignment_expression } from '../../shared/assignments.js';
 
 /**
  * @param {AssignmentExpression} node
  * @param {Context} context
  */
 export function AssignmentExpression(node, context) {
-	const parent = /** @type {Node} */ (context.path.at(-1));
-	const is_standalone = parent.type.endsWith('Statement');
-
-	if (
-		node.left.type === 'ArrayPattern' ||
-		node.left.type === 'ObjectPattern' ||
-		node.left.type === 'RestElement'
-	) {
-		const value = /** @type {Expression} */ (context.visit(node.right));
-		const should_cache = value.type !== 'Identifier';
-		const rhs = should_cache ? b.id('$$value') : value;
-
-		let changed = false;
-
-		const assignments = extract_paths(node.left).map((path) => {
-			const value = path.expression?.(rhs);
-
-			let assignment = build_assignment('=', path.node, value, context);
-			if (assignment !== null) changed = true;
-
-			return assignment ?? b.assignment('=', path.node, value);
-		});
-
-		if (!changed) {
-			// No change to output -> nothing to transform -> we can keep the original assignment
-			return context.next();
-		}
-
-		const sequence = b.sequence(assignments);
-
-		if (!is_standalone) {
-			// this is part of an expression, we need the sequence to end with the value
-			sequence.expressions.push(rhs);
-		}
-
-		if (should_cache) {
-			// the right hand side is a complex expression, wrap in an IIFE to cache it
-			return b.call(b.arrow([rhs], sequence), value);
-		}
-
-		return sequence;
-	}
-
-	return build_assignment(node.operator, node.left, node.right, context) || context.next();
+	return visit_assignment_expression(node, context, build_assignment);
 }
 
 /**
@@ -83,16 +40,9 @@ function build_assignment(operator, left, right, context) {
 	}
 
 	if (object === left) {
-		let value = /** @type {Expression} */ (context.visit(right));
-
-		if (operator !== '=') {
-			// turn `x += 1` into `x = x + 1`
-			value = b.binary(
-				/** @type {BinaryOperator} */ (operator.slice(0, -1)),
-				build_getter(left, context.state),
-				value
-			);
-		}
+		let value = /** @type {Expression} */ (
+			context.visit(build_assignment_value(operator, left, right))
+		);
 
 		return b.call('$.store_set', b.id(name), value);
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
index 60b3498510..941088228a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/component.js
@@ -20,6 +20,15 @@ export function build_inline_component(node, expression, context) {
 	/** @type {Record<string, LetDirective[]>} */
 	const lets = { default: [] };
 
+	/**
+	 * Children in the default slot are evaluated in the component scope,
+	 * children in named slots are evaluated in the parent scope
+	 */
+	const child_state = {
+		...context.state,
+		scope: node.metadata.scopes.default
+	};
+
 	/** @type {Record<string, TemplateNode[]>} */
 	const children = {};
 
@@ -144,12 +153,12 @@ export function build_inline_component(node, expression, context) {
 					// @ts-expect-error
 					nodes: children[slot_name]
 				},
-				{
-					...context.state,
-					scope:
-						context.state.scopes.get(slot_name === 'default' ? children[slot_name][0] : node) ??
-						context.state.scope
-				}
+				slot_name === 'default'
+					? child_state
+					: {
+							...context.state,
+							scope: node.metadata.scopes[slot_name]
+						}
 			)
 		);
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js b/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js
new file mode 100644
index 0000000000..ce7595a06e
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js
@@ -0,0 +1,77 @@
+/** @import { AssignmentExpression, AssignmentOperator, Expression, Node, Pattern } from 'estree' */
+/** @import { Context as ClientContext } from '../client/types.js' */
+/** @import { Context as ServerContext } from '../server/types.js' */
+import { extract_paths, is_expression_async } from '../../../utils/ast.js';
+import * as b from '../../../utils/builders.js';
+
+/**
+ * @template {ClientContext | ServerContext} Context
+ * @param {AssignmentExpression} node
+ * @param {Context} context
+ * @param {(operator: AssignmentOperator, left: Pattern, right: Expression, context: Context) => Expression | null} build_assignment
+ * @returns
+ */
+export function visit_assignment_expression(node, context, build_assignment) {
+	if (
+		node.left.type === 'ArrayPattern' ||
+		node.left.type === 'ObjectPattern' ||
+		node.left.type === 'RestElement'
+	) {
+		const value = /** @type {Expression} */ (context.visit(node.right));
+		const should_cache = value.type !== 'Identifier';
+		const rhs = should_cache ? b.id('$$value') : value;
+
+		let changed = false;
+
+		const assignments = extract_paths(node.left).map((path) => {
+			const value = path.expression?.(rhs);
+
+			let assignment = build_assignment('=', path.node, value, context);
+			if (assignment !== null) changed = true;
+
+			return (
+				assignment ??
+				b.assignment(
+					'=',
+					/** @type {Pattern} */ (context.visit(path.node)),
+					/** @type {Expression} */ (context.visit(value))
+				)
+			);
+		});
+
+		if (!changed) {
+			// No change to output -> nothing to transform -> we can keep the original assignment
+			return context.next();
+		}
+
+		const is_standalone = /** @type {Node} */ (context.path.at(-1)).type.endsWith('Statement');
+		const sequence = b.sequence(assignments);
+
+		if (!is_standalone) {
+			// this is part of an expression, we need the sequence to end with the value
+			sequence.expressions.push(rhs);
+		}
+
+		if (should_cache) {
+			// the right hand side is a complex expression, wrap in an IIFE to cache it
+			const iife = b.arrow([rhs], sequence);
+
+			const iife_is_async =
+				is_expression_async(value) ||
+				assignments.some((assignment) => is_expression_async(assignment));
+
+			return iife_is_async ? b.await(b.call(b.async(iife), value)) : b.call(iife, value);
+		}
+
+		return sequence;
+	}
+
+	if (node.left.type !== 'Identifier' && node.left.type !== 'MemberExpression') {
+		throw new Error(`Unexpected assignment type ${node.left.type}`);
+	}
+
+	return (
+		build_assignment(node.operator, node.left, node.right, context) ??
+		/** @type {Expression} */ (context.next())
+	);
+}
diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js
index 8a1a00d862..f71c4120f9 100644
--- a/packages/svelte/src/compiler/phases/3-transform/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/utils.js
@@ -425,7 +425,7 @@ export function transform_inspect_rune(node, context) {
 	const { state, visit } = context;
 	const as_fn = state.options.generate === 'client';
 
-	if (!dev) return b.unary('void', b.literal(0));
+	if (!dev) return b.empty;
 
 	if (node.callee.type === 'MemberExpression') {
 		const raw_inspect_args = /** @type {CallExpression} */ (node.callee.object).arguments;
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 5eba0d3cf2..633f326080 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -1,9 +1,8 @@
 /** @import { ClassDeclaration, Expression, FunctionDeclaration, Identifier, ImportDeclaration, MemberExpression, Node, Pattern, VariableDeclarator } from 'estree' */
 /** @import { Context, Visitor } from 'zimmerframe' */
-/** @import { AnimateDirective, Binding, DeclarationKind, EachBlock, ElementLike, LetDirective, SvelteNode, TransitionDirective, UseDirective } from '#compiler' */
+/** @import { AnimateDirective, Binding, Component, DeclarationKind, EachBlock, ElementLike, LetDirective, SvelteComponent, SvelteNode, SvelteSelf, TransitionDirective, UseDirective } from '#compiler' */
 import is_reference from 'is-reference';
 import { walk } from 'zimmerframe';
-import { is_element_node } from './nodes.js';
 import * as b from '../utils/builders.js';
 import * as e from '../errors.js';
 import {
@@ -13,6 +12,7 @@ import {
 	unwrap_pattern
 } from '../utils/ast.js';
 import { is_reserved, is_rune } from '../../utils.js';
+import { determine_slot } from '../utils/slot.js';
 
 export class Scope {
 	/** @type {ScopeRoot} */
@@ -290,52 +290,47 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 	 * @type {Visitor<ElementLike, State, SvelteNode>}
 	 */
 	const SvelteFragment = (node, { state, next }) => {
-		const [scope] = analyze_let_directives(node, state.scope);
+		const scope = state.scope.child();
 		scopes.set(node, scope);
 		next({ scope });
 	};
 
 	/**
-	 * @param {ElementLike} node
-	 * @param {Scope} parent
+	 * @type {Visitor<Component | SvelteComponent | SvelteSelf, State, SvelteNode>}
 	 */
-	function analyze_let_directives(node, parent) {
-		const scope = parent.child();
-		let is_default_slot = true;
+	const Component = (node, context) => {
+		node.metadata.scopes = {
+			default: context.state.scope.child()
+		};
+
+		const default_state = determine_slot(node)
+			? context.state
+			: { scope: node.metadata.scopes.default };
 
 		for (const attribute of node.attributes) {
 			if (attribute.type === 'LetDirective') {
-				/** @type {Binding[]} */
-				const bindings = [];
-				scope.declarators.set(attribute, bindings);
+				context.visit(attribute, default_state);
+			} else {
+				context.visit(attribute);
+			}
+		}
 
-				// attach the scope to the directive itself, as well as the
-				// contents to which it applies
-				scopes.set(attribute, scope);
+		for (const child of node.fragment.nodes) {
+			let state = default_state;
 
-				if (attribute.expression) {
-					for (const id of extract_identifiers_from_destructuring(attribute.expression)) {
-						const binding = scope.declare(id, 'derived', 'const');
-						bindings.push(binding);
-					}
-				} else {
-					/** @type {Identifier} */
-					const id = {
-						name: attribute.name,
-						type: 'Identifier',
-						start: attribute.start,
-						end: attribute.end
-					};
-					const binding = scope.declare(id, 'derived', 'const');
-					bindings.push(binding);
-				}
-			} else if (attribute.type === 'Attribute' && attribute.name === 'slot') {
-				is_default_slot = false;
+			const slot_name = determine_slot(child);
+
+			if (slot_name !== null) {
+				node.metadata.scopes[slot_name] = context.state.scope.child();
+
+				state = {
+					scope: node.metadata.scopes[slot_name]
+				};
 			}
-		}
 
-		return /** @type {const} */ ([scope, is_default_slot]);
-	}
+			context.visit(child, state);
+		}
+	};
 
 	/**
 	 * @type {Visitor<AnimateDirective | TransitionDirective | UseDirective, State, SvelteNode>}
@@ -384,48 +379,37 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		SvelteElement: SvelteFragment,
 		RegularElement: SvelteFragment,
 
-		Component(node, { state, visit, path }) {
-			state.scope.reference(b.id(node.name), path);
+		LetDirective(node, context) {
+			const scope = context.state.scope;
 
-			// let:x is super weird:
-			// - for the default slot, its scope only applies to children that are not slots themselves
-			// - for named slots, its scope applies to the component itself, too
-			const [scope, is_default_slot] = analyze_let_directives(node, state.scope);
-			if (is_default_slot) {
-				for (const attribute of node.attributes) {
-					visit(attribute);
-				}
-			} else {
-				scopes.set(node, scope);
+			/** @type {Binding[]} */
+			const bindings = [];
+			scope.declarators.set(node, bindings);
 
-				for (const attribute of node.attributes) {
-					visit(attribute, { ...state, scope });
+			if (node.expression) {
+				for (const id of extract_identifiers_from_destructuring(node.expression)) {
+					const binding = scope.declare(id, 'derived', 'const');
+					bindings.push(binding);
 				}
+			} else {
+				/** @type {Identifier} */
+				const id = {
+					name: node.name,
+					type: 'Identifier',
+					start: node.start,
+					end: node.end
+				};
+				const binding = scope.declare(id, 'derived', 'const');
+				bindings.push(binding);
 			}
+		},
 
-			for (const child of node.fragment.nodes) {
-				if (
-					is_element_node(child) &&
-					child.attributes.some(
-						(attribute) => attribute.type === 'Attribute' && attribute.name === 'slot'
-					)
-				) {
-					// <div slot="..."> inherits the scope above the component unless the component is a named slot itself, because slots are hella weird
-					scopes.set(child, is_default_slot ? state.scope : scope);
-					visit(child, { scope: is_default_slot ? state.scope : scope });
-				} else {
-					if (child.type === 'ExpressionTag') {
-						// expression tag is a special case — we don't visit it directly, but via process_children,
-						// so we need to set the scope on the expression rather than the tag itself
-						scopes.set(child.expression, scope);
-					} else {
-						scopes.set(child, scope);
-					}
-
-					visit(child, { scope });
-				}
-			}
+		Component: (node, context) => {
+			context.state.scope.reference(b.id(node.name), context.path);
+			Component(node, context);
 		},
+		SvelteSelf: Component,
+		SvelteComponent: Component,
 
 		// updates
 		AssignmentExpression(node, { state, next }) {
@@ -532,7 +516,6 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 					references_within.add(id);
 				}
 			}
-			scopes.set(node.expression, state.scope);
 
 			// context and children are a new scope
 			const scope = state.scope.child();
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index 47dc9d7eb6..f7d111a267 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -271,7 +271,6 @@ export interface Binding {
 	 * - `snippet`: A snippet parameter
 	 * - `store_sub`: A $store value
 	 * - `legacy_reactive`: A `$:` declaration
-	 * - `legacy_reactive_import`: An imported binding that is mutated inside the component
 	 */
 	kind:
 		| 'normal'
@@ -284,8 +283,7 @@ export interface Binding {
 		| 'each'
 		| 'snippet'
 		| 'store_sub'
-		| 'legacy_reactive'
-		| 'legacy_reactive_import';
+		| 'legacy_reactive';
 	declaration_kind: DeclarationKind;
 	/**
 	 * What the value was initialized with.
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 86341d07d0..20fdb25ee4 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -16,6 +16,7 @@ import type {
 	ChainExpression,
 	SimpleCallExpression
 } from 'estree';
+import type { Scope } from '../phases/scope';
 
 export interface BaseNode {
 	type: string;
@@ -275,6 +276,7 @@ interface BaseElement extends BaseNode {
 export interface Component extends BaseElement {
 	type: 'Component';
 	metadata: {
+		scopes: Record<string, Scope>;
 		dynamic: boolean;
 	};
 }
@@ -311,6 +313,9 @@ export interface SvelteComponent extends BaseElement {
 	type: 'SvelteComponent';
 	name: 'svelte:component';
 	expression: Expression;
+	metadata: {
+		scopes: Record<string, Scope>;
+	};
 }
 
 interface SvelteDocument extends BaseElement {
@@ -356,6 +361,9 @@ export interface SvelteOptionsRaw extends BaseElement {
 export interface SvelteSelf extends BaseElement {
 	type: 'SvelteSelf';
 	name: 'svelte:self';
+	metadata: {
+		scopes: Record<string, Scope>;
+	};
 }
 
 interface SvelteWindow extends BaseElement {
diff --git a/packages/svelte/src/compiler/utils/ast.js b/packages/svelte/src/compiler/utils/ast.js
index 95b5d2fb2d..47bbdb945f 100644
--- a/packages/svelte/src/compiler/utils/ast.js
+++ b/packages/svelte/src/compiler/utils/ast.js
@@ -563,3 +563,15 @@ export function build_fallback(expression, fallback) {
 		? b.await(b.call('$.fallback', expression, b.thunk(fallback, true), b.true))
 		: b.call('$.fallback', expression, b.thunk(fallback), b.true);
 }
+
+/**
+ * @param {ESTree.AssignmentOperator} operator
+ * @param {ESTree.Identifier | ESTree.MemberExpression} left
+ * @param {ESTree.Expression} right
+ */
+export function build_assignment_value(operator, left, right) {
+	return operator === '='
+		? right
+		: // turn something like x += 1 into x = x + 1
+			b.binary(/** @type {ESTree.BinaryOperator} */ (operator.slice(0, -1)), left, right);
+}
diff --git a/packages/svelte/src/compiler/utils/slot.js b/packages/svelte/src/compiler/utils/slot.js
new file mode 100644
index 0000000000..1c05ec8ee6
--- /dev/null
+++ b/packages/svelte/src/compiler/utils/slot.js
@@ -0,0 +1,20 @@
+/** @import { SvelteNode } from '#compiler' */
+import { is_element_node } from '../phases/nodes.js';
+import { is_text_attribute } from './ast.js';
+
+/**
+ * @param {SvelteNode} node
+ */
+export function determine_slot(node) {
+	if (!is_element_node(node)) return null;
+
+	for (const attribute of node.attributes) {
+		if (attribute.type !== 'Attribute') continue;
+		if (attribute.name !== 'slot') continue;
+		if (!is_text_attribute(attribute)) continue;
+
+		return /** @type {string} */ (attribute.value[0].data);
+	}
+
+	return null;
+}
diff --git a/packages/svelte/tests/runtime-legacy/samples/each-blocks-update/_config.js b/packages/svelte/tests/runtime-legacy/samples/each-blocks-update/_config.js
new file mode 100644
index 0000000000..a00605a634
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/each-blocks-update/_config.js
@@ -0,0 +1,27 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `
+		<button>1</button>
+		<button>2</button>
+		<button>3</button>
+		<p>1, 2, 3</p>
+	`,
+
+	test({ assert, target }) {
+		let buttons = target.querySelectorAll('button');
+
+		flushSync(() => buttons[2].click());
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>1</button>
+				<button>2</button>
+				<button>4</button>
+				<p>1, 2, 4</p>
+			`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/each-blocks-update/main.svelte b/packages/svelte/tests/runtime-legacy/samples/each-blocks-update/main.svelte
new file mode 100644
index 0000000000..0abded02ff
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/each-blocks-update/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let arr = [1, 2, 3];
+</script>
+
+{#each arr as n}
+	<button on:click={() => n++}>{n}</button>
+{/each}
+
+<p>{arr.join(', ')}</p>
diff --git a/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..9400b52718
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js
@@ -0,0 +1,12 @@
+/* index.svelte.js generated by Svelte VERSION */
+import * as $ from "svelte/internal/client";
+
+let a = $.source(1);
+let b = $.source(2);
+
+export function update(array) {
+	(
+		$.set(a, $.proxy(array[0])),
+		$.set(b, $.proxy(array[1]))
+	);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..846ed48458
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/server/index.svelte.js
@@ -0,0 +1,9 @@
+/* index.svelte.js generated by Svelte VERSION */
+import * as $ from "svelte/internal/server";
+
+let a = 1;
+let b = 2;
+
+export function update(array) {
+	[a, b] = array;
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/destructured-assignments/index.svelte.js b/packages/svelte/tests/snapshot/samples/destructured-assignments/index.svelte.js
new file mode 100644
index 0000000000..9c0da7558a
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/destructured-assignments/index.svelte.js
@@ -0,0 +1,6 @@
+let a = $state(1);
+let b = $state(2);
+
+export function update(array) {
+	[a, b] = array;
+}
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 969f89222d..df012254f6 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -920,7 +920,6 @@ declare module 'svelte/compiler' {
 		 * - `snippet`: A snippet parameter
 		 * - `store_sub`: A $store value
 		 * - `legacy_reactive`: A `$:` declaration
-		 * - `legacy_reactive_import`: An imported binding that is mutated inside the component
 		 */
 		kind:
 			| 'normal'
@@ -933,8 +932,7 @@ declare module 'svelte/compiler' {
 			| 'each'
 			| 'snippet'
 			| 'store_sub'
-			| 'legacy_reactive'
-			| 'legacy_reactive_import';
+			| 'legacy_reactive';
 		declaration_kind: DeclarationKind;
 		/**
 		 * What the value was initialized with.
@@ -1733,6 +1731,7 @@ declare module 'svelte/compiler' {
 	interface Component extends BaseElement {
 		type: 'Component';
 		metadata: {
+			scopes: Record<string, Scope>;
 			dynamic: boolean;
 		};
 	}
@@ -1769,6 +1768,9 @@ declare module 'svelte/compiler' {
 		type: 'SvelteComponent';
 		name: 'svelte:component';
 		expression: Expression;
+		metadata: {
+			scopes: Record<string, Scope>;
+		};
 	}
 
 	interface SvelteDocument extends BaseElement {
@@ -1814,6 +1816,9 @@ declare module 'svelte/compiler' {
 	interface SvelteSelf extends BaseElement {
 		type: 'SvelteSelf';
 		name: 'svelte:self';
+		metadata: {
+			scopes: Record<string, Scope>;
+		};
 	}
 
 	interface SvelteWindow extends BaseElement {

From a0bbf2ace02ad251cfd4720fa269eb00a0b27200 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 10 Aug 2024 16:00:24 -0400
Subject: [PATCH 087/196] Version Packages (next) (#12794)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  3 +++
 packages/svelte/CHANGELOG.md   | 10 ++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 10c332ff19..c99ed9e8b6 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -280,6 +280,7 @@
     "heavy-feet-attend",
     "hip-balloons-begin",
     "hip-garlics-tap",
+    "hip-goats-smoke",
     "hip-months-breathe",
     "hip-pumpkins-boil",
     "hip-stingrays-teach",
@@ -425,6 +426,7 @@
     "nice-avocados-move",
     "nice-bottles-greet",
     "nice-jobs-breathe",
+    "nine-ants-invite",
     "nine-cooks-join",
     "ninety-days-visit",
     "ninety-dingos-walk",
@@ -456,6 +458,7 @@
     "orange-yaks-protect",
     "orange-zoos-heal",
     "perfect-actors-bake",
+    "perfect-hairs-matter",
     "perfect-hats-dance",
     "pink-bikes-agree",
     "pink-goats-promise",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index f7d6e9257e..1b9db51621 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.0.0-next.214
+
+### Patch Changes
+
+- fix: ensure custom element styles append correctly during prod ([#12777](https://github.com/sveltejs/svelte/pull/12777))
+
+- fix: invalidate signals following ++/-- inside each block ([#12780](https://github.com/sveltejs/svelte/pull/12780))
+
+- feat: better code generation for destructuring assignments ([#12780](https://github.com/sveltejs/svelte/pull/12780))
+
 ## 5.0.0-next.213
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index b6d6393487..ba166774fa 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.213",
+  "version": "5.0.0-next.214",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index b08ee5d3a0..e9dc0a3a31 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.213';
+export const VERSION = '5.0.0-next.214';
 export const PUBLIC_VERSION = '5';

From ba116a1b43f66e607a30fa55f9bbfa067b126ca6 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sun, 11 Aug 2024 03:42:32 +0100
Subject: [PATCH 088/196] fix: propagate custom element component prop changes
 (#12774)

* fix: propagate custom element component prop changes

* add test
---
 .changeset/poor-mugs-pay.md                   |  5 +++
 .../client/dom/elements/custom-element.js     | 15 +++++++-
 .../propagate-prop-changes/_config.js         | 37 +++++++++++++++++++
 .../propagate-prop-changes/main.svelte        |  7 ++++
 4 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/poor-mugs-pay.md
 create mode 100644 packages/svelte/tests/runtime-browser/custom-elements-samples/propagate-prop-changes/_config.js
 create mode 100644 packages/svelte/tests/runtime-browser/custom-elements-samples/propagate-prop-changes/main.svelte

diff --git a/.changeset/poor-mugs-pay.md b/.changeset/poor-mugs-pay.md
new file mode 100644
index 0000000000..01f54e4604
--- /dev/null
+++ b/.changeset/poor-mugs-pay.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: propagate custom element component prop changes
diff --git a/packages/svelte/src/internal/client/dom/elements/custom-element.js b/packages/svelte/src/internal/client/dom/elements/custom-element.js
index 1c31d0a394..a0483e9ea5 100644
--- a/packages/svelte/src/internal/client/dom/elements/custom-element.js
+++ b/packages/svelte/src/internal/client/dom/elements/custom-element.js
@@ -1,7 +1,7 @@
 import { createClassComponent } from '../../../../legacy/legacy-client.js';
 import { destroy_effect, render_effect } from '../../reactivity/effects.js';
 import { append } from '../template.js';
-import { define_property, object_keys } from '../../../shared/utils.js';
+import { define_property, get_descriptor, object_keys } from '../../../shared/utils.js';
 
 /**
  * @typedef {Object} CustomElementPropDefinition
@@ -305,7 +305,18 @@ export function create_custom_element(
 			set(value) {
 				value = get_custom_element_value(prop, value, props_definition);
 				this.$$d[prop] = value;
-				this.$$c?.$set({ [prop]: value });
+				var component = this.$$c;
+
+				if (component) {
+					// // If the instance has an accessor, use that instead
+					var setter = get_descriptor(component, prop)?.get;
+
+					if (setter) {
+						component[prop] = value;
+					} else {
+						component.$set({ [prop]: value });
+					}
+				}
 			}
 		});
 	});
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/propagate-prop-changes/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/propagate-prop-changes/_config.js
new file mode 100644
index 0000000000..da451f6230
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/propagate-prop-changes/_config.js
@@ -0,0 +1,37 @@
+import { flushSync } from 'svelte';
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	async test({ assert, target }) {
+		target.innerHTML = '<custom-element></custom-element>';
+		await tick();
+		await tick();
+
+		/** @type {any} */
+		const el = target.querySelector('custom-element');
+		const button = el.shadowRoot.querySelector('button');
+
+		assert.equal(button.textContent, '0');
+		assert.equal(el.count, 0);
+
+		button.click();
+
+		flushSync();
+
+		assert.equal(button.textContent, '1');
+		assert.equal(el.count, 1);
+
+		el.count = 0;
+
+		assert.equal(button.textContent, '0');
+		assert.equal(el.count, 0);
+
+		button.click();
+
+		flushSync();
+
+		assert.equal(button.textContent, '1');
+		assert.equal(el.count, 1);
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/propagate-prop-changes/main.svelte b/packages/svelte/tests/runtime-browser/custom-elements-samples/propagate-prop-changes/main.svelte
new file mode 100644
index 0000000000..5aafc8eecf
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/propagate-prop-changes/main.svelte
@@ -0,0 +1,7 @@
+<svelte:options customElement="custom-element" />
+
+<script>
+	export let count = 0;
+</script>
+
+<button onclick={() => count++}>{count}</button>

From d2efca0b046734fa6ac462dd7a25e4e5f9c0a8f0 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sun, 11 Aug 2024 03:46:16 +0100
Subject: [PATCH 089/196] fix: prevent numerous transition/animation memory
 leaks (#12759)

* fix: prevent numerous transition/animation memory leaks

* address feedback

* tweak
---
 .changeset/silly-masks-exist.md                       |  5 +++++
 .../src/internal/client/dom/elements/transitions.js   | 11 ++++++++++-
 playgrounds/demo/index.html                           |  3 ---
 3 files changed, 15 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/silly-masks-exist.md

diff --git a/.changeset/silly-masks-exist.md b/.changeset/silly-masks-exist.md
new file mode 100644
index 0000000000..e1b161719b
--- /dev/null
+++ b/.changeset/silly-masks-exist.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: prevent numerous transition/animation memory leaks
diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js
index 5d0005b2c1..8777ba706b 100644
--- a/packages/svelte/src/internal/client/dom/elements/transitions.js
+++ b/packages/svelte/src/internal/client/dom/elements/transitions.js
@@ -222,6 +222,8 @@ export function transition(flags, element, get_fn, get_params) {
 					1,
 					() => {
 						dispatch_event(element, 'introend');
+						// Ensure we cancel the animation to prevent leaking
+						intro?.abort();
 						intro = current_options = undefined;
 					},
 					is_both
@@ -249,6 +251,8 @@ export function transition(flags, element, get_fn, get_params) {
 					0,
 					() => {
 						dispatch_event(element, 'outroend');
+						// Ensure we cancel the animation to prevent leaking
+						outro?.abort();
 						outro = current_options = undefined;
 						fn?.();
 					},
@@ -322,8 +326,10 @@ function animate(element, options, counterpart, t2, on_finish, on_abort) {
 		// once DOM has been updated...
 		/** @type {Animation} */
 		var a;
+		var aborted = false;
 
 		queue_micro_task(() => {
+			if (aborted) return;
 			var o = options({ direction: is_intro ? 'in' : 'out' });
 			a = animate(element, o, counterpart, t2, on_finish, on_abort);
 		});
@@ -331,7 +337,10 @@ function animate(element, options, counterpart, t2, on_finish, on_abort) {
 		// ...but we want to do so without using `async`/`await` everywhere, so
 		// we return a facade that allows everything to remain synchronous
 		return {
-			abort: () => a.abort(),
+			abort: () => {
+				aborted = true;
+				a?.abort();
+			},
 			deactivate: () => a.deactivate(),
 			reset: () => a.reset(),
 			t: (now) => a.t(now)
diff --git a/playgrounds/demo/index.html b/playgrounds/demo/index.html
index fae74ccb1e..512b5426a9 100644
--- a/playgrounds/demo/index.html
+++ b/playgrounds/demo/index.html
@@ -20,9 +20,6 @@
 			const component = render(App, {
 				target: document.getElementById('root')
 			});
-
-			// @ts-ignore
-			window.unmount = () => unmount(component);
 		</script>
 	</body>
 </html>

From 4aa60597125a7e15a699240907e294afb75ba86e Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 10 Aug 2024 22:47:41 -0400
Subject: [PATCH 090/196] Version Packages (next) (#12795)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 2 ++
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index c99ed9e8b6..f463c02610 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -477,6 +477,7 @@
     "polite-ways-serve",
     "poor-eggs-enjoy",
     "poor-hats-design",
+    "poor-mugs-pay",
     "poor-seahorses-flash",
     "popular-apes-bathe",
     "popular-cameras-tie",
@@ -575,6 +576,7 @@
     "silly-ducks-mix",
     "silly-laws-happen",
     "silly-lies-film",
+    "silly-masks-exist",
     "silly-ways-wash",
     "silver-mice-double",
     "silver-points-approve",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 1b9db51621..74f6505e47 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.215
+
+### Patch Changes
+
+- fix: propagate custom element component prop changes ([#12774](https://github.com/sveltejs/svelte/pull/12774))
+
+- fix: prevent numerous transition/animation memory leaks ([#12759](https://github.com/sveltejs/svelte/pull/12759))
+
 ## 5.0.0-next.214
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index ba166774fa..d15876afdb 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.214",
+  "version": "5.0.0-next.215",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index e9dc0a3a31..ea19843673 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.214';
+export const VERSION = '5.0.0-next.215';
 export const PUBLIC_VERSION = '5';

From 97c0150b00540796713299f52750b6b48616912f Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sun, 11 Aug 2024 11:58:42 +0100
Subject: [PATCH 091/196] fix: improved memory profile for
 transitions/animations (#12796)

* fix: improved memory profile for transitions/animations

* put back the catch
---
 .changeset/thin-papayas-tap.md                            | 5 +++++
 .../src/internal/client/dom/elements/transitions.js       | 8 +++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/thin-papayas-tap.md

diff --git a/.changeset/thin-papayas-tap.md b/.changeset/thin-papayas-tap.md
new file mode 100644
index 0000000000..abdd314005
--- /dev/null
+++ b/.changeset/thin-papayas-tap.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: improved memory profile for transitions/animations
diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js
index 8777ba706b..f747e2f402 100644
--- a/packages/svelte/src/internal/client/dom/elements/transitions.js
+++ b/packages/svelte/src/internal/client/dom/elements/transitions.js
@@ -448,9 +448,15 @@ function animate(element, options, counterpart, t2, on_finish, on_abort) {
 
 	return {
 		abort: () => {
-			animation?.cancel();
+			if (animation) {
+				animation.cancel();
+				// This prevents memory leaks in Chromium
+				animation.effect = null;
+			}
 			task?.abort();
 			on_abort?.();
+			on_finish = undefined;
+			on_abort = undefined;
 		},
 		deactivate: () => {
 			on_finish = undefined;

From 7ae21ea97de84bd42b95cff5b8de77c9ce0830df Mon Sep 17 00:00:00 2001
From: Theodor Steiner <40017636+Theo-Steiner@users.noreply.github.com>
Date: Sun, 11 Aug 2024 20:02:33 +0900
Subject: [PATCH 092/196] feat: make <svelte:option> customElement
 configuration's tag property optional (#12751) (#12754)

* feat: make svelte:option customElement tag property optional (#12751)

* tweak comment

* tweak docs

* tweak some more wording

* Update .changeset/four-kids-flow.md

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 .changeset/four-kids-flow.md                   |  5 +++++
 .../02-template-syntax/09-special-elements.md  |  2 +-
 .../docs/05-misc/04-custom-elements.md         |  2 +-
 .../09-svelte-options/text.md                  |  2 +-
 .../svelte/messages/compile-errors/template.md |  2 +-
 packages/svelte/src/compiler/errors.js         |  4 ++--
 .../compiler/phases/1-parse/read/options.js    |  8 +-------
 .../3-transform/client/transform-client.js     |  5 ++---
 .../svelte/src/compiler/types/template.d.ts    |  2 +-
 .../no-tag-ce-options/_config.js               | 18 ++++++++++++++++++
 .../no-tag-ce-options/main.svelte              |  7 +++++++
 .../samples/tag-non-string/errors.json         |  2 +-
 packages/svelte/types/index.d.ts               |  2 +-
 13 files changed, 42 insertions(+), 19 deletions(-)
 create mode 100644 .changeset/four-kids-flow.md
 create mode 100644 packages/svelte/tests/runtime-browser/custom-elements-samples/no-tag-ce-options/_config.js
 create mode 100644 packages/svelte/tests/runtime-browser/custom-elements-samples/no-tag-ce-options/main.svelte

diff --git a/.changeset/four-kids-flow.md b/.changeset/four-kids-flow.md
new file mode 100644
index 0000000000..894816dfb6
--- /dev/null
+++ b/.changeset/four-kids-flow.md
@@ -0,0 +1,5 @@
+---
+"svelte": minor
+---
+
+feat: make custom element `tag` property optional
diff --git a/documentation/docs/02-template-syntax/09-special-elements.md b/documentation/docs/02-template-syntax/09-special-elements.md
index a46779c1cc..b2f6e1e134 100644
--- a/documentation/docs/02-template-syntax/09-special-elements.md
+++ b/documentation/docs/02-template-syntax/09-special-elements.md
@@ -185,7 +185,7 @@ The `<svelte:options>` element provides a place to specify per-component compile
 - `accessors={true}` — adds getters and setters for the component's props
 - `accessors={false}` — the default
 - `namespace="..."` — the namespace where this component will be used, most commonly "svg"; use the "foreign" namespace to opt out of case-insensitive attribute names and HTML-specific warnings
-- `customElement="..."` — the name to use when compiling this component as a custom element
+- `customElement={...}` — the [options](/docs/custom-elements-api#component-options) to use when compiling this component as a custom element. If a string is passed, it is used as the `tag` option
 
 ```svelte
 <svelte:options customElement="my-custom-element" />
diff --git a/documentation/docs/05-misc/04-custom-elements.md b/documentation/docs/05-misc/04-custom-elements.md
index 46c1bb6f13..5cb3bbfbb1 100644
--- a/documentation/docs/05-misc/04-custom-elements.md
+++ b/documentation/docs/05-misc/04-custom-elements.md
@@ -63,7 +63,7 @@ The inner Svelte component is destroyed in the next tick after the `disconnected
 
 When constructing a custom element, you can tailor several aspects by defining `customElement` as an object within `<svelte:options>` since Svelte 4. This object may contain the following properties:
 
-- `tag`: the mandatory `tag` property for the custom element's name
+- `tag: string`: an optional `tag` property for the custom element's name. If set, a custom element with this tag name will be defined with the document's `customElements` registry upon importing this component.
 - `shadow`: an optional property that can be set to `"none"` to forgo shadow root creation. Note that styles are then no longer encapsulated, and you can't use slots
 - `props`: an optional property to modify certain details and behaviors of your component's properties. It offers the following settings:
   - `attribute: string`: To update a custom element's prop, you have two alternatives: either set the property on the custom element's reference as illustrated above or use an HTML attribute. For the latter, the default attribute name is the lowercase property name. Modify this by assigning `attribute: "<desired name>"`.
diff --git a/documentation/tutorial/16-special-elements/09-svelte-options/text.md b/documentation/tutorial/16-special-elements/09-svelte-options/text.md
index 4c78d4d13e..2049365efc 100644
--- a/documentation/tutorial/16-special-elements/09-svelte-options/text.md
+++ b/documentation/tutorial/16-special-elements/09-svelte-options/text.md
@@ -25,6 +25,6 @@ The options that can be set here are:
 - `accessors={true}` — adds getters and setters for the component's props
 - `accessors={false}` — the default
 - `namespace="..."` — the namespace where this component will be used, most commonly `"svg"`
-- `customElement="..."` — the name to use when compiling this component as a custom element
+- `customElement={...}` — the [options](/docs/custom-elements-api#component-options) to use when compiling this component as a custom element. If a string is passed, it is used as the `tag` option
 
 Consult the [API reference](/docs) for more information on these options.
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
index 7920329c8b..affd44e943 100644
--- a/packages/svelte/messages/compile-errors/template.md
+++ b/packages/svelte/messages/compile-errors/template.md
@@ -328,7 +328,7 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 
 ## svelte_options_invalid_customelement
 
-> "customElement" must be a string literal defining a valid custom element name or an object of the form { tag: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
+> "customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
 
 ## svelte_options_invalid_customelement_props
 
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 958c86a817..8b650ebf3c 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -1285,12 +1285,12 @@ export function svelte_options_invalid_attribute_value(node, list) {
 }
 
 /**
- * "customElement" must be a string literal defining a valid custom element name or an object of the form { tag: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
+ * "customElement" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: "open" | "none"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function svelte_options_invalid_customelement(node) {
-	e(node, "svelte_options_invalid_customelement", "\"customElement\" must be a string literal defining a valid custom element name or an object of the form { tag: string; shadow?: \"open\" | \"none\"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }");
+	e(node, "svelte_options_invalid_customelement", "\"customElement\" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: \"open\" | \"none\"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }");
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/options.js b/packages/svelte/src/compiler/phases/1-parse/read/options.js
index 7c83946336..a8ba7e216c 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/options.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/options.js
@@ -40,7 +40,7 @@ export default function read_options(node) {
 			}
 			case 'customElement': {
 				/** @type {SvelteOptions['customElement']} */
-				const ce = { tag: '' };
+				const ce = {};
 				const { value: v } = attribute;
 				const value = v === true || Array.isArray(v) ? v : [v];
 
@@ -79,8 +79,6 @@ export default function read_options(node) {
 					const tag_value = tag[1]?.value;
 					validate_tag(tag, tag_value);
 					ce.tag = tag_value;
-				} else {
-					e.svelte_options_invalid_customelement(attribute);
 				}
 
 				const props = properties.find(([name]) => name === 'props')?.[1];
@@ -251,8 +249,4 @@ function validate_tag(attribute, tag) {
 	if (tag && !regex_valid_tag_name.test(tag)) {
 		e.svelte_options_invalid_tagname(attribute);
 	}
-	// TODO do we still need this?
-	// if (tag && !component.compile_options.customElement) {
-	// 	component.warn(attribute, compiler_warnings.missing_custom_element_compile_options);
-	// }
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index c4af60f24b..15c0de5df8 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -611,9 +611,8 @@ export function client_component(analysis, options) {
 			/** @type {any} */ (typeof ce !== 'boolean' ? ce.extend : undefined)
 		);
 
-		// If customElement option is set, we define the custom element directly. Else we still create
-		// the custom element class so that the user may instantiate a custom element themselves later.
-		if (typeof ce !== 'boolean') {
+		// If a tag name is provided, call `customElements.define`, otherwise leave to the user
+		if (typeof ce !== 'boolean' && typeof ce.tag === 'string') {
 			body.push(b.stmt(b.call('customElements.define', b.literal(ce.tag), create_ce)));
 		} else {
 			body.push(b.stmt(create_ce));
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 20fdb25ee4..7f2e808ade 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -78,7 +78,7 @@ export interface SvelteOptions {
 	namespace?: Namespace;
 	css?: 'injected';
 	customElement?: {
-		tag: string;
+		tag?: string;
 		shadow?: 'open' | 'none';
 		props?: Record<
 			string,
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/no-tag-ce-options/_config.js b/packages/svelte/tests/runtime-browser/custom-elements-samples/no-tag-ce-options/_config.js
new file mode 100644
index 0000000000..050ae77520
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/no-tag-ce-options/_config.js
@@ -0,0 +1,18 @@
+import { test } from '../../assert';
+const tick = () => Promise.resolve();
+
+export default test({
+	warnings: [],
+	async test({ assert, target, componentCtor }) {
+		customElements.define('no-tag', componentCtor.element);
+		target.innerHTML = '<no-tag name="world"></no-tag>';
+		await tick();
+
+		/** @type {any} */
+		const el = target.querySelector('no-tag');
+		const h1 = el.querySelector('h1');
+
+		assert.equal(el.shadowRoot, null);
+		assert.equal(h1.textContent, 'Hello world!');
+	}
+});
diff --git a/packages/svelte/tests/runtime-browser/custom-elements-samples/no-tag-ce-options/main.svelte b/packages/svelte/tests/runtime-browser/custom-elements-samples/no-tag-ce-options/main.svelte
new file mode 100644
index 0000000000..054efab1dc
--- /dev/null
+++ b/packages/svelte/tests/runtime-browser/custom-elements-samples/no-tag-ce-options/main.svelte
@@ -0,0 +1,7 @@
+<svelte:options customElement={{ shadow: "none" }} />
+
+<script>
+	export let name;
+</script>
+
+<h1>Hello {name}!</h1>
diff --git a/packages/svelte/tests/validator/samples/tag-non-string/errors.json b/packages/svelte/tests/validator/samples/tag-non-string/errors.json
index b74358966c..71f8df4d00 100644
--- a/packages/svelte/tests/validator/samples/tag-non-string/errors.json
+++ b/packages/svelte/tests/validator/samples/tag-non-string/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "svelte_options_invalid_customelement",
-		"message": "\"customElement\" must be a string literal defining a valid custom element name or an object of the form { tag: string; shadow?: \"open\" | \"none\"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }",
+		"message": "\"customElement\" must be a string literal defining a valid custom element name or an object of the form { tag?: string; shadow?: \"open\" | \"none\"; props?: { [key: string]: { attribute?: string; reflect?: boolean; type: .. } } }",
 		"start": {
 			"line": 1,
 			"column": 16
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index df012254f6..4307b5c267 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1533,7 +1533,7 @@ declare module 'svelte/compiler' {
 		namespace?: Namespace;
 		css?: 'injected';
 		customElement?: {
-			tag: string;
+			tag?: string;
 			shadow?: 'open' | 'none';
 			props?: Record<
 				string,

From 09db33979d17d176c6b48370e8006e293d577074 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 11 Aug 2024 07:45:07 -0400
Subject: [PATCH 093/196] Version Packages (next) (#12797)

* Version Packages (next)

* Update CHANGELOG.md

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/pre.json            | 2 ++
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index f463c02610..172a6e9d68 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -205,6 +205,7 @@
     "forty-suns-smile",
     "four-balloons-beam",
     "four-flies-hammer",
+    "four-kids-flow",
     "four-mice-hammer",
     "four-papayas-turn",
     "four-peas-tickle",
@@ -703,6 +704,7 @@
     "thick-swans-type",
     "thin-colts-yawn",
     "thin-foxes-lick",
+    "thin-papayas-tap",
     "thin-spoons-float",
     "thin-years-rhyme",
     "thirty-dogs-whisper",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 74f6505e47..7b1ab89d31 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.216
+
+### Patch Changes
+
+- feat: make custom element `tag` property optional ([#12754](https://github.com/sveltejs/svelte/pull/12754))
+
+- fix: improved memory profile for transitions/animations ([#12796](https://github.com/sveltejs/svelte/pull/12796))
+
 ## 5.0.0-next.215
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index d15876afdb..884145f783 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.215",
+  "version": "5.0.0-next.216",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index ea19843673..af0b9af8a7 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.215';
+export const VERSION = '5.0.0-next.216';
 export const PUBLIC_VERSION = '5';

From 5094cb9e89f9dfc93c4e8ca2084ae5aaf8d270c4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 12 Aug 2024 06:45:30 -0400
Subject: [PATCH 094/196] feat: treat tag with `.` as a component, even if
 lowercase (#12798)

* feat: treat tag with `.` as a component, even if lowercase

* changeset

* consistency

* note breaking change

* oops, wrong place
---
 .changeset/gold-students-jump.md                       |  5 +++++
 .../src/compiler/phases/1-parse/state/element.js       |  4 ++--
 .../samples/dot-notation-component/_config.js          |  5 +++++
 .../samples/dot-notation-component/child.svelte        |  1 +
 .../samples/dot-notation-component/main.svelte         |  7 +++++++
 .../docs/content/03-appendix/02-breaking-changes.md    | 10 ++++++++++
 6 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/gold-students-jump.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dot-notation-component/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dot-notation-component/child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/dot-notation-component/main.svelte

diff --git a/.changeset/gold-students-jump.md b/.changeset/gold-students-jump.md
new file mode 100644
index 0000000000..d38393554a
--- /dev/null
+++ b/.changeset/gold-students-jump.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: treat tag with `.` as a component, even if lowercase
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index bdadf41347..12e75400be 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -74,7 +74,7 @@ function parent_is_shadowroot_template(stack) {
 
 const regex_closing_textarea_tag = /^<\/textarea(\s[^>]*)?>/i;
 const regex_closing_comment = /-->/;
-const regex_capital_letter = /[A-Z]/;
+const regex_component_name = /^(?:[A-Z]|[A-Za-z][A-Za-z0-9_$]*\.)/;
 
 /** @param {Parser} parser */
 export default function element(parser) {
@@ -127,7 +127,7 @@ export default function element(parser) {
 
 	const type = meta_tags.has(name)
 		? meta_tags.get(name)
-		: regex_capital_letter.test(name[0])
+		: regex_component_name.test(name)
 			? 'Component'
 			: name === 'title' && parent_is_head(parser.stack)
 				? 'TitleElement'
diff --git a/packages/svelte/tests/runtime-runes/samples/dot-notation-component/_config.js b/packages/svelte/tests/runtime-runes/samples/dot-notation-component/_config.js
new file mode 100644
index 0000000000..3b44dd63ca
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dot-notation-component/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<h1>hello</h1>'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/dot-notation-component/child.svelte b/packages/svelte/tests/runtime-runes/samples/dot-notation-component/child.svelte
new file mode 100644
index 0000000000..6e7c1e6ac8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dot-notation-component/child.svelte
@@ -0,0 +1 @@
+<h1>hello</h1>
diff --git a/packages/svelte/tests/runtime-runes/samples/dot-notation-component/main.svelte b/packages/svelte/tests/runtime-runes/samples/dot-notation-component/main.svelte
new file mode 100644
index 0000000000..12e9d22b36
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/dot-notation-component/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import child from './child.svelte';
+
+	const components = { child };
+</script>
+
+<components.child />
diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
index 95469ccbaf..7b589785d7 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
@@ -161,6 +161,16 @@ Svelte now use Mutation Observers instead of IFrames to measure dimensions for `
 
 Content inside component tags becomes a [snippet prop](/docs/snippets) called `children`. You cannot have a separate prop by that name.
 
+## Dot notation indicates a component
+
+In Svelte 4, `<foo.bar>` would create an element with a tag name of `"foo.bar"`. In Svelte 5, `foo.bar` is treated as a component instead. This is particularly useful inside `each` blocks:
+
+```svelte
+{#each items as item}
+	<item.component {...item.props} />
+{/each}
+```
+
 ## Breaking changes in runes mode
 
 Some breaking changes only apply once your component is in runes mode.

From 9a67ab15dac11ae8273cc6213d4684b62e560837 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 12 Aug 2024 08:56:11 -0400
Subject: [PATCH 095/196] docs: fix section on browser requirements (#12804)

* docs: fix section on browser requirements

* link
---
 .../docs/content/03-appendix/02-breaking-changes.md    | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
index 7b589785d7..47b18ee3d9 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
@@ -144,9 +144,15 @@ Previously, Svelte employed a very complicated algorithm to determine if whitesp
 
 As before, you can disable whitespace trimming by setting the `preserveWhitespace` option in your compiler settings or on a per-component basis in `<svelte:options>`.
 
-## More recent browser required
+## Modern browser required
 
-Svelte now use Mutation Observers instead of IFrames to measure dimensions for `bind:clientWidth/clientHeight/offsetWidth/offsetHeight`. It also no longer listens to the `change` event on range inputs. Lastly, the `legacy` option was removed (or rather, replaced with a different set of settings).
+Svelte 5 requires a modern browser (in other words, not Internet Explorer) for various reasons:
+
+- it uses [`Proxies`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy)
+- elements with `clientWidth`/`clientHeight`/`offsetWidth`/`offsetHeight` bindings use a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) rather than a convoluted `<iframe>` hack
+- `<input type="range" bind:value={...} />` only uses an `input` event listener, rather than also listening for `change` events as a fallback
+
+The `legacy` compiler option, which generated bulkier but IE-friendly code, no longer exists.
 
 ## Changes to compiler options
 

From cbcd7617c44159560d4235313a6ae60fb5a466ca Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Mon, 12 Aug 2024 15:03:41 +0200
Subject: [PATCH 096/196] feat: deprecate `svelte:component` (#12694)

* feat: deprecate `svelte:component`

Co-authored-by: Oscar Dominguez <dominguez.celada@gmail.com>

* move logic into the visitor

* tweak docs

---------

Co-authored-by: Oscar Dominguez <dominguez.celada@gmail.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/big-apes-smell.md                       |  5 +++++
 .../svelte/messages/compile-warnings/template.md   |  8 ++++++++
 .../phases/2-analyze/visitors/SvelteComponent.js   |  5 +++++
 packages/svelte/src/compiler/warnings.js           |  9 +++++++++
 .../samples/attribute-quoted/warnings.json         | 12 ++++++++++++
 .../svelte-component-deprecated/input.svelte       |  7 +++++++
 .../svelte-component-deprecated/warnings.json      | 14 ++++++++++++++
 7 files changed, 60 insertions(+)
 create mode 100644 .changeset/big-apes-smell.md
 create mode 100644 packages/svelte/tests/validator/samples/svelte-component-deprecated/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/svelte-component-deprecated/warnings.json

diff --git a/.changeset/big-apes-smell.md b/.changeset/big-apes-smell.md
new file mode 100644
index 0000000000..1612e5e601
--- /dev/null
+++ b/.changeset/big-apes-smell.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: deprecate `svelte:component`
diff --git a/packages/svelte/messages/compile-warnings/template.md b/packages/svelte/messages/compile-warnings/template.md
index 58a251c729..19fd8979fd 100644
--- a/packages/svelte/messages/compile-warnings/template.md
+++ b/packages/svelte/messages/compile-warnings/template.md
@@ -54,6 +54,14 @@ This code will work when the component is rendered on the client (which is why t
 
 > Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
 
+## svelte_component_deprecated
+
+> `<svelte:component>` is deprecated in runes mode — components are dynamic by default
+
+In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `<X>` to re-render when `X` changed, you would either have to use `<svelte:component this={X}>` or put the component inside a `{#key X}...{/key}` block.
+
+In Svelte 5 this is no longer true — if `X` changes, `<X>` re-renders. For more complex expressions like `condition ? Y : Z` you can use a derived value instead.
+
 ## svelte_element_invalid_this
 
 > `this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js
index 97f78e9d85..99cfda4a3e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteComponent.js
@@ -1,5 +1,6 @@
 /** @import { SvelteComponent } from '#compiler' */
 /** @import { Context } from '../types' */
+import * as w from '../../../warnings.js';
 import { visit_component } from './shared/component.js';
 
 /**
@@ -7,5 +8,9 @@ import { visit_component } from './shared/component.js';
  * @param {Context} context
  */
 export function SvelteComponent(node, context) {
+	if (context.state.analysis.runes) {
+		w.svelte_component_deprecated(node);
+	}
+
 	visit_component(node, context);
 }
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
index facd53cdec..9a2628068b 100644
--- a/packages/svelte/src/compiler/warnings.js
+++ b/packages/svelte/src/compiler/warnings.js
@@ -117,6 +117,7 @@ export const codes = [
 	"event_directive_deprecated",
 	"node_invalid_placement_ssr",
 	"slot_element_deprecated",
+	"svelte_component_deprecated",
 	"svelte_element_invalid_this"
 ];
 
@@ -767,6 +768,14 @@ export function slot_element_deprecated(node) {
 	w(node, "slot_element_deprecated", "Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead");
 }
 
+/**
+ * `<svelte:component>` is deprecated in runes mode — components are dynamic by default
+ * @param {null | NodeLike} node
+ */
+export function svelte_component_deprecated(node) {
+	w(node, "svelte_component_deprecated", "`<svelte:component>` is deprecated in runes mode — components are dynamic by default");
+}
+
 /**
  * `this` should be an `{expression}`. Using a string attribute value will cause an error in future versions of Svelte
  * @param {null | NodeLike} node
diff --git a/packages/svelte/tests/validator/samples/attribute-quoted/warnings.json b/packages/svelte/tests/validator/samples/attribute-quoted/warnings.json
index 3411a14cbe..d324e9f60f 100644
--- a/packages/svelte/tests/validator/samples/attribute-quoted/warnings.json
+++ b/packages/svelte/tests/validator/samples/attribute-quoted/warnings.json
@@ -11,6 +11,18 @@
 			"line": 13
 		}
 	},
+	{
+		"code": "svelte_component_deprecated",
+		"end": {
+			"column": 45,
+			"line": 15
+		},
+		"message": "`<svelte:component>` is deprecated in runes mode — components are dynamic by default",
+		"start": {
+			"column": 0,
+			"line": 15
+		}
+	},
 	{
 		"code": "attribute_quoted",
 		"message": "Quoted attributes on components and custom elements will be stringified in a future version of Svelte. If this isn't what you want, remove the quotes",
diff --git a/packages/svelte/tests/validator/samples/svelte-component-deprecated/input.svelte b/packages/svelte/tests/validator/samples/svelte-component-deprecated/input.svelte
new file mode 100644
index 0000000000..f570c71f90
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/svelte-component-deprecated/input.svelte
@@ -0,0 +1,7 @@
+<svelte:options runes />
+
+<script>
+	import A from './A.svelte';
+</script>
+
+<svelte:component this={A} />
diff --git a/packages/svelte/tests/validator/samples/svelte-component-deprecated/warnings.json b/packages/svelte/tests/validator/samples/svelte-component-deprecated/warnings.json
new file mode 100644
index 0000000000..66490b0654
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/svelte-component-deprecated/warnings.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "svelte_component_deprecated",
+		"message": "`<svelte:component>` is deprecated in runes mode — components are dynamic by default",
+		"start": {
+			"line": 7,
+			"column": 0
+		},
+		"end": {
+			"line": 7,
+			"column": 29
+		}
+	}
+]

From a5d349ebe5738534eb674b6f500d59acde52b0d2 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 12 Aug 2024 09:16:32 -0400
Subject: [PATCH 097/196] feat: compiler-driven each block reactivity (#12744)

* WIP

* note to self

* WIP

* fix

* fix

* delete unwrap and is_signal

* simplify

* remove some junk

* regenerate

* reinstate key-is-item optimisation
---
 .../phases/2-analyze/visitors/EachBlock.js    |  1 +
 .../phases/2-analyze/visitors/Identifier.js   |  4 +-
 .../phases/3-transform/client/utils.js        | 14 -----
 .../3-transform/client/visitors/EachBlock.js  | 56 +++++++++----------
 .../client/visitors/shared/function.js        |  8 +--
 packages/svelte/src/compiler/phases/scope.js  |  2 +
 .../svelte/src/compiler/types/template.d.ts   |  1 +
 .../src/internal/client/dom/blocks/each.js    |  5 --
 packages/svelte/src/internal/client/index.js  |  1 -
 .../svelte/src/internal/client/runtime.js     | 25 ---------
 .../_expected/client/index.svelte.js          |  4 +-
 packages/svelte/types/index.d.ts              |  1 +
 12 files changed, 39 insertions(+), 83 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
index ebf20d5aa6..5855a18f7a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
@@ -29,6 +29,7 @@ export function EachBlock(node, context) {
 	// evaluate expression in parent scope
 	context.visit(node.expression, {
 		...context.state,
+		expression: node.metadata.expression,
 		scope: /** @type {Scope} */ (context.state.scope.parent)
 	});
 
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 2e4595ec08..8de4a419a7 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -115,10 +115,10 @@ export function Identifier(node, context) {
 		}
 	}
 
-	if (binding && binding.kind !== 'normal') {
+	if (binding) {
 		if (context.state.expression) {
 			context.state.expression.dependencies.add(binding);
-			context.state.expression.has_state = true;
+			context.state.expression.has_state ||= binding.kind !== 'normal';
 		}
 
 		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 d5e6420d5d..786cdc2761 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -269,20 +269,6 @@ export function should_proxy_or_freeze(node, scope) {
 	return true;
 }
 
-/**
- * Port over the location information from the source to the target identifier.
- * but keep the target as-is (i.e. a new id is created).
- * This ensures esrap can generate accurate source maps.
- * @param {Identifier} target
- * @param {Identifier} source
- */
-export function with_loc(target, source) {
-	if (source.loc) {
-		return { ...target, loc: source.loc };
-	}
-	return target;
-}
-
 /**
  * @param {Pattern} node
  * @param {import('zimmerframe').Context<SvelteNode, ComponentClientTransformState>} context
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
index fa19509c06..173b2edf13 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
@@ -13,7 +13,7 @@ import {
 import { dev } from '../../../../state.js';
 import { extract_paths, object } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
-import { build_getter, with_loc } from '../utils.js';
+import { build_getter } from '../utils.js';
 import { get_value } from './shared/declarations.js';
 
 /**
@@ -48,18 +48,26 @@ export function EachBlock(node, context) {
 		if (node.index) {
 			flags |= EACH_INDEX_REACTIVE;
 		}
+	}
 
-		// In runes mode, if key === item, we don't need to wrap the item in a source
-		const key_is_item =
-			/** @type {Expression} */ (node.key).type === 'Identifier' &&
-			node.context.type === 'Identifier' &&
-			node.context.name === node.key.name;
+	const key_is_item =
+		node.key?.type === 'Identifier' &&
+		node.context.type === 'Identifier' &&
+		node.context.name === node.key.name;
+
+	for (const binding of node.metadata.expression.dependencies) {
+		// if the expression doesn't reference any external state, we don't need to
+		// create a source for the item. TODO cover more cases (e.g. `x.filter(y)`
+		// should also qualify if `y` doesn't reference state, and non-state
+		// bindings should also be fine
+		if (binding.scope.function_depth >= context.state.scope.function_depth) {
+			continue;
+		}
 
-		if (!context.state.analysis.runes || !key_is_item) {
+		if (!context.state.analysis.runes || !key_is_item || binding.kind === 'store_sub') {
 			flags |= EACH_ITEM_REACTIVE;
+			break;
 		}
-	} else {
-		flags |= EACH_ITEM_REACTIVE;
 	}
 
 	// Since `animate:` can only appear on elements that are the sole child of a keyed each block,
@@ -134,21 +142,13 @@ export function EachBlock(node, context) {
 	const index =
 		each_node_meta.contains_group_binding || !node.index ? each_node_meta.index : b.id(node.index);
 	const item = each_node_meta.item;
-	const binding = /** @type {Binding} */ (context.state.scope.get(item.name));
-	const getter = (/** @type {Identifier} */ id) => {
-		const item_with_loc = with_loc(item, id);
-		return b.call('$.unwrap', item_with_loc);
-	};
 
 	if (node.index) {
-		child_state.transform[node.index] = {
-			read: (id) => {
-				const index_with_loc = with_loc(index, id);
-				return (flags & EACH_INDEX_REACTIVE) === 0
-					? index_with_loc
-					: b.call('$.get', index_with_loc);
-			}
-		};
+		if ((flags & EACH_INDEX_REACTIVE) !== 0) {
+			child_state.transform[node.index] = { read: get_value };
+		} else {
+			delete child_state.transform[node.index];
+		}
 
 		delete key_state.transform[node.index];
 	}
@@ -172,7 +172,7 @@ export function EachBlock(node, context) {
 
 	if (node.context.type === 'Identifier') {
 		child_state.transform[node.context.name] = {
-			read: getter,
+			read: (flags & EACH_ITEM_REACTIVE) !== 0 ? get_value : (node) => node,
 			assign: (_, value) => {
 				const left = b.member(
 					each_node_meta.array_name ? b.call(each_node_meta.array_name) : collection,
@@ -187,12 +187,12 @@ export function EachBlock(node, context) {
 
 		delete key_state.transform[node.context.name];
 	} else {
-		const unwrapped = getter(binding.node);
-		const paths = extract_paths(node.context);
+		const unwrapped = (flags & EACH_ITEM_REACTIVE) !== 0 ? b.call('$.get', item) : item;
 
-		for (const path of paths) {
+		for (const path of extract_paths(node.context)) {
 			const name = /** @type {Identifier} */ (path.node).name;
 			const needs_derived = path.has_default_value; // to ensure that default value is only called once
+
 			const fn = b.thunk(
 				/** @type {Expression} */ (context.visit(path.expression?.(unwrapped), child_state))
 			);
@@ -203,11 +203,11 @@ export function EachBlock(node, context) {
 
 			child_state.transform[name] = {
 				read,
-				assign: (node, value) => {
+				assign: (_, value) => {
 					const left = /** @type {Pattern} */ (path.update_expression(unwrapped));
 					return b.sequence([b.assignment('=', left, value), ...sequence]);
 				},
-				mutate: (node, mutation) => {
+				mutate: (_, mutation) => {
 					return b.sequence([mutation, ...sequence]);
 				}
 			};
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
index e66cdcb091..a0e9d0bf5e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/function.js
@@ -9,15 +9,11 @@ import { build_hoisted_params } from '../../utils.js';
 export const visit_function = (node, context) => {
 	const metadata = node.metadata;
 
-	let state = context.state;
+	let state = { ...context.state, in_constructor: false };
 
 	if (node.type === 'FunctionExpression') {
 		const parent = /** @type {Node} */ (context.path.at(-1));
-		const in_constructor = parent.type === 'MethodDefinition' && parent.kind === 'constructor';
-
-		state = { ...context.state, in_constructor };
-	} else {
-		state = { ...context.state, in_constructor: false };
+		state.in_constructor = parent.type === 'MethodDefinition' && parent.kind === 'constructor';
 	}
 
 	if (metadata?.hoisted === true) {
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 633f326080..f9382a21b6 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -3,6 +3,7 @@
 /** @import { AnimateDirective, Binding, Component, DeclarationKind, EachBlock, ElementLike, LetDirective, SvelteComponent, SvelteNode, SvelteSelf, TransitionDirective, UseDirective } from '#compiler' */
 import is_reference from 'is-reference';
 import { walk } from 'zimmerframe';
+import { create_expression_metadata } from './nodes.js';
 import * as b from '../utils/builders.js';
 import * as e from '../errors.js';
 import {
@@ -574,6 +575,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 			}
 
 			node.metadata = {
+				expression: create_expression_metadata(),
 				keyed: false,
 				contains_group_binding: false,
 				array_name: needs_array_deduplication ? state.scope.root.unique('$$array') : null,
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 7f2e808ade..5b4d31da04 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -396,6 +396,7 @@ export interface EachBlock extends BaseNode {
 	index?: string;
 	key?: Expression;
 	metadata: {
+		expression: ExpressionMetadata;
 		keyed: boolean;
 		contains_group_binding: boolean;
 		/** Set if something in the array expression is shadowed within the each block */
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index f76048637a..669232fca2 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -149,11 +149,6 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 			!(STATE_SYMBOL in array)
 		) {
 			flags ^= EACH_IS_STRICT_EQUALS;
-
-			// Additionally if we're in an keyed each block, we'll need ensure the items are all wrapped in signals.
-			if ((flags & EACH_KEYED) !== 0 && (flags & EACH_ITEM_REACTIVE) === 0) {
-				flags ^= EACH_ITEM_REACTIVE;
-			}
 		}
 
 		/** `true` if there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index dc51d3caae..b1dfebbec5 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -137,7 +137,6 @@ export {
 	exclude_from_object,
 	pop,
 	push,
-	unwrap,
 	deep_read,
 	deep_read_state,
 	getAllContexts,
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 8939244cf8..89c607cb72 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -845,17 +845,6 @@ export function set_signal_status(signal, status) {
 	signal.f = (signal.f & STATUS_MASK) | status;
 }
 
-/**
- * @template V
- * @param {V | Value<V>} val
- * @returns {val is Value<V>}
- */
-export function is_signal(val) {
-	return (
-		typeof val === 'object' && val !== null && typeof (/** @type {Value<V>} */ (val).f) === 'number'
-	);
-}
-
 /**
  * Retrieves the context that belongs to the closest parent component with the specified `key`.
  * Must be called during component initialisation.
@@ -1139,20 +1128,6 @@ export function deep_read(value, visited = new Set()) {
 	}
 }
 
-/**
- * @template V
- * @param {V | Value<V>} value
- * @returns {V}
- */
-export function unwrap(value) {
-	if (is_signal(value)) {
-		// @ts-ignore
-		return get(value);
-	}
-	// @ts-ignore
-	return value;
-}
-
 if (DEV) {
 	/**
 	 * @param {string} rune
diff --git a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
index c63bbfe561..93cf459e40 100644
--- a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
@@ -5,10 +5,10 @@ export default function Each_string_template($$anchor) {
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 
-	$.each(node, 1, () => ['foo', 'bar', 'baz'], $.index, ($$anchor, thing, $$index) => {
+	$.each(node, 0, () => ['foo', 'bar', 'baz'], $.index, ($$anchor, thing, $$index) => {
 		var text = $.text();
 
-		$.template_effect(() => $.set_text(text, `${$.unwrap(thing) ?? ""}, `));
+		$.template_effect(() => $.set_text(text, `${thing ?? ""}, `));
 		$.append($$anchor, text);
 	});
 
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 4307b5c267..ed61515c5a 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1851,6 +1851,7 @@ declare module 'svelte/compiler' {
 		index?: string;
 		key?: Expression;
 		metadata: {
+			expression: ExpressionMetadata;
 			keyed: boolean;
 			contains_group_binding: boolean;
 			/** Set if something in the array expression is shadowed within the each block */

From b462c8d2e951f73a7eea454c8a492afa10c244d0 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 12 Aug 2024 09:23:18 -0400
Subject: [PATCH 098/196] Version Packages (next) (#12805)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 2 ++
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 172a6e9d68..8f6cfa1cf5 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -24,6 +24,7 @@
     "beige-mirrors-listen",
     "beige-rabbits-shave",
     "beige-seas-share",
+    "big-apes-smell",
     "big-cars-serve",
     "big-eggs-flash",
     "big-eyes-carry",
@@ -241,6 +242,7 @@
     "giant-planets-shake",
     "giant-plants-grin",
     "giant-roses-press",
+    "gold-students-jump",
     "gold-tools-nail",
     "good-buses-reply",
     "good-cars-visit",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 7b1ab89d31..a92664a053 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.217
+
+### Patch Changes
+
+- feat: deprecate `svelte:component` ([#12694](https://github.com/sveltejs/svelte/pull/12694))
+
+- feat: treat tag with `.` as a component, even if lowercase ([#12798](https://github.com/sveltejs/svelte/pull/12798))
+
 ## 5.0.0-next.216
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 884145f783..352205a839 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.216",
+  "version": "5.0.0-next.217",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index af0b9af8a7..bd928eb2c9 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.216';
+export const VERSION = '5.0.0-next.217';
 export const PUBLIC_VERSION = '5';

From 34ad016a7702163dcf9dfbe338bb43a32a2c34ce Mon Sep 17 00:00:00 2001
From: Ignatius Bagus <ignatius.mbs@gmail.com>
Date: Mon, 12 Aug 2024 22:23:22 +0700
Subject: [PATCH 099/196] chore: configure provenance env var (#12809)

---
 .github/workflows/release.yml | 1 +
 packages/svelte/package.json  | 3 ---
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index e474e60e2b..f07177f24f 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -43,4 +43,5 @@ jobs:
           publish: pnpm changeset:publish
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_CONFIG_PROVENANCE: true
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 352205a839..6861bcdc61 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -154,8 +154,5 @@
     "project": [
       "src/**"
     ]
-  },
-  "publishConfig": {
-    "provenance": true
   }
 }

From fa5d3a9002106c9abc15f25dfafef1e24ca4ae7a Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Mon, 12 Aug 2024 16:26:32 +0100
Subject: [PATCH 100/196] fix: ensure inspect effects are skipped from effect
 parent logic (#12810)

---
 .changeset/stupid-cars-behave.md                   |  5 +++++
 .../src/internal/client/reactivity/effects.js      | 14 +++++++++++---
 .../samples/inspect-nested-effect/_config.js       | 11 +++++++++++
 .../samples/inspect-nested-effect/main.svelte      | 12 ++++++++++++
 4 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/stupid-cars-behave.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-nested-effect/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/inspect-nested-effect/main.svelte

diff --git a/.changeset/stupid-cars-behave.md b/.changeset/stupid-cars-behave.md
new file mode 100644
index 0000000000..9612cb3a86
--- /dev/null
+++ b/.changeset/stupid-cars-behave.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure inspect effects are skipped from effect parent logic
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 9fd238c866..d05243bb14 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -81,6 +81,14 @@ export function push_effect(effect, parent_effect) {
  */
 function create_effect(type, fn, sync, push = true) {
 	var is_root = (type & ROOT_EFFECT) !== 0;
+	var parent_effect = current_effect;
+
+	if (DEV) {
+		// Ensure the parent is never an inspect effect
+		while (parent_effect !== null && (parent_effect.f & INSPECT_EFFECT) !== 0) {
+			parent_effect = parent_effect.parent;
+		}
+	}
 
 	/** @type {Effect} */
 	var effect = {
@@ -92,7 +100,7 @@ function create_effect(type, fn, sync, push = true) {
 		fn,
 		last: null,
 		next: null,
-		parent: is_root ? null : current_effect,
+		parent: is_root ? null : parent_effect,
 		prev: null,
 		teardown: null,
 		transitions: null,
@@ -130,8 +138,8 @@ function create_effect(type, fn, sync, push = true) {
 		effect.teardown === null;
 
 	if (!inert && !is_root && push) {
-		if (current_effect !== null) {
-			push_effect(effect, current_effect);
+		if (parent_effect !== null) {
+			push_effect(effect, parent_effect);
 		}
 
 		// if we're in a derived, add the effect there too
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-nested-effect/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-nested-effect/_config.js
new file mode 100644
index 0000000000..82429e5e36
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-nested-effect/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, logs }) {
+		assert.deepEqual(logs, ['init', 0, 'update', 1]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-nested-effect/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-nested-effect/main.svelte
new file mode 100644
index 0000000000..3693e4f6d5
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-nested-effect/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let a = $state(0);
+	let b = $derived.by(() => {
+		$effect(() => {
+			a = 1;
+		})
+		return a;
+	})
+
+	$inspect(b);
+</script>
+

From 7cbd188f801aff718111172d272156c1e8b5e3be Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 12 Aug 2024 12:27:10 -0400
Subject: [PATCH 101/196] breaking: replace `$state.frozen` with `$state.raw`
 (#12808)

* breaking: replace `$state.frozen` with `$state.raw`

* regenerate

* rename

* rename

* rename

* rename

* rename

* rename

* rename

* rename

* rename

* typo

* add compiler error for existing `$state.frozen` uses

* regenerate

* rename

* tidy up

* move proxy logic into props function
---
 .changeset/four-yaks-boil.md                  |  5 +++
 .../svelte/messages/client-errors/errors.md   |  4 --
 packages/svelte/src/ambient.d.ts              |  9 +++--
 .../2-analyze/visitors/BindDirective.js       |  2 +-
 .../2-analyze/visitors/CallExpression.js      |  2 +-
 .../visitors/ExportNamedDeclaration.js        |  2 +-
 .../2-analyze/visitors/ExportSpecifier.js     |  4 +-
 .../phases/2-analyze/visitors/Identifier.js   | 10 +++--
 .../2-analyze/visitors/VariableDeclarator.js  |  6 +--
 .../phases/2-analyze/visitors/shared/utils.js |  2 +-
 .../3-transform/client/transform-client.js    | 16 ++------
 .../phases/3-transform/client/types.d.ts      |  2 +-
 .../phases/3-transform/client/utils.js        | 13 ++++--
 .../client/visitors/AssignmentExpression.js   | 22 +++++-----
 .../3-transform/client/visitors/ClassBody.js  | 28 +++++--------
 .../3-transform/client/visitors/EachBlock.js  | 23 ++++++++---
 .../client/visitors/VariableDeclaration.js    | 17 +++-----
 .../client/visitors/shared/declarations.js    |  4 +-
 .../server/visitors/PropertyDefinition.js     |  2 +-
 packages/svelte/src/compiler/types/index.d.ts |  2 +-
 packages/svelte/src/constants.js              |  5 ++-
 .../svelte/src/internal/client/constants.js   |  1 -
 .../src/internal/client/dom/blocks/each.js    | 19 ++-------
 packages/svelte/src/internal/client/errors.js | 16 --------
 packages/svelte/src/internal/client/freeze.js | 40 -------------------
 .../svelte/src/internal/client/freeze.test.ts | 16 --------
 packages/svelte/src/internal/client/index.js  |  1 -
 packages/svelte/src/internal/client/proxy.js  |  9 +----
 .../src/internal/client/reactivity/props.js   |  5 ++-
 packages/svelte/src/utils.js                  |  2 +-
 .../ComponentA.svelte                         |  0
 .../ComponentB.svelte                         |  0
 .../_config.js                                |  0
 .../main.svelte                               |  2 +-
 .../binding-property-static/_config.js        |  4 +-
 .../binding-property-static/main.svelte       |  6 +--
 .../class-frozen-state-object/main.svelte     | 14 -------
 .../_config.js                                |  4 +-
 .../main.svelte                               | 14 +++----
 .../_config.js                                |  0
 .../main.svelte                               |  2 +-
 .../_config.js                                |  4 +-
 .../class-raw-state-object/main.svelte        | 12 ++++++
 .../_config.js                                |  0
 .../main.svelte                               |  2 +-
 .../_config.js                                |  0
 .../main.svelte                               |  0
 .../samples/each-updates-frozen/main.svelte   | 16 --------
 .../_config.js                                |  0
 .../samples/each-updates-raw/main.svelte      | 18 +++++++++
 .../readonly-state-replace/main.svelte        |  2 +-
 .../samples/readonly-state/main.svelte        |  4 +-
 .../samples/state-raw-bindable/Child.svelte   |  6 +++
 .../samples/state-raw-bindable/_config.js     | 20 ++++++++++
 .../samples/state-raw-bindable/main.svelte    |  8 ++++
 packages/svelte/types/index.d.ts              | 11 ++---
 56 files changed, 187 insertions(+), 251 deletions(-)
 create mode 100644 .changeset/four-yaks-boil.md
 delete mode 100644 packages/svelte/src/internal/client/freeze.js
 delete mode 100644 packages/svelte/src/internal/client/freeze.test.ts
 rename packages/svelte/tests/runtime-runes/samples/{bind-this-frozen => bind-this-raw}/ComponentA.svelte (100%)
 rename packages/svelte/tests/runtime-runes/samples/{bind-this-frozen => bind-this-raw}/ComponentB.svelte (100%)
 rename packages/svelte/tests/runtime-runes/samples/{bind-this-frozen => bind-this-raw}/_config.js (100%)
 rename packages/svelte/tests/runtime-runes/samples/{bind-this-frozen => bind-this-raw}/main.svelte (93%)
 delete mode 100644 packages/svelte/tests/runtime-runes/samples/class-frozen-state-object/main.svelte
 rename packages/svelte/tests/runtime-runes/samples/{class-private-frozen-state-object => class-private-raw-state-object}/_config.js (80%)
 rename packages/svelte/tests/runtime-runes/samples/{class-private-frozen-state-object => class-private-raw-state-object}/main.svelte (60%)
 rename packages/svelte/tests/runtime-runes/samples/{class-frozen-state => class-private-raw-state}/_config.js (100%)
 rename packages/svelte/tests/runtime-runes/samples/{class-private-frozen-state => class-private-raw-state}/main.svelte (91%)
 rename packages/svelte/tests/runtime-runes/samples/{class-frozen-state-object => class-raw-state-object}/_config.js (80%)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/class-raw-state-object/main.svelte
 rename packages/svelte/tests/runtime-runes/samples/{class-private-frozen-state => class-raw-state}/_config.js (100%)
 rename packages/svelte/tests/runtime-runes/samples/{class-frozen-state => class-raw-state}/main.svelte (83%)
 rename packages/svelte/tests/runtime-runes/samples/{class-state-frozen => class-state-raw}/_config.js (100%)
 rename packages/svelte/tests/runtime-runes/samples/{class-state-frozen => class-state-raw}/main.svelte (100%)
 delete mode 100644 packages/svelte/tests/runtime-runes/samples/each-updates-frozen/main.svelte
 rename packages/svelte/tests/runtime-runes/samples/{each-updates-frozen => each-updates-raw}/_config.js (100%)
 create mode 100644 packages/svelte/tests/runtime-runes/samples/each-updates-raw/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-raw-bindable/Child.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-raw-bindable/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-raw-bindable/main.svelte

diff --git a/.changeset/four-yaks-boil.md b/.changeset/four-yaks-boil.md
new file mode 100644
index 0000000000..ede6c1de19
--- /dev/null
+++ b/.changeset/four-yaks-boil.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: replace `$state.frozen` with `$state.raw`
diff --git a/packages/svelte/messages/client-errors/errors.md b/packages/svelte/messages/client-errors/errors.md
index f0ca476ff1..e509c970a2 100644
--- a/packages/svelte/messages/client-errors/errors.md
+++ b/packages/svelte/messages/client-errors/errors.md
@@ -64,10 +64,6 @@
 
 > The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
 
-## state_frozen_invalid_argument
-
-> The argument to `$state.frozen(...)` cannot be an object created with `$state(...)`. You should create a copy of it first, for example with `$state.snapshot`
-
 ## state_prototype_fixed
 
 > Cannot set prototype of `$state` object
diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
index 63a3873d3f..82242cb494 100644
--- a/packages/svelte/src/ambient.d.ts
+++ b/packages/svelte/src/ambient.d.ts
@@ -102,12 +102,13 @@ declare namespace $state {
 						: never;
 
 	/**
-	 * Declares reactive read-only state that is shallowly immutable.
+	 * Declares state that is _not_ made deeply reactive — instead of mutating it,
+	 * you must reassign it.
 	 *
 	 * Example:
 	 * ```ts
 	 * <script>
-	 *   let items = $state.frozen([0]);
+	 *   let items = $state.raw([0]);
 	 *
 	 *   const addItem = () => {
 	 *     items = [...items, items.length];
@@ -123,8 +124,8 @@ declare namespace $state {
 	 *
 	 * @param initial The initial value
 	 */
-	export function frozen<T>(initial: T): Readonly<T>;
-	export function frozen<T>(): Readonly<T> | undefined;
+	export function raw<T>(initial: T): T;
+	export function raw<T>(): T | undefined;
 	/**
 	 * To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
 	 *
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index ad70cd2717..c1557ff600 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -34,7 +34,7 @@ export function BindDirective(node, context) {
 			node.name !== 'this' && // bind:this also works for regular variables
 			(!binding ||
 				(binding.kind !== 'state' &&
-					binding.kind !== 'frozen_state' &&
+					binding.kind !== 'raw_state' &&
 					binding.kind !== 'prop' &&
 					binding.kind !== 'bindable_prop' &&
 					binding.kind !== 'each' &&
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 57cdae0c66..92edd00739 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -73,7 +73,7 @@ export function CallExpression(node, context) {
 			break;
 
 		case '$state':
-		case '$state.frozen':
+		case '$state.raw':
 		case '$derived':
 		case '$derived.by':
 			if (
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
index 694c047b9c..e50de112e0 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
@@ -32,7 +32,7 @@ export function ExportNamedDeclaration(node, context) {
 					e.derived_invalid_export(node);
 				}
 
-				if ((binding.kind === 'state' || binding.kind === 'frozen_state') && binding.reassigned) {
+				if ((binding.kind === 'state' || binding.kind === 'raw_state') && binding.reassigned) {
 					e.state_invalid_export(node);
 				}
 			}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
index 4660a450d6..320b81d086 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
@@ -26,7 +26,7 @@ export function ExportSpecifier(node, context) {
 			if (
 				binding !== null &&
 				(binding.kind === 'state' ||
-					binding.kind === 'frozen_state' ||
+					binding.kind === 'raw_state' ||
 					(binding.kind === 'normal' &&
 						(binding.declaration_kind === 'let' || binding.declaration_kind === 'var')))
 			) {
@@ -60,7 +60,7 @@ function validate_export(node, scope, name) {
 		e.derived_invalid_export(node);
 	}
 
-	if ((binding.kind === 'state' || binding.kind === 'frozen_state') && binding.reassigned) {
+	if ((binding.kind === 'state' || binding.kind === 'raw_state') && binding.reassigned) {
 		e.state_invalid_export(node);
 	}
 }
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 8de4a419a7..7fb819bc17 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -1,7 +1,7 @@
 /** @import { Expression, Identifier } from 'estree' */
 /** @import { Context } from '../types' */
 import is_reference from 'is-reference';
-import { should_proxy_or_freeze } from '../../3-transform/client/utils.js';
+import { should_proxy } from '../../3-transform/client/utils.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
 import { is_rune } from '../../../../utils.js';
@@ -53,6 +53,10 @@ export function Identifier(node, context) {
 						e.rune_renamed(parent, '$effect.active', '$effect.tracking');
 					}
 
+					if (name === '$state.frozen') {
+						e.rune_renamed(parent, '$state.frozen', '$state.raw');
+					}
+
 					e.rune_invalid_name(parent, name);
 				}
 			}
@@ -132,8 +136,8 @@ export function Identifier(node, context) {
 					(binding.initial?.type === 'CallExpression' &&
 						binding.initial.arguments.length === 1 &&
 						binding.initial.arguments[0].type !== 'SpreadElement' &&
-						!should_proxy_or_freeze(binding.initial.arguments[0], context.state.scope)))) ||
-				binding.kind === 'frozen_state' ||
+						!should_proxy(binding.initial.arguments[0], context.state.scope)))) ||
+				binding.kind === 'raw_state' ||
 				binding.kind === 'derived') &&
 			// We're only concerned with reads here
 			(parent.type !== 'AssignmentExpression' || parent.left !== node) &&
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
index 5025fab1d8..6d9b3e29b9 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
@@ -21,7 +21,7 @@ export function VariableDeclarator(node, context) {
 		// TODO feels like this should happen during scope creation?
 		if (
 			rune === '$state' ||
-			rune === '$state.frozen' ||
+			rune === '$state.raw' ||
 			rune === '$derived' ||
 			rune === '$derived.by' ||
 			rune === '$props'
@@ -32,8 +32,8 @@ export function VariableDeclarator(node, context) {
 				binding.kind =
 					rune === '$state'
 						? 'state'
-						: rune === '$state.frozen'
-							? 'frozen_state'
+						: rune === '$state.raw'
+							? 'raw_state'
 							: rune === '$derived' || rune === '$derived.by'
 								? 'derived'
 								: path.is_rest
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
index 963882d396..0d3165e355 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/utils.js
@@ -78,7 +78,7 @@ export function validate_no_const_assignment(node, argument, scope, is_binding)
 			// 	// This takes advantage of the fact that we don't assign initial for let directives and then/catch variables.
 			// 	// If we start doing that, we need another property on the binding to differentiate, or give up on the more precise error message.
 			// 	binding.kind !== 'state' &&
-			// 		binding.kind !== 'frozen_state' &&
+			// 		binding.kind !== 'raw_state' &&
 			// 		(binding.kind !== 'normal' || !binding.initial)
 			// );
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index 15c0de5df8..5bc3e123cc 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -271,19 +271,9 @@ export function client_component(analysis, options) {
 			}
 		}
 
-		if (binding?.kind === 'state' || binding?.kind === 'frozen_state') {
-			return [
-				getter,
-				b.set(alias ?? name, [
-					b.stmt(
-						b.call(
-							'$.set',
-							b.id(name),
-							b.call(binding.kind === 'state' ? '$.proxy' : '$.freeze', b.id('$$value'))
-						)
-					)
-				])
-			];
+		if (binding?.kind === 'state' || binding?.kind === 'raw_state') {
+			const value = binding.kind === 'state' ? b.call('$.proxy', b.id('$$value')) : b.id('$$value');
+			return [getter, b.set(alias ?? name, [b.stmt(b.call('$.set', b.id(name), value))])];
 		}
 
 		return getter;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
index cae1a10940..e44cc0239c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
@@ -88,7 +88,7 @@ export interface ComponentClientTransformState extends ClientTransformState {
 }
 
 export interface StateField {
-	kind: 'state' | 'frozen_state' | 'derived' | 'derived_by';
+	kind: 'state' | 'raw_state' | 'derived' | 'derived_by';
 	id: PrivateIdentifier;
 }
 
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 786cdc2761..1fc7798c99 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -8,7 +8,8 @@ import {
 	PROPS_IS_LAZY_INITIAL,
 	PROPS_IS_IMMUTABLE,
 	PROPS_IS_RUNES,
-	PROPS_IS_UPDATED
+	PROPS_IS_UPDATED,
+	PROPS_IS_BINDABLE
 } from '../../../../constants.js';
 import { dev } from '../../../state.js';
 import { get_value } from './visitors/shared/declarations.js';
@@ -20,7 +21,7 @@ import { get_value } from './visitors/shared/declarations.js';
  */
 export function is_state_source(binding, state) {
 	return (
-		(binding.kind === 'state' || binding.kind === 'frozen_state') &&
+		(binding.kind === 'state' || binding.kind === 'raw_state') &&
 		(!state.analysis.immutable || binding.reassigned || state.analysis.accessors)
 	);
 }
@@ -168,6 +169,10 @@ export function get_prop_source(binding, state, name, initial) {
 
 	let flags = 0;
 
+	if (binding.kind === 'bindable_prop') {
+		flags |= PROPS_IS_BINDABLE;
+	}
+
 	if (state.analysis.immutable) {
 		flags |= PROPS_IS_IMMUTABLE;
 	}
@@ -238,7 +243,7 @@ export function is_prop_source(binding, state) {
  * @param {Expression} node
  * @param {Scope | null} scope
  */
-export function should_proxy_or_freeze(node, scope) {
+export function should_proxy(node, scope) {
 	if (
 		!node ||
 		node.type === 'Literal' ||
@@ -263,7 +268,7 @@ export function should_proxy_or_freeze(node, scope) {
 			binding.initial.type !== 'ImportDeclaration' &&
 			binding.initial.type !== 'EachBlock'
 		) {
-			return should_proxy_or_freeze(binding.initial, null);
+			return should_proxy(binding.initial, null);
 		}
 	}
 	return true;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
index afd2d50ba4..bdc144fe32 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
@@ -3,7 +3,7 @@
 import * as b from '../../../../utils/builders.js';
 import { build_assignment_value } from '../../../../utils/ast.js';
 import { is_ignored } from '../../../../state.js';
-import { build_proxy_reassignment, should_proxy_or_freeze } from '../utils.js';
+import { build_proxy_reassignment, should_proxy } from '../utils.js';
 import { visit_assignment_expression } from '../../shared/assignments.js';
 
 /**
@@ -37,11 +37,11 @@ export function build_assignment(operator, left, right, context) {
 					context.visit(build_assignment_value(operator, left, right))
 				);
 
-				if (should_proxy_or_freeze(value, context.state.scope)) {
+				if (should_proxy(value, context.state.scope)) {
 					transformed = true;
 					value =
-						private_state.kind === 'frozen_state'
-							? b.call('$.freeze', value)
+						private_state.kind === 'raw_state'
+							? value
 							: build_proxy_reassignment(value, private_state.id);
 				}
 
@@ -54,14 +54,14 @@ export function build_assignment(operator, left, right, context) {
 		} else if (left.property.type === 'Identifier' && context.state.in_constructor) {
 			const public_state = context.state.public_state.get(left.property.name);
 
-			if (public_state !== undefined && should_proxy_or_freeze(right, context.state.scope)) {
+			if (public_state !== undefined && should_proxy(right, context.state.scope)) {
 				const value = /** @type {Expression} */ (context.visit(right));
 
 				return b.assignment(
 					operator,
 					/** @type {Pattern} */ (context.visit(left)),
-					public_state.kind === 'frozen_state'
-						? b.call('$.freeze', value)
+					public_state.kind === 'raw_state'
+						? value
 						: build_proxy_reassignment(value, public_state.id)
 				);
 			}
@@ -99,13 +99,11 @@ export function build_assignment(operator, left, right, context) {
 		if (
 			!is_primitive &&
 			binding.kind !== 'prop' &&
+			binding.kind !== 'bindable_prop' &&
 			context.state.analysis.runes &&
-			should_proxy_or_freeze(value, context.state.scope)
+			should_proxy(value, context.state.scope)
 		) {
-			value =
-				binding.kind === 'frozen_state'
-					? b.call('$.freeze', value)
-					: build_proxy_reassignment(value, object.name);
+			value = binding.kind === 'raw_state' ? value : build_proxy_reassignment(value, object.name);
 		}
 
 		return transform.assign(object, value);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
index aa9931ade3..5342e70aac 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
@@ -5,7 +5,7 @@ import { dev, is_ignored } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { regex_invalid_identifier_chars } from '../../../patterns.js';
 import { get_rune } from '../../../scope.js';
-import { build_proxy_reassignment, should_proxy_or_freeze } from '../utils.js';
+import { build_proxy_reassignment, should_proxy } from '../utils.js';
 
 /**
  * @param {ClassBody} node
@@ -44,7 +44,7 @@ export function ClassBody(node, context) {
 				const rune = get_rune(definition.value, context.state.scope);
 				if (
 					rune === '$state' ||
-					rune === '$state.frozen' ||
+					rune === '$state.raw' ||
 					rune === '$derived' ||
 					rune === '$derived.by'
 				) {
@@ -53,8 +53,8 @@ export function ClassBody(node, context) {
 						kind:
 							rune === '$state'
 								? 'state'
-								: rune === '$state.frozen'
-									? 'frozen_state'
+								: rune === '$state.raw'
+									? 'raw_state'
 									: rune === '$derived.by'
 										? 'derived_by'
 										: 'derived',
@@ -114,15 +114,10 @@ export function ClassBody(node, context) {
 						field.kind === 'state'
 							? b.call(
 									'$.source',
-									should_proxy_or_freeze(init, context.state.scope) ? b.call('$.proxy', init) : init
+									should_proxy(init, context.state.scope) ? b.call('$.proxy', init) : init
 								)
-							: field.kind === 'frozen_state'
-								? b.call(
-										'$.source',
-										should_proxy_or_freeze(init, context.state.scope)
-											? b.call('$.freeze', init)
-											: init
-									)
+							: field.kind === 'raw_state'
+								? b.call('$.source', init)
 								: field.kind === 'derived_by'
 									? b.call('$.derived', init)
 									: b.call('$.derived', b.thunk(init));
@@ -154,16 +149,11 @@ export function ClassBody(node, context) {
 						);
 					}
 
-					if (field.kind === 'frozen_state') {
+					if (field.kind === 'raw_state') {
 						// set foo(value) { this.#foo = value; }
 						const value = b.id('value');
 						body.push(
-							b.method(
-								'set',
-								definition.key,
-								[value],
-								[b.stmt(b.call('$.set', member, b.call('$.freeze', value)))]
-							)
+							b.method('set', definition.key, [value], [b.stmt(b.call('$.set', member, value))])
 						);
 					}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
index 173b2edf13..97cb057cc5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
@@ -6,7 +6,7 @@ import {
 	EACH_INDEX_REACTIVE,
 	EACH_IS_ANIMATED,
 	EACH_IS_CONTROLLED,
-	EACH_IS_STRICT_EQUALS,
+	EACH_ITEM_IMMUTABLE,
 	EACH_ITEM_REACTIVE,
 	EACH_KEYED
 } from '../../../../../constants.js';
@@ -55,6 +55,17 @@ export function EachBlock(node, context) {
 		node.context.type === 'Identifier' &&
 		node.context.name === node.key.name;
 
+	// if the each block expression references a store subscription, we need
+	// to use mutable stores internally
+	let uses_store;
+
+	for (const binding of node.metadata.expression.dependencies) {
+		if (binding.kind === 'store_sub') {
+			uses_store = true;
+			break;
+		}
+	}
+
 	for (const binding of node.metadata.expression.dependencies) {
 		// if the expression doesn't reference any external state, we don't need to
 		// create a source for the item. TODO cover more cases (e.g. `x.filter(y)`
@@ -64,12 +75,16 @@ export function EachBlock(node, context) {
 			continue;
 		}
 
-		if (!context.state.analysis.runes || !key_is_item || binding.kind === 'store_sub') {
+		if (!context.state.analysis.runes || !key_is_item || uses_store) {
 			flags |= EACH_ITEM_REACTIVE;
 			break;
 		}
 	}
 
+	if (context.state.analysis.runes && !uses_store) {
+		flags |= EACH_ITEM_IMMUTABLE;
+	}
+
 	// Since `animate:` can only appear on elements that are the sole child of a keyed each block,
 	// we can determine at compile time whether the each block is animated or not (in which
 	// case it should measure animated elements before and after reconciliation).
@@ -87,10 +102,6 @@ export function EachBlock(node, context) {
 		flags |= EACH_IS_CONTROLLED;
 	}
 
-	if (context.state.analysis.runes) {
-		flags |= EACH_IS_STRICT_EQUALS;
-	}
-
 	// If the array is a store expression, we need to invalidate it when the array is changed.
 	// This doesn't catch all cases, but all the ones that Svelte 4 catches, too.
 	let store_to_invalidate = '';
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index 914db108e3..8d36046be3 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -7,12 +7,7 @@ import { extract_paths } from '../../../../utils/ast.js';
 import * as b from '../../../../utils/builders.js';
 import * as assert from '../../../../utils/assert.js';
 import { get_rune } from '../../../scope.js';
-import {
-	get_prop_source,
-	is_prop_source,
-	is_state_source,
-	should_proxy_or_freeze
-} from '../utils.js';
+import { get_prop_source, is_prop_source, is_state_source, should_proxy } from '../utils.js';
 import { is_hoisted_function } from '../../utils.js';
 
 /**
@@ -86,7 +81,7 @@ export function VariableDeclaration(node, context) {
 							if (
 								initial &&
 								binding.kind === 'bindable_prop' &&
-								should_proxy_or_freeze(initial, context.state.scope)
+								should_proxy(initial, context.state.scope)
 							) {
 								initial = b.call('$.proxy', initial);
 							}
@@ -119,7 +114,7 @@ export function VariableDeclaration(node, context) {
 			const value =
 				args.length === 0 ? b.id('undefined') : /** @type {Expression} */ (context.visit(args[0]));
 
-			if (rune === '$state' || rune === '$state.frozen') {
+			if (rune === '$state' || rune === '$state.raw') {
 				/**
 				 * @param {Identifier} id
 				 * @param {Expression} value
@@ -128,8 +123,8 @@ export function VariableDeclaration(node, context) {
 					const binding = /** @type {import('#compiler').Binding} */ (
 						context.state.scope.get(id.name)
 					);
-					if (should_proxy_or_freeze(value, context.state.scope)) {
-						value = b.call(rune === '$state' ? '$.proxy' : '$.freeze', value);
+					if (rune === '$state' && should_proxy(value, context.state.scope)) {
+						value = b.call('$.proxy', value);
 					}
 					if (is_state_source(binding, context.state)) {
 						value = b.call('$.source', value);
@@ -151,7 +146,7 @@ export function VariableDeclaration(node, context) {
 							const binding = context.state.scope.get(/** @type {Identifier} */ (path.node).name);
 							return b.declarator(
 								path.node,
-								binding?.kind === 'state' || binding?.kind === 'frozen_state'
+								binding?.kind === 'state' || binding?.kind === 'raw_state'
 									? create_state_declarator(binding.node, value)
 									: value
 							);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
index 5a03fd9be4..0ea6a7ff6d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
@@ -1,6 +1,6 @@
-/** @import { BinaryOperator, Expression, Identifier } from 'estree' */
+/** @import { Identifier } from 'estree' */
 /** @import { ComponentContext, Context } from '../../types' */
-import { build_proxy_reassignment, is_state_source, should_proxy_or_freeze } from '../../utils.js';
+import { is_state_source } from '../../utils.js';
 import * as b from '../../../../../utils/builders.js';
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
index 72831dce86..04751a19d1 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
@@ -11,7 +11,7 @@ export function PropertyDefinition(node, context) {
 	if (context.state.analysis.runes && node.value != null && node.value.type === 'CallExpression') {
 		const rune = get_rune(node.value, context.state.scope);
 
-		if (rune === '$state' || rune === '$state.frozen' || rune === '$derived') {
+		if (rune === '$state' || rune === '$state.raw' || rune === '$derived') {
 			return {
 				...node,
 				value:
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index f7d111a267..24da8c9b84 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -278,7 +278,7 @@ export interface Binding {
 		| 'bindable_prop'
 		| 'rest_prop'
 		| 'state'
-		| 'frozen_state'
+		| 'raw_state'
 		| 'derived'
 		| 'each'
 		| 'snippet'
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index 9a4aa58193..f66c99e5c7 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -5,12 +5,13 @@ export const EACH_KEYED = 1 << 2;
 /** See EachBlock interface metadata.is_controlled for an explanation what this is */
 export const EACH_IS_CONTROLLED = 1 << 3;
 export const EACH_IS_ANIMATED = 1 << 4;
-export const EACH_IS_STRICT_EQUALS = 1 << 6;
+export const EACH_ITEM_IMMUTABLE = 1 << 5;
 
 export const PROPS_IS_IMMUTABLE = 1;
 export const PROPS_IS_RUNES = 1 << 1;
 export const PROPS_IS_UPDATED = 1 << 2;
-export const PROPS_IS_LAZY_INITIAL = 1 << 3;
+export const PROPS_IS_BINDABLE = 1 << 3;
+export const PROPS_IS_LAZY_INITIAL = 1 << 4;
 
 export const TRANSITION_IN = 1;
 export const TRANSITION_OUT = 1 << 1;
diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index accdf05036..286396703a 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -20,5 +20,4 @@ export const INSPECT_EFFECT = 1 << 17;
 export const HEAD_EFFECT = 1 << 18;
 
 export const STATE_SYMBOL = Symbol('$state');
-export const STATE_FROZEN_SYMBOL = Symbol('$state.frozen');
 export const LOADING_ATTR_SYMBOL = Symbol('');
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index 669232fca2..24dfe2ebcf 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -3,9 +3,8 @@ import {
 	EACH_INDEX_REACTIVE,
 	EACH_IS_ANIMATED,
 	EACH_IS_CONTROLLED,
-	EACH_IS_STRICT_EQUALS,
+	EACH_ITEM_IMMUTABLE,
 	EACH_ITEM_REACTIVE,
-	EACH_KEYED,
 	HYDRATION_END,
 	HYDRATION_START_ELSE
 } from '../../../../constants.js';
@@ -29,7 +28,7 @@ import {
 } from '../../reactivity/effects.js';
 import { source, mutable_source, set } from '../../reactivity/sources.js';
 import { is_array, is_frozen } from '../../../shared/utils.js';
-import { INERT, STATE_FROZEN_SYMBOL, STATE_SYMBOL } from '../../constants.js';
+import { INERT, STATE_SYMBOL } from '../../constants.js';
 import { queue_micro_task } from '../task.js';
 import { current_effect } from '../../runtime.js';
 
@@ -139,18 +138,6 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 
 		var length = array.length;
 
-		// If we are working with an array that isn't proxied or frozen, then remove strict equality and ensure the items
-		// are treated as reactive, so they get wrapped in a signal.
-		var flags = state.flags;
-		if (
-			(flags & EACH_IS_STRICT_EQUALS) !== 0 &&
-			!is_frozen(array) &&
-			!(STATE_FROZEN_SYMBOL in array) &&
-			!(STATE_SYMBOL in array)
-		) {
-			flags ^= EACH_IS_STRICT_EQUALS;
-		}
-
 		/** `true` if there was a hydration mismatch. Needs to be a `let` or else it isn't treeshaken out */
 		let mismatch = false;
 
@@ -470,7 +457,7 @@ function create_item(anchor, state, prev, next, value, key, index, render_fn, fl
 
 	try {
 		var reactive = (flags & EACH_ITEM_REACTIVE) !== 0;
-		var mutable = (flags & EACH_IS_STRICT_EQUALS) === 0;
+		var mutable = (flags & EACH_ITEM_IMMUTABLE) === 0;
 
 		var v = reactive ? (mutable ? mutable_source(value) : source(value)) : value;
 		var i = (flags & EACH_INDEX_REACTIVE) === 0 ? index : source(index);
diff --git a/packages/svelte/src/internal/client/errors.js b/packages/svelte/src/internal/client/errors.js
index 20a338fd5b..d6c04cf414 100644
--- a/packages/svelte/src/internal/client/errors.js
+++ b/packages/svelte/src/internal/client/errors.js
@@ -278,22 +278,6 @@ export function rune_outside_svelte(rune) {
 	}
 }
 
-/**
- * The argument to `$state.frozen(...)` cannot be an object created with `$state(...)`. You should create a copy of it first, for example with `$state.snapshot`
- * @returns {never}
- */
-export function state_frozen_invalid_argument() {
-	if (DEV) {
-		const error = new Error(`state_frozen_invalid_argument\nThe argument to \`$state.frozen(...)\` cannot be an object created with \`$state(...)\`. You should create a copy of it first, for example with \`$state.snapshot\``);
-
-		error.name = 'Svelte error';
-		throw error;
-	} else {
-		// TODO print a link to the documentation
-		throw new Error("state_frozen_invalid_argument");
-	}
-}
-
 /**
  * Cannot set prototype of `$state` object
  * @returns {never}
diff --git a/packages/svelte/src/internal/client/freeze.js b/packages/svelte/src/internal/client/freeze.js
deleted file mode 100644
index 540168afcf..0000000000
--- a/packages/svelte/src/internal/client/freeze.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import { DEV } from 'esm-env';
-import { define_property, is_array, is_frozen, object_freeze } from '../shared/utils.js';
-import { STATE_FROZEN_SYMBOL, STATE_SYMBOL } from './constants.js';
-import * as e from './errors.js';
-
-/**
- * Expects a value that was wrapped with `freeze` and makes it frozen in DEV.
- * @template T
- * @param {T} value
- * @returns {Readonly<T>}
- */
-export function freeze(value) {
-	if (
-		typeof value === 'object' &&
-		value !== null &&
-		!is_frozen(value) &&
-		!(STATE_FROZEN_SYMBOL in value)
-	) {
-		var copy = /** @type {T} */ (value);
-
-		if (STATE_SYMBOL in value) {
-			e.state_frozen_invalid_argument();
-		}
-
-		define_property(copy, STATE_FROZEN_SYMBOL, {
-			value: true,
-			writable: true,
-			enumerable: false
-		});
-
-		// Freeze the object in DEV
-		if (DEV) {
-			object_freeze(copy);
-		}
-
-		return /** @type {Readonly<T>} */ (copy);
-	}
-
-	return value;
-}
diff --git a/packages/svelte/src/internal/client/freeze.test.ts b/packages/svelte/src/internal/client/freeze.test.ts
deleted file mode 100644
index fdc79ec13c..0000000000
--- a/packages/svelte/src/internal/client/freeze.test.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { freeze } from './freeze.js';
-import { assert, test } from 'vitest';
-import { proxy } from './proxy.js';
-
-test('freezes an object', () => {
-	const frozen = freeze({ a: 1 });
-
-	assert.throws(() => {
-		// @ts-expect-error
-		frozen.a += 1;
-	}, /Cannot assign to read only property/);
-});
-
-test('throws if argument is a state proxy', () => {
-	assert.throws(() => freeze(proxy({})), /state_frozen_invalid_argument/);
-});
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index b1dfebbec5..489d45df02 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -93,7 +93,6 @@ export {
 	template_with_script,
 	text
 } from './dom/template.js';
-export { freeze } from './freeze.js';
 export { derived, derived_safe_equal } from './reactivity/deriveds.js';
 export {
 	effect_tracking,
diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js
index 7b172f0a12..1827b1efda 100644
--- a/packages/svelte/src/internal/client/proxy.js
+++ b/packages/svelte/src/internal/client/proxy.js
@@ -12,7 +12,7 @@ import {
 } from '../shared/utils.js';
 import { check_ownership, widen_ownership } from './dev/ownership.js';
 import { source, set } from './reactivity/sources.js';
-import { STATE_FROZEN_SYMBOL, STATE_SYMBOL } from './constants.js';
+import { STATE_SYMBOL } from './constants.js';
 import { UNINITIALIZED } from '../../constants.js';
 import * as e from './errors.js';
 
@@ -24,12 +24,7 @@ import * as e from './errors.js';
  * @returns {ProxyStateObject<T> | T}
  */
 export function proxy(value, parent = null, prev) {
-	if (
-		typeof value === 'object' &&
-		value != null &&
-		!is_frozen(value) &&
-		!(STATE_FROZEN_SYMBOL in value)
-	) {
+	if (typeof value === 'object' && value != null && !is_frozen(value)) {
 		// If we have an existing proxy, return it...
 		if (STATE_SYMBOL in value) {
 			const metadata = /** @type {ProxyMetadata<T>} */ (value[STATE_SYMBOL]);
diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index 81c3e4d743..0a5e746730 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -1,6 +1,7 @@
 /** @import { Source } from './types.js' */
 import { DEV } from 'esm-env';
 import {
+	PROPS_IS_BINDABLE,
 	PROPS_IS_IMMUTABLE,
 	PROPS_IS_LAZY_INITIAL,
 	PROPS_IS_RUNES,
@@ -13,6 +14,7 @@ import { get, is_signals_recorded, untrack, update } from '../runtime.js';
 import { safe_equals } from './equality.js';
 import * as e from '../errors.js';
 import { LEGACY_DERIVED_PROP } from '../constants.js';
+import { proxy } from '../proxy.js';
 
 /**
  * @param {((value?: number) => number)} fn
@@ -228,6 +230,7 @@ export function spread_props(...props) {
 export function prop(props, key, flags, fallback) {
 	var immutable = (flags & PROPS_IS_IMMUTABLE) !== 0;
 	var runes = (flags & PROPS_IS_RUNES) !== 0;
+	var bindable = (flags & PROPS_IS_BINDABLE) !== 0;
 	var lazy = (flags & PROPS_IS_LAZY_INITIAL) !== 0;
 
 	var prop_value = /** @type {V} */ (props[key]);
@@ -343,7 +346,7 @@ export function prop(props, key, flags, fallback) {
 		}
 
 		if (arguments.length > 0) {
-			const new_value = mutation ? get(current_value) : value;
+			const new_value = mutation ? get(current_value) : bindable ? proxy(value) : value;
 
 			if (!current_value.equals(new_value)) {
 				from_child = true;
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index 60250075c6..f5a523f107 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -393,7 +393,7 @@ export function is_mathml(name) {
 
 const RUNES = /** @type {const} */ ([
 	'$state',
-	'$state.frozen',
+	'$state.raw',
 	'$state.snapshot',
 	'$state.is',
 	'$props',
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-frozen/ComponentA.svelte b/packages/svelte/tests/runtime-runes/samples/bind-this-raw/ComponentA.svelte
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/bind-this-frozen/ComponentA.svelte
rename to packages/svelte/tests/runtime-runes/samples/bind-this-raw/ComponentA.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-frozen/ComponentB.svelte b/packages/svelte/tests/runtime-runes/samples/bind-this-raw/ComponentB.svelte
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/bind-this-frozen/ComponentB.svelte
rename to packages/svelte/tests/runtime-runes/samples/bind-this-raw/ComponentB.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-frozen/_config.js b/packages/svelte/tests/runtime-runes/samples/bind-this-raw/_config.js
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/bind-this-frozen/_config.js
rename to packages/svelte/tests/runtime-runes/samples/bind-this-raw/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/bind-this-frozen/main.svelte b/packages/svelte/tests/runtime-runes/samples/bind-this-raw/main.svelte
similarity index 93%
rename from packages/svelte/tests/runtime-runes/samples/bind-this-frozen/main.svelte
rename to packages/svelte/tests/runtime-runes/samples/bind-this-raw/main.svelte
index 4b314a33fa..653f56bd55 100644
--- a/packages/svelte/tests/runtime-runes/samples/bind-this-frozen/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/bind-this-raw/main.svelte
@@ -3,7 +3,7 @@
 	import ComponentB from './ComponentB.svelte';
 
 	let type = $state(ComponentA);
-	let elem = $state.frozen();
+	let elem = $state.raw();
 
 	$effect(() => {
 		console.log(elem);
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-property-static/_config.js b/packages/svelte/tests/runtime-runes/samples/binding-property-static/_config.js
index 7202aadfa4..5c0b524a89 100644
--- a/packages/svelte/tests/runtime-runes/samples/binding-property-static/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/binding-property-static/_config.js
@@ -8,9 +8,9 @@ export default test({
 	async test({ assert, warnings }) {
 		assert.deepEqual(warnings, [
 			'`bind:value={pojo.value}` (main.svelte:50:7) is binding to a non-reactive property',
-			'`bind:value={frozen.value}` (main.svelte:51:7) is binding to a non-reactive property',
+			'`bind:value={raw.value}` (main.svelte:51:7) is binding to a non-reactive property',
 			'`bind:value={pojo.value}` (main.svelte:52:7) is binding to a non-reactive property',
-			'`bind:value={frozen.value}` (main.svelte:53:7) is binding to a non-reactive property',
+			'`bind:value={raw.value}` (main.svelte:53:7) is binding to a non-reactive property',
 			'`bind:this={pojo.value}` (main.svelte:55:6) is binding to a non-reactive property'
 		]);
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/binding-property-static/main.svelte b/packages/svelte/tests/runtime-runes/samples/binding-property-static/main.svelte
index 3195aa35ea..e7d7ca35c1 100644
--- a/packages/svelte/tests/runtime-runes/samples/binding-property-static/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/binding-property-static/main.svelte
@@ -5,7 +5,7 @@
 		value: 1
 	};
 
-	let frozen = $state.frozen({
+	let raw = $state.raw({
 		value: 2
 	});
 
@@ -48,9 +48,9 @@
 
 <!-- should warn -->
 <input bind:value={pojo.value} />
-<input bind:value={frozen.value} />
+<input bind:value={raw.value} />
 <Child bind:value={pojo.value} />
-<Child bind:value={frozen.value} />
+<Child bind:value={raw.value} />
 {#if value}
 	<div bind:this={pojo.value}></div>
 {/if}
diff --git a/packages/svelte/tests/runtime-runes/samples/class-frozen-state-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-frozen-state-object/main.svelte
deleted file mode 100644
index bdadbeee82..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/class-frozen-state-object/main.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-	class Counter {
-		count = $state.frozen({ a: 0 });
-	}
-	const counter = new Counter();
-</script>
-
-<button on:click={() => {
-	try {
-		counter.count.a++
-	} catch (e) {
-		console.log('read only')
-	}
-}}>{counter.count.a}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state-object/_config.js b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/_config.js
similarity index 80%
rename from packages/svelte/tests/runtime-runes/samples/class-private-frozen-state-object/_config.js
rename to packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/_config.js
index 4b043a75e2..ad93c66761 100644
--- a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state-object/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/_config.js
@@ -4,7 +4,7 @@ import { test } from '../../test';
 export default test({
 	html: `<button>0</button>`,
 
-	test({ assert, target, logs }) {
+	test({ assert, target }) {
 		const btn = target.querySelector('button');
 
 		btn?.click();
@@ -14,7 +14,5 @@ export default test({
 		btn?.click();
 		flushSync();
 		assert.htmlEqual(target.innerHTML, `<button>0</button>`);
-
-		assert.deepEqual(logs, ['read only', 'read only']);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/main.svelte
similarity index 60%
rename from packages/svelte/tests/runtime-runes/samples/class-private-frozen-state-object/main.svelte
rename to packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/main.svelte
index 557dc86998..f7f1c74c29 100644
--- a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state-object/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state-object/main.svelte
@@ -1,6 +1,6 @@
 <script>
 	class Counter {
-		#count = $state.frozen();
+		#count = $state.raw();
 
 		constructor(initial_count) {
 			this.#count = { a: initial_count };
@@ -16,10 +16,8 @@
 	const counter = new Counter(0);
 </script>
 
-<button on:click={() => {
-	try {
-		counter.count.a++
-	} catch (e) {
-		console.log('read only')
-	}
-}}>{counter.count.a}</button>
+<button
+	on:click={() => {
+		counter.count.a++;
+	}}>{counter.count.a}</button
+>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-frozen-state/_config.js b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state/_config.js
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/class-frozen-state/_config.js
rename to packages/svelte/tests/runtime-runes/samples/class-private-raw-state/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state/main.svelte
similarity index 91%
rename from packages/svelte/tests/runtime-runes/samples/class-private-frozen-state/main.svelte
rename to packages/svelte/tests/runtime-runes/samples/class-private-raw-state/main.svelte
index f509f351bb..f4812b1dde 100644
--- a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/class-private-raw-state/main.svelte
@@ -1,6 +1,6 @@
 <script>
 	class Counter {
-		#count = $state.frozen(0);
+		#count = $state.raw(0);
 
 		constructor(initial_count) {
 			this.#count = initial_count;
diff --git a/packages/svelte/tests/runtime-runes/samples/class-frozen-state-object/_config.js b/packages/svelte/tests/runtime-runes/samples/class-raw-state-object/_config.js
similarity index 80%
rename from packages/svelte/tests/runtime-runes/samples/class-frozen-state-object/_config.js
rename to packages/svelte/tests/runtime-runes/samples/class-raw-state-object/_config.js
index 4b043a75e2..ad93c66761 100644
--- a/packages/svelte/tests/runtime-runes/samples/class-frozen-state-object/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/class-raw-state-object/_config.js
@@ -4,7 +4,7 @@ import { test } from '../../test';
 export default test({
 	html: `<button>0</button>`,
 
-	test({ assert, target, logs }) {
+	test({ assert, target }) {
 		const btn = target.querySelector('button');
 
 		btn?.click();
@@ -14,7 +14,5 @@ export default test({
 		btn?.click();
 		flushSync();
 		assert.htmlEqual(target.innerHTML, `<button>0</button>`);
-
-		assert.deepEqual(logs, ['read only', 'read only']);
 	}
 });
diff --git a/packages/svelte/tests/runtime-runes/samples/class-raw-state-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-raw-state-object/main.svelte
new file mode 100644
index 0000000000..17ef0e7f34
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/class-raw-state-object/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	class Counter {
+		count = $state.raw({ a: 0 });
+	}
+	const counter = new Counter();
+</script>
+
+<button
+	on:click={() => {
+		counter.count.a++;
+	}}>{counter.count.a}</button
+>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-private-frozen-state/_config.js b/packages/svelte/tests/runtime-runes/samples/class-raw-state/_config.js
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/class-private-frozen-state/_config.js
rename to packages/svelte/tests/runtime-runes/samples/class-raw-state/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/class-frozen-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-raw-state/main.svelte
similarity index 83%
rename from packages/svelte/tests/runtime-runes/samples/class-frozen-state/main.svelte
rename to packages/svelte/tests/runtime-runes/samples/class-raw-state/main.svelte
index a723976ea9..2913d1ecec 100644
--- a/packages/svelte/tests/runtime-runes/samples/class-frozen-state/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/class-raw-state/main.svelte
@@ -1,6 +1,6 @@
 <script>
 	class Counter {
-		count = $state.frozen(0);
+		count = $state.raw(0);
 	}
 	const counter = new Counter();
 </script>
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-frozen/_config.js b/packages/svelte/tests/runtime-runes/samples/class-state-raw/_config.js
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/class-state-frozen/_config.js
rename to packages/svelte/tests/runtime-runes/samples/class-state-raw/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-frozen/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-raw/main.svelte
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/class-state-frozen/main.svelte
rename to packages/svelte/tests/runtime-runes/samples/class-state-raw/main.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-frozen/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-updates-frozen/main.svelte
deleted file mode 100644
index 8aabde46cf..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/each-updates-frozen/main.svelte
+++ /dev/null
@@ -1,16 +0,0 @@
-<script>
-  let frozen_items = $state.frozen([
-		{id: 0, text: 'a'},
-		{id: 1, text: 'b'},
-		{id: 2, text: 'c'}
-	])
-</script>
-
-{#each frozen_items as item (item.id)}
-	{console.log(item.text)}
-  {item.text}
-{/each}
-
-<button onclick={() => {
-	frozen_items = [...frozen_items, {id: 3, text: 'd'}]
-}}></button>
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-frozen/_config.js b/packages/svelte/tests/runtime-runes/samples/each-updates-raw/_config.js
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/each-updates-frozen/_config.js
rename to packages/svelte/tests/runtime-runes/samples/each-updates-raw/_config.js
diff --git a/packages/svelte/tests/runtime-runes/samples/each-updates-raw/main.svelte b/packages/svelte/tests/runtime-runes/samples/each-updates-raw/main.svelte
new file mode 100644
index 0000000000..07efc5e349
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/each-updates-raw/main.svelte
@@ -0,0 +1,18 @@
+<script>
+	let raw_items = $state.raw([
+		{ id: 0, text: 'a' },
+		{ id: 1, text: 'b' },
+		{ id: 2, text: 'c' }
+	]);
+</script>
+
+{#each raw_items as item (item.id)}
+	{console.log(item.text)}
+	{item.text}
+{/each}
+
+<button
+	onclick={() => {
+		raw_items = [...raw_items, { id: 3, text: 'd' }];
+	}}
+></button>
diff --git a/packages/svelte/tests/runtime-runes/samples/readonly-state-replace/main.svelte b/packages/svelte/tests/runtime-runes/samples/readonly-state-replace/main.svelte
index 4a53807030..4b5dc5ac59 100644
--- a/packages/svelte/tests/runtime-runes/samples/readonly-state-replace/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/readonly-state-replace/main.svelte
@@ -1,5 +1,5 @@
 <script>
-	let items = $state.frozen([0]);
+	let items = $state.raw([0]);
 
 	const addItem = () => {
 		items = [...items, items.length];
diff --git a/packages/svelte/tests/runtime-runes/samples/readonly-state/main.svelte b/packages/svelte/tests/runtime-runes/samples/readonly-state/main.svelte
index e92a479c93..9cfda45e18 100644
--- a/packages/svelte/tests/runtime-runes/samples/readonly-state/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/readonly-state/main.svelte
@@ -1,6 +1,6 @@
 <script>
-	let x = $state.frozen(0);
-	let y = $state.frozen(0);
+	let x = $state.raw(0);
+	let y = $state.raw(0);
 
 	$effect(() => {
 		console.log(x);
diff --git a/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/Child.svelte b/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/Child.svelte
new file mode 100644
index 0000000000..37d06d5f80
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/Child.svelte
@@ -0,0 +1,6 @@
+<script>
+	let { object = $bindable() } = $props();
+</script>
+
+<button onclick={() => (object = { count: object.count + 1 })}>reassign</button>
+<button onclick={() => (object.count += 1)}>mutate</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/_config.js b/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/_config.js
new file mode 100644
index 0000000000..995aec0ad8
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/_config.js
@@ -0,0 +1,20 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	html: '<button>reassign</button> <button>mutate</button> <p>0</p>',
+	test({ assert, target }) {
+		const [reassign, mutate] = target.querySelectorAll('button');
+		const output = target.querySelector('p');
+		ok(output);
+
+		flushSync(() => mutate.click());
+		assert.htmlEqual(output.innerHTML, '0');
+
+		flushSync(() => reassign.click());
+		assert.htmlEqual(output.innerHTML, '2');
+
+		flushSync(() => mutate.click());
+		assert.htmlEqual(output.innerHTML, '2');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/main.svelte
new file mode 100644
index 0000000000..39599673fc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-raw-bindable/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	import Child from './Child.svelte';
+
+	let object = $state.raw({ count: 0 });
+</script>
+
+<Child bind:object />
+<p>{object.count}</p>
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index ed61515c5a..f31cb2a6d3 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -927,7 +927,7 @@ declare module 'svelte/compiler' {
 			| 'bindable_prop'
 			| 'rest_prop'
 			| 'state'
-			| 'frozen_state'
+			| 'raw_state'
 			| 'derived'
 			| 'each'
 			| 'snippet'
@@ -2879,12 +2879,13 @@ declare namespace $state {
 						: never;
 
 	/**
-	 * Declares reactive read-only state that is shallowly immutable.
+	 * Declares state that is _not_ made deeply reactive — instead of mutating it,
+	 * you must reassign it.
 	 *
 	 * Example:
 	 * ```ts
 	 * <script>
-	 *   let items = $state.frozen([0]);
+	 *   let items = $state.raw([0]);
 	 *
 	 *   const addItem = () => {
 	 *     items = [...items, items.length];
@@ -2900,8 +2901,8 @@ declare namespace $state {
 	 *
 	 * @param initial The initial value
 	 */
-	export function frozen<T>(initial: T): Readonly<T>;
-	export function frozen<T>(): Readonly<T> | undefined;
+	export function raw<T>(initial: T): T;
+	export function raw<T>(): T | undefined;
 	/**
 	 * To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snapshot`:
 	 *

From 8600caf9523e236d6fae40675c8d390f00a6971e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 12 Aug 2024 12:44:34 -0400
Subject: [PATCH 102/196] fix: only proxy stuff in runes mode (#12813)

---
 packages/svelte/src/internal/client/reactivity/props.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index 0a5e746730..b7200f6f96 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -346,7 +346,7 @@ export function prop(props, key, flags, fallback) {
 		}
 
 		if (arguments.length > 0) {
-			const new_value = mutation ? get(current_value) : bindable ? proxy(value) : value;
+			const new_value = mutation ? get(current_value) : runes && bindable ? proxy(value) : value;
 
 			if (!current_value.equals(new_value)) {
 				from_child = true;

From 9f17f766b7eda3fcc9891d243bf03f8ac16808f3 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 12 Aug 2024 12:55:15 -0400
Subject: [PATCH 103/196] Version Packages (next) (#12811)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 2 ++
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 8f6cfa1cf5..a1398bf32c 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -211,6 +211,7 @@
     "four-papayas-turn",
     "four-peas-tickle",
     "four-pugs-listen",
+    "four-yaks-boil",
     "fresh-beds-wash",
     "fresh-dots-destroy",
     "fresh-impalas-bow",
@@ -662,6 +663,7 @@
     "strong-lemons-provide",
     "strong-pans-doubt",
     "stupid-bottles-lay",
+    "stupid-cars-behave",
     "stupid-parents-crash",
     "stupid-rivers-stare",
     "sweet-bottles-check",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index a92664a053..40fd399cd8 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.218
+
+### Patch Changes
+
+- breaking: replace `$state.frozen` with `$state.raw` ([#12808](https://github.com/sveltejs/svelte/pull/12808))
+
+- fix: ensure inspect effects are skipped from effect parent logic ([#12810](https://github.com/sveltejs/svelte/pull/12810))
+
 ## 5.0.0-next.217
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 6861bcdc61..98bf7a1fa5 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.217",
+  "version": "5.0.0-next.218",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index bd928eb2c9..1012320282 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.217';
+export const VERSION = '5.0.0-next.218';
 export const PUBLIC_VERSION = '5';

From 9ba370f30549e8435bc7a08a17d10c11948b5ccb Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 12 Aug 2024 12:55:46 -0400
Subject: [PATCH 104/196] docs: replace `$state.frozen` docs with `$state.raw`
 (#12812)

---
 documentation/docs/03-runes/01-state.md        | 18 ++++--------------
 .../phases/3-transform/client/utils.js         |  4 +++-
 sites/svelte-5-preview/src/lib/autocomplete.js |  6 +++---
 .../src/routes/docs/content/01-api/02-runes.md | 10 ++++------
 4 files changed, 14 insertions(+), 24 deletions(-)

diff --git a/documentation/docs/03-runes/01-state.md b/documentation/docs/03-runes/01-state.md
index ba07ecf0cb..64f5e171c0 100644
--- a/documentation/docs/03-runes/01-state.md
+++ b/documentation/docs/03-runes/01-state.md
@@ -2,12 +2,6 @@
 title: State
 ---
 
-- `$state` (.frozen)
-- `$derived` (.by)
-- using classes
-- getters/setters (what to do to keep reactivity "alive")
-- universal reactivity
-
 Svelte 5 uses _runes_, a powerful set of primitives for controlling reactivity inside your Svelte components and inside `.svelte.js` and `.svelte.ts` modules.
 
 Runes are function-like symbols that provide instructions to the Svelte compiler. You don't need to import them from anywhere — when you use Svelte, they're part of the language. This page describes the runes that are concerned with managing state in your application.
@@ -68,12 +62,12 @@ Objects and arrays are made deeply reactive by wrapping them with [`Proxies`](ht
 
 > Only POJOs (plain old JavaScript objects) are made deeply reactive. Reactivity will stop at class boundaries and leave those alone
 
-## `$state.frozen`
+## `$state.raw`
 
-State declared with `$state.frozen` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
+State declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
 
 ```js
-let person = $state.frozen({
+let person = $state.raw({
 	name: 'Heraclitus',
 	age: 49
 });
@@ -88,11 +82,7 @@ person = {
 };
 ```
 
-This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that frozen state can _contain_ reactive state (for example, a frozen array of reactive objects).
-
-In development mode, the argument to `$state.frozen` will be shallowly frozen with `Object.freeze()`, to make it obvious if you accidentally mutate it.
-
-> Objects and arrays passed to `$state.frozen` will have a `Symbol` property added to them to signal to Svelte that they are frozen. If you don't want this, pass in a clone of the object or array instead. The argument cannot be an existing state proxy created with `$state(...)`.
+This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects).
 
 ## `$state.snapshot`
 
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 1fc7798c99..333f5ebc1c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -256,9 +256,10 @@ export function should_proxy(node, scope) {
 	) {
 		return false;
 	}
+
 	if (node.type === 'Identifier' && scope !== null) {
 		const binding = scope.get(node.name);
-		// Let's see if the reference is something that can be proxied or frozen
+		// Let's see if the reference is something that can be proxied
 		if (
 			binding !== null &&
 			!binding.reassigned &&
@@ -271,6 +272,7 @@ export function should_proxy(node, scope) {
 			return should_proxy(binding.initial, null);
 		}
 	}
+
 	return true;
 }
 
diff --git a/sites/svelte-5-preview/src/lib/autocomplete.js b/sites/svelte-5-preview/src/lib/autocomplete.js
index 750b9f2e7c..99ec238834 100644
--- a/sites/svelte-5-preview/src/lib/autocomplete.js
+++ b/sites/svelte-5-preview/src/lib/autocomplete.js
@@ -68,7 +68,7 @@ function is_state(node) {
 
 /**
  * Returns `true` if we're already in a valid call expression, e.g.
- * changing an existing `$state()` to `$state.frozen()`
+ * changing an existing `$state()` to `$state.raw()`
  * @type {Test}
  */
 function is_state_call(node) {
@@ -113,8 +113,8 @@ const runes = [
 	{ snippet: '$derived.by', test: is_state_call },
 	{ snippet: '$effect(() => {\n\t${}\n});', test: is_statement },
 	{ snippet: '$effect.pre(() => {\n\t${}\n});', test: is_statement },
-	{ snippet: '$state.frozen(${});', test: is_state },
-	{ snippet: '$state.frozen', test: is_state_call },
+	{ snippet: '$state.raw(${});', test: is_state },
+	{ snippet: '$state.raw', test: is_state_call },
 	{ snippet: '$bindable()', test: is_bindable },
 	{ snippet: '$effect.root(() => {\n\t${}\n})' },
 	{ snippet: '$state.snapshot(${})' },
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index a5074f386b..2cc70d0536 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -64,14 +64,14 @@ Only plain objects and arrays [are made deeply reactive](/#H4sIAAAAAAAAE42QwWrDM
 
 In non-runes mode, a `let` declaration is treated as reactive state if it is updated at some point. Unlike `$state(...)`, which works anywhere in your app, `let` only behaves this way at the top level of a component.
 
-## `$state.frozen`
+## `$state.raw`
 
-State declared with `$state.frozen` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
+State declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
 
 ```diff
 <script>
 -	let numbers = $state([1, 2, 3]);
-+	let numbers = $state.frozen([1, 2, 3]);
++	let numbers = $state.raw([1, 2, 3]);
 </script>
 
 -<button onclick={() => numbers.push(numbers.length + 1)}>
@@ -89,9 +89,7 @@ State declared with `$state.frozen` cannot be mutated; it can only be _reassigne
 </p>
 ```
 
-This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that frozen state can _contain_ reactive state (for example, a frozen array of reactive objects).
-
-> Objects and arrays passed to `$state.frozen` will be shallowly frozen using `Object.freeze()`. If you don't want this, pass in a clone of the object or array instead.
+This can improve performance with large arrays and objects that you weren't planning to mutate anyway, since it avoids the cost of making them reactive. Note that raw state can _contain_ reactive state (for example, a raw array of reactive objects).
 
 ## `$state.snapshot`
 

From 31a444901288881e0a52c4dd80970f6e8b44e41e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 12 Aug 2024 15:42:14 -0400
Subject: [PATCH 105/196] chore: remove unused EACH_KEYED constant (#12814)

---
 .../phases/3-transform/client/visitors/EachBlock.js | 13 ++++---------
 packages/svelte/src/constants.js                    |  8 +++-----
 2 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
index 97cb057cc5..c0d06bf928 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
@@ -7,8 +7,7 @@ import {
 	EACH_IS_ANIMATED,
 	EACH_IS_CONTROLLED,
 	EACH_ITEM_IMMUTABLE,
-	EACH_ITEM_REACTIVE,
-	EACH_KEYED
+	EACH_ITEM_REACTIVE
 } from '../../../../../constants.js';
 import { dev } from '../../../../state.js';
 import { extract_paths, object } from '../../../../utils/ast.js';
@@ -42,12 +41,8 @@ export function EachBlock(node, context) {
 
 	let flags = 0;
 
-	if (node.metadata.keyed) {
-		flags |= EACH_KEYED;
-
-		if (node.index) {
-			flags |= EACH_INDEX_REACTIVE;
-		}
+	if (node.metadata.keyed && node.index) {
+		flags |= EACH_INDEX_REACTIVE;
 	}
 
 	const key_is_item =
@@ -252,7 +247,7 @@ export function EachBlock(node, context) {
 		declarations.push(b.let(node.index, index));
 	}
 
-	if (dev && (flags & EACH_KEYED) !== 0) {
+	if (dev && node.metadata.keyed) {
 		context.state.init.push(
 			b.stmt(b.call('$.validate_each_keys', b.thunk(collection), key_function))
 		);
diff --git a/packages/svelte/src/constants.js b/packages/svelte/src/constants.js
index f66c99e5c7..03fddc5ebd 100644
--- a/packages/svelte/src/constants.js
+++ b/packages/svelte/src/constants.js
@@ -1,11 +1,9 @@
 export const EACH_ITEM_REACTIVE = 1;
 export const EACH_INDEX_REACTIVE = 1 << 1;
-export const EACH_KEYED = 1 << 2;
-
 /** See EachBlock interface metadata.is_controlled for an explanation what this is */
-export const EACH_IS_CONTROLLED = 1 << 3;
-export const EACH_IS_ANIMATED = 1 << 4;
-export const EACH_ITEM_IMMUTABLE = 1 << 5;
+export const EACH_IS_CONTROLLED = 1 << 2;
+export const EACH_IS_ANIMATED = 1 << 3;
+export const EACH_ITEM_IMMUTABLE = 1 << 4;
 
 export const PROPS_IS_IMMUTABLE = 1;
 export const PROPS_IS_RUNES = 1 << 1;

From dfb675551413e9ac8bcaedebf736a73cecb94116 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 12 Aug 2024 15:42:33 -0400
Subject: [PATCH 106/196] feat: add compiler error when encountering a
 $-prefixed store value outside a `.svelte` file (#12799)

* feat: add compiler error when encountering a $-prefixed store value outside a .svelte file

* add fromState/toState APIs

* another test, update types

* rename fromState to toStore, and toState to fromStore

* docs

* add docs

* separate client/server entry points for svelte/store
---
 .changeset/curvy-papayas-pretend.md           |   5 +
 .../svelte/messages/compile-errors/script.md  |   6 +
 packages/svelte/package.json                  |   3 +-
 packages/svelte/src/compiler/errors.js        |   9 +
 .../src/compiler/phases/2-analyze/index.js    |   6 +
 packages/svelte/src/motion/spring.js          |   2 +-
 packages/svelte/src/motion/tweened.js         |   2 +-
 packages/svelte/src/store/index-client.js     | 165 ++++++++++++++++++
 packages/svelte/src/store/index-server.js     | 101 +++++++++++
 packages/svelte/src/store/public.d.ts         |   2 +-
 .../svelte/src/store/{ => shared}/index.js    |  10 +-
 .../_config.js                                |   8 +
 .../main.svelte.js                            |   3 +
 packages/svelte/tests/store/test.ts           | 108 +++++++++++-
 packages/svelte/types/index.d.ts              |  11 ++
 .../routes/docs/content/01-api/05-imports.md  |  41 +++++
 16 files changed, 472 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/curvy-papayas-pretend.md
 create mode 100644 packages/svelte/src/store/index-client.js
 create mode 100644 packages/svelte/src/store/index-server.js
 rename packages/svelte/src/store/{ => shared}/index.js (95%)
 create mode 100644 packages/svelte/tests/compiler-errors/samples/runes-module-store-subscription/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/runes-module-store-subscription/main.svelte.js

diff --git a/.changeset/curvy-papayas-pretend.md b/.changeset/curvy-papayas-pretend.md
new file mode 100644
index 0000000000..d5357dc5bc
--- /dev/null
+++ b/.changeset/curvy-papayas-pretend.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: add compiler error when encountering a $-prefixed store value outside a .svelte file
diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index d31c04b99c..6e15fa06d5 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/packages/svelte/messages/compile-errors/script.md
@@ -149,3 +149,9 @@
 ## store_invalid_subscription
 
 > Cannot reference store value inside `<script context="module">`
+
+## store_invalid_subscription_module
+
+> Cannot reference store value outside a `.svelte` file
+
+Using a `$` prefix to refer to the value of a store is only possible inside `.svelte` files, where Svelte can automatically create subscriptions when a component is mounted and unsubscribe when the component is unmounted. Consider migrating to runes instead.
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 98bf7a1fa5..57d8fa2f3d 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -76,7 +76,8 @@
     },
     "./store": {
       "types": "./types/index.d.ts",
-      "default": "./src/store/index.js"
+      "browser": "./src/store/index-client.js",
+      "default": "./src/store/index-server.js"
     },
     "./transition": {
       "types": "./types/index.d.ts",
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 8b650ebf3c..3892e688e4 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -415,6 +415,15 @@ export function store_invalid_subscription(node) {
 	e(node, "store_invalid_subscription", "Cannot reference store value inside `<script context=\"module\">`");
 }
 
+/**
+ * Cannot reference store value outside a `.svelte` file
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function store_invalid_subscription_module(node) {
+	e(node, "store_invalid_subscription_module", "Cannot reference store value outside a `.svelte` file");
+}
+
 /**
  * Declaration cannot be empty
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 40e8719a40..199ca5c1af 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -219,6 +219,12 @@ export function analyze_module(ast, options) {
 		if (name === '$' || name[1] === '$') {
 			e.global_reference_invalid(references[0].node, name);
 		}
+
+		const binding = scope.get(name.slice(1));
+
+		if (binding !== null) {
+			e.store_invalid_subscription_module(references[0].node);
+		}
 	}
 
 	walk(
diff --git a/packages/svelte/src/motion/spring.js b/packages/svelte/src/motion/spring.js
index c3b4177579..c21ef42f99 100644
--- a/packages/svelte/src/motion/spring.js
+++ b/packages/svelte/src/motion/spring.js
@@ -1,7 +1,7 @@
 /** @import { Task } from '#client' */
 /** @import { SpringOpts, SpringUpdateOpts, TickContext } from './private.js' */
 /** @import { Spring } from './public.js' */
-import { writable } from '../store/index.js';
+import { writable } from '../store/shared/index.js';
 import { loop } from '../internal/client/loop.js';
 import { raf } from '../internal/client/timing.js';
 import { is_date } from './utils.js';
diff --git a/packages/svelte/src/motion/tweened.js b/packages/svelte/src/motion/tweened.js
index a1ec502fc8..a264cc9da5 100644
--- a/packages/svelte/src/motion/tweened.js
+++ b/packages/svelte/src/motion/tweened.js
@@ -1,7 +1,7 @@
 /** @import { Task } from '../internal/client/types' */
 /** @import { Tweened } from './public' */
 /** @import { TweenedOptions } from './private' */
-import { writable } from '../store/index.js';
+import { writable } from '../store/shared/index.js';
 import { raf } from '../internal/client/timing.js';
 import { loop } from '../internal/client/loop.js';
 import { linear } from '../easing/index.js';
diff --git a/packages/svelte/src/store/index-client.js b/packages/svelte/src/store/index-client.js
new file mode 100644
index 0000000000..b612124e3c
--- /dev/null
+++ b/packages/svelte/src/store/index-client.js
@@ -0,0 +1,165 @@
+/** @import { Readable, Writable } from './public.js' */
+import { noop } from '../internal/shared/utils.js';
+import {
+	effect_root,
+	effect_tracking,
+	render_effect
+} from '../internal/client/reactivity/effects.js';
+import { source } from '../internal/client/reactivity/sources.js';
+import { get as get_source, tick } from '../internal/client/runtime.js';
+import { increment } from '../reactivity/utils.js';
+import { get, writable } from './shared/index.js';
+
+export { derived, get, readable, readonly, writable } from './shared/index.js';
+
+/**
+ * @template V
+ * @overload
+ * @param {() => V} get
+ * @param {(v: V) => void} set
+ * @returns {Writable<V>}
+ */
+/**
+ * @template V
+ * @overload
+ * @param {() => V} get
+ * @returns {Readable<V>}
+ */
+/**
+ * Create a store from a function that returns state, and (to make a writable store), an
+ * optional second function that sets state.
+ *
+ * ```ts
+ * import { toStore } from 'svelte/store';
+ *
+ * let count = $state(0);
+ *
+ * const store = toStore(() => count, (v) => (count = v));
+ * ```
+ * @template V
+ * @param {() => V} get
+ * @param {(v: V) => void} [set]
+ * @returns {Writable<V> | Readable<V>}
+ */
+export function toStore(get, set) {
+	const store = writable(get(), (set) => {
+		let ran = false;
+
+		// TODO do we need a different implementation on the server?
+		const teardown = effect_root(() => {
+			render_effect(() => {
+				const value = get();
+				if (ran) set(value);
+			});
+		});
+
+		ran = true;
+
+		return teardown;
+	});
+
+	if (set) {
+		return {
+			set,
+			update: (fn) => set(fn(get())),
+			subscribe: store.subscribe
+		};
+	}
+
+	return {
+		subscribe: store.subscribe
+	};
+}
+
+/**
+ * @template V
+ * @overload
+ * @param {Writable<V>} store
+ * @returns {{ current: V }}
+ */
+/**
+ * @template V
+ * @overload
+ * @param {Readable<V>} store
+ * @returns {{ readonly current: V }}
+ */
+/**
+ * Convert a store to an object with a reactive `current` property. If `store`
+ * is a readable store, `current` will be a readonly property.
+ *
+ * ```ts
+ * import { fromStore, get, writable } from 'svelte/store';
+ *
+ * const store = writable(0);
+ *
+ * const count = fromStore(store);
+ *
+ * count.current; // 0;
+ * store.set(1);
+ * count.current; // 1
+ *
+ * count.current += 1;
+ * get(store); // 2
+ * ```
+ * @template V
+ * @param {Writable<V> | Readable<V>} store
+ */
+export function fromStore(store) {
+	let value = /** @type {V} */ (undefined);
+	let version = source(0);
+	let subscribers = 0;
+
+	let unsubscribe = noop;
+
+	function current() {
+		if (effect_tracking()) {
+			get_source(version);
+
+			render_effect(() => {
+				if (subscribers === 0) {
+					let ran = false;
+
+					unsubscribe = store.subscribe((v) => {
+						value = v;
+						if (ran) increment(version);
+					});
+
+					ran = true;
+				}
+
+				subscribers += 1;
+
+				return () => {
+					subscribers -= 1;
+
+					tick().then(() => {
+						if (subscribers === 0) {
+							unsubscribe();
+						}
+					});
+				};
+			});
+
+			return value;
+		}
+
+		return get(store);
+	}
+
+	if ('set' in store) {
+		return {
+			get current() {
+				return current();
+			},
+			set current(v) {
+				store.set(v);
+			}
+		};
+	}
+
+	return {
+		get current() {
+			return current();
+		}
+	};
+}
diff --git a/packages/svelte/src/store/index-server.js b/packages/svelte/src/store/index-server.js
new file mode 100644
index 0000000000..3eddd781f2
--- /dev/null
+++ b/packages/svelte/src/store/index-server.js
@@ -0,0 +1,101 @@
+/** @import { Readable, Writable } from './public.js' */
+import { get, writable } from './shared/index.js';
+
+export { derived, get, readable, readonly, writable } from './shared/index.js';
+
+/**
+ * @template V
+ * @overload
+ * @param {() => V} get
+ * @param {(v: V) => void} set
+ * @returns {Writable<V>}
+ */
+/**
+ * @template V
+ * @overload
+ * @param {() => V} get
+ * @returns {Readable<V>}
+ */
+/**
+ * Create a store from a function that returns state, and (to make a writable store), an
+ * optional second function that sets state.
+ *
+ * ```ts
+ * import { toStore } from 'svelte/store';
+ *
+ * let count = $state(0);
+ *
+ * const store = toStore(() => count, (v) => (count = v));
+ * ```
+ * @template V
+ * @param {() => V} get
+ * @param {(v: V) => void} [set]
+ * @returns {Writable<V> | Readable<V>}
+ */
+export function toStore(get, set) {
+	const store = writable(get());
+
+	if (set) {
+		return {
+			set,
+			update: (fn) => set(fn(get())),
+			subscribe: store.subscribe
+		};
+	}
+
+	return {
+		subscribe: store.subscribe
+	};
+}
+
+/**
+ * @template V
+ * @overload
+ * @param {Writable<V>} store
+ * @returns {{ current: V }}
+ */
+/**
+ * @template V
+ * @overload
+ * @param {Readable<V>} store
+ * @returns {{ readonly current: V }}
+ */
+/**
+ * Convert a store to an object with a reactive `current` property. If `store`
+ * is a readable store, `current` will be a readonly property.
+ *
+ * ```ts
+ * import { fromStore, get, writable } from 'svelte/store';
+ *
+ * const store = writable(0);
+ *
+ * const count = fromStore(store);
+ *
+ * count.current; // 0;
+ * store.set(1);
+ * count.current; // 1
+ *
+ * count.current += 1;
+ * get(store); // 2
+ * ```
+ * @template V
+ * @param {Writable<V> | Readable<V>} store
+ */
+export function fromStore(store) {
+	if ('set' in store) {
+		return {
+			get current() {
+				return get(store);
+			},
+			set current(v) {
+				store.set(v);
+			}
+		};
+	}
+
+	return {
+		get current() {
+			return get(store);
+		}
+	};
+}
diff --git a/packages/svelte/src/store/public.d.ts b/packages/svelte/src/store/public.d.ts
index 63cb6bfc4c..ec262f7ebf 100644
--- a/packages/svelte/src/store/public.d.ts
+++ b/packages/svelte/src/store/public.d.ts
@@ -48,4 +48,4 @@ interface Writable<T> extends Readable<T> {
 
 export { Readable, StartStopNotifier, Subscriber, Unsubscriber, Updater, Writable };
 
-export * from './index.js';
+export * from './index-client.js';
diff --git a/packages/svelte/src/store/index.js b/packages/svelte/src/store/shared/index.js
similarity index 95%
rename from packages/svelte/src/store/index.js
rename to packages/svelte/src/store/shared/index.js
index 393144cff0..9bf08b4160 100644
--- a/packages/svelte/src/store/index.js
+++ b/packages/svelte/src/store/shared/index.js
@@ -1,8 +1,8 @@
-/** @import { Readable, StartStopNotifier, Subscriber, Unsubscriber, Updater, Writable } from './public' */
-/** @import { Stores, StoresValues, SubscribeInvalidateTuple } from './private' */
-import { noop, run_all } from '../internal/shared/utils.js';
-import { safe_not_equal } from '../internal/client/reactivity/equality.js';
-import { subscribe_to_store } from './utils.js';
+/** @import { Readable, StartStopNotifier, Subscriber, Unsubscriber, Updater, Writable } from '../public.js' */
+/** @import { Stores, StoresValues, SubscribeInvalidateTuple } from '../private.js' */
+import { noop, run_all } from '../../internal/shared/utils.js';
+import { safe_not_equal } from '../../internal/client/reactivity/equality.js';
+import { subscribe_to_store } from '../utils.js';
 
 /**
  * @type {Array<SubscribeInvalidateTuple<any> | any>}
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-module-store-subscription/_config.js b/packages/svelte/tests/compiler-errors/samples/runes-module-store-subscription/_config.js
new file mode 100644
index 0000000000..47ecd8f902
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/runes-module-store-subscription/_config.js
@@ -0,0 +1,8 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'store_invalid_subscription_module',
+		message: 'Cannot reference store value outside a `.svelte` file'
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-module-store-subscription/main.svelte.js b/packages/svelte/tests/compiler-errors/samples/runes-module-store-subscription/main.svelte.js
new file mode 100644
index 0000000000..f4145e93ba
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/runes-module-store-subscription/main.svelte.js
@@ -0,0 +1,3 @@
+import { store } from 'somewhere';
+
+console.log($store);
diff --git a/packages/svelte/tests/store/test.ts b/packages/svelte/tests/store/test.ts
index 6a89e39df8..74ad892577 100644
--- a/packages/svelte/tests/store/test.ts
+++ b/packages/svelte/tests/store/test.ts
@@ -1,5 +1,17 @@
 import { describe, it, assert } from 'vitest';
-import { readable, writable, derived, get, readonly, type Readable } from 'svelte/store';
+import {
+	readable,
+	writable,
+	derived,
+	get,
+	readonly,
+	toStore,
+	type Readable,
+	fromStore
+} from 'svelte/store';
+import { source, set } from '../../src/internal/client/reactivity/sources';
+import * as $ from '../../src/internal/client/runtime';
+import { effect_root, render_effect } from 'svelte/internal/client';
 
 describe('writable', () => {
 	it('creates a writable store', () => {
@@ -574,3 +586,97 @@ describe('readonly', () => {
 		assert.throws(() => readableStore.set(3));
 	});
 });
+
+describe('toStore', () => {
+	it('creates a readable store from state', () => {
+		const count = source(0);
+
+		const store = toStore(() => $.get(count));
+
+		const log: number[] = [];
+
+		const unsubscribe = store.subscribe((value) => {
+			log.push(value);
+		});
+
+		assert.deepEqual(log, [0]);
+
+		set(count, 1);
+		$.flush_sync();
+		assert.deepEqual(log, [0, 1]);
+
+		unsubscribe();
+	});
+
+	it('creates a writable store from state', () => {
+		const count = source(0);
+
+		const store = toStore(
+			() => $.get(count),
+			(v) => set(count, v)
+		);
+
+		const log: number[] = [];
+
+		const unsubscribe = store.subscribe((value) => {
+			log.push(value);
+		});
+
+		assert.deepEqual(log, [0]);
+
+		set(count, 1);
+		$.flush_sync();
+		assert.deepEqual(log, [0, 1]);
+
+		store.set(2);
+		assert.equal($.get(count), 2);
+
+		unsubscribe();
+	});
+});
+
+describe('fromStore', () => {
+	it('creates state from a writable store', () => {
+		const store = writable(0);
+
+		const count = fromStore(store);
+
+		assert.equal(count.current, 0);
+
+		const log: number[] = [];
+
+		const teardown = effect_root(() => {
+			render_effect(() => {
+				log.push(count.current);
+			});
+		});
+
+		assert.deepEqual(log, [0]);
+
+		store.set(1);
+		$.flush_sync();
+		assert.deepEqual(log, [0, 1]);
+
+		count.current = 2;
+		$.flush_sync();
+		assert.deepEqual(log, [0, 1, 2]);
+
+		assert.equal(get(store), 2);
+
+		teardown();
+	});
+
+	it('creates state from a readable store', () => {
+		const store = readable(0);
+
+		const count = fromStore(store);
+
+		assert.equal(count.current, 0);
+
+		assert.throws(
+			// @ts-expect-error property is readonly
+			() => (count.current += 1),
+			'Cannot set property current of #<Object> which has only a getter'
+		);
+	});
+});
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index f31cb2a6d3..9b6198c547 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2306,6 +2306,17 @@ declare module 'svelte/store' {
 		 */
 		update(this: void, updater: Updater<T>): void;
 	}
+	export function toStore<V>(get: () => V, set: (v: V) => void): Writable<V>;
+
+	export function toStore<V>(get: () => V): Readable<V>;
+
+	export function fromStore<V>(store: Writable<V>): {
+		current: V;
+	};
+
+	export function fromStore<V>(store: Readable<V>): {
+		readonly current: V;
+	};
 	/**
 	 * Creates a `Readable` store that allows reading by subscription.
 	 *
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
index a42cde2319..7cbec56e17 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/05-imports.md
@@ -192,6 +192,47 @@ const result = render(App, {
 
 If the `css` compiler option was set to `'injected'`, `<style>` elements will be included in the `head`.
 
+## `svelte/store`
+
+In addition to the existing store-related imports such as `writable`, `svelte/store` gains two new functions: `fromStore` and `toStore`. These allow you to easily use stores and rune-based state interchangeably, even outside `.svelte` files.
+
+### `fromStore`
+
+Takes a store and turns it into an object with a reactive (and readonly, if the store is not [writable](https://svelte.dev/docs/svelte-store#writable)) `current` property.
+
+```js
+import { fromStore, get, writable } from 'svelte/store';
+
+const store = writable(0);
+
+const count = fromStore(store);
+
+count.current; // 0;
+store.set(1);
+count.current; // 1
+
+count.current += 1;
+get(store); // 2
+```
+
+### `toStore`
+
+Creates a store from a function that returns reactive state (and, optionally, a second function that sets the state):
+
+```js
+import { toStore } from 'svelte/store';
+
+let count = $state(0);
+
+const store = toStore(
+	() => count,
+	(v) => (count = v)
+);
+
+store.set(1);
+count; // 1
+```
+
 ## `svelte/elements`
 
 Svelte provides built-in [DOM types](https://github.com/sveltejs/svelte/blob/master/packages/svelte/elements.d.ts). A common use case for DOM types is forwarding props to an HTML element. To properly type your props and get full intellisense, your props interface should extend the attributes type for your HTML element:

From b13d331f78ceef9987cdedd60ad86904b5b296b8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 12 Aug 2024 15:53:29 -0400
Subject: [PATCH 107/196] chore: remove stuff identified by knip as unused
 (#12815)

* chore: remove stuff identified by knip as unused

* need to continue exporting Parser, it is referenced as a type
---
 packages/svelte/package.json                  |  4 ++-
 .../templates/compile-errors.js               |  2 +-
 .../templates/compile-warnings.js             |  2 +-
 packages/svelte/src/compiler/errors.js        |  2 +-
 .../client/visitors/AssignmentExpression.js   |  2 +-
 packages/svelte/src/compiler/utils/assert.js  |  9 ------
 packages/svelte/src/compiler/warnings.js      |  2 +-
 .../internal/client/reactivity/deriveds.js    |  7 +----
 .../src/internal/client/reactivity/effects.js |  2 +-
 packages/svelte/src/internal/shared/utils.js  |  2 --
 packages/svelte/src/reactivity/utils.js       | 30 -------------------
 packages/svelte/src/utils.js                  |  4 +--
 12 files changed, 12 insertions(+), 56 deletions(-)

diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 57d8fa2f3d..e7dedf022b 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -150,7 +150,9 @@
       "src/*/index.js",
       "src/index-client.ts",
       "src/index-server.ts",
-      "src/index.d.ts"
+      "src/index.d.ts",
+      "tests/**/*.js",
+      "tests/**/*.ts"
     ],
     "project": [
       "src/**"
diff --git a/packages/svelte/scripts/process-messages/templates/compile-errors.js b/packages/svelte/scripts/process-messages/templates/compile-errors.js
index 349e0b38ef..a407699e1b 100644
--- a/packages/svelte/scripts/process-messages/templates/compile-errors.js
+++ b/packages/svelte/scripts/process-messages/templates/compile-errors.js
@@ -2,7 +2,7 @@ import { CompileDiagnostic } from './utils/compile_diagnostic.js';
 
 /** @typedef {{ start?: number, end?: number }} NodeLike */
 
-export class InternalCompileError extends CompileDiagnostic {
+class InternalCompileError extends CompileDiagnostic {
 	name = 'CompileError';
 
 	/**
diff --git a/packages/svelte/scripts/process-messages/templates/compile-warnings.js b/packages/svelte/scripts/process-messages/templates/compile-warnings.js
index e0de722e80..8300d803d5 100644
--- a/packages/svelte/scripts/process-messages/templates/compile-warnings.js
+++ b/packages/svelte/scripts/process-messages/templates/compile-warnings.js
@@ -3,7 +3,7 @@ import { CompileDiagnostic } from './utils/compile_diagnostic.js';
 
 /** @typedef {{ start?: number, end?: number }} NodeLike */
 
-export class InternalCompileWarning extends CompileDiagnostic {
+class InternalCompileWarning extends CompileDiagnostic {
 	name = 'CompileWarning';
 
 	/**
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index 3892e688e4..c6c388fd3f 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -3,7 +3,7 @@
 import { CompileDiagnostic } from './utils/compile_diagnostic.js';
 
 /** @typedef {{ start?: number, end?: number }} NodeLike */
-export class InternalCompileError extends CompileDiagnostic {
+class InternalCompileError extends CompileDiagnostic {
 	name = 'CompileError';
 
 	/**
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
index bdc144fe32..6636b82a20 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
@@ -21,7 +21,7 @@ export function AssignmentExpression(node, context) {
  * @param {Context} context
  * @returns {Expression | null}
  */
-export function build_assignment(operator, left, right, context) {
+function build_assignment(operator, left, right, context) {
 	// Handle class private/public state assignment cases
 	if (
 		context.state.analysis.runes &&
diff --git a/packages/svelte/src/compiler/utils/assert.js b/packages/svelte/src/compiler/utils/assert.js
index b6dc6bf90c..6434e4d3e6 100644
--- a/packages/svelte/src/compiler/utils/assert.js
+++ b/packages/svelte/src/compiler/utils/assert.js
@@ -1,12 +1,3 @@
-/**
- * @template T
- * @param {T} value
- * @returns {asserts value is NonNullable<T>}
- */
-export function ok(value) {
-	if (!value) throw new Error('Assertion failed');
-}
-
 /**
  * @template T
  * @param {any} actual
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
index 9a2628068b..0aab91b540 100644
--- a/packages/svelte/src/compiler/warnings.js
+++ b/packages/svelte/src/compiler/warnings.js
@@ -10,7 +10,7 @@ import {
 import { CompileDiagnostic } from './utils/compile_diagnostic.js';
 
 /** @typedef {{ start?: number, end?: number }} NodeLike */
-export class InternalCompileWarning extends CompileDiagnostic {
+class InternalCompileWarning extends CompileDiagnostic {
 	name = 'CompileWarning';
 
 	/**
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
index 2063b96cb0..6ec5946070 100644
--- a/packages/svelte/src/internal/client/reactivity/deriveds.js
+++ b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -14,8 +14,6 @@ import {
 import { equals, safe_equals } from './equality.js';
 import * as e from '../errors.js';
 
-export let updating_derived = false;
-
 /**
  * @template V
  * @param {() => V} fn
@@ -101,11 +99,8 @@ export function update_derived(derived) {
 		stack.push(derived);
 	}
 
-	var previous_updating_derived = updating_derived;
-	updating_derived = true;
 	destroy_derived_children(derived);
 	var value = update_reaction(derived);
-	updating_derived = previous_updating_derived;
 
 	if (DEV) {
 		stack.pop();
@@ -128,7 +123,7 @@ export function update_derived(derived) {
  * @param {Derived} signal
  * @returns {void}
  */
-export function destroy_derived(signal) {
+function destroy_derived(signal) {
 	destroy_derived_children(signal);
 	remove_reactions(signal, 0);
 	set_signal_status(signal, DESTROYED);
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index d05243bb14..c5be02466e 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -61,7 +61,7 @@ export function validate_effect(rune) {
  * @param {Effect} effect
  * @param {Reaction} parent_effect
  */
-export function push_effect(effect, parent_effect) {
+function push_effect(effect, parent_effect) {
 	var parent_last = parent_effect.last;
 	if (parent_last === null) {
 		parent_effect.last = parent_effect.first = effect;
diff --git a/packages/svelte/src/internal/shared/utils.js b/packages/svelte/src/internal/shared/utils.js
index f32af747a4..c2f0b24c11 100644
--- a/packages/svelte/src/internal/shared/utils.js
+++ b/packages/svelte/src/internal/shared/utils.js
@@ -3,9 +3,7 @@
 export var is_array = Array.isArray;
 export var array_from = Array.from;
 export var object_keys = Object.keys;
-export var object_assign = Object.assign;
 export var is_frozen = Object.isFrozen;
-export var object_freeze = Object.freeze;
 export var define_property = Object.defineProperty;
 export var get_descriptor = Object.getOwnPropertyDescriptor;
 export var get_descriptors = Object.getOwnPropertyDescriptors;
diff --git a/packages/svelte/src/reactivity/utils.js b/packages/svelte/src/reactivity/utils.js
index 355a000e9d..cd55e0e0ba 100644
--- a/packages/svelte/src/reactivity/utils.js
+++ b/packages/svelte/src/reactivity/utils.js
@@ -1,36 +1,6 @@
 /** @import { Source } from '#client' */
 import { set } from '../internal/client/reactivity/sources.js';
 
-/**
- * @template T
- * @template U
- * @param {Iterable<T>} iterable
- * @param {(value: T) => U} fn
- * @param {string} name
- * @returns {IterableIterator<U>}
- */
-export function map(iterable, fn, name) {
-	return {
-		[Symbol.iterator]: get_this,
-		next() {
-			for (const value of iterable) {
-				return { done: false, value: fn(value) };
-			}
-
-			return { done: true, value: undefined };
-		},
-		// @ts-expect-error
-		get [Symbol.toStringTag]() {
-			return name;
-		}
-	};
-}
-
-/** @this {any} */
-function get_this() {
-	return this;
-}
-
 /** @param {Source<number>} source */
 export function increment(source) {
 	set(source, source.v + 1);
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index f5a523f107..0cf50bd774 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -107,7 +107,7 @@ export function is_capture_event(name) {
 }
 
 /** List of Element events that will be delegated */
-export const DELEGATED_EVENTS = [
+const DELEGATED_EVENTS = [
 	'beforeinput',
 	'click',
 	'change',
@@ -144,7 +144,7 @@ export function is_delegated(event_name) {
 /**
  * Attributes that are boolean, i.e. they are present or not present.
  */
-export const DOM_BOOLEAN_ATTRIBUTES = [
+const DOM_BOOLEAN_ATTRIBUTES = [
 	'allowfullscreen',
 	'async',
 	'autofocus',

From c2fb1a6df156c7cd93947e0a00b91d05d938da8a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Mon, 12 Aug 2024 20:02:41 -0400
Subject: [PATCH 108/196] Version Packages (next) (#12816)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 1 +
 packages/svelte/CHANGELOG.md   | 6 ++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index a1398bf32c..e430f32070 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -107,6 +107,7 @@
     "curvy-buses-laugh",
     "curvy-cups-cough",
     "curvy-flies-exercise",
+    "curvy-papayas-pretend",
     "curvy-ties-shout",
     "cyan-colts-raise",
     "cyan-ducks-teach",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 40fd399cd8..922a86404c 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.0.0-next.219
+
+### Patch Changes
+
+- feat: add compiler error when encountering a $-prefixed store value outside a .svelte file ([#12799](https://github.com/sveltejs/svelte/pull/12799))
+
 ## 5.0.0-next.218
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index e7dedf022b..5e03c1317e 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.218",
+  "version": "5.0.0-next.219",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 1012320282..61e64a09a4 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.218';
+export const VERSION = '5.0.0-next.219';
 export const PUBLIC_VERSION = '5';

From c51dfcfc0091a368d4c78c0483b6f4ef9842583c Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 13 Aug 2024 10:42:45 -0400
Subject: [PATCH 109/196] feat: warn on invalid event handlers (#12818)

* feat: warn on invalid event handlers

* handle assignments etc

* handle component events too where possible

* lint
---
 .changeset/brown-months-flow.md               |  5 ++
 .../messages/client-warnings/warnings.md      |  4 ++
 .../client/visitors/shared/events.js          | 53 +++++++++++++++---
 .../internal/client/dom/elements/events.js    | 54 +++++++++++++++++++
 packages/svelte/src/internal/client/index.js  |  2 +-
 .../internal/client/reactivity/deriveds.js    | 25 +++++----
 .../svelte/src/internal/client/warnings.js    | 14 +++++
 .../Button.svelte                             |  7 +++
 .../_config.js                                | 17 ++++++
 .../main.svelte                               |  9 ++++
 .../event-handler-invalid-warning/_config.js  | 17 ++++++
 .../event-handler-invalid-warning/main.svelte | 11 ++++
 12 files changed, 200 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/brown-months-flow.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/Button.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/main.svelte

diff --git a/.changeset/brown-months-flow.md b/.changeset/brown-months-flow.md
new file mode 100644
index 0000000000..77a1781adb
--- /dev/null
+++ b/.changeset/brown-months-flow.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: warn on invalid event handlers
diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md
index cae88b0bef..3072bc4df1 100644
--- a/packages/svelte/messages/client-warnings/warnings.md
+++ b/packages/svelte/messages/client-warnings/warnings.md
@@ -4,6 +4,10 @@
 
 > `%binding%` (%location%) is binding to a non-reactive property
 
+## event_handler_invalid
+
+> %handler% should be a function. Did you mean to %suggestion%?
+
 ## hydration_attribute_changed
 
 > The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
index 9510715a91..3a4ce97345 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
@@ -1,7 +1,8 @@
 /** @import { Expression } from 'estree' */
-/** @import { Attribute, ExpressionMetadata, ExpressionTag, OnDirective, SvelteNode } from '#compiler' */
+/** @import { Attribute, ExpressionMetadata, ExpressionTag, SvelteNode } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
-import { is_capture_event, is_passive_event } from '../../../../../../utils.js';
+import { is_capture_event } from '../../../../../../utils.js';
+import { dev, locator } from '../../../../../state.js';
 import * as b from '../../../../../utils/builders.js';
 
 /**
@@ -136,9 +137,47 @@ export function build_event_handler(node, metadata, context) {
 	}
 
 	// wrap the handler in a function, so the expression is re-evaluated for each event
-	return b.function(
-		null,
-		[b.rest(b.id('$$args'))],
-		b.block([b.stmt(b.call(b.member(handler, b.id('apply'), false, true), b.this, b.id('$$args')))])
-	);
+	let call = b.call(b.member(handler, b.id('apply'), false, true), b.this, b.id('$$args'));
+
+	if (dev) {
+		const loc = locator(/** @type {number} */ (node.start));
+
+		const remove_parens =
+			node.type === 'CallExpression' &&
+			node.arguments.length === 0 &&
+			node.callee.type === 'Identifier';
+
+		call = b.call(
+			'$.apply',
+			b.thunk(handler),
+			b.this,
+			b.id('$$args'),
+			b.id(context.state.analysis.name),
+			loc && b.array([b.literal(loc.line), b.literal(loc.column)]),
+			has_side_effects(node) && b.true,
+			remove_parens && b.true
+		);
+	}
+
+	return b.function(null, [b.rest(b.id('$$args'))], b.block([b.stmt(call)]));
+}
+
+/**
+ * @param {Expression} node
+ */
+function has_side_effects(node) {
+	if (
+		node.type === 'CallExpression' ||
+		node.type === 'NewExpression' ||
+		node.type === 'AssignmentExpression' ||
+		node.type === 'UpdateExpression'
+	) {
+		return true;
+	}
+
+	if (node.type === 'SequenceExpression') {
+		return node.expressions.some(has_side_effects);
+	}
+
+	return false;
 }
diff --git a/packages/svelte/src/internal/client/dom/elements/events.js b/packages/svelte/src/internal/client/dom/elements/events.js
index 2c9a63436d..7223c969e2 100644
--- a/packages/svelte/src/internal/client/dom/elements/events.js
+++ b/packages/svelte/src/internal/client/dom/elements/events.js
@@ -1,7 +1,11 @@
+/** @import { Location } from 'locate-character' */
 import { teardown } from '../../reactivity/effects.js';
 import { define_property, is_array } from '../../../shared/utils.js';
 import { hydrating } from '../hydration.js';
 import { queue_micro_task } from '../task.js';
+import { dev_current_component_function } from '../../runtime.js';
+import { FILENAME } from '../../../../constants.js';
+import * as w from '../../warnings.js';
 
 /** @type {Set<string>} */
 export const all_registered_events = new Set();
@@ -273,3 +277,53 @@ export function handle_event_propagation(event) {
 		current_target = handler_element;
 	}
 }
+
+/**
+ * In dev, warn if an event handler is not a function, as it means the
+ * user probably called the handler or forgot to add a `() =>`
+ * @param {() => (event: Event, ...args: any) => void} thunk
+ * @param {EventTarget} element
+ * @param {[Event, ...any]} args
+ * @param {any} component
+ * @param {[number, number]} [loc]
+ * @param {boolean} [remove_parens]
+ */
+export function apply(
+	thunk,
+	element,
+	args,
+	component,
+	loc,
+	has_side_effects = false,
+	remove_parens = false
+) {
+	let handler;
+	let error;
+
+	try {
+		handler = thunk();
+	} catch (e) {
+		error = e;
+	}
+
+	if (typeof handler === 'function') {
+		handler.apply(element, args);
+	} else if (has_side_effects || handler != null) {
+		const filename = component?.[FILENAME];
+		const location = filename
+			? loc
+				? ` at ${filename}:${loc[0]}:${loc[1]}`
+				: ` in ${filename}`
+			: '';
+
+		const event_name = args[0].type;
+		const description = `\`${event_name}\` handler${location}`;
+		const suggestion = remove_parens ? 'remove the trailing `()`' : 'add a leading `() =>`';
+
+		w.event_handler_invalid(description, suggestion);
+
+		if (error) {
+			throw error;
+		}
+	}
+}
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 489d45df02..5739e9646c 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -36,7 +36,7 @@ export {
 	set_checked
 } from './dom/elements/attributes.js';
 export { set_class, set_svg_class, set_mathml_class, toggle_class } from './dom/elements/class.js';
-export { event, delegate, replay_events } from './dom/elements/events.js';
+export { apply, event, delegate, replay_events } from './dom/elements/events.js';
 export { autofocus, remove_textarea_child } from './dom/elements/misc.js';
 export { set_style } from './dom/elements/style.js';
 export { animation, transition } from './dom/elements/transitions.js';
diff --git a/packages/svelte/src/internal/client/reactivity/deriveds.js b/packages/svelte/src/internal/client/reactivity/deriveds.js
index 6ec5946070..6b5fc8dae4 100644
--- a/packages/svelte/src/internal/client/reactivity/deriveds.js
+++ b/packages/svelte/src/internal/client/reactivity/deriveds.js
@@ -91,19 +91,24 @@ let stack = [];
  * @returns {void}
  */
 export function update_derived(derived) {
-	if (DEV) {
-		if (stack.includes(derived)) {
-			e.derived_references_self();
-		}
+	var value;
 
-		stack.push(derived);
-	}
+	if (DEV) {
+		try {
+			if (stack.includes(derived)) {
+				e.derived_references_self();
+			}
 
-	destroy_derived_children(derived);
-	var value = update_reaction(derived);
+			stack.push(derived);
 
-	if (DEV) {
-		stack.pop();
+			destroy_derived_children(derived);
+			value = update_reaction(derived);
+		} finally {
+			stack.pop();
+		}
+	} else {
+		destroy_derived_children(derived);
+		value = update_reaction(derived);
 	}
 
 	var status =
diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js
index 23c00f971d..b7268ee1d7 100644
--- a/packages/svelte/src/internal/client/warnings.js
+++ b/packages/svelte/src/internal/client/warnings.js
@@ -19,6 +19,20 @@ export function binding_property_non_reactive(binding, location) {
 	}
 }
 
+/**
+ * %handler% should be a function. Did you mean to %suggestion%?
+ * @param {string} handler
+ * @param {string} suggestion
+ */
+export function event_handler_invalid(handler, suggestion) {
+	if (DEV) {
+		console.warn(`%c[svelte] event_handler_invalid\n%c${handler} should be a function. Did you mean to ${suggestion}?`, bold, normal);
+	} else {
+		// TODO print a link to the documentation
+		console.warn("event_handler_invalid");
+	}
+}
+
 /**
  * The `%attribute%` attribute on `%html%` changed its value between server and client renders. The client value, `%value%`, will be ignored in favour of the server value
  * @param {string} attribute
diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/Button.svelte b/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/Button.svelte
new file mode 100644
index 0000000000..47dee4df1a
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/Button.svelte
@@ -0,0 +1,7 @@
+<script>
+	let { children, onclick } = $props();
+</script>
+
+<button {onclick}>
+	{@render children()}
+</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/_config.js
new file mode 100644
index 0000000000..7f8e745e01
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/_config.js
@@ -0,0 +1,17 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, target, warnings }) {
+		target.querySelector('button')?.click();
+
+		assert.deepEqual(warnings, [
+			'`click` handler at Button.svelte:5:9 should be a function. Did you mean to add a leading `() =>`?'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/main.svelte
new file mode 100644
index 0000000000..2398cec9a1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-handler-component-invalid-warning/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Button from './Button.svelte';
+
+	let count = $state(0);
+</script>
+
+<Button onclick={count++}>
+	clicks: {count}
+</Button>
diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/_config.js b/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/_config.js
new file mode 100644
index 0000000000..c1461d4ada
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/_config.js
@@ -0,0 +1,17 @@
+import { test } from '../../test';
+
+export default test({
+	mode: ['client'],
+
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, target, warnings }) {
+		target.querySelector('button')?.click();
+
+		assert.deepEqual(warnings, [
+			'`click` handler at main.svelte:9:17 should be a function. Did you mean to remove the trailing `()`?'
+		]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/main.svelte
new file mode 100644
index 0000000000..ea0b320c18
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/event-handler-invalid-warning/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let count = $state(0);
+
+	function increment() {
+		count += 1;
+	}
+</script>
+
+<button onclick={increment()}>
+	clicks: {count}
+</button>

From adcceb4acaece8ec811fc6c8c815047302c767d7 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 13 Aug 2024 15:43:14 +0100
Subject: [PATCH 110/196] chore: improve set_text perf (#12823)

* chore: improve set_text perf

* chore: improve set_text perf

* chore: improve set_text perf

* chore: improve set_text perf
---
 packages/svelte/src/internal/client/render.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index 3cc2771e33..c991023325 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -47,7 +47,9 @@ export function set_text(text, value) {
 
 	if (prev !== value) {
 		// @ts-expect-error
-		text.nodeValue = text.__t = value;
+		text.__t = value;
+		// It's faster to make the value a string rather than passing a non-string to nodeValue
+		text.nodeValue = value == null ? '' : value + '';
 	}
 }
 

From 555e90f932d87826f2791da0a1e4c657c4369089 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 13 Aug 2024 16:02:12 +0100
Subject: [PATCH 111/196] Version Packages (next) (#12825)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 1 +
 packages/svelte/CHANGELOG.md   | 6 ++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index e430f32070..92d70dbfdf 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -55,6 +55,7 @@
     "brown-geckos-fry",
     "brown-houses-obey",
     "brown-insects-float",
+    "brown-months-flow",
     "brown-months-fry",
     "brown-spoons-boil",
     "calm-buses-clap",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 922a86404c..b9063b6140 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.0.0-next.220
+
+### Patch Changes
+
+- feat: warn on invalid event handlers ([#12818](https://github.com/sveltejs/svelte/pull/12818))
+
 ## 5.0.0-next.219
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 5e03c1317e..dbc34c8871 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.219",
+  "version": "5.0.0-next.220",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 61e64a09a4..e2181f2f5e 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.219';
+export const VERSION = '5.0.0-next.220';
 export const PUBLIC_VERSION = '5';

From 873a184b411b669c4a854799a7282be4a187c93a Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 14 Aug 2024 13:04:45 +0100
Subject: [PATCH 112/196] fix: ensure each key validation occurs for updates
 (#12836)

* fix: ensure each key validation occurs for updates

* fix: ensure each key validation occurs for updates
---
 .changeset/tame-dodos-float.md                |  5 +++
 .../svelte/src/internal/client/validate.js    | 44 ++++++++++---------
 .../keyed-each-dev-unique-update/_config.js   | 16 +++++++
 .../keyed-each-dev-unique-update/main.svelte  | 21 +++++++++
 4 files changed, 65 insertions(+), 21 deletions(-)
 create mode 100644 .changeset/tame-dodos-float.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/keyed-each-dev-unique-update/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/keyed-each-dev-unique-update/main.svelte

diff --git a/.changeset/tame-dodos-float.md b/.changeset/tame-dodos-float.md
new file mode 100644
index 0000000000..4ba67a952a
--- /dev/null
+++ b/.changeset/tame-dodos-float.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure each key validation occurs for updates
diff --git a/packages/svelte/src/internal/client/validate.js b/packages/svelte/src/internal/client/validate.js
index 415982a02b..8792d02f0d 100644
--- a/packages/svelte/src/internal/client/validate.js
+++ b/packages/svelte/src/internal/client/validate.js
@@ -45,28 +45,30 @@ export function validate_dynamic_component(component_fn) {
  * @returns {void}
  */
 export function validate_each_keys(collection, key_fn) {
-	const keys = new Map();
-	const maybe_array = untrack(() => collection());
-	const array = is_array(maybe_array)
-		? maybe_array
-		: maybe_array == null
-			? []
-			: Array.from(maybe_array);
-	const length = array.length;
-	for (let i = 0; i < length; i++) {
-		const key = key_fn(array[i], i);
-		if (keys.has(key)) {
-			const a = String(keys.get(key));
-			const b = String(i);
-
-			/** @type {string | null} */
-			let k = String(array[i]);
-			if (k.startsWith('[object ')) k = null;
-
-			e.each_key_duplicate(a, b, k);
+	render_effect(() => {
+		const keys = new Map();
+		const maybe_array = collection();
+		const array = is_array(maybe_array)
+			? maybe_array
+			: maybe_array == null
+				? []
+				: Array.from(maybe_array);
+		const length = array.length;
+		for (let i = 0; i < length; i++) {
+			const key = key_fn(array[i], i);
+			if (keys.has(key)) {
+				const a = String(keys.get(key));
+				const b = String(i);
+
+				/** @type {string | null} */
+				let k = String(array[i]);
+				if (k.startsWith('[object ')) k = null;
+
+				e.each_key_duplicate(a, b, k);
+			}
+			keys.set(key, i);
 		}
-		keys.set(key, i);
-	}
+	});
 }
 
 /**
diff --git a/packages/svelte/tests/runtime-legacy/samples/keyed-each-dev-unique-update/_config.js b/packages/svelte/tests/runtime-legacy/samples/keyed-each-dev-unique-update/_config.js
new file mode 100644
index 0000000000..6fa6f63b0a
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/keyed-each-dev-unique-update/_config.js
@@ -0,0 +1,16 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	test({ assert, target }) {
+		let button = target.querySelector('button');
+
+		button?.click();
+
+		assert.throws(flushSync, /each_key_duplicate/);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/keyed-each-dev-unique-update/main.svelte b/packages/svelte/tests/runtime-legacy/samples/keyed-each-dev-unique-update/main.svelte
new file mode 100644
index 0000000000..0e9a377487
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/keyed-each-dev-unique-update/main.svelte
@@ -0,0 +1,21 @@
+<script>
+	let data = [
+		[0, 0],
+		[0, 4],
+		[1, 4],
+	];
+
+	function add() {
+		const n = [0, 0]
+		data.push(n);
+		data = data;
+	}
+</script>
+
+<button onclick={add}>add</button>
+
+<ul>
+		{#each data as d (d.join(""))}
+			<li> {d}</li>
+		{/each}
+</ul>

From dc787be55059590c600c782a291cd77b85de29ac Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 14 Aug 2024 13:05:01 +0100
Subject: [PATCH 113/196] chore: improve signal perf by using Set rather than
 array for reactions (#12831)

* chore: improve signal perf by using Set rather than array for reactions

* tweak

* simplify

* lint

* address feedback
---
 .changeset/calm-clocks-raise.md               |  5 +++
 .../src/internal/client/reactivity/sources.js |  4 +--
 .../src/internal/client/reactivity/types.d.ts |  2 +-
 .../svelte/src/internal/client/runtime.js     | 36 +++++--------------
 packages/svelte/tests/signals/test.ts         | 16 ++++-----
 5 files changed, 24 insertions(+), 39 deletions(-)
 create mode 100644 .changeset/calm-clocks-raise.md

diff --git a/.changeset/calm-clocks-raise.md b/.changeset/calm-clocks-raise.md
new file mode 100644
index 0000000000..dbcfabe197
--- /dev/null
+++ b/.changeset/calm-clocks-raise.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: improve signal perf by using Set rather than array for reactions
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 86427a7509..3425d6dadc 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -139,10 +139,8 @@ function mark_reactions(signal, status) {
 	if (reactions === null) return;
 
 	var runes = is_runes();
-	var length = reactions.length;
 
-	for (var i = 0; i < length; i++) {
-		var reaction = reactions[i];
+	for (var reaction of reactions) {
 		var flags = reaction.f;
 
 		// Skip any effects that are already dirty
diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts
index 1e347c011f..4a53a70043 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -9,7 +9,7 @@ export interface Signal {
 
 export interface Value<V = unknown> extends Signal {
 	/** Signals that read from this signal */
-	reactions: null | Reaction[];
+	reactions: null | Set<Reaction>;
 	/** Equality function */
 	equals: Equals;
 	/** The latest value for this signal */
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 89c607cb72..f113e339e7 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -169,7 +169,7 @@ export function check_dirtiness(reaction) {
 
 			if ((flags & DISCONNECTED) !== 0) {
 				for (i = 0; i < dependencies.length; i++) {
-					(dependencies[i].reactions ??= []).push(reaction);
+					(dependencies[i].reactions ??= new Set()).add(reaction);
 				}
 
 				reaction.f ^= DISCONNECTED;
@@ -188,11 +188,11 @@ export function check_dirtiness(reaction) {
 
 				if (is_unowned) {
 					// TODO is there a more logical place to do this work?
-					if (!current_skip_reaction && !dependency?.reactions?.includes(reaction)) {
+					if (!current_skip_reaction && !dependency?.reactions?.has(reaction)) {
 						// If we are working with an unowned signal as part of an effect (due to !current_skip_reaction)
 						// and the version hasn't changed, we still need to check that this reaction
 						// if linked to the dependency source – otherwise future updates will not be caught.
-						(dependency.reactions ??= []).push(reaction);
+						(dependency.reactions ??= new Set()).add(reaction);
 					}
 				}
 			}
@@ -323,17 +323,7 @@ export function update_reaction(reaction) {
 
 			if (!current_skip_reaction) {
 				for (i = skipped_deps; i < deps.length; i++) {
-					dependency = deps[i];
-					var reactions = dependency.reactions;
-
-					if (reactions === null) {
-						dependency.reactions = [reaction];
-					} else if (
-						reactions[reactions.length - 1] !== reaction &&
-						!reactions.includes(reaction)
-					) {
-						reactions.push(reaction);
-					}
+					(deps[i].reactions ??= new Set()).add(reaction);
 				}
 			}
 		} else if (deps !== null && skipped_deps < deps.length) {
@@ -358,24 +348,16 @@ export function update_reaction(reaction) {
  * @returns {void}
  */
 function remove_reaction(signal, dependency) {
-	const reactions = dependency.reactions;
-	let reactions_length = 0;
+	let reactions = dependency.reactions;
 	if (reactions !== null) {
-		reactions_length = reactions.length - 1;
-		const index = reactions.indexOf(signal);
-		if (index !== -1) {
-			if (reactions_length === 0) {
-				dependency.reactions = null;
-			} else {
-				// Swap with last element and then remove.
-				reactions[index] = reactions[reactions_length];
-				reactions.pop();
-			}
+		reactions.delete(signal);
+		if (reactions.size === 0) {
+			reactions = dependency.reactions = null;
 		}
 	}
 	// If the derived has no reactions, then we can disconnect it from the graph,
 	// allowing it to either reconnect in the future, or be GC'd by the VM.
-	if (reactions_length === 0 && (dependency.f & DERIVED) !== 0) {
+	if (reactions === null && (dependency.f & DERIVED) !== 0) {
 		set_signal_status(dependency, MAYBE_DIRTY);
 		// If we are working with a derived that is owned by an effect, then mark it as being
 		// disconnected.
diff --git a/packages/svelte/tests/signals/test.ts b/packages/svelte/tests/signals/test.ts
index d14d5fe964..7a68e92bc7 100644
--- a/packages/svelte/tests/signals/test.ts
+++ b/packages/svelte/tests/signals/test.ts
@@ -236,13 +236,13 @@ describe('signals', () => {
 		return () => {
 			flushSync(() => set(count, 1));
 			// Ensure we're not leaking consumers
-			assert.deepEqual(count.reactions?.length, 1);
+			assert.deepEqual(count.reactions?.size, 1);
 			flushSync(() => set(count, 2));
 			// Ensure we're not leaking consumers
-			assert.deepEqual(count.reactions?.length, 1);
+			assert.deepEqual(count.reactions?.size, 1);
 			flushSync(() => set(count, 3));
 			// Ensure we're not leaking consumers
-			assert.deepEqual(count.reactions?.length, 1);
+			assert.deepEqual(count.reactions?.size, 1);
 			assert.deepEqual(log, [0, 1, 2, 3]);
 		};
 	});
@@ -304,8 +304,8 @@ describe('signals', () => {
 			flushSync(() => set(count, 4));
 			flushSync(() => set(count, 0));
 			// Ensure we're not leaking consumers
-			assert.deepEqual(count.reactions?.length, 1);
-			assert.deepEqual(calc.reactions?.length, 1);
+			assert.deepEqual(count.reactions?.size, 1);
+			assert.deepEqual(calc.reactions?.size, 1);
 			assert.deepEqual(log, [0, 2, 'limit', 0]);
 			destroy();
 			// Ensure we're not leaking consumers
@@ -484,7 +484,7 @@ describe('signals', () => {
 		return () => {
 			flushSync();
 			assert.equal(a?.deps?.length, 1);
-			assert.equal(state?.reactions?.length, 1);
+			assert.equal(state?.reactions?.size, 1);
 			destroy();
 			assert.equal(a?.deps?.length, 1);
 			assert.equal(state?.reactions, null);
@@ -658,12 +658,12 @@ describe('signals', () => {
 			});
 
 			assert.equal($.get(d), 0);
-			assert.equal(count.reactions?.length, 1);
+			assert.equal(count.reactions?.size, 1);
 			assert.equal(d.deps?.length, 1);
 
 			set(count, 1);
 			assert.equal($.get(d), 2);
-			assert.equal(count.reactions?.length, 1);
+			assert.equal(count.reactions?.size, 1);
 			assert.equal(d.deps?.length, 1);
 
 			destroy();

From b0f693b121863904f1c909780d316b020103545c Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 14 Aug 2024 14:47:34 +0100
Subject: [PATCH 114/196] fix: ensure onwheel is passive by default (#12837)

---
 .changeset/brown-turkeys-tap.md                        |  5 +++++
 .../3-transform/client/visitors/shared/events.js       | 10 ++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/brown-turkeys-tap.md

diff --git a/.changeset/brown-turkeys-tap.md b/.changeset/brown-turkeys-tap.md
new file mode 100644
index 0000000000..96a6126658
--- /dev/null
+++ b/.changeset/brown-turkeys-tap.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure onwheel is passive by default
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
index 3a4ce97345..56cc2e345c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
@@ -1,7 +1,7 @@
 /** @import { Expression } from 'estree' */
 /** @import { Attribute, ExpressionMetadata, ExpressionTag, SvelteNode } from '#compiler' */
 /** @import { ComponentContext } from '../../types' */
-import { is_capture_event } from '../../../../../../utils.js';
+import { is_capture_event, is_passive_event } from '../../../../../../utils.js';
 import { dev, locator } from '../../../../../state.js';
 import * as b from '../../../../../utils/builders.js';
 
@@ -63,7 +63,13 @@ export function visit_event_attribute(node, context) {
 		);
 	} else {
 		const statement = b.stmt(
-			build_event(event_name, context.state.node, handler, capture, undefined)
+			build_event(
+				event_name,
+				context.state.node,
+				handler,
+				capture,
+				is_passive_event(event_name) ? true : undefined
+			)
 		);
 
 		const type = /** @type {SvelteNode} */ (context.path.at(-1)).type;

From f12a5e49da8e4f513ae2a0ee00044a82e652331f Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 14 Aug 2024 10:01:08 -0400
Subject: [PATCH 115/196] Version Packages (next) (#12838)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  3 +++
 packages/svelte/CHANGELOG.md   | 10 ++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 92d70dbfdf..0db3bc498d 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -58,8 +58,10 @@
     "brown-months-flow",
     "brown-months-fry",
     "brown-spoons-boil",
+    "brown-turkeys-tap",
     "calm-buses-clap",
     "calm-cameras-hide",
+    "calm-clocks-raise",
     "calm-pandas-vanish",
     "calm-ravens-sneeze",
     "chatty-beans-divide",
@@ -686,6 +688,7 @@
     "tall-shrimps-worry",
     "tall-tigers-wait",
     "tame-cycles-kneel",
+    "tame-dodos-float",
     "tame-dots-battle",
     "tame-goats-bow",
     "tame-spies-drum",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index b9063b6140..8d3108c42b 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.0.0-next.221
+
+### Patch Changes
+
+- fix: ensure onwheel is passive by default ([#12837](https://github.com/sveltejs/svelte/pull/12837))
+
+- chore: improve signal perf by using Set rather than array for reactions ([#12831](https://github.com/sveltejs/svelte/pull/12831))
+
+- fix: ensure each key validation occurs for updates ([#12836](https://github.com/sveltejs/svelte/pull/12836))
+
 ## 5.0.0-next.220
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index dbc34c8871..52a24f90e5 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.220",
+  "version": "5.0.0-next.221",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index e2181f2f5e..ee5a723b07 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.220';
+export const VERSION = '5.0.0-next.221';
 export const PUBLIC_VERSION = '5';

From 32808ac054a83f294024b57aa0bde3cbb03b86d6 Mon Sep 17 00:00:00 2001
From: brunnerh <brunnerh@users.noreply.github.com>
Date: Wed, 14 Aug 2024 18:19:13 +0200
Subject: [PATCH 116/196] docs: More guidance on migrating away from
 `<svelte:component>`. (#12839)

* More guidance on migrating away from `<svelte:component>`.

* Slight adjustments.
---
 .../messages/compile-warnings/template.md     | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/packages/svelte/messages/compile-warnings/template.md b/packages/svelte/messages/compile-warnings/template.md
index 19fd8979fd..31774d0555 100644
--- a/packages/svelte/messages/compile-warnings/template.md
+++ b/packages/svelte/messages/compile-warnings/template.md
@@ -60,7 +60,31 @@ This code will work when the component is rendered on the client (which is why t
 
 In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `<X>` to re-render when `X` changed, you would either have to use `<svelte:component this={X}>` or put the component inside a `{#key X}...{/key}` block.
 
-In Svelte 5 this is no longer true — if `X` changes, `<X>` re-renders. For more complex expressions like `condition ? Y : Z` you can use a derived value instead.
+In Svelte 5 this is no longer true — if `X` changes, `<X>` re-renders.
+
+In some cases `<object.property>` syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5.
+
+For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used:
+
+```diff
+{#each items as item}
+-	<svelte:component this={item.condition ? Y : Z} />
++	{@const Component = item.condition ? Y : Z}
++	<Component />
+{/each}
+```
+
+A derived value may be used in other contexts:
+
+```diff
+<script>
+	...
+	let condition = $state(false);
++	const Component = $derived(condition ? Y : Z);
+</script>
+- <svelte:component this={condition ? Y : Z} />
++ <Component />
+```
 
 ## svelte_element_invalid_this
 

From 19beb7754e82dd40052499d8c253e1fe2bb69cf8 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 14 Aug 2024 15:46:09 -0400
Subject: [PATCH 117/196] chore: set `binding.kind` before analysis (#12843)

* analyse exports before walking

* more

* another

* this is unused

* move stuff/tidy up

* this appears to be unnecessary

* this is all unnecessary

* simplify

* simplify

* simplify

* simplify

* move more stuff over

* changeset

* unused

* separate reassignment from mutation

* regenerate

* lint
---
 .changeset/pink-countries-repair.md           |   5 +
 packages/svelte/src/compiler/migrate/index.js |   7 +-
 .../src/compiler/phases/2-analyze/index.js    | 115 +++++++++++++++++-
 .../phases/2-analyze/visitors/Attribute.js    |   4 +-
 .../2-analyze/visitors/BindDirective.js       |   6 +-
 .../visitors/ExportNamedDeclaration.js        |  31 -----
 .../2-analyze/visitors/ExportSpecifier.js     |  24 +---
 .../phases/2-analyze/visitors/Identifier.js   |  41 +------
 .../2-analyze/visitors/StyleDirective.js      |   4 -
 .../phases/3-transform/client/utils.js        |   2 +-
 .../3-transform/client/visitors/EachBlock.js  |   6 +-
 packages/svelte/src/compiler/phases/scope.js  |  42 ++-----
 packages/svelte/src/compiler/types/index.d.ts |   2 +
 .../svelte/src/compiler/types/template.d.ts   |   2 -
 packages/svelte/types/index.d.ts              |   4 +-
 15 files changed, 143 insertions(+), 152 deletions(-)
 create mode 100644 .changeset/pink-countries-repair.md

diff --git a/.changeset/pink-countries-repair.md b/.changeset/pink-countries-repair.md
new file mode 100644
index 0000000000..faef646ba1
--- /dev/null
+++ b/.changeset/pink-countries-repair.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: set `binding.kind` before analysis
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index cc5344e5c2..31aee08cfa 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -331,10 +331,7 @@ const instance_script = {
 
 				const binding = /** @type {Compiler.Binding} */ (state.scope.get(declarator.id.name));
 
-				if (
-					state.analysis.uses_props &&
-					(declarator.init || binding.mutated || binding.reassigned)
-				) {
+				if (state.analysis.uses_props && (declarator.init || binding.updated)) {
 					throw new Error(
 						'$$props is used together with named props in a way that cannot be automatically migrated.'
 					);
@@ -350,7 +347,7 @@ const instance_script = {
 							)
 						: '',
 					optional: !!declarator.init,
-					bindable: binding.mutated || binding.reassigned,
+					bindable: binding.updated,
 					...extract_type_and_comment(declarator, state.str, path)
 				});
 				state.props_insertion_point = /** @type {number} */ (declarator.end);
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 199ca5c1af..cd4efe6760 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -1,13 +1,13 @@
-/** @import { Node, Program } from 'estree' */
-/** @import { Root, Script, SvelteNode, ValidatedCompileOptions, ValidatedModuleCompileOptions } from '#compiler' */
+/** @import { Expression, Node, Program } from 'estree' */
+/** @import { Binding, Root, Script, SvelteNode, ValidatedCompileOptions, ValidatedModuleCompileOptions } from '#compiler' */
 /** @import { AnalysisState, Visitors } from './types' */
 /** @import { Analysis, ComponentAnalysis, Js, ReactiveStatement, Template } from '../types' */
 import { walk } from 'zimmerframe';
 import * as e from '../../errors.js';
 import * as w from '../../warnings.js';
-import { is_text_attribute } from '../../utils/ast.js';
+import { extract_identifiers, is_text_attribute } from '../../utils/ast.js';
 import * as b from '../../utils/builders.js';
-import { Scope, ScopeRoot, create_scopes, get_rune } from '../scope.js';
+import { Scope, ScopeRoot, create_scopes, get_rune, set_scope } from '../scope.js';
 import check_graph_for_cycles from './utils/check_graph_for_cycles.js';
 import { create_attribute } from '../nodes.js';
 import { analyze_css } from './css/css-analyze.js';
@@ -62,6 +62,7 @@ import { Text } from './visitors/Text.js';
 import { TitleElement } from './visitors/TitleElement.js';
 import { UpdateExpression } from './visitors/UpdateExpression.js';
 import { VariableDeclarator } from './visitors/VariableDeclarator.js';
+import is_reference from 'is-reference';
 
 /**
  * @type {Visitors}
@@ -397,6 +398,112 @@ export function analyze_component(root, source, options) {
 		source
 	};
 
+	if (!runes) {
+		// every exported `let` or `var` declaration becomes a prop, everything else becomes an export
+		for (const node of instance.ast.body) {
+			if (node.type !== 'ExportNamedDeclaration') continue;
+
+			analysis.needs_props = true;
+
+			if (node.declaration) {
+				if (
+					node.declaration.type === 'FunctionDeclaration' ||
+					node.declaration.type === 'ClassDeclaration'
+				) {
+					analysis.exports.push({
+						name: /** @type {import('estree').Identifier} */ (node.declaration.id).name,
+						alias: null
+					});
+				} else if (node.declaration.type === 'VariableDeclaration') {
+					if (node.declaration.kind === 'const') {
+						for (const declarator of node.declaration.declarations) {
+							for (const node of extract_identifiers(declarator.id)) {
+								analysis.exports.push({ name: node.name, alias: null });
+							}
+						}
+					} else {
+						for (const declarator of node.declaration.declarations) {
+							for (const id of extract_identifiers(declarator.id)) {
+								const binding = /** @type {Binding} */ (instance.scope.get(id.name));
+								binding.kind = 'bindable_prop';
+							}
+						}
+					}
+				}
+			} else {
+				for (const specifier of node.specifiers) {
+					const binding = instance.scope.get(specifier.local.name);
+
+					if (
+						binding &&
+						(binding.declaration_kind === 'var' || binding.declaration_kind === 'let')
+					) {
+						binding.kind = 'bindable_prop';
+
+						if (specifier.exported.name !== specifier.local.name) {
+							binding.prop_alias = specifier.exported.name;
+						}
+					} else {
+						analysis.exports.push({ name: specifier.local.name, alias: specifier.exported.name });
+					}
+				}
+			}
+		}
+
+		// if reassigned/mutated bindings are referenced in `$:` blocks
+		// or the template, turn them into state
+		for (const binding of instance.scope.declarations.values()) {
+			if (binding.kind !== 'normal') continue;
+
+			for (const { node, path } of binding.references) {
+				if (node === binding.node) continue;
+
+				if (binding.updated) {
+					if (
+						path[path.length - 1].type === 'StyleDirective' ||
+						path.some((node) => node.type === 'Fragment') ||
+						(path[1].type === 'LabeledStatement' && path[1].label.name === '$')
+					) {
+						binding.kind = 'state';
+					}
+				}
+			}
+		}
+
+		// more legacy nonsense: if an `each` binding is reassigned/mutated,
+		// treat the expression as being mutated as well
+		walk(/** @type {SvelteNode} */ (template.ast), null, {
+			EachBlock(node) {
+				const scope = /** @type {Scope} */ (template.scopes.get(node));
+
+				for (const binding of scope.declarations.values()) {
+					if (binding.updated) {
+						const state = { scope: /** @type {Scope} */ (scope.parent), scopes: template.scopes };
+
+						walk(node.expression, state, {
+							// @ts-expect-error
+							_: set_scope,
+							Identifier(node, context) {
+								const parent = /** @type {Expression} */ (context.path.at(-1));
+
+								if (is_reference(node, parent)) {
+									const binding = context.state.scope.get(node.name);
+
+									if (binding && binding.kind === 'normal') {
+										binding.kind = 'state';
+										binding.mutated = binding.updated = true;
+									}
+								}
+							}
+						});
+
+						break;
+					}
+				}
+			}
+		});
+	}
+
 	if (root.options) {
 		for (const attribute of root.options.attributes) {
 			if (attribute.name === 'accessors') {
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 102091c78d..6923bb5aac 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -134,7 +134,7 @@ function get_delegated_event(event_name, handler, context) {
 			return unhoisted;
 		}
 
-		if (binding !== null && binding.initial !== null && !binding.mutated && !binding.is_called) {
+		if (binding !== null && binding.initial !== null && !binding.updated && !binding.is_called) {
 			const binding_type = binding.initial.type;
 
 			if (
@@ -188,7 +188,7 @@ function get_delegated_event(event_name, handler, context) {
 				(((!context.state.analysis.runes && binding.kind === 'each') ||
 					// or any normal not reactive bindings that are mutated.
 					binding.kind === 'normal') &&
-					binding.mutated))
+					binding.updated))
 		) {
 			return unhoisted;
 		}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index c1557ff600..573616b815 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -39,7 +39,7 @@ export function BindDirective(node, context) {
 					binding.kind !== 'bindable_prop' &&
 					binding.kind !== 'each' &&
 					binding.kind !== 'store_sub' &&
-					!binding.mutated))
+					!binding.updated)) // TODO wut?
 		) {
 			e.bind_invalid_value(node.expression);
 		}
@@ -80,10 +80,6 @@ export function BindDirective(node, context) {
 				if (references.length > 0) {
 					parent.metadata.contains_group_binding = true;
 
-					for (const binding of parent.metadata.references) {
-						binding.mutated = true;
-					}
-
 					each_blocks.push(parent);
 					ids = ids.filter((id) => !references.includes(id));
 					ids.push(...extract_all_identifiers_from_expression(parent.expression)[1]);
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
index e50de112e0..547f6ab9c7 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportNamedDeclaration.js
@@ -39,37 +39,6 @@ export function ExportNamedDeclaration(node, context) {
 		}
 	}
 
-	if (context.state.ast_type === 'instance' && !context.state.analysis.runes) {
-		context.state.analysis.needs_props = true;
-
-		if (node.declaration) {
-			if (
-				node.declaration.type === 'FunctionDeclaration' ||
-				node.declaration.type === 'ClassDeclaration'
-			) {
-				context.state.analysis.exports.push({
-					name: /** @type {Identifier} */ (node.declaration.id).name,
-					alias: null
-				});
-			} else if (node.declaration.type === 'VariableDeclaration') {
-				if (node.declaration.kind === 'const') {
-					for (const declarator of node.declaration.declarations) {
-						for (const node of extract_identifiers(declarator.id)) {
-							context.state.analysis.exports.push({ name: node.name, alias: null });
-						}
-					}
-				} else {
-					for (const declarator of node.declaration.declarations) {
-						for (const id of extract_identifiers(declarator.id)) {
-							const binding = /** @type {Binding} */ (context.state.scope.get(id.name));
-							binding.kind = 'bindable_prop';
-						}
-					}
-				}
-			}
-		}
-	}
-
 	if (context.state.analysis.runes) {
 		if (node.declaration && context.state.ast_type === 'instance') {
 			if (
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
index 320b81d086..27eb39acbf 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
@@ -17,29 +17,7 @@ export function ExportSpecifier(node, context) {
 			});
 
 			const binding = context.state.scope.get(node.local.name);
-			if (binding) binding.reassigned = true;
-		} else {
-			context.state.analysis.needs_props = true;
-
-			const binding = /** @type {Binding} */ (context.state.scope.get(node.local.name));
-
-			if (
-				binding !== null &&
-				(binding.kind === 'state' ||
-					binding.kind === 'raw_state' ||
-					(binding.kind === 'normal' &&
-						(binding.declaration_kind === 'let' || binding.declaration_kind === 'var')))
-			) {
-				binding.kind = 'bindable_prop';
-				if (node.exported.name !== node.local.name) {
-					binding.prop_alias = node.exported.name;
-				}
-			} else {
-				context.state.analysis.exports.push({
-					name: node.local.name,
-					alias: node.exported.name
-				});
-			}
+			if (binding) binding.reassigned = binding.updated = true;
 		}
 	} else {
 		validate_export(node, context.state.scope, node.local.name);
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 7fb819bc17..557206a22b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -1,4 +1,5 @@
 /** @import { Expression, Identifier } from 'estree' */
+/** @import { EachBlock } from '#compiler' */
 /** @import { Context } from '../types' */
 import is_reference from 'is-reference';
 import { should_proxy } from '../../3-transform/client/utils.js';
@@ -77,46 +78,6 @@ export function Identifier(node, context) {
 		if (node.name === '$$restProps') {
 			context.state.analysis.uses_rest_props = true;
 		}
-
-		if (
-			binding?.kind === 'normal' &&
-			((binding.scope === context.state.instance_scope &&
-				binding.declaration_kind !== 'function') ||
-				binding.declaration_kind === 'import')
-		) {
-			if (
-				binding.declaration_kind !== 'import' &&
-				binding.mutated &&
-				// TODO could be more fine-grained - not every mention in the template implies a state binding
-				(context.state.reactive_statement || context.state.ast_type === 'template')
-			) {
-				binding.kind = 'state';
-			} else if (
-				context.state.reactive_statement &&
-				parent.type === 'AssignmentExpression' &&
-				parent.left === binding.node
-			) {
-				binding.kind = 'derived';
-			}
-		} else if (binding?.kind === 'each' && binding.mutated) {
-			// Ensure that the array is marked as reactive even when only its entries are mutated
-			let i = context.path.length;
-			while (i--) {
-				const ancestor = context.path[i];
-				if (
-					ancestor.type === 'EachBlock' &&
-					context.state.analysis.template.scopes.get(ancestor)?.declarations.get(node.name) ===
-						binding
-				) {
-					for (const binding of ancestor.metadata.references) {
-						if (binding.kind === 'normal') {
-							binding.kind = 'state';
-						}
-					}
-					break;
-				}
-			}
-		}
 	}
 
 	if (binding) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
index 288a9a61f4..ca9c766e32 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
@@ -17,10 +17,6 @@ export function StyleDirective(node, context) {
 		let binding = context.state.scope.get(node.name);
 
 		if (binding) {
-			if (!context.state.analysis.runes && binding.mutated) {
-				binding.kind = 'state';
-			}
-
 			if (binding.kind !== 'normal') {
 				node.metadata.expression.has_state = true;
 			}
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 333f5ebc1c..965b8d80a5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -235,7 +235,7 @@ export function is_prop_source(binding, state) {
 			binding.initial ||
 			// Until legacy mode is gone, we also need to use the prop source when only mutated is true,
 			// because the parent could be a legacy component which needs coarse-grained reactivity
-			binding.mutated)
+			binding.updated)
 	);
 }
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
index c0d06bf928..9ed168f458 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
@@ -114,7 +114,7 @@ export function EachBlock(node, context) {
 	const indirect_dependencies = collect_parent_each_blocks(context).flatMap((block) => {
 		const array = /** @type {Expression} */ (context.visit(block.expression));
 		const transitive_dependencies = build_transitive_dependencies(
-			block.metadata.references,
+			block.metadata.expression.dependencies,
 			context
 		);
 		return [array, ...transitive_dependencies];
@@ -126,7 +126,7 @@ export function EachBlock(node, context) {
 		indirect_dependencies.push(collection);
 
 		const transitive_dependencies = build_transitive_dependencies(
-			each_node_meta.references,
+			each_node_meta.expression.dependencies,
 			context
 		);
 		indirect_dependencies.push(...transitive_dependencies);
@@ -279,7 +279,7 @@ function collect_parent_each_blocks(context) {
 }
 
 /**
- * @param {Binding[]} references
+ * @param {Set<Binding>} references
  * @param {ComponentContext} context
  */
 function build_transitive_dependencies(references, context) {
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index f9382a21b6..dba086b51f 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -113,13 +113,14 @@ export class Scope {
 			references: [],
 			legacy_dependencies: [],
 			initial,
+			reassigned: false,
 			mutated: false,
+			updated: false,
 			scope: this,
 			kind,
 			declaration_kind,
 			is_called: false,
 			prop_alias: null,
-			reassigned: false,
 			metadata: null
 		};
 		this.declarations.set(node.name, binding);
@@ -506,17 +507,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		},
 
 		EachBlock(node, { state, visit }) {
-			// Array part is still from the scope above
-			/** @type {Set<Identifier>} */
-			const references_within = new Set();
-			const idx = references.length;
 			visit(node.expression);
-			for (let i = idx; i < references.length; i++) {
-				const [scope, { node: id }] = references[i];
-				if (scope === state.scope) {
-					references_within.add(id);
-				}
-			}
 
 			// context and children are a new scope
 			const scope = state.scope.child();
@@ -582,9 +573,6 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 				index: scope.root.unique('$$index'),
 				item: node.context.type === 'Identifier' ? node.context : b.id('$$item'),
 				declarations: scope.declarations,
-				references: [...references_within]
-					.map((id) => /** @type {Binding} */ (state.scope.get(id.name)))
-					.filter(Boolean),
 				is_controlled: false
 			};
 		},
@@ -671,7 +659,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		// the css property
 		StyleDirective(node, { path, state, next }) {
 			if (node.value === true) {
-				state.scope.reference(b.id(node.name), path);
+				state.scope.reference(b.id(node.name), path.concat(node));
 			}
 			next();
 		}
@@ -693,25 +681,19 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 	}
 
 	for (const [scope, node] of updates) {
-		if (node.type === 'MemberExpression') {
-			let object = node.object;
-			while (object.type === 'MemberExpression') {
-				object = object.object;
-			}
+		for (const expression of unwrap_pattern(node)) {
+			const left = object(expression);
+			const binding = left && scope.get(left.name);
 
-			const binding = scope.get(/** @type {Identifier} */ (object).name);
-			if (binding) binding.mutated = true;
-		} else {
-			unwrap_pattern(node).forEach((node) => {
-				let id = node.type === 'Identifier' ? node : object(node);
-				if (id === null) return;
+			if (binding !== null && left !== binding.node) {
+				binding.updated = true;
 
-				const binding = scope.get(id.name);
-				if (binding && id !== binding.node) {
+				if (left === expression) {
+					binding.reassigned = true;
+				} else {
 					binding.mutated = true;
-					binding.reassigned = node.type === 'Identifier';
 				}
-			});
+			}
 		}
 	}
 
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index 24da8c9b84..d893f62b33 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -300,6 +300,8 @@ export interface Binding {
 	references: { node: Identifier; path: SvelteNode[] }[];
 	mutated: boolean;
 	reassigned: boolean;
+	/** `true` if mutated _or_ reassigned */
+	updated: boolean;
 	scope: Scope;
 	/** For `legacy_reactive`: its reactive dependencies */
 	legacy_dependencies: Binding[];
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 5b4d31da04..318de6953c 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -404,8 +404,6 @@ export interface EachBlock extends BaseNode {
 		index: Identifier;
 		item: Identifier;
 		declarations: Map<string, Binding>;
-		/** List of bindings that are referenced within the expression */
-		references: Binding[];
 		/**
 		 * Optimization path for each blocks: If the parent isn't a fragment and
 		 * it only has a single child, then we can classify the block as being "controlled".
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 9b6198c547..3c0dede5b0 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -949,6 +949,8 @@ declare module 'svelte/compiler' {
 		references: { node: Identifier; path: SvelteNode[] }[];
 		mutated: boolean;
 		reassigned: boolean;
+		/** `true` if mutated _or_ reassigned */
+		updated: boolean;
 		scope: Scope;
 		/** For `legacy_reactive`: its reactive dependencies */
 		legacy_dependencies: Binding[];
@@ -1859,8 +1861,6 @@ declare module 'svelte/compiler' {
 			index: Identifier;
 			item: Identifier;
 			declarations: Map<string, Binding>;
-			/** List of bindings that are referenced within the expression */
-			references: Binding[];
 			/**
 			 * Optimization path for each blocks: If the parent isn't a fragment and
 			 * it only has a single child, then we can classify the block as being "controlled".

From 90334c812c6725d141006b54f0869296f1afcb19 Mon Sep 17 00:00:00 2001
From: Oscar Dominguez <dominguez.celada@gmail.com>
Date: Thu, 15 Aug 2024 02:09:09 +0200
Subject: [PATCH 118/196] fix: avoid throwing
 `store_invalid_subscription_module` for runes (#12848)

* fix: avoid throwing `store_invalid_subscription_module` for runes

Co-authored-by: Paolo Ricciuti <ricciutipaolo@gmail.com>

* move test to the validator suite, which is faster

---------

Co-authored-by: Paolo Ricciuti <ricciutipaolo@gmail.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/funny-bugs-kiss.md                 |  5 +++++
 .../src/compiler/phases/2-analyze/index.js    |  2 +-
 .../_config.js                                |  3 +++
 .../input.svelte.js                           | 14 ++++++++++++++
 packages/svelte/tests/validator/test.ts       | 19 ++++++++++++-------
 5 files changed, 35 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/funny-bugs-kiss.md
 create mode 100644 packages/svelte/tests/validator/samples/runes-conflicting-store-in-module/_config.js
 create mode 100644 packages/svelte/tests/validator/samples/runes-conflicting-store-in-module/input.svelte.js

diff --git a/.changeset/funny-bugs-kiss.md b/.changeset/funny-bugs-kiss.md
new file mode 100644
index 0000000000..1bc817c210
--- /dev/null
+++ b/.changeset/funny-bugs-kiss.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid throwing `store_invalid_subscription_module` for runes
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index cd4efe6760..daf8a54ff9 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -223,7 +223,7 @@ export function analyze_module(ast, options) {
 
 		const binding = scope.get(name.slice(1));
 
-		if (binding !== null) {
+		if (binding !== null && !is_rune(name)) {
 			e.store_invalid_subscription_module(references[0].node);
 		}
 	}
diff --git a/packages/svelte/tests/validator/samples/runes-conflicting-store-in-module/_config.js b/packages/svelte/tests/validator/samples/runes-conflicting-store-in-module/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/runes-conflicting-store-in-module/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/validator/samples/runes-conflicting-store-in-module/input.svelte.js b/packages/svelte/tests/validator/samples/runes-conflicting-store-in-module/input.svelte.js
new file mode 100644
index 0000000000..107c44208b
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/runes-conflicting-store-in-module/input.svelte.js
@@ -0,0 +1,14 @@
+const state = $state(0);
+
+const derived = $derived(state + 2);
+
+let effect = {};
+let inspect = {};
+
+$effect.root(() => {
+	$inspect(state);
+
+	$effect(() => {
+		console.log(state);
+	});
+});
diff --git a/packages/svelte/tests/validator/test.ts b/packages/svelte/tests/validator/test.ts
index 1482dad6c2..8da4fdd7c3 100644
--- a/packages/svelte/tests/validator/test.ts
+++ b/packages/svelte/tests/validator/test.ts
@@ -1,6 +1,6 @@
 import * as fs from 'node:fs';
 import { it, assert } from 'vitest';
-import { compile } from 'svelte/compiler';
+import { compile, compileModule } from 'svelte/compiler';
 import { try_load_json } from '../helpers.js';
 import { suite, type BaseTest } from '../suite.js';
 import type { CompileError } from '#compiler';
@@ -14,11 +14,6 @@ interface ValidatorTest extends BaseTest {
 }
 
 const { test, run } = suite<ValidatorTest>(async (config, cwd) => {
-	const input = fs
-		.readFileSync(`${cwd}/input.svelte`, 'utf-8')
-		.replace(/\s+$/, '')
-		.replace(/\r/g, '');
-
 	const expected_warnings = try_load_json(`${cwd}/warnings.json`) || [];
 	const expected_errors = try_load_json(`${cwd}/errors.json`);
 	const options = try_load_json(`${cwd}/options.json`);
@@ -26,7 +21,17 @@ const { test, run } = suite<ValidatorTest>(async (config, cwd) => {
 	let error;
 
 	try {
-		const { warnings } = compile(input, {
+		const module = fs.existsSync(`${cwd}/input.svelte.js`);
+
+		const input = (
+			module
+				? fs.readFileSync(`${cwd}/input.svelte.js`, 'utf-8')
+				: fs.readFileSync(`${cwd}/input.svelte`, 'utf-8')
+		)
+			.replace(/\s+$/, '')
+			.replace(/\r/g, '');
+
+		const { warnings } = (module ? compileModule : compile)(input, {
 			...config.compileOptions,
 			generate: false,
 			...options

From 6b6f915f9fa3bfb83107d8d71004a32da27a0466 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 15 Aug 2024 05:25:32 -0400
Subject: [PATCH 119/196] fix: omit `$$index` parameter where possible (#12851)

---
 .changeset/lucky-experts-float.md             |  5 ++++
 .../3-transform/client/visitors/EachBlock.js  | 30 ++++++++++++++-----
 .../_expected/client/index.svelte.js          |  2 +-
 3 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/lucky-experts-float.md

diff --git a/.changeset/lucky-experts-float.md b/.changeset/lucky-experts-float.md
new file mode 100644
index 0000000000..77e160580e
--- /dev/null
+++ b/.changeset/lucky-experts-float.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: omit `$$index` parameter where possible
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
index 9ed168f458..d787665121 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/EachBlock.js
@@ -149,14 +149,23 @@ export function EachBlock(node, context) {
 		each_node_meta.contains_group_binding || !node.index ? each_node_meta.index : b.id(node.index);
 	const item = each_node_meta.item;
 
+	let uses_index = each_node_meta.contains_group_binding;
+	let key_uses_index = false;
+
 	if (node.index) {
-		if ((flags & EACH_INDEX_REACTIVE) !== 0) {
-			child_state.transform[node.index] = { read: get_value };
-		} else {
-			delete child_state.transform[node.index];
-		}
+		child_state.transform[node.index] = {
+			read: (node) => {
+				uses_index = true;
+				return (flags & EACH_INDEX_REACTIVE) !== 0 ? get_value(node) : node;
+			}
+		};
 
-		delete key_state.transform[node.index];
+		key_state.transform[node.index] = {
+			read: (node) => {
+				key_uses_index = true;
+				return node;
+			}
+		};
 	}
 
 	/** @type {Statement[]} */
@@ -180,6 +189,8 @@ export function EachBlock(node, context) {
 		child_state.transform[node.context.name] = {
 			read: (flags & EACH_ITEM_REACTIVE) !== 0 ? get_value : (node) => node,
 			assign: (_, value) => {
+				uses_index = true;
+
 				const left = b.member(
 					each_node_meta.array_name ? b.call(each_node_meta.array_name) : collection,
 					index,
@@ -238,7 +249,7 @@ export function EachBlock(node, context) {
 			context.visit(/** @type {Expression} */ (node.key), key_state)
 		);
 
-		key_function = b.arrow([node.context, index], expression);
+		key_function = b.arrow(key_uses_index ? [node.context, index] : [node.context], expression);
 	}
 
 	if (node.index && each_node_meta.contains_group_binding) {
@@ -259,7 +270,10 @@ export function EachBlock(node, context) {
 		b.literal(flags),
 		each_node_meta.array_name ? each_node_meta.array_name : b.thunk(collection),
 		key_function,
-		b.arrow([b.id('$$anchor'), item, index], b.block(declarations.concat(block.body)))
+		b.arrow(
+			uses_index ? [b.id('$$anchor'), item, index] : [b.id('$$anchor'), item],
+			b.block(declarations.concat(block.body))
+		)
 	];
 
 	if (node.fallback) {
diff --git a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
index 93cf459e40..8152445ec3 100644
--- a/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/each-string-template/_expected/client/index.svelte.js
@@ -5,7 +5,7 @@ export default function Each_string_template($$anchor) {
 	var fragment = $.comment();
 	var node = $.first_child(fragment);
 
-	$.each(node, 0, () => ['foo', 'bar', 'baz'], $.index, ($$anchor, thing, $$index) => {
+	$.each(node, 0, () => ['foo', 'bar', 'baz'], $.index, ($$anchor, thing) => {
 		var text = $.text();
 
 		$.template_effect(() => $.set_text(text, `${thing ?? ""}, `));

From 0a06a3f2b62c3ccf72d802f270e66800c20f2629 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 15 Aug 2024 05:26:22 -0400
Subject: [PATCH 120/196] feat: skip over static subtrees (#12849)

* feat: skip over static subtrees

* regenerate

* a few more

* prettier
---
 .changeset/neat-ducks-jam.md                  |  5 ++++
 .../compiler/phases/1-parse/utils/create.js   |  5 +++-
 .../src/compiler/phases/2-analyze/index.js    |  2 ++
 .../phases/2-analyze/visitors/Attribute.js    | 11 ++++++++-
 .../phases/2-analyze/visitors/AwaitBlock.js   |  3 +++
 .../phases/2-analyze/visitors/EachBlock.js    |  3 +++
 .../2-analyze/visitors/ExpressionTag.js       |  5 ++++
 .../phases/2-analyze/visitors/HtmlTag.js      |  4 ++++
 .../phases/2-analyze/visitors/Identifier.js   |  3 +++
 .../phases/2-analyze/visitors/IfBlock.js      |  3 +++
 .../phases/2-analyze/visitors/KeyBlock.js     |  3 +++
 .../phases/2-analyze/visitors/OnDirective.js  |  3 +++
 .../phases/2-analyze/visitors/RenderTag.js    |  3 +++
 .../phases/2-analyze/visitors/SlotElement.js  |  3 +++
 .../2-analyze/visitors/SpreadAttribute.js     |  3 +++
 .../2-analyze/visitors/StyleDirective.js      |  3 +++
 .../2-analyze/visitors/SvelteElement.js       |  3 +++
 .../phases/2-analyze/visitors/SvelteHead.js   |  3 +++
 .../phases/2-analyze/visitors/UseDirective.js | 12 ++++++++++
 .../2-analyze/visitors/shared/component.js    |  3 +++
 .../2-analyze/visitors/shared/fragment.js     | 15 ++++++++++++
 .../client/visitors/RegularElement.js         |  9 ++++---
 packages/svelte/src/compiler/phases/scope.js  |  2 +-
 .../svelte/src/compiler/types/template.d.ts   | 18 +++++++++-----
 .../samples/comment-before-script/output.json |  3 +--
 .../samples/css-nth-syntax/output.json        |  6 ++---
 .../samples/css-pseudo-classes/output.json    |  3 +--
 .../each-block-object-pattern/output.json     |  9 +++----
 .../samples/if-block-else/output.json         | 15 ++++--------
 .../samples/if-block-elseif/output.json       | 18 +++++---------
 .../samples/if-block/output.json              |  6 ++---
 .../parser-modern/samples/options/output.json |  3 +--
 .../semicolon-inside-quotes/output.json       |  6 ++---
 .../samples/snippets/output.json              |  9 +++----
 .../samples/template-shadowroot/output.json   | 24 +++++++------------
 .../typescript-in-event-handler/output.json   |  6 ++---
 .../_expected/client/index.svelte.js          | 10 ++++++++
 .../_expected/server/index.svelte.js          |  5 ++++
 .../samples/skip-static-subtree/index.svelte  |  6 +++++
 packages/svelte/types/index.d.ts              | 18 +++++++++-----
 40 files changed, 184 insertions(+), 90 deletions(-)
 create mode 100644 .changeset/neat-ducks-jam.md
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/UseDirective.js
 create mode 100644 packages/svelte/src/compiler/phases/2-analyze/visitors/shared/fragment.js
 create mode 100644 packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
 create mode 100644 packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte

diff --git a/.changeset/neat-ducks-jam.md b/.changeset/neat-ducks-jam.md
new file mode 100644
index 0000000000..42d79a5544
--- /dev/null
+++ b/.changeset/neat-ducks-jam.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: skip over static subtrees
diff --git a/packages/svelte/src/compiler/phases/1-parse/utils/create.js b/packages/svelte/src/compiler/phases/1-parse/utils/create.js
index a505333b62..13bbb30dbf 100644
--- a/packages/svelte/src/compiler/phases/1-parse/utils/create.js
+++ b/packages/svelte/src/compiler/phases/1-parse/utils/create.js
@@ -7,6 +7,9 @@ export function create_fragment(transparent = false) {
 	return {
 		type: 'Fragment',
 		nodes: [],
-		transparent
+		metadata: {
+			transparent,
+			dynamic: false
+		}
 	};
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index daf8a54ff9..9429d3f6d2 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -61,6 +61,7 @@ import { TaggedTemplateExpression } from './visitors/TaggedTemplateExpression.js
 import { Text } from './visitors/Text.js';
 import { TitleElement } from './visitors/TitleElement.js';
 import { UpdateExpression } from './visitors/UpdateExpression.js';
+import { UseDirective } from './visitors/UseDirective.js';
 import { VariableDeclarator } from './visitors/VariableDeclarator.js';
 import is_reference from 'is-reference';
 
@@ -166,6 +167,7 @@ const visitors = {
 	Text,
 	TitleElement,
 	UpdateExpression,
+	UseDirective,
 	VariableDeclarator
 };
 
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 6923bb5aac..9bcb266eaf 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Attribute.js
@@ -1,5 +1,5 @@
 /** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression } from 'estree' */
-/** @import { Attribute, DelegatedEvent, RegularElement } from '#compiler' */
+/** @import { Attribute, DelegatedEvent, RegularElement, SvelteNode } from '#compiler' */
 /** @import { Context } from '../types' */
 import { is_capture_event, is_delegated } from '../../../../utils.js';
 import {
@@ -7,6 +7,7 @@ import {
 	get_attribute_expression,
 	is_event_attribute
 } from '../../../utils/ast.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {Attribute} node
@@ -15,6 +16,14 @@ import {
 export function Attribute(node, context) {
 	context.next();
 
+	// special case
+	if (node.name === 'value') {
+		const parent = /** @type {SvelteNode} */ (context.path.at(-1));
+		if (parent.type === 'RegularElement' && parent.name === 'option') {
+			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/AwaitBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js
index a7d804c194..78ebe03021 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitBlock.js
@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
 import * as e from '../../../errors.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {AwaitBlock} node
@@ -38,5 +39,7 @@ export function AwaitBlock(node, context) {
 		}
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
index 5855a18f7a..f66fd72de5 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/EachBlock.js
@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 /** @import { Scope } from '../../scope' */
 import * as e from '../../../errors.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
 
 /**
@@ -36,4 +37,6 @@ export function EachBlock(node, context) {
 	context.visit(node.body);
 	if (node.key) context.visit(node.key);
 	if (node.fallback) context.visit(node.fallback);
+
+	mark_subtree_dynamic(context.path);
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
index 813f9f0905..bf1c232737 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExpressionTag.js
@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 import { is_tag_valid_with_parent } from '../../../../html-tree-validation.js';
 import * as e from '../../../errors.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {ExpressionTag} node
@@ -14,5 +15,9 @@ export function ExpressionTag(node, context) {
 		}
 	}
 
+	// TODO ideally we wouldn't do this here, we'd just do it on encountering
+	// an `Identifier` within the tag. But we currently need to handle `{42}` etc
+	mark_subtree_dynamic(context.path);
+
 	context.next({ ...context.state, expression: node.metadata.expression });
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
index ecac6446ae..1c6385f94b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/HtmlTag.js
@@ -1,5 +1,6 @@
 /** @import { HtmlTag } from '#compiler' */
 /** @import { Context } from '../types' */
+import { mark_subtree_dynamic } from './shared/fragment.js';
 import { validate_opening_tag } from './shared/utils.js';
 
 /**
@@ -11,5 +12,8 @@ export function HtmlTag(node, context) {
 		validate_opening_tag(node, context.state, '@');
 	}
 
+	// unfortunately this is necessary in order to fix invalid HTML
+	mark_subtree_dynamic(context.path);
+
 	context.next();
 }
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 557206a22b..dcea431c1a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -6,6 +6,7 @@ import { should_proxy } from '../../3-transform/client/utils.js';
 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';
 
 /**
  * @param {Identifier} node
@@ -19,6 +20,8 @@ export function Identifier(node, context) {
 		return;
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	// If we are using arguments outside of a function, then throw an error
 	if (
 		node.name === 'arguments' &&
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js
index f7b6641c44..ca8122b162 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/IfBlock.js
@@ -1,5 +1,6 @@
 /** @import { IfBlock } from '#compiler' */
 /** @import { Context } from '../types' */
+import { mark_subtree_dynamic } from './shared/fragment.js';
 import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
 
 /**
@@ -22,5 +23,7 @@ export function IfBlock(node, context) {
 		validate_opening_tag(node, context.state, expected);
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js
index 618ce41493..dd42d1274e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/KeyBlock.js
@@ -1,5 +1,6 @@
 /** @import { KeyBlock } from '#compiler' */
 /** @import { Context } from '../types' */
+import { mark_subtree_dynamic } from './shared/fragment.js';
 import { validate_block_not_empty, validate_opening_tag } from './shared/utils.js';
 
 /**
@@ -13,5 +14,7 @@ export function KeyBlock(node, context) {
 		validate_opening_tag(node, context.state, '#');
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js
index 152f8301aa..102a57db2d 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/OnDirective.js
@@ -1,6 +1,7 @@
 /** @import { OnDirective } from '#compiler' */
 /** @import { Context } from '../types' */
 import * as w from '../../../warnings.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {OnDirective} node
@@ -21,5 +22,7 @@ export function OnDirective(node, context) {
 		context.state.analysis.event_directive_node ??= node;
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	context.next({ ...context.state, expression: node.metadata.expression });
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
index 525eb72415..5fe2353924 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RenderTag.js
@@ -3,6 +3,7 @@
 import { unwrap_optional } from '../../../utils/ast.js';
 import * as e from '../../../errors.js';
 import { validate_opening_tag } from './shared/utils.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {RenderTag} node
@@ -33,5 +34,7 @@ export function RenderTag(node, context) {
 		e.render_tag_invalid_call_expression(node);
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	context.next({ ...context.state, render_tag: node });
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SlotElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SlotElement.js
index 7c2c0ecf6a..25d8d5835e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SlotElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SlotElement.js
@@ -3,6 +3,7 @@
 import { is_text_attribute } from '../../../utils/ast.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {SlotElement} node
@@ -13,6 +14,8 @@ export function SlotElement(node, context) {
 		w.slot_element_deprecated(node);
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	/** @type {string} */
 	let name = 'default';
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SpreadAttribute.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SpreadAttribute.js
index feac14bb9b..b791efdd3b 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SpreadAttribute.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SpreadAttribute.js
@@ -1,10 +1,13 @@
 /** @import { SpreadAttribute } from '#compiler' */
 /** @import { Context } from '../types' */
 
+import { mark_subtree_dynamic } from './shared/fragment.js';
+
 /**
  * @param {SpreadAttribute} node
  * @param {Context} context
  */
 export function SpreadAttribute(node, context) {
+	mark_subtree_dynamic(context.path);
 	context.next({ ...context.state, expression: node.metadata.expression });
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
index ca9c766e32..d79722f256 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/StyleDirective.js
@@ -2,6 +2,7 @@
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
 import { get_attribute_chunks } from '../../../utils/ast.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {StyleDirective} node
@@ -21,6 +22,8 @@ export function StyleDirective(node, context) {
 				node.metadata.expression.has_state = true;
 			}
 		}
+
+		mark_subtree_dynamic(context.path);
 	} else {
 		context.next();
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
index bb161dcf06..0228691b3e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteElement.js
@@ -4,6 +4,7 @@ import { NAMESPACE_MATHML, NAMESPACE_SVG } from '../../../../constants.js';
 import { is_text_attribute } from '../../../utils/ast.js';
 import { check_element } from './shared/a11y.js';
 import { validate_element } from './shared/element.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {SvelteElement} node
@@ -58,5 +59,7 @@ export function SvelteElement(node, context) {
 		}
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	context.next({ ...context.state, parent_element: null });
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js
index 713f7c4ca6..93b610521a 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/SvelteHead.js
@@ -1,6 +1,7 @@
 /** @import { SvelteHead } from '#compiler' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {SvelteHead} node
@@ -11,5 +12,7 @@ export function SvelteHead(node, context) {
 		e.svelte_head_illegal_attribute(attribute);
 	}
 
+	mark_subtree_dynamic(context.path);
+
 	context.next();
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/UseDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/UseDirective.js
new file mode 100644
index 0000000000..9b2d0e599f
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/UseDirective.js
@@ -0,0 +1,12 @@
+/** @import { UseDirective } from '#compiler' */
+/** @import { Context } from '../types' */
+import { mark_subtree_dynamic } from './shared/fragment.js';
+
+/**
+ * @param {UseDirective} node
+ * @param {Context} context
+ */
+export function UseDirective(node, context) {
+	mark_subtree_dynamic(context.path);
+	context.next();
+}
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
index e6bb3c067e..9c42306f69 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/component.js
@@ -8,12 +8,15 @@ import {
 	validate_attribute_name,
 	validate_slot_attribute
 } from './attribute.js';
+import { mark_subtree_dynamic } from './fragment.js';
 
 /**
  * @param {Component | SvelteComponent | SvelteSelf} node
  * @param {Context} context
  */
 export function visit_component(node, context) {
+	mark_subtree_dynamic(context.path);
+
 	for (const attribute of node.attributes) {
 		if (
 			attribute.type !== 'Attribute' &&
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/fragment.js
new file mode 100644
index 0000000000..23ed36b3fb
--- /dev/null
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/fragment.js
@@ -0,0 +1,15 @@
+/** @import { SvelteNode } from '#compiler' */
+
+/**
+ * @param {SvelteNode[]} path
+ */
+export function mark_subtree_dynamic(path) {
+	let i = path.length;
+	while (i--) {
+		const node = path[i];
+		if (node.type === 'Fragment') {
+			if (node.metadata.dynamic) return;
+			node.metadata.dynamic = true;
+		}
+	}
+}
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 890713f22a..4625195f63 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
@@ -313,9 +313,8 @@ export function RegularElement(node, context) {
 	/** Whether or not we need to wrap the children in `{...}` to avoid declaration conflicts */
 	const has_declaration = node.fragment.nodes.some((node) => node.type === 'SnippetBlock');
 
-	const child_state = has_declaration
-		? { ...state, init: [], update: [], after_update: [] }
-		: state;
+	/** @type {typeof state} */
+	const child_state = { ...state, init: [], update: [], after_update: [] };
 
 	for (const node of hoisted) {
 		context.visit(node, child_state);
@@ -353,6 +352,10 @@ export function RegularElement(node, context) {
 				...child_state.after_update
 			])
 		);
+	} else if (node.fragment.metadata.dynamic) {
+		context.state.init.push(...child_state.init);
+		context.state.update.push(...child_state.update);
+		context.state.after_update.push(...child_state.after_update);
 	}
 
 	if (has_direction_attribute) {
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index dba086b51f..66a49f87c7 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -636,7 +636,7 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		},
 
 		Fragment: (node, context) => {
-			const scope = context.state.scope.child(node.transparent);
+			const scope = context.state.scope.child(node.metadata.transparent);
 			scopes.set(node, scope);
 			context.next({ scope });
 		},
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 318de6953c..9971af9977 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -29,12 +29,18 @@ export interface BaseNode {
 export interface Fragment {
 	type: 'Fragment';
 	nodes: Array<Text | Tag | ElementLike | Block | Comment>;
-	/**
-	 * Fragments declare their own scopes. A transparent fragment is one whose scope
-	 * is not represented by a scope in the resulting JavaScript (e.g. an element scope),
-	 * and should therefore delegate to parent scopes when generating unique identifiers
-	 */
-	transparent: boolean;
+	metadata: {
+		/**
+		 * Fragments declare their own scopes. A transparent fragment is one whose scope
+		 * is not represented by a scope in the resulting JavaScript (e.g. an element scope),
+		 * and should therefore delegate to parent scopes when generating unique identifiers
+		 */
+		transparent: boolean;
+		/**
+		 * Whether or not we need to traverse into the fragment during mount/hydrate
+		 */
+		dynamic: boolean;
+	};
 }
 
 /**
diff --git a/packages/svelte/tests/parser-modern/samples/comment-before-script/output.json b/packages/svelte/tests/parser-modern/samples/comment-before-script/output.json
index 5051d9ba4d..13c099a857 100644
--- a/packages/svelte/tests/parser-modern/samples/comment-before-script/output.json
+++ b/packages/svelte/tests/parser-modern/samples/comment-before-script/output.json
@@ -20,8 +20,7 @@
 				"raw": "\n",
 				"data": "\n"
 			}
-		],
-		"transparent": false
+		]
 	},
 	"options": null,
 	"instance": {
diff --git a/packages/svelte/tests/parser-modern/samples/css-nth-syntax/output.json b/packages/svelte/tests/parser-modern/samples/css-nth-syntax/output.json
index e8f0ca2a4b..a126acb4c3 100644
--- a/packages/svelte/tests/parser-modern/samples/css-nth-syntax/output.json
+++ b/packages/svelte/tests/parser-modern/samples/css-nth-syntax/output.json
@@ -1108,12 +1108,10 @@
 							"raw": "Foo",
 							"data": "Foo"
 						}
-					],
-					"transparent": true
+					]
 				}
 			}
-		],
-		"transparent": false
+		]
 	},
 	"options": null
 }
diff --git a/packages/svelte/tests/parser-modern/samples/css-pseudo-classes/output.json b/packages/svelte/tests/parser-modern/samples/css-pseudo-classes/output.json
index ed7bd7c8e0..e410cf2a80 100644
--- a/packages/svelte/tests/parser-modern/samples/css-pseudo-classes/output.json
+++ b/packages/svelte/tests/parser-modern/samples/css-pseudo-classes/output.json
@@ -403,8 +403,7 @@
 	"type": "Root",
 	"fragment": {
 		"type": "Fragment",
-		"nodes": [],
-		"transparent": false
+		"nodes": []
 	},
 	"options": null
 }
diff --git a/packages/svelte/tests/parser-modern/samples/each-block-object-pattern/output.json b/packages/svelte/tests/parser-modern/samples/each-block-object-pattern/output.json
index f89be70f77..8fc3feb916 100644
--- a/packages/svelte/tests/parser-modern/samples/each-block-object-pattern/output.json
+++ b/packages/svelte/tests/parser-modern/samples/each-block-object-pattern/output.json
@@ -144,8 +144,7 @@
 											}
 										}
 									}
-								],
-								"transparent": true
+								]
 							}
 						},
 						{
@@ -155,8 +154,7 @@
 							"raw": "\n",
 							"data": "\n"
 						}
-					],
-					"transparent": false
+					]
 				},
 				"context": {
 					"type": "ObjectPattern",
@@ -310,8 +308,7 @@
 					]
 				}
 			}
-		],
-		"transparent": false
+		]
 	},
 	"options": null
 }
diff --git a/packages/svelte/tests/parser-modern/samples/if-block-else/output.json b/packages/svelte/tests/parser-modern/samples/if-block-else/output.json
index 1193af156e..cf47e3e0bb 100644
--- a/packages/svelte/tests/parser-modern/samples/if-block-else/output.json
+++ b/packages/svelte/tests/parser-modern/samples/if-block-else/output.json
@@ -54,8 +54,7 @@
 										"raw": "foo",
 										"data": "foo"
 									}
-								],
-								"transparent": true
+								]
 							}
 						},
 						{
@@ -65,8 +64,7 @@
 							"raw": "\n",
 							"data": "\n"
 						}
-					],
-					"transparent": false
+					]
 				},
 				"alternate": {
 					"type": "Fragment",
@@ -94,8 +92,7 @@
 										"raw": "not foo",
 										"data": "not foo"
 									}
-								],
-								"transparent": true
+								]
 							}
 						},
 						{
@@ -105,12 +102,10 @@
 							"raw": "\n",
 							"data": "\n"
 						}
-					],
-					"transparent": false
+					]
 				}
 			}
-		],
-		"transparent": false
+		]
 	},
 	"options": null
 }
diff --git a/packages/svelte/tests/parser-modern/samples/if-block-elseif/output.json b/packages/svelte/tests/parser-modern/samples/if-block-elseif/output.json
index e68b154a55..b10d50c939 100644
--- a/packages/svelte/tests/parser-modern/samples/if-block-elseif/output.json
+++ b/packages/svelte/tests/parser-modern/samples/if-block-elseif/output.json
@@ -87,8 +87,7 @@
 										"raw": "x is greater than 10",
 										"data": "x is greater than 10"
 									}
-								],
-								"transparent": true
+								]
 							}
 						},
 						{
@@ -98,8 +97,7 @@
 							"raw": "\n",
 							"data": "\n"
 						}
-					],
-					"transparent": false
+					]
 				},
 				"alternate": {
 					"type": "Fragment",
@@ -184,8 +182,7 @@
 													"raw": "x is less than 5",
 													"data": "x is less than 5"
 												}
-											],
-											"transparent": true
+											]
 										}
 									},
 									{
@@ -195,17 +192,14 @@
 										"raw": "\n",
 										"data": "\n"
 									}
-								],
-								"transparent": false
+								]
 							},
 							"alternate": null
 						}
-					],
-					"transparent": false
+					]
 				}
 			}
-		],
-		"transparent": false
+		]
 	},
 	"options": null
 }
diff --git a/packages/svelte/tests/parser-modern/samples/if-block/output.json b/packages/svelte/tests/parser-modern/samples/if-block/output.json
index 965f2b5614..f363ed8274 100644
--- a/packages/svelte/tests/parser-modern/samples/if-block/output.json
+++ b/packages/svelte/tests/parser-modern/samples/if-block/output.json
@@ -38,13 +38,11 @@
 							"raw": "bar",
 							"data": "bar"
 						}
-					],
-					"transparent": false
+					]
 				},
 				"alternate": null
 			}
-		],
-		"transparent": false
+		]
 	},
 	"options": null
 }
diff --git a/packages/svelte/tests/parser-modern/samples/options/output.json b/packages/svelte/tests/parser-modern/samples/options/output.json
index 23ccf3b2f7..27a5cfce15 100644
--- a/packages/svelte/tests/parser-modern/samples/options/output.json
+++ b/packages/svelte/tests/parser-modern/samples/options/output.json
@@ -21,8 +21,7 @@
 				"raw": "\n\n",
 				"data": "\n\n"
 			}
-		],
-		"transparent": false
+		]
 	},
 	"options": {
 		"start": 0,
diff --git a/packages/svelte/tests/parser-modern/samples/semicolon-inside-quotes/output.json b/packages/svelte/tests/parser-modern/samples/semicolon-inside-quotes/output.json
index b900bfc0b3..33dd78879c 100644
--- a/packages/svelte/tests/parser-modern/samples/semicolon-inside-quotes/output.json
+++ b/packages/svelte/tests/parser-modern/samples/semicolon-inside-quotes/output.json
@@ -98,8 +98,7 @@
 							"raw": "\n\tSemicolon inside quotes\n",
 							"data": "\n\tSemicolon inside quotes\n"
 						}
-					],
-					"transparent": true
+					]
 				}
 			},
 			{
@@ -109,8 +108,7 @@
 				"raw": "\n",
 				"data": "\n"
 			}
-		],
-		"transparent": false
+		]
 	},
 	"options": null
 }
diff --git a/packages/svelte/tests/parser-modern/samples/snippets/output.json b/packages/svelte/tests/parser-modern/samples/snippets/output.json
index 0926c2fb26..2cf2596b18 100644
--- a/packages/svelte/tests/parser-modern/samples/snippets/output.json
+++ b/packages/svelte/tests/parser-modern/samples/snippets/output.json
@@ -112,8 +112,7 @@
 											"name": "msg"
 										}
 									}
-								],
-								"transparent": true
+								]
 							}
 						},
 						{
@@ -123,8 +122,7 @@
 							"raw": "\n",
 							"data": "\n"
 						}
-					],
-					"transparent": false
+					]
 				}
 			},
 			{
@@ -189,8 +187,7 @@
 					"optional": false
 				}
 			}
-		],
-		"transparent": false
+		]
 	},
 	"options": null,
 	"instance": {
diff --git a/packages/svelte/tests/parser-modern/samples/template-shadowroot/output.json b/packages/svelte/tests/parser-modern/samples/template-shadowroot/output.json
index eb9ffe51de..65d716a82b 100644
--- a/packages/svelte/tests/parser-modern/samples/template-shadowroot/output.json
+++ b/packages/svelte/tests/parser-modern/samples/template-shadowroot/output.json
@@ -56,12 +56,10 @@
 										"attributes": [],
 										"fragment": {
 											"type": "Fragment",
-											"nodes": [],
-											"transparent": true
+											"nodes": []
 										}
 									}
-								],
-								"transparent": true
+								]
 							}
 						},
 						{
@@ -71,8 +69,7 @@
 							"raw": "\n",
 							"data": "\n"
 						}
-					],
-					"transparent": true
+					]
 				}
 			},
 			{
@@ -115,12 +112,10 @@
 										"attributes": [],
 										"fragment": {
 											"type": "Fragment",
-											"nodes": [],
-											"transparent": true
+											"nodes": []
 										}
 									}
-								],
-								"transparent": true
+								]
 							}
 						},
 						{
@@ -130,8 +125,7 @@
 							"raw": "\n",
 							"data": "\n"
 						}
-					],
-					"transparent": true
+					]
 				}
 			},
 			{
@@ -149,12 +143,10 @@
 				"attributes": [],
 				"fragment": {
 					"type": "Fragment",
-					"nodes": [],
-					"transparent": true
+					"nodes": []
 				}
 			}
-		],
-		"transparent": false
+		]
 	},
 	"options": null
 }
diff --git a/packages/svelte/tests/parser-modern/samples/typescript-in-event-handler/output.json b/packages/svelte/tests/parser-modern/samples/typescript-in-event-handler/output.json
index 117496744b..5d72e01b0a 100644
--- a/packages/svelte/tests/parser-modern/samples/typescript-in-event-handler/output.json
+++ b/packages/svelte/tests/parser-modern/samples/typescript-in-event-handler/output.json
@@ -350,12 +350,10 @@
 								"name": "count"
 							}
 						}
-					],
-					"transparent": true
+					]
 				}
 			}
-		],
-		"transparent": false
+		]
 	},
 	"options": null,
 	"instance": {
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
new file mode 100644
index 0000000000..20d29d5359
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
@@ -0,0 +1,10 @@
+import "svelte/internal/disclose-version";
+import * as $ from "svelte/internal/client";
+
+var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header>`);
+
+export default function Skip_static_subtree($$anchor) {
+	var header = root();
+
+	$.append($$anchor, header);
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
new file mode 100644
index 0000000000..77851c330e
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
@@ -0,0 +1,5 @@
+import * as $ from "svelte/internal/server";
+
+export default function Skip_static_subtree($$payload) {
+	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header>`;
+}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte b/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
new file mode 100644
index 0000000000..f5ee042585
--- /dev/null
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
@@ -0,0 +1,6 @@
+<header>
+	<nav>
+		<a href="/">Home</a>
+		<a href="/away">Away</a>
+	</nav>
+</header>
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 3c0dede5b0..0895821a66 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1486,12 +1486,18 @@ declare module 'svelte/compiler' {
 	interface Fragment {
 		type: 'Fragment';
 		nodes: Array<Text | Tag | ElementLike | Block | Comment>;
-		/**
-		 * Fragments declare their own scopes. A transparent fragment is one whose scope
-		 * is not represented by a scope in the resulting JavaScript (e.g. an element scope),
-		 * and should therefore delegate to parent scopes when generating unique identifiers
-		 */
-		transparent: boolean;
+		metadata: {
+			/**
+			 * Fragments declare their own scopes. A transparent fragment is one whose scope
+			 * is not represented by a scope in the resulting JavaScript (e.g. an element scope),
+			 * and should therefore delegate to parent scopes when generating unique identifiers
+			 */
+			transparent: boolean;
+			/**
+			 * Whether or not we need to traverse into the fragment during mount/hydrate
+			 */
+			dynamic: boolean;
+		};
 	}
 
 	/**

From 57a4b5d19c0d835f9a66c36a0a2cb541f63e2a86 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 15 Aug 2024 05:26:49 -0400
Subject: [PATCH 121/196] feat: better compiler warnings for non-reactive
 dependencies of reactive statements (#12824)

* feat: better compiler warnings for non-reactive dependencies of reactive statements

* fix

* regenerate
---
 .changeset/strange-pillows-greet.md           |  5 ++++
 .../messages/compile-warnings/script.md       |  8 ++++--
 .../phases/2-analyze/visitors/Identifier.js   |  8 ++++++
 .../2-analyze/visitors/LabeledStatement.js    | 10 +------
 .../2-analyze/visitors/MemberExpression.js    | 28 ++++++++++++++++++-
 .../phases/3-transform/client/utils.js        |  7 +++--
 .../client/visitors/VariableDeclaration.js    |  2 +-
 .../client/visitors/shared/declarations.js    |  2 +-
 packages/svelte/src/compiler/warnings.js      | 17 ++++++++---
 .../reactive-module-variable/input.svelte     |  7 ++++-
 .../reactive-module-variable/warnings.json    | 12 ++++----
 11 files changed, 78 insertions(+), 28 deletions(-)
 create mode 100644 .changeset/strange-pillows-greet.md

diff --git a/.changeset/strange-pillows-greet.md b/.changeset/strange-pillows-greet.md
new file mode 100644
index 0000000000..bfb08a11d9
--- /dev/null
+++ b/.changeset/strange-pillows-greet.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: better compiler warnings for non-reactive dependencies of reactive statements
diff --git a/packages/svelte/messages/compile-warnings/script.md b/packages/svelte/messages/compile-warnings/script.md
index a31655b972..3d55da289f 100644
--- a/packages/svelte/messages/compile-warnings/script.md
+++ b/packages/svelte/messages/compile-warnings/script.md
@@ -26,9 +26,13 @@
 
 > Reactive declarations only exist at the top level of the instance script
 
-## reactive_declaration_module_script
+## reactive_declaration_module_script_dependency
 
-> All dependencies of the reactive declaration are declared in a module script and will not be reactive
+> Reassignments of module-level declarations will not cause reactive statements to update
+
+## reactive_declaration_non_reactive_property
+
+> Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
 
 ## state_referenced_locally
 
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 dcea431c1a..1f3406e92e 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -109,5 +109,13 @@ export function Identifier(node, context) {
 		) {
 			w.state_referenced_locally(node);
 		}
+
+		if (
+			context.state.reactive_statement &&
+			binding.scope === context.state.analysis.module.scope &&
+			binding.reassigned
+		) {
+			w.reactive_declaration_module_script_dependency(node);
+		}
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/LabeledStatement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/LabeledStatement.js
index 9be8c161d4..0ff8c37ade 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/LabeledStatement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/LabeledStatement.js
@@ -4,6 +4,7 @@
 import * as e from '../../../errors.js';
 import { extract_identifiers, object } from '../../../utils/ast.js';
 import * as w from '../../../warnings.js';
+import { is_state_source } from '../../3-transform/client/utils.js';
 
 /**
  * @param {LabeledStatement} node
@@ -66,15 +67,6 @@ export function LabeledStatement(node, context) {
 
 			context.state.reactive_statements.set(node, reactive_statement);
 
-			if (
-				reactive_statement.dependencies.length &&
-				reactive_statement.dependencies.every(
-					(d) => d.scope === context.state.analysis.module.scope && d.declaration_kind !== 'const'
-				)
-			) {
-				w.reactive_declaration_module_script(node);
-			}
-
 			if (
 				node.body.type === 'ExpressionStatement' &&
 				node.body.expression.type === 'AssignmentExpression'
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 245a164c71..ca67bf47ec 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
@@ -1,6 +1,8 @@
-/** @import { MemberExpression } from 'estree' */
+/** @import { MemberExpression, Node } from 'estree' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
+import * as w from '../../../warnings.js';
+import { object } from '../../../utils/ast.js';
 import { is_pure, is_safe_identifier } from './shared/utils.js';
 
 /**
@@ -23,5 +25,29 @@ export function MemberExpression(node, context) {
 		context.state.analysis.needs_context = true;
 	}
 
+	if (context.state.reactive_statement) {
+		const left = object(node);
+
+		if (left !== null) {
+			const binding = context.state.scope.get(left.name);
+
+			if (binding && binding.kind === 'normal') {
+				const parent = /** @type {Node} */ (context.path.at(-1));
+
+				if (
+					binding.scope === context.state.analysis.module.scope ||
+					binding.declaration_kind === 'import' ||
+					(binding.initial &&
+						binding.initial.type !== 'ArrayExpression' &&
+						binding.initial.type !== 'ObjectExpression')
+				) {
+					if (parent.type !== 'MemberExpression' && parent.type !== 'CallExpression') {
+						w.reactive_declaration_non_reactive_property(node);
+					}
+				}
+			}
+		}
+	}
+
 	context.next();
 }
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 965b8d80a5..35283aed72 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -1,6 +1,7 @@
 /** @import { ArrowFunctionExpression, Expression, FunctionDeclaration, FunctionExpression, Identifier, Pattern, PrivateIdentifier, Statement } from 'estree' */
 /** @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';
@@ -16,13 +17,13 @@ import { get_value } from './visitors/shared/declarations.js';
 
 /**
  * @param {Binding} binding
- * @param {ClientTransformState} state
+ * @param {Analysis} analysis
  * @returns {boolean}
  */
-export function is_state_source(binding, state) {
+export function is_state_source(binding, analysis) {
 	return (
 		(binding.kind === 'state' || binding.kind === 'raw_state') &&
-		(!state.analysis.immutable || binding.reassigned || state.analysis.accessors)
+		(!analysis.immutable || binding.reassigned || analysis.accessors)
 	);
 }
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index 8d36046be3..d8106f9d7d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -126,7 +126,7 @@ export function VariableDeclaration(node, context) {
 					if (rune === '$state' && should_proxy(value, context.state.scope)) {
 						value = b.call('$.proxy', value);
 					}
-					if (is_state_source(binding, context.state)) {
+					if (is_state_source(binding, context.state.analysis)) {
 						value = b.call('$.source', value);
 					}
 					return value;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
index 0ea6a7ff6d..33566f1c10 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
@@ -18,7 +18,7 @@ export function get_value(node) {
 export function add_state_transformers(context) {
 	for (const [name, binding] of context.state.scope.declarations) {
 		if (
-			is_state_source(binding, context.state) ||
+			is_state_source(binding, context.state.analysis) ||
 			binding.kind === 'derived' ||
 			binding.kind === 'legacy_reactive'
 		) {
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
index 0aab91b540..90702409b3 100644
--- a/packages/svelte/src/compiler/warnings.js
+++ b/packages/svelte/src/compiler/warnings.js
@@ -101,7 +101,8 @@ export const codes = [
 	"perf_avoid_inline_class",
 	"perf_avoid_nested_class",
 	"reactive_declaration_invalid_placement",
-	"reactive_declaration_module_script",
+	"reactive_declaration_module_script_dependency",
+	"reactive_declaration_non_reactive_property",
 	"state_referenced_locally",
 	"store_rune_conflict",
 	"css_unused_selector",
@@ -630,11 +631,19 @@ export function reactive_declaration_invalid_placement(node) {
 }
 
 /**
- * All dependencies of the reactive declaration are declared in a module script and will not be reactive
+ * Reassignments of module-level declarations will not cause reactive statements to update
  * @param {null | NodeLike} node
  */
-export function reactive_declaration_module_script(node) {
-	w(node, "reactive_declaration_module_script", "All dependencies of the reactive declaration are declared in a module script and will not be reactive");
+export function reactive_declaration_module_script_dependency(node) {
+	w(node, "reactive_declaration_module_script_dependency", "Reassignments of module-level declarations will not cause reactive statements to update");
+}
+
+/**
+ * Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update
+ * @param {null | NodeLike} node
+ */
+export function reactive_declaration_non_reactive_property(node) {
+	w(node, "reactive_declaration_non_reactive_property", "Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update");
 }
 
 /**
diff --git a/packages/svelte/tests/validator/samples/reactive-module-variable/input.svelte b/packages/svelte/tests/validator/samples/reactive-module-variable/input.svelte
index 5a540de4f0..ebf98c0e9e 100644
--- a/packages/svelte/tests/validator/samples/reactive-module-variable/input.svelte
+++ b/packages/svelte/tests/validator/samples/reactive-module-variable/input.svelte
@@ -1,6 +1,11 @@
 <script context="module">
-	let foo;
+	let foo = 0;
+
+	export function update() {
+		foo += 1;
+	}
 </script>
+
 <script>
 	$: bar = foo;
 </script>
diff --git a/packages/svelte/tests/validator/samples/reactive-module-variable/warnings.json b/packages/svelte/tests/validator/samples/reactive-module-variable/warnings.json
index b401db5008..9d5105db82 100644
--- a/packages/svelte/tests/validator/samples/reactive-module-variable/warnings.json
+++ b/packages/svelte/tests/validator/samples/reactive-module-variable/warnings.json
@@ -1,14 +1,14 @@
 [
 	{
-		"code": "reactive_declaration_module_script",
-		"message": "All dependencies of the reactive declaration are declared in a module script and will not be reactive",
+		"code": "reactive_declaration_module_script_dependency",
+		"message": "Reassignments of module-level declarations will not cause reactive statements to update",
 		"start": {
-			"column": 1,
-			"line": 5
+			"column": 10,
+			"line": 10
 		},
 		"end": {
-			"column": 14,
-			"line": 5
+			"column": 13,
+			"line": 10
 		}
 	}
 ]

From 50b905a531eeb2983e051116e678d5db408af879 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 15 Aug 2024 05:28:24 -0400
Subject: [PATCH 122/196] fix: skip unnecessary `$$legacy` flag (#12850)

---
 .changeset/tricky-coats-shop.md                             | 5 +++++
 .../phases/3-transform/client/visitors/shared/component.js  | 5 ++++-
 .../samples/purity/_expected/client/index.svelte.js         | 6 +-----
 3 files changed, 10 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/tricky-coats-shop.md

diff --git a/.changeset/tricky-coats-shop.md b/.changeset/tricky-coats-shop.md
new file mode 100644
index 0000000000..b3d45933a3
--- /dev/null
+++ b/.changeset/tricky-coats-shop.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: skip unnecessary `$$legacy` flag
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 44f943ddec..7c43f68a66 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -298,7 +298,10 @@ export function build_component(node, component_name, context, anchor = context.
 		push_prop(b.init('$$slots', b.object(serialized_slots)));
 	}
 
-	if (!context.state.analysis.runes) {
+	if (
+		!context.state.analysis.runes &&
+		node.attributes.some((attribute) => attribute.type === 'BindDirective')
+	) {
 		push_prop(b.init('$$legacy', b.true));
 	}
 
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
index 2863caba49..062e52f8cf 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
@@ -23,10 +23,6 @@ export default function Purity($$anchor) {
 
 	var node = $.sibling($.sibling(p_1, true));
 
-	Child(node, {
-		prop: encodeURIComponent(value),
-		$$legacy: true
-	});
-
+	Child(node, { prop: encodeURIComponent(value) });
 	$.append($$anchor, fragment);
 }
\ No newline at end of file

From 45da5a426febac6f1afdbf0be060101ef3e77930 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 15 Aug 2024 10:46:29 +0100
Subject: [PATCH 123/196] Version Packages (next) (#12846)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  6 ++++++
 packages/svelte/CHANGELOG.md   | 16 ++++++++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 0db3bc498d..ad09eb09f3 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -226,6 +226,7 @@
     "friendly-candles-relate",
     "friendly-clouds-rhyme",
     "friendly-lies-camp",
+    "funny-bugs-kiss",
     "funny-cooks-clean",
     "funny-dragons-double",
     "funny-ties-jump",
@@ -383,6 +384,7 @@
     "lovely-rules-eat",
     "lovely-zebras-own",
     "lucky-colts-remember",
+    "lucky-experts-float",
     "lucky-geckos-swim",
     "lucky-panthers-chew",
     "lucky-schools-hang",
@@ -420,6 +422,7 @@
     "neat-boats-shake",
     "neat-boxes-chew",
     "neat-dingos-clap",
+    "neat-ducks-jam",
     "neat-files-rescue",
     "neat-jokes-beam",
     "nervous-berries-boil",
@@ -469,6 +472,7 @@
     "perfect-hairs-matter",
     "perfect-hats-dance",
     "pink-bikes-agree",
+    "pink-countries-repair",
     "pink-goats-promise",
     "pink-mayflies-tie",
     "plenty-clouds-reply",
@@ -661,6 +665,7 @@
     "stale-nails-listen",
     "strange-apricots-happen",
     "strange-pears-perform",
+    "strange-pillows-greet",
     "strange-roses-brake",
     "strong-apricots-destroy",
     "strong-gifts-smoke",
@@ -747,6 +752,7 @@
     "tough-tomatoes-explain",
     "tricky-avocados-play",
     "tricky-balloons-care",
+    "tricky-coats-shop",
     "tricky-ears-shout",
     "tricky-laws-bathe",
     "twelve-beans-drive",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 8d3108c42b..5c7764e78d 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,21 @@
 # svelte
 
+## 5.0.0-next.222
+
+### Patch Changes
+
+- fix: avoid throwing `store_invalid_subscription_module` for runes ([#12848](https://github.com/sveltejs/svelte/pull/12848))
+
+- fix: omit `$index` parameter where possible ([#12851](https://github.com/sveltejs/svelte/pull/12851))
+
+- feat: skip over static subtrees ([#12849](https://github.com/sveltejs/svelte/pull/12849))
+
+- chore: set `binding.kind` before analysis ([#12843](https://github.com/sveltejs/svelte/pull/12843))
+
+- feat: better compiler warnings for non-reactive dependencies of reactive statements ([#12824](https://github.com/sveltejs/svelte/pull/12824))
+
+- fix: skip unnecessary `$legacy` flag ([#12850](https://github.com/sveltejs/svelte/pull/12850))
+
 ## 5.0.0-next.221
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 52a24f90e5..b44c73788c 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.221",
+  "version": "5.0.0-next.222",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index ee5a723b07..a3e3623c9a 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.221';
+export const VERSION = '5.0.0-next.222';
 export const PUBLIC_VERSION = '5';

From 03945f56b4faefed43377940a89765b5fe19058a Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Thu, 15 Aug 2024 14:42:10 +0200
Subject: [PATCH 124/196] fix: hoist reactive imports to the module (#12845)

* fix: hoist reactive imports to the module

* fix

* Update .changeset/eleven-teachers-drive.md

* beef up test

* unused

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 .changeset/eleven-teachers-drive.md           |  5 ++++
 .../3-transform/client/transform-client.js    |  2 +-
 .../3-transform/client/visitors/Program.js    | 28 +++++++++++++------
 .../_config.js                                | 17 +++++++++++
 .../main.svelte                               |  9 ++++++
 .../reactive-import-statement-module/state.js |  3 ++
 6 files changed, 54 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/eleven-teachers-drive.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/main.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/state.js

diff --git a/.changeset/eleven-teachers-drive.md b/.changeset/eleven-teachers-drive.md
new file mode 100644
index 0000000000..6a8129a733
--- /dev/null
+++ b/.changeset/eleven-teachers-drive.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: treat module-level imports as non-reactive in legacy mode
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index 5bc3e123cc..ca6763477e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -197,7 +197,7 @@ export function client_component(analysis, options) {
 		)
 	);
 
-	instance.body.unshift(...state.legacy_reactive_imports);
+	module.body.unshift(...state.legacy_reactive_imports);
 
 	/** @type {ESTree.Statement[]} */
 	const store_setup = [];
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
index c222d74d6e..53e76f9a1d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
@@ -1,4 +1,4 @@
-/** @import { Expression, MemberExpression, Program } from 'estree' */
+/** @import { Expression, ImportDeclaration, MemberExpression, Program } from 'estree' */
 /** @import { ComponentContext } from '../types' */
 import { build_getter, is_prop_source } from '../utils.js';
 import * as b from '../../../../utils/builders.js';
@@ -16,16 +16,26 @@ export function Program(_, context) {
 
 		for (const [name, binding] of context.state.scope.declarations) {
 			if (binding.declaration_kind === 'import' && binding.mutated) {
-				const id = b.id('$$_import_' + name);
+				// the declaration itself is hoisted to the module scope, so we need
+				// to resort to cruder measures to differentiate instance/module imports
+				const { start, end } = context.state.analysis.instance.ast;
+				const node = /** @type {ImportDeclaration} */ (binding.initial);
+				const is_instance_import =
+					/** @type {number} */ (node.start) > /** @type {number} */ (start) &&
+					/** @type {number} */ (node.end) < /** @type {number} */ (end);
 
-				context.state.transform[name] = {
-					read: (_) => b.call(id),
-					mutate: (_, mutation) => b.call(id, mutation)
-				};
+				if (is_instance_import) {
+					const id = b.id('$$_import_' + name);
+
+					context.state.transform[name] = {
+						read: (_) => b.call(id),
+						mutate: (_, mutation) => b.call(id, mutation)
+					};
 
-				context.state.legacy_reactive_imports.push(
-					b.var(id, b.call('$.reactive_import', b.thunk(b.id(name))))
-				);
+					context.state.legacy_reactive_imports.push(
+						b.var(id, b.call('$.reactive_import', b.thunk(b.id(name))))
+					);
+				}
 			}
 		}
 	}
diff --git a/packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/_config.js b/packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/_config.js
new file mode 100644
index 0000000000..a5dedc15fc
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/_config.js
@@ -0,0 +1,17 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+import state from './state.js';
+
+export default test({
+	html: '<button>0</button>',
+
+	before_test() {
+		state.count = 0;
+	},
+
+	test({ assert, target }) {
+		const button = target.querySelector('button');
+		flushSync(() => button?.click());
+		assert.htmlEqual(target.innerHTML, '<button>0</button>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/main.svelte b/packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/main.svelte
new file mode 100644
index 0000000000..beb2c406d1
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/main.svelte
@@ -0,0 +1,9 @@
+<script context="module">
+	import state from './state.js';
+
+	function update() {
+		state.count += 1;
+	}
+</script>
+
+<button on:click={update}>{state.count}</button>
diff --git a/packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/state.js b/packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/state.js
new file mode 100644
index 0000000000..f0fc271f84
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/state.js
@@ -0,0 +1,3 @@
+export default {
+	count: 0
+};

From 74b6f4d4dd1a4f315fc08b20109343743a928834 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Thu, 15 Aug 2024 08:05:01 -0700
Subject: [PATCH 125/196] docs: add command to test PR in another project

---
 CONTRIBUTING.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 4da7e520ac..5e78a01b98 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -160,6 +160,10 @@ When adding a new breaking change, follow this template in your pull request:
 - **Severity (number of people affected x effort)**:
 ```
 
+### Reviewing pull requests
+
+If you'd like to manually test a pull request in another pnpm project, you can do so by running `pnpm add -D "github:sveltejs/svelte#path:packages/svelte&branch-name"` in that project.
+
 ## License
 
 By contributing to Svelte, you agree that your contributions will be licensed under its [MIT license](https://github.com/sveltejs/svelte/blob/master/LICENSE.md).

From 43679b855e39256298058d9fbe6b1a7071d93bdf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Crozatier?=
 <48696601+fcrozatier@users.noreply.github.com>
Date: Thu, 15 Aug 2024 17:16:47 +0200
Subject: [PATCH 126/196] fix: A few type adjustments (#12858)

* crossorigin is an enumerated type

* wrap is an enumerated type

* changeset
---
 .changeset/six-vans-add.md    | 5 +++++
 packages/svelte/elements.d.ts | 8 ++++----
 2 files changed, 9 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/six-vans-add.md

diff --git a/.changeset/six-vans-add.md b/.changeset/six-vans-add.md
new file mode 100644
index 0000000000..3ced1ff9e1
--- /dev/null
+++ b/.changeset/six-vans-add.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: stricter `crossorigin` and `wrap` attributes types
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index 05c113358e..be12ddbcbb 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -1091,7 +1091,7 @@ export interface HTMLLiAttributes extends HTMLAttributes<HTMLLIElement> {
 
 export interface HTMLLinkAttributes extends HTMLAttributes<HTMLLinkElement> {
 	as?: string | undefined | null;
-	crossorigin?: string | undefined | null;
+	crossorigin?: 'anonymous' | 'use-credentials' | '' | undefined | null;
 	href?: string | undefined | null;
 	hreflang?: string | undefined | null;
 	integrity?: string | undefined | null;
@@ -1125,7 +1125,7 @@ export interface HTMLMediaAttributes<T extends HTMLMediaElement> extends HTMLAtt
 		| (string & {})
 		| undefined
 		| null;
-	crossorigin?: string | undefined | null;
+	crossorigin?: 'anonymous' | 'use-credentials' | '' | undefined | null;
 	currenttime?: number | undefined | null;
 	defaultmuted?: boolean | undefined | null;
 	defaultplaybackrate?: number | undefined | null;
@@ -1236,7 +1236,7 @@ export interface HTMLScriptAttributes extends HTMLAttributes<HTMLScriptElement>
 	async?: boolean | undefined | null;
 	/** @deprecated */
 	charset?: string | undefined | null;
-	crossorigin?: string | undefined | null;
+	crossorigin?: 'anonymous' | 'use-credentials' | '' | undefined | null;
 	defer?: boolean | undefined | null;
 	fetchpriority?: 'auto' | 'high' | 'low' | undefined | null;
 	integrity?: string | undefined | null;
@@ -1306,7 +1306,7 @@ export interface HTMLTextareaAttributes extends HTMLAttributes<HTMLTextAreaEleme
 	required?: boolean | undefined | null;
 	rows?: number | undefined | null;
 	value?: string | string[] | number | undefined | null;
-	wrap?: string | undefined | null;
+	wrap?: 'hard' | 'soft' | undefined | null;
 
 	'on:change'?: ChangeEventHandler<HTMLTextAreaElement> | undefined | null;
 	onchange?: ChangeEventHandler<HTMLTextAreaElement> | undefined | null;

From cb124315be03a47710672eb661b57d714d01fd52 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 15 Aug 2024 17:01:58 +0100
Subject: [PATCH 127/196] chore: bring back recursive processing of effects
 (#12861)

* chore: bring back recursive processing of effects

* Update packages/svelte/src/internal/client/runtime.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../svelte/src/internal/client/runtime.js     | 110 ++++++++----------
 1 file changed, 50 insertions(+), 60 deletions(-)

diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index f113e339e7..2ab833fc25 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -571,6 +571,53 @@ export function schedule_effect(signal) {
 	current_queued_root_effects.push(effect);
 }
 
+/**
+ * @param {Effect} effect
+ * @param {Effect[]} effects
+ */
+function process_effect_children(effect, effects) {
+	var current = effect.first;
+
+	while (current !== null) {
+		var next = current.next;
+		process_effect(current, effects);
+		current = next;
+	}
+}
+
+/**
+ * @param {Effect} effect
+ * @param {Effect[]} effects
+ */
+function process_effect(effect, effects) {
+	var flags = effect.f;
+	// TODO: we probably don't need to check for destroyed as it shouldn't be encountered?
+	var is_active = (flags & (DESTROYED | INERT)) === 0;
+	var is_branch = (flags & BRANCH_EFFECT) !== 0;
+	var is_clean = (flags & CLEAN) !== 0;
+
+	// Skip this branch if it's clean
+	if (is_active && (!is_branch || !is_clean)) {
+		if (is_branch) {
+			set_signal_status(effect, CLEAN);
+		}
+
+		if ((flags & RENDER_EFFECT) !== 0) {
+			if (!is_branch && check_dirtiness(effect)) {
+				update_effect(effect);
+			}
+
+			process_effect_children(effect, effects);
+		} else if ((flags & EFFECT) !== 0) {
+			if (is_branch || is_clean) {
+				process_effect_children(effect, effects);
+			} else {
+				effects.push(effect);
+			}
+		}
+	}
+}
+
 /**
  *
  * This function both runs render effects and collects user effects in topological order
@@ -583,70 +630,13 @@ export function schedule_effect(signal) {
  * @returns {void}
  */
 function process_effects(effect, collected_effects) {
-	var current_effect = effect.first;
+	/** @type {Effect[]} */
 	var effects = [];
-
-	main_loop: while (current_effect !== null) {
-		var flags = current_effect.f;
-		// TODO: we probably don't need to check for destroyed as it shouldn't be encountered?
-		var is_active = (flags & (DESTROYED | INERT)) === 0;
-		var is_branch = flags & BRANCH_EFFECT;
-		var is_clean = (flags & CLEAN) !== 0;
-		var child = current_effect.first;
-
-		// Skip this branch if it's clean
-		if (is_active && (!is_branch || !is_clean)) {
-			if (is_branch) {
-				set_signal_status(current_effect, CLEAN);
-			}
-
-			if ((flags & RENDER_EFFECT) !== 0) {
-				if (!is_branch && check_dirtiness(current_effect)) {
-					update_effect(current_effect);
-					// Child might have been mutated since running the effect
-					child = current_effect.first;
-				}
-
-				if (child !== null) {
-					current_effect = child;
-					continue;
-				}
-			} else if ((flags & EFFECT) !== 0) {
-				if (is_branch || is_clean) {
-					if (child !== null) {
-						current_effect = child;
-						continue;
-					}
-				} else {
-					effects.push(current_effect);
-				}
-			}
-		}
-		var sibling = current_effect.next;
-
-		if (sibling === null) {
-			let parent = current_effect.parent;
-
-			while (parent !== null) {
-				if (effect === parent) {
-					break main_loop;
-				}
-				var parent_sibling = parent.next;
-				if (parent_sibling !== null) {
-					current_effect = parent_sibling;
-					continue main_loop;
-				}
-				parent = parent.parent;
-			}
-		}
-
-		current_effect = sibling;
-	}
-
+	process_effect_children(effect, effects);
 	// We might be dealing with many effects here, far more than can be spread into
 	// an array push call (callstack overflow). So let's deal with each effect in a loop.
 	for (var i = 0; i < effects.length; i++) {
-		child = effects[i];
+		var child = effects[i];
 		collected_effects.push(child);
 		process_effects(child, collected_effects);
 	}

From d64aee7432550ae84417a78e8ab15a0e5c4b1ed7 Mon Sep 17 00:00:00 2001
From: brunnerh <brunnerh@users.noreply.github.com>
Date: Thu, 15 Aug 2024 19:00:07 +0200
Subject: [PATCH 128/196] docs: Add `<svelte:component>` deprecation section
 also to preview docs. (#12862)

---
 .../content/03-appendix/03-deprecations.md    | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md
index b4a170ccb7..73e966af38 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md
@@ -82,6 +82,36 @@ When authoring custom elements, use the new [host rune](/docs/runes#$host) to di
 >greet</button>
 ```
 
+## `<svelte:component>` in runes mode
+
+In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `<X>` to re-render when `X` changed, you would either have to use `<svelte:component this={X}>` or put the component inside a `{#key X}...{/key}` block.
+
+In Svelte 5 this is no longer true — if `X` changes, `<X>` re-renders.
+
+In some cases `<object.property>` syntax can be used as a replacement; a lowercased variable with property access is recognized as a component in Svelte 5.
+
+For complex component resolution logic, an intermediary, capitalized variable may be necessary. E.g. in places where `@const` can be used:
+
+```diff
+{#each items as item}
+-	<svelte:component this={item.condition ? Y : Z} />
++	{@const Component = item.condition ? Y : Z}
++	<Component />
+{/each}
+```
+
+A derived value may be used in other contexts:
+
+```diff
+<script>
+	...
+	let condition = $state(false);
++	const Component = $derived(condition ? Y : Z);
+</script>
+- <svelte:component this={condition ? Y : Z} />
++ <Component />
+```
+
 Note that using `$props` and `$host` will put you in [runes mode](/docs/runes) — be sure to update your props and state accordingly.
 
 ## `immutable`

From d42183827226fda2b9c34dc48a44290c650391ca Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 15 Aug 2024 14:35:20 -0400
Subject: [PATCH 129/196] feat: more efficient text-only fragments (#12864)

* feat: more efficient text-only fragments

* set_text always receives a string now

* another optimisation

* revert sandbox change

* fix test
---
 .changeset/hot-tips-appear.md                 |  5 ++
 .../3-transform/client/visitors/Fragment.js   |  8 +++
 .../client/visitors/RegularElement.js         | 60 ++++++++++++-------
 .../client/visitors/shared/fragment.js        | 53 ++++------------
 .../src/internal/client/dom/blocks/each.js    |  4 +-
 .../client/dom/blocks/svelte-element.js       |  4 +-
 .../internal/client/dom/blocks/svelte-head.js |  4 +-
 .../src/internal/client/dom/operations.js     | 15 +++--
 .../src/internal/client/dom/template.js       | 11 ++--
 packages/svelte/src/internal/client/render.js | 12 ++--
 .../samples/safari-borking/_expected.html     |  2 +-
 .../samples/safari-borking/_override.html     |  2 +-
 .../samples/safari-borking/main.svelte        |  2 +-
 .../_expected/client/index.svelte.js          | 15 +++--
 .../purity/_expected/client/index.svelte.js   | 10 +---
 15 files changed, 104 insertions(+), 103 deletions(-)
 create mode 100644 .changeset/hot-tips-appear.md

diff --git a/.changeset/hot-tips-appear.md b/.changeset/hot-tips-appear.md
new file mode 100644
index 0000000000..52a19c2632
--- /dev/null
+++ b/.changeset/hot-tips-appear.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: more efficient text-only fragments
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 e7312d15aa..a20e2d56b8 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
@@ -128,6 +128,14 @@ export function Fragment(node, context) {
 	} else if (is_single_child_not_needing_template) {
 		context.visit(trimmed[0], state);
 		body.push(...state.before_init, ...state.init);
+	} else if (trimmed.length === 1 && trimmed[0].type === 'Text') {
+		const id = b.id(context.state.scope.generate('text'));
+		body.push(
+			b.var(id, b.call('$.text', b.literal(trimmed[0].data))),
+			...state.before_init,
+			...state.init
+		);
+		close = b.stmt(b.call('$.append', b.id('$$anchor'), id));
 	} else if (trimmed.length > 0) {
 		const id = b.id(context.state.scope.generate('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 4625195f63..f05514a6a2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js
@@ -27,7 +27,12 @@ import {
 	build_style_directives
 } from './shared/element.js';
 import { process_children } from './shared/fragment.js';
-import { build_render_statement, build_update, build_update_assignment } from './shared/utils.js';
+import {
+	build_render_statement,
+	build_template_literal,
+	build_update,
+	build_update_assignment
+} from './shared/utils.js';
 import { visit_event_attribute } from './shared/events.js';
 
 /**
@@ -320,28 +325,43 @@ export function RegularElement(node, context) {
 		context.visit(node, child_state);
 	}
 
-	/** @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');
+	// special case — if an element that only contains text, we don't need
+	// to descend into it if the text is non-reactive
+	const text_content =
+		trimmed.every((node) => node.type === 'Text' || node.type === 'ExpressionTag') &&
+		trimmed.some((node) => node.type === 'ExpressionTag') &&
+		build_template_literal(trimmed, context.visit, child_state);
 
-	// The same applies if it's a `<template>` element, since we need to
-	// set the value of `hydrate_node` to `node.content`
-	if (node.name === 'template') {
-		needs_reset = true;
-		child_state.init.push(b.stmt(b.call('$.hydrate_template', arg)));
-		arg = b.member(arg, b.id('content'));
-	}
+	if (text_content && !text_content.has_state) {
+		child_state.init.push(
+			b.stmt(
+				b.assignment('=', b.member(context.state.node, b.id('textContent')), text_content.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');
+
+		// The same applies if it's a `<template>` element, since we need to
+		// set the value of `hydrate_node` to `node.content`
+		if (node.name === 'template') {
+			needs_reset = true;
+			child_state.init.push(b.stmt(b.call('$.hydrate_template', arg)));
+			arg = b.member(arg, b.id('content'));
+		}
 
-	process_children(trimmed, () => b.call('$.child', arg), true, {
-		...context,
-		state: child_state
-	});
+		process_children(trimmed, () => b.call('$.child', arg), true, {
+			...context,
+			state: child_state
+		});
 
-	if (needs_reset) {
-		child_state.init.push(b.stmt(b.call('$.reset', context.state.node)));
+		if (needs_reset) {
+			child_state.init.push(b.stmt(b.call('$.reset', context.state.node)));
+		}
 	}
 
 	if (has_declaration) {
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 58ecd392fc..df9075713b 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
@@ -34,53 +34,26 @@ export function process_children(nodes, expression, is_element, { visit, state }
 				state.template.push(node.raw);
 				return;
 			}
+		}
 
-			state.template.push(' ');
+		const text_id = get_node_id(expression(true), state, 'text');
 
-			const text_id = get_node_id(expression(true), state, 'text');
+		state.template.push(' ');
 
-			const update = b.stmt(
-				b.call('$.set_text', text_id, /** @type {Expression} */ (visit(node.expression, state)))
-			);
+		const { has_state, has_call, value } = build_template_literal(sequence, visit, state);
 
-			if (node.metadata.expression.has_call && !within_bound_contenteditable) {
-				state.init.push(build_update(update));
-			} else if (node.metadata.expression.has_state && !within_bound_contenteditable) {
-				state.update.push(update);
-			} else {
-				state.init.push(
-					b.stmt(
-						b.assignment(
-							'=',
-							b.member(text_id, b.id('nodeValue')),
-							/** @type {Expression} */ (visit(node.expression))
-						)
-					)
-				);
-			}
+		const update = b.stmt(b.call('$.set_text', text_id, value));
 
-			expression = (is_text) =>
-				is_text ? b.call('$.sibling', text_id, b.true) : b.call('$.sibling', text_id);
+		if (has_call && !within_bound_contenteditable) {
+			state.init.push(build_update(update));
+		} else if (has_state && !within_bound_contenteditable) {
+			state.update.push(update);
 		} else {
-			const text_id = get_node_id(expression(true), state, 'text');
-
-			state.template.push(' ');
-
-			const { has_state, has_call, value } = build_template_literal(sequence, visit, state);
-
-			const update = b.stmt(b.call('$.set_text', text_id, value));
-
-			if (has_call && !within_bound_contenteditable) {
-				state.init.push(build_update(update));
-			} else if (has_state && !within_bound_contenteditable) {
-				state.update.push(update);
-			} else {
-				state.init.push(b.stmt(b.assignment('=', b.member(text_id, b.id('nodeValue')), value)));
-			}
-
-			expression = (is_text) =>
-				is_text ? b.call('$.sibling', text_id, b.true) : b.call('$.sibling', text_id);
+			state.init.push(b.stmt(b.assignment('=', b.member(text_id, b.id('nodeValue')), value)));
 		}
+
+		expression = (is_text) =>
+			is_text ? b.call('$.sibling', text_id, b.true) : b.call('$.sibling', text_id);
 	}
 
 	for (let i = 0; i < nodes.length; i += 1) {
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index 24dfe2ebcf..e820e15e46 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -16,7 +16,7 @@ import {
 	set_hydrate_node,
 	set_hydrating
 } from '../hydration.js';
-import { clear_text_content, empty } from '../operations.js';
+import { clear_text_content, create_text } from '../operations.js';
 import {
 	block,
 	branch,
@@ -117,7 +117,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 
 		anchor = hydrating
 			? set_hydrate_node(/** @type {Comment | Text} */ (parent_node.firstChild))
-			: parent_node.appendChild(empty());
+			: parent_node.appendChild(create_text());
 	}
 
 	if (hydrating) {
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
index 0620dde638..fff79f5bc9 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
@@ -7,7 +7,7 @@ import {
 	set_hydrate_node,
 	set_hydrating
 } from '../hydration.js';
-import { empty } from '../operations.js';
+import { create_text } from '../operations.js';
 import {
 	block,
 	branch,
@@ -119,7 +119,7 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 					// If hydrating, use the existing ssr comment as the anchor so that the
 					// inner open and close methods can pick up the existing nodes correctly
 					var child_anchor = /** @type {TemplateNode} */ (
-						hydrating ? element.firstChild : element.appendChild(empty())
+						hydrating ? element.firstChild : element.appendChild(create_text())
 					);
 
 					if (hydrating) {
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
index 6f39a63eff..e1a7fb62c1 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
@@ -1,6 +1,6 @@
 /** @import { TemplateNode } from '#client' */
 import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from '../hydration.js';
-import { empty } from '../operations.js';
+import { create_text } from '../operations.js';
 import { block } from '../../reactivity/effects.js';
 import { HEAD_EFFECT } from '../../constants.js';
 import { HYDRATION_START } from '../../../../constants.js';
@@ -52,7 +52,7 @@ export function head(render_fn) {
 	}
 
 	if (!hydrating) {
-		anchor = document.head.appendChild(empty());
+		anchor = document.head.appendChild(create_text());
 	}
 
 	try {
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index c6130c4332..207079cad5 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -45,9 +45,12 @@ export function init_operations() {
 	}
 }
 
-/** @returns {Text} */
-export function empty() {
-	return document.createTextNode('');
+/**
+ * @param {string} value
+ * @returns {Text}
+ */
+export function create_text(value = '') {
+	return document.createTextNode(value);
 }
 
 /**
@@ -65,7 +68,7 @@ export function child(node) {
 
 	// Child can be null if we have an element with a single child, like `<p>{text}</p>`, where `text` is empty
 	if (child === null) {
-		child = hydrate_node.appendChild(empty());
+		child = hydrate_node.appendChild(create_text());
 	}
 
 	set_hydrate_node(child);
@@ -92,7 +95,7 @@ export function first_child(fragment, is_text) {
 	// if an {expression} is empty during SSR, there might be no
 	// text node to hydrate — we must therefore create one
 	if (is_text && hydrate_node?.nodeType !== 3) {
-		var text = empty();
+		var text = create_text();
 
 		hydrate_node?.before(text);
 		set_hydrate_node(text);
@@ -121,7 +124,7 @@ export function sibling(node, is_text = false) {
 	// if a sibling {expression} is empty during SSR, there might be no
 	// text node to hydrate — we must therefore create one
 	if (is_text && type !== 3) {
-		var text = empty();
+		var text = create_text();
 		next_sibling?.before(text);
 		set_hydrate_node(text);
 		return text;
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index 60e6995d40..1405aec7cf 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -1,6 +1,6 @@
 /** @import { Effect, EffectNodes, TemplateNode } from '#client' */
 import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
-import { empty } from './operations.js';
+import { create_text } from './operations.js';
 import { create_fragment_from_html } from './reconciler.js';
 import { current_effect } from '../runtime.js';
 import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../constants.js';
@@ -209,10 +209,11 @@ function run_scripts(node) {
 
 /**
  * Don't mark this as side-effect-free, hydration needs to walk all nodes
+ * @param {any} value
  */
-export function text() {
+export function text(value = '') {
 	if (!hydrating) {
-		var t = empty();
+		var t = create_text(value + '');
 		assign_nodes(t, t);
 		return t;
 	}
@@ -221,7 +222,7 @@ export function text() {
 
 	if (node.nodeType !== 3) {
 		// if an {expression} is empty during SSR, we need to insert an empty text node
-		node.before((node = empty()));
+		node.before((node = create_text()));
 		set_hydrate_node(node);
 	}
 
@@ -238,7 +239,7 @@ export function comment() {
 
 	var frag = document.createDocumentFragment();
 	var start = document.createComment('');
-	var anchor = empty();
+	var anchor = create_text();
 	frag.append(start, anchor);
 
 	assign_nodes(start, anchor);
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index c991023325..f70e055ee5 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -1,7 +1,7 @@
 /** @import { ComponentContext, Effect, EffectNodes, TemplateNode } from '#client' */
 /** @import { Component, ComponentType, SvelteComponent } from '../../index.js' */
 import { DEV } from 'esm-env';
-import { clear_text_content, empty, init_operations } from './dom/operations.js';
+import { clear_text_content, create_text, init_operations } from './dom/operations.js';
 import { HYDRATION_END, HYDRATION_ERROR, HYDRATION_START } from '../../constants.js';
 import { push, pop, current_component_context, current_effect } from './runtime.js';
 import { effect_root, branch } from './reactivity/effects.js';
@@ -43,13 +43,9 @@ export function set_should_intro(value) {
  */
 export function set_text(text, value) {
 	// @ts-expect-error
-	const prev = (text.__t ??= text.nodeValue);
-
-	if (prev !== value) {
+	if (value !== (text.__t ??= text.nodeValue)) {
 		// @ts-expect-error
-		text.__t = value;
-		// It's faster to make the value a string rather than passing a non-string to nodeValue
-		text.nodeValue = value == null ? '' : value + '';
+		text.nodeValue = text.__t = value;
 	}
 }
 
@@ -78,7 +74,7 @@ export function set_text(text, value) {
  * @returns {Exports}
  */
 export function mount(component, options) {
-	const anchor = options.anchor ?? options.target.appendChild(empty());
+	const anchor = options.anchor ?? options.target.appendChild(create_text());
 	return _mount(component, { ...options, anchor });
 }
 
diff --git a/packages/svelte/tests/hydration/samples/safari-borking/_expected.html b/packages/svelte/tests/hydration/samples/safari-borking/_expected.html
index 3f23afe0bf..a3ca6a9210 100644
--- a/packages/svelte/tests/hydration/samples/safari-borking/_expected.html
+++ b/packages/svelte/tests/hydration/samples/safari-borking/_expected.html
@@ -1 +1 @@
-<h1>call +636-555-3226 now</h1>
+<h1>call +636-555-3226 now<span>!</span></h1>
diff --git a/packages/svelte/tests/hydration/samples/safari-borking/_override.html b/packages/svelte/tests/hydration/samples/safari-borking/_override.html
index fcbb5c1830..876815e7a9 100644
--- a/packages/svelte/tests/hydration/samples/safari-borking/_override.html
+++ b/packages/svelte/tests/hydration/samples/safari-borking/_override.html
@@ -1 +1 @@
-<!--[--><h1>call <a href="tel:+636-555-3226">+636-555-3226</a> now</h1><!--]-->
+<!--[--><h1>call <a href="tel:+636-555-3226">+636-555-3226</a> now<span>!</span></h1><!--]-->
diff --git a/packages/svelte/tests/hydration/samples/safari-borking/main.svelte b/packages/svelte/tests/hydration/samples/safari-borking/main.svelte
index 1385fbb2a4..cf33be835a 100644
--- a/packages/svelte/tests/hydration/samples/safari-borking/main.svelte
+++ b/packages/svelte/tests/hydration/samples/safari-borking/main.svelte
@@ -2,4 +2,4 @@
 	const message = `call +636-555-3226 now`;
 </script>
 
-<h1>{message}</h1>
+<h1>{message}<span>!</span></h1>
diff --git a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
index 38f60bacdf..416af28608 100644
--- a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
@@ -2,22 +2,21 @@ import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 import TextInput from './Child.svelte';
 
-var root_1 = $.template(`Something`, 1);
 var root = $.template(`<!> `, 1);
 
 export default function Bind_component_snippet($$anchor) {
 	const snippet = ($$anchor) => {
 		$.next();
 
-		var fragment = root_1();
+		var text = $.text("Something");
 
-		$.append($$anchor, fragment);
+		$.append($$anchor, text);
 	};
 
 	let value = $.source('');
 	const _snippet = snippet;
-	var fragment_1 = root();
-	var node = $.first_child(fragment_1);
+	var fragment = root();
+	var node = $.first_child(fragment);
 
 	TextInput(node, {
 		get value() {
@@ -28,8 +27,8 @@ export default function Bind_component_snippet($$anchor) {
 		}
 	});
 
-	var text = $.sibling(node, true);
+	var text_1 = $.sibling(node, true);
 
-	$.template_effect(() => $.set_text(text, ` value: ${$.get(value) ?? ""}`));
-	$.append($$anchor, fragment_1);
+	$.template_effect(() => $.set_text(text_1, ` value: ${$.get(value) ?? ""}`));
+	$.append($$anchor, fragment);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
index 062e52f8cf..ace8c43aeb 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
@@ -1,7 +1,7 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
-var root = $.template(`<p> </p> <p> </p> <!>`, 1);
+var root = $.template(`<p></p> <p></p> <!>`, 1);
 
 export default function Purity($$anchor) {
 	let min = 0;
@@ -10,16 +10,12 @@ export default function Purity($$anchor) {
 	let value = 'hello';
 	var fragment = root();
 	var p = $.first_child(fragment);
-	var text = $.child(p);
 
-	text.nodeValue = Math.max(min, Math.min(max, number));
-	$.reset(p);
+	p.textContent = `${Math.max(min, Math.min(max, number)) ?? ""}`;
 
 	var p_1 = $.sibling($.sibling(p, true));
-	var text_1 = $.child(p_1);
 
-	text_1.nodeValue = location.href;
-	$.reset(p_1);
+	p_1.textContent = `${location.href ?? ""}`;
 
 	var node = $.sibling($.sibling(p_1, true));
 

From 72c51e3df71d9bf8e15f47c8acecf2fa78335635 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 15 Aug 2024 22:15:50 +0100
Subject: [PATCH 130/196] chore: improve performance of DOM traversal
 operations (#12863)

* chore: improve performance of DOM traversal operations

* feedback

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/odd-toys-glow.md                   |  5 +++
 .../internal/client/dom/blocks/css-props.js   |  3 +-
 .../src/internal/client/dom/blocks/each.js    | 11 +++--
 .../src/internal/client/dom/blocks/html.js    | 11 ++---
 .../src/internal/client/dom/blocks/snippet.js |  5 ++-
 .../client/dom/blocks/svelte-element.js       |  4 +-
 .../internal/client/dom/blocks/svelte-head.js |  8 ++--
 .../src/internal/client/dom/elements/misc.js  |  4 +-
 .../src/internal/client/dom/hydration.js      |  7 ++--
 .../src/internal/client/dom/operations.js     | 42 ++++++++++++++++---
 .../src/internal/client/dom/template.js       | 16 +++----
 .../src/internal/client/reactivity/effects.js |  3 +-
 packages/svelte/src/internal/client/render.js | 13 ++++--
 13 files changed, 92 insertions(+), 40 deletions(-)
 create mode 100644 .changeset/odd-toys-glow.md

diff --git a/.changeset/odd-toys-glow.md b/.changeset/odd-toys-glow.md
new file mode 100644
index 0000000000..cc09a78ea2
--- /dev/null
+++ b/.changeset/odd-toys-glow.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: improve performance of DOM traversal operations
diff --git a/packages/svelte/src/internal/client/dom/blocks/css-props.js b/packages/svelte/src/internal/client/dom/blocks/css-props.js
index c5d63fc9a6..473d35b122 100644
--- a/packages/svelte/src/internal/client/dom/blocks/css-props.js
+++ b/packages/svelte/src/internal/client/dom/blocks/css-props.js
@@ -1,6 +1,7 @@
 /** @import { TemplateNode } from '#client' */
 import { render_effect, teardown } from '../../reactivity/effects.js';
 import { hydrate_node, hydrating, set_hydrate_node } from '../hydration.js';
+import { get_first_child } from '../operations.js';
 
 /**
  * @param {HTMLDivElement | SVGGElement} element
@@ -9,7 +10,7 @@ import { hydrate_node, hydrating, set_hydrate_node } from '../hydration.js';
  */
 export function css_props(element, get_styles) {
 	if (hydrating) {
-		set_hydrate_node(/** @type {TemplateNode} */ (element.firstChild));
+		set_hydrate_node(/** @type {TemplateNode} */ (get_first_child(element)));
 	}
 
 	render_effect(() => {
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index e820e15e46..18785f7114 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -16,7 +16,12 @@ import {
 	set_hydrate_node,
 	set_hydrating
 } from '../hydration.js';
-import { clear_text_content, create_text } from '../operations.js';
+import {
+	clear_text_content,
+	create_text,
+	get_first_child,
+	get_next_sibling
+} from '../operations.js';
 import {
 	block,
 	branch,
@@ -116,7 +121,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 		var parent_node = /** @type {Element} */ (node);
 
 		anchor = hydrating
-			? set_hydrate_node(/** @type {Comment | Text} */ (parent_node.firstChild))
+			? set_hydrate_node(/** @type {Comment | Text} */ (get_first_child(parent_node)))
 			: parent_node.appendChild(create_text());
 	}
 
@@ -510,7 +515,7 @@ function move(item, next, anchor) {
 	var node = /** @type {EffectNodes} */ (item.e.nodes).start;
 
 	while (node !== end) {
-		var next_node = /** @type {TemplateNode} */ (node.nextSibling);
+		var next_node = /** @type {TemplateNode} */ (get_next_sibling(node));
 		dest.before(node);
 		node = next_node;
 	}
diff --git a/packages/svelte/src/internal/client/dom/blocks/html.js b/packages/svelte/src/internal/client/dom/blocks/html.js
index 63ca704c0f..cdfa1baa71 100644
--- a/packages/svelte/src/internal/client/dom/blocks/html.js
+++ b/packages/svelte/src/internal/client/dom/blocks/html.js
@@ -8,6 +8,7 @@ import * as w from '../../warnings.js';
 import { hash } from '../../../../utils.js';
 import { DEV } from 'esm-env';
 import { dev_current_component_function } from '../../runtime.js';
+import { get_first_child, get_next_sibling } from '../operations.js';
 
 /**
  * @param {Element} element
@@ -71,7 +72,7 @@ export function html(node, get_value, svg, mathml, skip_warning) {
 					(next.nodeType !== 8 || /** @type {Comment} */ (next).data !== '')
 				) {
 					last = next;
-					next = /** @type {TemplateNode} */ (next.nextSibling);
+					next = /** @type {TemplateNode} */ (get_next_sibling(next));
 				}
 
 				if (next === null) {
@@ -98,17 +99,17 @@ export function html(node, get_value, svg, mathml, skip_warning) {
 			var node = create_fragment_from_html(html);
 
 			if (svg || mathml) {
-				node = /** @type {Element} */ (node.firstChild);
+				node = /** @type {Element} */ (get_first_child(node));
 			}
 
 			assign_nodes(
-				/** @type {TemplateNode} */ (node.firstChild),
+				/** @type {TemplateNode} */ (get_first_child(node)),
 				/** @type {TemplateNode} */ (node.lastChild)
 			);
 
 			if (svg || mathml) {
-				while (node.firstChild) {
-					anchor.before(node.firstChild);
+				while (get_first_child(node)) {
+					anchor.before(/** @type {Node} */ (get_first_child(node)));
 				}
 			} else {
 				anchor.before(node);
diff --git a/packages/svelte/src/internal/client/dom/blocks/snippet.js b/packages/svelte/src/internal/client/dom/blocks/snippet.js
index 6a6203d16e..32a9fb6918 100644
--- a/packages/svelte/src/internal/client/dom/blocks/snippet.js
+++ b/packages/svelte/src/internal/client/dom/blocks/snippet.js
@@ -12,6 +12,7 @@ import { create_fragment_from_html } from '../reconciler.js';
 import { assign_nodes } from '../template.js';
 import * as w from '../../warnings.js';
 import { DEV } from 'esm-env';
+import { get_first_child, get_next_sibling } from '../operations.js';
 
 /**
  * @template {(node: TemplateNode, ...args: any[]) => void} SnippetFn
@@ -89,9 +90,9 @@ export function createRawSnippet(fn) {
 		} else {
 			var html = snippet.render().trim();
 			var fragment = create_fragment_from_html(html);
-			element = /** @type {Element} */ (fragment.firstChild);
+			element = /** @type {Element} */ (get_first_child(fragment));
 
-			if (DEV && (element.nextSibling !== null || element.nodeType !== 3)) {
+			if (DEV && (get_next_sibling(element) !== null || element.nodeType !== 3)) {
 				w.invalid_raw_snippet_render();
 			}
 
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
index fff79f5bc9..755e44c9ac 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
@@ -7,7 +7,7 @@ import {
 	set_hydrate_node,
 	set_hydrating
 } from '../hydration.js';
-import { create_text } from '../operations.js';
+import { create_text, get_first_child } from '../operations.js';
 import {
 	block,
 	branch,
@@ -119,7 +119,7 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 					// If hydrating, use the existing ssr comment as the anchor so that the
 					// inner open and close methods can pick up the existing nodes correctly
 					var child_anchor = /** @type {TemplateNode} */ (
-						hydrating ? element.firstChild : element.appendChild(create_text())
+						hydrating ? get_first_child(element) : element.appendChild(create_text())
 					);
 
 					if (hydrating) {
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
index e1a7fb62c1..e3e3eacad7 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-head.js
@@ -1,6 +1,6 @@
 /** @import { TemplateNode } from '#client' */
 import { hydrate_node, hydrating, set_hydrate_node, set_hydrating } from '../hydration.js';
-import { create_text } from '../operations.js';
+import { create_text, get_first_child, get_next_sibling } from '../operations.js';
 import { block } from '../../reactivity/effects.js';
 import { HEAD_EFFECT } from '../../constants.js';
 import { HYDRATION_START } from '../../../../constants.js';
@@ -32,14 +32,14 @@ export function head(render_fn) {
 
 		// There might be multiple head blocks in our app, so we need to account for each one needing independent hydration.
 		if (head_anchor === undefined) {
-			head_anchor = /** @type {TemplateNode} */ (document.head.firstChild);
+			head_anchor = /** @type {TemplateNode} */ (get_first_child(document.head));
 		}
 
 		while (
 			head_anchor !== null &&
 			(head_anchor.nodeType !== 8 || /** @type {Comment} */ (head_anchor).data !== HYDRATION_START)
 		) {
-			head_anchor = /** @type {TemplateNode} */ (head_anchor.nextSibling);
+			head_anchor = /** @type {TemplateNode} */ (get_next_sibling(head_anchor));
 		}
 
 		// If we can't find an opening hydration marker, skip hydration (this can happen
@@ -47,7 +47,7 @@ export function head(render_fn) {
 		if (head_anchor === null) {
 			set_hydrating(false);
 		} else {
-			head_anchor = set_hydrate_node(/** @type {TemplateNode} */ (head_anchor.nextSibling));
+			head_anchor = set_hydrate_node(/** @type {TemplateNode} */ (get_next_sibling(head_anchor)));
 		}
 	}
 
diff --git a/packages/svelte/src/internal/client/dom/elements/misc.js b/packages/svelte/src/internal/client/dom/elements/misc.js
index b2007689f9..61e513903f 100644
--- a/packages/svelte/src/internal/client/dom/elements/misc.js
+++ b/packages/svelte/src/internal/client/dom/elements/misc.js
@@ -1,5 +1,5 @@
 import { hydrating } from '../hydration.js';
-import { clear_text_content } from '../operations.js';
+import { clear_text_content, get_first_child } from '../operations.js';
 import { queue_micro_task } from '../task.js';
 
 /**
@@ -27,7 +27,7 @@ export function autofocus(dom, value) {
  * @returns {void}
  */
 export function remove_textarea_child(dom) {
-	if (hydrating && dom.firstChild !== null) {
+	if (hydrating && get_first_child(dom) !== null) {
 		clear_text_content(dom);
 	}
 }
diff --git a/packages/svelte/src/internal/client/dom/hydration.js b/packages/svelte/src/internal/client/dom/hydration.js
index 82ad0df613..62b40c8ccd 100644
--- a/packages/svelte/src/internal/client/dom/hydration.js
+++ b/packages/svelte/src/internal/client/dom/hydration.js
@@ -7,6 +7,7 @@ import {
 	HYDRATION_START_ELSE
 } from '../../../constants.js';
 import * as w from '../warnings.js';
+import { get_next_sibling } from './operations.js';
 
 /**
  * Use this variable to guard everything related to hydration code so it can be treeshaken out
@@ -39,7 +40,7 @@ export function set_hydrate_node(node) {
 }
 
 export function hydrate_next() {
-	return set_hydrate_node(/** @type {TemplateNode} */ (hydrate_node.nextSibling));
+	return set_hydrate_node(/** @type {TemplateNode} */ (get_next_sibling(hydrate_node)));
 }
 
 /** @param {TemplateNode} node */
@@ -47,7 +48,7 @@ export function reset(node) {
 	if (!hydrating) return;
 
 	// If the node has remaining siblings, something has gone wrong
-	if (hydrate_node.nextSibling !== null) {
+	if (get_next_sibling(hydrate_node) !== null) {
 		w.hydration_mismatch();
 		throw HYDRATION_ERROR;
 	}
@@ -90,7 +91,7 @@ export function remove_nodes() {
 			}
 		}
 
-		var next = /** @type {TemplateNode} */ (node.nextSibling);
+		var next = /** @type {TemplateNode} */ (get_next_sibling(node));
 		node.remove();
 		node = next;
 	}
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index 207079cad5..b86ea77947 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -2,6 +2,7 @@
 import { hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import { DEV } from 'esm-env';
 import { init_array_prototype_warnings } from '../dev/equality.js';
+import { get_descriptor } from '../../shared/utils.js';
 
 // export these for reference in the compiled code, making global name deduplication unnecessary
 /** @type {Window} */
@@ -10,6 +11,11 @@ export var $window;
 /** @type {Document} */
 export var $document;
 
+/** @type {() => Node | null} */
+var first_child_getter;
+/** @type {() => Node | null} */
+var next_sibling_getter;
+
 /**
  * Initialize these lazily to avoid issues when using the runtime in a server context
  * where these globals are not available while avoiding a separate server entry point
@@ -23,6 +29,12 @@ export function init_operations() {
 	$document = document;
 
 	var element_prototype = Element.prototype;
+	var node_prototype = Node.prototype;
+
+	// @ts-ignore
+	first_child_getter = get_descriptor(node_prototype, 'firstChild').get;
+	// @ts-ignore
+	next_sibling_getter = get_descriptor(node_prototype, 'nextSibling').get;
 
 	// the following assignments improve perf of lookups on DOM nodes
 	// @ts-expect-error
@@ -53,6 +65,24 @@ export function create_text(value = '') {
 	return document.createTextNode(value);
 }
 
+/**
+ * @template {Node} N
+ * @param {N} node
+ * @returns {Node | null}
+ */
+export function get_first_child(node) {
+	return first_child_getter.call(node);
+}
+
+/**
+ * @template {Node} N
+ * @param {N} node
+ * @returns {Node | null}
+ */
+export function get_next_sibling(node) {
+	return next_sibling_getter.call(node);
+}
+
 /**
  * Don't mark this as side-effect-free, hydration needs to walk all nodes
  * @template {Node} N
@@ -61,10 +91,10 @@ export function create_text(value = '') {
  */
 export function child(node) {
 	if (!hydrating) {
-		return node.firstChild;
+		return get_first_child(node);
 	}
 
-	var child = /** @type {TemplateNode} */ (hydrate_node.firstChild);
+	var child = /** @type {TemplateNode} */ (get_first_child(hydrate_node));
 
 	// Child can be null if we have an element with a single child, like `<p>{text}</p>`, where `text` is empty
 	if (child === null) {
@@ -84,10 +114,10 @@ export function child(node) {
 export function first_child(fragment, is_text) {
 	if (!hydrating) {
 		// when not hydrating, `fragment` is a `DocumentFragment` (the result of calling `open_frag`)
-		var first = /** @type {DocumentFragment} */ (fragment).firstChild;
+		var first = /** @type {DocumentFragment} */ (get_first_child(/** @type {Node} */ (fragment)));
 
 		// TODO prevent user comments with the empty string when preserveComments is true
-		if (first instanceof Comment && first.data === '') return first.nextSibling;
+		if (first instanceof Comment && first.data === '') return get_next_sibling(first);
 
 		return first;
 	}
@@ -114,10 +144,10 @@ export function first_child(fragment, is_text) {
  */
 export function sibling(node, is_text = false) {
 	if (!hydrating) {
-		return /** @type {TemplateNode} */ (node.nextSibling);
+		return /** @type {TemplateNode} */ (get_next_sibling(node));
 	}
 
-	var next_sibling = /** @type {TemplateNode} */ (hydrate_node.nextSibling);
+	var next_sibling = /** @type {TemplateNode} */ (get_next_sibling(hydrate_node));
 
 	var type = next_sibling.nodeType;
 
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index 1405aec7cf..27d82bb0a4 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -1,6 +1,6 @@
 /** @import { Effect, EffectNodes, TemplateNode } from '#client' */
 import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
-import { create_text } from './operations.js';
+import { create_text, get_first_child } from './operations.js';
 import { create_fragment_from_html } from './reconciler.js';
 import { current_effect } from '../runtime.js';
 import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../constants.js';
@@ -41,7 +41,7 @@ export function template(content, flags) {
 
 		if (!node) {
 			node = create_fragment_from_html(has_start ? content : '<!>' + content);
-			if (!is_fragment) node = /** @type {Node} */ (node.firstChild);
+			if (!is_fragment) node = /** @type {Node} */ (get_first_child(node));
 		}
 
 		var clone = /** @type {TemplateNode} */ (
@@ -49,7 +49,7 @@ export function template(content, flags) {
 		);
 
 		if (is_fragment) {
-			var start = /** @type {TemplateNode} */ (clone.firstChild);
+			var start = /** @type {TemplateNode} */ (get_first_child(clone));
 			var end = /** @type {TemplateNode} */ (clone.lastChild);
 
 			assign_nodes(start, end);
@@ -113,22 +113,22 @@ export function ns_template(content, flags, ns = 'svg') {
 
 		if (!node) {
 			var fragment = /** @type {DocumentFragment} */ (create_fragment_from_html(wrapped));
-			var root = /** @type {Element} */ (fragment.firstChild);
+			var root = /** @type {Element} */ (get_first_child(fragment));
 
 			if (is_fragment) {
 				node = document.createDocumentFragment();
-				while (root.firstChild) {
-					node.appendChild(root.firstChild);
+				while (get_first_child(root)) {
+					node.appendChild(/** @type {Node} */ (get_first_child(root)));
 				}
 			} else {
-				node = /** @type {Element} */ (root.firstChild);
+				node = /** @type {Element} */ (get_first_child(root));
 			}
 		}
 
 		var clone = /** @type {TemplateNode} */ (node.cloneNode(true));
 
 		if (is_fragment) {
-			var start = /** @type {TemplateNode} */ (clone.firstChild);
+			var start = /** @type {TemplateNode} */ (get_first_child(clone));
 			var end = /** @type {TemplateNode} */ (clone.lastChild);
 
 			assign_nodes(start, end);
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index c5be02466e..68a309cbda 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -39,6 +39,7 @@ import { set } from './sources.js';
 import * as e from '../errors.js';
 import { DEV } from 'esm-env';
 import { define_property } from '../../shared/utils.js';
+import { get_next_sibling } from '../dom/operations.js';
 
 /**
  * @param {'$effect' | '$effect.pre' | '$inspect'} rune
@@ -361,7 +362,7 @@ export function destroy_effect(effect, remove_dom = true) {
 
 		while (node !== null) {
 			/** @type {TemplateNode | null} */
-			var next = node === end ? null : /** @type {TemplateNode} */ (node.nextSibling);
+			var next = node === end ? null : /** @type {TemplateNode} */ (get_next_sibling(node));
 
 			node.remove();
 			node = next;
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index f70e055ee5..044c09e310 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -1,7 +1,13 @@
 /** @import { ComponentContext, Effect, EffectNodes, TemplateNode } from '#client' */
 /** @import { Component, ComponentType, SvelteComponent } from '../../index.js' */
 import { DEV } from 'esm-env';
-import { clear_text_content, create_text, init_operations } from './dom/operations.js';
+import {
+	clear_text_content,
+	create_text,
+	get_first_child,
+	get_next_sibling,
+	init_operations
+} from './dom/operations.js';
 import { HYDRATION_END, HYDRATION_ERROR, HYDRATION_START } from '../../constants.js';
 import { push, pop, current_component_context, current_effect } from './runtime.js';
 import { effect_root, branch } from './reactivity/effects.js';
@@ -102,18 +108,19 @@ export function mount(component, options) {
  * @returns {Exports}
  */
 export function hydrate(component, options) {
+	init_operations();
 	options.intro = options.intro ?? false;
 	const target = options.target;
 	const was_hydrating = hydrating;
 	const previous_hydrate_node = hydrate_node;
 
 	try {
-		var anchor = /** @type {TemplateNode} */ (target.firstChild);
+		var anchor = /** @type {TemplateNode} */ (get_first_child(target));
 		while (
 			anchor &&
 			(anchor.nodeType !== 8 || /** @type {Comment} */ (anchor).data !== HYDRATION_START)
 		) {
-			anchor = /** @type {TemplateNode} */ (anchor.nextSibling);
+			anchor = /** @type {TemplateNode} */ (get_next_sibling(anchor));
 		}
 
 		if (!anchor) {

From e4b7304365d5f0c95223bcaa25290f933174d40e Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 15 Aug 2024 22:17:20 +0100
Subject: [PATCH 131/196] fix: ensure outro animation is not prematurely
 aborted (#12865)

---
 .changeset/lazy-carrots-buy.md                               | 5 +++++
 .../svelte/src/internal/client/dom/elements/transitions.js   | 2 --
 2 files changed, 5 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/lazy-carrots-buy.md

diff --git a/.changeset/lazy-carrots-buy.md b/.changeset/lazy-carrots-buy.md
new file mode 100644
index 0000000000..e9d14c2f0b
--- /dev/null
+++ b/.changeset/lazy-carrots-buy.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure outro animation is not prematurely aborted
diff --git a/packages/svelte/src/internal/client/dom/elements/transitions.js b/packages/svelte/src/internal/client/dom/elements/transitions.js
index f747e2f402..5cd0870fdc 100644
--- a/packages/svelte/src/internal/client/dom/elements/transitions.js
+++ b/packages/svelte/src/internal/client/dom/elements/transitions.js
@@ -251,8 +251,6 @@ export function transition(flags, element, get_fn, get_params) {
 					0,
 					() => {
 						dispatch_event(element, 'outroend');
-						// Ensure we cancel the animation to prevent leaking
-						outro?.abort();
 						outro = current_options = undefined;
 						fn?.();
 					},

From c8f963ab97f7e07b1bfca705242575d5a80500a6 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 16 Aug 2024 04:53:16 -0400
Subject: [PATCH 132/196] docs: add note on destructured declarations (#12873)

---
 .../routes/docs/content/02-examples/01-universal-reactivity.md  | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/sites/svelte-5-preview/src/routes/docs/content/02-examples/01-universal-reactivity.md b/sites/svelte-5-preview/src/routes/docs/content/02-examples/01-universal-reactivity.md
index 740bd2082b..7e0f8162cf 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/02-examples/01-universal-reactivity.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/02-examples/01-universal-reactivity.md
@@ -48,6 +48,8 @@ We can encapsulate this logic in a function, so that it can be used in multiple
 ```
 
 > Note that we're using a [`get` property](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) in the returned object, so that `counter.count` always refers to the current value rather than the value at the time the `createCounter` function was called.
+>
+> As a corollary, `const { count, increment } = createCounter()` won't work. That's because in JavaScript, [destructured declarations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) are evaluated at the time of destructuring — in other words, `count` will never update.
 
 We can also extract that function out into a separate `.svelte.js` or `.svelte.ts` module...
 

From 6448e07521a76bccaa387feb8291cc11ec248ca3 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 16 Aug 2024 06:41:52 -0400
Subject: [PATCH 133/196] breaking: remove foreign namespace (#12869)

* breaking: remove foreign namespace

* regenerate
---
 .changeset/gorgeous-coats-jog.md              |  5 ++
 .../compiler/phases/1-parse/read/options.js   | 12 +----
 .../2-analyze/visitors/BindDirective.js       |  4 --
 .../2-analyze/visitors/RegularElement.js      | 14 ++----
 .../phases/2-analyze/visitors/shared/a11y.js  |  3 --
 .../2-analyze/visitors/shared/element.js      |  2 +-
 .../client/visitors/RegularElement.js         | 44 ++---------------
 .../client/visitors/SvelteElement.js          |  2 +-
 .../client/visitors/shared/element.js         |  6 +--
 .../server/visitors/RegularElement.js         |  5 +-
 .../server/visitors/shared/element.js         |  2 +-
 .../src/compiler/phases/3-transform/utils.js  | 48 ++++++++-----------
 packages/svelte/src/compiler/types/index.d.ts |  2 +-
 .../svelte/src/compiler/types/template.d.ts   |  5 +-
 .../svelte/src/compiler/validate-options.js   |  2 +-
 .../_config.js                                | 26 ----------
 .../main.svelte                               |  4 --
 .../_config.js                                | 20 --------
 .../main.svelte                               |  4 --
 .../a11y-in-foreign-namespace/input.svelte    |  7 ---
 .../a11y-in-foreign-namespace/warnings.json   |  1 -
 .../errors.json                               | 14 ------
 .../input.svelte                              |  6 ---
 .../samples/namespace-invalid/errors.json     |  2 +-
 .../samples/namespace-non-literal/errors.json |  2 +-
 packages/svelte/tests/validator/test.ts       | 18 +------
 packages/svelte/types/index.d.ts              | 14 ++----
 27 files changed, 52 insertions(+), 222 deletions(-)
 create mode 100644 .changeset/gorgeous-coats-jog.md
 delete mode 100644 packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/_config.js
 delete mode 100644 packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/main.svelte
 delete mode 100644 packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace/_config.js
 delete mode 100644 packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace/main.svelte
 delete mode 100644 packages/svelte/tests/validator/samples/a11y-in-foreign-namespace/input.svelte
 delete mode 100644 packages/svelte/tests/validator/samples/a11y-in-foreign-namespace/warnings.json
 delete mode 100644 packages/svelte/tests/validator/samples/binding-invalid-foreign-namespace/errors.json
 delete mode 100644 packages/svelte/tests/validator/samples/binding-invalid-foreign-namespace/input.svelte

diff --git a/.changeset/gorgeous-coats-jog.md b/.changeset/gorgeous-coats-jog.md
new file mode 100644
index 0000000000..0b69c9a966
--- /dev/null
+++ b/.changeset/gorgeous-coats-jog.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: remove foreign namespace
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/options.js b/packages/svelte/src/compiler/phases/1-parse/read/options.js
index a8ba7e216c..cd3673aa57 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/options.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/options.js
@@ -157,18 +157,10 @@ export default function read_options(node) {
 					component_options.namespace = 'svg';
 				} else if (value === NAMESPACE_MATHML) {
 					component_options.namespace = 'mathml';
-				} else if (
-					value === 'html' ||
-					value === 'mathml' ||
-					value === 'svg' ||
-					value === 'foreign'
-				) {
+				} else if (value === 'html' || value === 'mathml' || value === 'svg') {
 					component_options.namespace = value;
 				} else {
-					e.svelte_options_invalid_attribute_value(
-						attribute,
-						`"html", "mathml", "svg" or "foreign"`
-					);
+					e.svelte_options_invalid_attribute_value(attribute, `"html", "mathml" or "svg"`);
 				}
 
 				break;
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index 573616b815..43d1a3d468 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -126,10 +126,6 @@ export function BindDirective(node, context) {
 		parent?.type === 'SvelteDocument' ||
 		parent?.type === 'SvelteBody'
 	) {
-		if (context.state.options.namespace === 'foreign' && node.name !== 'this') {
-			e.bind_invalid_name(node, node.name, 'Foreign elements only support `bind:this`');
-		}
-
 		if (node.name in binding_properties) {
 			const property = binding_properties[node.name];
 			if (property.valid_elements && !property.valid_elements.includes(parent.name)) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index 5c15f70ba2..16be82ed2c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -24,11 +24,7 @@ export function RegularElement(node, context) {
 	context.state.analysis.elements.push(node);
 
 	// Special case: Move the children of <textarea> into a value attribute if they are dynamic
-	if (
-		context.state.options.namespace !== 'foreign' &&
-		node.name === 'textarea' &&
-		node.fragment.nodes.length > 0
-	) {
+	if (node.name === 'textarea' && node.fragment.nodes.length > 0) {
 		for (const attribute of node.attributes) {
 			if (attribute.type === 'Attribute' && attribute.name === 'value') {
 				e.textarea_invalid_content(node);
@@ -65,7 +61,6 @@ export function RegularElement(node, context) {
 	// Special case: single expression tag child of option element -> add "fake" attribute
 	// to ensure that value types are the same (else for example numbers would be strings)
 	if (
-		context.state.options.namespace !== 'foreign' &&
 		node.name === 'option' &&
 		node.fragment.nodes?.length === 1 &&
 		node.fragment.nodes[0].type === 'ExpressionTag' &&
@@ -90,10 +85,8 @@ export function RegularElement(node, context) {
 		(attribute) => attribute.type === 'SpreadAttribute'
 	);
 
-	if (context.state.options.namespace !== 'foreign') {
-		node.metadata.svg = is_svg(node.name);
-		node.metadata.mathml = is_mathml(node.name);
-	}
+	node.metadata.svg = is_svg(node.name);
+	node.metadata.mathml = is_mathml(node.name);
 
 	if (context.state.parent_element) {
 		let past_parent = false;
@@ -156,7 +149,6 @@ export function RegularElement(node, context) {
 
 	if (
 		context.state.analysis.source[node.end - 2] === '/' &&
-		context.state.options.namespace !== 'foreign' &&
 		!is_void(node_name) &&
 		!is_svg(node_name)
 	) {
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
index 2213ae102a..a1a143e0c6 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/a11y.js
@@ -687,9 +687,6 @@ function get_static_text_value(attribute) {
  * @param {AnalysisState} state
  */
 export function check_element(node, state) {
-	// foreign namespace means elements can have completely different meanings, therefore we don't check them
-	if (state.options.namespace === 'foreign') return;
-
 	/** @type {Map<string, Attribute>} */
 	const attribute_map = new Map();
 
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js
index 0771f74ccf..59f02b98a1 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/shared/element.js
@@ -79,7 +79,7 @@ export function validate_element(node, context) {
 				validate_slot_attribute(context, attribute);
 			}
 
-			if (attribute.name === 'is' && context.state.options.namespace !== 'foreign') {
+			if (attribute.name === 'is') {
 				w.attribute_avoid_is(attribute);
 			}
 
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 f05514a6a2..0cf8640fef 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
@@ -178,14 +178,6 @@ export function RegularElement(node, context) {
 		}
 	}
 
-	if (child_metadata.namespace === 'foreign') {
-		// input/select etc could mean something completely different in foreign namespace, so don't special-case them
-		needs_content_reset = false;
-		needs_input_reset = false;
-		needs_special_value_handling = false;
-		value_binding = null;
-	}
-
 	if (is_content_editable && has_content_editable_binding) {
 		child_metadata.bound_contenteditable = true;
 	}
@@ -219,7 +211,7 @@ export function RegularElement(node, context) {
 			node,
 			node_id,
 			// If value binding exists, that one takes care of calling $.init_select
-			value_binding === null && node.name === 'select' && child_metadata.namespace !== 'foreign'
+			value_binding === null && node.name === 'select'
 		);
 		is_attributes_reactive = true;
 	} else {
@@ -249,8 +241,6 @@ export function RegularElement(node, context) {
 				const value = is_text_attribute(attribute) ? attribute.value[0].data : true;
 
 				if (name !== 'class' || value) {
-					// TODO namespace=foreign probably doesn't want to do template stuff at all and instead use programmatic methods
-					// to create the elements it needs.
 					context.state.template.push(
 						` ${attribute.name}${
 							is_boolean_attribute(name) && value === true
@@ -262,10 +252,9 @@ export function RegularElement(node, context) {
 				}
 			}
 
-			const is =
-				is_custom_element && child_metadata.namespace !== 'foreign'
-					? build_custom_element_attribute_update_assignment(node_id, attribute, context)
-					: build_element_attribute_update_assignment(node, node_id, attribute, context);
+			const is = is_custom_element
+				? build_custom_element_attribute_update_assignment(node_id, attribute, context)
+				: build_element_attribute_update_assignment(node, node_id, attribute, context);
 			if (is) is_attributes_reactive = true;
 		}
 	}
@@ -301,8 +290,7 @@ export function RegularElement(node, context) {
 		locations: child_locations,
 		scope: /** @type {Scope} */ (context.state.scopes.get(node.fragment)),
 		preserve_whitespace:
-			context.state.preserve_whitespace ||
-			((node.name === 'pre' || node.name === 'textarea') && child_metadata.namespace !== 'foreign')
+			context.state.preserve_whitespace || node.name === 'pre' || node.name === 'textarea'
 	};
 
 	const { hoisted, trimmed } = clean_nodes(
@@ -587,28 +575,6 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 	const is_mathml = context.state.metadata.namespace === 'mathml';
 	let { has_call, value } = build_attribute_value(attribute.value, context);
 
-	// The foreign namespace doesn't have any special handling, everything goes through the attr function
-	if (context.state.metadata.namespace === 'foreign') {
-		const statement = b.stmt(
-			b.call(
-				'$.set_attribute',
-				node_id,
-				b.literal(name),
-				value,
-				is_ignored(element, 'hydration_attribute_changed') && b.true
-			)
-		);
-
-		if (attribute.metadata.expression.has_state) {
-			const id = state.scope.generate(`${node_id.name}_${name}`);
-			build_update_assignment(state, id, undefined, value, statement);
-			return true;
-		} else {
-			state.init.push(statement);
-			return false;
-		}
-	}
-
 	if (name === 'autofocus') {
 		state.init.push(b.stmt(b.call('$.autofocus', node_id, value)));
 		return false;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
index 90e74259f1..01aff61b87 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SvelteElement.js
@@ -94,7 +94,7 @@ export function SvelteElement(node, context) {
 
 	const get_tag = b.thunk(/** @type {Expression} */ (context.visit(node.tag)));
 
-	if (dev && context.state.metadata.namespace !== 'foreign') {
+	if (dev) {
 		if (node.fragment.nodes.length > 0) {
 			context.state.init.push(b.stmt(b.call('$.validate_void_dynamic_element', get_tag)));
 		}
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 7d5c61c056..c3db0edb0a 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
@@ -116,11 +116,7 @@ export function build_attribute_value(value, context) {
  * @param {{ state: { metadata: { namespace: Namespace }}}} context
  */
 export function get_attribute_name(element, attribute, context) {
-	if (
-		!element.metadata.svg &&
-		!element.metadata.mathml &&
-		context.state.metadata.namespace !== 'foreign'
-	) {
+	if (!element.metadata.svg && !element.metadata.mathml) {
 		return normalize_attribute(attribute.name);
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
index 642b9ba430..0fcbe17bdf 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/RegularElement.js
@@ -21,8 +21,7 @@ export function RegularElement(node, context) {
 		...context.state,
 		namespace,
 		preserve_whitespace:
-			context.state.preserve_whitespace ||
-			((node.name === 'pre' || node.name === 'textarea') && namespace !== 'foreign')
+			context.state.preserve_whitespace || node.name === 'pre' || node.name === 'textarea'
 	};
 
 	context.state.template.push(b.literal(`<${node.name}`));
@@ -95,7 +94,7 @@ export function RegularElement(node, context) {
 		);
 	}
 
-	if (!is_void(node.name) || namespace === 'foreign') {
+	if (!is_void(node.name)) {
 		state.template.push(b.literal(`</${node.name}>`));
 	}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index fc99b87822..2d2d67991d 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -268,7 +268,7 @@ export function build_element_attributes(node, context) {
  */
 function get_attribute_name(element, attribute, context) {
 	let name = attribute.name;
-	if (!element.metadata.svg && !element.metadata.mathml && context.state.namespace !== 'foreign') {
+	if (!element.metadata.svg && !element.metadata.mathml) {
 		name = name.toLowerCase();
 		// don't lookup boolean aliases here, the server runtime function does only
 		// check for the lowercase variants of boolean attributes
diff --git a/packages/svelte/src/compiler/phases/3-transform/utils.js b/packages/svelte/src/compiler/phases/3-transform/utils.js
index f71c4120f9..d8b1bb9c5e 100644
--- a/packages/svelte/src/compiler/phases/3-transform/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/utils.js
@@ -306,32 +306,30 @@ export function clean_nodes(
  * @param {Compiler.SvelteNode[]} nodes
  */
 export function infer_namespace(namespace, parent, nodes) {
-	if (namespace !== 'foreign') {
-		if (parent.type === 'RegularElement' && parent.name === 'foreignObject') {
-			return 'html';
-		}
+	if (parent.type === 'RegularElement' && parent.name === 'foreignObject') {
+		return 'html';
+	}
 
-		if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
-			if (parent.metadata.svg) {
-				return 'svg';
-			}
-			return parent.metadata.mathml ? 'mathml' : 'html';
+	if (parent.type === 'RegularElement' || parent.type === 'SvelteElement') {
+		if (parent.metadata.svg) {
+			return 'svg';
 		}
+		return parent.metadata.mathml ? 'mathml' : 'html';
+	}
 
-		// Re-evaluate the namespace inside slot nodes that reset the namespace
-		if (
-			parent.type === 'Fragment' ||
-			parent.type === 'Root' ||
-			parent.type === 'Component' ||
-			parent.type === 'SvelteComponent' ||
-			parent.type === 'SvelteFragment' ||
-			parent.type === 'SnippetBlock' ||
-			parent.type === 'SlotElement'
-		) {
-			const new_namespace = check_nodes_for_namespace(nodes, 'keep');
-			if (new_namespace !== 'keep' && new_namespace !== 'maybe_html') {
-				return new_namespace;
-			}
+	// Re-evaluate the namespace inside slot nodes that reset the namespace
+	if (
+		parent.type === 'Fragment' ||
+		parent.type === 'Root' ||
+		parent.type === 'Component' ||
+		parent.type === 'SvelteComponent' ||
+		parent.type === 'SvelteFragment' ||
+		parent.type === 'SnippetBlock' ||
+		parent.type === 'SlotElement'
+	) {
+		const new_namespace = check_nodes_for_namespace(nodes, 'keep');
+		if (new_namespace !== 'keep' && new_namespace !== 'maybe_html') {
+			return new_namespace;
 		}
 	}
 
@@ -401,10 +399,6 @@ function check_nodes_for_namespace(nodes, namespace) {
  * @returns {Compiler.Namespace}
  */
 export function determine_namespace_for_children(node, namespace) {
-	if (namespace === 'foreign') {
-		return namespace;
-	}
-
 	if (node.name === 'foreignObject') {
 		return 'html';
 	}
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index d893f62b33..587c9e373c 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -85,7 +85,7 @@ export interface CompileOptions extends ModuleCompileOptions {
 	 */
 	accessors?: boolean;
 	/**
-	 * The namespace of the element; e.g., `"html"`, `"svg"`, `"foreign"`.
+	 * The namespace of the element; e.g., `"html"`, `"svg"`, `"mathml"`.
 	 *
 	 * @default 'html'
 	 */
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index 9971af9977..c803dfbba9 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -47,11 +47,8 @@ export interface Fragment {
  * - `html`    — the default, for e.g. `<div>` or `<span>`
  * - `svg`     — for e.g. `<svg>` or `<g>`
  * - `mathml`  — for e.g. `<math>` or `<mrow>`
- * - `foreign` — for other compilation targets than the web, e.g. Svelte Native.
- *               Disallows bindings other than bind:this, disables a11y checks, disables any special attribute handling
- *               (also see https://github.com/sveltejs/svelte/pull/5652)
  */
-export type Namespace = 'html' | 'svg' | 'mathml' | 'foreign';
+export type Namespace = 'html' | 'svg' | 'mathml';
 
 export interface Root extends BaseNode {
 	type: 'Root';
diff --git a/packages/svelte/src/compiler/validate-options.js b/packages/svelte/src/compiler/validate-options.js
index 4ef33afc83..807f205d42 100644
--- a/packages/svelte/src/compiler/validate-options.js
+++ b/packages/svelte/src/compiler/validate-options.js
@@ -90,7 +90,7 @@ export const validate_component_options =
 
 			name: string(undefined),
 
-			namespace: list(['html', 'svg', 'foreign']),
+			namespace: list(['html', 'mathml', 'svg']),
 
 			modernAst: boolean(false),
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/_config.js
deleted file mode 100644
index 3ed155c254..0000000000
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/_config.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	// TODO: needs fixing. Can only be fixed once we also support document.createElementNS-style creation of elements
-	// because the $.template('...') approach has no option to preserve attribute name casing
-	skip: true,
-
-	html: `
-		<page horizontalAlignment="center">
-			<button textWrap="true" text="button"></button>
-			<text wordWrap="true"></text>
-		</page>
-	`,
-
-	compileOptions: {
-		namespace: 'foreign'
-	},
-
-	test({ assert, target }) {
-		// @ts-ignore
-		const attr = (/** @type {string} */ sel) => target.querySelector(sel).attributes[0].name;
-		assert.equal(attr('page'), 'horizontalAlignment');
-		assert.equal(attr('button'), 'textWrap');
-		assert.equal(attr('text'), 'wordWrap');
-	}
-});
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/main.svelte b/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/main.svelte
deleted file mode 100644
index 2cf9c74171..0000000000
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace-compiler-option/main.svelte
+++ /dev/null
@@ -1,4 +0,0 @@
-<page horizontalAlignment="center">
-	<button textWrap="true" text="button"></button>
-	<text wordWrap="true" />
-</page>
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace/_config.js b/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace/_config.js
deleted file mode 100644
index 5321756cef..0000000000
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace/_config.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	// TODO: needs fixing. Can only be fixed once we also support document.createElementNS-style creation of elements
-	// because the $.template('...') approach has no option to preserve attribute name casing
-	skip: true,
-
-	html: `
-		<page horizontalAlignment="center">
-			<button textWrap="true" text="button">
-		</page>
-	`,
-
-	test({ assert, target }) {
-		// @ts-ignore
-		const attr = (/** @type {string} */ sel) => target.querySelector(sel).attributes[0].name;
-		assert.equal(attr('page'), 'horizontalAlignment');
-		assert.equal(attr('button'), 'textWrap');
-	}
-});
diff --git a/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace/main.svelte b/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace/main.svelte
deleted file mode 100644
index 3962f64b12..0000000000
--- a/packages/svelte/tests/runtime-legacy/samples/attribute-casing-foreign-namespace/main.svelte
+++ /dev/null
@@ -1,4 +0,0 @@
-<svelte:options namespace="foreign" />
-<page horizontalAlignment="center">
-	<button textWrap="true" text="button">
-</page>
diff --git a/packages/svelte/tests/validator/samples/a11y-in-foreign-namespace/input.svelte b/packages/svelte/tests/validator/samples/a11y-in-foreign-namespace/input.svelte
deleted file mode 100644
index aeef580c73..0000000000
--- a/packages/svelte/tests/validator/samples/a11y-in-foreign-namespace/input.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<svelte:options namespace="foreign" />
-<page>
-    <a>not actually a link</a>
-    <label>This isn't a html label</label>
-    <figure>This is maybe a QT figure</figure>
-</page>
-
diff --git a/packages/svelte/tests/validator/samples/a11y-in-foreign-namespace/warnings.json b/packages/svelte/tests/validator/samples/a11y-in-foreign-namespace/warnings.json
deleted file mode 100644
index fe51488c70..0000000000
--- a/packages/svelte/tests/validator/samples/a11y-in-foreign-namespace/warnings.json
+++ /dev/null
@@ -1 +0,0 @@
-[]
diff --git a/packages/svelte/tests/validator/samples/binding-invalid-foreign-namespace/errors.json b/packages/svelte/tests/validator/samples/binding-invalid-foreign-namespace/errors.json
deleted file mode 100644
index 702a6a6042..0000000000
--- a/packages/svelte/tests/validator/samples/binding-invalid-foreign-namespace/errors.json
+++ /dev/null
@@ -1,14 +0,0 @@
-[
-	{
-		"code": "bind_invalid_name",
-		"message": "`bind:value` is not a valid binding. Foreign elements only support `bind:this`",
-		"start": {
-			"line": 6,
-			"column": 7
-		},
-		"end": {
-			"line": 6,
-			"column": 28
-		}
-	}
-]
diff --git a/packages/svelte/tests/validator/samples/binding-invalid-foreign-namespace/input.svelte b/packages/svelte/tests/validator/samples/binding-invalid-foreign-namespace/input.svelte
deleted file mode 100644
index e40f44e906..0000000000
--- a/packages/svelte/tests/validator/samples/binding-invalid-foreign-namespace/input.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<svelte:options namespace="foreign" />
-<script>
-	let whatever;
-</script>
-
-<input bind:value={whatever} />
diff --git a/packages/svelte/tests/validator/samples/namespace-invalid/errors.json b/packages/svelte/tests/validator/samples/namespace-invalid/errors.json
index bcd2dc1d9c..709c0c2a74 100644
--- a/packages/svelte/tests/validator/samples/namespace-invalid/errors.json
+++ b/packages/svelte/tests/validator/samples/namespace-invalid/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "svelte_options_invalid_attribute_value",
-		"message": "Value must be \"html\", \"mathml\", \"svg\" or \"foreign\", if specified",
+		"message": "Value must be \"html\", \"mathml\" or \"svg\", if specified",
 		"start": {
 			"line": 1,
 			"column": 16
diff --git a/packages/svelte/tests/validator/samples/namespace-non-literal/errors.json b/packages/svelte/tests/validator/samples/namespace-non-literal/errors.json
index d7d637fbb1..930e29afb4 100644
--- a/packages/svelte/tests/validator/samples/namespace-non-literal/errors.json
+++ b/packages/svelte/tests/validator/samples/namespace-non-literal/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "svelte_options_invalid_attribute_value",
-		"message": "Value must be \"html\", \"mathml\", \"svg\" or \"foreign\", if specified",
+		"message": "Value must be \"html\", \"mathml\" or \"svg\", if specified",
 		"start": {
 			"line": 1,
 			"column": 16
diff --git a/packages/svelte/tests/validator/test.ts b/packages/svelte/tests/validator/test.ts
index 8da4fdd7c3..f419c6360d 100644
--- a/packages/svelte/tests/validator/test.ts
+++ b/packages/svelte/tests/validator/test.ts
@@ -128,21 +128,5 @@ it('errors if namespace is provided but unrecognised', () => {
 			// @ts-expect-error
 			namespace: 'svefefe'
 		});
-	}, /namespace should be one of "html", "svg" or "foreign"/);
-});
-
-it("does not throw error if 'this' is bound for foreign element", () => {
-	assert.doesNotThrow(() => {
-		compile(
-			`
-		<script>
-			let whatever;
-		</script>
-		<div bind:this={whatever}></div>`,
-			{
-				name: 'test',
-				namespace: 'foreign'
-			}
-		);
-	});
+	}, /namespace should be one of "html", "mathml" or "svg"/);
 });
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 0895821a66..b7412c46e5 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -765,7 +765,7 @@ declare module 'svelte/compiler' {
 		 */
 		accessors?: boolean;
 		/**
-		 * The namespace of the element; e.g., `"html"`, `"svg"`, `"foreign"`.
+		 * The namespace of the element; e.g., `"html"`, `"svg"`, `"mathml"`.
 		 *
 		 * @default 'html'
 		 */
@@ -1504,11 +1504,8 @@ declare module 'svelte/compiler' {
 	 * - `html`    — the default, for e.g. `<div>` or `<span>`
 	 * - `svg`     — for e.g. `<svg>` or `<g>`
 	 * - `mathml`  — for e.g. `<math>` or `<mrow>`
-	 * - `foreign` — for other compilation targets than the web, e.g. Svelte Native.
-	 *               Disallows bindings other than bind:this, disables a11y checks, disables any special attribute handling
-	 *               (also see https://github.com/sveltejs/svelte/pull/5652)
 	 */
-	type Namespace = 'html' | 'svg' | 'mathml' | 'foreign';
+	type Namespace = 'html' | 'svg' | 'mathml';
 
 	interface Root extends BaseNode {
 		type: 'Root';
@@ -2641,7 +2638,7 @@ declare module 'svelte/types/compiler/interfaces' {
 		 */
 		accessors?: boolean;
 		/**
-		 * The namespace of the element; e.g., `"html"`, `"svg"`, `"foreign"`.
+		 * The namespace of the element; e.g., `"html"`, `"svg"`, `"mathml"`.
 		 *
 		 * @default 'html'
 		 */
@@ -2776,11 +2773,8 @@ declare module 'svelte/types/compiler/interfaces' {
 	 * - `html`    — the default, for e.g. `<div>` or `<span>`
 	 * - `svg`     — for e.g. `<svg>` or `<g>`
 	 * - `mathml`  — for e.g. `<math>` or `<mrow>`
-	 * - `foreign` — for other compilation targets than the web, e.g. Svelte Native.
-	 *               Disallows bindings other than bind:this, disables a11y checks, disables any special attribute handling
-	 *               (also see https://github.com/sveltejs/svelte/pull/5652)
 	 */
-	type Namespace = 'html' | 'svg' | 'mathml' | 'foreign';
+	type Namespace = 'html' | 'svg' | 'mathml';
 	type ICompileDiagnostic = {
 		code: string;
 		message: string;

From 686b0865c5d8d7e927ad8d809d3da01dfcb2813c Mon Sep 17 00:00:00 2001
From: brunnerh <brunnerh@users.noreply.github.com>
Date: Fri, 16 Aug 2024 17:20:59 +0200
Subject: [PATCH 134/196] docs: Move note on runes mode that ended up in wrong
 section. (#12876)

---
 .../src/routes/docs/content/03-appendix/03-deprecations.md    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md
index 73e966af38..e4fdcc86b3 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md
@@ -82,6 +82,8 @@ When authoring custom elements, use the new [host rune](/docs/runes#$host) to di
 >greet</button>
 ```
 
+Note that using `$props` and `$host` will put you in [runes mode](/docs/runes) — be sure to update your props and state accordingly.
+
 ## `<svelte:component>` in runes mode
 
 In previous versions of Svelte, the component constructor was fixed when the component was rendered. In other words, if you wanted `<X>` to re-render when `X` changed, you would either have to use `<svelte:component this={X}>` or put the component inside a `{#key X}...{/key}` block.
@@ -112,8 +114,6 @@ A derived value may be used in other contexts:
 + <Component />
 ```
 
-Note that using `$props` and `$host` will put you in [runes mode](/docs/runes) — be sure to update your props and state accordingly.
-
 ## `immutable`
 
 The `immutable` compiler option is deprecated. Use runes mode instead, where all state is immutable (which means that assigning to `object.property` won't cause updates for anything that is observing `object` itself, or a different property of it).

From 39c559a0d724bc2b65cf4e0893d0c3229cc7dacc Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 16 Aug 2024 18:56:03 -0400
Subject: [PATCH 135/196] feat: better destructuring assignments (#12872)

* preserve existing destructuring assignments where appropriate

* add test

* changeset
---
 .changeset/rich-elephants-relax.md            |  5 ++++
 .../client/visitors/AssignmentExpression.js   | 28 +++++++++++--------
 .../server/visitors/AssignmentExpression.js   |  2 +-
 .../phases/3-transform/shared/assignments.js  |  7 ++---
 .../_expected/client/index.svelte.js          |  4 +++
 .../_expected/server/index.svelte.js          |  3 ++
 .../destructured-assignments/index.svelte.js  |  3 ++
 7 files changed, 34 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/rich-elephants-relax.md

diff --git a/.changeset/rich-elephants-relax.md b/.changeset/rich-elephants-relax.md
new file mode 100644
index 0000000000..dbf1c88282
--- /dev/null
+++ b/.changeset/rich-elephants-relax.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: better destructuring assignments
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
index 6636b82a20..4365870bf7 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js
@@ -11,7 +11,13 @@ import { visit_assignment_expression } from '../../shared/assignments.js';
  * @param {Context} context
  */
 export function AssignmentExpression(node, context) {
-	return visit_assignment_expression(node, context, build_assignment);
+	const expression = /** @type {Expression} */ (
+		visit_assignment_expression(node, context, build_assignment) ?? context.next()
+	);
+
+	return is_ignored(node, 'ownership_invalid_mutation')
+		? b.call('$.skip_ownership_validation', b.thunk(expression))
+		: expression;
 }
 
 /**
@@ -109,19 +115,17 @@ function build_assignment(operator, left, right, context) {
 		return transform.assign(object, value);
 	}
 
-	/** @type {Expression} */
-	let mutation = b.assignment(
-		operator,
-		/** @type {Pattern} */ (context.visit(left)),
-		/** @type {Expression} */ (context.visit(right))
-	);
-
 	// mutation
 	if (transform?.mutate) {
-		mutation = transform.mutate(object, mutation);
+		return transform.mutate(
+			object,
+			b.assignment(
+				operator,
+				/** @type {Pattern} */ (context.visit(left)),
+				/** @type {Expression} */ (context.visit(right))
+			)
+		);
 	}
 
-	return is_ignored(left, 'ownership_invalid_mutation')
-		? b.call('$.skip_ownership_validation', b.thunk(mutation))
-		: mutation;
+	return null;
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
index e92d54c3b7..2988c590fd 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/AssignmentExpression.js
@@ -10,7 +10,7 @@ import { visit_assignment_expression } from '../../shared/assignments.js';
  * @param {Context} context
  */
 export function AssignmentExpression(node, context) {
-	return visit_assignment_expression(node, context, build_assignment);
+	return visit_assignment_expression(node, context, build_assignment) ?? context.next();
 }
 
 /**
diff --git a/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js b/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js
index ce7595a06e..e8e02b8f58 100644
--- a/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js
+++ b/packages/svelte/src/compiler/phases/3-transform/shared/assignments.js
@@ -41,7 +41,7 @@ export function visit_assignment_expression(node, context, build_assignment) {
 
 		if (!changed) {
 			// No change to output -> nothing to transform -> we can keep the original assignment
-			return context.next();
+			return null;
 		}
 
 		const is_standalone = /** @type {Node} */ (context.path.at(-1)).type.endsWith('Statement');
@@ -70,8 +70,5 @@ export function visit_assignment_expression(node, context, build_assignment) {
 		throw new Error(`Unexpected assignment type ${node.left.type}`);
 	}
 
-	return (
-		build_assignment(node.operator, node.left, node.right, context) ??
-		/** @type {Expression} */ (context.next())
-	);
+	return build_assignment(node.operator, node.left, node.right, context);
 }
diff --git a/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js
index 9400b52718..a10f4ca1a5 100644
--- a/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/client/index.svelte.js
@@ -3,10 +3,14 @@ import * as $ from "svelte/internal/client";
 
 let a = $.source(1);
 let b = $.source(2);
+let c = 3;
+let d = 4;
 
 export function update(array) {
 	(
 		$.set(a, $.proxy(array[0])),
 		$.set(b, $.proxy(array[1]))
 	);
+
+	[c, d] = array;
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/server/index.svelte.js
index 846ed48458..2797d4312b 100644
--- a/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/destructured-assignments/_expected/server/index.svelte.js
@@ -3,7 +3,10 @@ import * as $ from "svelte/internal/server";
 
 let a = 1;
 let b = 2;
+let c = 3;
+let d = 4;
 
 export function update(array) {
 	[a, b] = array;
+	[c, d] = array;
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/destructured-assignments/index.svelte.js b/packages/svelte/tests/snapshot/samples/destructured-assignments/index.svelte.js
index 9c0da7558a..558cc66cc2 100644
--- a/packages/svelte/tests/snapshot/samples/destructured-assignments/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/destructured-assignments/index.svelte.js
@@ -1,6 +1,9 @@
 let a = $state(1);
 let b = $state(2);
+let c = 3;
+let d = 4;
 
 export function update(array) {
 	[a, b] = array;
+	[c, d] = array;
 }

From 437509915c0916b9c1b3eaf9af081e34c0e09f06 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sat, 17 Aug 2024 00:11:31 +0100
Subject: [PATCH 136/196] Revert "chore: bring back recursive processing of
 effects" (#12880)

* Revert "chore: bring back recursive processing of effects (#12861)"

This reverts commit cb124315be03a47710672eb661b57d714d01fd52.

* apply tweak
---
 .../svelte/src/internal/client/runtime.js     | 110 ++++++++++--------
 1 file changed, 60 insertions(+), 50 deletions(-)

diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 2ab833fc25..6a32095b6d 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -571,53 +571,6 @@ export function schedule_effect(signal) {
 	current_queued_root_effects.push(effect);
 }
 
-/**
- * @param {Effect} effect
- * @param {Effect[]} effects
- */
-function process_effect_children(effect, effects) {
-	var current = effect.first;
-
-	while (current !== null) {
-		var next = current.next;
-		process_effect(current, effects);
-		current = next;
-	}
-}
-
-/**
- * @param {Effect} effect
- * @param {Effect[]} effects
- */
-function process_effect(effect, effects) {
-	var flags = effect.f;
-	// TODO: we probably don't need to check for destroyed as it shouldn't be encountered?
-	var is_active = (flags & (DESTROYED | INERT)) === 0;
-	var is_branch = (flags & BRANCH_EFFECT) !== 0;
-	var is_clean = (flags & CLEAN) !== 0;
-
-	// Skip this branch if it's clean
-	if (is_active && (!is_branch || !is_clean)) {
-		if (is_branch) {
-			set_signal_status(effect, CLEAN);
-		}
-
-		if ((flags & RENDER_EFFECT) !== 0) {
-			if (!is_branch && check_dirtiness(effect)) {
-				update_effect(effect);
-			}
-
-			process_effect_children(effect, effects);
-		} else if ((flags & EFFECT) !== 0) {
-			if (is_branch || is_clean) {
-				process_effect_children(effect, effects);
-			} else {
-				effects.push(effect);
-			}
-		}
-	}
-}
-
 /**
  *
  * This function both runs render effects and collects user effects in topological order
@@ -630,13 +583,70 @@ function process_effect(effect, effects) {
  * @returns {void}
  */
 function process_effects(effect, collected_effects) {
-	/** @type {Effect[]} */
+	var current_effect = effect.first;
 	var effects = [];
-	process_effect_children(effect, effects);
+
+	main_loop: while (current_effect !== null) {
+		var flags = current_effect.f;
+		// TODO: we probably don't need to check for destroyed as it shouldn't be encountered?
+		var is_active = (flags & (DESTROYED | INERT)) === 0;
+		var is_branch = (flags & BRANCH_EFFECT) !== 0;
+		var is_clean = (flags & CLEAN) !== 0;
+		var child = current_effect.first;
+
+		// Skip this branch if it's clean
+		if (is_active && (!is_branch || !is_clean)) {
+			if (is_branch) {
+				set_signal_status(current_effect, CLEAN);
+			}
+
+			if ((flags & RENDER_EFFECT) !== 0) {
+				if (!is_branch && check_dirtiness(current_effect)) {
+					update_effect(current_effect);
+					// Child might have been mutated since running the effect
+					child = current_effect.first;
+				}
+
+				if (child !== null) {
+					current_effect = child;
+					continue;
+				}
+			} else if ((flags & EFFECT) !== 0) {
+				if (is_branch || is_clean) {
+					if (child !== null) {
+						current_effect = child;
+						continue;
+					}
+				} else {
+					effects.push(current_effect);
+				}
+			}
+		}
+		var sibling = current_effect.next;
+
+		if (sibling === null) {
+			let parent = current_effect.parent;
+
+			while (parent !== null) {
+				if (effect === parent) {
+					break main_loop;
+				}
+				var parent_sibling = parent.next;
+				if (parent_sibling !== null) {
+					current_effect = parent_sibling;
+					continue main_loop;
+				}
+				parent = parent.parent;
+			}
+		}
+
+		current_effect = sibling;
+	}
+
 	// We might be dealing with many effects here, far more than can be spread into
 	// an array push call (callstack overflow). So let's deal with each effect in a loop.
 	for (var i = 0; i < effects.length; i++) {
-		var child = effects[i];
+		child = effects[i];
 		collected_effects.push(child);
 		process_effects(child, collected_effects);
 	}

From c09decec44f3f779a7a63ab8f6083284198f0eaa Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 17 Aug 2024 00:21:59 +0100
Subject: [PATCH 137/196] Version Packages (next) (#12856)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  7 +++++++
 packages/svelte/CHANGELOG.md   | 18 ++++++++++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index ad09eb09f3..55dc839f35 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -159,6 +159,7 @@
     "eleven-cycles-applaud",
     "eleven-donuts-sit",
     "eleven-hounds-pump",
+    "eleven-teachers-drive",
     "empty-bags-heal",
     "empty-bulldogs-exercise",
     "empty-coins-build",
@@ -258,6 +259,7 @@
     "good-rivers-yawn",
     "good-roses-argue",
     "gorgeous-boxes-design",
+    "gorgeous-coats-jog",
     "gorgeous-hats-wonder",
     "gorgeous-monkeys-carry",
     "gorgeous-singers-rest",
@@ -303,6 +305,7 @@
     "hot-jobs-tap",
     "hot-rivers-punch",
     "hot-sloths-clap",
+    "hot-tips-appear",
     "hungry-boxes-relate",
     "hungry-dots-fry",
     "hungry-pants-push",
@@ -345,6 +348,7 @@
     "late-grapes-judge",
     "late-peaches-mate",
     "late-zebras-argue",
+    "lazy-carrots-buy",
     "lazy-knives-happen",
     "lazy-masks-sit",
     "lazy-months-knock",
@@ -448,6 +452,7 @@
     "odd-schools-wait",
     "odd-shoes-cheat",
     "odd-taxis-retire",
+    "odd-toys-glow",
     "old-flies-jog",
     "old-houses-drum",
     "old-jokes-deliver",
@@ -526,6 +531,7 @@
     "red-poets-study",
     "red-pots-pretend",
     "rich-cobras-exist",
+    "rich-elephants-relax",
     "rich-garlics-laugh",
     "rich-olives-yell",
     "rich-plums-thank",
@@ -598,6 +604,7 @@
     "six-boats-shave",
     "six-chicken-kneel",
     "six-gorillas-obey",
+    "six-vans-add",
     "sixty-items-crash",
     "sixty-numbers-hope",
     "sixty-pandas-rush",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 5c7764e78d..548c858f13 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,23 @@
 # svelte
 
+## 5.0.0-next.223
+
+### Patch Changes
+
+- fix: treat module-level imports as non-reactive in legacy mode ([#12845](https://github.com/sveltejs/svelte/pull/12845))
+
+- breaking: remove foreign namespace ([#12869](https://github.com/sveltejs/svelte/pull/12869))
+
+- feat: more efficient text-only fragments ([#12864](https://github.com/sveltejs/svelte/pull/12864))
+
+- fix: ensure outro animation is not prematurely aborted ([#12865](https://github.com/sveltejs/svelte/pull/12865))
+
+- chore: improve performance of DOM traversal operations ([#12863](https://github.com/sveltejs/svelte/pull/12863))
+
+- feat: better destructuring assignments ([#12872](https://github.com/sveltejs/svelte/pull/12872))
+
+- fix: stricter `crossorigin` and `wrap` attributes types ([#12858](https://github.com/sveltejs/svelte/pull/12858))
+
 ## 5.0.0-next.222
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index b44c73788c..82f6652bdf 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.222",
+  "version": "5.0.0-next.223",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index a3e3623c9a..f7ec5e4d70 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.222';
+export const VERSION = '5.0.0-next.223';
 export const PUBLIC_VERSION = '5';

From 33a159cd61bb80abe81f2c6bfb698508fd891959 Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Sat, 17 Aug 2024 14:32:26 +0200
Subject: [PATCH 138/196] fix: allow store as initial value for props in ssr
 (#12885)

---
 .changeset/smart-poets-care.md                             | 5 +++++
 .../3-transform/server/visitors/VariableDeclaration.js     | 4 +++-
 .../samples/store-init-props/_config.js                    | 3 +++
 .../samples/store-init-props/_expected.html                | 1 +
 .../samples/store-init-props/main.svelte                   | 7 +++++++
 5 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/smart-poets-care.md
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/store-init-props/_config.js
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/store-init-props/_expected.html
 create mode 100644 packages/svelte/tests/server-side-rendering/samples/store-init-props/main.svelte

diff --git a/.changeset/smart-poets-care.md b/.changeset/smart-poets-care.md
new file mode 100644
index 0000000000..bb0dc071e3
--- /dev/null
+++ b/.changeset/smart-poets-care.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow store as initial value for props in ssr
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
index bd8a8f435e..5e0b34a557 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/VariableDeclaration.js
@@ -39,7 +39,9 @@ export function VariableDeclaration(node, context) {
 						}
 					}
 				});
-				declarations.push(b.declarator(id, b.id('$$props')));
+				declarations.push(
+					b.declarator(/** @type {Pattern} */ (context.visit(id)), b.id('$$props'))
+				);
 				continue;
 			}
 
diff --git a/packages/svelte/tests/server-side-rendering/samples/store-init-props/_config.js b/packages/svelte/tests/server-side-rendering/samples/store-init-props/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/store-init-props/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/server-side-rendering/samples/store-init-props/_expected.html b/packages/svelte/tests/server-side-rendering/samples/store-init-props/_expected.html
new file mode 100644
index 0000000000..56a6051ca2
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/store-init-props/_expected.html
@@ -0,0 +1 @@
+1
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/store-init-props/main.svelte b/packages/svelte/tests/server-side-rendering/samples/store-init-props/main.svelte
new file mode 100644
index 0000000000..762a519e03
--- /dev/null
+++ b/packages/svelte/tests/server-side-rendering/samples/store-init-props/main.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { writable } from 'svelte/store';
+	const page = writable(1);
+	const { value = $page } = $props();
+</script>
+
+{value}

From aa55b709e761d7dd3dcdf500c538609d626c08f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Crozatier?=
 <48696601+fcrozatier@users.noreply.github.com>
Date: Sat, 17 Aug 2024 15:09:09 +0200
Subject: [PATCH 139/196] fix: remove remaining Sapper stuff (#12875)

* remove sapper bindings

* changeset
---
 .changeset/happy-planets-rest.md | 5 +++++
 packages/svelte/elements.d.ts    | 4 ----
 2 files changed, 5 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/happy-planets-rest.md

diff --git a/.changeset/happy-planets-rest.md b/.changeset/happy-planets-rest.md
new file mode 100644
index 0000000000..70b7a56f3a
--- /dev/null
+++ b/.changeset/happy-planets-rest.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: remove sapper bindings
diff --git a/packages/svelte/elements.d.ts b/packages/svelte/elements.d.ts
index be12ddbcbb..ab7f396205 100644
--- a/packages/svelte/elements.d.ts
+++ b/packages/svelte/elements.d.ts
@@ -841,10 +841,6 @@ export interface HTMLAnchorAttributes extends HTMLAttributes<HTMLAnchorElement>
 	target?: HTMLAttributeAnchorTarget | undefined | null;
 	type?: string | undefined | null;
 	referrerpolicy?: ReferrerPolicy | undefined | null;
-
-	// Sapper
-	'sapper:noscroll'?: true | undefined | null;
-	'sapper:prefetch'?: true | undefined | null;
 }
 
 export interface HTMLAudioAttributes extends HTMLMediaAttributes<HTMLAudioElement> {}

From 4512462b6622406d03695f298efa603f4da04250 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sat, 17 Aug 2024 14:32:49 +0100
Subject: [PATCH 140/196] chore: tweak each block logic (#12884)

* chore: tweak each block logic to avoid Array.from

* more tweaks

* lint

* Update packages/svelte/src/internal/client/dom/blocks/each.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* Update packages/svelte/src/internal/client/dom/blocks/each.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

* Update packages/svelte/src/internal/client/dom/blocks/each.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .../src/internal/client/dom/blocks/each.js    | 58 ++++++++++---------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index 18785f7114..5788154db2 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -32,8 +32,8 @@ import {
 	resume_effect
 } from '../../reactivity/effects.js';
 import { source, mutable_source, set } from '../../reactivity/sources.js';
-import { is_array, is_frozen } from '../../../shared/utils.js';
-import { INERT, STATE_SYMBOL } from '../../constants.js';
+import { array_from, is_array } from '../../../shared/utils.js';
+import { INERT } from '../../constants.js';
 import { queue_micro_task } from '../task.js';
 import { current_effect } from '../../runtime.js';
 
@@ -139,7 +139,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 			? collection
 			: collection == null
 				? []
-				: Array.from(collection);
+				: array_from(collection);
 
 		var length = array.length;
 
@@ -242,14 +242,14 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
 	var first = state.first;
 	var current = first;
 
-	/** @type {Set<EachItem>} */
-	var seen = new Set();
+	/** @type {undefined | Set<EachItem>} */
+	var seen;
 
 	/** @type {EachItem | null} */
 	var prev = null;
 
-	/** @type {Set<EachItem>} */
-	var to_animate = new Set();
+	/** @type {undefined | Set<EachItem>} */
+	var to_animate;
 
 	/** @type {EachItem[]} */
 	var matched = [];
@@ -277,7 +277,7 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
 
 			if (item !== undefined) {
 				item.a?.measure();
-				to_animate.add(item);
+				(to_animate ??= new Set()).add(item);
 			}
 		}
 	}
@@ -319,12 +319,12 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
 			resume_effect(item.e);
 			if (is_animated) {
 				item.a?.unfix();
-				to_animate.delete(item);
+				(to_animate ??= new Set()).delete(item);
 			}
 		}
 
 		if (item !== current) {
-			if (seen.has(item)) {
+			if (seen !== undefined && seen.has(item)) {
 				if (matched.length < stashed.length) {
 					// more efficient to move later items to the front
 					var start = stashed[0];
@@ -372,7 +372,7 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
 			stashed = [];
 
 			while (current !== null && current.k !== key) {
-				seen.add(current);
+				(seen ??= new Set()).add(current);
 				stashed.push(current);
 				current = current.next;
 			}
@@ -389,32 +389,36 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
 		current = item.next;
 	}
 
-	const to_destroy = Array.from(seen);
+	if (current !== null || seen !== undefined) {
+		var to_destroy = seen === undefined ? [] : array_from(seen);
 
-	while (current !== null) {
-		to_destroy.push(current);
-		current = current.next;
-	}
-	var destroy_length = to_destroy.length;
+		while (current !== null) {
+			to_destroy.push(current);
+			current = current.next;
+		}
 
-	if (destroy_length > 0) {
-		var controlled_anchor = (flags & EACH_IS_CONTROLLED) !== 0 && length === 0 ? anchor : null;
+		var destroy_length = to_destroy.length;
 
-		if (is_animated) {
-			for (i = 0; i < destroy_length; i += 1) {
-				to_destroy[i].a?.measure();
-			}
+		if (destroy_length > 0) {
+			var controlled_anchor = (flags & EACH_IS_CONTROLLED) !== 0 && length === 0 ? anchor : null;
 
-			for (i = 0; i < destroy_length; i += 1) {
-				to_destroy[i].a?.fix();
+			if (is_animated) {
+				for (i = 0; i < destroy_length; i += 1) {
+					to_destroy[i].a?.measure();
+				}
+
+				for (i = 0; i < destroy_length; i += 1) {
+					to_destroy[i].a?.fix();
+				}
 			}
-		}
 
-		pause_effects(state, to_destroy, controlled_anchor, items);
+			pause_effects(state, to_destroy, controlled_anchor, items);
+		}
 	}
 
 	if (is_animated) {
 		queue_micro_task(() => {
+			if (to_animate === undefined) return;
 			for (item of to_animate) {
 				item.a?.apply();
 			}

From 817558828ecfe5f378efe200532c65c57b2fdf7f Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sat, 17 Aug 2024 14:35:27 +0100
Subject: [PATCH 141/196] chore: refactor internal signal dependency heuristic
 (#12881)

* chore: remove redundant signal logic

* more tweaks

* more tweaks

* refactor

* tweak
---
 .changeset/hot-kangaroos-invite.md            |  5 ++
 .../src/internal/client/dom/template.js       |  2 +-
 .../src/internal/client/reactivity/effects.js |  6 +-
 .../src/internal/client/reactivity/sources.js |  4 +-
 .../src/internal/client/reactivity/types.d.ts |  2 +-
 .../svelte/src/internal/client/runtime.js     | 67 ++++++-------------
 packages/svelte/tests/signals/test.ts         | 16 ++---
 7 files changed, 42 insertions(+), 60 deletions(-)
 create mode 100644 .changeset/hot-kangaroos-invite.md

diff --git a/.changeset/hot-kangaroos-invite.md b/.changeset/hot-kangaroos-invite.md
new file mode 100644
index 0000000000..df21009329
--- /dev/null
+++ b/.changeset/hot-kangaroos-invite.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: refactor internal signal dependency heuristic
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index 27d82bb0a4..42b13ac584 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -39,7 +39,7 @@ export function template(content, flags) {
 			return hydrate_node;
 		}
 
-		if (!node) {
+		if (node === undefined) {
 			node = create_fragment_from_html(has_start ? content : '<!>' + content);
 			if (!is_fragment) node = /** @type {Node} */ (get_first_child(node));
 		}
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index 68a309cbda..cd9a9f9171 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -375,8 +375,10 @@ export function destroy_effect(effect, remove_dom = true) {
 	remove_reactions(effect, 0);
 	set_signal_status(effect, DESTROYED);
 
-	if (effect.transitions) {
-		for (const transition of effect.transitions) {
+	var transitions = effect.transitions;
+
+	if (transitions !== null) {
+		for (const transition of transitions) {
 			transition.stop();
 		}
 	}
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 3425d6dadc..86427a7509 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -139,8 +139,10 @@ function mark_reactions(signal, status) {
 	if (reactions === null) return;
 
 	var runes = is_runes();
+	var length = reactions.length;
 
-	for (var reaction of reactions) {
+	for (var i = 0; i < length; i++) {
+		var reaction = reactions[i];
 		var flags = reaction.f;
 
 		// Skip any effects that are already dirty
diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts
index 4a53a70043..1e347c011f 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -9,7 +9,7 @@ export interface Signal {
 
 export interface Value<V = unknown> extends Signal {
 	/** Signals that read from this signal */
-	reactions: null | Set<Reaction>;
+	reactions: null | Reaction[];
 	/** Equality function */
 	equals: Equals;
 	/** The latest value for this signal */
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 6a32095b6d..4e2a2ee031 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -169,7 +169,7 @@ export function check_dirtiness(reaction) {
 
 			if ((flags & DISCONNECTED) !== 0) {
 				for (i = 0; i < dependencies.length; i++) {
-					(dependencies[i].reactions ??= new Set()).add(reaction);
+					(dependencies[i].reactions ??= []).push(reaction);
 				}
 
 				reaction.f ^= DISCONNECTED;
@@ -188,11 +188,11 @@ export function check_dirtiness(reaction) {
 
 				if (is_unowned) {
 					// TODO is there a more logical place to do this work?
-					if (!current_skip_reaction && !dependency?.reactions?.has(reaction)) {
+					if (!current_skip_reaction && !dependency?.reactions?.includes(reaction)) {
 						// If we are working with an unowned signal as part of an effect (due to !current_skip_reaction)
 						// and the version hasn't changed, we still need to check that this reaction
 						// if linked to the dependency source – otherwise future updates will not be caught.
-						(dependency.reactions ??= new Set()).add(reaction);
+						(dependency.reactions ??= []).push(reaction);
 					}
 				}
 			}
@@ -291,26 +291,9 @@ export function update_reaction(reaction) {
 		var deps = reaction.deps;
 
 		if (new_deps !== null) {
-			var dependency;
 			var i;
 
-			if (deps !== null) {
-				/** All dependencies of the reaction, including those tracked on the previous run */
-				var array = skipped_deps === 0 ? new_deps : deps.slice(0, skipped_deps).concat(new_deps);
-
-				// If we have more than 16 elements in the array then use a Set for faster performance
-				// TODO: evaluate if we should always just use a Set or not here?
-				var set = array.length > 16 ? new Set(array) : null;
-
-				// Remove dependencies that should no longer be tracked
-				for (i = skipped_deps; i < deps.length; i++) {
-					dependency = deps[i];
-
-					if (set !== null ? !set.has(dependency) : !array.includes(dependency)) {
-						remove_reaction(reaction, dependency);
-					}
-				}
-			}
+			remove_reactions(reaction, skipped_deps);
 
 			if (deps !== null && skipped_deps > 0) {
 				deps.length = skipped_deps + new_deps.length;
@@ -323,7 +306,7 @@ export function update_reaction(reaction) {
 
 			if (!current_skip_reaction) {
 				for (i = skipped_deps; i < deps.length; i++) {
-					(deps[i].reactions ??= new Set()).add(reaction);
+					(deps[i].reactions ??= []).push(reaction);
 				}
 			}
 		} else if (deps !== null && skipped_deps < deps.length) {
@@ -350,9 +333,16 @@ export function update_reaction(reaction) {
 function remove_reaction(signal, dependency) {
 	let reactions = dependency.reactions;
 	if (reactions !== null) {
-		reactions.delete(signal);
-		if (reactions.size === 0) {
-			reactions = dependency.reactions = null;
+		var index = reactions.indexOf(signal);
+		if (index !== -1) {
+			var new_length = reactions.length - 1;
+			if (new_length === 0) {
+				reactions = dependency.reactions = null;
+			} else {
+				// Swap with last element and then remove.
+				reactions[index] = reactions[new_length];
+				reactions.pop();
+			}
 		}
 	}
 	// If the derived has no reactions, then we can disconnect it from the graph,
@@ -377,19 +367,8 @@ export function remove_reactions(signal, start_index) {
 	var dependencies = signal.deps;
 	if (dependencies === null) return;
 
-	var active_dependencies = start_index === 0 ? null : dependencies.slice(0, start_index);
-	var seen = new Set();
-
 	for (var i = start_index; i < dependencies.length; i++) {
-		var dependency = dependencies[i];
-
-		if (seen.has(dependency)) continue;
-		seen.add(dependency);
-
-		// Avoid removing a reaction if we know that it is active (start_index will not be 0)
-		if (active_dependencies === null || !active_dependencies.includes(dependency)) {
-			remove_reaction(signal, dependency);
-		}
+		remove_reaction(signal, dependencies[i]);
 	}
 }
 
@@ -726,16 +705,10 @@ export function get(signal) {
 		// rather than updating `new_deps`, which creates GC cost
 		if (new_deps === null && deps !== null && deps[skipped_deps] === signal) {
 			skipped_deps++;
-		}
-
-		// Otherwise, create or push to `new_deps`, but only if this
-		// dependency wasn't the last one that was accessed
-		else if (deps === null || skipped_deps === 0 || deps[skipped_deps - 1] !== signal) {
-			if (new_deps === null) {
-				new_deps = [signal];
-			} else if (new_deps[new_deps.length - 1] !== signal) {
-				new_deps.push(signal);
-			}
+		} else if (new_deps === null) {
+			new_deps = [signal];
+		} else {
+			new_deps.push(signal);
 		}
 
 		if (
diff --git a/packages/svelte/tests/signals/test.ts b/packages/svelte/tests/signals/test.ts
index 7a68e92bc7..270b5125a4 100644
--- a/packages/svelte/tests/signals/test.ts
+++ b/packages/svelte/tests/signals/test.ts
@@ -236,13 +236,13 @@ describe('signals', () => {
 		return () => {
 			flushSync(() => set(count, 1));
 			// Ensure we're not leaking consumers
-			assert.deepEqual(count.reactions?.size, 1);
+			assert.deepEqual(count.reactions?.length, 1);
 			flushSync(() => set(count, 2));
 			// Ensure we're not leaking consumers
-			assert.deepEqual(count.reactions?.size, 1);
+			assert.deepEqual(count.reactions?.length, 1);
 			flushSync(() => set(count, 3));
 			// Ensure we're not leaking consumers
-			assert.deepEqual(count.reactions?.size, 1);
+			assert.deepEqual(count.reactions?.length, 1);
 			assert.deepEqual(log, [0, 1, 2, 3]);
 		};
 	});
@@ -304,8 +304,8 @@ describe('signals', () => {
 			flushSync(() => set(count, 4));
 			flushSync(() => set(count, 0));
 			// Ensure we're not leaking consumers
-			assert.deepEqual(count.reactions?.size, 1);
-			assert.deepEqual(calc.reactions?.size, 1);
+			assert.deepEqual(count.reactions?.length, 2);
+			assert.deepEqual(calc.reactions?.length, 1);
 			assert.deepEqual(log, [0, 2, 'limit', 0]);
 			destroy();
 			// Ensure we're not leaking consumers
@@ -484,7 +484,7 @@ describe('signals', () => {
 		return () => {
 			flushSync();
 			assert.equal(a?.deps?.length, 1);
-			assert.equal(state?.reactions?.size, 1);
+			assert.equal(state?.reactions?.length, 1);
 			destroy();
 			assert.equal(a?.deps?.length, 1);
 			assert.equal(state?.reactions, null);
@@ -658,12 +658,12 @@ describe('signals', () => {
 			});
 
 			assert.equal($.get(d), 0);
-			assert.equal(count.reactions?.size, 1);
+			assert.equal(count.reactions?.length, 1);
 			assert.equal(d.deps?.length, 1);
 
 			set(count, 1);
 			assert.equal($.get(d), 2);
-			assert.equal(count.reactions?.size, 1);
+			assert.equal(count.reactions?.length, 1);
 			assert.equal(d.deps?.length, 1);
 
 			destroy();

From 19a35c62e1111a8c860dfd752d968cd00b8a7915 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sat, 17 Aug 2024 15:53:01 +0100
Subject: [PATCH 142/196] chore: inline start and end node properties into
 effect (#12878)

* chore: inline start and end node properties into effect

* Revert "chore: set `binding.kind` before analysis (#12843)"

This reverts commit 19beb7754e82dd40052499d8c253e1fe2bb69cf8.

* name better

* oops

* revert

* revert

* revert

---------

Co-authored-by: Conduitry <git@chor.date>
---
 .changeset/eighty-bugs-fetch.md                    |  5 +++++
 .../svelte/src/internal/client/dom/blocks/each.js  | 10 +++++-----
 .../internal/client/dom/blocks/svelte-element.js   |  4 ++--
 .../svelte/src/internal/client/dom/template.js     | 10 +++++++---
 .../src/internal/client/reactivity/effects.js      | 14 ++++++++------
 .../src/internal/client/reactivity/types.d.ts      |  8 ++------
 packages/svelte/src/internal/client/render.js      |  4 ++--
 packages/svelte/src/internal/client/runtime.js     |  2 +-
 8 files changed, 32 insertions(+), 25 deletions(-)
 create mode 100644 .changeset/eighty-bugs-fetch.md

diff --git a/.changeset/eighty-bugs-fetch.md b/.changeset/eighty-bugs-fetch.md
new file mode 100644
index 0000000000..35bde6a377
--- /dev/null
+++ b/.changeset/eighty-bugs-fetch.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: inline start and end node properties into effect
diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index 5788154db2..cdc5ef1799 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -1,4 +1,4 @@
-/** @import { EachItem, EachState, Effect, EffectNodes, MaybeSource, Source, TemplateNode, TransitionManager, Value } from '#client' */
+/** @import { EachItem, EachState, Effect, MaybeSource, Source, TemplateNode, TransitionManager, Value } from '#client' */
 import {
 	EACH_INDEX_REACTIVE,
 	EACH_IS_ANIMATED,
@@ -288,7 +288,7 @@ function reconcile(array, state, anchor, render_fn, flags, get_key) {
 		item = items.get(key);
 
 		if (item === undefined) {
-			var child_anchor = current ? /** @type {EffectNodes} */ (current.e.nodes).start : anchor;
+			var child_anchor = current ? /** @type {TemplateNode} */ (current.e.nodes_start) : anchor;
 
 			prev = create_item(
 				child_anchor,
@@ -513,10 +513,10 @@ function create_item(anchor, state, prev, next, value, key, index, render_fn, fl
  * @param {Text | Element | Comment} anchor
  */
 function move(item, next, anchor) {
-	var end = item.next ? /** @type {EffectNodes} */ (item.next.e.nodes).start : anchor;
+	var end = item.next ? /** @type {TemplateNode} */ (item.next.e.nodes_start) : anchor;
 
-	var dest = next ? /** @type {EffectNodes} */ (next.e.nodes).start : anchor;
-	var node = /** @type {EffectNodes} */ (item.e.nodes).start;
+	var dest = next ? /** @type {TemplateNode} */ (next.e.nodes_start) : anchor;
+	var node = /** @type {TemplateNode} */ (item.e.nodes_start);
 
 	while (node !== end) {
 		var next_node = /** @type {TemplateNode} */ (get_next_sibling(node));
diff --git a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
index 755e44c9ac..f8edafa087 100644
--- a/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
+++ b/packages/svelte/src/internal/client/dom/blocks/svelte-element.js
@@ -1,4 +1,4 @@
-/** @import { Effect, EffectNodes, TemplateNode } from '#client' */
+/** @import { Effect, TemplateNode } from '#client' */
 import { FILENAME, NAMESPACE_SVG } from '../../../../constants.js';
 import {
 	hydrate_next,
@@ -138,7 +138,7 @@ export function element(node, get_tag, is_svg, render_fn, get_namespace, locatio
 				}
 
 				// we do this after calling `render_fn` so that child effects don't override `nodes.end`
-				/** @type {Effect & { nodes: EffectNodes }} */ (current_effect).nodes.end = element;
+				/** @type {Effect} */ (current_effect).nodes_end = element;
 
 				anchor.before(element);
 			});
diff --git a/packages/svelte/src/internal/client/dom/template.js b/packages/svelte/src/internal/client/dom/template.js
index 42b13ac584..767bb5bdd0 100644
--- a/packages/svelte/src/internal/client/dom/template.js
+++ b/packages/svelte/src/internal/client/dom/template.js
@@ -1,4 +1,4 @@
-/** @import { Effect, EffectNodes, TemplateNode } from '#client' */
+/** @import { Effect, TemplateNode } from '#client' */
 import { hydrate_next, hydrate_node, hydrating, set_hydrate_node } from './hydration.js';
 import { create_text, get_first_child } from './operations.js';
 import { create_fragment_from_html } from './reconciler.js';
@@ -11,7 +11,11 @@ import { queue_micro_task } from './task.js';
  * @param {TemplateNode | null} end
  */
 export function assign_nodes(start, end) {
-	/** @type {Effect} */ (current_effect).nodes ??= { start, end };
+	var effect = /** @type {Effect} */ (current_effect);
+	if (effect.nodes_start === null) {
+		effect.nodes_start = start;
+		effect.nodes_end = end;
+	}
 }
 
 /**
@@ -255,7 +259,7 @@ export function comment() {
  */
 export function append(anchor, dom) {
 	if (hydrating) {
-		/** @type {Effect & { nodes: EffectNodes }} */ (current_effect).nodes.end = hydrate_node;
+		/** @type {Effect} */ (current_effect).nodes_end = hydrate_node;
 		hydrate_next();
 		return;
 	}
diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js
index cd9a9f9171..e0d97beaf2 100644
--- a/packages/svelte/src/internal/client/reactivity/effects.js
+++ b/packages/svelte/src/internal/client/reactivity/effects.js
@@ -95,7 +95,8 @@ function create_effect(type, fn, sync, push = true) {
 	var effect = {
 		ctx: current_component_context,
 		deps: null,
-		nodes: null,
+		nodes_start: null,
+		nodes_end: null,
 		f: type | DIRTY,
 		first: null,
 		fn,
@@ -135,7 +136,7 @@ function create_effect(type, fn, sync, push = true) {
 		sync &&
 		effect.deps === null &&
 		effect.first === null &&
-		effect.nodes === null &&
+		effect.nodes_start === null &&
 		effect.teardown === null;
 
 	if (!inert && !is_root && push) {
@@ -355,10 +356,10 @@ export function execute_effect_teardown(effect) {
 export function destroy_effect(effect, remove_dom = true) {
 	var removed = false;
 
-	if ((remove_dom || (effect.f & HEAD_EFFECT) !== 0) && effect.nodes !== null) {
+	if ((remove_dom || (effect.f & HEAD_EFFECT) !== 0) && effect.nodes_start !== null) {
 		/** @type {TemplateNode | null} */
-		var node = effect.nodes.start;
-		var end = effect.nodes.end;
+		var node = effect.nodes_start;
+		var end = effect.nodes_end;
 
 		while (node !== null) {
 			/** @type {TemplateNode | null} */
@@ -400,7 +401,8 @@ export function destroy_effect(effect, remove_dom = true) {
 		effect.deps =
 		effect.parent =
 		effect.fn =
-		effect.nodes =
+		effect.nodes_start =
+		effect.nodes_end =
 			null;
 }
 
diff --git a/packages/svelte/src/internal/client/reactivity/types.d.ts b/packages/svelte/src/internal/client/reactivity/types.d.ts
index 1e347c011f..0e5437709a 100644
--- a/packages/svelte/src/internal/client/reactivity/types.d.ts
+++ b/packages/svelte/src/internal/client/reactivity/types.d.ts
@@ -34,11 +34,6 @@ export interface Derived<V = unknown> extends Value<V>, Reaction {
 	deriveds: null | Derived[];
 }
 
-export interface EffectNodes {
-	start: TemplateNode;
-	end: null | TemplateNode;
-}
-
 export interface Effect extends Reaction {
 	parent: Effect | null;
 	/**
@@ -47,7 +42,8 @@ export interface Effect extends Reaction {
 	 * block is reconciled. In the case of a single text/element node,
 	 * `start` and `end` will be the same.
 	 */
-	nodes: null | EffectNodes;
+	nodes_start: null | TemplateNode;
+	nodes_end: null | TemplateNode;
 	/** The associated component context */
 	ctx: null | ComponentContext;
 	/** The effect function */
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index 044c09e310..4afd10a7dc 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -1,4 +1,4 @@
-/** @import { ComponentContext, Effect, EffectNodes, TemplateNode } from '#client' */
+/** @import { ComponentContext, Effect, TemplateNode } from '#client' */
 /** @import { Component, ComponentType, SvelteComponent } from '../../index.js' */
 import { DEV } from 'esm-env';
 import {
@@ -246,7 +246,7 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro
 			should_intro = true;
 
 			if (hydrating) {
-				/** @type {Effect & { nodes: EffectNodes }} */ (current_effect).nodes.end = hydrate_node;
+				/** @type {Effect} */ (current_effect).nodes_end = hydrate_node;
 			}
 
 			if (context) {
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 4e2a2ee031..b1a52b0878 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -497,7 +497,7 @@ function flush_queued_effects(effects) {
 			// don't know if we need to keep them until they are executed. Doing the check
 			// here (rather than in `update_effect`) allows us to skip the work for
 			// immediate effects.
-			if (effect.deps === null && effect.first === null && effect.nodes === null) {
+			if (effect.deps === null && effect.first === null && effect.nodes_start === null) {
 				if (effect.teardown === null) {
 					// remove this effect from the graph
 					unlink_effect(effect);

From cb75b5c9667c65b96013b833640325d886eec605 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 17 Aug 2024 10:55:09 -0400
Subject: [PATCH 143/196] chore: minor tidy up (#12889)

---
 .../3-transform/client/visitors/shared/fragment.js   | 12 +++++-------
 1 file changed, 5 insertions(+), 7 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 df9075713b..b7129037e2 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
@@ -36,24 +36,23 @@ export function process_children(nodes, expression, is_element, { visit, state }
 			}
 		}
 
-		const text_id = get_node_id(expression(true), state, 'text');
+		const id = get_node_id(expression(true), state, 'text');
 
 		state.template.push(' ');
 
 		const { has_state, has_call, value } = build_template_literal(sequence, visit, state);
 
-		const update = b.stmt(b.call('$.set_text', text_id, value));
+		const update = b.stmt(b.call('$.set_text', id, value));
 
 		if (has_call && !within_bound_contenteditable) {
 			state.init.push(build_update(update));
 		} else if (has_state && !within_bound_contenteditable) {
 			state.update.push(update);
 		} else {
-			state.init.push(b.stmt(b.assignment('=', b.member(text_id, b.id('nodeValue')), value)));
+			state.init.push(b.stmt(b.assignment('=', b.member(id, b.id('nodeValue')), value)));
 		}
 
-		expression = (is_text) =>
-			is_text ? b.call('$.sibling', text_id, b.true) : b.call('$.sibling', text_id);
+		expression = (is_text) => b.call('$.sibling', id, is_text && b.true);
 	}
 
 	for (let i = 0; i < nodes.length; i += 1) {
@@ -87,8 +86,7 @@ export function process_children(nodes, expression, is_element, { visit, state }
 						node.type === 'RegularElement' ? node.name : 'node'
 					);
 
-					expression = (is_text) =>
-						is_text ? b.call('$.sibling', id, b.true) : b.call('$.sibling', id);
+					expression = (is_text) => b.call('$.sibling', id, is_text && b.true);
 
 					visit(node, {
 						...state,

From 94ed09628dba6038744c88bd1d1d932a85093479 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sat, 17 Aug 2024 16:08:44 +0100
Subject: [PATCH 144/196] fix: correctly ensure prop bindings are reactive when
 bound (#12879)

* fix: correctly ensure prop bindings are reactive when bound

* oops

* Apply suggestions from code review

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

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/eighty-days-wave.md                |  5 +++++
 .../phases/3-transform/client/utils.js        |  2 +-
 .../samples/binding-value-prop/Field.svelte   |  5 +++++
 .../samples/binding-value-prop/_config.js     | 22 +++++++++++++++++++
 .../samples/binding-value-prop/main.svelte    |  9 ++++++++
 5 files changed, 42 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/eighty-days-wave.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/binding-value-prop/Field.svelte
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/binding-value-prop/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/binding-value-prop/main.svelte

diff --git a/.changeset/eighty-days-wave.md b/.changeset/eighty-days-wave.md
new file mode 100644
index 0000000000..86da3748e8
--- /dev/null
+++ b/.changeset/eighty-days-wave.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly ensure prop bindings are reactive when bound
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 35283aed72..7d662629da 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/utils.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/utils.js
@@ -186,7 +186,7 @@ export function get_prop_source(binding, state, name, initial) {
 		state.analysis.accessors ||
 		(state.analysis.immutable
 			? binding.reassigned || (state.analysis.runes && binding.mutated)
-			: binding.mutated)
+			: binding.updated)
 	) {
 		flags |= PROPS_IS_UPDATED;
 	}
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-value-prop/Field.svelte b/packages/svelte/tests/runtime-legacy/samples/binding-value-prop/Field.svelte
new file mode 100644
index 0000000000..b3bfeab84f
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-value-prop/Field.svelte
@@ -0,0 +1,5 @@
+<script>
+	export let value;
+</script>
+
+<input type="text" bind:value />
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-value-prop/_config.js b/packages/svelte/tests/runtime-legacy/samples/binding-value-prop/_config.js
new file mode 100644
index 0000000000..11ff60ca1e
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-value-prop/_config.js
@@ -0,0 +1,22 @@
+import { flushSync } from 'svelte';
+import { ok, test } from '../../test';
+
+export default test({
+	accessors: false,
+	html: `<input type="text">\naaa`,
+	ssrHtml: `<input type="text" value="aaa">\naaa`,
+
+	test({ assert, target }) {
+		const input = target.querySelector('input');
+		ok(input);
+
+		const event = new window.Event('input');
+
+		input.value = 'aaa2';
+		input.dispatchEvent(event);
+
+		flushSync();
+
+		assert.htmlEqual(target.innerHTML, `<input type="text">\naaa2`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/binding-value-prop/main.svelte b/packages/svelte/tests/runtime-legacy/samples/binding-value-prop/main.svelte
new file mode 100644
index 0000000000..4352cb65cd
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/binding-value-prop/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	import Field from './Field.svelte';
+	import { writable } from 'svelte/store';
+
+	const value = writable('aaa');
+
+</script>
+
+<Field bind:value={$value} /> {$value}

From eaee7d35817c8f82f6f71c2fa3d685d63ca3d8e4 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sat, 17 Aug 2024 16:13:08 +0100
Subject: [PATCH 145/196] Version Packages (next) (#12887)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  5 +++++
 packages/svelte/CHANGELOG.md   | 14 ++++++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 55dc839f35..6981142b15 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -151,7 +151,9 @@
     "eight-pianos-raise",
     "eight-steaks-shout",
     "eighty-bikes-camp",
+    "eighty-bugs-fetch",
     "eighty-days-cheat",
+    "eighty-days-wave",
     "eighty-lizards-notice",
     "eleven-avocados-walk",
     "eleven-beers-yell",
@@ -278,6 +280,7 @@
     "happy-dogs-jump",
     "happy-lobsters-lick",
     "happy-moles-live",
+    "happy-planets-rest",
     "happy-suits-film",
     "healthy-ants-film",
     "healthy-dancers-play",
@@ -303,6 +306,7 @@
     "honest-phones-flash",
     "hot-cooks-repair",
     "hot-jobs-tap",
+    "hot-kangaroos-invite",
     "hot-rivers-punch",
     "hot-sloths-clap",
     "hot-tips-appear",
@@ -635,6 +639,7 @@
     "smart-fans-crash",
     "smart-grapes-mate",
     "smart-parents-swim",
+    "smart-poets-care",
     "smart-spiders-fetch",
     "smart-turkeys-tell",
     "smart-zebras-pay",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 548c858f13..53c46494fa 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,19 @@
 # svelte
 
+## 5.0.0-next.224
+
+### Patch Changes
+
+- chore: inline start and end node properties into effect ([#12878](https://github.com/sveltejs/svelte/pull/12878))
+
+- fix: correctly ensure prop bindings are reactive when bound ([#12879](https://github.com/sveltejs/svelte/pull/12879))
+
+- fix: remove sapper bindings ([#12875](https://github.com/sveltejs/svelte/pull/12875))
+
+- chore: refactor internal signal dependency heuristic ([#12881](https://github.com/sveltejs/svelte/pull/12881))
+
+- fix: allow store as initial value for props in ssr ([#12885](https://github.com/sveltejs/svelte/pull/12885))
+
 ## 5.0.0-next.223
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 82f6652bdf..7fc4812a09 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.223",
+  "version": "5.0.0-next.224",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index f7ec5e4d70..6175f52086 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.223';
+export const VERSION = '5.0.0-next.224';
 export const PUBLIC_VERSION = '5';

From 47e8ad76195644a765debf1e2e6b7c8f2d14be2e Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sat, 17 Aug 2024 11:23:54 -0400
Subject: [PATCH 146/196] chore: convert member expression property strings to
 identifiers (#12890)

* chore: convert member expression property strings to identifiers

* oops

* tweak

* while we're here
---
 .../3-transform/client/transform-client.js    | 20 ++++---------
 .../3-transform/client/visitors/Fragment.js   |  2 +-
 .../client/visitors/LetDirective.js           |  4 +--
 .../client/visitors/MemberExpression.js       |  4 +--
 .../client/visitors/RegularElement.js         | 29 +++++++++----------
 .../client/visitors/SlotElement.js            |  2 +-
 .../client/visitors/TitleElement.js           |  2 +-
 .../client/visitors/shared/component.js       |  2 +-
 .../client/visitors/shared/events.js          |  8 ++---
 .../client/visitors/shared/fragment.js        |  2 +-
 .../3-transform/server/transform-server.js    |  8 ++---
 .../3-transform/server/visitors/EachBlock.js  |  4 +--
 .../server/visitors/shared/element.js         |  7 ++---
 packages/svelte/src/compiler/utils/ast.js     |  2 +-
 .../svelte/src/compiler/utils/builders.js     |  6 +++-
 15 files changed, 41 insertions(+), 61 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index ca6763477e..f9ae37ba40 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -473,12 +473,8 @@ export function client_component(analysis, options) {
 		const incoming = b.member(b.id('module.default'), HMR, true);
 
 		const accept_fn_body = [
-			b.stmt(
-				b.assignment('=', b.member(incoming, b.id('source')), b.member(existing, b.id('source')))
-			),
-			b.stmt(
-				b.call('$.set', b.member(existing, b.id('source')), b.member(incoming, b.id('original')))
-			)
+			b.stmt(b.assignment('=', b.member(incoming, 'source'), b.member(existing, 'source'))),
+			b.stmt(b.call('$.set', b.member(existing, 'source'), b.member(incoming, 'original')))
 		];
 
 		if (analysis.css.hash) {
@@ -488,7 +484,7 @@ export function client_component(analysis, options) {
 					b.call(
 						b.member(
 							b.call('document.querySelector', b.literal('#' + analysis.css.hash)),
-							b.id('remove'),
+							'remove',
 							false,
 							true
 						)
@@ -498,9 +494,7 @@ export function client_component(analysis, options) {
 		}
 
 		const hmr = b.block([
-			b.stmt(
-				b.assignment('=', id, b.call('$.hmr', id, b.thunk(b.member(existing, b.id('source')))))
-			),
+			b.stmt(b.assignment('=', id, b.call('$.hmr', id, b.thunk(b.member(existing, 'source'))))),
 
 			b.stmt(b.call('import.meta.hot.accept', b.arrow([b.id('module')], b.block(accept_fn_body))))
 		]);
@@ -515,11 +509,7 @@ export function client_component(analysis, options) {
 			// add `App[$.FILENAME] = 'App.svelte'` so that we can print useful messages later
 			body.unshift(
 				b.stmt(
-					b.assignment(
-						'=',
-						b.member(b.id(analysis.name), b.id('$.FILENAME'), true),
-						b.literal(filename)
-					)
+					b.assignment('=', b.member(b.id(analysis.name), '$.FILENAME', true), b.literal(filename))
 				)
 			);
 		}
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 a20e2d56b8..7f5d1aa19d 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
@@ -96,7 +96,7 @@ export function Fragment(node, context) {
 			call = b.call(
 				'$.add_locations',
 				call,
-				b.member(b.id(context.state.analysis.name), b.id('$.FILENAME'), true),
+				b.member(b.id(context.state.analysis.name), '$.FILENAME', true),
 				build_locations(state.locations)
 			);
 		}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js
index c455ea3219..d2223e77ae 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/LetDirective.js
@@ -33,7 +33,7 @@ export function LetDirective(node, context) {
 									b.object_pattern(node.expression.properties)
 								: // @ts-expect-error types don't match, but it can't contain spread elements and the structure is otherwise fine
 									b.array_pattern(node.expression.elements),
-							b.member(b.id('$$slotProps'), b.id(node.name))
+							b.member(b.id('$$slotProps'), node.name)
 						),
 						b.return(b.object(bindings.map((binding) => b.init(binding.node.name, binding.node))))
 					])
@@ -48,7 +48,7 @@ export function LetDirective(node, context) {
 
 		return b.const(
 			name,
-			create_derived(context.state, b.thunk(b.member(b.id('$$slotProps'), b.id(node.name))))
+			create_derived(context.state, b.thunk(b.member(b.id('$$slotProps'), node.name)))
 		);
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js
index bfa5b53e6f..801841dfb6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/MemberExpression.js
@@ -11,7 +11,7 @@ export function MemberExpression(node, context) {
 	if (node.property.type === 'PrivateIdentifier') {
 		const field = context.state.private_state.get(node.property.name);
 		if (field) {
-			return context.state.in_constructor ? b.member(node, b.id('v')) : b.call('$.get', node);
+			return context.state.in_constructor ? b.member(node, 'v') : b.call('$.get', node);
 		}
 	} else if (node.object.type === 'ThisExpression') {
 		// rewrite `this.foo` as `this.#foo.v` inside a constructor
@@ -19,7 +19,7 @@ export function MemberExpression(node, context) {
 			const field = context.state.public_state.get(node.property.name);
 
 			if (field && context.state.in_constructor) {
-				return b.member(b.member(b.this, field.id), b.id('v'));
+				return b.member(b.member(b.this, field.id), 'v');
 			}
 		}
 	}
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 0cf8640fef..8c19bb4d66 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
@@ -322,9 +322,7 @@ export function RegularElement(node, context) {
 
 	if (text_content && !text_content.has_state) {
 		child_state.init.push(
-			b.stmt(
-				b.assignment('=', b.member(context.state.node, b.id('textContent')), text_content.value)
-			)
+			b.stmt(b.assignment('=', b.member(context.state.node, 'textContent'), text_content.value))
 		);
 	} else {
 		/** @type {Expression} */
@@ -339,7 +337,7 @@ export function RegularElement(node, context) {
 		if (node.name === 'template') {
 			needs_reset = true;
 			child_state.init.push(b.stmt(b.call('$.hydrate_template', arg)));
-			arg = b.member(arg, b.id('content'));
+			arg = b.member(arg, 'content');
 		}
 
 		process_children(trimmed, () => b.call('$.child', arg), true, {
@@ -369,9 +367,8 @@ export function RegularElement(node, context) {
 	if (has_direction_attribute) {
 		// This fixes an issue with Chromium where updates to text content within an element
 		// does not update the direction when set to auto. If we just re-assign the dir, this fixes it.
-		context.state.update.push(
-			b.stmt(b.assignment('=', b.member(node_id, b.id('dir')), b.member(node_id, b.id('dir'))))
-		);
+		const dir = b.member(node_id, 'dir');
+		context.state.update.push(b.stmt(b.assignment('=', dir, dir)));
 	}
 
 	if (child_locations.length > 0) {
@@ -494,16 +491,16 @@ function build_element_spread_attributes(
 
 	const preserve_attribute_case =
 		element.metadata.svg || element.metadata.mathml || is_custom_element_node(element);
-	const id = context.state.scope.generate('attributes');
+	const id = b.id(context.state.scope.generate('attributes'));
 
 	const update = b.stmt(
 		b.assignment(
 			'=',
-			b.id(id),
+			id,
 			b.call(
 				'$.set_attributes',
 				element_id,
-				b.id(id),
+				id,
 				b.object(values),
 				context.state.analysis.css.hash !== '' && b.literal(context.state.analysis.css.hash),
 				preserve_attribute_case && b.true,
@@ -523,17 +520,17 @@ function build_element_spread_attributes(
 
 	if (needs_select_handling) {
 		context.state.init.push(
-			b.stmt(b.call('$.init_select', element_id, b.thunk(b.member(b.id(id), b.id('value')))))
+			b.stmt(b.call('$.init_select', element_id, b.thunk(b.member(id, 'value'))))
 		);
 		context.state.update.push(
 			b.if(
-				b.binary('in', b.literal('value'), b.id(id)),
+				b.binary('in', b.literal('value'), id),
 				b.block([
 					// This ensures a one-way street to the DOM in case it's <select {value}>
 					// and not <select bind:value>. We need it in addition to $.init_select
 					// because the select value is not reflected as an attribute, so the
 					// mutation observer wouldn't notice.
-					b.stmt(b.call('$.select_option', element_id, b.member(b.id(id), b.id('value'))))
+					b.stmt(b.call('$.select_option', element_id, b.member(id, 'value')))
 				])
 			)
 		);
@@ -596,7 +593,7 @@ function build_element_attribute_update_assignment(element, node_id, attribute,
 	} else if (name === 'checked') {
 		update = b.stmt(b.call('$.set_checked', node_id, value));
 	} else if (is_dom_property(name)) {
-		update = b.stmt(b.assignment('=', b.member(node_id, b.id(name)), value));
+		update = b.stmt(b.assignment('=', b.member(node_id, name), value));
 	} else {
 		const callee = name.startsWith('xlink') ? '$.set_xlink_attribute' : '$.set_attribute';
 		update = b.stmt(
@@ -666,9 +663,9 @@ function build_element_special_value_attribute(element, node_id, attribute, cont
 
 	const inner_assignment = b.assignment(
 		'=',
-		b.member(node_id, b.id('value')),
+		b.member(node_id, 'value'),
 		b.conditional(
-			b.binary('==', b.literal(null), b.assignment('=', b.member(node_id, b.id('__value')), value)),
+			b.binary('==', b.literal(null), b.assignment('=', b.member(node_id, '__value'), value)),
 			b.literal(''), // render null/undefined values as empty string to support placeholder options
 			value
 		)
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
index 80e6a3635d..8dfd48bc11 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/SlotElement.js
@@ -60,7 +60,7 @@ export function SlotElement(node, context) {
 
 	const expression = is_default
 		? b.call('$.default_slot', b.id('$$props'))
-		: b.member(b.member(b.id('$$props'), b.id('$$slots')), name, true, true);
+		: b.member(b.member(b.id('$$props'), '$$slots'), name, true, true);
 
 	const slot = b.call('$.slot', context.state.node, expression, props_expression, fallback);
 	context.state.init.push(b.stmt(slot));
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 b10eb34ad9..db45405330 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
@@ -14,7 +14,7 @@ export function TitleElement(node, context) {
 		context.state
 	);
 
-	const statement = b.stmt(b.assignment('=', b.member(b.id('$.document'), b.id('title')), value));
+	const statement = b.stmt(b.assignment('=', b.id('$.document.title'), value));
 
 	if (has_state) {
 		context.state.update.push(statement);
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 7c43f68a66..43cc7b029f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -372,7 +372,7 @@ export function build_component(node, component_name, context, anchor = context.
 
 		statements.push(
 			b.stmt(b.call('$.css_props', anchor, b.thunk(b.object(custom_css_props)))),
-			b.stmt(fn(b.member(anchor, b.id('lastChild')))),
+			b.stmt(fn(b.member(anchor, 'lastChild'))),
 			b.stmt(b.call('$.reset', anchor))
 		);
 	} else {
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
index 56cc2e345c..24b4a9c218 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/events.js
@@ -54,11 +54,7 @@ export function visit_event_attribute(node, context) {
 
 		context.state.init.push(
 			b.stmt(
-				b.assignment(
-					'=',
-					b.member(context.state.node, b.id('__' + event_name)),
-					delegated_assignment
-				)
+				b.assignment('=', b.member(context.state.node, '__' + event_name), delegated_assignment)
 			)
 		);
 	} else {
@@ -143,7 +139,7 @@ export function build_event_handler(node, metadata, context) {
 	}
 
 	// wrap the handler in a function, so the expression is re-evaluated for each event
-	let call = b.call(b.member(handler, b.id('apply'), false, true), b.this, b.id('$$args'));
+	let call = b.call(b.member(handler, 'apply', false, true), b.this, b.id('$$args'));
 
 	if (dev) {
 		const loc = locator(/** @type {number} */ (node.start));
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 b7129037e2..684d19bb3f 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
@@ -49,7 +49,7 @@ export function process_children(nodes, expression, 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, b.id('nodeValue')), value)));
+			state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
 		}
 
 		expression = (is_text) => b.call('$.sibling', id, is_text && b.true);
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
index 0c600b3cbb..49095071c2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/transform-server.js
@@ -321,7 +321,7 @@ export function server_component(analysis, options) {
 									b.id(analysis.name),
 									b.object([
 										b.init('props', b.id('$$props')),
-										b.init('context', b.member(b.id('$$opts'), b.id('context'), false, true))
+										b.init('context', b.member(b.id('$$opts'), 'context', false, true))
 									])
 								)
 							)
@@ -360,11 +360,7 @@ export function server_component(analysis, options) {
 		// add `App[$.FILENAME] = 'App.svelte'` so that we can print useful messages later
 		body.unshift(
 			b.stmt(
-				b.assignment(
-					'=',
-					b.member(b.id(analysis.name), b.id('$.FILENAME'), true),
-					b.literal(filename)
-				)
+				b.assignment('=', b.member(b.id(analysis.name), '$.FILENAME', true), b.literal(filename))
 			)
 		);
 	}
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js
index 6beee740af..dba37c1730 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/EachBlock.js
@@ -35,7 +35,7 @@ export function EachBlock(node, context) {
 
 	const for_loop = b.for(
 		b.let(index, b.literal(0)),
-		b.binary('<', index, b.member(array_id, b.id('length'))),
+		b.binary('<', index, b.member(array_id, 'length')),
 		b.update('++', index, false),
 		b.block(each)
 	);
@@ -51,7 +51,7 @@ export function EachBlock(node, context) {
 
 		state.template.push(
 			b.if(
-				b.binary('!==', b.member(array_id, b.id('length')), b.literal(0)),
+				b.binary('!==', b.member(array_id, 'length'), b.literal(0)),
 				b.block([open, for_loop]),
 				fallback
 			),
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
index 2d2d67991d..ea123bf643 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/shared/element.js
@@ -138,7 +138,7 @@ export function build_element_attributes(node, context) {
 							parent: attribute,
 							expression: is_checkbox
 								? b.call(
-										b.member(attribute.expression, b.id('includes')),
+										b.member(attribute.expression, 'includes'),
 										build_attribute_value(value_attribute.value, context)
 									)
 								: b.binary(
@@ -389,10 +389,7 @@ function build_class_directives(class_directives, class_attribute) {
 		end: -1,
 		parent: class_attribute,
 		expression: b.call(
-			b.member(
-				b.call(b.member(b.array(expressions), b.id('filter')), b.id('Boolean')),
-				b.id('join')
-			),
+			b.member(b.call(b.member(b.array(expressions), 'filter'), b.id('Boolean')), b.id('join')),
 			b.literal(' ')
 		),
 		metadata: {
diff --git a/packages/svelte/src/compiler/utils/ast.js b/packages/svelte/src/compiler/utils/ast.js
index 47bbdb945f..273701a0d1 100644
--- a/packages/svelte/src/compiler/utils/ast.js
+++ b/packages/svelte/src/compiler/utils/ast.js
@@ -332,7 +332,7 @@ function _extract_paths(assignments = [], param, expression, update_expression,
 					if (element.type === 'RestElement') {
 						/** @type {DestructuredAssignment['expression']} */
 						const rest_expression = (object) =>
-							b.call(b.member(expression(object), b.id('slice')), b.literal(i));
+							b.call(b.member(expression(object), 'slice'), b.literal(i));
 						if (element.argument.type === 'Identifier') {
 							assignments.push({
 								node: element.argument,
diff --git a/packages/svelte/src/compiler/utils/builders.js b/packages/svelte/src/compiler/utils/builders.js
index de087ffc8c..b31ff0c3a8 100644
--- a/packages/svelte/src/compiler/utils/builders.js
+++ b/packages/svelte/src/compiler/utils/builders.js
@@ -286,12 +286,16 @@ export function literal(value) {
 
 /**
  * @param {ESTree.Expression | ESTree.Super} object
- * @param {ESTree.Expression | ESTree.PrivateIdentifier} property
+ * @param {string | ESTree.Expression | ESTree.PrivateIdentifier} property
  * @param {boolean} computed
  * @param {boolean} optional
  * @returns {ESTree.MemberExpression}
  */
 export function member(object, property, computed = false, optional = false) {
+	if (typeof property === 'string') {
+		property = id(property);
+	}
+
 	return { type: 'MemberExpression', object, property, computed, optional };
 }
 

From 7eabce8c960b04425a4eafcb310e19667d89ee46 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sun, 18 Aug 2024 17:45:30 +0100
Subject: [PATCH 147/196] chore: improve the performance of set_text for single
 expressions (#12893)

---
 .changeset/hip-jeans-provide.md                              | 5 +++++
 .../phases/3-transform/client/visitors/shared/utils.js       | 4 ++++
 packages/svelte/src/internal/client/render.js                | 3 ++-
 .../tests/migrate/samples/each-block-const/output.svelte     | 2 +-
 .../snapshot/samples/purity/_expected/client/index.svelte.js | 4 ++--
 5 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/hip-jeans-provide.md

diff --git a/.changeset/hip-jeans-provide.md b/.changeset/hip-jeans-provide.md
new file mode 100644
index 0000000000..1bf65e2ed2
--- /dev/null
+++ b/.changeset/hip-jeans-provide.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: improve the performance of set_text for single expressions
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 b11c2ed224..bd43075e6f 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
@@ -64,6 +64,10 @@ export function build_template_literal(values, visit, state) {
 					)
 				);
 				expressions.push(b.call('$.get', id));
+			} else if (values.length === 1) {
+				// If we have a single expression, then pass that in directly to possibly avoid doing
+				// extra work in the template_effect (instead we do the work in set_text).
+				return { value: visit(node.expression, state), has_state, has_call };
 			} else {
 				expressions.push(b.logical('??', visit(node.expression, state), b.literal('')));
 			}
diff --git a/packages/svelte/src/internal/client/render.js b/packages/svelte/src/internal/client/render.js
index 4afd10a7dc..ae8cbf7466 100644
--- a/packages/svelte/src/internal/client/render.js
+++ b/packages/svelte/src/internal/client/render.js
@@ -51,7 +51,8 @@ export function set_text(text, value) {
 	// @ts-expect-error
 	if (value !== (text.__t ??= text.nodeValue)) {
 		// @ts-expect-error
-		text.nodeValue = text.__t = value;
+		text.__t = value;
+		text.nodeValue = value == null ? '' : value + '';
 	}
 }
 
diff --git a/packages/svelte/tests/migrate/samples/each-block-const/output.svelte b/packages/svelte/tests/migrate/samples/each-block-const/output.svelte
index d2057d6f19..4cd6ee6f01 100644
--- a/packages/svelte/tests/migrate/samples/each-block-const/output.svelte
+++ b/packages/svelte/tests/migrate/samples/each-block-const/output.svelte
@@ -2,4 +2,4 @@
 	const { foo } = x();
 </script>
 
-{#each foo as f}{/each}
+{#each foo as f}{/each}
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
index ace8c43aeb..8d865bdd49 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
@@ -11,11 +11,11 @@ export default function Purity($$anchor) {
 	var fragment = root();
 	var p = $.first_child(fragment);
 
-	p.textContent = `${Math.max(min, Math.min(max, number)) ?? ""}`;
+	p.textContent = Math.max(min, Math.min(max, number));
 
 	var p_1 = $.sibling($.sibling(p, true));
 
-	p_1.textContent = `${location.href ?? ""}`;
+	p_1.textContent = location.href;
 
 	var node = $.sibling($.sibling(p_1, true));
 

From b41300d58a0a42181eb9c4e73334074c331c590e Mon Sep 17 00:00:00 2001
From: TOMIKAWA Sotaro <15074382+ssssota@users.noreply.github.com>
Date: Mon, 19 Aug 2024 01:53:49 +0900
Subject: [PATCH 148/196] fix: improve createRawSnippet types with cleanup type
 (#12894)

* fix: improve createRawSnippet types

Add cleanup type to return value of setup function

* changeset

---------

Co-authored-by: Rich Harris <hello@rich-harris.dev>
---
 .changeset/nasty-penguins-pump.md                         | 5 +++++
 packages/svelte/src/internal/client/dom/blocks/snippet.js | 2 +-
 packages/svelte/src/internal/server/blocks/snippet.js     | 2 +-
 packages/svelte/types/index.d.ts                          | 2 +-
 4 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/nasty-penguins-pump.md

diff --git a/.changeset/nasty-penguins-pump.md b/.changeset/nasty-penguins-pump.md
new file mode 100644
index 0000000000..c7bdf1ddc6
--- /dev/null
+++ b/.changeset/nasty-penguins-pump.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: add cleanup function signature to `createRawSnippet`
diff --git a/packages/svelte/src/internal/client/dom/blocks/snippet.js b/packages/svelte/src/internal/client/dom/blocks/snippet.js
index 32a9fb6918..460a5f3567 100644
--- a/packages/svelte/src/internal/client/dom/blocks/snippet.js
+++ b/packages/svelte/src/internal/client/dom/blocks/snippet.js
@@ -72,7 +72,7 @@ export function wrap_snippet(component, fn) {
  * @template {unknown[]} Params
  * @param {(...params: Getters<Params>) => {
  *   render: () => string
- *   setup?: (element: Element) => void
+ *   setup?: (element: Element) => void | (() => void)
  * }} fn
  * @returns {Snippet<Params>}
  */
diff --git a/packages/svelte/src/internal/server/blocks/snippet.js b/packages/svelte/src/internal/server/blocks/snippet.js
index d9469be511..3c5e860790 100644
--- a/packages/svelte/src/internal/server/blocks/snippet.js
+++ b/packages/svelte/src/internal/server/blocks/snippet.js
@@ -7,7 +7,7 @@
  * @template {unknown[]} Params
  * @param {(...params: Getters<Params>) => {
  *   render: () => string
- *   setup?: (element: Element) => void
+ *   setup?: (element: Element) => void | (() => void)
  * }} fn
  * @returns {Snippet<Params>}
  */
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index b7412c46e5..36f7a97229 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -378,7 +378,7 @@ declare module 'svelte' {
 	 * */
 	export function createRawSnippet<Params extends unknown[]>(fn: (...params: Getters<Params>) => {
 		render: () => string;
-		setup?: (element: Element) => void;
+		setup?: (element: Element) => void | (() => void);
 	}): Snippet<Params>;
 	/** Anything except a function */
 	type NotFunction<T> = T extends Function ? never : T;

From 1f99935b992f0db255fd8d93138af00398e4b56f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Sun, 18 Aug 2024 12:54:02 -0400
Subject: [PATCH 149/196] feat: more efficient checking for missing SSR text
 node (#12891)

* feat: more efficient checking for missing SSR text node

* update tests
---
 .changeset/orange-laws-drop.md                         |  5 +++++
 .../3-transform/client/visitors/shared/fragment.js     |  7 +++++--
 .../_expected/client/index.svelte.js                   |  2 +-
 .../_expected/client/main.svelte.js                    | 10 +++++-----
 .../samples/purity/_expected/client/index.svelte.js    |  4 ++--
 .../_expected/client/index.svelte.js                   |  4 ++--
 6 files changed, 20 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/orange-laws-drop.md

diff --git a/.changeset/orange-laws-drop.md b/.changeset/orange-laws-drop.md
new file mode 100644
index 0000000000..99a594c9e0
--- /dev/null
+++ b/.changeset/orange-laws-drop.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: more efficient checking for missing SSR text node
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 684d19bb3f..c5b7c29216 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
@@ -30,13 +30,16 @@ export function process_children(nodes, expression, is_element, { visit, state }
 
 			if (node.type === 'Text') {
 				let prev = expression;
-				expression = () => b.call('$.sibling', prev(true));
+				expression = () => b.call('$.sibling', prev(false));
 				state.template.push(node.raw);
 				return;
 			}
 		}
 
-		const id = get_node_id(expression(true), state, 'text');
+		// 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 needs_hydration_check = sequence.length === 1;
+		const id = get_node_id(expression(needs_hydration_check), state, 'text');
 
 		state.template.push(' ');
 
diff --git a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
index 416af28608..c6a894ea71 100644
--- a/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/bind-component-snippet/_expected/client/index.svelte.js
@@ -27,7 +27,7 @@ export default function Bind_component_snippet($$anchor) {
 		}
 	});
 
-	var text_1 = $.sibling(node, true);
+	var text_1 = $.sibling(node);
 
 	$.template_effect(() => $.set_text(text_1, ` value: ${$.get(value) ?? ""}`));
 	$.append($$anchor, fragment);
diff --git a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
index aa4d22d99a..ef070bf288 100644
--- a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
@@ -9,17 +9,17 @@ export default function Main($$anchor) {
 	let y = () => 'test';
 	var fragment = root();
 	var div = $.first_child(fragment);
-	var svg = $.sibling($.sibling(div, true));
-	var custom_element = $.sibling($.sibling(svg, true));
-	var div_1 = $.sibling($.sibling(custom_element, true));
+	var svg = $.sibling($.sibling(div));
+	var custom_element = $.sibling($.sibling(svg));
+	var div_1 = $.sibling($.sibling(custom_element));
 
 	$.template_effect(() => $.set_attribute(div_1, "foobar", y()));
 
-	var svg_1 = $.sibling($.sibling(div_1, true));
+	var svg_1 = $.sibling($.sibling(div_1));
 
 	$.template_effect(() => $.set_attribute(svg_1, "viewBox", y()));
 
-	var custom_element_1 = $.sibling($.sibling(svg_1, true));
+	var custom_element_1 = $.sibling($.sibling(svg_1));
 
 	$.template_effect(() => $.set_custom_element_data(custom_element_1, "fooBar", y()));
 
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
index 8d865bdd49..8a2daa877f 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
@@ -13,11 +13,11 @@ export default function Purity($$anchor) {
 
 	p.textContent = Math.max(min, Math.min(max, number));
 
-	var p_1 = $.sibling($.sibling(p, true));
+	var p_1 = $.sibling($.sibling(p));
 
 	p_1.textContent = location.href;
 
-	var node = $.sibling($.sibling(p_1, true));
+	var node = $.sibling($.sibling(p_1));
 
 	Child(node, { prop: encodeURIComponent(value) });
 	$.append($$anchor, fragment);
diff --git a/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
index 0f2d6f4200..8f12fd7913 100644
--- a/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
@@ -18,11 +18,11 @@ export default function State_proxy_literal($$anchor) {
 
 	$.remove_input_defaults(input);
 
-	var input_1 = $.sibling($.sibling(input, true));
+	var input_1 = $.sibling($.sibling(input));
 
 	$.remove_input_defaults(input_1);
 
-	var button = $.sibling($.sibling(input_1, true));
+	var button = $.sibling($.sibling(input_1));
 
 	button.__click = [reset, str, tpl];
 	$.bind_value(input, () => $.get(str), ($$value) => $.set(str, $$value));

From aa5c4421cf48cfbd261d99dddfc8ae9312871419 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Sun, 18 Aug 2024 18:15:45 +0100
Subject: [PATCH 150/196] fix: ensure nullish expressions render empty text
 (#12898)

---
 .changeset/unlucky-points-clap.md                         | 5 +++++
 .../phases/3-transform/client/visitors/shared/utils.js    | 8 +++++++-
 .../samples/text-multiple-nullish-expression/_config.js   | 5 +++++
 .../samples/text-multiple-nullish-expression/main.svelte  | 4 ++++
 4 files changed, 21 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/unlucky-points-clap.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/main.svelte

diff --git a/.changeset/unlucky-points-clap.md b/.changeset/unlucky-points-clap.md
new file mode 100644
index 0000000000..c53d5cbb80
--- /dev/null
+++ b/.changeset/unlucky-points-clap.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure nullish expressions render empty text
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 bd43075e6f..b7ec27f6e3 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
@@ -59,7 +59,13 @@ export function build_template_literal(values, visit, state) {
 						id,
 						create_derived(
 							state,
-							b.thunk(/** @type {Expression} */ (visit(node.expression, state)))
+							b.thunk(
+								b.logical(
+									'??',
+									/** @type {Expression} */ (visit(node.expression, state)),
+									b.literal('')
+								)
+							)
 						)
 					)
 				);
diff --git a/packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/_config.js b/packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/_config.js
new file mode 100644
index 0000000000..04d463d117
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/_config.js
@@ -0,0 +1,5 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<li></li>'
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/main.svelte b/packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/main.svelte
new file mode 100644
index 0000000000..ea67d3e7eb
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/text-multiple-nullish-expression/main.svelte
@@ -0,0 +1,4 @@
+<script>
+	function fn() {}
+</script>
+<li>{fn()}{null && fn()}</li>

From 4c006d18c7fe4cbd99624ee1caf10e472e58d060 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Sun, 18 Aug 2024 19:36:53 +0100
Subject: [PATCH 151/196] Version Packages (next) (#12897)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  4 ++++
 packages/svelte/CHANGELOG.md   | 12 ++++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 6981142b15..47f67b3d84 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -295,6 +295,7 @@
     "hip-balloons-begin",
     "hip-garlics-tap",
     "hip-goats-smoke",
+    "hip-jeans-provide",
     "hip-months-breathe",
     "hip-pumpkins-boil",
     "hip-stingrays-teach",
@@ -426,6 +427,7 @@
     "nasty-glasses-begin",
     "nasty-lions-double",
     "nasty-mayflies-smoke",
+    "nasty-penguins-pump",
     "nasty-yaks-peel",
     "neat-boats-shake",
     "neat-boxes-chew",
@@ -474,6 +476,7 @@
     "orange-comics-prove",
     "orange-crews-rescue",
     "orange-dingos-poke",
+    "orange-laws-drop",
     "orange-masks-exercise",
     "orange-yaks-protect",
     "orange-zoos-heal",
@@ -781,6 +784,7 @@
     "two-falcons-buy",
     "two-keys-watch",
     "unlucky-boxes-obey",
+    "unlucky-points-clap",
     "unlucky-steaks-warn",
     "unlucky-trees-lick",
     "violet-mails-trade",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 53c46494fa..3e99ebf215 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,17 @@
 # svelte
 
+## 5.0.0-next.225
+
+### Patch Changes
+
+- chore: improve the performance of set_text for single expressions ([#12893](https://github.com/sveltejs/svelte/pull/12893))
+
+- fix: add cleanup function signature to `createRawSnippet` ([#12894](https://github.com/sveltejs/svelte/pull/12894))
+
+- feat: more efficient checking for missing SSR text node ([#12891](https://github.com/sveltejs/svelte/pull/12891))
+
+- fix: ensure nullish expressions render empty text ([#12898](https://github.com/sveltejs/svelte/pull/12898))
+
 ## 5.0.0-next.224
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 7fc4812a09..68525a9edb 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.224",
+  "version": "5.0.0-next.225",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 6175f52086..2952f2dfa1 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.224';
+export const VERSION = '5.0.0-next.225';
 export const PUBLIC_VERSION = '5';

From 0da4116b9db50ea1850ca69e631384fa963f7127 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 19 Aug 2024 14:51:45 +0200
Subject: [PATCH 152/196] fix: ensure typings for `<svelte:options>` are picked
 up (Svelte 5 version) (#12903)

fixes #12886
---
 .changeset/brown-radios-itch.md  | 5 +++++
 packages/svelte/svelte-html.d.ts | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/brown-radios-itch.md

diff --git a/.changeset/brown-radios-itch.md b/.changeset/brown-radios-itch.md
new file mode 100644
index 0000000000..216737809a
--- /dev/null
+++ b/.changeset/brown-radios-itch.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure typings for `<svelte:options>` are picked up
diff --git a/packages/svelte/svelte-html.d.ts b/packages/svelte/svelte-html.d.ts
index 614d1fb3bc..50f7c25fc2 100644
--- a/packages/svelte/svelte-html.d.ts
+++ b/packages/svelte/svelte-html.d.ts
@@ -243,8 +243,8 @@ declare global {
 			'svelte:body': HTMLProps<'svelte:body', HTMLAttributes>;
 			'svelte:document': HTMLProps<'svelte:document', HTMLAttributes>;
 			'svelte:fragment': { slot?: string };
-			'svelte:options': HTMLProps<'svelte:options', HTMLAttributes>;
 			'svelte:head': { [name: string]: any };
+			// don't type svelte:options, it would override the types in svelte/elements and it isn't extendable anyway
 
 			[name: string]: { [name: string]: any };
 		}

From 78b55c4130b19ff3591d19f2d3f57b6ea61181fd Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Mon, 19 Aug 2024 10:49:19 -0400
Subject: [PATCH 153/196] fix: exclude local declarations from non-reactive
 property warnings (#12909)

* fix: exclude local declarations from non-reactive property warnings

* copypasta fail
---
 .changeset/perfect-pugs-shake.md                   |  5 +++++
 .../phases/2-analyze/visitors/MemberExpression.js  |  3 ++-
 .../_config.js                                     |  3 +++
 .../input.svelte                                   |  8 ++++++++
 .../warnings.json                                  | 14 ++++++++++++++
 .../_config.js                                     |  3 +++
 .../input.svelte                                   |  9 +++++++++
 .../warnings.json                                  |  1 +
 8 files changed, 45 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/perfect-pugs-shake.md
 create mode 100644 packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/_config.js
 create mode 100644 packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/warnings.json
 create mode 100644 packages/svelte/tests/validator/samples/reactive-statement-non-reactive-self-declaration/_config.js
 create mode 100644 packages/svelte/tests/validator/samples/reactive-statement-non-reactive-self-declaration/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/reactive-statement-non-reactive-self-declaration/warnings.json

diff --git a/.changeset/perfect-pugs-shake.md b/.changeset/perfect-pugs-shake.md
new file mode 100644
index 0000000000..ea2c61d55f
--- /dev/null
+++ b/.changeset/perfect-pugs-shake.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: exclude local declarations from non-reactive property warnings
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 ca67bf47ec..171a1106a8 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/MemberExpression.js
@@ -39,7 +39,8 @@ export function MemberExpression(node, context) {
 					binding.declaration_kind === 'import' ||
 					(binding.initial &&
 						binding.initial.type !== 'ArrayExpression' &&
-						binding.initial.type !== 'ObjectExpression')
+						binding.initial.type !== 'ObjectExpression' &&
+						binding.scope.function_depth <= 1)
 				) {
 					if (parent.type !== 'MemberExpression' && parent.type !== 'CallExpression') {
 						w.reactive_declaration_non_reactive_property(node);
diff --git a/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/_config.js b/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/input.svelte b/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/input.svelte
new file mode 100644
index 0000000000..2582974b71
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/input.svelte
@@ -0,0 +1,8 @@
+<script>
+	import { obj } from './data.js';
+
+	$: prop = obj.prop;
+	obj.foo = 'a different prop';
+</script>
+
+<p>{prop}</p>
diff --git a/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/warnings.json b/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/warnings.json
new file mode 100644
index 0000000000..4184902753
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-import-statement/warnings.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "reactive_declaration_non_reactive_property",
+		"message": "Properties of objects and arrays are not reactive unless in runes mode. Changes to this property will not cause the reactive statement to update",
+		"start": {
+			"line": 4,
+			"column": 11
+		},
+		"end": {
+			"line": 4,
+			"column": 19
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-self-declaration/_config.js b/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-self-declaration/_config.js
new file mode 100644
index 0000000000..f47bee71df
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-self-declaration/_config.js
@@ -0,0 +1,3 @@
+import { test } from '../../test';
+
+export default test({});
diff --git a/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-self-declaration/input.svelte b/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-self-declaration/input.svelte
new file mode 100644
index 0000000000..f359380395
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-self-declaration/input.svelte
@@ -0,0 +1,9 @@
+<script>
+	let prop;
+	$: {
+		const obj = get_obj();
+		prop = obj.prop;
+	}
+</script>
+
+<p>{prop}</p>
diff --git a/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-self-declaration/warnings.json b/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-self-declaration/warnings.json
new file mode 100644
index 0000000000..fe51488c70
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/reactive-statement-non-reactive-self-declaration/warnings.json
@@ -0,0 +1 @@
+[]

From 1681b218cf3b42757f7d0f0a7c0dc45a79fea6f0 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 19 Aug 2024 21:35:58 +0200
Subject: [PATCH 154/196] docs: mention removal of `foreign` namespace (#12906)

leftover from #12869
---
 .../routes/docs/content/03-appendix/02-breaking-changes.md    | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
index 47b18ee3d9..ebf8f91e80 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
@@ -278,7 +278,9 @@ Error and warning codes have been renamed. Previously they used dashes to separa
 
 ### Reduced number of namespaces
 
-The number of valid namespaces you can pass to the compiler option `namespace` has been reduced to `html` (the default), `mathml`, `svg` and `foreign`.
+The number of valid namespaces you can pass to the compiler option `namespace` has been reduced to `html` (the default), `mathml` and `svg`.
+
+The `foreign` namespace was only useful for Svelte Native, which we're planning to support differently in a 5.x minor.
 
 ### beforeUpdate/afterUpdate changes
 

From 5797f5e6fd1a4c346414a2b0543f2b562835905c Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 20 Aug 2024 09:18:13 -0400
Subject: [PATCH 155/196] Version Packages (next) (#12907)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 2 ++
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 47f67b3d84..bfa8c2a352 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -57,6 +57,7 @@
     "brown-insects-float",
     "brown-months-flow",
     "brown-months-fry",
+    "brown-radios-itch",
     "brown-spoons-boil",
     "brown-turkeys-tap",
     "calm-buses-clap",
@@ -483,6 +484,7 @@
     "perfect-actors-bake",
     "perfect-hairs-matter",
     "perfect-hats-dance",
+    "perfect-pugs-shake",
     "pink-bikes-agree",
     "pink-countries-repair",
     "pink-goats-promise",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 3e99ebf215..53d033cff4 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.226
+
+### Patch Changes
+
+- fix: ensure typings for `<svelte:options>` are picked up ([#12903](https://github.com/sveltejs/svelte/pull/12903))
+
+- fix: exclude local declarations from non-reactive property warnings ([#12909](https://github.com/sveltejs/svelte/pull/12909))
+
 ## 5.0.0-next.225
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 68525a9edb..a363b113c2 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.225",
+  "version": "5.0.0-next.226",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 2952f2dfa1..324b1e8991 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.225';
+export const VERSION = '5.0.0-next.226';
 export const PUBLIC_VERSION = '5';

From 0812b10100f8601f1d342ab5b7bbe9b152f5b15b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 20 Aug 2024 09:34:30 -0400
Subject: [PATCH 156/196] breaking: overhaul proxies, remove `$state.is`
 (#12916)

* chore: use closures for state proxies

* use variables

* early return

* tidy up

* move ownership stuff into separate object

* put original value directly on STATE_SYMBOL

* rename

* tidy up

* tidy

* tweak

* fix

* remove is_frozen check

* remove `$state.is`

* avoid mutations

* tweak

* changesets

* changeset

* changeset

* regenerate

* add comment

* add note

* add test
---
 .changeset/fifty-actors-agree.md              |   5 +
 .changeset/gorgeous-pans-sort.md              |   5 +
 .changeset/heavy-houses-pay.md                |   5 +
 .changeset/short-starfishes-beg.md            |   5 +
 documentation/docs/03-runes/01-state.md       |  22 -
 .../svelte/messages/client-errors/errors.md   |   4 +
 .../messages/client-warnings/warnings.md      |  15 +-
 .../svelte/messages/compile-errors/script.md  |   4 +
 packages/svelte/src/ambient.d.ts              |  21 -
 packages/svelte/src/compiler/errors.js        |  10 +
 .../2-analyze/visitors/CallExpression.js      |   7 -
 .../phases/2-analyze/visitors/Identifier.js   |   4 +
 .../client/visitors/CallExpression.js         |   7 -
 .../client/visitors/VariableDeclaration.js    |   3 +-
 .../server/visitors/CallExpression.js         |   8 -
 .../svelte/src/internal/client/constants.js   |   1 +
 .../src/internal/client/dev/equality.js       |  19 +-
 .../src/internal/client/dev/ownership.js      |  10 +-
 .../client/dom/elements/bindings/this.js      |   6 +-
 packages/svelte/src/internal/client/errors.js |  16 +
 packages/svelte/src/internal/client/index.js  |   2 +-
 packages/svelte/src/internal/client/proxy.js  | 445 +++++++++---------
 .../svelte/src/internal/client/proxy.test.ts  |  87 ++++
 .../svelte/src/internal/client/types.d.ts     |  19 +-
 .../svelte/src/internal/client/warnings.js    |   7 +-
 packages/svelte/src/internal/shared/utils.js  |   1 -
 packages/svelte/src/utils.js                  |   1 -
 .../_config.js                                |   6 +-
 .../main.svelte                               |   0
 .../runtime-runes/samples/state-is/_config.js |   7 -
 .../samples/state-is/main.svelte              |  10 -
 .../samples/state-is/_expected.html           |   4 -
 .../samples/state-is/main.svelte              |  10 -
 packages/svelte/types/index.d.ts              |  21 -
 34 files changed, 395 insertions(+), 402 deletions(-)
 create mode 100644 .changeset/fifty-actors-agree.md
 create mode 100644 .changeset/gorgeous-pans-sort.md
 create mode 100644 .changeset/heavy-houses-pay.md
 create mode 100644 .changeset/short-starfishes-beg.md
 create mode 100644 packages/svelte/src/internal/client/proxy.test.ts
 rename packages/svelte/tests/runtime-runes/samples/{proxy-shared => proxy-not-shared}/_config.js (91%)
 rename packages/svelte/tests/runtime-runes/samples/{proxy-shared => proxy-not-shared}/main.svelte (100%)
 delete mode 100644 packages/svelte/tests/runtime-runes/samples/state-is/_config.js
 delete mode 100644 packages/svelte/tests/runtime-runes/samples/state-is/main.svelte
 delete mode 100644 packages/svelte/tests/server-side-rendering/samples/state-is/_expected.html
 delete mode 100644 packages/svelte/tests/server-side-rendering/samples/state-is/main.svelte

diff --git a/.changeset/fifty-actors-agree.md b/.changeset/fifty-actors-agree.md
new file mode 100644
index 0000000000..2fd5cc66ef
--- /dev/null
+++ b/.changeset/fifty-actors-agree.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: disallow `Object.defineProperty` on state proxies with non-basic descriptors
diff --git a/.changeset/gorgeous-pans-sort.md b/.changeset/gorgeous-pans-sort.md
new file mode 100644
index 0000000000..8ed57cadbb
--- /dev/null
+++ b/.changeset/gorgeous-pans-sort.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: allow frozen objects to be proxied
diff --git a/.changeset/heavy-houses-pay.md b/.changeset/heavy-houses-pay.md
new file mode 100644
index 0000000000..8c1b2342ac
--- /dev/null
+++ b/.changeset/heavy-houses-pay.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: avoid mutations to underlying proxied object with $state
diff --git a/.changeset/short-starfishes-beg.md b/.changeset/short-starfishes-beg.md
new file mode 100644
index 0000000000..dedbfbfeef
--- /dev/null
+++ b/.changeset/short-starfishes-beg.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: remove $state.is rune
diff --git a/documentation/docs/03-runes/01-state.md b/documentation/docs/03-runes/01-state.md
index 64f5e171c0..7bcff2c968 100644
--- a/documentation/docs/03-runes/01-state.md
+++ b/documentation/docs/03-runes/01-state.md
@@ -101,28 +101,6 @@ To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snaps
 
 This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.
 
-## `$state.is`
-
-Sometimes you might need to compare two values, one of which is a reactive `$state(...)` proxy but the other is not. For this you can use `$state.is(a, b)`:
-
-```svelte
-<script>
-	let foo = $state({});
-	let bar = {};
-
-	foo.bar = bar;
-
-	console.log(foo.bar === bar); // false — `foo.bar` is a reactive proxy
-	console.log($state.is(foo.bar, bar)); // true
-</script>
-```
-
-This is handy when you might want to check if the object exists within a deeply reactive object/array.
-
-Under the hood, `$state.is` uses [`Object.is`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is) for comparing the values.
-
-> Use this as an escape hatch - most of the time you don't need this. Svelte will warn you at dev time if you happen to run into this problem
-
 ## `$derived`
 
 Derived state is declared with the `$derived` rune:
diff --git a/packages/svelte/messages/client-errors/errors.md b/packages/svelte/messages/client-errors/errors.md
index e509c970a2..ee05f6e664 100644
--- a/packages/svelte/messages/client-errors/errors.md
+++ b/packages/svelte/messages/client-errors/errors.md
@@ -64,6 +64,10 @@
 
 > The `%rune%` rune is only available inside `.svelte` and `.svelte.js/ts` files
 
+## state_descriptors_fixed
+
+> Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
+
 ## state_prototype_fixed
 
 > Cannot set prototype of `$state` object
diff --git a/packages/svelte/messages/client-warnings/warnings.md b/packages/svelte/messages/client-warnings/warnings.md
index 3072bc4df1..4266f75184 100644
--- a/packages/svelte/messages/client-warnings/warnings.md
+++ b/packages/svelte/messages/client-warnings/warnings.md
@@ -44,7 +44,7 @@
 
 ## state_proxy_equality_mismatch
 
-> Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results. Consider using `$state.is(a, b)` instead%details%
+> Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
 
 `$state(...)` creates a [proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) of the value it is passed. The proxy and the value have different identities, meaning equality checks will always return `false`:
 
@@ -57,15 +57,4 @@
 </script>
 ```
 
-In the rare case that you need to compare them, you can use `$state.is`, which unwraps proxies:
-
-```svelte
-<script>
-	let value = { foo: 'bar' };
-	let proxy = $state(value);
-
-	$state.is(value, proxy); // true
-</script>
-```
-
-During development, Svelte will warn you when comparing values with proxies.
+To resolve this, ensure you're comparing values where both values were created with `$state(...)`, or neither were. Note that `$state.raw(...)` will _not_ create a state proxy.
diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index 6e15fa06d5..e84174e42a 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/packages/svelte/messages/compile-errors/script.md
@@ -122,6 +122,10 @@
 
 > Cannot use rune without parentheses
 
+## rune_removed
+
+> The `%name%` rune has been removed
+
 ## rune_renamed
 
 > `%name%` is now `%replacement%`
diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
index 82242cb494..6af8ca5156 100644
--- a/packages/svelte/src/ambient.d.ts
+++ b/packages/svelte/src/ambient.d.ts
@@ -147,27 +147,6 @@ declare namespace $state {
 	 */
 	export function snapshot<T>(state: T): Snapshot<T>;
 
-	/**
-	 * Compare two values, one or both of which is a reactive `$state(...)` proxy.
-	 *
-	 * Example:
-	 * ```ts
-	 * <script>
-	 *	 let foo = $state({});
-	 *	 let bar = {};
-	 *
-	 *	 foo.bar = bar;
-	 *
-	 *	 console.log(foo.bar === bar); // false — `foo.bar` is a reactive proxy
-	 *   console.log($state.is(foo.bar, bar)); // true
-	 * </script>
-	 * ```
-	 *
-	 * https://svelte-5-preview.vercel.app/docs/runes#$state.is
-	 *
-	 */
-	export function is(a: any, b: any): boolean;
-
 	// prevent intellisense from being unhelpful
 	/** @deprecated */
 	export const apply: never;
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index c6c388fd3f..b174f69c20 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -348,6 +348,16 @@ export function rune_missing_parentheses(node) {
 	e(node, "rune_missing_parentheses", "Cannot use rune without parentheses");
 }
 
+/**
+ * The `%name%` rune has been removed
+ * @param {null | number | NodeLike} node
+ * @param {string} name
+ * @returns {never}
+ */
+export function rune_removed(node, name) {
+	e(node, "rune_removed", `The \`${name}\` rune has been removed`);
+}
+
 /**
  * `%name%` is now `%replacement%`
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
index 92edd00739..f9999f5252 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -140,13 +140,6 @@ export function CallExpression(node, context) {
 				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
 			}
 
-			break;
-
-		case '$state.is':
-			if (node.arguments.length !== 2) {
-				e.rune_invalid_arguments_length(node, rune, 'exactly two arguments');
-			}
-
 			break;
 	}
 
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 1f3406e92e..79dccd5a7c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -61,6 +61,10 @@ export function Identifier(node, context) {
 						e.rune_renamed(parent, '$state.frozen', '$state.raw');
 					}
 
+					if (name === '$state.is') {
+						e.rune_removed(parent, '$state.is');
+					}
+
 					e.rune_invalid_name(parent, name);
 				}
 			}
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
index d58dfe73a7..124b5cd269 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/CallExpression.js
@@ -24,13 +24,6 @@ export function CallExpression(node, context) {
 				is_ignored(node, 'state_snapshot_uncloneable') && b.true
 			);
 
-		case '$state.is':
-			return b.call(
-				'$.is',
-				/** @type {Expression} */ (context.visit(node.arguments[0])),
-				/** @type {Expression} */ (context.visit(node.arguments[1]))
-			);
-
 		case '$effect.root':
 			return b.call(
 				'$.effect_root',
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index d8106f9d7d..77177e397f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -28,8 +28,7 @@ export function VariableDeclaration(node, context) {
 				rune === '$effect.tracking' ||
 				rune === '$effect.root' ||
 				rune === '$inspect' ||
-				rune === '$state.snapshot' ||
-				rune === '$state.is'
+				rune === '$state.snapshot'
 			) {
 				if (init != null && is_hoisted_function(init)) {
 					context.state.hoisted.push(
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
index 4b15a772c9..386c6b6ff3 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js
@@ -33,14 +33,6 @@ export function CallExpression(node, context) {
 		);
 	}
 
-	if (rune === '$state.is') {
-		return b.call(
-			'Object.is',
-			/** @type {Expression} */ (context.visit(node.arguments[0])),
-			/** @type {Expression} */ (context.visit(node.arguments[1]))
-		);
-	}
-
 	if (rune === '$inspect' || rune === '$inspect().with') {
 		return transform_inspect_rune(node, context);
 	}
diff --git a/packages/svelte/src/internal/client/constants.js b/packages/svelte/src/internal/client/constants.js
index 286396703a..19a412726d 100644
--- a/packages/svelte/src/internal/client/constants.js
+++ b/packages/svelte/src/internal/client/constants.js
@@ -20,4 +20,5 @@ export const INSPECT_EFFECT = 1 << 17;
 export const HEAD_EFFECT = 1 << 18;
 
 export const STATE_SYMBOL = Symbol('$state');
+export const STATE_SYMBOL_METADATA = Symbol('$state metadata');
 export const LOADING_ATTR_SYMBOL = Symbol('');
diff --git a/packages/svelte/src/internal/client/dev/equality.js b/packages/svelte/src/internal/client/dev/equality.js
index 67fc039da1..c1c392ba87 100644
--- a/packages/svelte/src/internal/client/dev/equality.js
+++ b/packages/svelte/src/internal/client/dev/equality.js
@@ -20,10 +20,7 @@ export function init_array_prototype_warnings() {
 			const test = indexOf.call(get_proxied_value(this), get_proxied_value(item), from_index);
 
 			if (test !== -1) {
-				w.state_proxy_equality_mismatch(
-					'array.indexOf(...)',
-					': `array.findIndex(entry => $state.is(entry, item))`'
-				);
+				w.state_proxy_equality_mismatch('array.indexOf(...)');
 			}
 		}
 
@@ -45,10 +42,7 @@ export function init_array_prototype_warnings() {
 			);
 
 			if (test !== -1) {
-				w.state_proxy_equality_mismatch(
-					'array.lastIndexOf(...)',
-					': `array.findLastIndex(entry => $state.is(entry, item))`'
-				);
+				w.state_proxy_equality_mismatch('array.lastIndexOf(...)');
 			}
 		}
 
@@ -62,10 +56,7 @@ export function init_array_prototype_warnings() {
 			const test = includes.call(get_proxied_value(this), get_proxied_value(item), from_index);
 
 			if (test) {
-				w.state_proxy_equality_mismatch(
-					'array.includes(...)',
-					': `array.some(entry => $state.is(entry, item))`'
-				);
+				w.state_proxy_equality_mismatch('array.includes(...)');
 			}
 		}
 
@@ -88,7 +79,7 @@ export function init_array_prototype_warnings() {
  */
 export function strict_equals(a, b, equal = true) {
 	if ((a === b) !== (get_proxied_value(a) === get_proxied_value(b))) {
-		w.state_proxy_equality_mismatch(equal ? '===' : '!==', '');
+		w.state_proxy_equality_mismatch(equal ? '===' : '!==');
 	}
 
 	return (a === b) === equal;
@@ -102,7 +93,7 @@ export function strict_equals(a, b, equal = true) {
  */
 export function equals(a, b, equal = true) {
 	if ((a == b) !== (get_proxied_value(a) == get_proxied_value(b))) {
-		w.state_proxy_equality_mismatch(equal ? '==' : '!=', '');
+		w.state_proxy_equality_mismatch(equal ? '==' : '!=');
 	}
 
 	return (a == b) === equal;
diff --git a/packages/svelte/src/internal/client/dev/ownership.js b/packages/svelte/src/internal/client/dev/ownership.js
index 62d4a43e94..8aa3b91d4e 100644
--- a/packages/svelte/src/internal/client/dev/ownership.js
+++ b/packages/svelte/src/internal/client/dev/ownership.js
@@ -1,7 +1,7 @@
 /** @import { ProxyMetadata } from '#client' */
 /** @typedef {{ file: string, line: number, column: number }} Location */
 
-import { STATE_SYMBOL } from '../constants.js';
+import { STATE_SYMBOL_METADATA } from '../constants.js';
 import { render_effect, user_pre_effect } from '../reactivity/effects.js';
 import { dev_current_component_function } from '../runtime.js';
 import { get_prototype_of } from '../../shared/utils.js';
@@ -113,7 +113,7 @@ export function mark_module_end(component) {
 export function add_owner(object, owner, global = false, skip_warning = false) {
 	if (object && !global) {
 		const component = dev_current_component_function;
-		const metadata = object[STATE_SYMBOL];
+		const metadata = object[STATE_SYMBOL_METADATA];
 		if (metadata && !has_owner(metadata, component)) {
 			let original = get_owner(metadata);
 
@@ -138,8 +138,8 @@ export function add_owner_effect(get_object, Component, skip_warning = false) {
 }
 
 /**
- * @param {ProxyMetadata<any> | null} from
- * @param {ProxyMetadata<any>} to
+ * @param {ProxyMetadata | null} from
+ * @param {ProxyMetadata} to
  */
 export function widen_ownership(from, to) {
 	if (to.owners === null) {
@@ -166,7 +166,7 @@ export function widen_ownership(from, to) {
  * @param {Set<any>} seen
  */
 function add_owner_to_object(object, owner, seen) {
-	const metadata = /** @type {ProxyMetadata} */ (object?.[STATE_SYMBOL]);
+	const metadata = /** @type {ProxyMetadata} */ (object?.[STATE_SYMBOL_METADATA]);
 
 	if (metadata) {
 		// this is a state proxy, add owner directly, if not globally shared
diff --git a/packages/svelte/src/internal/client/dom/elements/bindings/this.js b/packages/svelte/src/internal/client/dom/elements/bindings/this.js
index 6b5c439526..56b0a56e71 100644
--- a/packages/svelte/src/internal/client/dom/elements/bindings/this.js
+++ b/packages/svelte/src/internal/client/dom/elements/bindings/this.js
@@ -9,9 +9,9 @@ import { queue_micro_task } from '../../task.js';
  * @returns {boolean}
  */
 function is_bound_this(bound_value, element_or_component) {
-	// Find the original target if the value is proxied.
-	var proxy_target = bound_value && bound_value[STATE_SYMBOL]?.t;
-	return bound_value === element_or_component || proxy_target === element_or_component;
+	return (
+		bound_value === element_or_component || bound_value?.[STATE_SYMBOL] === element_or_component
+	);
 }
 
 /**
diff --git a/packages/svelte/src/internal/client/errors.js b/packages/svelte/src/internal/client/errors.js
index d6c04cf414..67b5c0550f 100644
--- a/packages/svelte/src/internal/client/errors.js
+++ b/packages/svelte/src/internal/client/errors.js
@@ -278,6 +278,22 @@ export function rune_outside_svelte(rune) {
 	}
 }
 
+/**
+ * Property descriptors defined on `$state` objects must contain `value` and always be `enumerable`, `configurable` and `writable`.
+ * @returns {never}
+ */
+export function state_descriptors_fixed() {
+	if (DEV) {
+		const error = new Error(`state_descriptors_fixed\nProperty descriptors defined on \`$state\` objects must contain \`value\` and always be \`enumerable\`, \`configurable\` and \`writable\`.`);
+
+		error.name = 'Svelte error';
+		throw error;
+	} else {
+		// TODO print a link to the documentation
+		throw new Error("state_descriptors_fixed");
+	}
+}
+
 /**
  * Cannot set prototype of `$state` object
  * @returns {never}
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 5739e9646c..1ca71708af 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -150,7 +150,7 @@ export {
 	validate_prop_bindings
 } from './validate.js';
 export { raf } from './timing.js';
-export { proxy, is } from './proxy.js';
+export { proxy } from './proxy.js';
 export { create_custom_element } from './dom/elements/custom-element.js';
 export {
 	child,
diff --git a/packages/svelte/src/internal/client/proxy.js b/packages/svelte/src/internal/client/proxy.js
index 1827b1efda..333cd20b58 100644
--- a/packages/svelte/src/internal/client/proxy.js
+++ b/packages/svelte/src/internal/client/proxy.js
@@ -3,16 +3,14 @@ import { DEV } from 'esm-env';
 import { get, current_component_context, untrack, current_effect } from './runtime.js';
 import {
 	array_prototype,
-	define_property,
 	get_descriptor,
 	get_prototype_of,
 	is_array,
-	is_frozen,
 	object_prototype
 } from '../shared/utils.js';
 import { check_ownership, widen_ownership } from './dev/ownership.js';
 import { source, set } from './reactivity/sources.js';
-import { STATE_SYMBOL } from './constants.js';
+import { STATE_SYMBOL, STATE_SYMBOL_METADATA } from './constants.js';
 import { UNINITIALIZED } from '../../constants.js';
 import * as e from './errors.js';
 
@@ -24,261 +22,262 @@ import * as e from './errors.js';
  * @returns {ProxyStateObject<T> | T}
  */
 export function proxy(value, parent = null, prev) {
-	if (typeof value === 'object' && value != null && !is_frozen(value)) {
-		// If we have an existing proxy, return it...
-		if (STATE_SYMBOL in value) {
-			const metadata = /** @type {ProxyMetadata<T>} */ (value[STATE_SYMBOL]);
-
-			// ...unless the proxy belonged to a different object, because
-			// someone copied the state symbol using `Reflect.ownKeys(...)`
-			if (metadata.t === value || metadata.p === value) {
-				if (DEV) {
-					// Since original parent relationship gets lost, we need to copy over ancestor owners
-					// into current metadata. The object might still exist on both, so we need to widen it.
-					widen_ownership(metadata, metadata);
-					metadata.parent = parent;
-				}
+	// if non-proxyable, or is already a proxy, return `value`
+	if (typeof value !== 'object' || value === null || STATE_SYMBOL in value) {
+		return value;
+	}
 
-				return metadata.p;
-			}
+	const prototype = get_prototype_of(value);
+
+	if (prototype !== object_prototype && prototype !== array_prototype) {
+		return value;
+	}
+
+	var sources = new Map();
+	var is_proxied_array = is_array(value);
+	var version = source(0);
+
+	/** @type {ProxyMetadata} */
+	var metadata;
+
+	if (DEV) {
+		metadata = {
+			parent,
+			owners: null
+		};
+
+		if (prev) {
+			// Reuse owners from previous state; necessary because reassignment is not guaranteed to have correct component context.
+			// If no previous proxy exists we play it safe and assume ownerless state
+			// @ts-expect-error
+			const prev_owners = prev.v?.[STATE_SYMBOL_METADATA]?.owners;
+			metadata.owners = prev_owners ? new Set(prev_owners) : null;
+		} else {
+			metadata.owners =
+				parent === null
+					? current_component_context !== null
+						? new Set([current_component_context.function])
+						: null
+					: new Set();
 		}
+	}
 
-		const prototype = get_prototype_of(value);
-
-		if (prototype === object_prototype || prototype === array_prototype) {
-			const proxy = new Proxy(value, state_proxy_handler);
-
-			define_property(value, STATE_SYMBOL, {
-				value: /** @type {ProxyMetadata} */ ({
-					s: new Map(),
-					v: source(0),
-					a: is_array(value),
-					p: proxy,
-					t: value
-				}),
-				writable: true,
-				enumerable: false
-			});
+	return new Proxy(/** @type {any} */ (value), {
+		defineProperty(_, prop, descriptor) {
+			if (
+				!('value' in descriptor) ||
+				descriptor.configurable === false ||
+				descriptor.enumerable === false ||
+				descriptor.writable === false
+			) {
+				// we disallow non-basic descriptors, because unless they are applied to the
+				// target object — which we avoid, so that state can be forked — we will run
+				// afoul of the various invariants
+				// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy/Proxy/getOwnPropertyDescriptor#invariants
+				e.state_descriptors_fixed();
+			}
 
-			if (DEV) {
-				// @ts-expect-error
-				value[STATE_SYMBOL].parent = parent;
-
-				if (prev) {
-					// Reuse owners from previous state; necessary because reassignment is not guaranteed to have correct component context.
-					// If no previous proxy exists we play it safe and assume ownerless state
-					// @ts-expect-error
-					const prev_owners = prev?.v?.[STATE_SYMBOL]?.owners;
-					// @ts-expect-error
-					value[STATE_SYMBOL].owners = prev_owners ? new Set(prev_owners) : null;
-				} else {
-					// @ts-expect-error
-					value[STATE_SYMBOL].owners =
-						parent === null
-							? current_component_context !== null
-								? new Set([current_component_context.function])
-								: null
-							: new Set();
-				}
+			var s = sources.get(prop);
+
+			if (s === undefined) {
+				s = source(descriptor.value);
+				sources.set(prop, s);
+			} else {
+				set(s, proxy(descriptor.value, metadata));
 			}
 
-			return proxy;
-		}
-	}
+			return true;
+		},
 
-	return value;
-}
+		deleteProperty(target, prop) {
+			var s = sources.get(prop);
+			var exists = s !== undefined ? s.v !== UNINITIALIZED : prop in target;
 
-/**
- * @param {Source<number>} signal
- * @param {1 | -1} [d]
- */
-function update_version(signal, d = 1) {
-	set(signal, signal.v + d);
-}
+			if (s !== undefined) {
+				set(s, UNINITIALIZED);
+			}
 
-/** @type {ProxyHandler<ProxyStateObject<any>>} */
-const state_proxy_handler = {
-	defineProperty(target, prop, descriptor) {
-		if (descriptor.value) {
-			/** @type {ProxyMetadata} */
-			const metadata = target[STATE_SYMBOL];
+			if (exists) {
+				update_version(version);
+			}
 
-			const s = metadata.s.get(prop);
-			if (s !== undefined) set(s, proxy(descriptor.value, metadata));
-		}
+			return exists;
+		},
 
-		return Reflect.defineProperty(target, prop, descriptor);
-	},
-
-	deleteProperty(target, prop) {
-		/** @type {ProxyMetadata} */
-		const metadata = target[STATE_SYMBOL];
-		const s = metadata.s.get(prop);
-		const is_array = metadata.a;
-		const boolean = delete target[prop];
-
-		// If we have mutated an array directly, and the deletion
-		// was successful we will also need to update the length
-		// before updating the field or the version. This is to
-		// ensure any effects observing length can execute before
-		// effects that listen to the fields – otherwise they will
-		// operate an an index that no longer exists.
-		if (is_array && boolean) {
-			const ls = metadata.s.get('length');
-			const length = target.length - 1;
-			if (ls !== undefined && ls.v !== length) {
-				set(ls, length);
+		get(target, prop, receiver) {
+			if (DEV && prop === STATE_SYMBOL_METADATA) {
+				return metadata;
 			}
-		}
-		if (s !== undefined) set(s, UNINITIALIZED);
 
-		if (boolean) {
-			update_version(metadata.v);
-		}
+			if (prop === STATE_SYMBOL) {
+				return value;
+			}
 
-		return boolean;
-	},
+			var s = sources.get(prop);
+			var exists = prop in target;
 
-	get(target, prop, receiver) {
-		if (prop === STATE_SYMBOL) {
-			return Reflect.get(target, STATE_SYMBOL);
-		}
+			// create a source, but only if it's an own property and not a prototype property
+			if (s === undefined && (!exists || get_descriptor(target, prop)?.writable)) {
+				s = source(proxy(exists ? target[prop] : UNINITIALIZED, metadata));
+				sources.set(prop, s);
+			}
 
-		/** @type {ProxyMetadata} */
-		const metadata = target[STATE_SYMBOL];
-		let s = metadata.s.get(prop);
+			if (s !== undefined) {
+				var v = get(s);
+				return v === UNINITIALIZED ? undefined : v;
+			}
 
-		// create a source, but only if it's an own property and not a prototype property
-		if (s === undefined && (!(prop in target) || get_descriptor(target, prop)?.writable)) {
-			s = source(proxy(target[prop], metadata));
-			metadata.s.set(prop, s);
-		}
+			return Reflect.get(target, prop, receiver);
+		},
+
+		getOwnPropertyDescriptor(target, prop) {
+			var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
+
+			if (descriptor && 'value' in descriptor) {
+				var s = sources.get(prop);
+				if (s) descriptor.value = get(s);
+			} else if (descriptor === undefined) {
+				var source = sources.get(prop);
+				var value = source?.v;
+
+				if (source !== undefined && value !== UNINITIALIZED) {
+					return {
+						enumerable: true,
+						configurable: true,
+						value,
+						writable: true
+					};
+				}
+			}
 
-		if (s !== undefined) {
-			const value = get(s);
-			return value === UNINITIALIZED ? undefined : value;
-		}
+			return descriptor;
+		},
 
-		return Reflect.get(target, prop, receiver);
-	},
+		has(target, prop) {
+			if (DEV && prop === STATE_SYMBOL_METADATA) {
+				return true;
+			}
+
+			if (prop === STATE_SYMBOL) {
+				return true;
+			}
 
-	getOwnPropertyDescriptor(target, prop) {
-		const descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
-		if (descriptor && 'value' in descriptor) {
-			/** @type {ProxyMetadata} */
-			const metadata = target[STATE_SYMBOL];
-			const s = metadata.s.get(prop);
+			var s = sources.get(prop);
+			var has = (s !== undefined && s.v !== UNINITIALIZED) || Reflect.has(target, prop);
 
-			if (s) {
-				descriptor.value = get(s);
+			if (
+				s !== undefined ||
+				(current_effect !== null && (!has || get_descriptor(target, prop)?.writable))
+			) {
+				if (s === undefined) {
+					s = source(has ? proxy(target[prop], metadata) : UNINITIALIZED);
+					sources.set(prop, s);
+				}
+
+				var value = get(s);
+				if (value === UNINITIALIZED) {
+					return false;
+				}
 			}
-		}
 
-		return descriptor;
-	},
+			return has;
+		},
 
-	has(target, prop) {
-		if (prop === STATE_SYMBOL) {
-			return true;
-		}
-		/** @type {ProxyMetadata} */
-		const metadata = target[STATE_SYMBOL];
-		const has = Reflect.has(target, prop);
-
-		let s = metadata.s.get(prop);
-		if (
-			s !== undefined ||
-			(current_effect !== null && (!has || get_descriptor(target, prop)?.writable))
-		) {
+		set(target, prop, value, receiver) {
+			var s = sources.get(prop);
+			var has = prop in target;
+
+			// If we haven't yet created a source for this property, we need to ensure
+			// we do so otherwise if we read it later, then the write won't be tracked and
+			// the heuristics of effects will be different vs if we had read the proxied
+			// object property before writing to that property.
 			if (s === undefined) {
-				s = source(has ? proxy(target[prop], metadata) : UNINITIALIZED);
-				metadata.s.set(prop, s);
-			}
-			const value = get(s);
-			if (value === UNINITIALIZED) {
-				return false;
+				if (!has || get_descriptor(target, prop)?.writable) {
+					s = source(undefined);
+					set(s, proxy(value, metadata));
+					sources.set(prop, s);
+				}
+			} else {
+				has = s.v !== UNINITIALIZED;
+				set(s, proxy(value, metadata));
 			}
-		}
-		return has;
-	},
-
-	set(target, prop, value, receiver) {
-		/** @type {ProxyMetadata} */
-		const metadata = target[STATE_SYMBOL];
-		let s = metadata.s.get(prop);
-		// If we haven't yet created a source for this property, we need to ensure
-		// we do so otherwise if we read it later, then the write won't be tracked and
-		// the heuristics of effects will be different vs if we had read the proxied
-		// object property before writing to that property.
-		if (s === undefined) {
-			// the read creates a signal
-			untrack(() => receiver[prop]);
-			s = metadata.s.get(prop);
-		}
-		if (s !== undefined) {
-			set(s, proxy(value, metadata));
-		}
-		const is_array = metadata.a;
-		const not_has = !(prop in target);
-
-		if (DEV) {
-			/** @type {ProxyMetadata | undefined} */
-			const prop_metadata = value?.[STATE_SYMBOL];
-			if (prop_metadata && prop_metadata?.parent !== metadata) {
-				widen_ownership(metadata, prop_metadata);
+
+			if (DEV) {
+				/** @type {ProxyMetadata | undefined} */
+				var prop_metadata = value?.[STATE_SYMBOL_METADATA];
+				if (prop_metadata && prop_metadata?.parent !== metadata) {
+					widen_ownership(metadata, prop_metadata);
+				}
+				check_ownership(metadata);
 			}
-			check_ownership(metadata);
-		}
 
-		// variable.length = value -> clear all signals with index >= value
-		if (is_array && prop === 'length') {
-			for (let i = value; i < target.length; i += 1) {
-				const s = metadata.s.get(i + '');
-				if (s !== undefined) set(s, UNINITIALIZED);
+			// variable.length = value -> clear all signals with index >= value
+			if (is_proxied_array && prop === 'length') {
+				for (var i = value; i < target.length; i += 1) {
+					var other_s = sources.get(i + '');
+					if (other_s !== undefined) set(other_s, UNINITIALIZED);
+				}
 			}
-		}
 
-		var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
+			var descriptor = Reflect.getOwnPropertyDescriptor(target, prop);
 
-		// Set the new value before updating any signals so that any listeners get the new value
-		if (descriptor?.set) {
-			descriptor.set.call(receiver, value);
-		} else {
-			target[prop] = value;
-		}
+			// Set the new value before updating any signals so that any listeners get the new value
+			if (descriptor?.set) {
+				descriptor.set.call(receiver, value);
+			}
 
-		if (not_has) {
-			// If we have mutated an array directly, we might need to
-			// signal that length has also changed. Do it before updating metadata
-			// to ensure that iterating over the array as a result of a metadata update
-			// will not cause the length to be out of sync.
-			if (is_array) {
-				const ls = metadata.s.get('length');
-				const length = target.length;
-				if (ls !== undefined && ls.v !== length) {
-					set(ls, length);
+			if (!has) {
+				// If we have mutated an array directly, we might need to
+				// signal that length has also changed. Do it before updating metadata
+				// to ensure that iterating over the array as a result of a metadata update
+				// will not cause the length to be out of sync.
+				if (is_proxied_array && typeof prop === 'string') {
+					var ls = sources.get('length');
+
+					if (ls !== undefined) {
+						var n = Number(prop);
+
+						if (Number.isInteger(n) && n >= ls.v) {
+							set(ls, n + 1);
+						}
+					}
 				}
+
+				update_version(version);
 			}
-			update_version(metadata.v);
-		}
 
-		return true;
-	},
+			return true;
+		},
 
-	ownKeys(target) {
-		/** @type {ProxyMetadata} */
-		const metadata = target[STATE_SYMBOL];
+		ownKeys(target) {
+			get(version);
 
-		get(metadata.v);
-		return Reflect.ownKeys(target);
-	}
-};
+			var own_keys = Reflect.ownKeys(target).filter((key) => {
+				var source = sources.get(key);
+				return source === undefined || source.v !== UNINITIALIZED;
+			});
+
+			for (var [key, source] of sources) {
+				if (source.v !== UNINITIALIZED && !(key in target)) {
+					own_keys.push(key);
+				}
+			}
+
+			return own_keys;
+		},
+
+		setPrototypeOf() {
+			e.state_prototype_fixed();
+		}
+	});
+}
 
-if (DEV) {
-	state_proxy_handler.setPrototypeOf = () => {
-		e.state_prototype_fixed();
-	};
+/**
+ * @param {Source<number>} signal
+ * @param {1 | -1} [d]
+ */
+function update_version(signal, d = 1) {
+	set(signal, signal.v + d);
 }
 
 /**
@@ -286,11 +285,9 @@ if (DEV) {
  */
 export function get_proxied_value(value) {
 	if (value !== null && typeof value === 'object' && STATE_SYMBOL in value) {
-		var metadata = value[STATE_SYMBOL];
-		if (metadata) {
-			return metadata.p;
-		}
+		return value[STATE_SYMBOL];
 	}
+
 	return value;
 }
 
diff --git a/packages/svelte/src/internal/client/proxy.test.ts b/packages/svelte/src/internal/client/proxy.test.ts
new file mode 100644
index 0000000000..d73e6bef72
--- /dev/null
+++ b/packages/svelte/src/internal/client/proxy.test.ts
@@ -0,0 +1,87 @@
+import { proxy } from './proxy';
+import { assert, test } from 'vitest';
+
+test('does not mutate the original object', () => {
+	const original = { x: 1 };
+	const state = proxy(original);
+
+	state.x = 2;
+
+	assert.equal(original.x, 1);
+	assert.equal(state.x, 2);
+});
+
+test('preserves getters', () => {
+	let count = 0;
+	const original = {
+		count: 0,
+		get x() {
+			this.count += 1;
+			count += 1;
+			return 42;
+		}
+	};
+
+	const state = proxy(original);
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	state.x;
+	// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+	state.x;
+
+	assert.equal(original.count, 0);
+	assert.equal(count, 2);
+	assert.equal(state.count, 2);
+});
+
+test('defines a property', () => {
+	const original = { y: 0 };
+	const state = proxy<any>(original);
+
+	let value = 0;
+
+	Object.defineProperty(state, 'x', {
+		value: 1
+	});
+	Object.defineProperty(state, 'y', {
+		value: 1
+	});
+
+	assert.equal(state.x, 1);
+	assert.deepEqual(Object.getOwnPropertyDescriptor(state, 'x'), {
+		configurable: true,
+		writable: true,
+		value: 1,
+		enumerable: true
+	});
+
+	assert.ok(!('x' in original));
+	assert.deepEqual(Object.getOwnPropertyDescriptor(original, 'y'), {
+		configurable: true,
+		writable: true,
+		value: 0,
+		enumerable: true
+	});
+
+	assert.throws(
+		() =>
+			Object.defineProperty(state, 'x', {
+				get: () => value,
+				set: (v) => (value = v)
+			}),
+		/state_descriptors_fixed/
+	);
+});
+
+test('does not re-proxy proxies', () => {
+	const inner = proxy({ count: 0 });
+	const outer = proxy({ inner });
+
+	assert.equal(inner.count, 0);
+	assert.equal(outer.inner.count, 0);
+
+	inner.count += 1;
+
+	assert.equal(inner.count, 1);
+	assert.equal(outer.inner.count, 1);
+});
diff --git a/packages/svelte/src/internal/client/types.d.ts b/packages/svelte/src/internal/client/types.d.ts
index 78b1d8d6fd..9a720a02a2 100644
--- a/packages/svelte/src/internal/client/types.d.ts
+++ b/packages/svelte/src/internal/client/types.d.ts
@@ -173,25 +173,16 @@ export type TaskCallback = (now: number) => boolean | void;
 
 export type TaskEntry = { c: TaskCallback; f: () => void };
 
-export interface ProxyMetadata<T = Record<string | symbol, any>> {
-	/** A map of signals associated to the properties that are reactive */
-	s: Map<string | symbol, Source<any>>;
-	/** A version counter, used within the proxy to signal changes in places where there's no other way to signal an update */
-	v: Source<number>;
-	/** `true` if the proxified object is an array */
-	a: boolean;
-	/** The associated proxy */
-	p: ProxyStateObject<T>;
-	/** The original target this proxy was created for */
-	t: T;
-	/** Dev-only — the components that 'own' this state, if any. `null` means no owners, i.e. everyone can mutate this state. */
+/** Dev-only */
+export interface ProxyMetadata {
+	/** The components that 'own' this state, if any. `null` means no owners, i.e. everyone can mutate this state. */
 	owners: null | Set<Function>;
-	/** Dev-only — the parent metadata object */
+	/** The parent metadata object */
 	parent: null | ProxyMetadata;
 }
 
 export type ProxyStateObject<T = Record<string | symbol, any>> = T & {
-	[STATE_SYMBOL]: ProxyMetadata;
+	[STATE_SYMBOL]: T;
 };
 
 export * from './reactivity/types';
diff --git a/packages/svelte/src/internal/client/warnings.js b/packages/svelte/src/internal/client/warnings.js
index b7268ee1d7..36d7345b86 100644
--- a/packages/svelte/src/internal/client/warnings.js
+++ b/packages/svelte/src/internal/client/warnings.js
@@ -128,13 +128,12 @@ export function ownership_invalid_mutation(component, owner) {
 }
 
 /**
- * Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results. Consider using `$state.is(a, b)` instead%details%
+ * Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `%operator%` will produce unexpected results
  * @param {string} operator
- * @param {string} details
  */
-export function state_proxy_equality_mismatch(operator, details) {
+export function state_proxy_equality_mismatch(operator) {
 	if (DEV) {
-		console.warn(`%c[svelte] state_proxy_equality_mismatch\n%cReactive \`$state(...)\` proxies and the values they proxy have different identities. Because of this, comparisons with \`${operator}\` will produce unexpected results. Consider using \`$state.is(a, b)\` instead${details}`, bold, normal);
+		console.warn(`%c[svelte] state_proxy_equality_mismatch\n%cReactive \`$state(...)\` proxies and the values they proxy have different identities. Because of this, comparisons with \`${operator}\` will produce unexpected results`, bold, normal);
 	} else {
 		// TODO print a link to the documentation
 		console.warn("state_proxy_equality_mismatch");
diff --git a/packages/svelte/src/internal/shared/utils.js b/packages/svelte/src/internal/shared/utils.js
index c2f0b24c11..d843413e57 100644
--- a/packages/svelte/src/internal/shared/utils.js
+++ b/packages/svelte/src/internal/shared/utils.js
@@ -3,7 +3,6 @@
 export var is_array = Array.isArray;
 export var array_from = Array.from;
 export var object_keys = Object.keys;
-export var is_frozen = Object.isFrozen;
 export var define_property = Object.defineProperty;
 export var get_descriptor = Object.getOwnPropertyDescriptor;
 export var get_descriptors = Object.getOwnPropertyDescriptors;
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index 0cf50bd774..bf241c7947 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -395,7 +395,6 @@ const RUNES = /** @type {const} */ ([
 	'$state',
 	'$state.raw',
 	'$state.snapshot',
-	'$state.is',
 	'$props',
 	'$bindable',
 	'$derived',
diff --git a/packages/svelte/tests/runtime-runes/samples/proxy-shared/_config.js b/packages/svelte/tests/runtime-runes/samples/proxy-not-shared/_config.js
similarity index 91%
rename from packages/svelte/tests/runtime-runes/samples/proxy-shared/_config.js
rename to packages/svelte/tests/runtime-runes/samples/proxy-not-shared/_config.js
index 682c0467fc..0f63d1c4d0 100644
--- a/packages/svelte/tests/runtime-runes/samples/proxy-shared/_config.js
+++ b/packages/svelte/tests/runtime-runes/samples/proxy-not-shared/_config.js
@@ -18,7 +18,7 @@ export default test({
 			target.innerHTML,
 			`
 				<button>1</button>
-				<button>1</button>
+				<button>0</button>
 			`
 		);
 
@@ -29,8 +29,8 @@ export default test({
 		assert.htmlEqual(
 			target.innerHTML,
 			`
-				<button>2</button>
-				<button>2</button>
+				<button>1</button>
+				<button>1</button>
 			`
 		);
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/proxy-shared/main.svelte b/packages/svelte/tests/runtime-runes/samples/proxy-not-shared/main.svelte
similarity index 100%
rename from packages/svelte/tests/runtime-runes/samples/proxy-shared/main.svelte
rename to packages/svelte/tests/runtime-runes/samples/proxy-not-shared/main.svelte
diff --git a/packages/svelte/tests/runtime-runes/samples/state-is/_config.js b/packages/svelte/tests/runtime-runes/samples/state-is/_config.js
deleted file mode 100644
index 27aabe8213..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/state-is/_config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	async test({ assert, logs }) {
-		assert.deepEqual(logs, [false, true]);
-	}
-});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-is/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-is/main.svelte
deleted file mode 100644
index ff23de439a..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/state-is/main.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-	/** @type {{ bar?: any }}*/
-	let foo = $state({});
-	let bar = {};
-
-	foo.bar = bar;
-
-	console.log(foo.bar === bar); // false because of the $state proxy
-	console.log($state.is(foo.bar, bar)); // true
-</script>
diff --git a/packages/svelte/tests/server-side-rendering/samples/state-is/_expected.html b/packages/svelte/tests/server-side-rendering/samples/state-is/_expected.html
deleted file mode 100644
index f9f47bcf0a..0000000000
--- a/packages/svelte/tests/server-side-rendering/samples/state-is/_expected.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<p>true</p>
-<p>true</p>
-<p>true</p>
-<p>true</p>
\ No newline at end of file
diff --git a/packages/svelte/tests/server-side-rendering/samples/state-is/main.svelte b/packages/svelte/tests/server-side-rendering/samples/state-is/main.svelte
deleted file mode 100644
index 17a859cd87..0000000000
--- a/packages/svelte/tests/server-side-rendering/samples/state-is/main.svelte
+++ /dev/null
@@ -1,10 +0,0 @@
-<script>
-	const obj = {};
-	const a = $state(obj)
-	const b= $state(obj)
-</script>
-
-<p>{a === obj}</p>
-<p>{$state.is(a, obj)}</p>
-<p>{a === b}</p>
-<p>{$state.is(a, b)}</p>
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 36f7a97229..5b527db2e4 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2935,27 +2935,6 @@ declare namespace $state {
 	 */
 	export function snapshot<T>(state: T): Snapshot<T>;
 
-	/**
-	 * Compare two values, one or both of which is a reactive `$state(...)` proxy.
-	 *
-	 * Example:
-	 * ```ts
-	 * <script>
-	 *	 let foo = $state({});
-	 *	 let bar = {};
-	 *
-	 *	 foo.bar = bar;
-	 *
-	 *	 console.log(foo.bar === bar); // false — `foo.bar` is a reactive proxy
-	 *   console.log($state.is(foo.bar, bar)); // true
-	 * </script>
-	 * ```
-	 *
-	 * https://svelte-5-preview.vercel.app/docs/runes#$state.is
-	 *
-	 */
-	export function is(a: any, b: any): boolean;
-
 	// prevent intellisense from being unhelpful
 	/** @deprecated */
 	export const apply: never;

From b2214d1c5b24d8c21e2d957eede02666aa691fec Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 20 Aug 2024 09:46:35 -0400
Subject: [PATCH 157/196] Version Packages (next) (#12920)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  4 ++++
 packages/svelte/CHANGELOG.md   | 12 ++++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index bfa8c2a352..4cf0c29449 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -192,6 +192,7 @@
     "few-mugs-fail",
     "few-teachers-know",
     "few-zoos-own",
+    "fifty-actors-agree",
     "fifty-masks-give",
     "fifty-rice-wait",
     "fifty-steaks-float",
@@ -265,6 +266,7 @@
     "gorgeous-coats-jog",
     "gorgeous-hats-wonder",
     "gorgeous-monkeys-carry",
+    "gorgeous-pans-sort",
     "gorgeous-singers-rest",
     "great-fans-unite",
     "great-icons-retire",
@@ -293,6 +295,7 @@
     "heavy-ducks-leave",
     "heavy-ears-rule",
     "heavy-feet-attend",
+    "heavy-houses-pay",
     "hip-balloons-begin",
     "hip-garlics-tap",
     "hip-goats-smoke",
@@ -594,6 +597,7 @@
     "shiny-starfishes-cross",
     "short-buses-camp",
     "short-countries-rush",
+    "short-starfishes-beg",
     "shy-fishes-drive",
     "shy-scissors-smile",
     "silent-apes-report",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 53d033cff4..b5efac865a 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,17 @@
 # svelte
 
+## 5.0.0-next.227
+
+### Patch Changes
+
+- breaking: disallow `Object.defineProperty` on state proxies with non-basic descriptors ([#12916](https://github.com/sveltejs/svelte/pull/12916))
+
+- breaking: allow frozen objects to be proxied ([#12916](https://github.com/sveltejs/svelte/pull/12916))
+
+- breaking: avoid mutations to underlying proxied object with $state ([#12916](https://github.com/sveltejs/svelte/pull/12916))
+
+- breaking: remove $state.is rune ([#12916](https://github.com/sveltejs/svelte/pull/12916))
+
 ## 5.0.0-next.226
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index a363b113c2..31e0c603df 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.226",
+  "version": "5.0.0-next.227",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 324b1e8991..f6d2234f5d 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.226';
+export const VERSION = '5.0.0-next.227';
 export const PUBLIC_VERSION = '5';

From 23bce2da20ad45856c7f6a91b96d4a164fb80588 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 20 Aug 2024 10:11:34 -0400
Subject: [PATCH 158/196] feat: skip static nodes (#12914)

* step one

* WIP

* more

* fix

* collapse sequential sibling calls

* working

* working but messy

* tidy up

* unused

* tweak

* tweak

* tidy

* tweak

* tweak

* revert

* changeset

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

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* revert this bit

* align

* comments

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .changeset/ten-trainers-juggle.md             |   5 +
 .../client/visitors/shared/fragment.js        | 154 +++++++++++-------
 .../src/internal/client/dom/operations.js     |  18 +-
 .../_expected/client/main.svelte.js           |  10 +-
 .../purity/_expected/client/index.svelte.js   |   4 +-
 .../_expected/client/index.svelte.js          |  18 +-
 .../_expected/server/index.svelte.js          |   6 +-
 .../samples/skip-static-subtree/index.svelte  |  15 ++
 .../_expected/client/index.svelte.js          |   4 +-
 9 files changed, 150 insertions(+), 84 deletions(-)
 create mode 100644 .changeset/ten-trainers-juggle.md

diff --git a/.changeset/ten-trainers-juggle.md b/.changeset/ten-trainers-juggle.md
new file mode 100644
index 0000000000..d76e5108a0
--- /dev/null
+++ b/.changeset/ten-trainers-juggle.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: skip over static nodes in compiled client code
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 c5b7c29216..cbe0272827 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,6 +1,7 @@
 /** @import { Expression } from 'estree' */
 /** @import { ExpressionTag, SvelteNode, Text } from '#compiler' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../../types' */
+import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { build_template_literal, build_update } from './utils.js';
 
@@ -9,42 +10,71 @@ import { build_template_literal, build_update } from './utils.js';
  * (e.g. `{a} b {c}`) into a single update function. Along the way it creates
  * corresponding template node references these updates are applied to.
  * @param {SvelteNode[]} nodes
- * @param {(is_text: boolean) => Expression} expression
+ * @param {(is_text: boolean) => Expression} initial
  * @param {boolean} is_element
  * @param {ComponentContext} context
  */
-export function process_children(nodes, expression, is_element, { visit, state }) {
+export function process_children(nodes, initial, is_element, { visit, state }) {
 	const within_bound_contenteditable = state.metadata.bound_contenteditable;
+	let prev = initial;
+	let skipped = 0;
 
 	/** @typedef {Array<Text | ExpressionTag>} Sequence */
-
 	/** @type {Sequence} */
 	let sequence = [];
 
+	/** @param {boolean} is_text */
+	function get_node(is_text) {
+		if (skipped === 0) {
+			return prev(is_text);
+		}
+
+		return b.call(
+			'$.sibling',
+			prev(false),
+			(is_text || skipped !== 1) && b.literal(skipped),
+			is_text && b.true
+		);
+	}
+
+	/**
+	 * @param {boolean} is_text
+	 * @param {string} name
+	 */
+	function flush_node(is_text, name) {
+		const expression = get_node(is_text);
+		let id = expression;
+
+		if (id.type !== 'Identifier') {
+			id = b.id(state.scope.generate(name));
+			state.init.push(b.var(id, expression));
+		}
+
+		prev = () => id;
+		skipped = 1; // the next node is `$.sibling(id)`
+
+		return id;
+	}
+
 	/**
 	 * @param {Sequence} sequence
 	 */
 	function flush_sequence(sequence) {
-		if (sequence.length === 1) {
-			const node = sequence[0];
-
-			if (node.type === 'Text') {
-				let prev = expression;
-				expression = () => b.call('$.sibling', prev(false));
-				state.template.push(node.raw);
-				return;
-			}
+		if (sequence.length === 1 && sequence[0].type === 'Text') {
+			skipped += 1;
+			state.template.push(sequence[0].raw);
+			return;
 		}
 
-		// 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 needs_hydration_check = sequence.length === 1;
-		const id = get_node_id(expression(needs_hydration_check), state, 'text');
-
 		state.template.push(' ');
 
 		const { has_state, has_call, value } = build_template_literal(sequence, visit, state);
 
+		// if this is a standalone `{expression}`, make sure we handle the case where
+		// no text node was created because the expression was empty during SSR
+		const is_text = sequence.length === 1;
+		const id = flush_node(is_text, 'text');
+
 		const update = b.stmt(b.call('$.set_text', id, value));
 
 		if (has_call && !within_bound_contenteditable) {
@@ -54,13 +84,9 @@ export function process_children(nodes, expression, is_element, { visit, state }
 		} else {
 			state.init.push(b.stmt(b.assignment('=', b.member(id, 'nodeValue'), value)));
 		}
-
-		expression = (is_text) => b.call('$.sibling', id, is_text && b.true);
 	}
 
-	for (let i = 0; i < nodes.length; i += 1) {
-		const node = nodes[i];
-
+	for (const node of nodes) {
 		if (node.type === 'Text' || node.type === 'ExpressionTag') {
 			sequence.push(node);
 		} else {
@@ -69,60 +95,62 @@ export function process_children(nodes, expression, is_element, { visit, state }
 				sequence = [];
 			}
 
-			if (
-				node.type === 'SvelteHead' ||
-				node.type === 'TitleElement' ||
-				node.type === 'SnippetBlock'
-			) {
-				// These nodes do not contribute to the sibling/child tree
-				// TODO what about e.g. ConstTag and all the other things that
-				// get hoisted inside clean_nodes?
-				visit(node, state);
+			let child_state = state;
+
+			if (is_static_element(node)) {
+				skipped += 1;
+			} else if (node.type === 'EachBlock' && nodes.length === 1 && is_element) {
+				node.metadata.is_controlled = true;
 			} else {
-				if (node.type === 'EachBlock' && nodes.length === 1 && is_element) {
-					node.metadata.is_controlled = true;
-					visit(node, state);
-				} else {
-					const id = get_node_id(
-						expression(false),
-						state,
-						node.type === 'RegularElement' ? node.name : 'node'
-					);
-
-					expression = (is_text) => b.call('$.sibling', id, is_text && b.true);
-
-					visit(node, {
-						...state,
-						node: id
-					});
-				}
+				const id = flush_node(false, node.type === 'RegularElement' ? node.name : 'node');
+				child_state = { ...state, node: id };
 			}
+
+			visit(node, child_state);
 		}
 	}
 
 	if (sequence.length > 0) {
-		// if the final item in a fragment is static text,
-		// we need to force `hydrate_node` to advance
-		if (sequence.length === 1 && sequence[0].type === 'Text' && nodes.length > 1) {
-			state.init.push(b.stmt(b.call('$.next')));
-		}
-
 		flush_sequence(sequence);
 	}
+
+	// if there are trailing static text nodes/elements,
+	// traverse to the last (n - 1) one when hydrating
+	if (skipped > 1) {
+		skipped -= 1;
+		state.init.push(b.stmt(get_node(false)));
+	}
 }
 
 /**
- * @param {Expression} expression
- * @param {ComponentClientTransformState} state
- * @param {string} name
+ *
+ * @param {SvelteNode} node
  */
-function get_node_id(expression, state, name) {
-	let id = expression;
+function is_static_element(node) {
+	if (node.type !== 'RegularElement') return false;
+	if (node.fragment.metadata.dynamic) return false;
 
-	if (id.type !== 'Identifier') {
-		id = b.id(state.scope.generate(name));
+	for (const attribute of node.attributes) {
+		if (attribute.type !== 'Attribute') {
+			return false;
+		}
+
+		if (is_event_attribute(attribute)) {
+			return false;
+		}
+
+		if (attribute.value !== true && !is_text_attribute(attribute)) {
+			return false;
+		}
 
-		state.init.push(b.var(id, expression));
+		if (node.name === 'option' && attribute.name === 'value') {
+			return false;
+		}
+
+		if (node.name.includes('-')) {
+			return false; // we're setting all attributes on custom elements through properties
+		}
 	}
-	return id;
+
+	return true;
 }
diff --git a/packages/svelte/src/internal/client/dom/operations.js b/packages/svelte/src/internal/client/dom/operations.js
index b86ea77947..76e5ca3cb2 100644
--- a/packages/svelte/src/internal/client/dom/operations.js
+++ b/packages/svelte/src/internal/client/dom/operations.js
@@ -70,6 +70,7 @@ export function create_text(value = '') {
  * @param {N} node
  * @returns {Node | null}
  */
+/*@__NO_SIDE_EFFECTS__*/
 export function get_first_child(node) {
 	return first_child_getter.call(node);
 }
@@ -79,6 +80,7 @@ export function get_first_child(node) {
  * @param {N} node
  * @returns {Node | null}
  */
+/*@__NO_SIDE_EFFECTS__*/
 export function get_next_sibling(node) {
 	return next_sibling_getter.call(node);
 }
@@ -137,17 +139,21 @@ export function first_child(fragment, is_text) {
 
 /**
  * Don't mark this as side-effect-free, hydration needs to walk all nodes
- * @template {Node} N
- * @param {N} node
+ * @param {TemplateNode} node
+ * @param {number} count
  * @param {boolean} is_text
  * @returns {Node | null}
  */
-export function sibling(node, is_text = false) {
-	if (!hydrating) {
-		return /** @type {TemplateNode} */ (get_next_sibling(node));
+export function sibling(node, count = 1, is_text = false) {
+	let next_sibling = hydrating ? hydrate_node : node;
+
+	while (count--) {
+		next_sibling = /** @type {TemplateNode} */ (get_next_sibling(next_sibling));
 	}
 
-	var next_sibling = /** @type {TemplateNode} */ (get_next_sibling(hydrate_node));
+	if (!hydrating) {
+		return next_sibling;
+	}
 
 	var type = next_sibling.nodeType;
 
diff --git a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
index ef070bf288..846acc67a6 100644
--- a/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js
@@ -9,17 +9,17 @@ export default function Main($$anchor) {
 	let y = () => 'test';
 	var fragment = root();
 	var div = $.first_child(fragment);
-	var svg = $.sibling($.sibling(div));
-	var custom_element = $.sibling($.sibling(svg));
-	var div_1 = $.sibling($.sibling(custom_element));
+	var svg = $.sibling(div, 2);
+	var custom_element = $.sibling(svg, 2);
+	var div_1 = $.sibling(custom_element, 2);
 
 	$.template_effect(() => $.set_attribute(div_1, "foobar", y()));
 
-	var svg_1 = $.sibling($.sibling(div_1));
+	var svg_1 = $.sibling(div_1, 2);
 
 	$.template_effect(() => $.set_attribute(svg_1, "viewBox", y()));
 
-	var custom_element_1 = $.sibling($.sibling(svg_1));
+	var custom_element_1 = $.sibling(svg_1, 2);
 
 	$.template_effect(() => $.set_custom_element_data(custom_element_1, "fooBar", y()));
 
diff --git a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
index 8a2daa877f..e054bd0c4a 100644
--- a/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/purity/_expected/client/index.svelte.js
@@ -13,11 +13,11 @@ export default function Purity($$anchor) {
 
 	p.textContent = Math.max(min, Math.min(max, number));
 
-	var p_1 = $.sibling($.sibling(p));
+	var p_1 = $.sibling(p, 2);
 
 	p_1.textContent = location.href;
 
-	var node = $.sibling($.sibling(p_1));
+	var node = $.sibling(p_1, 2);
 
 	Child(node, { prop: encodeURIComponent(value) });
 	$.append($$anchor, fragment);
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
index 20d29d5359..5eacd941ea 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
@@ -1,10 +1,20 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
-var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header>`);
+var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!></main>`, 1);
 
-export default function Skip_static_subtree($$anchor) {
-	var header = root();
+export default function Skip_static_subtree($$anchor, $$props) {
+	var fragment = root();
+	var main = $.sibling($.first_child(fragment), 2);
+	var h1 = $.child(main);
+	var text = $.child(h1);
 
-	$.append($$anchor, header);
+	$.reset(h1);
+
+	var node = $.sibling(h1, 10);
+
+	$.html(node, () => $$props.content, false, false);
+	$.reset(main);
+	$.template_effect(() => $.set_text(text, $$props.title));
+	$.append($$anchor, fragment);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
index 77851c330e..8ea5fc9b13 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
@@ -1,5 +1,7 @@
 import * as $ from "svelte/internal/server";
 
-export default function Skip_static_subtree($$payload) {
-	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header>`;
+export default function Skip_static_subtree($$payload, $$props) {
+	let { title, content } = $$props;
+
+	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)}</main>`;
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte b/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
index f5ee042585..001196a879 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
@@ -1,6 +1,21 @@
+<script>
+	let { title, content } = $props();
+</script>
+
 <header>
 	<nav>
 		<a href="/">Home</a>
 		<a href="/away">Away</a>
 	</nav>
 </header>
+
+<main>
+	<h1>{title}</h1>
+	<div class="static">
+		<p>we don't need to traverse these nodes</p>
+	</div>
+	<p>or</p>
+	<p>these</p>
+	<p>ones</p>
+	{@html content}
+</main>
diff --git a/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
index 8f12fd7913..bfd57166d8 100644
--- a/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js
@@ -18,11 +18,11 @@ export default function State_proxy_literal($$anchor) {
 
 	$.remove_input_defaults(input);
 
-	var input_1 = $.sibling($.sibling(input));
+	var input_1 = $.sibling(input, 2);
 
 	$.remove_input_defaults(input_1);
 
-	var button = $.sibling($.sibling(input_1));
+	var button = $.sibling(input_1, 2);
 
 	button.__click = [reset, str, tpl];
 	$.bind_value(input, () => $.get(str), ($$value) => $.set(str, $$value));

From 9d9ed33d0cd8cdd2bcc9b42161364ca1ba814bcd Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 20 Aug 2024 10:17:48 -0400
Subject: [PATCH 159/196] Version Packages (next) (#12922)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 1 +
 packages/svelte/CHANGELOG.md   | 6 ++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 4cf0c29449..39fa455826 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -729,6 +729,7 @@
     "ten-singers-cough",
     "ten-teachers-travel",
     "ten-ties-repair",
+    "ten-trainers-juggle",
     "ten-worms-reflect",
     "tender-lemons-judge",
     "tender-rocks-walk",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index b5efac865a..252115599f 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.0.0-next.228
+
+### Patch Changes
+
+- feat: skip over static nodes in compiled client code ([#12914](https://github.com/sveltejs/svelte/pull/12914))
+
 ## 5.0.0-next.227
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 31e0c603df..65c4362243 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.227",
+  "version": "5.0.0-next.228",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index f6d2234f5d..47d3fad170 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.227';
+export const VERSION = '5.0.0-next.228';
 export const PUBLIC_VERSION = '5';

From 02c86b1973652ae06581ff42d52192a2f0a5dfff Mon Sep 17 00:00:00 2001
From: Paolo Ricciuti <ricciutipaolo@gmail.com>
Date: Tue, 20 Aug 2024 16:44:23 +0200
Subject: [PATCH 160/196] feat: error on invalid component name (#12821)

* feat: treat tag with `[` as a component, even if lowercase

* chore: simpler regex

Co-authored-by: Conduitry <git@chor.date>

* feat: error on invalid component name

* fix: fully revert dot notation test

* tweak error message

---------

Co-authored-by: Conduitry <git@chor.date>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/tender-bats-switch.md                         | 5 +++++
 packages/svelte/messages/compile-errors/template.md      | 4 ++++
 packages/svelte/src/compiler/errors.js                   | 9 +++++++++
 .../svelte/src/compiler/phases/1-parse/state/element.js  | 6 ++++++
 .../samples/component-invalid-name/_config.js            | 9 +++++++++
 .../samples/component-invalid-name/main.svelte           | 1 +
 6 files changed, 34 insertions(+)
 create mode 100644 .changeset/tender-bats-switch.md
 create mode 100644 packages/svelte/tests/compiler-errors/samples/component-invalid-name/_config.js
 create mode 100644 packages/svelte/tests/compiler-errors/samples/component-invalid-name/main.svelte

diff --git a/.changeset/tender-bats-switch.md b/.changeset/tender-bats-switch.md
new file mode 100644
index 0000000000..84467f43fe
--- /dev/null
+++ b/.changeset/tender-bats-switch.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: error on invalid component name
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
index affd44e943..95e60c0cf5 100644
--- a/packages/svelte/messages/compile-errors/template.md
+++ b/packages/svelte/messages/compile-errors/template.md
@@ -100,6 +100,10 @@
 
 > This type of directive is not valid on components
 
+## component_invalid_name
+
+> Component name must be a valid variable name or dot notation expression
+
 ## const_tag_cycle
 
 > Cyclical dependency detected: %cycle%
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index b174f69c20..f0fca61e9a 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -786,6 +786,15 @@ export function component_invalid_directive(node) {
 	e(node, "component_invalid_directive", "This type of directive is not valid on components");
 }
 
+/**
+ * Component name must be a valid variable name or dot notation expression
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function component_invalid_name(node) {
+	e(node, "component_invalid_name", "Component name must be a valid variable name or dot notation expression");
+}
+
 /**
  * Cyclical dependency detected: %cycle%
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/phases/1-parse/state/element.js b/packages/svelte/src/compiler/phases/1-parse/state/element.js
index 12e75400be..99d3aeff10 100644
--- a/packages/svelte/src/compiler/phases/1-parse/state/element.js
+++ b/packages/svelte/src/compiler/phases/1-parse/state/element.js
@@ -75,6 +75,8 @@ function parent_is_shadowroot_template(stack) {
 const regex_closing_textarea_tag = /^<\/textarea(\s[^>]*)?>/i;
 const regex_closing_comment = /-->/;
 const regex_component_name = /^(?:[A-Z]|[A-Za-z][A-Za-z0-9_$]*\.)/;
+const regex_valid_component_name =
+	/^(?:[A-Z][A-Za-z0-9_$.]*|[a-z][A-Za-z0-9_$]*\.[A-Za-z0-9_$])[A-Za-z0-9_$.]*$/;
 
 /** @param {Parser} parser */
 export default function element(parser) {
@@ -136,6 +138,10 @@ export default function element(parser) {
 					? 'SlotElement'
 					: 'RegularElement';
 
+	if (type === 'Component' && !regex_valid_component_name.test(name)) {
+		e.component_invalid_name({ start: start + 1, end: start + name.length + 1 });
+	}
+
 	/** @type {Compiler.ElementLike} */
 	const element =
 		type === 'RegularElement'
diff --git a/packages/svelte/tests/compiler-errors/samples/component-invalid-name/_config.js b/packages/svelte/tests/compiler-errors/samples/component-invalid-name/_config.js
new file mode 100644
index 0000000000..df78a691df
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/component-invalid-name/_config.js
@@ -0,0 +1,9 @@
+import { test } from '../../test';
+
+export default test({
+	error: {
+		code: 'component_invalid_name',
+		message: 'Component name must be a valid variable name or dot notation expression',
+		position: [1, 14]
+	}
+});
diff --git a/packages/svelte/tests/compiler-errors/samples/component-invalid-name/main.svelte b/packages/svelte/tests/compiler-errors/samples/component-invalid-name/main.svelte
new file mode 100644
index 0000000000..5c7ec3188a
--- /dev/null
+++ b/packages/svelte/tests/compiler-errors/samples/component-invalid-name/main.svelte
@@ -0,0 +1 @@
+<Components[1] />

From 44a780fb9ce994ccba4fb64563b8f9d4941eb164 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 20 Aug 2024 10:49:11 -0400
Subject: [PATCH 161/196] bump sveltekit (#12923)

---
 pnpm-lock.yaml                      | 308 +++++++++++++++++-----------
 sites/svelte-5-preview/package.json |   2 +-
 2 files changed, 189 insertions(+), 121 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b49cc8b46b..33baf92b1d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,7 +16,7 @@ importers:
         version: 2.27.6
       '@sveltejs/eslint-config':
         specifier: ^8.0.1
-        version: 8.0.1(@stylistic/eslint-plugin-js@1.8.0(eslint@9.6.0))(eslint-config-prettier@9.1.0(eslint@9.6.0))(eslint-plugin-n@17.9.0(eslint@9.6.0))(eslint-plugin-svelte@2.38.0(eslint@9.6.0)(svelte@5.0.0-next.179))(eslint@9.6.0)(typescript-eslint@8.0.0-alpha.34(eslint@9.6.0)(typescript@5.5.2))(typescript@5.5.2)
+        version: 8.0.1(@stylistic/eslint-plugin-js@1.8.0(eslint@9.6.0))(eslint-config-prettier@9.1.0(eslint@9.6.0))(eslint-plugin-n@17.9.0(eslint@9.6.0))(eslint-plugin-svelte@2.38.0(eslint@9.6.0)(svelte@5.0.0-next.219))(eslint@9.6.0)(typescript-eslint@8.0.0-alpha.34(eslint@9.6.0)(typescript@5.5.2))(typescript@5.5.2)
       '@svitejs/changesets-changelog-github-compact':
         specifier: ^1.1.0
         version: 1.1.0
@@ -43,7 +43,7 @@ importers:
         version: 3.2.4
       prettier-plugin-svelte:
         specifier: ^3.1.2
-        version: 3.1.2(prettier@3.2.4)(svelte@5.0.0-next.179)
+        version: 3.1.2(prettier@3.2.4)(svelte@5.0.0-next.219)
       typescript:
         specifier: ^5.5.2
         version: 5.5.2
@@ -246,22 +246,22 @@ importers:
         version: 1.2.1
       '@sveltejs/adapter-static':
         specifier: ^3.0.1
-        version: 3.0.1(@sveltejs/kit@2.5.2(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))
+        version: 3.0.1(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))
       '@sveltejs/adapter-vercel':
         specifier: ^5.0.0
-        version: 5.1.0(@sveltejs/kit@2.5.2(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))
+        version: 5.1.0(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))
       '@sveltejs/kit':
-        specifier: ^2.5.0
-        version: 2.5.2(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+        specifier: ^2.5.24
+        version: 2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       '@sveltejs/site-kit':
         specifier: 6.0.0-next.64
-        version: 6.0.0-next.64(@sveltejs/kit@2.5.2(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)
+        version: 6.0.0-next.64(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)
       '@sveltejs/vite-plugin-svelte':
         specifier: ^4.0.0-next.3
         version: 4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       '@vercel/speed-insights':
         specifier: ^1.0.0
-        version: 1.0.11(@sveltejs/kit@2.5.2(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)
+        version: 1.0.11(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)
       esrap:
         specifier: ^1.2.2
         version: 1.2.2
@@ -279,7 +279,7 @@ importers:
         version: link:../../packages/svelte
       svelte-check:
         specifier: ^3.6.3
-        version: 3.6.3(postcss-load-config@3.1.4(postcss@8.4.39))(postcss@8.4.39)(sass@1.70.0)(svelte@packages+svelte)
+        version: 3.6.3(postcss-load-config@3.1.4(postcss@8.4.41))(postcss@8.4.41)(sass@1.70.0)(svelte@packages+svelte)
       tslib:
         specifier: ^2.6.2
         version: 2.6.2
@@ -388,10 +388,10 @@ importers:
         version: 4.2.9
       svelte-check:
         specifier: ^3.6.3
-        version: 3.6.3(postcss-load-config@3.1.4(postcss@8.4.39))(postcss@8.4.39)(sass@1.70.0)(svelte@4.2.9)
+        version: 3.6.3(postcss-load-config@3.1.4(postcss@8.4.41))(postcss@8.4.41)(sass@1.70.0)(svelte@4.2.9)
       svelte-preprocess:
         specifier: ^5.1.3
-        version: 5.1.3(postcss-load-config@3.1.4(postcss@8.4.39))(postcss@8.4.39)(sass@1.70.0)(svelte@4.2.9)(typescript@5.5.2)
+        version: 5.1.3(postcss-load-config@3.1.4(postcss@8.4.41))(postcss@8.4.41)(sass@1.70.0)(svelte@4.2.9)(typescript@5.5.2)
       tiny-glob:
         specifier: ^0.2.9
         version: 0.2.9
@@ -512,8 +512,8 @@ packages:
       '@codemirror/view': ^6.0.0
       '@lezer/common': ^1.0.0
 
-  '@codemirror/autocomplete@6.17.0':
-    resolution: {integrity: sha512-fdfj6e6ZxZf8yrkMHUSJJir7OJkHkZKaOZGzLWIYp2PZ3jd+d+UjG8zVPqJF6d3bKxkhvXTPan/UZ1t7Bqm0gA==}
+  '@codemirror/autocomplete@6.18.0':
+    resolution: {integrity: sha512-5DbOvBbY4qW5l57cjDsmmpDh3/TeK1vXfTHa+BUMrRzdWdcxKZ4U4V7vQaTtOpApNU4kLS4FQ6cINtLg245LXA==}
     peerDependencies:
       '@codemirror/language': ^6.0.0
       '@codemirror/state': ^6.0.0
@@ -568,8 +568,8 @@ packages:
   '@codemirror/view@6.24.0':
     resolution: {integrity: sha512-zK6m5pNkdhdJl8idPP1gA4N8JKTiSsOz8U/Iw+C1ChMwyLG7+MLiNXnH/wFuAk6KeGEe33/adOiAh5jMqee03w==}
 
-  '@codemirror/view@6.28.4':
-    resolution: {integrity: sha512-QScv95fiviSQ/CaVGflxAvvvDy/9wi0RFyDl4LkHHWiMr/UPebyuTspmYSeN5Nx6eujcPYwsQzA6ZIZucKZVHQ==}
+  '@codemirror/view@6.32.0':
+    resolution: {integrity: sha512-AgVNvED2QTsZp5e3syoHLsrWtwJFYWdx1Vr/m3f4h1ATQz0ax60CfXF3Htdmk69k2MlYZw8gXesnQdHtzyVmAw==}
 
   '@emnapi/runtime@0.45.0':
     resolution: {integrity: sha512-Txumi3td7J4A/xTTwlssKieHKTGl3j4A1tglBx72auZ49YK7ePY6XZricgIg9mnZT4xPfA+UPCUdnhRuEFDL+w==}
@@ -1090,6 +1090,9 @@ packages:
   '@lezer/highlight@1.2.0':
     resolution: {integrity: sha512-WrS5Mw51sGrpqjlh3d4/fOwpEV2Hd3YOkp9DBt4k8XZQcoTHZFB7sx030A6OcahF4J1nDQAa3jXlTVVYH50IFA==}
 
+  '@lezer/highlight@1.2.1':
+    resolution: {integrity: sha512-Z5duk4RN/3zuVO7Jq0pGLJ3qynpxUVsh7IbUbGj88+uV2ApSAn6kWg2au3iJb+0Zi7kKtqffIESgNcRXWZWmSA==}
+
   '@lezer/html@1.3.10':
     resolution: {integrity: sha512-dqpT8nISx/p9Do3AchvYGV3qYc4/rKr3IBZxlHmpIKam56P47RSHkSF5f13Vu9hebS1jM0HmtJIwLbWz1VIY6w==}
 
@@ -1152,6 +1155,9 @@ packages:
   '@polka/url@1.0.0-next.24':
     resolution: {integrity: sha512-2LuNTFBIO0m7kKIQvvPHN6UE63VjpmL9rnEEaOOaiSPbZK+zUOYIzBAWcED+3XYzhYsd/0mD57VdxAEqqV52CQ==}
 
+  '@polka/url@1.0.0-next.25':
+    resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==}
+
   '@replit/codemirror-lang-svelte@6.0.0':
     resolution: {integrity: sha512-U2OqqgMM6jKelL0GNWbAmqlu1S078zZNoBqlJBW+retTc5M4Mha6/Y2cf4SVg6ddgloJvmcSpt4hHrVoM4ePRA==}
     peerDependencies:
@@ -1450,12 +1456,12 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.3
 
-  '@sveltejs/kit@2.5.2':
-    resolution: {integrity: sha512-1Pm2lsBYURQsjnLyZa+jw75eVD4gYHxGRwPyFe4DAmB3FjTVR8vRNWGeuDLGFcKMh/B1ij6FTUrc9GrerogCng==}
+  '@sveltejs/kit@2.5.24':
+    resolution: {integrity: sha512-Nr2oxsCsDfEkdS/zzQQQbsPYTbu692Qs3/iE3L7VHzCVjG2+WujF9oMUozWI7GuX98KxYSoPMlAsfmDLSg44hQ==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
-      '@sveltejs/vite-plugin-svelte': ^3.0.0
+      '@sveltejs/vite-plugin-svelte': ^3.0.0 || ^4.0.0-next.1
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.3
 
@@ -1529,8 +1535,8 @@ packages:
   '@types/cookie@0.6.0':
     resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==}
 
-  '@types/eslint@8.56.10':
-    resolution: {integrity: sha512-Shavhk87gCtY2fhXDctcfS3e6FdxWkCx1iUZ9eEUbh7rTqlZT0/IzOkCOVt0fCjcFuZ9FPYfuezTBImfHCDBGQ==}
+  '@types/eslint@8.56.11':
+    resolution: {integrity: sha512-sVBpJMf7UPo/wGecYOpk2aQya2VUGeHhe38WG7/mN5FufNSubf5VT9Uh9Uyp8/eLJpu1/tuhJ/qTo4mhSB4V4Q==}
 
   '@types/estree@1.0.5':
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
@@ -1766,6 +1772,7 @@ packages:
   are-we-there-yet@2.0.0:
     resolution: {integrity: sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==}
     engines: {node: '>=10'}
+    deprecated: This package is no longer supported.
 
   argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
@@ -1792,6 +1799,10 @@ packages:
   axobject-query@4.0.0:
     resolution: {integrity: sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==}
 
+  axobject-query@4.1.0:
+    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
+    engines: {node: '>= 0.4'}
+
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -2013,6 +2024,15 @@ packages:
       supports-color:
         optional: true
 
+  debug@4.3.6:
+    resolution: {integrity: sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==}
+    engines: {node: '>=6.0'}
+    peerDependencies:
+      supports-color: '*'
+    peerDependenciesMeta:
+      supports-color:
+        optional: true
+
   decimal.js@10.4.3:
     resolution: {integrity: sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA==}
 
@@ -2071,6 +2091,9 @@ packages:
   devalue@4.3.2:
     resolution: {integrity: sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==}
 
+  devalue@5.0.0:
+    resolution: {integrity: sha512-gO+/OMXF7488D+u3ue+G7Y4AA3ZmUnB3eHJXmBTgNHvr4ZNzl36A0ZtG+XCRNYCkYx/bFmw4qtkoFLa+wSrwAA==}
+
   diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -2109,8 +2132,8 @@ packages:
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
-  enhanced-resolve@5.17.0:
-    resolution: {integrity: sha512-dwDPwZL0dmye8Txp2gzFmA6sxALaSvdRDjPH0viLcKrtlOL3tw62nWWweVD1SdILDTJrbrL6tdWVN58Wo6U3eA==}
+  enhanced-resolve@5.17.1:
+    resolution: {integrity: sha512-LMHl3dXhTcfv8gM4kEzIUeTQ+7fpdA0l2tUf34BddXPkz2A5xJ5L/Pchd5BL6rdccM9QGvu0sWZzK1Z1t4wwyg==}
     engines: {node: '>=10.13.0'}
 
   enquirer@2.4.1:
@@ -2362,6 +2385,7 @@ packages:
   gauge@3.0.2:
     resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
     engines: {node: '>=10'}
+    deprecated: This package is no longer supported.
 
   get-func-name@2.0.2:
     resolution: {integrity: sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==}
@@ -2370,8 +2394,8 @@ packages:
     resolution: {integrity: sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==}
     engines: {node: '>=16'}
 
-  get-tsconfig@4.7.5:
-    resolution: {integrity: sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==}
+  get-tsconfig@4.7.6:
+    resolution: {integrity: sha512-ZAqrLlu18NbDdRaHq+AKXzAmqIUPswPWKUchfytdAjiRFnCe5ojG2bstg6mRiZabkKfCoL/e98pbBELIV/YCeA==}
 
   gifwrap@0.10.1:
     resolution: {integrity: sha512-2760b1vpJHNmLzZ/ubTtNnEx5WApN/PYWJvXvgS+tL1egTTthayFYIQQNi136FLEDcN/IyEY2EcGpIITD6eYUw==}
@@ -2386,10 +2410,12 @@ packages:
 
   glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   glob@8.1.0:
     resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==}
     engines: {node: '>=12'}
+    deprecated: Glob versions prior to v9 are no longer supported
 
   global@4.4.0:
     resolution: {integrity: sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==}
@@ -2402,8 +2428,8 @@ packages:
     resolution: {integrity: sha512-UzcJi88Hw//CurUIRa9Jxb0vgOCcuD/MNjwmXp633cyaRKkCWACkoqHCtfZv43b1kqXGg/fpOa8bwgacCeXsVg==}
     engines: {node: '>=18'}
 
-  globals@15.8.0:
-    resolution: {integrity: sha512-VZAJ4cewHTExBWDHR6yptdIBlx9YSSZuwojj9Nt5mBRXQzrKakDsVKQ1J63sklLvzAJm0X5+RpO4i3Y2hcOnFw==}
+  globals@15.9.0:
+    resolution: {integrity: sha512-SmSKyLLKFbSr6rptvP8izbyxJL4ILwqO9Jg23UA0sDlGlu58V59D1//I3vlc0KJphVdUR7vMjHIplYnzBxorQA==}
     engines: {node: '>=18'}
 
   globalyzer@0.1.0:
@@ -2489,6 +2515,10 @@ packages:
     resolution: {integrity: sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==}
     engines: {node: '>= 4'}
 
+  ignore@5.3.2:
+    resolution: {integrity: sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==}
+    engines: {node: '>= 4'}
+
   image-q@4.0.0:
     resolution: {integrity: sha512-PfJGVgIfKQJuq3s0tTDOKtztksibuUEbJQIYT3by6wctQo+Rdlh7ef4evJ5NCdxY4CfMbvFkocEwbl4BF8RlJw==}
 
@@ -2506,12 +2536,16 @@ packages:
   import-meta-resolve@4.0.0:
     resolution: {integrity: sha512-okYUR7ZQPH+efeuMJGlq4f8ubUgO50kByRPyt/Cy1Io4PSRsPjxME+YlVaCOx+NIToW7hCsZNFJyTPFFKepRSA==}
 
+  import-meta-resolve@4.1.0:
+    resolution: {integrity: sha512-I6fiaX09Xivtk+THaMfAwnA3MVA5Big1WHF1Dfx9hFuvNIWpXnorlkzhcQf6ehrqQiiZECRt1poOAkPmer3ruw==}
+
   imurmurhash@0.1.4:
     resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
     engines: {node: '>=0.8.19'}
 
   inflight@1.0.6:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
+    deprecated: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
 
   inherits@2.0.4:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
@@ -2782,6 +2816,9 @@ packages:
   magic-string@0.30.10:
     resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}
 
+  magic-string@0.30.11:
+    resolution: {integrity: sha512-+Wri9p0QHMy+545hKww7YAu5NyzF8iomPL/RQazugQ9+Ez4Ic3mERMd8ZTX5rfK944j+560ZJi8iAwgak1Ac7A==}
+
   magic-string@0.30.5:
     resolution: {integrity: sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==}
     engines: {node: '>=12'}
@@ -2972,6 +3009,7 @@ packages:
 
   npmlog@5.0.1:
     resolution: {integrity: sha512-AqZtDUWOMKs1G/8lwylVjrdYgqA4d9nu8hc+0gzRxlDb1I10+FHBGMXs6aiQHFdCUUlqH99MUMuLfzWDNDtfxw==}
+    deprecated: This package is no longer supported.
 
   nwsapi@2.2.7:
     resolution: {integrity: sha512-ub5E4+FBPKwAZx0UwIQOjYWGHTEq5sPqHQNRN8Z9e4A7u3Tj1weLJsL59yH9vmvqEtBHaOmT6cYQKIZOxp35FQ==}
@@ -3106,6 +3144,7 @@ packages:
 
   phin@2.9.3:
     resolution: {integrity: sha512-CzFr90qM24ju5f88quFC/6qohjC144rehe5n6DH900lgXmUe86+xCKc10ev56gRKC4/BkHUoG4uSiQgBiIXwDA==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
 
   picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
@@ -3178,8 +3217,8 @@ packages:
     peerDependencies:
       postcss: ^8.4.29
 
-  postcss-selector-parser@6.1.0:
-    resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==}
+  postcss-selector-parser@6.1.2:
+    resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==}
     engines: {node: '>=4'}
 
   postcss-value-parser@4.2.0:
@@ -3189,8 +3228,8 @@ packages:
     resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==}
     engines: {node: ^10 || ^12 || >=14}
 
-  postcss@8.4.39:
-    resolution: {integrity: sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==}
+  postcss@8.4.41:
+    resolution: {integrity: sha512-TesUflQ0WKZqAvg52PWL6kHgLKP6xB6heTOdoYM0Wt2UHyxNa4K25EZZMgKns3BH1RLVbZCREPpLY0rhnNoHVQ==}
     engines: {node: ^10 || ^12 || >=14}
 
   preferred-pm@3.1.2:
@@ -3313,10 +3352,12 @@ packages:
 
   rimraf@2.7.1:
     resolution: {integrity: sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
   rimraf@3.0.2:
     resolution: {integrity: sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==}
+    deprecated: Rimraf versions prior to v4 are no longer supported
     hasBin: true
 
   rollup@4.9.5:
@@ -3380,8 +3421,8 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
-  semver@7.6.2:
-    resolution: {integrity: sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==}
+  semver@7.6.3:
+    resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==}
     engines: {node: '>=10'}
     hasBin: true
 
@@ -3394,6 +3435,9 @@ packages:
   set-cookie-parser@2.6.0:
     resolution: {integrity: sha512-RVnVQxTXuerk653XfuliOxBP81Sf0+qfQE73LIYKcyMYHG94AuH0kgrQpRDuTZnSmjpysHmzxJXKNfa6PjFhyQ==}
 
+  set-cookie-parser@2.7.0:
+    resolution: {integrity: sha512-lXLOiqpkUumhRdFF3k1osNXCy9akgx/dyPZ5p8qAg9seJzXr5ZrlqZuWIMuY6ejOsVLE6flJ5/h3lsn57fQ/PQ==}
+
   sharp@0.33.2:
     resolution: {integrity: sha512-WlYOPyyPDiiM07j/UO+E720ju6gtNtHjEGg5vovUk1Lgxyjm2LFO+37Nt/UI3MMh2l6hxTWQWi7qk3cXJTutcQ==}
     engines: {libvips: '>=8.15.1', node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@@ -3554,11 +3598,11 @@ packages:
     peerDependencies:
       svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
 
-  svelte-eslint-parser@0.39.2:
-    resolution: {integrity: sha512-87UwLuWTtDIuzWOhOi1zBL5wYVd07M5BK1qZ57YmXJB5/UmjUNJqGy3XSOhPqjckY1dATNV9y+mx+nI0WH6HPA==}
+  svelte-eslint-parser@0.41.0:
+    resolution: {integrity: sha512-L6f4hOL+AbgfBIB52Z310pg1d2QjRqm7wy3kI1W6hhdhX5bvu7+f0R6w4ykp5HoDdzq+vGhIJmsisaiJDGmVfA==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
-      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0-next.115
+      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0-next.191
     peerDependenciesMeta:
       svelte:
         optional: true
@@ -3633,8 +3677,8 @@ packages:
     resolution: {integrity: sha512-hsoB/WZGEPFXeRRLPhPrbRz67PhP6sqYgvwcAs+gWdSQSvNDw+/lTeUJSWe5h2xC97Fz/8QxAOqItwBzNJPU8w==}
     engines: {node: '>=16'}
 
-  svelte@5.0.0-next.179:
-    resolution: {integrity: sha512-z2x/RcctbQ95vNt52p/+fCJzyU2RVmK03V6thiFT/gblNHw/qONb6hZXfxfCgIsCWjm8thDcgDcmRClZj/Ging==}
+  svelte@5.0.0-next.219:
+    resolution: {integrity: sha512-f6qHmE2TNVmx9GzBR5tzQQaAVTq/Bll8rYhWRbkYjoCpA+WgkAK3I276SejLv6u/IeVQE7TX8s7ljyanvbtFBA==}
     engines: {node: '>=18'}
 
   symbol-tree@3.2.4:
@@ -4225,18 +4269,18 @@ snapshots:
       '@codemirror/view': 6.24.0
       '@lezer/common': 1.2.1
 
-  '@codemirror/autocomplete@6.12.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.0)(@codemirror/view@6.28.4)(@lezer/common@1.2.1)':
+  '@codemirror/autocomplete@6.12.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.0)(@codemirror/view@6.32.0)(@lezer/common@1.2.1)':
     dependencies:
       '@codemirror/language': 6.10.1
       '@codemirror/state': 6.4.0
-      '@codemirror/view': 6.28.4
+      '@codemirror/view': 6.32.0
       '@lezer/common': 1.2.1
 
-  '@codemirror/autocomplete@6.17.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.28.4)(@lezer/common@1.2.1)':
+  '@codemirror/autocomplete@6.18.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.32.0)(@lezer/common@1.2.1)':
     dependencies:
       '@codemirror/language': 6.10.2
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.28.4
+      '@codemirror/view': 6.32.0
       '@lezer/common': 1.2.1
 
   '@codemirror/commands@6.3.3':
@@ -4256,9 +4300,9 @@ snapshots:
     transitivePeerDependencies:
       - '@codemirror/view'
 
-  '@codemirror/lang-css@6.2.1(@codemirror/view@6.28.4)':
+  '@codemirror/lang-css@6.2.1(@codemirror/view@6.32.0)':
     dependencies:
-      '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.0)(@codemirror/view@6.28.4)(@lezer/common@1.2.1)
+      '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.0)(@codemirror/view@6.32.0)(@lezer/common@1.2.1)
       '@codemirror/language': 6.10.1
       '@codemirror/state': 6.4.0
       '@lezer/common': 1.2.1
@@ -4280,12 +4324,12 @@ snapshots:
 
   '@codemirror/lang-html@6.4.9':
     dependencies:
-      '@codemirror/autocomplete': 6.17.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.28.4)(@lezer/common@1.2.1)
-      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.28.4)
+      '@codemirror/autocomplete': 6.18.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.32.0)(@lezer/common@1.2.1)
+      '@codemirror/lang-css': 6.2.1(@codemirror/view@6.32.0)
       '@codemirror/lang-javascript': 6.2.2
       '@codemirror/language': 6.10.2
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.28.4
+      '@codemirror/view': 6.32.0
       '@lezer/common': 1.2.1
       '@lezer/css': 1.1.8
       '@lezer/html': 1.3.10
@@ -4302,11 +4346,11 @@ snapshots:
 
   '@codemirror/lang-javascript@6.2.2':
     dependencies:
-      '@codemirror/autocomplete': 6.17.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.28.4)(@lezer/common@1.2.1)
+      '@codemirror/autocomplete': 6.18.0(@codemirror/language@6.10.2)(@codemirror/state@6.4.1)(@codemirror/view@6.32.0)(@lezer/common@1.2.1)
       '@codemirror/language': 6.10.2
       '@codemirror/lint': 6.8.1
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.28.4
+      '@codemirror/view': 6.32.0
       '@lezer/common': 1.2.1
       '@lezer/javascript': 1.4.15
 
@@ -4337,9 +4381,9 @@ snapshots:
   '@codemirror/language@6.10.2':
     dependencies:
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.28.4
+      '@codemirror/view': 6.32.0
       '@lezer/common': 1.2.1
-      '@lezer/highlight': 1.2.0
+      '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.0
       style-mod: 4.1.2
 
@@ -4352,7 +4396,7 @@ snapshots:
   '@codemirror/lint@6.8.1':
     dependencies:
       '@codemirror/state': 6.4.1
-      '@codemirror/view': 6.28.4
+      '@codemirror/view': 6.32.0
       crelt: 1.0.6
 
   '@codemirror/search@6.5.6':
@@ -4371,7 +4415,7 @@ snapshots:
       style-mod: 4.1.0
       w3c-keyname: 2.2.8
 
-  '@codemirror/view@6.28.4':
+  '@codemirror/view@6.32.0':
     dependencies:
       '@codemirror/state': 6.4.1
       style-mod: 4.1.2
@@ -4835,17 +4879,21 @@ snapshots:
   '@lezer/css@1.1.8':
     dependencies:
       '@lezer/common': 1.2.1
-      '@lezer/highlight': 1.2.0
+      '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.0
 
   '@lezer/highlight@1.2.0':
     dependencies:
       '@lezer/common': 1.2.1
 
+  '@lezer/highlight@1.2.1':
+    dependencies:
+      '@lezer/common': 1.2.1
+
   '@lezer/html@1.3.10':
     dependencies:
       '@lezer/common': 1.2.1
-      '@lezer/highlight': 1.2.0
+      '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.0
 
   '@lezer/html@1.3.8':
@@ -4863,7 +4911,7 @@ snapshots:
   '@lezer/javascript@1.4.15':
     dependencies:
       '@lezer/common': 1.2.1
-      '@lezer/highlight': 1.2.0
+      '@lezer/highlight': 1.2.1
       '@lezer/lr': 1.4.0
 
   '@lezer/json@1.0.2':
@@ -4942,6 +4990,8 @@ snapshots:
 
   '@polka/url@1.0.0-next.24': {}
 
+  '@polka/url@1.0.0-next.25': {}
+
   '@replit/codemirror-lang-svelte@6.0.0(@codemirror/autocomplete@6.12.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.0)(@codemirror/view@6.24.0)(@lezer/common@1.2.1))(@codemirror/lang-css@6.2.1(@codemirror/view@6.24.0))(@codemirror/lang-html@6.4.9)(@codemirror/lang-javascript@6.2.1)(@codemirror/language@6.10.1)(@codemirror/state@6.4.0)(@codemirror/view@6.24.0)(@lezer/common@1.2.1)(@lezer/highlight@1.2.0)(@lezer/javascript@1.4.15)(@lezer/lr@1.4.0)':
     dependencies:
       '@codemirror/autocomplete': 6.12.0(@codemirror/language@6.10.1)(@codemirror/state@6.4.0)(@codemirror/view@6.24.0)(@lezer/common@1.2.1)
@@ -5120,7 +5170,7 @@ snapshots:
 
   '@stylistic/eslint-plugin-js@1.8.0(eslint@9.6.0)':
     dependencies:
-      '@types/eslint': 8.56.10
+      '@types/eslint': 8.56.11
       acorn: 8.12.1
       escape-string-regexp: 4.0.0
       eslint: 9.6.0
@@ -5169,9 +5219,9 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  '@sveltejs/adapter-static@3.0.1(@sveltejs/kit@2.5.2(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))':
+  '@sveltejs/adapter-static@3.0.1(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))':
     dependencies:
-      '@sveltejs/kit': 2.5.2(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      '@sveltejs/kit': 2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
 
   '@sveltejs/adapter-vercel@4.0.5(@sveltejs/kit@2.4.3(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.9)(vite@5.0.13(@types/node@20.11.5)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@4.2.9)(vite@5.0.13(@types/node@20.11.5)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))':
     dependencies:
@@ -5182,22 +5232,22 @@ snapshots:
       - encoding
       - supports-color
 
-  '@sveltejs/adapter-vercel@5.1.0(@sveltejs/kit@2.5.2(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))':
+  '@sveltejs/adapter-vercel@5.1.0(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))':
     dependencies:
-      '@sveltejs/kit': 2.5.2(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      '@sveltejs/kit': 2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       '@vercel/nft': 0.26.2
       esbuild: 0.19.11
     transitivePeerDependencies:
       - encoding
       - supports-color
 
-  '@sveltejs/eslint-config@8.0.1(@stylistic/eslint-plugin-js@1.8.0(eslint@9.6.0))(eslint-config-prettier@9.1.0(eslint@9.6.0))(eslint-plugin-n@17.9.0(eslint@9.6.0))(eslint-plugin-svelte@2.38.0(eslint@9.6.0)(svelte@5.0.0-next.179))(eslint@9.6.0)(typescript-eslint@8.0.0-alpha.34(eslint@9.6.0)(typescript@5.5.2))(typescript@5.5.2)':
+  '@sveltejs/eslint-config@8.0.1(@stylistic/eslint-plugin-js@1.8.0(eslint@9.6.0))(eslint-config-prettier@9.1.0(eslint@9.6.0))(eslint-plugin-n@17.9.0(eslint@9.6.0))(eslint-plugin-svelte@2.38.0(eslint@9.6.0)(svelte@5.0.0-next.219))(eslint@9.6.0)(typescript-eslint@8.0.0-alpha.34(eslint@9.6.0)(typescript@5.5.2))(typescript@5.5.2)':
     dependencies:
       '@stylistic/eslint-plugin-js': 1.8.0(eslint@9.6.0)
       eslint: 9.6.0
       eslint-config-prettier: 9.1.0(eslint@9.6.0)
       eslint-plugin-n: 17.9.0(eslint@9.6.0)
-      eslint-plugin-svelte: 2.38.0(eslint@9.6.0)(svelte@5.0.0-next.179)
+      eslint-plugin-svelte: 2.38.0(eslint@9.6.0)(svelte@5.0.0-next.219)
       globals: 15.6.0
       typescript: 5.5.2
       typescript-eslint: 8.0.0-alpha.34(eslint@9.6.0)(typescript@5.5.2)
@@ -5220,19 +5270,19 @@ snapshots:
       tiny-glob: 0.2.9
       vite: 5.0.13(@types/node@20.11.5)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)
 
-  '@sveltejs/kit@2.5.2(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
+  '@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
     dependencies:
       '@sveltejs/vite-plugin-svelte': 4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
-      devalue: 4.3.2
+      devalue: 5.0.0
       esm-env: 1.0.0
-      import-meta-resolve: 4.0.0
+      import-meta-resolve: 4.1.0
       kleur: 4.1.5
-      magic-string: 0.30.5
+      magic-string: 0.30.11
       mrmime: 2.0.0
       sade: 1.8.1
-      set-cookie-parser: 2.6.0
+      set-cookie-parser: 2.7.0
       sirv: 2.0.4
       svelte: link:packages/svelte
       tiny-glob: 0.2.9
@@ -5288,9 +5338,9 @@ snapshots:
       svelte: 4.2.9
       svelte-local-storage-store: 0.6.4(svelte@4.2.9)
 
-  '@sveltejs/site-kit@6.0.0-next.64(@sveltejs/kit@2.5.2(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)':
+  '@sveltejs/site-kit@6.0.0-next.64(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)':
     dependencies:
-      '@sveltejs/kit': 2.5.2(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      '@sveltejs/kit': 2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       esm-env: 1.0.0
       svelte: link:packages/svelte
       svelte-persisted-store: 0.9.2(svelte@packages+svelte)
@@ -5355,7 +5405,7 @@ snapshots:
 
   '@types/cookie@0.6.0': {}
 
-  '@types/eslint@8.56.10':
+  '@types/eslint@8.56.11':
     dependencies:
       '@types/estree': 1.0.5
       '@types/json-schema': 7.0.15
@@ -5510,9 +5560,9 @@ snapshots:
       - encoding
       - supports-color
 
-  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.5.2(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)':
+  '@vercel/speed-insights@1.0.11(@sveltejs/kit@2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)':
     optionalDependencies:
-      '@sveltejs/kit': 2.5.2(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
+      '@sveltejs/kit': 2.5.24(@sveltejs/vite-plugin-svelte@4.0.0-next.3(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0)))(svelte@packages+svelte)(vite@5.0.13(@types/node@20.12.7)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))
       svelte: link:packages/svelte
 
   '@vitest/coverage-v8@1.2.1(vitest@1.2.1(@types/node@20.11.5)(jsdom@22.0.0)(lightningcss@1.23.0)(sass@1.70.0)(terser@5.27.0))':
@@ -5548,7 +5598,7 @@ snapshots:
 
   '@vitest/snapshot@1.2.1':
     dependencies:
-      magic-string: 0.30.9
+      magic-string: 0.30.5
       pathe: 1.1.2
       pretty-format: 29.7.0
 
@@ -5660,6 +5710,8 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
+  axobject-query@4.1.0: {}
+
   balanced-match@1.0.2: {}
 
   base64-js@0.0.8: {}
@@ -5883,6 +5935,10 @@ snapshots:
     dependencies:
       ms: 2.1.2
 
+  debug@4.3.6:
+    dependencies:
+      ms: 2.1.2
+
   decimal.js@10.4.3: {}
 
   deep-eql@4.1.3:
@@ -5918,6 +5974,8 @@ snapshots:
 
   devalue@4.3.2: {}
 
+  devalue@5.0.0: {}
+
   diff-sequences@29.6.3: {}
 
   dir-glob@3.0.1:
@@ -5953,7 +6011,7 @@ snapshots:
 
   emoji-regex@8.0.0: {}
 
-  enhanced-resolve@5.17.0:
+  enhanced-resolve@5.17.1:
     dependencies:
       graceful-fs: 4.2.11
       tapable: 2.2.1
@@ -6006,7 +6064,7 @@ snapshots:
   eslint-compat-utils@0.5.1(eslint@9.6.0):
     dependencies:
       eslint: 9.6.0
-      semver: 7.6.2
+      semver: 7.6.3
 
   eslint-config-prettier@9.1.0(eslint@9.6.0):
     dependencies:
@@ -6024,32 +6082,32 @@ snapshots:
   eslint-plugin-n@17.9.0(eslint@9.6.0):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@9.6.0)
-      enhanced-resolve: 5.17.0
+      enhanced-resolve: 5.17.1
       eslint: 9.6.0
       eslint-plugin-es-x: 7.8.0(eslint@9.6.0)
-      get-tsconfig: 4.7.5
-      globals: 15.8.0
-      ignore: 5.3.1
+      get-tsconfig: 4.7.6
+      globals: 15.9.0
+      ignore: 5.3.2
       minimatch: 9.0.5
-      semver: 7.6.2
+      semver: 7.6.3
 
-  eslint-plugin-svelte@2.38.0(eslint@9.6.0)(svelte@5.0.0-next.179):
+  eslint-plugin-svelte@2.38.0(eslint@9.6.0)(svelte@5.0.0-next.219):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@9.6.0)
       '@jridgewell/sourcemap-codec': 1.5.0
-      debug: 4.3.5
+      debug: 4.3.6
       eslint: 9.6.0
       eslint-compat-utils: 0.5.1(eslint@9.6.0)
       esutils: 2.0.3
       known-css-properties: 0.30.0
-      postcss: 8.4.39
-      postcss-load-config: 3.1.4(postcss@8.4.39)
-      postcss-safe-parser: 6.0.0(postcss@8.4.39)
-      postcss-selector-parser: 6.1.0
-      semver: 7.6.2
-      svelte-eslint-parser: 0.39.2(svelte@5.0.0-next.179)
+      postcss: 8.4.41
+      postcss-load-config: 3.1.4(postcss@8.4.41)
+      postcss-safe-parser: 6.0.0(postcss@8.4.41)
+      postcss-selector-parser: 6.1.2
+      semver: 7.6.3
+      svelte-eslint-parser: 0.41.0(svelte@5.0.0-next.219)
     optionalDependencies:
-      svelte: 5.0.0-next.179
+      svelte: 5.0.0-next.219
     transitivePeerDependencies:
       - supports-color
       - ts-node
@@ -6286,7 +6344,7 @@ snapshots:
 
   get-stream@8.0.1: {}
 
-  get-tsconfig@4.7.5:
+  get-tsconfig@4.7.6:
     dependencies:
       resolve-pkg-maps: 1.0.0
 
@@ -6329,7 +6387,7 @@ snapshots:
 
   globals@15.6.0: {}
 
-  globals@15.8.0: {}
+  globals@15.9.0: {}
 
   globalyzer@0.1.0: {}
 
@@ -6405,6 +6463,8 @@ snapshots:
 
   ignore@5.3.1: {}
 
+  ignore@5.3.2: {}
+
   image-q@4.0.0:
     dependencies:
       '@types/node': 16.9.1
@@ -6422,6 +6482,8 @@ snapshots:
 
   import-meta-resolve@4.0.0: {}
 
+  import-meta-resolve@4.1.0: {}
+
   imurmurhash@0.1.4: {}
 
   inflight@1.0.6:
@@ -6706,6 +6768,10 @@ snapshots:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  magic-string@0.30.11:
+    dependencies:
+      '@jridgewell/sourcemap-codec': 1.5.0
+
   magic-string@0.30.5:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
@@ -7027,22 +7093,22 @@ snapshots:
       '@polka/url': 1.0.0-next.24
       trouter: 4.0.0
 
-  postcss-load-config@3.1.4(postcss@8.4.39):
+  postcss-load-config@3.1.4(postcss@8.4.41):
     dependencies:
       lilconfig: 2.1.0
       yaml: 1.10.2
     optionalDependencies:
-      postcss: 8.4.39
+      postcss: 8.4.41
 
-  postcss-safe-parser@6.0.0(postcss@8.4.39):
+  postcss-safe-parser@6.0.0(postcss@8.4.41):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.41
 
-  postcss-scss@4.0.9(postcss@8.4.39):
+  postcss-scss@4.0.9(postcss@8.4.41):
     dependencies:
-      postcss: 8.4.39
+      postcss: 8.4.41
 
-  postcss-selector-parser@6.1.0:
+  postcss-selector-parser@6.1.2:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
@@ -7055,7 +7121,7 @@ snapshots:
       picocolors: 1.0.0
       source-map-js: 1.0.2
 
-  postcss@8.4.39:
+  postcss@8.4.41:
     dependencies:
       nanoid: 3.3.7
       picocolors: 1.0.1
@@ -7075,10 +7141,10 @@ snapshots:
       prettier: 3.2.4
       svelte: 4.2.9
 
-  prettier-plugin-svelte@3.1.2(prettier@3.2.4)(svelte@5.0.0-next.179):
+  prettier-plugin-svelte@3.1.2(prettier@3.2.4)(svelte@5.0.0-next.219):
     dependencies:
       prettier: 3.2.4
-      svelte: 5.0.0-next.179
+      svelte: 5.0.0-next.219
 
   prettier@2.8.8: {}
 
@@ -7254,7 +7320,7 @@ snapshots:
     dependencies:
       lru-cache: 6.0.0
 
-  semver@7.6.2: {}
+  semver@7.6.3: {}
 
   serialize-javascript@6.0.2:
     dependencies:
@@ -7264,6 +7330,8 @@ snapshots:
 
   set-cookie-parser@2.6.0: {}
 
+  set-cookie-parser@2.7.0: {}
+
   sharp@0.33.2:
     dependencies:
       color: 4.2.3
@@ -7347,7 +7415,7 @@ snapshots:
 
   sirv@2.0.4:
     dependencies:
-      '@polka/url': 1.0.0-next.24
+      '@polka/url': 1.0.0-next.25
       mrmime: 2.0.0
       totalist: 3.0.1
 
@@ -7435,7 +7503,7 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@3.6.3(postcss-load-config@3.1.4(postcss@8.4.39))(postcss@8.4.39)(sass@1.70.0)(svelte@4.2.9):
+  svelte-check@3.6.3(postcss-load-config@3.1.4(postcss@8.4.41))(postcss@8.4.41)(sass@1.70.0)(svelte@4.2.9):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.22
       chokidar: 3.5.3
@@ -7444,7 +7512,7 @@ snapshots:
       picocolors: 1.0.0
       sade: 1.8.1
       svelte: 4.2.9
-      svelte-preprocess: 5.1.3(postcss-load-config@3.1.4(postcss@8.4.39))(postcss@8.4.39)(sass@1.70.0)(svelte@4.2.9)(typescript@5.5.2)
+      svelte-preprocess: 5.1.3(postcss-load-config@3.1.4(postcss@8.4.41))(postcss@8.4.41)(sass@1.70.0)(svelte@4.2.9)(typescript@5.5.2)
       typescript: 5.5.2
     transitivePeerDependencies:
       - '@babel/core'
@@ -7457,7 +7525,7 @@ snapshots:
       - stylus
       - sugarss
 
-  svelte-check@3.6.3(postcss-load-config@3.1.4(postcss@8.4.39))(postcss@8.4.39)(sass@1.70.0)(svelte@packages+svelte):
+  svelte-check@3.6.3(postcss-load-config@3.1.4(postcss@8.4.41))(postcss@8.4.41)(sass@1.70.0)(svelte@packages+svelte):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.22
       chokidar: 3.5.3
@@ -7466,7 +7534,7 @@ snapshots:
       picocolors: 1.0.0
       sade: 1.8.1
       svelte: link:packages/svelte
-      svelte-preprocess: 5.1.3(postcss-load-config@3.1.4(postcss@8.4.39))(postcss@8.4.39)(sass@1.70.0)(svelte@packages+svelte)(typescript@5.5.2)
+      svelte-preprocess: 5.1.3(postcss-load-config@3.1.4(postcss@8.4.41))(postcss@8.4.41)(sass@1.70.0)(svelte@packages+svelte)(typescript@5.5.2)
       typescript: 5.5.2
     transitivePeerDependencies:
       - '@babel/core'
@@ -7479,15 +7547,15 @@ snapshots:
       - stylus
       - sugarss
 
-  svelte-eslint-parser@0.39.2(svelte@5.0.0-next.179):
+  svelte-eslint-parser@0.41.0(svelte@5.0.0-next.219):
     dependencies:
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
       espree: 9.6.1
-      postcss: 8.4.39
-      postcss-scss: 4.0.9(postcss@8.4.39)
+      postcss: 8.4.41
+      postcss-scss: 4.0.9(postcss@8.4.41)
     optionalDependencies:
-      svelte: 5.0.0-next.179
+      svelte: 5.0.0-next.219
 
   svelte-hmr@0.16.0(svelte@4.2.9):
     dependencies:
@@ -7513,7 +7581,7 @@ snapshots:
     dependencies:
       svelte: link:packages/svelte
 
-  svelte-preprocess@5.1.3(postcss-load-config@3.1.4(postcss@8.4.39))(postcss@8.4.39)(sass@1.70.0)(svelte@4.2.9)(typescript@5.5.2):
+  svelte-preprocess@5.1.3(postcss-load-config@3.1.4(postcss@8.4.41))(postcss@8.4.41)(sass@1.70.0)(svelte@4.2.9)(typescript@5.5.2):
     dependencies:
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
@@ -7522,12 +7590,12 @@ snapshots:
       strip-indent: 3.0.0
       svelte: 4.2.9
     optionalDependencies:
-      postcss: 8.4.39
-      postcss-load-config: 3.1.4(postcss@8.4.39)
+      postcss: 8.4.41
+      postcss-load-config: 3.1.4(postcss@8.4.41)
       sass: 1.70.0
       typescript: 5.5.2
 
-  svelte-preprocess@5.1.3(postcss-load-config@3.1.4(postcss@8.4.39))(postcss@8.4.39)(sass@1.70.0)(svelte@packages+svelte)(typescript@5.5.2):
+  svelte-preprocess@5.1.3(postcss-load-config@3.1.4(postcss@8.4.41))(postcss@8.4.41)(sass@1.70.0)(svelte@packages+svelte)(typescript@5.5.2):
     dependencies:
       '@types/pug': 2.0.10
       detect-indent: 6.1.0
@@ -7536,8 +7604,8 @@ snapshots:
       strip-indent: 3.0.0
       svelte: link:packages/svelte
     optionalDependencies:
-      postcss: 8.4.39
-      postcss-load-config: 3.1.4(postcss@8.4.39)
+      postcss: 8.4.41
+      postcss-load-config: 3.1.4(postcss@8.4.41)
       sass: 1.70.0
       typescript: 5.5.2
 
@@ -7558,7 +7626,7 @@ snapshots:
       magic-string: 0.30.5
       periscopic: 3.1.0
 
-  svelte@5.0.0-next.179:
+  svelte@5.0.0-next.219:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -7566,12 +7634,12 @@ snapshots:
       acorn: 8.12.1
       acorn-typescript: 1.4.13(acorn@8.12.1)
       aria-query: 5.3.0
-      axobject-query: 4.0.0
+      axobject-query: 4.1.0
       esm-env: 1.0.0
       esrap: 1.2.2
       is-reference: 3.0.2
       locate-character: 3.0.0
-      magic-string: 0.30.10
+      magic-string: 0.30.11
       zimmerframe: 1.1.2
 
   symbol-tree@3.2.4: {}
diff --git a/sites/svelte-5-preview/package.json b/sites/svelte-5-preview/package.json
index 2ec2d09b66..bf91a3abcd 100644
--- a/sites/svelte-5-preview/package.json
+++ b/sites/svelte-5-preview/package.json
@@ -18,7 +18,7 @@
     "@lezer/common": "^1.2.1",
     "@sveltejs/adapter-static": "^3.0.1",
     "@sveltejs/adapter-vercel": "^5.0.0",
-    "@sveltejs/kit": "^2.5.0",
+    "@sveltejs/kit": "^2.5.24",
     "@sveltejs/site-kit": "6.0.0-next.64",
     "@sveltejs/vite-plugin-svelte": "^4.0.0-next.3",
     "@vercel/speed-insights": "^1.0.0",

From a8c6b92f9a46166fc9ce1906f1608795aae3a00e Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 20 Aug 2024 16:55:22 +0100
Subject: [PATCH 162/196] chore: remove $state.is from docs (#12927)

---
 .../svelte-5-preview/src/lib/autocomplete.js  |  1 -
 .../routes/docs/content/01-api/02-runes.md    | 20 -------------------
 2 files changed, 21 deletions(-)

diff --git a/sites/svelte-5-preview/src/lib/autocomplete.js b/sites/svelte-5-preview/src/lib/autocomplete.js
index 99ec238834..b535c7ff04 100644
--- a/sites/svelte-5-preview/src/lib/autocomplete.js
+++ b/sites/svelte-5-preview/src/lib/autocomplete.js
@@ -118,7 +118,6 @@ const runes = [
 	{ snippet: '$bindable()', test: is_bindable },
 	{ snippet: '$effect.root(() => {\n\t${}\n})' },
 	{ snippet: '$state.snapshot(${})' },
-	{ snippet: '$state.is(${})' },
 	{ snippet: '$effect.tracking()' },
 	{ snippet: '$inspect(${});', test: is_statement }
 ];
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index 2cc70d0536..02cea6ffb4 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -108,26 +108,6 @@ To take a static snapshot of a deeply reactive `$state` proxy, use `$state.snaps
 
 This is handy when you want to pass some state to an external library or API that doesn't expect a proxy, such as `structuredClone`.
 
-## `$state.is`
-
-Sometimes you might need to compare two values, one of which is a reactive `$state(...)` proxy. For this you can use `$state.is(a, b)`:
-
-```svelte
-<script>
-	let foo = $state({});
-	let bar = {};
-
-	foo.bar = bar;
-
-	console.log(foo.bar === bar); // false — `foo.bar` is a reactive proxy
-	console.log($state.is(foo.bar, bar)); // true
-</script>
-```
-
-This is handy when you might want to check if the object exists within a deeply reactive object/array.
-
-> `$state.is` uses `Object.is` to check if two values are the same value.
-
 ## `$derived`
 
 Derived state is declared with the `$derived` rune:

From 4ce23bf07eccaf4c4f19554dd6774f2c6c640e2e Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 20 Aug 2024 16:58:36 +0100
Subject: [PATCH 163/196] fix: avoid extra work in mark_reactions (#12921)

* fix: avoid extra work in mark_reactions

* Update packages/svelte/src/internal/client/reactivity/sources.js

Co-authored-by: Rich Harris <rich.harris@vercel.com>

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/flat-moose-arrive.md                           | 5 +++++
 packages/svelte/src/internal/client/reactivity/sources.js | 4 ++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/flat-moose-arrive.md

diff --git a/.changeset/flat-moose-arrive.md b/.changeset/flat-moose-arrive.md
new file mode 100644
index 0000000000..0a8c229a66
--- /dev/null
+++ b/.changeset/flat-moose-arrive.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid extra work in mark_reactions
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 86427a7509..772d62d026 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -145,8 +145,8 @@ function mark_reactions(signal, status) {
 		var reaction = reactions[i];
 		var flags = reaction.f;
 
-		// Skip any effects that are already dirty
-		if ((flags & DIRTY) !== 0) continue;
+		// If a reaction is already dirty, skip it (but always mark unowned deriveds)
+		if ((flags & (CLEAN | UNOWNED)) === 0) continue;
 
 		// In legacy mode, skip the current effect to prevent infinite loops
 		if (!runes && reaction === current_effect) continue;

From 212b60203f6e4983998d34775faa0b32e6a0d69c Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 20 Aug 2024 18:00:30 +0200
Subject: [PATCH 164/196] feat: support HMR with custom elements (#12926)

closes https://github.com/sveltejs/svelte-hmr/issues/26
---
 .changeset/swift-queens-begin.md                       |  5 +++++
 .../phases/3-transform/client/transform-client.js      | 10 +++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/swift-queens-begin.md

diff --git a/.changeset/swift-queens-begin.md b/.changeset/swift-queens-begin.md
new file mode 100644
index 0000000000..01413c71d4
--- /dev/null
+++ b/.changeset/swift-queens-begin.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: support HMR with custom elements
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
index f9ae37ba40..c7ec37a326 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js
@@ -593,7 +593,15 @@ export function client_component(analysis, options) {
 
 		// If a tag name is provided, call `customElements.define`, otherwise leave to the user
 		if (typeof ce !== 'boolean' && typeof ce.tag === 'string') {
-			body.push(b.stmt(b.call('customElements.define', b.literal(ce.tag), create_ce)));
+			const define = b.stmt(b.call('customElements.define', b.literal(ce.tag), create_ce));
+
+			if (options.hmr) {
+				body.push(
+					b.if(b.binary('==', b.call('customElements.get', b.literal(ce.tag)), b.null), define)
+				);
+			} else {
+				body.push(define);
+			}
 		} else {
 			body.push(b.stmt(create_ce));
 		}

From 8aed27db9777f5d6c0984ec757a6f566c26c49c5 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Tue, 20 Aug 2024 18:30:01 +0200
Subject: [PATCH 165/196] fix: allow mixing slots and snippets in custom
 elements mode (#12929)

We need to allow mixing those within custom element components because in a future version of Svelte where we remove the Svelte-version of slots, we'll preserve slots as-is, and people should use those within their components. At the same time they should be able to make use of snippets for reusable blocks of code.

Also document that you should continue using slots within custom elements.

closes #12892
---
 .changeset/old-planets-bow.md                                | 5 +++++
 packages/svelte/src/compiler/phases/2-analyze/index.js       | 5 ++++-
 packages/svelte/src/compiler/phases/types.d.ts               | 4 ++++
 .../src/routes/docs/content/01-api/03-snippets.md            | 2 ++
 .../src/routes/docs/content/02-examples/04-old-vs-new.md     | 2 ++
 5 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/old-planets-bow.md

diff --git a/.changeset/old-planets-bow.md b/.changeset/old-planets-bow.md
new file mode 100644
index 0000000000..c10fde017f
--- /dev/null
+++ b/.changeset/old-planets-bow.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: allow mixing slots and snippets in custom elements mode
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 9429d3f6d2..1bd1903d44 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -649,7 +649,10 @@ export function analyze_component(root, source, options) {
 		);
 	}
 
-	if (analysis.uses_render_tags && (analysis.uses_slots || analysis.slot_names.size > 0)) {
+	if (
+		analysis.uses_render_tags &&
+		(analysis.uses_slots || (!analysis.custom_element && analysis.slot_names.size > 0))
+	) {
 		const pos = analysis.slot_names.values().next().value ?? analysis.source.indexOf('$$slot');
 		e.slot_snippet_conflict(pos);
 	}
diff --git a/packages/svelte/src/compiler/phases/types.d.ts b/packages/svelte/src/compiler/phases/types.d.ts
index 96c0f65eb7..1f60816557 100644
--- a/packages/svelte/src/compiler/phases/types.d.ts
+++ b/packages/svelte/src/compiler/phases/types.d.ts
@@ -63,6 +63,10 @@ export interface ComponentAnalysis extends Analysis {
 	event_directive_node: OnDirective | null;
 	/** true if uses event attributes (onclick) on a DOM element */
 	uses_event_attributes: boolean;
+	/**
+	 * Contains the content of `<svelte:options customElement={...} />`,
+	 * or if not present a boolean which corresponds to the compiler option value
+	 */
 	custom_element: boolean | SvelteOptions['customElement'];
 	/** If `true`, should append styles through JavaScript */
 	inject_styles: boolean;
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/03-snippets.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/03-snippets.md
index 516300f2ea..b3fe34d21a 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/03-snippets.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/03-snippets.md
@@ -265,3 +265,5 @@ In advanced scenarios, you may need to create a snippet programmatically. For th
 In Svelte 4, content can be passed to components using [slots](https://svelte.dev/docs/special-elements#slot). Snippets are more powerful and flexible, and as such slots are deprecated in Svelte 5.
 
 They continue to work, however, and you can mix and match snippets and slots in your components.
+
+When using custom elements, you should still use `<slot />` like before. In a future version, when Svelte removes its internal version of slots, it will leave those slots as-is, i.e. output a regular DOM tag instead of transforming it.
diff --git a/sites/svelte-5-preview/src/routes/docs/content/02-examples/04-old-vs-new.md b/sites/svelte-5-preview/src/routes/docs/content/02-examples/04-old-vs-new.md
index 9856c8daee..7b46d0c3b1 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/02-examples/04-old-vs-new.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/02-examples/04-old-vs-new.md
@@ -293,3 +293,5 @@ Combined with event attributes, this reduces the number of concepts to learn —
 
 - [Before](https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACn2PzYrCQBCEX6XpSxTE3GeTgPoYzh5i0sHB-WOmIywh776ZjCgieOsqqvrrnnBQmiKK84S2NYQCD97jDvnPJxHvpJkWHd0YuuRUsQvKcyOtZGW8CwzHkdlZGIIzUOzLLPe5WvxIW5Wvjq0eaWdFp1V3q6fNFuoGWk2BN8UpedQDXwkua7LYzqCJhQ_Or1TJaxGm5MxpfV7ZLGca16tBUY-Cw0jz7vlVjnx97PJ-2MqqonYMCVTLJWoI7q0eSSKUTSLnzjJ-sn_nfxmfF-FdAQAA)
 - [After](https://svelte-5-preview.vercel.app/#H4sIAAAAAAAACo2PzW6DMBCEX2XlVgIkBHcKUdo-RumBwqJYNbZlL5Eqy-9e_9DkkEtv3vHMzn6OrVygZd2HY3LakHXsVWtWM_rRcbBXFIRhtmo3c1R6Oxuu6TTKkfimlSF424mUhNWoDYqmzWOTo8XLKPv2npH94VZyFnz-HlxZwXCCSaChsniPGi5AF4SvZCwqn7rck5VcaySYL1wsBmWpjdKVj58jpWXgopQU1x52H_tz5ylwbGrhK8eFdWR29PUNO1v-Sy7CHe52SQ1N08RqCx4GeE7PsnpAz0Tg_twH2TmsWNDcwcZQuiFcJ7HjyKqEkLMh8Ajx6X8BPkQdmscBAAA=)
+
+> When using custom elements, you should still use `<slot />` like before. In a future version, when Svelte removes its internal version of slots, it will leave those slots as-is, i.e. output a regular DOM tag instead of transforming it.

From 189113ab8e33f4df548717ea508249881e1d760e Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 20 Aug 2024 18:03:50 +0100
Subject: [PATCH 166/196] Revert "fix: avoid extra work in mark_reactions
 (#12921)" (#12931)

This reverts commit 4ce23bf07eccaf4c4f19554dd6774f2c6c640e2e.
---
 .changeset/flat-moose-arrive.md                           | 5 -----
 packages/svelte/src/internal/client/reactivity/sources.js | 4 ++--
 2 files changed, 2 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/flat-moose-arrive.md

diff --git a/.changeset/flat-moose-arrive.md b/.changeset/flat-moose-arrive.md
deleted file mode 100644
index 0a8c229a66..0000000000
--- a/.changeset/flat-moose-arrive.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'svelte': patch
----
-
-fix: avoid extra work in mark_reactions
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 772d62d026..86427a7509 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -145,8 +145,8 @@ function mark_reactions(signal, status) {
 		var reaction = reactions[i];
 		var flags = reaction.f;
 
-		// If a reaction is already dirty, skip it (but always mark unowned deriveds)
-		if ((flags & (CLEAN | UNOWNED)) === 0) continue;
+		// Skip any effects that are already dirty
+		if ((flags & DIRTY) !== 0) continue;
 
 		// In legacy mode, skip the current effect to prevent infinite loops
 		if (!runes && reaction === current_effect) continue;

From f6f0e78cbd12220278f2a23acec30c47bcd437e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gautier=20Ben=20A=C3=AFm?=
 <48261497+GauBen@users.noreply.github.com>
Date: Tue, 20 Aug 2024 20:14:03 +0200
Subject: [PATCH 167/196] fix: small legibility improvement (#12928)

* fix: small legibility improvement

* Create rich-ladybugs-admire.md

* Update rich-ladybugs-admire.md

* even better?
---
 .changeset/rich-ladybugs-admire.md | 5 +++++
 packages/svelte/src/index.d.ts     | 6 +++---
 packages/svelte/types/index.d.ts   | 6 +++---
 3 files changed, 11 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/rich-ladybugs-admire.md

diff --git a/.changeset/rich-ladybugs-admire.md b/.changeset/rich-ladybugs-admire.md
new file mode 100644
index 0000000000..f86504313d
--- /dev/null
+++ b/.changeset/rich-ladybugs-admire.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: small legibility improvement in `Snippet` type hint
diff --git a/packages/svelte/src/index.d.ts b/packages/svelte/src/index.d.ts
index 802dfbc790..79d048b815 100644
--- a/packages/svelte/src/index.d.ts
+++ b/packages/svelte/src/index.d.ts
@@ -285,9 +285,9 @@ export interface Snippet<Parameters extends unknown[] = []> {
 		// rest parameter type, which is not supported. If rest parameters are added
 		// in the future, the condition can be removed.
 		...args: number extends Parameters['length'] ? never : Parameters
-	): typeof SnippetReturn & {
-		_: 'functions passed to {@render ...} tags must use the `Snippet` type imported from "svelte"';
-	};
+	): {
+		'{@render ...} must be called with a Snippet': "import type { Snippet } from 'svelte'";
+	} & typeof SnippetReturn;
 }
 
 interface DispatchOptions {
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 5b527db2e4..e320455795 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -282,9 +282,9 @@ declare module 'svelte' {
 			// rest parameter type, which is not supported. If rest parameters are added
 			// in the future, the condition can be removed.
 			...args: number extends Parameters['length'] ? never : Parameters
-		): typeof SnippetReturn & {
-			_: 'functions passed to {@render ...} tags must use the `Snippet` type imported from "svelte"';
-		};
+		): {
+			'{@render ...} must be called with a Snippet': "import type { Snippet } from 'svelte'";
+		} & typeof SnippetReturn;
 	}
 
 	interface DispatchOptions {

From 63ec2e2e882b639b573bdc0e8bf1afde78043dfe Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 20 Aug 2024 20:11:15 +0100
Subject: [PATCH 168/196] feat: adds $state.link rune (#12545)

* feat: adds $state.link rune

* add tests

* types

* docs

* debugger

* lint

* Update .changeset/friendly-rice-confess.md

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* Update packages/svelte/src/compiler/phases/2-analyze/index.js

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>

* feedback

* feedback

* feedback

* feedback

* rename link_state to linked_state for grammatical consistency

* oops, victim of find-replace

* no need to store linked_value if setting

* simplify tests

* test behaviour of objects

* update docs

* copy

* more direct example that shows unlinking and relinking

* add callback argument support

* fix

* tidy up

* document callback

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/friendly-rice-confess.md           |  5 ++
 documentation/docs/03-runes/01-state.md       | 45 +++++++++++++++++
 packages/svelte/src/ambient.d.ts              | 26 ++++++++++
 .../2-analyze/visitors/BindDirective.js       |  1 +
 .../2-analyze/visitors/CallExpression.js      |  2 +-
 .../2-analyze/visitors/ExportSpecifier.js     |  5 +-
 .../phases/2-analyze/visitors/Identifier.js   |  2 +-
 .../2-analyze/visitors/VariableDeclarator.js  | 17 ++++---
 .../phases/3-transform/client/types.d.ts      |  2 +-
 .../3-transform/client/visitors/ClassBody.js  | 46 +++++++++++++----
 .../3-transform/client/visitors/Program.js    |  2 +-
 .../client/visitors/VariableDeclaration.js    | 18 +++++--
 .../client/visitors/shared/declarations.js    |  7 +++
 .../server/visitors/PropertyDefinition.js     |  7 ++-
 packages/svelte/src/compiler/types/index.d.ts |  1 +
 packages/svelte/src/internal/client/index.js  |  2 +-
 .../src/internal/client/reactivity/sources.js | 49 +++++++++++++++++++
 packages/svelte/src/utils.js                  |  1 +
 .../samples/state-link-callback/_config.js    | 38 ++++++++++++++
 .../samples/state-link-callback/main.svelte   | 12 +++++
 .../samples/state-link-class/_config.js       | 19 +++++++
 .../samples/state-link-class/main.svelte      | 11 +++++
 .../samples/state-link-object/_config.js      | 24 +++++++++
 .../samples/state-link-object/main.svelte     |  9 ++++
 .../samples/state-link/_config.js             | 19 +++++++
 .../samples/state-link/main.svelte            |  7 +++
 packages/svelte/types/index.d.ts              | 27 ++++++++++
 .../svelte-5-preview/src/lib/autocomplete.js  |  1 +
 .../routes/docs/content/01-api/02-runes.md    | 45 +++++++++++++++++
 29 files changed, 423 insertions(+), 27 deletions(-)
 create mode 100644 .changeset/friendly-rice-confess.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-link-callback/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-link-callback/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-link-class/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-link-class/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-link-object/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-link-object/main.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-link/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/state-link/main.svelte

diff --git a/.changeset/friendly-rice-confess.md b/.changeset/friendly-rice-confess.md
new file mode 100644
index 0000000000..709925a097
--- /dev/null
+++ b/.changeset/friendly-rice-confess.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: add `$state.link` rune
diff --git a/documentation/docs/03-runes/01-state.md b/documentation/docs/03-runes/01-state.md
index 7bcff2c968..35dc2f357d 100644
--- a/documentation/docs/03-runes/01-state.md
+++ b/documentation/docs/03-runes/01-state.md
@@ -62,6 +62,51 @@ Objects and arrays are made deeply reactive by wrapping them with [`Proxies`](ht
 
 > Only POJOs (plain old JavaScript objects) are made deeply reactive. Reactivity will stop at class boundaries and leave those alone
 
+## `$state.link`
+
+Linked state stays up to date with its input:
+
+```js
+let a = $state(0);
+let b = $state.link(a);
+
+a = 1;
+console.log(a, b); // 1, 1
+```
+
+You can temporarily _unlink_ state. It will be _relinked_ when the input value changes:
+
+```js
+let a = 1;
+let b = 1;
+// ---cut---
+b = 2; // unlink
+console.log(a, b); // 1, 2
+
+a = 3; // relink
+console.log(a, b); // 3, 3
+```
+
+As with `$state`, if `$state.link` is passed a plain object or array it will be made deeply reactive. If passed an existing state proxy it will be reused, meaning that mutating the linked state will mutate the original. To clone a state proxy, you can use [`$state.snapshot`](#$state-snapshot).
+
+If you pass a callback to `$state.link`, changes to the input value will invoke the callback rather than updating the linked state, allowing you to choose whether to (for example) preserve or discard local changes, or merge incoming changes with local ones:
+
+```js
+let { stuff } = $props();
+
+let incoming = $state();
+let hasUnsavedChanges = $state(false);
+
+let current = $state.link({ ...stuff }, (stuff) => {
+	if (hasUnsavedChanges) {
+		incoming = stuff;
+	} else {
+		incoming = null;
+		current = stuff;
+	}
+});
+```
+
 ## `$state.raw`
 
 State declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
index 6af8ca5156..e58b2c5aa5 100644
--- a/packages/svelte/src/ambient.d.ts
+++ b/packages/svelte/src/ambient.d.ts
@@ -124,6 +124,32 @@ declare namespace $state {
 	 *
 	 * @param initial The initial value
 	 */
+
+	/**
+	 * Declares reactive state that is linked to another value. Local reassignments
+	 * will override the linked value until the linked value changes.
+	 *
+	 * Example:
+	 * ```ts
+	 * let a = $state(0);
+	 * let b = $state.link(a);
+
+	 * a = 1;
+	 * console.log(a, b); // 1, 1
+
+	 * b = 2; // unlink
+	 * console.log(a, b); // 1, 2
+	 *
+	 * a = 3; // relink
+	 * console.log(a, b); // 3, 3
+	 * ```
+	 *
+	 * https://svelte-5-preview.vercel.app/docs/runes#$state-link
+	 *
+	 * @param value The linked value
+	 */
+	export function link<T>(value: T, callback?: (value: T) => void): T;
+
 	export function raw<T>(initial: T): T;
 	export function raw<T>(): T | undefined;
 	/**
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index 43d1a3d468..eeeb4cea43 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -34,6 +34,7 @@ export function BindDirective(node, context) {
 			node.name !== 'this' && // bind:this also works for regular variables
 			(!binding ||
 				(binding.kind !== 'state' &&
+					binding.kind !== 'linked_state' &&
 					binding.kind !== 'raw_state' &&
 					binding.kind !== 'prop' &&
 					binding.kind !== 'bindable_prop' &&
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 f9999f5252..9df622637f 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -169,7 +169,7 @@ export function CallExpression(node, context) {
 	}
 
 	// `$inspect(foo)` or `$derived(foo) should not trigger the `static-state-reference` warning
-	if (rune === '$inspect' || rune === '$derived') {
+	if (rune === '$inspect' || rune === '$derived' || rune === '$state.link') {
 		context.next({ ...context.state, function_depth: context.state.function_depth + 1 });
 	} else {
 		context.next();
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
index 27eb39acbf..d2caf27ab9 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
@@ -38,7 +38,10 @@ function validate_export(node, scope, name) {
 		e.derived_invalid_export(node);
 	}
 
-	if ((binding.kind === 'state' || binding.kind === 'raw_state') && binding.reassigned) {
+	if (
+		(binding.kind === 'state' || binding.kind === 'raw_state' || binding.kind === 'linked_state') &&
+		binding.reassigned
+	) {
 		e.state_invalid_export(node);
 	}
 }
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 79dccd5a7c..002462fc44 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -99,7 +99,7 @@ export function Identifier(node, context) {
 			context.state.function_depth === binding.scope.function_depth &&
 			// If we have $state that can be proxied or frozen and isn't re-assigned, then that means
 			// it's likely not using a primitive value and thus this warning isn't that helpful.
-			((binding.kind === 'state' &&
+			(((binding.kind === 'state' || binding.kind === 'linked_state') &&
 				(binding.reassigned ||
 					(binding.initial?.type === 'CallExpression' &&
 						binding.initial.arguments.length === 1 &&
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
index 6d9b3e29b9..bb74e003d7 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
@@ -21,6 +21,7 @@ export function VariableDeclarator(node, context) {
 		// TODO feels like this should happen during scope creation?
 		if (
 			rune === '$state' ||
+			rune === '$state.link' ||
 			rune === '$state.raw' ||
 			rune === '$derived' ||
 			rune === '$derived.by' ||
@@ -32,13 +33,15 @@ export function VariableDeclarator(node, context) {
 				binding.kind =
 					rune === '$state'
 						? 'state'
-						: rune === '$state.raw'
-							? 'raw_state'
-							: rune === '$derived' || rune === '$derived.by'
-								? 'derived'
-								: path.is_rest
-									? 'rest_prop'
-									: 'prop';
+						: rune === '$state.link'
+							? 'linked_state'
+							: rune === '$state.raw'
+								? 'raw_state'
+								: rune === '$derived' || rune === '$derived.by'
+									? 'derived'
+									: path.is_rest
+										? 'rest_prop'
+										: 'prop';
 			}
 		}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
index e44cc0239c..57ce1507c5 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
@@ -88,7 +88,7 @@ export interface ComponentClientTransformState extends ClientTransformState {
 }
 
 export interface StateField {
-	kind: 'state' | 'raw_state' | 'derived' | 'derived_by';
+	kind: 'state' | 'raw_state' | 'linked_state' | 'derived' | 'derived_by';
 	id: PrivateIdentifier;
 }
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
index 5342e70aac..d121600c1b 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
@@ -44,6 +44,7 @@ export function ClassBody(node, context) {
 				const rune = get_rune(definition.value, context.state.scope);
 				if (
 					rune === '$state' ||
+					rune === '$state.link' ||
 					rune === '$state.raw' ||
 					rune === '$derived' ||
 					rune === '$derived.by'
@@ -55,9 +56,11 @@ export function ClassBody(node, context) {
 								? 'state'
 								: rune === '$state.raw'
 									? 'raw_state'
-									: rune === '$derived.by'
-										? 'derived_by'
-										: 'derived',
+									: rune === '$state.link'
+										? 'linked_state'
+										: rune === '$derived.by'
+											? 'derived_by'
+											: 'derived',
 						// @ts-expect-error this is set in the next pass
 						id: is_private ? definition.key : null
 					};
@@ -116,11 +119,18 @@ export function ClassBody(node, context) {
 									'$.source',
 									should_proxy(init, context.state.scope) ? b.call('$.proxy', init) : init
 								)
-							: field.kind === 'raw_state'
-								? b.call('$.source', init)
-								: field.kind === 'derived_by'
-									? b.call('$.derived', init)
-									: b.call('$.derived', b.thunk(init));
+							: field.kind === 'linked_state'
+								? b.call(
+										'$.source_link',
+										b.thunk(
+											should_proxy(init, context.state.scope) ? b.call('$.proxy', init) : init
+										)
+									)
+								: field.kind === 'raw_state'
+									? b.call('$.source', init)
+									: field.kind === 'derived_by'
+										? b.call('$.derived', init)
+										: b.call('$.derived', b.thunk(init));
 				} else {
 					// if no arguments, we know it's state as `$derived()` is a compile error
 					value = b.call('$.source');
@@ -133,8 +143,24 @@ export function ClassBody(node, context) {
 					const member = b.member(b.this, field.id);
 					body.push(b.prop_def(field.id, value));
 
-					// get foo() { return this.#foo; }
-					body.push(b.method('get', definition.key, [], [b.return(b.call('$.get', member))]));
+					if (field.kind === 'linked_state') {
+						// get foo() { return this.#foo; }
+						body.push(b.method('get', definition.key, [], [b.return(b.call(member))]));
+
+						// set foo(value) { this.#foo = value; }
+						const value = b.id('value');
+						body.push(
+							b.method(
+								'set',
+								definition.key,
+								[value],
+								[b.stmt(b.call(member, build_proxy_reassignment(value, field.id)))]
+							)
+						);
+					} else {
+						// get foo() { return this.#foo; }
+						body.push(b.method('get', definition.key, [], [b.return(b.call('$.get', member))]));
+					}
 
 					if (field.kind === 'state') {
 						// set foo(value) { this.#foo = value; }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
index 53e76f9a1d..dc30255a1a 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
@@ -96,7 +96,7 @@ export function Program(_, context) {
 			if (is_prop_source(binding, context.state)) {
 				context.state.transform[name] = {
 					read: b.call,
-					assign: (node, value) => b.call(node, value),
+					assign: b.call,
 					mutate: (node, value) => {
 						if (binding.kind === 'bindable_prop') {
 							// only necessary for interop with legacy parent bindings
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index 77177e397f..2c1db714ca 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -113,7 +113,7 @@ export function VariableDeclaration(node, context) {
 			const value =
 				args.length === 0 ? b.id('undefined') : /** @type {Expression} */ (context.visit(args[0]));
 
-			if (rune === '$state' || rune === '$state.raw') {
+			if (rune === '$state' || rune === '$state.raw' || rune === '$state.link') {
 				/**
 				 * @param {Identifier} id
 				 * @param {Expression} value
@@ -122,12 +122,24 @@ export function VariableDeclaration(node, context) {
 					const binding = /** @type {import('#compiler').Binding} */ (
 						context.state.scope.get(id.name)
 					);
-					if (rune === '$state' && should_proxy(value, context.state.scope)) {
+
+					if (
+						(rune === '$state' || rune === '$state.link') &&
+						should_proxy(value, context.state.scope)
+					) {
 						value = b.call('$.proxy', value);
 					}
-					if (is_state_source(binding, context.state.analysis)) {
+
+					if (rune === '$state.link') {
+						value = b.call(
+							'$.source_link',
+							b.thunk(value),
+							args.length === 2 && /** @type {Expression} */ (context.visit(args[1]))
+						);
+					} else if (is_state_source(binding, context.state.analysis)) {
 						value = b.call('$.source', value);
 					}
+
 					return value;
 				};
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
index 33566f1c10..5db639c190 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
@@ -49,5 +49,12 @@ export function add_state_transformers(context) {
 				}
 			};
 		}
+
+		if (binding.kind === 'linked_state') {
+			context.state.transform[name] = {
+				read: b.call,
+				assign: b.call
+			};
+		}
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
index 04751a19d1..10fd6de7e2 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
@@ -11,7 +11,12 @@ export function PropertyDefinition(node, context) {
 	if (context.state.analysis.runes && node.value != null && node.value.type === 'CallExpression') {
 		const rune = get_rune(node.value, context.state.scope);
 
-		if (rune === '$state' || rune === '$state.raw' || rune === '$derived') {
+		if (
+			rune === '$state' ||
+			rune === '$state.link' ||
+			rune === '$state.raw' ||
+			rune === '$derived'
+		) {
 			return {
 				...node,
 				value:
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index 587c9e373c..ac2b617777 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -278,6 +278,7 @@ export interface Binding {
 		| 'bindable_prop'
 		| 'rest_prop'
 		| 'state'
+		| 'linked_state'
 		| 'raw_state'
 		| 'derived'
 		| 'each'
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 1ca71708af..adb595b80d 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -105,7 +105,7 @@ export {
 	user_effect,
 	user_pre_effect
 } from './reactivity/effects.js';
-export { mutable_source, mutate, source, set } from './reactivity/sources.js';
+export { mutable_source, mutate, source, source_link, set } from './reactivity/sources.js';
 export {
 	prop,
 	rest_props,
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index 86427a7509..d0c6441040 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -26,6 +26,7 @@ import {
 	MAYBE_DIRTY
 } from '../constants.js';
 import * as e from '../errors.js';
+import { derived } from './deriveds.js';
 
 let inspect_effects = new Set();
 
@@ -45,6 +46,54 @@ export function source(v) {
 	};
 }
 
+/**
+ * @template V
+ * @param {() => V} get_value
+ * @param {(value: V) => void} [callback]
+ * @returns {(value?: V) => V}
+ */
+export function source_link(get_value, callback) {
+	var was_local = false;
+	var init = false;
+	var local_source = source(/** @type {V} */ (undefined));
+
+	var linked_derived = derived(() => {
+		var local_value = /** @type {V} */ (get(local_source));
+		var linked_value = get_value();
+
+		if (was_local) {
+			was_local = false;
+			return local_value;
+		}
+
+		return linked_value;
+	});
+
+	return function (/** @type {any} */ value) {
+		if (arguments.length > 0) {
+			was_local = true;
+			set(local_source, value);
+			get(linked_derived);
+			return value;
+		}
+
+		var linked_value = get(linked_derived);
+
+		if (init) {
+			if (callback !== undefined) {
+				untrack(() => callback(linked_value));
+				return local_source.v;
+			}
+		} else {
+			init = true;
+		}
+
+		local_source.v = linked_value;
+
+		return linked_value;
+	};
+}
+
 /**
  * @template V
  * @param {V} initial_value
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index bf241c7947..f24d1f66e9 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -393,6 +393,7 @@ export function is_mathml(name) {
 
 const RUNES = /** @type {const} */ ([
 	'$state',
+	'$state.link',
 	'$state.raw',
 	'$state.snapshot',
 	'$props',
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-callback/_config.js b/packages/svelte/tests/runtime-runes/samples/state-link-callback/_config.js
new file mode 100644
index 0000000000..bb56464ec1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-link-callback/_config.js
@@ -0,0 +1,38 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>0</button><button>0</button><button>false</button>`,
+
+	test({ assert, target }) {
+		const [btn1, btn2, btn3] = target.querySelectorAll('button');
+
+		flushSync(() => btn1.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>1</button><button>1</button><button>false</button>`
+		);
+
+		flushSync(() => btn2.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>1</button><button>2</button><button>false</button>`
+		);
+
+		flushSync(() => btn3.click());
+		assert.htmlEqual(target.innerHTML, `<button>1</button><button>2</button><button>true</button>`);
+
+		flushSync(() => btn1.click());
+		assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button><button>true</button>`);
+
+		flushSync(() => btn1.click());
+		assert.htmlEqual(target.innerHTML, `<button>3</button><button>2</button><button>true</button>`);
+
+		flushSync(() => btn1.click());
+		flushSync(() => btn3.click());
+		assert.htmlEqual(
+			target.innerHTML,
+			`<button>4</button><button>4</button><button>false</button>`
+		);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-callback/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-link-callback/main.svelte
new file mode 100644
index 0000000000..3b52359d05
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-link-callback/main.svelte
@@ -0,0 +1,12 @@
+<script>
+	let a = $state(0);
+	let b = $state.link(a, (value) => {
+		if (c) return;
+		b = value;
+	});
+	let c = $state(false);
+</script>
+
+<button onclick={() => a++}>{a}</button>
+<button onclick={() => b++}>{b}</button>
+<button onclick={() => c = !c}>{c}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-class/_config.js b/packages/svelte/tests/runtime-runes/samples/state-link-class/_config.js
new file mode 100644
index 0000000000..4628d4f5b4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-link-class/_config.js
@@ -0,0 +1,19 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>0</button><button>0</button>`,
+
+	test({ assert, target }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		flushSync(() => btn1.click());
+		assert.htmlEqual(target.innerHTML, `<button>1</button><button>1</button>`);
+
+		flushSync(() => btn2.click());
+		assert.htmlEqual(target.innerHTML, `<button>1</button><button>2</button>`);
+
+		flushSync(() => btn1.click());
+		assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-class/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-link-class/main.svelte
new file mode 100644
index 0000000000..30d8968f8c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-link-class/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	class Instance {
+		a = $state(0);
+		b = $state.link(this.a);
+	}
+
+	const instance = new Instance();
+</script>
+
+<button onclick={() => instance.a++}>{instance.a}</button>
+<button onclick={() => instance.b++}>{instance.b}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-object/_config.js b/packages/svelte/tests/runtime-runes/samples/state-link-object/_config.js
new file mode 100644
index 0000000000..a0cf4b3c3f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-link-object/_config.js
@@ -0,0 +1,24 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>0</button><button>0</button><button>0</button>`,
+
+	test({ assert, target }) {
+		const [btn1, btn2, btn3] = target.querySelectorAll('button');
+
+		flushSync(() => btn1.click());
+		assert.htmlEqual(target.innerHTML, `<button>1</button><button>1</button><button>1</button>`);
+
+		// mutate the original object, via the link
+		flushSync(() => btn2.click());
+		assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button><button>2</button>`);
+
+		// mutate the copy
+		flushSync(() => btn3.click());
+		assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button><button>3</button>`);
+
+		flushSync(() => btn1.click());
+		assert.htmlEqual(target.innerHTML, `<button>3</button><button>3</button><button>3</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-link-object/main.svelte
new file mode 100644
index 0000000000..ec7dec4507
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-link-object/main.svelte
@@ -0,0 +1,9 @@
+<script>
+	let a = $state({ value: 0 });
+	let b = $state.link(a);
+	let c = $state.link({ ...a });
+</script>
+
+<button onclick={() => a.value++}>{a.value}</button>
+<button onclick={() => b.value++}>{b.value}</button>
+<button onclick={() => c.value++}>{c.value}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link/_config.js b/packages/svelte/tests/runtime-runes/samples/state-link/_config.js
new file mode 100644
index 0000000000..4628d4f5b4
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-link/_config.js
@@ -0,0 +1,19 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>0</button><button>0</button>`,
+
+	test({ assert, target }) {
+		const [btn1, btn2] = target.querySelectorAll('button');
+
+		flushSync(() => btn1.click());
+		assert.htmlEqual(target.innerHTML, `<button>1</button><button>1</button>`);
+
+		flushSync(() => btn2.click());
+		assert.htmlEqual(target.innerHTML, `<button>1</button><button>2</button>`);
+
+		flushSync(() => btn1.click());
+		assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-link/main.svelte
new file mode 100644
index 0000000000..aaa8d4ecaf
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/state-link/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	let a = $state(0);
+	let b = $state.link(a);
+</script>
+
+<button onclick={() => a++}>{a}</button>
+<button onclick={() => b++}>{b}</button>
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index e320455795..35b4e60f45 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -927,6 +927,7 @@ declare module 'svelte/compiler' {
 			| 'bindable_prop'
 			| 'rest_prop'
 			| 'state'
+			| 'linked_state'
 			| 'raw_state'
 			| 'derived'
 			| 'each'
@@ -2912,6 +2913,32 @@ declare namespace $state {
 	 *
 	 * @param initial The initial value
 	 */
+
+	/**
+	 * Declares reactive state that is linked to another value. Local reassignments
+	 * will override the linked value until the linked value changes.
+	 *
+	 * Example:
+	 * ```ts
+	 * let a = $state(0);
+	 * let b = $state.link(a);
+
+	 * a = 1;
+	 * console.log(a, b); // 1, 1
+
+	 * b = 2; // unlink
+	 * console.log(a, b); // 1, 2
+	 *
+	 * a = 3; // relink
+	 * console.log(a, b); // 3, 3
+	 * ```
+	 *
+	 * https://svelte-5-preview.vercel.app/docs/runes#$state-link
+	 *
+	 * @param value The linked value
+	 */
+	export function link<T>(value: T, callback?: (value: T) => void): T;
+
 	export function raw<T>(initial: T): T;
 	export function raw<T>(): T | undefined;
 	/**
diff --git a/sites/svelte-5-preview/src/lib/autocomplete.js b/sites/svelte-5-preview/src/lib/autocomplete.js
index b535c7ff04..d2e989e4d6 100644
--- a/sites/svelte-5-preview/src/lib/autocomplete.js
+++ b/sites/svelte-5-preview/src/lib/autocomplete.js
@@ -118,6 +118,7 @@ const runes = [
 	{ snippet: '$bindable()', test: is_bindable },
 	{ snippet: '$effect.root(() => {\n\t${}\n})' },
 	{ snippet: '$state.snapshot(${})' },
+	{ snippet: '$state.link(${})' },
 	{ snippet: '$effect.tracking()' },
 	{ snippet: '$inspect(${});', test: is_statement }
 ];
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index 02cea6ffb4..665d522815 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -64,6 +64,51 @@ Only plain objects and arrays [are made deeply reactive](/#H4sIAAAAAAAAE42QwWrDM
 
 In non-runes mode, a `let` declaration is treated as reactive state if it is updated at some point. Unlike `$state(...)`, which works anywhere in your app, `let` only behaves this way at the top level of a component.
 
+## `$state.link`
+
+Linked state stays up to date with its input:
+
+```js
+let a = $state(0);
+let b = $state.link(a);
+
+a = 1;
+console.log(a, b); // 1, 1
+```
+
+You can temporarily _unlink_ state. It will be _relinked_ when the input value changes:
+
+```js
+let a = 1;
+let b = 1;
+// ---cut---
+b = 2; // unlink
+console.log(a, b); // 1, 2
+
+a = 3; // relink
+console.log(a, b); // 3, 3
+```
+
+As with `$state`, if `$state.link` is passed a plain object or array it will be made deeply reactive. If passed an existing state proxy it will be reused, meaning that mutating the linked state will mutate the original. To clone a state proxy, you can use [`$state.snapshot`](#$state-snapshot).
+
+If you pass a callback to `$state.link`, changes to the input value will invoke the callback rather than updating the linked state, allowing you to choose whether to (for example) preserve or discard local changes, or merge incoming changes with local ones:
+
+```js
+let { stuff } = $props();
+
+let incoming = $state();
+let hasUnsavedChanges = $state(false);
+
+let current = $state.link({ ...stuff }, (stuff) => {
+	if (hasUnsavedChanges) {
+		incoming = stuff;
+	} else {
+		incoming = null;
+		current = stuff;
+	}
+});
+```
+
 ## `$state.raw`
 
 State declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:

From 363a5418e6330356ebc7abe39d240afccd255147 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 20 Aug 2024 15:13:55 -0400
Subject: [PATCH 169/196] Version Packages (next) (#12924)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  5 +++++
 packages/svelte/CHANGELOG.md   | 14 ++++++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 39fa455826..3859714435 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -231,6 +231,7 @@
     "friendly-candles-relate",
     "friendly-clouds-rhyme",
     "friendly-lies-camp",
+    "friendly-rice-confess",
     "funny-bugs-kiss",
     "funny-cooks-clean",
     "funny-dragons-double",
@@ -468,6 +469,7 @@
     "old-jokes-deliver",
     "old-mails-sneeze",
     "old-oranges-compete",
+    "old-planets-bow",
     "olive-apples-lick",
     "olive-cobras-wonder",
     "olive-forks-grin",
@@ -545,6 +547,7 @@
     "rich-cobras-exist",
     "rich-elephants-relax",
     "rich-garlics-laugh",
+    "rich-ladybugs-admire",
     "rich-olives-yell",
     "rich-plums-thank",
     "rich-sheep-burn",
@@ -704,6 +707,7 @@
     "swift-feet-juggle",
     "swift-knives-tie",
     "swift-poets-carry",
+    "swift-queens-begin",
     "swift-rats-sing",
     "swift-ravens-hunt",
     "swift-seahorses-deliver",
@@ -731,6 +735,7 @@
     "ten-ties-repair",
     "ten-trainers-juggle",
     "ten-worms-reflect",
+    "tender-bats-switch",
     "tender-lemons-judge",
     "tender-rocks-walk",
     "tender-suns-love",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 252115599f..677fbdc94b 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,19 @@
 # svelte
 
+## 5.0.0-next.229
+
+### Patch Changes
+
+- feat: add `$state.link` rune ([#12545](https://github.com/sveltejs/svelte/pull/12545))
+
+- fix: allow mixing slots and snippets in custom elements mode ([#12929](https://github.com/sveltejs/svelte/pull/12929))
+
+- fix: small legibility improvement in `Snippet` type hint ([#12928](https://github.com/sveltejs/svelte/pull/12928))
+
+- feat: support HMR with custom elements ([#12926](https://github.com/sveltejs/svelte/pull/12926))
+
+- feat: error on invalid component name ([#12821](https://github.com/sveltejs/svelte/pull/12821))
+
 ## 5.0.0-next.228
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 65c4362243..1ec0f8afed 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.228",
+  "version": "5.0.0-next.229",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 47d3fad170..7ab3cc0c2f 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.228';
+export const VERSION = '5.0.0-next.229';
 export const PUBLIC_VERSION = '5';

From 78677e40efd73c5f0497483d331a51b14f007765 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 20 Aug 2024 17:10:48 -0400
Subject: [PATCH 170/196] fix: align list of passive events with browser
 defaults, and add documentation (#12933)

closes #12639
---
 .changeset/famous-mirrors-count.md                          | 5 +++++
 documentation/docs/02-template-syntax/02-basic-markup.md    | 4 ++++
 packages/svelte/src/utils.js                                | 2 +-
 .../routes/docs/content/03-appendix/02-breaking-changes.md  | 6 ++++++
 4 files changed, 16 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/famous-mirrors-count.md

diff --git a/.changeset/famous-mirrors-count.md b/.changeset/famous-mirrors-count.md
new file mode 100644
index 0000000000..78e6011629
--- /dev/null
+++ b/.changeset/famous-mirrors-count.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: align list of passive events with browser defaults
diff --git a/documentation/docs/02-template-syntax/02-basic-markup.md b/documentation/docs/02-template-syntax/02-basic-markup.md
index b8e2632319..8bf9b2cf42 100644
--- a/documentation/docs/02-template-syntax/02-basic-markup.md
+++ b/documentation/docs/02-template-syntax/02-basic-markup.md
@@ -112,6 +112,10 @@ Because events are just attributes, the same rules as for attributes apply:
 
 Timing-wise, event attributes always fire after events from bindings (e.g. `oninput` always fires after an update to `bind:value`). Under the hood, some event handlers are attached directly with `addEventListener`, while others are _delegated_.
 
+When using `onwheel`, `onmousewheel`, `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) to align with browser defaults. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`.
+
+In the very rare cases that you need to prevent these event defaults, you should use [`on`](https://svelte-5-preview.vercel.app/docs/imports#svelte-events) instead (for example inside an action).
+
 ### Event delegation
 
 To reduce memory footprint and increase performance, Svelte uses a technique called event delegation. This means that for certain events — see the list below — a single event listener at the application root takes responsibility for running any handlers on the event's path.
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index f24d1f66e9..880fe9a2d4 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -222,7 +222,7 @@ export function is_dom_property(name) {
 	return DOM_PROPERTIES.includes(name);
 }
 
-const PASSIVE_EVENTS = ['wheel', 'touchstart', 'touchmove', 'touchend', 'touchcancel'];
+const PASSIVE_EVENTS = ['wheel', 'mousewheel', 'touchstart', 'touchmove'];
 
 /**
  * Returns `true` if `name` is a passive event
diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
index ebf8f91e80..a414929203 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
@@ -238,6 +238,12 @@ This is [no longer true in Svelte 5](/#H4sIAAAAAAAAE4WQwU7DMAyGX8VESANpXe8lq9Q8A
 <svelte:component this={Thing} />
 ```
 
+### Touch and wheel events are passive
+
+When using `onwheel`, `onmousewheel`, `ontouchstart` and `ontouchmove` event attributes, the handlers are [passive](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#using_passive_listeners) to align with browser defaults. This greatly improves responsiveness by allowing the browser to scroll the document immediately, rather than waiting to see if the event handler calls `event.preventDefault()`.
+
+In the very rare cases that you need to prevent these event defaults, you should use [`on`](https://svelte-5-preview.vercel.app/docs/imports#svelte-events) instead (for example inside an action).
+
 ## Other breaking changes
 
 ### Stricter `@const` assignment validation

From 9c2ca693a5d8a06ba4b0582ac03ce3fefd51dca5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gautier=20Ben=20A=C3=AFm?=
 <48261497+GauBen@users.noreply.github.com>
Date: Wed, 21 Aug 2024 05:02:25 +0200
Subject: [PATCH 171/196] fix: ensure await scope shadowing is computed in the
 correct order (#12945)

* fix: ensure await scope shadowing is computed in the correct order

* Create popular-news-happen.md

* removed solo
---
 .changeset/popular-news-happen.md                     |  5 +++++
 .../phases/3-transform/client/visitors/AwaitBlock.js  |  5 ++++-
 .../samples/await-then-shadowed/_config.js            | 10 ++++++++++
 .../samples/await-then-shadowed/main.svelte           | 11 +++++++++++
 4 files changed, 30 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/popular-news-happen.md
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/_config.js
 create mode 100644 packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/main.svelte

diff --git a/.changeset/popular-news-happen.md b/.changeset/popular-news-happen.md
new file mode 100644
index 0000000000..c617baa805
--- /dev/null
+++ b/.changeset/popular-news-happen.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: ensure `{#await}` scope shadowing is computed in the correct order
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
index f956a5cf30..67589244cc 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/AwaitBlock.js
@@ -11,6 +11,9 @@ import { create_derived_block_argument } from '../utils.js';
 export function AwaitBlock(node, context) {
 	context.state.template.push('<!>');
 
+	// Visit {#await <expression>} first to ensure that scopes are in the correct order
+	const expression = b.thunk(/** @type {Expression} */ (context.visit(node.expression)));
+
 	let then_block;
 	let catch_block;
 
@@ -45,7 +48,7 @@ export function AwaitBlock(node, context) {
 			b.call(
 				'$.await',
 				context.state.node,
-				b.thunk(/** @type {Expression} */ (context.visit(node.expression))),
+				expression,
 				node.pending
 					? b.arrow([b.id('$$anchor')], /** @type {BlockStatement} */ (context.visit(node.pending)))
 					: b.literal(null),
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/_config.js b/packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/_config.js
new file mode 100644
index 0000000000..08b62d8da8
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/_config.js
@@ -0,0 +1,10 @@
+import { test } from '../../test';
+
+export default test({
+	html: '<div>Loading...</div>',
+
+	async test({ assert, target }) {
+		await Promise.resolve();
+		assert.htmlEqual(target.innerHTML, '<div>10</div>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/main.svelte b/packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/main.svelte
new file mode 100644
index 0000000000..bb4bdef5fd
--- /dev/null
+++ b/packages/svelte/tests/runtime-legacy/samples/await-then-shadowed/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	const x = Promise.resolve(10);
+</script>
+
+<div>
+	{#await x}
+		Loading...
+	{:then x}
+		{x}
+	{/await}
+</div>

From 419546f29b4d9a6015051639dfabb12d080088f1 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 21 Aug 2024 05:11:51 +0200
Subject: [PATCH 172/196] fix: don't skip custom elements with attributes
 (#12939)

* fix: don't skip custom elements with attributes

fixes #12934

* still need this

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/wild-moose-destroy.md                          | 5 +++++
 .../compiler/phases/2-analyze/visitors/RegularElement.js  | 8 +++++++-
 .../phases/3-transform/client/visitors/shared/fragment.js | 2 +-
 .../skip-static-subtree/_expected/client/index.svelte.js  | 8 +++++++-
 .../skip-static-subtree/_expected/server/index.svelte.js  | 2 +-
 .../snapshot/samples/skip-static-subtree/index.svelte     | 4 ++++
 6 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/wild-moose-destroy.md

diff --git a/.changeset/wild-moose-destroy.md b/.changeset/wild-moose-destroy.md
new file mode 100644
index 0000000000..9dfc8d2bc1
--- /dev/null
+++ b/.changeset/wild-moose-destroy.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: don't skip custom elements with attributes
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
index 16be82ed2c..dc283db7e2 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/RegularElement.js
@@ -7,10 +7,11 @@ import {
 } from '../../../../html-tree-validation.js';
 import * as e from '../../../errors.js';
 import * as w from '../../../warnings.js';
-import { create_attribute } from '../../nodes.js';
+import { create_attribute, is_custom_element_node } from '../../nodes.js';
 import { regex_starts_with_newline } from '../../patterns.js';
 import { check_element } from './shared/a11y.js';
 import { validate_element } from './shared/element.js';
+import { mark_subtree_dynamic } from './shared/fragment.js';
 
 /**
  * @param {RegularElement} node
@@ -88,6 +89,11 @@ export function RegularElement(node, context) {
 	node.metadata.svg = is_svg(node.name);
 	node.metadata.mathml = is_mathml(node.name);
 
+	if (is_custom_element_node(node) && node.attributes.length > 0) {
+		// we're setting all attributes on custom elements through properties
+		mark_subtree_dynamic(context.path);
+	}
+
 	if (context.state.parent_element) {
 		let past_parent = false;
 		let only_warn = false;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js
index cbe0272827..6dcb794f2c 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,6 +1,6 @@
 /** @import { Expression } from 'estree' */
 /** @import { ExpressionTag, SvelteNode, Text } from '#compiler' */
-/** @import { ComponentClientTransformState, ComponentContext } from '../../types' */
+/** @import { ComponentContext } from '../../types' */
 import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { build_template_literal, build_update } from './utils.js';
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
index 5eacd941ea..4f59c4932e 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
@@ -1,7 +1,7 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
-var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!></main>`, 1);
+var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!></main> <cant-skip><custom-elements></custom-elements></cant-skip>`, 3);
 
 export default function Skip_static_subtree($$anchor, $$props) {
 	var fragment = root();
@@ -15,6 +15,12 @@ export default function Skip_static_subtree($$anchor, $$props) {
 
 	$.html(node, () => $$props.content, false, false);
 	$.reset(main);
+
+	var cant_skip = $.sibling(main, 2);
+	var custom_elements = $.child(cant_skip);
+
+	$.set_custom_element_data(custom_elements, "with", "attributes");
+	$.reset(cant_skip);
 	$.template_effect(() => $.set_text(text, $$props.title));
 	$.append($$anchor, fragment);
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
index 8ea5fc9b13..1018b5425e 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
@@ -3,5 +3,5 @@ import * as $ from "svelte/internal/server";
 export default function Skip_static_subtree($$payload, $$props) {
 	let { title, content } = $$props;
 
-	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)}</main>`;
+	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)}</main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip>`;
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte b/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
index 001196a879..cc9d8172e6 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
@@ -19,3 +19,7 @@
 	<p>ones</p>
 	{@html content}
 </main>
+
+<cant-skip>
+	<custom-elements with="attributes"></custom-elements>
+</cant-skip>

From af35fb7ae6be1d4b4dea00c7e49379e7bbd7d3c6 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Tue, 20 Aug 2024 23:14:11 -0400
Subject: [PATCH 173/196] Version Packages (next) (#12940)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  3 +++
 packages/svelte/CHANGELOG.md   | 10 ++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 3859714435..bc65ed8e34 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -181,6 +181,7 @@
     "famous-falcons-melt",
     "famous-kiwis-thank",
     "famous-knives-sneeze",
+    "famous-mirrors-count",
     "famous-pants-pay",
     "fast-donkeys-pay",
     "fast-penguins-matter",
@@ -517,6 +518,7 @@
     "popular-games-hug",
     "popular-ligers-perform",
     "popular-mangos-rest",
+    "popular-news-happen",
     "popular-roses-teach",
     "popular-walls-hunt",
     "pretty-ties-help",
@@ -826,6 +828,7 @@
     "wild-cows-chew",
     "wild-foxes-wonder",
     "wild-moose-compare",
+    "wild-moose-destroy",
     "wild-poems-design",
     "wild-pumas-count",
     "wise-apples-care",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 677fbdc94b..2cb7466dd5 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.0.0-next.230
+
+### Patch Changes
+
+- fix: align list of passive events with browser defaults ([#12933](https://github.com/sveltejs/svelte/pull/12933))
+
+- fix: ensure `{#await}` scope shadowing is computed in the correct order ([#12945](https://github.com/sveltejs/svelte/pull/12945))
+
+- fix: don't skip custom elements with attributes ([#12939](https://github.com/sveltejs/svelte/pull/12939))
+
 ## 5.0.0-next.229
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 1ec0f8afed..e95e527ca7 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.229",
+  "version": "5.0.0-next.230",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 7ab3cc0c2f..74b44a7e9f 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.229';
+export const VERSION = '5.0.0-next.230';
 export const PUBLIC_VERSION = '5';

From 0b51ff04b045d2fa53c0b5a365f3d3a2c0541aa5 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 21 Aug 2024 09:48:50 -0400
Subject: [PATCH 174/196] breaking: remove `$state.link` callback (#12942)

* breaking: remove `$state.link` callback

* simplify

* regenerate
---
 .changeset/sharp-foxes-whisper.md             |  5 +++
 documentation/docs/03-runes/01-state.md       | 18 ---------
 packages/svelte/src/ambient.d.ts              |  2 +-
 .../client/visitors/VariableDeclaration.js    |  6 +--
 .../src/internal/client/reactivity/sources.js | 19 +---------
 .../samples/state-link-callback/_config.js    | 38 -------------------
 .../samples/state-link-callback/main.svelte   | 12 ------
 packages/svelte/types/index.d.ts              |  2 +-
 .../routes/docs/content/01-api/02-runes.md    | 18 ---------
 9 files changed, 10 insertions(+), 110 deletions(-)
 create mode 100644 .changeset/sharp-foxes-whisper.md
 delete mode 100644 packages/svelte/tests/runtime-runes/samples/state-link-callback/_config.js
 delete mode 100644 packages/svelte/tests/runtime-runes/samples/state-link-callback/main.svelte

diff --git a/.changeset/sharp-foxes-whisper.md b/.changeset/sharp-foxes-whisper.md
new file mode 100644
index 0000000000..553ae1bd6d
--- /dev/null
+++ b/.changeset/sharp-foxes-whisper.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: remove callback from `$state.link`
diff --git a/documentation/docs/03-runes/01-state.md b/documentation/docs/03-runes/01-state.md
index 35dc2f357d..8d78e6c73e 100644
--- a/documentation/docs/03-runes/01-state.md
+++ b/documentation/docs/03-runes/01-state.md
@@ -89,24 +89,6 @@ console.log(a, b); // 3, 3
 
 As with `$state`, if `$state.link` is passed a plain object or array it will be made deeply reactive. If passed an existing state proxy it will be reused, meaning that mutating the linked state will mutate the original. To clone a state proxy, you can use [`$state.snapshot`](#$state-snapshot).
 
-If you pass a callback to `$state.link`, changes to the input value will invoke the callback rather than updating the linked state, allowing you to choose whether to (for example) preserve or discard local changes, or merge incoming changes with local ones:
-
-```js
-let { stuff } = $props();
-
-let incoming = $state();
-let hasUnsavedChanges = $state(false);
-
-let current = $state.link({ ...stuff }, (stuff) => {
-	if (hasUnsavedChanges) {
-		incoming = stuff;
-	} else {
-		incoming = null;
-		current = stuff;
-	}
-});
-```
-
 ## `$state.raw`
 
 State declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
index e58b2c5aa5..a84085fd5a 100644
--- a/packages/svelte/src/ambient.d.ts
+++ b/packages/svelte/src/ambient.d.ts
@@ -148,7 +148,7 @@ declare namespace $state {
 	 *
 	 * @param value The linked value
 	 */
-	export function link<T>(value: T, callback?: (value: T) => void): T;
+	export function link<T>(value: T): T;
 
 	export function raw<T>(initial: T): T;
 	export function raw<T>(): T | undefined;
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index 2c1db714ca..84713f73ca 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -131,11 +131,7 @@ export function VariableDeclaration(node, context) {
 					}
 
 					if (rune === '$state.link') {
-						value = b.call(
-							'$.source_link',
-							b.thunk(value),
-							args.length === 2 && /** @type {Expression} */ (context.visit(args[1]))
-						);
+						value = b.call('$.source_link', b.thunk(value));
 					} else if (is_state_source(binding, context.state.analysis)) {
 						value = b.call('$.source', value);
 					}
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index d0c6441040..edfa8806e8 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -49,12 +49,10 @@ export function source(v) {
 /**
  * @template V
  * @param {() => V} get_value
- * @param {(value: V) => void} [callback]
  * @returns {(value?: V) => V}
  */
-export function source_link(get_value, callback) {
+export function source_link(get_value) {
 	var was_local = false;
-	var init = false;
 	var local_source = source(/** @type {V} */ (undefined));
 
 	var linked_derived = derived(() => {
@@ -77,20 +75,7 @@ export function source_link(get_value, callback) {
 			return value;
 		}
 
-		var linked_value = get(linked_derived);
-
-		if (init) {
-			if (callback !== undefined) {
-				untrack(() => callback(linked_value));
-				return local_source.v;
-			}
-		} else {
-			init = true;
-		}
-
-		local_source.v = linked_value;
-
-		return linked_value;
+		return (local_source.v = get(linked_derived));
 	};
 }
 
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-callback/_config.js b/packages/svelte/tests/runtime-runes/samples/state-link-callback/_config.js
deleted file mode 100644
index bb56464ec1..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/state-link-callback/_config.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { flushSync } from 'svelte';
-import { test } from '../../test';
-
-export default test({
-	html: `<button>0</button><button>0</button><button>false</button>`,
-
-	test({ assert, target }) {
-		const [btn1, btn2, btn3] = target.querySelectorAll('button');
-
-		flushSync(() => btn1.click());
-		assert.htmlEqual(
-			target.innerHTML,
-			`<button>1</button><button>1</button><button>false</button>`
-		);
-
-		flushSync(() => btn2.click());
-		assert.htmlEqual(
-			target.innerHTML,
-			`<button>1</button><button>2</button><button>false</button>`
-		);
-
-		flushSync(() => btn3.click());
-		assert.htmlEqual(target.innerHTML, `<button>1</button><button>2</button><button>true</button>`);
-
-		flushSync(() => btn1.click());
-		assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button><button>true</button>`);
-
-		flushSync(() => btn1.click());
-		assert.htmlEqual(target.innerHTML, `<button>3</button><button>2</button><button>true</button>`);
-
-		flushSync(() => btn1.click());
-		flushSync(() => btn3.click());
-		assert.htmlEqual(
-			target.innerHTML,
-			`<button>4</button><button>4</button><button>false</button>`
-		);
-	}
-});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-callback/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-link-callback/main.svelte
deleted file mode 100644
index 3b52359d05..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/state-link-callback/main.svelte
+++ /dev/null
@@ -1,12 +0,0 @@
-<script>
-	let a = $state(0);
-	let b = $state.link(a, (value) => {
-		if (c) return;
-		b = value;
-	});
-	let c = $state(false);
-</script>
-
-<button onclick={() => a++}>{a}</button>
-<button onclick={() => b++}>{b}</button>
-<button onclick={() => c = !c}>{c}</button>
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 35b4e60f45..6f9828375a 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -2937,7 +2937,7 @@ declare namespace $state {
 	 *
 	 * @param value The linked value
 	 */
-	export function link<T>(value: T, callback?: (value: T) => void): T;
+	export function link<T>(value: T): T;
 
 	export function raw<T>(initial: T): T;
 	export function raw<T>(): T | undefined;
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index 665d522815..5fbed65a09 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -91,24 +91,6 @@ console.log(a, b); // 3, 3
 
 As with `$state`, if `$state.link` is passed a plain object or array it will be made deeply reactive. If passed an existing state proxy it will be reused, meaning that mutating the linked state will mutate the original. To clone a state proxy, you can use [`$state.snapshot`](#$state-snapshot).
 
-If you pass a callback to `$state.link`, changes to the input value will invoke the callback rather than updating the linked state, allowing you to choose whether to (for example) preserve or discard local changes, or merge incoming changes with local ones:
-
-```js
-let { stuff } = $props();
-
-let incoming = $state();
-let hasUnsavedChanges = $state(false);
-
-let current = $state.link({ ...stuff }, (stuff) => {
-	if (hasUnsavedChanges) {
-		incoming = stuff;
-	} else {
-		incoming = null;
-		current = stuff;
-	}
-});
-```
-
 ## `$state.raw`
 
 State declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:

From 17ba4004d7b874d91b969b12609514b8887201c4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 21 Aug 2024 10:08:07 -0400
Subject: [PATCH 175/196] fix: compile error for incorrectly place
 `$state.link` or wrong argument count (#12954)

---
 .../src/compiler/phases/2-analyze/visitors/CallExpression.js   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

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 9df622637f..bdcca2bff8 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -74,6 +74,7 @@ export function CallExpression(node, context) {
 
 		case '$state':
 		case '$state.raw':
+		case '$state.link':
 		case '$derived':
 		case '$derived.by':
 			if (
@@ -85,7 +86,7 @@ export function CallExpression(node, context) {
 
 			if ((rune === '$derived' || rune === '$derived.by') && node.arguments.length !== 1) {
 				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
-			} else if (rune === '$state' && node.arguments.length > 1) {
+			} else if ((rune === '$state' || rune === '$state.link') && node.arguments.length > 1) {
 				e.rune_invalid_arguments_length(node, rune, 'zero or one arguments');
 			}
 

From 3b3ed7778375084923fb8e5381fb7c8b3433227a Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 21 Aug 2024 10:35:07 -0400
Subject: [PATCH 176/196] Version Packages (next) (#12953)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 1 +
 packages/svelte/CHANGELOG.md   | 6 ++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index bc65ed8e34..fa9f1c5bac 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -587,6 +587,7 @@
     "shaggy-cameras-live",
     "shaggy-comics-jog",
     "sharp-fishes-serve",
+    "sharp-foxes-whisper",
     "sharp-gorillas-impress",
     "sharp-kids-happen",
     "sharp-spies-live",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 2cb7466dd5..6ea8ac9eb2 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.0.0-next.231
+
+### Patch Changes
+
+- breaking: remove callback from `$state.link` ([#12942](https://github.com/sveltejs/svelte/pull/12942))
+
 ## 5.0.0-next.230
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index e95e527ca7..834b0d5b90 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.230",
+  "version": "5.0.0-next.231",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 74b44a7e9f..660f11d929 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.230';
+export const VERSION = '5.0.0-next.231';
 export const PUBLIC_VERSION = '5';

From 732dbf7fa9b0166f25405d8e0694aa540ea9898d Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 21 Aug 2024 21:15:22 +0200
Subject: [PATCH 177/196] breaking: deprecate `context="module"` in favor of
 `module` (#12948)

* breaking: deprecate `context="module"` in favor of `module`

Also reserve a few attributes, which we may or may not use in the future

closes #12637

* fix tests

* one more

* add svelte package to the root so eslint and prettier can use it

* tweak messages

* warn on unknown attributes

* regenerate

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/quick-eagles-sit.md                |  5 +
 .../01-component-fundamentals.md              |  6 +-
 package.json                                  |  1 +
 .../svelte/messages/compile-errors/script.md  |  4 +-
 .../messages/compile-errors/template.md       | 10 +-
 .../messages/compile-warnings/template.md     |  8 ++
 packages/svelte/src/compiler/errors.js        | 32 +++++--
 packages/svelte/src/compiler/migrate/index.js | 14 ++-
 .../compiler/phases/1-parse/read/script.js    | 72 +++++++++-----
 .../src/compiler/phases/2-analyze/index.js    |  2 +-
 .../svelte/src/compiler/types/template.d.ts   |  4 +-
 packages/svelte/src/compiler/warnings.js      | 18 ++++
 .../samples/export-state-module/_config.js    |  2 +-
 .../samples/export-state-module/main.svelte   |  2 +-
 .../samples/runes-export-let/main.svelte      |  2 +-
 .../store-autosub-context-module/_config.js   |  4 +-
 .../store-autosub-context-module/main.svelte  |  2 +-
 .../script-context-module/input.svelte        |  3 +
 .../script-context-module/output.svelte       |  3 +
 .../samples/options/input.svelte              |  2 +-
 .../parser-modern/samples/options/output.json | 58 +++++-------
 .../samples/component-namespace/Widget.svelte |  8 +-
 .../component-namespaced/components.svelte    |  8 +-
 .../component-slot-fallback-2/store.svelte    | 46 ++++-----
 .../samples/context-api/Tabs.svelte           |  2 +-
 .../main.svelte                               |  4 +-
 .../Foo.svelte                                |  6 +-
 .../samples/module-context-export/Foo.svelte  |  2 +-
 .../main.svelte                               |  2 +-
 .../samples/module-context/main.svelte        |  4 +-
 .../samples/preload/main.svelte               |  4 +-
 .../main.svelte                               |  2 +-
 .../main.svelte                               |  2 +-
 .../samples/store-imported-module/main.svelte |  2 +-
 .../class-state-derived-unowned/main.svelte   |  2 +-
 .../Component.svelte                          |  2 +-
 .../derived-unowned-2/Component.svelte        | 11 +--
 .../samples/derived-unowned-5/main.svelte     |  2 +-
 .../samples/derived-unowned-8/main.svelte     |  6 +-
 .../samples/derived-unowned/Component.svelte  |  4 +-
 .../samples/effect-dependencies/main.svelte   | 10 +-
 .../samples/element-is-attribute/main.svelte  |  2 +-
 .../event-attribute-not-hoistable/main.svelte |  2 +-
 .../samples/inspect-derived-2/main.svelte     |  2 +-
 .../samples/module-context-export/main.svelte |  2 +-
 .../non-local-mutation-global-2/child.svelte  |  4 +-
 .../proxied-state-property-access/main.svelte |  2 +-
 .../runes-in-module-context/main.svelte       |  2 +-
 .../samples/typescript/main.svelte            |  2 +-
 .../samples/two-scripts/input.svelte          |  2 +-
 .../illegal-variable-declaration/errors.json  |  2 +-
 .../illegal-variable-declaration/input.svelte |  2 +-
 .../samples/inline-new-class-5/input.svelte   |  8 +-
 .../input.svelte                              |  2 +-
 .../errors.json                               |  2 +-
 .../errors.json                               |  2 +-
 .../input.svelte                              |  4 +-
 .../input.svelte                              |  2 +-
 .../reactive-module-variable-2/input.svelte   |  2 +-
 .../reactive-module-variable/input.svelte     |  2 +-
 .../input.svelte                              |  3 +
 .../warnings.json                             | 14 +++
 .../script-invalid-context/errors.json        |  2 +-
 .../input.svelte                              |  1 +
 .../warnings.json                             | 14 +++
 .../script-unknown-attribute/input.svelte     |  1 +
 .../script-unknown-attribute/warnings.json    | 14 +++
 .../samples/silence-warnings-2/input.svelte   |  2 +-
 .../samples/silence-warnings/input.svelte     |  2 +-
 .../unreferenced-variables/input.svelte       |  2 +-
 packages/svelte/types/index.d.ts              |  4 +-
 pnpm-lock.yaml                                | 94 +++----------------
 .../src/lib/CodeMirror.svelte                 |  2 +-
 .../content/03-appendix/03-deprecations.md    | 11 +++
 74 files changed, 339 insertions(+), 258 deletions(-)
 create mode 100644 .changeset/quick-eagles-sit.md
 create mode 100644 packages/svelte/tests/migrate/samples/script-context-module/input.svelte
 create mode 100644 packages/svelte/tests/migrate/samples/script-context-module/output.svelte
 create mode 100644 packages/svelte/tests/validator/samples/script-context-module-deprecated/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/script-context-module-deprecated/warnings.json
 create mode 100644 packages/svelte/tests/validator/samples/script-invalid-spread-attribute/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/script-invalid-spread-attribute/warnings.json
 create mode 100644 packages/svelte/tests/validator/samples/script-unknown-attribute/input.svelte
 create mode 100644 packages/svelte/tests/validator/samples/script-unknown-attribute/warnings.json

diff --git a/.changeset/quick-eagles-sit.md b/.changeset/quick-eagles-sit.md
new file mode 100644
index 0000000000..613ea2bd05
--- /dev/null
+++ b/.changeset/quick-eagles-sit.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: deprecate `context="module"` in favor of `module`
diff --git a/documentation/docs/02-template-syntax/01-component-fundamentals.md b/documentation/docs/02-template-syntax/01-component-fundamentals.md
index debe4828d2..fc81bb24bd 100644
--- a/documentation/docs/02-template-syntax/01-component-fundamentals.md
+++ b/documentation/docs/02-template-syntax/01-component-fundamentals.md
@@ -161,16 +161,16 @@ If you'd like to react to changes to a prop, use the `$derived` or `$effect` run
 
 For more information on reactivity, read the documentation around runes.
 
-## &lt;script context="module"&gt;
+## &lt;script module&gt;
 
-A `<script>` tag with a `context="module"` attribute runs once when the module first evaluates, rather than for each component instance. Values declared in this block are accessible from a regular `<script>` (and the component markup) but not vice versa.
+A `<script>` tag with a `module` attribute runs once when the module first evaluates, rather than for each component instance. Values declared in this block are accessible from a regular `<script>` (and the component markup) but not vice versa.
 
 You can `export` bindings from this block, and they will become exports of the compiled module.
 
 You cannot `export default`, since the default export is the component itself.
 
 ```svelte
-<script context="module">
+<script module>
 	let totalComponents = 0;
 
 	// the export keyword allows this function to imported with e.g.
diff --git a/package.json b/package.json
index 9a7366572c..570b3bdcf5 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "playwright": "^1.41.1",
     "prettier": "^3.2.4",
     "prettier-plugin-svelte": "^3.1.2",
+    "svelte": "workspace:^",
     "typescript": "^5.5.2",
     "typescript-eslint": "^8.0.0-alpha.34",
     "v8-natives": "^1.2.5",
diff --git a/packages/svelte/messages/compile-errors/script.md b/packages/svelte/messages/compile-errors/script.md
index e84174e42a..47dbac6eab 100644
--- a/packages/svelte/messages/compile-errors/script.md
+++ b/packages/svelte/messages/compile-errors/script.md
@@ -16,7 +16,7 @@
 
 ## declaration_duplicate_module_import
 
-> Cannot declare same variable name which is imported inside `<script context="module">`
+> Cannot declare a variable with the same name as an import inside `<script module>`
 
 ## derived_invalid_export
 
@@ -152,7 +152,7 @@
 
 ## store_invalid_subscription
 
-> Cannot reference store value inside `<script context="module">`
+> Cannot reference store value inside `<script module>`
 
 ## store_invalid_subscription_module
 
diff --git a/packages/svelte/messages/compile-errors/template.md b/packages/svelte/messages/compile-errors/template.md
index 95e60c0cf5..49a422ecde 100644
--- a/packages/svelte/messages/compile-errors/template.md
+++ b/packages/svelte/messages/compile-errors/template.md
@@ -216,12 +216,20 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 
 ## script_duplicate
 
-> A component can have a single top-level `<script>` element and/or a single top-level `<script context="module">` element
+> A component can have a single top-level `<script>` element and/or a single top-level `<script module>` element
+
+## script_invalid_attribute_value
+
+> If the `%name%` attribute is supplied, it must be a boolean attribute
 
 ## script_invalid_context
 
 > If the context attribute is supplied, its value must be "module"
 
+## script_reserved_attribute
+
+> The `%name%` attribute is reserved and cannot be used
+
 ## slot_attribute_duplicate
 
 > Duplicate slot name '%name%' in <%component%>
diff --git a/packages/svelte/messages/compile-warnings/template.md b/packages/svelte/messages/compile-warnings/template.md
index 31774d0555..194bd1087d 100644
--- a/packages/svelte/messages/compile-warnings/template.md
+++ b/packages/svelte/messages/compile-warnings/template.md
@@ -50,6 +50,14 @@ HTML restricts where certain elements can appear. In case of a violation the bro
 
 This code will work when the component is rendered on the client (which is why this is a warning rather than an error), but if you use server rendering it will cause hydration to fail.
 
+## script_context_deprecated
+
+> `context="module"` is deprecated, use the `module` attribute instead
+
+## script_unknown_attribute
+
+> Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
+
 ## slot_element_deprecated
 
 > Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
diff --git a/packages/svelte/src/compiler/errors.js b/packages/svelte/src/compiler/errors.js
index f0fca61e9a..e6d1093998 100644
--- a/packages/svelte/src/compiler/errors.js
+++ b/packages/svelte/src/compiler/errors.js
@@ -99,12 +99,12 @@ export function declaration_duplicate(node, name) {
 }
 
 /**
- * Cannot declare same variable name which is imported inside `<script context="module">`
+ * Cannot declare a variable with the same name as an import inside `<script module>`
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function declaration_duplicate_module_import(node) {
-	e(node, "declaration_duplicate_module_import", "Cannot declare same variable name which is imported inside `<script context=\"module\">`");
+	e(node, "declaration_duplicate_module_import", "Cannot declare a variable with the same name as an import inside `<script module>`");
 }
 
 /**
@@ -417,12 +417,12 @@ export function store_invalid_scoped_subscription(node) {
 }
 
 /**
- * Cannot reference store value inside `<script context="module">`
+ * Cannot reference store value inside `<script module>`
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function store_invalid_subscription(node) {
-	e(node, "store_invalid_subscription", "Cannot reference store value inside `<script context=\"module\">`");
+	e(node, "store_invalid_subscription", "Cannot reference store value inside `<script module>`");
 }
 
 /**
@@ -1044,12 +1044,22 @@ export function render_tag_invalid_spread_argument(node) {
 }
 
 /**
- * A component can have a single top-level `<script>` element and/or a single top-level `<script context="module">` element
+ * A component can have a single top-level `<script>` element and/or a single top-level `<script module>` element
  * @param {null | number | NodeLike} node
  * @returns {never}
  */
 export function script_duplicate(node) {
-	e(node, "script_duplicate", "A component can have a single top-level `<script>` element and/or a single top-level `<script context=\"module\">` element");
+	e(node, "script_duplicate", "A component can have a single top-level `<script>` element and/or a single top-level `<script module>` element");
+}
+
+/**
+ * If the `%name%` attribute is supplied, it must be a boolean attribute
+ * @param {null | number | NodeLike} node
+ * @param {string} name
+ * @returns {never}
+ */
+export function script_invalid_attribute_value(node, name) {
+	e(node, "script_invalid_attribute_value", `If the \`${name}\` attribute is supplied, it must be a boolean attribute`);
 }
 
 /**
@@ -1061,6 +1071,16 @@ export function script_invalid_context(node) {
 	e(node, "script_invalid_context", "If the context attribute is supplied, its value must be \"module\"");
 }
 
+/**
+ * The `%name%` attribute is reserved and cannot be used
+ * @param {null | number | NodeLike} node
+ * @param {string} name
+ * @returns {never}
+ */
+export function script_reserved_attribute(node, name) {
+	e(node, "script_reserved_attribute", `The \`${name}\` attribute is reserved and cannot be used`);
+}
+
 /**
  * Duplicate slot name '%name%' in <%component%>
  * @param {null | number | NodeLike} node
diff --git a/packages/svelte/src/compiler/migrate/index.js b/packages/svelte/src/compiler/migrate/index.js
index 31aee08cfa..658da75f3a 100644
--- a/packages/svelte/src/compiler/migrate/index.js
+++ b/packages/svelte/src/compiler/migrate/index.js
@@ -1,5 +1,4 @@
 /** @import { VariableDeclarator, Node, Identifier } from 'estree' */
-/** @import { SvelteNode } from '../types/template.js' */
 /** @import { Visitors } from 'zimmerframe' */
 /** @import { ComponentAnalysis } from '../phases/types.js' */
 /** @import { Scope } from '../phases/scope.js' */
@@ -58,6 +57,13 @@ export function migrate(source) {
 			needs_run: false
 		};
 
+		if (parsed.module) {
+			const context = parsed.module.attributes.find((attr) => attr.name === 'context');
+			if (context) {
+				state.str.update(context.start, context.end, 'module');
+			}
+		}
+
 		if (parsed.instance) {
 			walk(parsed.instance.content, state, instance_script);
 		}
@@ -223,7 +229,7 @@ export function migrate(source) {
  * }} State
  */
 
-/** @type {Visitors<SvelteNode, State>} */
+/** @type {Visitors<Compiler.SvelteNode, State>} */
 const instance_script = {
 	_(node, { state, next }) {
 		// @ts-expect-error
@@ -472,7 +478,7 @@ const instance_script = {
 	}
 };
 
-/** @type {Visitors<SvelteNode, State>} */
+/** @type {Visitors<Compiler.SvelteNode, State>} */
 const template = {
 	Identifier(node, { state, path }) {
 		handle_identifier(node, state, path);
@@ -590,7 +596,7 @@ const template = {
 /**
  * @param {VariableDeclarator} declarator
  * @param {MagicString} str
- * @param {Compiler.SvelteNode[]} path
+ * @param {Array<Compiler.SvelteNode>} path
  */
 function extract_type_and_comment(declarator, str, path) {
 	const parent = path.at(-1);
diff --git a/packages/svelte/src/compiler/phases/1-parse/read/script.js b/packages/svelte/src/compiler/phases/1-parse/read/script.js
index 1b85da60dc..3403b5aab4 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/script.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/script.js
@@ -4,32 +4,14 @@
 import * as acorn from '../acorn.js';
 import { regex_not_newline_characters } from '../../patterns.js';
 import * as e from '../../../errors.js';
+import * as w from '../../../warnings.js';
+import { is_text_attribute } from '../../../utils/ast.js';
 
 const regex_closing_script_tag = /<\/script\s*>/;
 const regex_starts_with_closing_script_tag = /^<\/script\s*>/;
 
-/**
- * @param {any[]} attributes
- * @returns {string}
- */
-function get_context(attributes) {
-	const context = attributes.find(
-		/** @param {any} attribute */ (attribute) => attribute.name === 'context'
-	);
-	if (!context) return 'default';
-
-	if (context.value.length !== 1 || context.value[0].type !== 'Text') {
-		e.script_invalid_context(context.start);
-	}
-
-	const value = context.value[0].data;
-
-	if (value !== 'module') {
-		e.script_invalid_context(context.start);
-	}
-
-	return value;
-}
+const RESERVED_ATTRIBUTES = ['server', 'client', 'worker', 'test', 'default'];
+const ALLOWED_ATTRIBUTES = ['context', 'generics', 'lang', 'module'];
 
 /**
  * @param {Parser} parser
@@ -60,14 +42,56 @@ export function read_script(parser, start, attributes) {
 	// TODO is this necessary?
 	ast.start = script_start;
 
+	/** @type {'default' | 'module'} */
+	let context = 'default';
+
+	for (const attribute of /** @type {Attribute[]} */ (attributes)) {
+		if (RESERVED_ATTRIBUTES.includes(attribute.name)) {
+			e.script_reserved_attribute(attribute, attribute.name);
+		}
+
+		if (!ALLOWED_ATTRIBUTES.includes(attribute.name)) {
+			w.script_unknown_attribute(attribute);
+		}
+
+		if (attribute.name === 'module') {
+			if (attribute.value !== true) {
+				// Deliberately a generic code to future-proof for potential other attributes
+				e.script_invalid_attribute_value(attribute, attribute.name);
+			}
+
+			context = 'module';
+		}
+
+		if (attribute.name === 'context') {
+			if (attribute.value === true || !is_text_attribute(attribute)) {
+				throw new Error('TODO');
+			}
+
+			if (attribute.value.length !== 1 || attribute.value[0].type !== 'Text') {
+				e.script_invalid_context(attribute);
+			}
+
+			const value = attribute.value[0].data;
+
+			if (value !== 'module') {
+				e.script_invalid_context(attribute);
+			}
+
+			w.script_context_deprecated(attribute);
+
+			context = 'module';
+		}
+	}
+
 	return {
 		type: 'Script',
 		start,
 		end: parser.index,
-		context: get_context(attributes),
+		context,
 		content: ast,
 		parent: null,
 		// @ts-ignore
-		attributes: attributes
+		attributes
 	};
 }
diff --git a/packages/svelte/src/compiler/phases/2-analyze/index.js b/packages/svelte/src/compiler/phases/2-analyze/index.js
index 1bd1903d44..d442cee77d 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/index.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/index.js
@@ -330,7 +330,7 @@ export function analyze_component(root, source, options) {
 
 			if (module.ast) {
 				for (const { node, path } of references) {
-					// if the reference is inside context="module", error. this is a bit hacky but it works
+					// if the reference is inside module, error. this is a bit hacky but it works
 					if (
 						/** @type {number} */ (node.start) > /** @type {number} */ (module.ast.start) &&
 						/** @type {number} */ (node.end) < /** @type {number} */ (module.ast.end) &&
diff --git a/packages/svelte/src/compiler/types/template.d.ts b/packages/svelte/src/compiler/types/template.d.ts
index c803dfbba9..a4480ce2f1 100644
--- a/packages/svelte/src/compiler/types/template.d.ts
+++ b/packages/svelte/src/compiler/types/template.d.ts
@@ -61,7 +61,7 @@ export interface Root extends BaseNode {
 	css: Css.StyleSheet | null;
 	/** The parsed `<script>` element, if exists */
 	instance: Script | null;
-	/** The parsed `<script context="module">` element, if exists */
+	/** The parsed `<script module>` element, if exists */
 	module: Script | null;
 	metadata: {
 		/** Whether the component was parsed with typescript */
@@ -488,7 +488,7 @@ export type SvelteNode = Node | TemplateNode | Fragment | Css.Node;
 
 export interface Script extends BaseNode {
 	type: 'Script';
-	context: string;
+	context: 'default' | 'module';
 	content: Program;
 	attributes: Attribute[];
 }
diff --git a/packages/svelte/src/compiler/warnings.js b/packages/svelte/src/compiler/warnings.js
index 90702409b3..797c20667c 100644
--- a/packages/svelte/src/compiler/warnings.js
+++ b/packages/svelte/src/compiler/warnings.js
@@ -117,6 +117,8 @@ export const codes = [
 	"element_invalid_self_closing_tag",
 	"event_directive_deprecated",
 	"node_invalid_placement_ssr",
+	"script_context_deprecated",
+	"script_unknown_attribute",
 	"slot_element_deprecated",
 	"svelte_component_deprecated",
 	"svelte_element_invalid_this"
@@ -769,6 +771,22 @@ export function node_invalid_placement_ssr(node, thing, parent) {
 	w(node, "node_invalid_placement_ssr", `${thing} is invalid inside \`<${parent}>\`. When rendering this component on the server, the resulting HTML will be modified by the browser, likely resulting in a \`hydration_mismatch\` warning`);
 }
 
+/**
+ * `context="module"` is deprecated, use the `module` attribute instead
+ * @param {null | NodeLike} node
+ */
+export function script_context_deprecated(node) {
+	w(node, "script_context_deprecated", "`context=\"module\"` is deprecated, use the `module` attribute instead");
+}
+
+/**
+ * Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it
+ * @param {null | NodeLike} node
+ */
+export function script_unknown_attribute(node) {
+	w(node, "script_unknown_attribute", "Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it");
+}
+
 /**
  * Using `<slot>` to render parent content is deprecated. Use `{@render ...}` tags instead
  * @param {null | NodeLike} node
diff --git a/packages/svelte/tests/compiler-errors/samples/export-state-module/_config.js b/packages/svelte/tests/compiler-errors/samples/export-state-module/_config.js
index 088991864a..fcfbe81428 100644
--- a/packages/svelte/tests/compiler-errors/samples/export-state-module/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/export-state-module/_config.js
@@ -5,6 +5,6 @@ export default test({
 		code: 'state_invalid_export',
 		message:
 			"Cannot export state from a module if it is reassigned. Either export a function returning the state value or only mutate the state value's properties",
-		position: [76, 114]
+		position: [66, 104]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/export-state-module/main.svelte b/packages/svelte/tests/compiler-errors/samples/export-state-module/main.svelte
index 00a05eae8a..0b0e6351b9 100644
--- a/packages/svelte/tests/compiler-errors/samples/export-state-module/main.svelte
+++ b/packages/svelte/tests/compiler-errors/samples/export-state-module/main.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	export const object = $state({
 		ok: true
 	});
diff --git a/packages/svelte/tests/compiler-errors/samples/runes-export-let/main.svelte b/packages/svelte/tests/compiler-errors/samples/runes-export-let/main.svelte
index f58bb8674f..55de24b03d 100644
--- a/packages/svelte/tests/compiler-errors/samples/runes-export-let/main.svelte
+++ b/packages/svelte/tests/compiler-errors/samples/runes-export-let/main.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
     export let bar = ''; // check that it doesn't error here already
 </script>
 
diff --git a/packages/svelte/tests/compiler-errors/samples/store-autosub-context-module/_config.js b/packages/svelte/tests/compiler-errors/samples/store-autosub-context-module/_config.js
index a48923bd4a..e8ec74c5f0 100644
--- a/packages/svelte/tests/compiler-errors/samples/store-autosub-context-module/_config.js
+++ b/packages/svelte/tests/compiler-errors/samples/store-autosub-context-module/_config.js
@@ -3,7 +3,7 @@ import { test } from '../../test';
 export default test({
 	error: {
 		code: 'store_invalid_subscription',
-		message: 'Cannot reference store value inside `<script context="module">`',
-		position: [164, 168]
+		message: 'Cannot reference store value inside `<script module>`',
+		position: [154, 158]
 	}
 });
diff --git a/packages/svelte/tests/compiler-errors/samples/store-autosub-context-module/main.svelte b/packages/svelte/tests/compiler-errors/samples/store-autosub-context-module/main.svelte
index dcc462d878..9d47176e72 100644
--- a/packages/svelte/tests/compiler-errors/samples/store-autosub-context-module/main.svelte
+++ b/packages/svelte/tests/compiler-errors/samples/store-autosub-context-module/main.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	// this should be fine (state rune is not treated as a store)
 	const state = $state(0);
 	// this is not
diff --git a/packages/svelte/tests/migrate/samples/script-context-module/input.svelte b/packages/svelte/tests/migrate/samples/script-context-module/input.svelte
new file mode 100644
index 0000000000..4db4ff59ee
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/script-context-module/input.svelte
@@ -0,0 +1,3 @@
+<script context="module">
+	let foo = true;
+</script>
diff --git a/packages/svelte/tests/migrate/samples/script-context-module/output.svelte b/packages/svelte/tests/migrate/samples/script-context-module/output.svelte
new file mode 100644
index 0000000000..e508049d5d
--- /dev/null
+++ b/packages/svelte/tests/migrate/samples/script-context-module/output.svelte
@@ -0,0 +1,3 @@
+<script module>
+	let foo = true;
+</script>
diff --git a/packages/svelte/tests/parser-modern/samples/options/input.svelte b/packages/svelte/tests/parser-modern/samples/options/input.svelte
index 9e8253c50c..b7ee13b5e5 100644
--- a/packages/svelte/tests/parser-modern/samples/options/input.svelte
+++ b/packages/svelte/tests/parser-modern/samples/options/input.svelte
@@ -1,6 +1,6 @@
 <svelte:options customElement="my-custom-element" runes={true} />
 
-<script context="module" lang="ts">
+<script module lang="ts">
 </script>
 
 <script lang="ts" generics="T extends { foo: number }">
diff --git a/packages/svelte/tests/parser-modern/samples/options/output.json b/packages/svelte/tests/parser-modern/samples/options/output.json
index 27a5cfce15..6feee2d4f5 100644
--- a/packages/svelte/tests/parser-modern/samples/options/output.json
+++ b/packages/svelte/tests/parser-modern/samples/options/output.json
@@ -2,7 +2,7 @@
 	"css": null,
 	"js": [],
 	"start": 0,
-	"end": 112,
+	"end": 102,
 	"type": "Root",
 	"fragment": {
 		"type": "Fragment",
@@ -16,8 +16,8 @@
 			},
 			{
 				"type": "Text",
-				"start": 112,
-				"end": 114,
+				"start": 102,
+				"end": 104,
 				"raw": "\n\n",
 				"data": "\n\n"
 			}
@@ -79,12 +79,12 @@
 	"module": {
 		"type": "Script",
 		"start": 67,
-		"end": 112,
+		"end": 102,
 		"context": "module",
 		"content": {
 			"type": "Program",
-			"start": 102,
-			"end": 103,
+			"start": 92,
+			"end": 93,
 			"loc": {
 				"start": {
 					"line": 1,
@@ -102,27 +102,19 @@
 			{
 				"type": "Attribute",
 				"start": 75,
-				"end": 91,
-				"name": "context",
-				"value": [
-					{
-						"start": 84,
-						"end": 90,
-						"type": "Text",
-						"raw": "module",
-						"data": "module"
-					}
-				]
+				"end": 81,
+				"name": "module",
+				"value": true
 			},
 			{
 				"type": "Attribute",
-				"start": 92,
-				"end": 101,
+				"start": 82,
+				"end": 91,
 				"name": "lang",
 				"value": [
 					{
-						"start": 98,
-						"end": 100,
+						"start": 88,
+						"end": 90,
 						"type": "Text",
 						"raw": "ts",
 						"data": "ts"
@@ -133,13 +125,13 @@
 	},
 	"instance": {
 		"type": "Script",
-		"start": 114,
-		"end": 179,
+		"start": 104,
+		"end": 169,
 		"context": "default",
 		"content": {
 			"type": "Program",
-			"start": 169,
-			"end": 170,
+			"start": 159,
+			"end": 160,
 			"loc": {
 				"start": {
 					"line": 1,
@@ -156,13 +148,13 @@
 		"attributes": [
 			{
 				"type": "Attribute",
-				"start": 122,
-				"end": 131,
+				"start": 112,
+				"end": 121,
 				"name": "lang",
 				"value": [
 					{
-						"start": 128,
-						"end": 130,
+						"start": 118,
+						"end": 120,
 						"type": "Text",
 						"raw": "ts",
 						"data": "ts"
@@ -171,13 +163,13 @@
 			},
 			{
 				"type": "Attribute",
-				"start": 132,
-				"end": 168,
+				"start": 122,
+				"end": 158,
 				"name": "generics",
 				"value": [
 					{
-						"start": 142,
-						"end": 167,
+						"start": 132,
+						"end": 157,
 						"type": "Text",
 						"raw": "T extends { foo: number }",
 						"data": "T extends { foo: number }"
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-namespace/Widget.svelte b/packages/svelte/tests/runtime-legacy/samples/component-namespace/Widget.svelte
index b6aa45c6a8..d0003f9f32 100644
--- a/packages/svelte/tests/runtime-legacy/samples/component-namespace/Widget.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/component-namespace/Widget.svelte
@@ -1,5 +1,5 @@
-<script context="module">
-  import Tooltip from './Tooltip.svelte';
+<script module>
+	import Tooltip from './Tooltip.svelte';
 
-  export const Widget = { Tooltip };
-</script>
\ No newline at end of file
+	export const Widget = { Tooltip };
+</script>
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-namespaced/components.svelte b/packages/svelte/tests/runtime-legacy/samples/component-namespaced/components.svelte
index 5b9a6c5167..3672036a53 100644
--- a/packages/svelte/tests/runtime-legacy/samples/component-namespaced/components.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/component-namespaced/components.svelte
@@ -1,5 +1,5 @@
-<script context="module">
-  import Foo from './Foo.svelte';
+<script module>
+	import Foo from './Foo.svelte';
 
-  export const Components = { Foo };
-</script>
\ No newline at end of file
+	export const Components = { Foo };
+</script>
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-slot-fallback-2/store.svelte b/packages/svelte/tests/runtime-legacy/samples/component-slot-fallback-2/store.svelte
index e377aaf314..ef5dc7e91a 100644
--- a/packages/svelte/tests/runtime-legacy/samples/component-slot-fallback-2/store.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/component-slot-fallback-2/store.svelte
@@ -1,23 +1,23 @@
-<script context="module">
-  let value = 'Blub';
-  let count = 0;
-  const subscribers = new Set();
-  export const model = {
-    subscribe(fn) {
-      subscribers.add(fn);
-      count ++;
-      fn(value);
-      return () => {
-        count--;
-        subscribers.delete(fn);
-      };
-    },
-    set(v) {
-      value = v;
-      subscribers.forEach(fn => fn(v));
-    },
-    getCount() {
-      return count;
-    }
-  };
-</script>
\ No newline at end of file
+<script module>
+	let value = 'Blub';
+	let count = 0;
+	const subscribers = new Set();
+	export const model = {
+		subscribe(fn) {
+			subscribers.add(fn);
+			count++;
+			fn(value);
+			return () => {
+				count--;
+				subscribers.delete(fn);
+			};
+		},
+		set(v) {
+			value = v;
+			subscribers.forEach((fn) => fn(v));
+		},
+		getCount() {
+			return count;
+		}
+	};
+</script>
diff --git a/packages/svelte/tests/runtime-legacy/samples/context-api/Tabs.svelte b/packages/svelte/tests/runtime-legacy/samples/context-api/Tabs.svelte
index 6692bb31e9..79cc4e11b1 100644
--- a/packages/svelte/tests/runtime-legacy/samples/context-api/Tabs.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/context-api/Tabs.svelte
@@ -1,6 +1,6 @@
 
 
-<script context="module">
+<script module>
 	export const TABS = {};
 </script>
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/deconflict-component-name-with-module-global/main.svelte b/packages/svelte/tests/runtime-legacy/samples/deconflict-component-name-with-module-global/main.svelte
index a14f3e7a1e..9fac585775 100644
--- a/packages/svelte/tests/runtime-legacy/samples/deconflict-component-name-with-module-global/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/deconflict-component-name-with-module-global/main.svelte
@@ -1,5 +1,5 @@
-<script context="module">
+<script module>
 	let set = new Set(['x']);
 </script>
 
-<p>{set.has('x')}</p>
\ No newline at end of file
+<p>{set.has('x')}</p>
diff --git a/packages/svelte/tests/runtime-legacy/samples/module-context-export-referenced-in-template/Foo.svelte b/packages/svelte/tests/runtime-legacy/samples/module-context-export-referenced-in-template/Foo.svelte
index a0f3258fd6..4750e6253b 100644
--- a/packages/svelte/tests/runtime-legacy/samples/module-context-export-referenced-in-template/Foo.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/module-context-export-referenced-in-template/Foo.svelte
@@ -1,5 +1,7 @@
-<script context="module">
-	export function foo() { return 42; };
+<script module>
+	export function foo() {
+		return 42;
+	}
 </script>
 
 <button on:click={foo}>foo</button>
diff --git a/packages/svelte/tests/runtime-legacy/samples/module-context-export/Foo.svelte b/packages/svelte/tests/runtime-legacy/samples/module-context-export/Foo.svelte
index c992ceef52..86f110f481 100644
--- a/packages/svelte/tests/runtime-legacy/samples/module-context-export/Foo.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/module-context-export/Foo.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	export const foo = 42;
 </script>
 <script>
diff --git a/packages/svelte/tests/runtime-legacy/samples/module-context-with-instance-script/main.svelte b/packages/svelte/tests/runtime-legacy/samples/module-context-with-instance-script/main.svelte
index 8769beaf3e..1db102a448 100644
--- a/packages/svelte/tests/runtime-legacy/samples/module-context-with-instance-script/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/module-context-with-instance-script/main.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	const foo = 42;
 </script>
 
diff --git a/packages/svelte/tests/runtime-legacy/samples/module-context/main.svelte b/packages/svelte/tests/runtime-legacy/samples/module-context/main.svelte
index 851d98bea3..2e1ae663fb 100644
--- a/packages/svelte/tests/runtime-legacy/samples/module-context/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/module-context/main.svelte
@@ -1,5 +1,5 @@
-<script context="module">
+<script module>
 	const foo = 42;
 </script>
 
-<p>{foo}</p>
\ No newline at end of file
+<p>{foo}</p>
diff --git a/packages/svelte/tests/runtime-legacy/samples/preload/main.svelte b/packages/svelte/tests/runtime-legacy/samples/preload/main.svelte
index f7f2adff18..b285d423fc 100644
--- a/packages/svelte/tests/runtime-legacy/samples/preload/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/preload/main.svelte
@@ -1,7 +1,7 @@
-<script context="module">
+<script module>
 	export function preload({ foo }) {
 		return {
 			bar: foo * 2
 		};
 	}
-</script>
\ No newline at end of file
+</script>
diff --git a/packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/main.svelte b/packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/main.svelte
index beb2c406d1..18db8a7a31 100644
--- a/packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/reactive-import-statement-module/main.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	import state from './state.js';
 
 	function update() {
diff --git a/packages/svelte/tests/runtime-legacy/samples/reactive-statement-module-vars/main.svelte b/packages/svelte/tests/runtime-legacy/samples/reactive-statement-module-vars/main.svelte
index 6d9cd070ae..9bb31b0ea7 100644
--- a/packages/svelte/tests/runtime-legacy/samples/reactive-statement-module-vars/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/reactive-statement-module-vars/main.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	let moduleA = 'moduleA';
 	let moduleB = 'moduleB';
 </script>
diff --git a/packages/svelte/tests/runtime-legacy/samples/store-imported-module/main.svelte b/packages/svelte/tests/runtime-legacy/samples/store-imported-module/main.svelte
index 8710e3d1c6..35986d43d5 100644
--- a/packages/svelte/tests/runtime-legacy/samples/store-imported-module/main.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/store-imported-module/main.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	import foo from './foo.js';
 </script>
 
diff --git a/packages/svelte/tests/runtime-runes/samples/class-state-derived-unowned/main.svelte b/packages/svelte/tests/runtime-runes/samples/class-state-derived-unowned/main.svelte
index baa1b4aa86..898df1d66c 100644
--- a/packages/svelte/tests/runtime-runes/samples/class-state-derived-unowned/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/class-state-derived-unowned/main.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	class SomeLogic {
 		someValue = $state(0);
 		isAboveThree = $derived(this.someValue > 3);
diff --git a/packages/svelte/tests/runtime-runes/samples/custom-element-slot-in-snippet/Component.svelte b/packages/svelte/tests/runtime-runes/samples/custom-element-slot-in-snippet/Component.svelte
index 568baa0be9..b78e4c5d60 100644
--- a/packages/svelte/tests/runtime-runes/samples/custom-element-slot-in-snippet/Component.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/custom-element-slot-in-snippet/Component.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	if (!customElements.get('my-custom-element')) {
 		customElements.define('my-custom-element', class extends HTMLElement {
 			connectedCallback() {
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-unowned-2/Component.svelte b/packages/svelte/tests/runtime-runes/samples/derived-unowned-2/Component.svelte
index 8c64dca9a9..6d90688937 100644
--- a/packages/svelte/tests/runtime-runes/samples/derived-unowned-2/Component.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/derived-unowned-2/Component.svelte
@@ -1,12 +1,11 @@
-<script context="module">
+<script module>
 	class Store {
-		all = $state([1,2,3]);
-		d1 = $derived(this.all.filter(a => a > 2));
+		all = $state([1, 2, 3]);
+		d1 = $derived(this.all.filter((a) => a > 2));
 
-		update_value(){
-			this.all = [1,2,3,4,5];
+		update_value() {
+			this.all = [1, 2, 3, 4, 5];
 		}
 	}
 	export const s = new Store();
-
 </script>
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-unowned-5/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-unowned-5/main.svelte
index 3889869461..beecbacb69 100644
--- a/packages/svelte/tests/runtime-runes/samples/derived-unowned-5/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/derived-unowned-5/main.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   export class Thing {
     data = $state();
 
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-unowned-8/main.svelte b/packages/svelte/tests/runtime-runes/samples/derived-unowned-8/main.svelte
index 5644e87377..57730630fb 100644
--- a/packages/svelte/tests/runtime-runes/samples/derived-unowned-8/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/derived-unowned-8/main.svelte
@@ -1,13 +1,13 @@
-<script context="module">
+<script module>
 	let visible = $state(true);
 
 	function toggleVisibility() {
 		visible = !visible;
 	}
 
-	let unchangedState = $state("unchanged state");
+	let unchangedState = $state('unchanged state');
 	let derived = $derived.by(() => {
-		console.log("recalculating");
+		console.log('recalculating');
 		return unchangedState;
 	});
 </script>
diff --git a/packages/svelte/tests/runtime-runes/samples/derived-unowned/Component.svelte b/packages/svelte/tests/runtime-runes/samples/derived-unowned/Component.svelte
index 8946c01d50..1790f088c0 100644
--- a/packages/svelte/tests/runtime-runes/samples/derived-unowned/Component.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/derived-unowned/Component.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	class Foo {
 		x = $state(5);
 		y = $derived(this.x * 2);
@@ -17,7 +17,7 @@
 
 		get y() {
 			return y;
-		},
+		}
 	};
 </script>
 
diff --git a/packages/svelte/tests/runtime-runes/samples/effect-dependencies/main.svelte b/packages/svelte/tests/runtime-runes/samples/effect-dependencies/main.svelte
index 75f5a0cd6e..770666289c 100644
--- a/packages/svelte/tests/runtime-runes/samples/effect-dependencies/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/effect-dependencies/main.svelte
@@ -1,8 +1,8 @@
-<script context="module">
+<script module>
 	class Things {
 		tab = $state('A');
 
-		data = $state([{no: 1}, {no: 2}]);
+		data = $state([{ no: 1 }, { no: 2 }]);
 		list = $derived(this.filter());
 
 		filter() {
@@ -15,13 +15,13 @@
 </script>
 
 <div>
-		<button onclick={() => things.tab = 'A'} >A</button>
-		<button onclick={() => things.tab = 'B'} >B</button>
+	<button onclick={() => (things.tab = 'A')}>A</button>
+	<button onclick={() => (things.tab = 'B')}>B</button>
 </div>
 
 <div>
 	{#if things.tab === 'A'}
-			A
+		A
 	{:else}
 		B
 		{#each things.list as item}
diff --git a/packages/svelte/tests/runtime-runes/samples/element-is-attribute/main.svelte b/packages/svelte/tests/runtime-runes/samples/element-is-attribute/main.svelte
index 76aca5fa32..15d2d521e4 100644
--- a/packages/svelte/tests/runtime-runes/samples/element-is-attribute/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/element-is-attribute/main.svelte
@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
 	if (!customElements.get('x-button')) {
 		class XButton extends HTMLButtonElement {
 			connectedCallback() {
diff --git a/packages/svelte/tests/runtime-runes/samples/event-attribute-not-hoistable/main.svelte b/packages/svelte/tests/runtime-runes/samples/event-attribute-not-hoistable/main.svelte
index 6f31e8aa58..0cf1047cc7 100644
--- a/packages/svelte/tests/runtime-runes/samples/event-attribute-not-hoistable/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/event-attribute-not-hoistable/main.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	function declared_in_module_scope() {
 		return 'x';
 	}
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-derived-2/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-derived-2/main.svelte
index 49dec62f28..1071d37c39 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-derived-2/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/inspect-derived-2/main.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	const data = $state({
 		list: [],
 		derived: 0
diff --git a/packages/svelte/tests/runtime-runes/samples/module-context-export/main.svelte b/packages/svelte/tests/runtime-runes/samples/module-context-export/main.svelte
index e3109ef1f1..dfffc8f556 100644
--- a/packages/svelte/tests/runtime-runes/samples/module-context-export/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/module-context-export/main.svelte
@@ -1,6 +1,6 @@
 <svelte:options runes />
 
-<script context="module">
+<script module>
 	export const answer = 42;
 </script>
 
diff --git a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-global-2/child.svelte b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-global-2/child.svelte
index 5efb0d11ab..13de753647 100644
--- a/packages/svelte/tests/runtime-runes/samples/non-local-mutation-global-2/child.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/non-local-mutation-global-2/child.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	let toast1 = $state();
 	let toast2 = $state({});
 
@@ -8,7 +8,7 @@
 			show: true
 		};
 		toast1.show = false;
-		
+
 		toast2 = {
 			message: 'foo',
 			show: true
diff --git a/packages/svelte/tests/runtime-runes/samples/proxied-state-property-access/main.svelte b/packages/svelte/tests/runtime-runes/samples/proxied-state-property-access/main.svelte
index f17b9215b3..6b642184b2 100644
--- a/packages/svelte/tests/runtime-runes/samples/proxied-state-property-access/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/proxied-state-property-access/main.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	const context = $state({
 		settings: {
 			showInRgb: true
diff --git a/packages/svelte/tests/runtime-runes/samples/runes-in-module-context/main.svelte b/packages/svelte/tests/runtime-runes/samples/runes-in-module-context/main.svelte
index b5146071a2..ae54375c94 100644
--- a/packages/svelte/tests/runtime-runes/samples/runes-in-module-context/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/runes-in-module-context/main.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   function createCounter() {
     let count = $state(0);
     let double = $derived(count * 2);
diff --git a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
index 576ce708cf..549e0f91e5 100644
--- a/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
+++ b/packages/svelte/tests/runtime-runes/samples/typescript/main.svelte
@@ -1,4 +1,4 @@
-<script context="module" lang="ts">
+<script module lang="ts">
 	interface Hello {
 		message: 'hello';
 	}
diff --git a/packages/svelte/tests/sourcemaps/samples/two-scripts/input.svelte b/packages/svelte/tests/sourcemaps/samples/two-scripts/input.svelte
index 4c869827c0..9fee42ccac 100644
--- a/packages/svelte/tests/sourcemaps/samples/two-scripts/input.svelte
+++ b/packages/svelte/tests/sourcemaps/samples/two-scripts/input.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	export let first;
 </script>
 
diff --git a/packages/svelte/tests/validator/samples/illegal-variable-declaration/errors.json b/packages/svelte/tests/validator/samples/illegal-variable-declaration/errors.json
index e0002aaa74..850880e744 100644
--- a/packages/svelte/tests/validator/samples/illegal-variable-declaration/errors.json
+++ b/packages/svelte/tests/validator/samples/illegal-variable-declaration/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "declaration_duplicate_module_import",
-		"message": "Cannot declare same variable name which is imported inside `<script context=\"module\">`",
+		"message": "Cannot declare a variable with the same name as an import inside `<script module>`",
 		"start": {
 			"line": 12,
 			"column": 5
diff --git a/packages/svelte/tests/validator/samples/illegal-variable-declaration/input.svelte b/packages/svelte/tests/validator/samples/illegal-variable-declaration/input.svelte
index 0655ea322d..355abfb883 100644
--- a/packages/svelte/tests/validator/samples/illegal-variable-declaration/input.svelte
+++ b/packages/svelte/tests/validator/samples/illegal-variable-declaration/input.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	import { FOO } from './dummy.svelte';
 	function ok() {
 		let FOO;
diff --git a/packages/svelte/tests/validator/samples/inline-new-class-5/input.svelte b/packages/svelte/tests/validator/samples/inline-new-class-5/input.svelte
index 817bb29310..dd290da374 100644
--- a/packages/svelte/tests/validator/samples/inline-new-class-5/input.svelte
+++ b/packages/svelte/tests/validator/samples/inline-new-class-5/input.svelte
@@ -1,5 +1,5 @@
-<script context="module">
-	const a = new class Foo {
-		foo = $state(0)
-	}
+<script module>
+	const a = new (class Foo {
+		foo = $state(0);
+	})();
 </script>
diff --git a/packages/svelte/tests/validator/samples/module-script-reactive-declaration/input.svelte b/packages/svelte/tests/validator/samples/module-script-reactive-declaration/input.svelte
index 9df1cd54dd..2673ab2f9a 100644
--- a/packages/svelte/tests/validator/samples/module-script-reactive-declaration/input.svelte
+++ b/packages/svelte/tests/validator/samples/module-script-reactive-declaration/input.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	let num = 2;
 	let square;
 	$: square = num * num;
diff --git a/packages/svelte/tests/validator/samples/multiple-script-default-context/errors.json b/packages/svelte/tests/validator/samples/multiple-script-default-context/errors.json
index e1a4b15c0e..c9a32700a2 100644
--- a/packages/svelte/tests/validator/samples/multiple-script-default-context/errors.json
+++ b/packages/svelte/tests/validator/samples/multiple-script-default-context/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "script_duplicate",
-		"message": "A component can have a single top-level `<script>` element and/or a single top-level `<script context=\"module\">` element",
+		"message": "A component can have a single top-level `<script>` element and/or a single top-level `<script module>` element",
 		"start": {
 			"line": 5,
 			"column": 0
diff --git a/packages/svelte/tests/validator/samples/multiple-script-module-context/errors.json b/packages/svelte/tests/validator/samples/multiple-script-module-context/errors.json
index e1a4b15c0e..c9a32700a2 100644
--- a/packages/svelte/tests/validator/samples/multiple-script-module-context/errors.json
+++ b/packages/svelte/tests/validator/samples/multiple-script-module-context/errors.json
@@ -1,7 +1,7 @@
 [
 	{
 		"code": "script_duplicate",
-		"message": "A component can have a single top-level `<script>` element and/or a single top-level `<script context=\"module\">` element",
+		"message": "A component can have a single top-level `<script>` element and/or a single top-level `<script module>` element",
 		"start": {
 			"line": 5,
 			"column": 0
diff --git a/packages/svelte/tests/validator/samples/multiple-script-module-context/input.svelte b/packages/svelte/tests/validator/samples/multiple-script-module-context/input.svelte
index b43f3cb8c8..9aa2e1a7d0 100644
--- a/packages/svelte/tests/validator/samples/multiple-script-module-context/input.svelte
+++ b/packages/svelte/tests/validator/samples/multiple-script-module-context/input.svelte
@@ -1,7 +1,7 @@
-<script context="module">
+<script module>
 	let foo;
 </script>
 
-<script context="module">
+<script module>
 	let bar;
 </script>
\ No newline at end of file
diff --git a/packages/svelte/tests/validator/samples/reactive-module-const-variable/input.svelte b/packages/svelte/tests/validator/samples/reactive-module-const-variable/input.svelte
index c89cc1c1d0..82fb3aba9b 100644
--- a/packages/svelte/tests/validator/samples/reactive-module-const-variable/input.svelte
+++ b/packages/svelte/tests/validator/samples/reactive-module-const-variable/input.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	export const foo = 123;
 	export const doFoo = (foo) => foo;
 </script>
diff --git a/packages/svelte/tests/validator/samples/reactive-module-variable-2/input.svelte b/packages/svelte/tests/validator/samples/reactive-module-variable-2/input.svelte
index d36d9cf210..5209154b6f 100644
--- a/packages/svelte/tests/validator/samples/reactive-module-variable-2/input.svelte
+++ b/packages/svelte/tests/validator/samples/reactive-module-variable-2/input.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	let PI = 3.14;
 </script>
 <script>
diff --git a/packages/svelte/tests/validator/samples/reactive-module-variable/input.svelte b/packages/svelte/tests/validator/samples/reactive-module-variable/input.svelte
index ebf98c0e9e..0129c3058f 100644
--- a/packages/svelte/tests/validator/samples/reactive-module-variable/input.svelte
+++ b/packages/svelte/tests/validator/samples/reactive-module-variable/input.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	let foo = 0;
 
 	export function update() {
diff --git a/packages/svelte/tests/validator/samples/script-context-module-deprecated/input.svelte b/packages/svelte/tests/validator/samples/script-context-module-deprecated/input.svelte
new file mode 100644
index 0000000000..f32beead1c
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/script-context-module-deprecated/input.svelte
@@ -0,0 +1,3 @@
+<script context="module">
+	let num = 2;
+</script>
diff --git a/packages/svelte/tests/validator/samples/script-context-module-deprecated/warnings.json b/packages/svelte/tests/validator/samples/script-context-module-deprecated/warnings.json
new file mode 100644
index 0000000000..739e2b2295
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/script-context-module-deprecated/warnings.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "script_context_deprecated",
+		"message": "`context=\"module\"` is deprecated, use the `module` attribute instead",
+		"start": {
+			"column": 8,
+			"line": 1
+		},
+		"end": {
+			"column": 24,
+			"line": 1
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/script-invalid-context/errors.json b/packages/svelte/tests/validator/samples/script-invalid-context/errors.json
index 3698b92386..16072ef2cb 100644
--- a/packages/svelte/tests/validator/samples/script-invalid-context/errors.json
+++ b/packages/svelte/tests/validator/samples/script-invalid-context/errors.json
@@ -8,7 +8,7 @@
 		},
 		"end": {
 			"line": 1,
-			"column": 8
+			"column": 22
 		}
 	}
 ]
diff --git a/packages/svelte/tests/validator/samples/script-invalid-spread-attribute/input.svelte b/packages/svelte/tests/validator/samples/script-invalid-spread-attribute/input.svelte
new file mode 100644
index 0000000000..5a28597de7
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/script-invalid-spread-attribute/input.svelte
@@ -0,0 +1 @@
+<script {...wheee}></script>
diff --git a/packages/svelte/tests/validator/samples/script-invalid-spread-attribute/warnings.json b/packages/svelte/tests/validator/samples/script-invalid-spread-attribute/warnings.json
new file mode 100644
index 0000000000..c6748f711d
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/script-invalid-spread-attribute/warnings.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "script_unknown_attribute",
+		"message": "Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it",
+		"start": {
+			"column": 8,
+			"line": 1
+		},
+		"end": {
+			"column": 18,
+			"line": 1
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/script-unknown-attribute/input.svelte b/packages/svelte/tests/validator/samples/script-unknown-attribute/input.svelte
new file mode 100644
index 0000000000..2c991e62c1
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/script-unknown-attribute/input.svelte
@@ -0,0 +1 @@
+<script potato></script>
diff --git a/packages/svelte/tests/validator/samples/script-unknown-attribute/warnings.json b/packages/svelte/tests/validator/samples/script-unknown-attribute/warnings.json
new file mode 100644
index 0000000000..fdcad269a6
--- /dev/null
+++ b/packages/svelte/tests/validator/samples/script-unknown-attribute/warnings.json
@@ -0,0 +1,14 @@
+[
+	{
+		"code": "script_unknown_attribute",
+		"message": "Unrecognized attribute — should be one of `generics`, `lang` or `module`. If this exists for a preprocessor, ensure that the preprocessor removes it",
+		"start": {
+			"column": 8,
+			"line": 1
+		},
+		"end": {
+			"column": 14,
+			"line": 1
+		}
+	}
+]
diff --git a/packages/svelte/tests/validator/samples/silence-warnings-2/input.svelte b/packages/svelte/tests/validator/samples/silence-warnings-2/input.svelte
index 275165ffd7..251ea12051 100644
--- a/packages/svelte/tests/validator/samples/silence-warnings-2/input.svelte
+++ b/packages/svelte/tests/validator/samples/silence-warnings-2/input.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	let foo;
 </script>
 
diff --git a/packages/svelte/tests/validator/samples/silence-warnings/input.svelte b/packages/svelte/tests/validator/samples/silence-warnings/input.svelte
index 4520aed9c1..a8760fdd19 100644
--- a/packages/svelte/tests/validator/samples/silence-warnings/input.svelte
+++ b/packages/svelte/tests/validator/samples/silence-warnings/input.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	let foo;
 </script>
 
diff --git a/packages/svelte/tests/validator/samples/unreferenced-variables/input.svelte b/packages/svelte/tests/validator/samples/unreferenced-variables/input.svelte
index cebd861985..caac6d8bf9 100644
--- a/packages/svelte/tests/validator/samples/unreferenced-variables/input.svelte
+++ b/packages/svelte/tests/validator/samples/unreferenced-variables/input.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
   var a1 = 1;
   let b1 = 1;
   const c1 = 1;
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 6f9828375a..535250bc77 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -1519,7 +1519,7 @@ declare module 'svelte/compiler' {
 		css: Css.StyleSheet | null;
 		/** The parsed `<script>` element, if exists */
 		instance: Script | null;
-		/** The parsed `<script context="module">` element, if exists */
+		/** The parsed `<script module>` element, if exists */
 		module: Script | null;
 		metadata: {
 			/** Whether the component was parsed with typescript */
@@ -1946,7 +1946,7 @@ declare module 'svelte/compiler' {
 
 	interface Script extends BaseNode {
 		type: 'Script';
-		context: string;
+		context: 'default' | 'module';
 		content: Program;
 		attributes: Attribute[];
 	}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 33baf92b1d..31d2480b11 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,7 +16,7 @@ importers:
         version: 2.27.6
       '@sveltejs/eslint-config':
         specifier: ^8.0.1
-        version: 8.0.1(@stylistic/eslint-plugin-js@1.8.0(eslint@9.6.0))(eslint-config-prettier@9.1.0(eslint@9.6.0))(eslint-plugin-n@17.9.0(eslint@9.6.0))(eslint-plugin-svelte@2.38.0(eslint@9.6.0)(svelte@5.0.0-next.219))(eslint@9.6.0)(typescript-eslint@8.0.0-alpha.34(eslint@9.6.0)(typescript@5.5.2))(typescript@5.5.2)
+        version: 8.0.1(@stylistic/eslint-plugin-js@1.8.0(eslint@9.6.0))(eslint-config-prettier@9.1.0(eslint@9.6.0))(eslint-plugin-n@17.9.0(eslint@9.6.0))(eslint-plugin-svelte@2.38.0(eslint@9.6.0)(svelte@packages+svelte))(eslint@9.6.0)(typescript-eslint@8.0.0-alpha.34(eslint@9.6.0)(typescript@5.5.2))(typescript@5.5.2)
       '@svitejs/changesets-changelog-github-compact':
         specifier: ^1.1.0
         version: 1.1.0
@@ -43,7 +43,10 @@ importers:
         version: 3.2.4
       prettier-plugin-svelte:
         specifier: ^3.1.2
-        version: 3.1.2(prettier@3.2.4)(svelte@5.0.0-next.219)
+        version: 3.1.2(prettier@3.2.4)(svelte@packages+svelte)
+      svelte:
+        specifier: workspace:^
+        version: link:packages/svelte
       typescript:
         specifier: ^5.5.2
         version: 5.5.2
@@ -415,10 +418,6 @@ packages:
     resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
     engines: {node: '>=6.0.0'}
 
-  '@ampproject/remapping@2.3.0':
-    resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==}
-    engines: {node: '>=6.0.0'}
-
   '@antfu/utils@0.7.8':
     resolution: {integrity: sha512-rWQkqXRESdjXtc+7NRfK9lASQjpXJu1ayp7qi1d23zZorY+wBHVLHHoVcMsEnkqEBWTFqbztO7/QdJFzyEcLTg==}
 
@@ -1043,26 +1042,14 @@ packages:
     resolution: {integrity: sha512-HLhSWOLRi875zjjMG/r+Nv0oCW8umGb0BgEhyX3dDX3egwZtB8PqLnjz3yedt8R5StBrzcg4aBpnh8UA9D1BoQ==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/gen-mapping@0.3.5':
-    resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==}
-    engines: {node: '>=6.0.0'}
-
   '@jridgewell/resolve-uri@3.1.1':
     resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/resolve-uri@3.1.2':
-    resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==}
-    engines: {node: '>=6.0.0'}
-
   '@jridgewell/set-array@1.1.2':
     resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
     engines: {node: '>=6.0.0'}
 
-  '@jridgewell/set-array@1.2.1':
-    resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==}
-    engines: {node: '>=6.0.0'}
-
   '@jridgewell/source-map@0.3.5':
     resolution: {integrity: sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==}
 
@@ -1075,9 +1062,6 @@ packages:
   '@jridgewell/trace-mapping@0.3.22':
     resolution: {integrity: sha512-Wf963MzWtA2sjrNt+g18IAln9lKnlRp+K2eH4jjIoF1wYeq3aMREpG09xhlhdzS0EjwU7qmUJYangWa+151vZw==}
 
-  '@jridgewell/trace-mapping@0.3.25':
-    resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
-
   '@lezer/common@1.2.1':
     resolution: {integrity: sha512-yemX0ZD2xS/73llMZIK6KplkjIjf2EvAHcinDi/TfJ9hS25G0388+ClHt6/3but0oOxinTcQHJLDXh6w1crzFQ==}
 
@@ -1799,10 +1783,6 @@ packages:
   axobject-query@4.0.0:
     resolution: {integrity: sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==}
 
-  axobject-query@4.1.0:
-    resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
-    engines: {node: '>= 0.4'}
-
   balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
@@ -3677,10 +3657,6 @@ packages:
     resolution: {integrity: sha512-hsoB/WZGEPFXeRRLPhPrbRz67PhP6sqYgvwcAs+gWdSQSvNDw+/lTeUJSWe5h2xC97Fz/8QxAOqItwBzNJPU8w==}
     engines: {node: '>=16'}
 
-  svelte@5.0.0-next.219:
-    resolution: {integrity: sha512-f6qHmE2TNVmx9GzBR5tzQQaAVTq/Bll8rYhWRbkYjoCpA+WgkAK3I276SejLv6u/IeVQE7TX8s7ljyanvbtFBA==}
-    engines: {node: '>=18'}
-
   symbol-tree@3.2.4:
     resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
 
@@ -4072,11 +4048,6 @@ snapshots:
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.22
 
-  '@ampproject/remapping@2.3.0':
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
-      '@jridgewell/trace-mapping': 0.3.25
-
   '@antfu/utils@0.7.8': {}
 
   '@babel/helper-string-parser@7.23.4': {}
@@ -4835,20 +4806,10 @@ snapshots:
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.22
 
-  '@jridgewell/gen-mapping@0.3.5':
-    dependencies:
-      '@jridgewell/set-array': 1.2.1
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@jridgewell/trace-mapping': 0.3.25
-
   '@jridgewell/resolve-uri@3.1.1': {}
 
-  '@jridgewell/resolve-uri@3.1.2': {}
-
   '@jridgewell/set-array@1.1.2': {}
 
-  '@jridgewell/set-array@1.2.1': {}
-
   '@jridgewell/source-map@0.3.5':
     dependencies:
       '@jridgewell/gen-mapping': 0.3.3
@@ -4863,11 +4824,6 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
 
-  '@jridgewell/trace-mapping@0.3.25':
-    dependencies:
-      '@jridgewell/resolve-uri': 3.1.2
-      '@jridgewell/sourcemap-codec': 1.5.0
-
   '@lezer/common@1.2.1': {}
 
   '@lezer/css@1.1.7':
@@ -5241,13 +5197,13 @@ snapshots:
       - encoding
       - supports-color
 
-  '@sveltejs/eslint-config@8.0.1(@stylistic/eslint-plugin-js@1.8.0(eslint@9.6.0))(eslint-config-prettier@9.1.0(eslint@9.6.0))(eslint-plugin-n@17.9.0(eslint@9.6.0))(eslint-plugin-svelte@2.38.0(eslint@9.6.0)(svelte@5.0.0-next.219))(eslint@9.6.0)(typescript-eslint@8.0.0-alpha.34(eslint@9.6.0)(typescript@5.5.2))(typescript@5.5.2)':
+  '@sveltejs/eslint-config@8.0.1(@stylistic/eslint-plugin-js@1.8.0(eslint@9.6.0))(eslint-config-prettier@9.1.0(eslint@9.6.0))(eslint-plugin-n@17.9.0(eslint@9.6.0))(eslint-plugin-svelte@2.38.0(eslint@9.6.0)(svelte@packages+svelte))(eslint@9.6.0)(typescript-eslint@8.0.0-alpha.34(eslint@9.6.0)(typescript@5.5.2))(typescript@5.5.2)':
     dependencies:
       '@stylistic/eslint-plugin-js': 1.8.0(eslint@9.6.0)
       eslint: 9.6.0
       eslint-config-prettier: 9.1.0(eslint@9.6.0)
       eslint-plugin-n: 17.9.0(eslint@9.6.0)
-      eslint-plugin-svelte: 2.38.0(eslint@9.6.0)(svelte@5.0.0-next.219)
+      eslint-plugin-svelte: 2.38.0(eslint@9.6.0)(svelte@packages+svelte)
       globals: 15.6.0
       typescript: 5.5.2
       typescript-eslint: 8.0.0-alpha.34(eslint@9.6.0)(typescript@5.5.2)
@@ -5633,10 +5589,6 @@ snapshots:
     dependencies:
       acorn: 8.11.3
 
-  acorn-typescript@1.4.13(acorn@8.12.1):
-    dependencies:
-      acorn: 8.12.1
-
   acorn-walk@8.3.2: {}
 
   acorn@8.11.3: {}
@@ -5710,8 +5662,6 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
-  axobject-query@4.1.0: {}
-
   balanced-match@1.0.2: {}
 
   base64-js@0.0.8: {}
@@ -6091,7 +6041,7 @@ snapshots:
       minimatch: 9.0.5
       semver: 7.6.3
 
-  eslint-plugin-svelte@2.38.0(eslint@9.6.0)(svelte@5.0.0-next.219):
+  eslint-plugin-svelte@2.38.0(eslint@9.6.0)(svelte@packages+svelte):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.0(eslint@9.6.0)
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -6105,9 +6055,9 @@ snapshots:
       postcss-safe-parser: 6.0.0(postcss@8.4.41)
       postcss-selector-parser: 6.1.2
       semver: 7.6.3
-      svelte-eslint-parser: 0.41.0(svelte@5.0.0-next.219)
+      svelte-eslint-parser: 0.41.0(svelte@packages+svelte)
     optionalDependencies:
-      svelte: 5.0.0-next.219
+      svelte: link:packages/svelte
     transitivePeerDependencies:
       - supports-color
       - ts-node
@@ -7141,10 +7091,10 @@ snapshots:
       prettier: 3.2.4
       svelte: 4.2.9
 
-  prettier-plugin-svelte@3.1.2(prettier@3.2.4)(svelte@5.0.0-next.219):
+  prettier-plugin-svelte@3.1.2(prettier@3.2.4)(svelte@packages+svelte):
     dependencies:
       prettier: 3.2.4
-      svelte: 5.0.0-next.219
+      svelte: link:packages/svelte
 
   prettier@2.8.8: {}
 
@@ -7547,7 +7497,7 @@ snapshots:
       - stylus
       - sugarss
 
-  svelte-eslint-parser@0.41.0(svelte@5.0.0-next.219):
+  svelte-eslint-parser@0.41.0(svelte@packages+svelte):
     dependencies:
       eslint-scope: 7.2.2
       eslint-visitor-keys: 3.4.3
@@ -7555,7 +7505,7 @@ snapshots:
       postcss: 8.4.41
       postcss-scss: 4.0.9(postcss@8.4.41)
     optionalDependencies:
-      svelte: 5.0.0-next.219
+      svelte: link:packages/svelte
 
   svelte-hmr@0.16.0(svelte@4.2.9):
     dependencies:
@@ -7626,22 +7576,6 @@ snapshots:
       magic-string: 0.30.5
       periscopic: 3.1.0
 
-  svelte@5.0.0-next.219:
-    dependencies:
-      '@ampproject/remapping': 2.3.0
-      '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.5
-      acorn: 8.12.1
-      acorn-typescript: 1.4.13(acorn@8.12.1)
-      aria-query: 5.3.0
-      axobject-query: 4.1.0
-      esm-env: 1.0.0
-      esrap: 1.2.2
-      is-reference: 3.0.2
-      locate-character: 3.0.0
-      magic-string: 0.30.11
-      zimmerframe: 1.1.2
-
   symbol-tree@3.2.4: {}
 
   tapable@2.2.1: {}
diff --git a/sites/svelte-5-preview/src/lib/CodeMirror.svelte b/sites/svelte-5-preview/src/lib/CodeMirror.svelte
index 38b89a9aa9..19c3fcc97f 100644
--- a/sites/svelte-5-preview/src/lib/CodeMirror.svelte
+++ b/sites/svelte-5-preview/src/lib/CodeMirror.svelte
@@ -1,4 +1,4 @@
-<script context="module">
+<script module>
 	export const cursorIndex = writable(0);
 </script>
 
diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md
index e4fdcc86b3..0c45bdaab2 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/03-deprecations.md
@@ -117,3 +117,14 @@ A derived value may be used in other contexts:
 ## `immutable`
 
 The `immutable` compiler option is deprecated. Use runes mode instead, where all state is immutable (which means that assigning to `object.property` won't cause updates for anything that is observing `object` itself, or a different property of it).
+
+## `context="module"`
+
+`context="module"` is deprecated, use the new `module` attribute instead:
+
+```diff
+- <script context="module">
++ <script module>
+	...
+</script>
+```

From af7f90020d12f08541b4010135d6dcddb4e30f0f Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 21 Aug 2024 15:25:45 -0400
Subject: [PATCH 178/196] fix: ensure `$store` reads are properly transformed
 (#12952)

The backing store variable of a $store read could be a variable that itself needs a transformer, which is why we need to make accessing the reads lazy

fixes #12859
---
 .changeset/nervous-adults-sell.md                    |  5 +++++
 .../phases/3-transform/client/visitors/Program.js    | 12 +++++++++---
 .../samples/store-from-derived/_config.js            | 11 +++++++++++
 .../samples/store-from-derived/main.svelte           |  7 +++++++
 4 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/nervous-adults-sell.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/store-from-derived/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/store-from-derived/main.svelte

diff --git a/.changeset/nervous-adults-sell.md b/.changeset/nervous-adults-sell.md
new file mode 100644
index 0000000000..a7bad9bda8
--- /dev/null
+++ b/.changeset/nervous-adults-sell.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure `$store` reads are properly transformed
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
index dc30255a1a..f3f3808594 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
@@ -42,11 +42,17 @@ export function Program(_, context) {
 
 	for (const [name, binding] of context.state.scope.declarations) {
 		if (binding.kind === 'store_sub') {
-			const store = /** @type {Expression} */ (context.visit(b.id(name.slice(1))));
+			// read lazily, so that transforms added later are still applied
+			/** @type {Expression} */
+			let cached;
+
+			const get_store = () => {
+				return (cached ??= /** @type {Expression} */ (context.visit(b.id(name.slice(1)))));
+			};
 
 			context.state.transform[name] = {
 				read: b.call,
-				assign: (_, value) => b.call('$.store_set', store, value),
+				assign: (_, value) => b.call('$.store_set', get_store(), value),
 				mutate: (node, mutation) => {
 					// We need to untrack the store read, for consistency with Svelte 4
 					const untracked = b.call('$.untrack', node);
@@ -70,7 +76,7 @@ export function Program(_, context) {
 
 					return b.call(
 						'$.store_mutate',
-						store,
+						get_store(),
 						b.assignment(
 							mutation.operator,
 							/** @type {MemberExpression} */ (
diff --git a/packages/svelte/tests/runtime-runes/samples/store-from-derived/_config.js b/packages/svelte/tests/runtime-runes/samples/store-from-derived/_config.js
new file mode 100644
index 0000000000..8cb3fd9cae
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-from-derived/_config.js
@@ -0,0 +1,11 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: `<button>false</button>`,
+	test({ assert, target }) {
+		target.querySelector('button')?.click();
+		flushSync();
+		assert.htmlEqual(target.innerHTML, `<button>true</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/store-from-derived/main.svelte b/packages/svelte/tests/runtime-runes/samples/store-from-derived/main.svelte
new file mode 100644
index 0000000000..728544e664
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/store-from-derived/main.svelte
@@ -0,0 +1,7 @@
+<script>
+	import { writable } from 'svelte/store';
+	let data = { store: writable(false) };
+	let { store } = $derived(data);
+</script>
+
+<button onclick={() => ($store = true)}>{$store}</button>

From 9f962d6f818761b1f8fed171096252d0c8d7d2e7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 21 Aug 2024 15:28:58 -0400
Subject: [PATCH 179/196] breaking: remove `$state.link` (#12943)

* Revert "breaking: remove `$state.link` callback (#12942)"

This reverts commit 0b51ff04b045d2fa53c0b5a365f3d3a2c0541aa5.

* Revert "feat: adds $state.link rune (#12545)"

This reverts commit 63ec2e2e882b639b573bdc0e8bf1afde78043dfe.

* put changesets back

* changeset

* merge main
---
 .changeset/green-walls-clap.md                |  5 ++
 documentation/docs/03-runes/01-state.md       | 27 -----------
 packages/svelte/src/ambient.d.ts              | 26 -----------
 .../2-analyze/visitors/BindDirective.js       |  1 -
 .../2-analyze/visitors/CallExpression.js      |  5 +-
 .../2-analyze/visitors/ExportSpecifier.js     |  5 +-
 .../phases/2-analyze/visitors/Identifier.js   |  2 +-
 .../2-analyze/visitors/VariableDeclarator.js  | 17 +++----
 .../phases/3-transform/client/types.d.ts      |  2 +-
 .../3-transform/client/visitors/ClassBody.js  | 46 ++++---------------
 .../3-transform/client/visitors/Program.js    |  2 +-
 .../client/visitors/VariableDeclaration.js    | 14 ++----
 .../client/visitors/shared/declarations.js    |  7 ---
 .../server/visitors/PropertyDefinition.js     |  7 +--
 packages/svelte/src/compiler/types/index.d.ts |  1 -
 packages/svelte/src/internal/client/index.js  |  2 +-
 .../src/internal/client/reactivity/sources.js | 34 --------------
 packages/svelte/src/utils.js                  |  1 -
 .../samples/state-link-class/_config.js       | 19 --------
 .../samples/state-link-class/main.svelte      | 11 -----
 .../samples/state-link-object/_config.js      | 24 ----------
 .../samples/state-link-object/main.svelte     |  9 ----
 .../samples/state-link/_config.js             | 19 --------
 .../samples/state-link/main.svelte            |  7 ---
 packages/svelte/types/index.d.ts              | 27 -----------
 .../svelte-5-preview/src/lib/autocomplete.js  |  1 -
 .../routes/docs/content/01-api/02-runes.md    | 27 -----------
 27 files changed, 33 insertions(+), 315 deletions(-)
 create mode 100644 .changeset/green-walls-clap.md
 delete mode 100644 packages/svelte/tests/runtime-runes/samples/state-link-class/_config.js
 delete mode 100644 packages/svelte/tests/runtime-runes/samples/state-link-class/main.svelte
 delete mode 100644 packages/svelte/tests/runtime-runes/samples/state-link-object/_config.js
 delete mode 100644 packages/svelte/tests/runtime-runes/samples/state-link-object/main.svelte
 delete mode 100644 packages/svelte/tests/runtime-runes/samples/state-link/_config.js
 delete mode 100644 packages/svelte/tests/runtime-runes/samples/state-link/main.svelte

diff --git a/.changeset/green-walls-clap.md b/.changeset/green-walls-clap.md
new file mode 100644
index 0000000000..164083db7a
--- /dev/null
+++ b/.changeset/green-walls-clap.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+breaking: remove `$state.link` rune pending further design work
diff --git a/documentation/docs/03-runes/01-state.md b/documentation/docs/03-runes/01-state.md
index 8d78e6c73e..7bcff2c968 100644
--- a/documentation/docs/03-runes/01-state.md
+++ b/documentation/docs/03-runes/01-state.md
@@ -62,33 +62,6 @@ Objects and arrays are made deeply reactive by wrapping them with [`Proxies`](ht
 
 > Only POJOs (plain old JavaScript objects) are made deeply reactive. Reactivity will stop at class boundaries and leave those alone
 
-## `$state.link`
-
-Linked state stays up to date with its input:
-
-```js
-let a = $state(0);
-let b = $state.link(a);
-
-a = 1;
-console.log(a, b); // 1, 1
-```
-
-You can temporarily _unlink_ state. It will be _relinked_ when the input value changes:
-
-```js
-let a = 1;
-let b = 1;
-// ---cut---
-b = 2; // unlink
-console.log(a, b); // 1, 2
-
-a = 3; // relink
-console.log(a, b); // 3, 3
-```
-
-As with `$state`, if `$state.link` is passed a plain object or array it will be made deeply reactive. If passed an existing state proxy it will be reused, meaning that mutating the linked state will mutate the original. To clone a state proxy, you can use [`$state.snapshot`](#$state-snapshot).
-
 ## `$state.raw`
 
 State declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:
diff --git a/packages/svelte/src/ambient.d.ts b/packages/svelte/src/ambient.d.ts
index a84085fd5a..6af8ca5156 100644
--- a/packages/svelte/src/ambient.d.ts
+++ b/packages/svelte/src/ambient.d.ts
@@ -124,32 +124,6 @@ declare namespace $state {
 	 *
 	 * @param initial The initial value
 	 */
-
-	/**
-	 * Declares reactive state that is linked to another value. Local reassignments
-	 * will override the linked value until the linked value changes.
-	 *
-	 * Example:
-	 * ```ts
-	 * let a = $state(0);
-	 * let b = $state.link(a);
-
-	 * a = 1;
-	 * console.log(a, b); // 1, 1
-
-	 * b = 2; // unlink
-	 * console.log(a, b); // 1, 2
-	 *
-	 * a = 3; // relink
-	 * console.log(a, b); // 3, 3
-	 * ```
-	 *
-	 * https://svelte-5-preview.vercel.app/docs/runes#$state-link
-	 *
-	 * @param value The linked value
-	 */
-	export function link<T>(value: T): T;
-
 	export function raw<T>(initial: T): T;
 	export function raw<T>(): T | undefined;
 	/**
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
index eeeb4cea43..43d1a3d468 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/BindDirective.js
@@ -34,7 +34,6 @@ export function BindDirective(node, context) {
 			node.name !== 'this' && // bind:this also works for regular variables
 			(!binding ||
 				(binding.kind !== 'state' &&
-					binding.kind !== 'linked_state' &&
 					binding.kind !== 'raw_state' &&
 					binding.kind !== 'prop' &&
 					binding.kind !== 'bindable_prop' &&
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 bdcca2bff8..f9999f5252 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js
@@ -74,7 +74,6 @@ export function CallExpression(node, context) {
 
 		case '$state':
 		case '$state.raw':
-		case '$state.link':
 		case '$derived':
 		case '$derived.by':
 			if (
@@ -86,7 +85,7 @@ export function CallExpression(node, context) {
 
 			if ((rune === '$derived' || rune === '$derived.by') && node.arguments.length !== 1) {
 				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
-			} else if ((rune === '$state' || rune === '$state.link') && node.arguments.length > 1) {
+			} else if (rune === '$state' && node.arguments.length > 1) {
 				e.rune_invalid_arguments_length(node, rune, 'zero or one arguments');
 			}
 
@@ -170,7 +169,7 @@ export function CallExpression(node, context) {
 	}
 
 	// `$inspect(foo)` or `$derived(foo) should not trigger the `static-state-reference` warning
-	if (rune === '$inspect' || rune === '$derived' || rune === '$state.link') {
+	if (rune === '$inspect' || rune === '$derived') {
 		context.next({ ...context.state, function_depth: context.state.function_depth + 1 });
 	} else {
 		context.next();
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
index d2caf27ab9..27eb39acbf 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/ExportSpecifier.js
@@ -38,10 +38,7 @@ function validate_export(node, scope, name) {
 		e.derived_invalid_export(node);
 	}
 
-	if (
-		(binding.kind === 'state' || binding.kind === 'raw_state' || binding.kind === 'linked_state') &&
-		binding.reassigned
-	) {
+	if ((binding.kind === 'state' || binding.kind === 'raw_state') && binding.reassigned) {
 		e.state_invalid_export(node);
 	}
 }
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 002462fc44..79dccd5a7c 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/Identifier.js
@@ -99,7 +99,7 @@ export function Identifier(node, context) {
 			context.state.function_depth === binding.scope.function_depth &&
 			// If we have $state that can be proxied or frozen and isn't re-assigned, then that means
 			// it's likely not using a primitive value and thus this warning isn't that helpful.
-			(((binding.kind === 'state' || binding.kind === 'linked_state') &&
+			((binding.kind === 'state' &&
 				(binding.reassigned ||
 					(binding.initial?.type === 'CallExpression' &&
 						binding.initial.arguments.length === 1 &&
diff --git a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
index bb74e003d7..6d9b3e29b9 100644
--- a/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
+++ b/packages/svelte/src/compiler/phases/2-analyze/visitors/VariableDeclarator.js
@@ -21,7 +21,6 @@ export function VariableDeclarator(node, context) {
 		// TODO feels like this should happen during scope creation?
 		if (
 			rune === '$state' ||
-			rune === '$state.link' ||
 			rune === '$state.raw' ||
 			rune === '$derived' ||
 			rune === '$derived.by' ||
@@ -33,15 +32,13 @@ export function VariableDeclarator(node, context) {
 				binding.kind =
 					rune === '$state'
 						? 'state'
-						: rune === '$state.link'
-							? 'linked_state'
-							: rune === '$state.raw'
-								? 'raw_state'
-								: rune === '$derived' || rune === '$derived.by'
-									? 'derived'
-									: path.is_rest
-										? 'rest_prop'
-										: 'prop';
+						: rune === '$state.raw'
+							? 'raw_state'
+							: rune === '$derived' || rune === '$derived.by'
+								? 'derived'
+								: path.is_rest
+									? 'rest_prop'
+									: 'prop';
 			}
 		}
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
index 57ce1507c5..e44cc0239c 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
+++ b/packages/svelte/src/compiler/phases/3-transform/client/types.d.ts
@@ -88,7 +88,7 @@ export interface ComponentClientTransformState extends ClientTransformState {
 }
 
 export interface StateField {
-	kind: 'state' | 'raw_state' | 'linked_state' | 'derived' | 'derived_by';
+	kind: 'state' | 'raw_state' | 'derived' | 'derived_by';
 	id: PrivateIdentifier;
 }
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
index d121600c1b..5342e70aac 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js
@@ -44,7 +44,6 @@ export function ClassBody(node, context) {
 				const rune = get_rune(definition.value, context.state.scope);
 				if (
 					rune === '$state' ||
-					rune === '$state.link' ||
 					rune === '$state.raw' ||
 					rune === '$derived' ||
 					rune === '$derived.by'
@@ -56,11 +55,9 @@ export function ClassBody(node, context) {
 								? 'state'
 								: rune === '$state.raw'
 									? 'raw_state'
-									: rune === '$state.link'
-										? 'linked_state'
-										: rune === '$derived.by'
-											? 'derived_by'
-											: 'derived',
+									: rune === '$derived.by'
+										? 'derived_by'
+										: 'derived',
 						// @ts-expect-error this is set in the next pass
 						id: is_private ? definition.key : null
 					};
@@ -119,18 +116,11 @@ export function ClassBody(node, context) {
 									'$.source',
 									should_proxy(init, context.state.scope) ? b.call('$.proxy', init) : init
 								)
-							: field.kind === 'linked_state'
-								? b.call(
-										'$.source_link',
-										b.thunk(
-											should_proxy(init, context.state.scope) ? b.call('$.proxy', init) : init
-										)
-									)
-								: field.kind === 'raw_state'
-									? b.call('$.source', init)
-									: field.kind === 'derived_by'
-										? b.call('$.derived', init)
-										: b.call('$.derived', b.thunk(init));
+							: field.kind === 'raw_state'
+								? b.call('$.source', init)
+								: field.kind === 'derived_by'
+									? b.call('$.derived', init)
+									: b.call('$.derived', b.thunk(init));
 				} else {
 					// if no arguments, we know it's state as `$derived()` is a compile error
 					value = b.call('$.source');
@@ -143,24 +133,8 @@ export function ClassBody(node, context) {
 					const member = b.member(b.this, field.id);
 					body.push(b.prop_def(field.id, value));
 
-					if (field.kind === 'linked_state') {
-						// get foo() { return this.#foo; }
-						body.push(b.method('get', definition.key, [], [b.return(b.call(member))]));
-
-						// set foo(value) { this.#foo = value; }
-						const value = b.id('value');
-						body.push(
-							b.method(
-								'set',
-								definition.key,
-								[value],
-								[b.stmt(b.call(member, build_proxy_reassignment(value, field.id)))]
-							)
-						);
-					} else {
-						// get foo() { return this.#foo; }
-						body.push(b.method('get', definition.key, [], [b.return(b.call('$.get', member))]));
-					}
+					// get foo() { return this.#foo; }
+					body.push(b.method('get', definition.key, [], [b.return(b.call('$.get', member))]));
 
 					if (field.kind === 'state') {
 						// set foo(value) { this.#foo = value; }
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
index f3f3808594..c34a9b05c6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Program.js
@@ -102,7 +102,7 @@ export function Program(_, context) {
 			if (is_prop_source(binding, context.state)) {
 				context.state.transform[name] = {
 					read: b.call,
-					assign: b.call,
+					assign: (node, value) => b.call(node, value),
 					mutate: (node, value) => {
 						if (binding.kind === 'bindable_prop') {
 							// only necessary for interop with legacy parent bindings
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index 84713f73ca..77177e397f 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -113,7 +113,7 @@ export function VariableDeclaration(node, context) {
 			const value =
 				args.length === 0 ? b.id('undefined') : /** @type {Expression} */ (context.visit(args[0]));
 
-			if (rune === '$state' || rune === '$state.raw' || rune === '$state.link') {
+			if (rune === '$state' || rune === '$state.raw') {
 				/**
 				 * @param {Identifier} id
 				 * @param {Expression} value
@@ -122,20 +122,12 @@ export function VariableDeclaration(node, context) {
 					const binding = /** @type {import('#compiler').Binding} */ (
 						context.state.scope.get(id.name)
 					);
-
-					if (
-						(rune === '$state' || rune === '$state.link') &&
-						should_proxy(value, context.state.scope)
-					) {
+					if (rune === '$state' && should_proxy(value, context.state.scope)) {
 						value = b.call('$.proxy', value);
 					}
-
-					if (rune === '$state.link') {
-						value = b.call('$.source_link', b.thunk(value));
-					} else if (is_state_source(binding, context.state.analysis)) {
+					if (is_state_source(binding, context.state.analysis)) {
 						value = b.call('$.source', value);
 					}
-
 					return value;
 				};
 
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
index 5db639c190..33566f1c10 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
@@ -49,12 +49,5 @@ export function add_state_transformers(context) {
 				}
 			};
 		}
-
-		if (binding.kind === 'linked_state') {
-			context.state.transform[name] = {
-				read: b.call,
-				assign: b.call
-			};
-		}
 	}
 }
diff --git a/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js b/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
index 10fd6de7e2..04751a19d1 100644
--- a/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
+++ b/packages/svelte/src/compiler/phases/3-transform/server/visitors/PropertyDefinition.js
@@ -11,12 +11,7 @@ export function PropertyDefinition(node, context) {
 	if (context.state.analysis.runes && node.value != null && node.value.type === 'CallExpression') {
 		const rune = get_rune(node.value, context.state.scope);
 
-		if (
-			rune === '$state' ||
-			rune === '$state.link' ||
-			rune === '$state.raw' ||
-			rune === '$derived'
-		) {
+		if (rune === '$state' || rune === '$state.raw' || rune === '$derived') {
 			return {
 				...node,
 				value:
diff --git a/packages/svelte/src/compiler/types/index.d.ts b/packages/svelte/src/compiler/types/index.d.ts
index ac2b617777..587c9e373c 100644
--- a/packages/svelte/src/compiler/types/index.d.ts
+++ b/packages/svelte/src/compiler/types/index.d.ts
@@ -278,7 +278,6 @@ export interface Binding {
 		| 'bindable_prop'
 		| 'rest_prop'
 		| 'state'
-		| 'linked_state'
 		| 'raw_state'
 		| 'derived'
 		| 'each'
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index adb595b80d..1ca71708af 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -105,7 +105,7 @@ export {
 	user_effect,
 	user_pre_effect
 } from './reactivity/effects.js';
-export { mutable_source, mutate, source, source_link, set } from './reactivity/sources.js';
+export { mutable_source, mutate, source, set } from './reactivity/sources.js';
 export {
 	prop,
 	rest_props,
diff --git a/packages/svelte/src/internal/client/reactivity/sources.js b/packages/svelte/src/internal/client/reactivity/sources.js
index edfa8806e8..86427a7509 100644
--- a/packages/svelte/src/internal/client/reactivity/sources.js
+++ b/packages/svelte/src/internal/client/reactivity/sources.js
@@ -26,7 +26,6 @@ import {
 	MAYBE_DIRTY
 } from '../constants.js';
 import * as e from '../errors.js';
-import { derived } from './deriveds.js';
 
 let inspect_effects = new Set();
 
@@ -46,39 +45,6 @@ export function source(v) {
 	};
 }
 
-/**
- * @template V
- * @param {() => V} get_value
- * @returns {(value?: V) => V}
- */
-export function source_link(get_value) {
-	var was_local = false;
-	var local_source = source(/** @type {V} */ (undefined));
-
-	var linked_derived = derived(() => {
-		var local_value = /** @type {V} */ (get(local_source));
-		var linked_value = get_value();
-
-		if (was_local) {
-			was_local = false;
-			return local_value;
-		}
-
-		return linked_value;
-	});
-
-	return function (/** @type {any} */ value) {
-		if (arguments.length > 0) {
-			was_local = true;
-			set(local_source, value);
-			get(linked_derived);
-			return value;
-		}
-
-		return (local_source.v = get(linked_derived));
-	};
-}
-
 /**
  * @template V
  * @param {V} initial_value
diff --git a/packages/svelte/src/utils.js b/packages/svelte/src/utils.js
index 880fe9a2d4..289a9523de 100644
--- a/packages/svelte/src/utils.js
+++ b/packages/svelte/src/utils.js
@@ -393,7 +393,6 @@ export function is_mathml(name) {
 
 const RUNES = /** @type {const} */ ([
 	'$state',
-	'$state.link',
 	'$state.raw',
 	'$state.snapshot',
 	'$props',
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-class/_config.js b/packages/svelte/tests/runtime-runes/samples/state-link-class/_config.js
deleted file mode 100644
index 4628d4f5b4..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/state-link-class/_config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { flushSync } from 'svelte';
-import { test } from '../../test';
-
-export default test({
-	html: `<button>0</button><button>0</button>`,
-
-	test({ assert, target }) {
-		const [btn1, btn2] = target.querySelectorAll('button');
-
-		flushSync(() => btn1.click());
-		assert.htmlEqual(target.innerHTML, `<button>1</button><button>1</button>`);
-
-		flushSync(() => btn2.click());
-		assert.htmlEqual(target.innerHTML, `<button>1</button><button>2</button>`);
-
-		flushSync(() => btn1.click());
-		assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button>`);
-	}
-});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-class/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-link-class/main.svelte
deleted file mode 100644
index 30d8968f8c..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/state-link-class/main.svelte
+++ /dev/null
@@ -1,11 +0,0 @@
-<script>
-	class Instance {
-		a = $state(0);
-		b = $state.link(this.a);
-	}
-
-	const instance = new Instance();
-</script>
-
-<button onclick={() => instance.a++}>{instance.a}</button>
-<button onclick={() => instance.b++}>{instance.b}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-object/_config.js b/packages/svelte/tests/runtime-runes/samples/state-link-object/_config.js
deleted file mode 100644
index a0cf4b3c3f..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/state-link-object/_config.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { flushSync } from 'svelte';
-import { test } from '../../test';
-
-export default test({
-	html: `<button>0</button><button>0</button><button>0</button>`,
-
-	test({ assert, target }) {
-		const [btn1, btn2, btn3] = target.querySelectorAll('button');
-
-		flushSync(() => btn1.click());
-		assert.htmlEqual(target.innerHTML, `<button>1</button><button>1</button><button>1</button>`);
-
-		// mutate the original object, via the link
-		flushSync(() => btn2.click());
-		assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button><button>2</button>`);
-
-		// mutate the copy
-		flushSync(() => btn3.click());
-		assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button><button>3</button>`);
-
-		flushSync(() => btn1.click());
-		assert.htmlEqual(target.innerHTML, `<button>3</button><button>3</button><button>3</button>`);
-	}
-});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link-object/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-link-object/main.svelte
deleted file mode 100644
index ec7dec4507..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/state-link-object/main.svelte
+++ /dev/null
@@ -1,9 +0,0 @@
-<script>
-	let a = $state({ value: 0 });
-	let b = $state.link(a);
-	let c = $state.link({ ...a });
-</script>
-
-<button onclick={() => a.value++}>{a.value}</button>
-<button onclick={() => b.value++}>{b.value}</button>
-<button onclick={() => c.value++}>{c.value}</button>
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link/_config.js b/packages/svelte/tests/runtime-runes/samples/state-link/_config.js
deleted file mode 100644
index 4628d4f5b4..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/state-link/_config.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { flushSync } from 'svelte';
-import { test } from '../../test';
-
-export default test({
-	html: `<button>0</button><button>0</button>`,
-
-	test({ assert, target }) {
-		const [btn1, btn2] = target.querySelectorAll('button');
-
-		flushSync(() => btn1.click());
-		assert.htmlEqual(target.innerHTML, `<button>1</button><button>1</button>`);
-
-		flushSync(() => btn2.click());
-		assert.htmlEqual(target.innerHTML, `<button>1</button><button>2</button>`);
-
-		flushSync(() => btn1.click());
-		assert.htmlEqual(target.innerHTML, `<button>2</button><button>2</button>`);
-	}
-});
diff --git a/packages/svelte/tests/runtime-runes/samples/state-link/main.svelte b/packages/svelte/tests/runtime-runes/samples/state-link/main.svelte
deleted file mode 100644
index aaa8d4ecaf..0000000000
--- a/packages/svelte/tests/runtime-runes/samples/state-link/main.svelte
+++ /dev/null
@@ -1,7 +0,0 @@
-<script>
-	let a = $state(0);
-	let b = $state.link(a);
-</script>
-
-<button onclick={() => a++}>{a}</button>
-<button onclick={() => b++}>{b}</button>
diff --git a/packages/svelte/types/index.d.ts b/packages/svelte/types/index.d.ts
index 535250bc77..09e9a23888 100644
--- a/packages/svelte/types/index.d.ts
+++ b/packages/svelte/types/index.d.ts
@@ -927,7 +927,6 @@ declare module 'svelte/compiler' {
 			| 'bindable_prop'
 			| 'rest_prop'
 			| 'state'
-			| 'linked_state'
 			| 'raw_state'
 			| 'derived'
 			| 'each'
@@ -2913,32 +2912,6 @@ declare namespace $state {
 	 *
 	 * @param initial The initial value
 	 */
-
-	/**
-	 * Declares reactive state that is linked to another value. Local reassignments
-	 * will override the linked value until the linked value changes.
-	 *
-	 * Example:
-	 * ```ts
-	 * let a = $state(0);
-	 * let b = $state.link(a);
-
-	 * a = 1;
-	 * console.log(a, b); // 1, 1
-
-	 * b = 2; // unlink
-	 * console.log(a, b); // 1, 2
-	 *
-	 * a = 3; // relink
-	 * console.log(a, b); // 3, 3
-	 * ```
-	 *
-	 * https://svelte-5-preview.vercel.app/docs/runes#$state-link
-	 *
-	 * @param value The linked value
-	 */
-	export function link<T>(value: T): T;
-
 	export function raw<T>(initial: T): T;
 	export function raw<T>(): T | undefined;
 	/**
diff --git a/sites/svelte-5-preview/src/lib/autocomplete.js b/sites/svelte-5-preview/src/lib/autocomplete.js
index d2e989e4d6..b535c7ff04 100644
--- a/sites/svelte-5-preview/src/lib/autocomplete.js
+++ b/sites/svelte-5-preview/src/lib/autocomplete.js
@@ -118,7 +118,6 @@ const runes = [
 	{ snippet: '$bindable()', test: is_bindable },
 	{ snippet: '$effect.root(() => {\n\t${}\n})' },
 	{ snippet: '$state.snapshot(${})' },
-	{ snippet: '$state.link(${})' },
 	{ snippet: '$effect.tracking()' },
 	{ snippet: '$inspect(${});', test: is_statement }
 ];
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index 5fbed65a09..02cea6ffb4 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -64,33 +64,6 @@ Only plain objects and arrays [are made deeply reactive](/#H4sIAAAAAAAAE42QwWrDM
 
 In non-runes mode, a `let` declaration is treated as reactive state if it is updated at some point. Unlike `$state(...)`, which works anywhere in your app, `let` only behaves this way at the top level of a component.
 
-## `$state.link`
-
-Linked state stays up to date with its input:
-
-```js
-let a = $state(0);
-let b = $state.link(a);
-
-a = 1;
-console.log(a, b); // 1, 1
-```
-
-You can temporarily _unlink_ state. It will be _relinked_ when the input value changes:
-
-```js
-let a = 1;
-let b = 1;
-// ---cut---
-b = 2; // unlink
-console.log(a, b); // 1, 2
-
-a = 3; // relink
-console.log(a, b); // 3, 3
-```
-
-As with `$state`, if `$state.link` is passed a plain object or array it will be made deeply reactive. If passed an existing state proxy it will be reused, meaning that mutating the linked state will mutate the original. To clone a state proxy, you can use [`$state.snapshot`](#$state-snapshot).
-
 ## `$state.raw`
 
 State declared with `$state.raw` cannot be mutated; it can only be _reassigned_. In other words, rather than assigning to a property of an object, or using an array method like `push`, replace the object or array altogether if you'd like to update it:

From 70ed8cd6665abe7aa385652ad6de3f19ca6c7657 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 21 Aug 2024 15:32:26 -0400
Subject: [PATCH 180/196] Version Packages (next) (#12957)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            |  3 +++
 packages/svelte/CHANGELOG.md   | 10 ++++++++++
 packages/svelte/package.json   |  2 +-
 packages/svelte/src/version.js |  2 +-
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index fa9f1c5bac..4a6c736d7b 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -278,6 +278,7 @@
     "green-hounds-play",
     "green-snails-tickle",
     "green-tigers-judge",
+    "green-walls-clap",
     "grumpy-avocados-fetch",
     "grumpy-insects-sleep",
     "grumpy-jars-sparkle",
@@ -441,6 +442,7 @@
     "neat-ducks-jam",
     "neat-files-rescue",
     "neat-jokes-beam",
+    "nervous-adults-sell",
     "nervous-berries-boil",
     "nervous-dolphins-allow",
     "nervous-ducks-repeat",
@@ -525,6 +527,7 @@
     "proud-pets-hang",
     "proud-queens-sniff",
     "purple-dragons-peel",
+    "quick-eagles-sit",
     "quick-pumpkins-study",
     "quiet-apricots-dream",
     "quiet-berries-end",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 6ea8ac9eb2..233099b19d 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,15 @@
 # svelte
 
+## 5.0.0-next.232
+
+### Patch Changes
+
+- breaking: remove `$state.link` rune pending further design work ([#12943](https://github.com/sveltejs/svelte/pull/12943))
+
+- fix: ensure `$store` reads are properly transformed ([#12952](https://github.com/sveltejs/svelte/pull/12952))
+
+- breaking: deprecate `context="module"` in favor of `module` ([#12948](https://github.com/sveltejs/svelte/pull/12948))
+
 ## 5.0.0-next.231
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 834b0d5b90..65790525ec 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.231",
+  "version": "5.0.0-next.232",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 660f11d929..0ab4f7fac1 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.231';
+export const VERSION = '5.0.0-next.232';
 export const PUBLIC_VERSION = '5';

From 01d32e53a9f445280fb498c9069d998840503c00 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Wed, 21 Aug 2024 22:17:55 +0200
Subject: [PATCH 181/196] fix: more robust handling of var declarations
 (#12949)

* fix: more robust handling of var declarations

- fixes #12807: state declared with var is now retrieved using a new `safe_get` function, which works like `get` but checks for undefined
- fixes #12900: ensure we're not creating another new scope for block statements of function declarations, which resulted in var declarations getting "swallowed" (because they were hoisted to the function declaration scope and never seen by our logic)

* simplify

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/spotty-trees-provide.md            |  5 ++++
 .../client/visitors/VariableDeclaration.js    |  2 +-
 .../client/visitors/shared/declarations.js    |  2 +-
 packages/svelte/src/compiler/phases/scope.js  | 14 ++++++++++-
 packages/svelte/src/internal/client/index.js  |  1 +
 .../svelte/src/internal/client/runtime.js     | 10 ++++++++
 .../samples/var-declarations/_config.js       |  7 ++++++
 .../samples/var-declarations/main.svelte      | 24 +++++++++++++++++++
 8 files changed, 62 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/spotty-trees-provide.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/var-declarations/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/var-declarations/main.svelte

diff --git a/.changeset/spotty-trees-provide.md b/.changeset/spotty-trees-provide.md
new file mode 100644
index 0000000000..0652fda049
--- /dev/null
+++ b/.changeset/spotty-trees-provide.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: more robust handling of var declarations
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index 77177e397f..c05c1b6075 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -284,7 +284,7 @@ export function VariableDeclaration(node, context) {
 }
 
 /**
- * Creates the output for a state declaration.
+ * Creates the output for a state declaration in legacy mode.
  * @param {VariableDeclarator} declarator
  * @param {Scope} scope
  * @param {Expression} value
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
index 33566f1c10..0bd8c352f6 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/declarations.js
@@ -23,7 +23,7 @@ export function add_state_transformers(context) {
 			binding.kind === 'legacy_reactive'
 		) {
 			context.state.transform[name] = {
-				read: get_value,
+				read: binding.declaration_kind === 'var' ? (node) => b.call('$.safe_get', node) : get_value,
 				assign: (node, value) => {
 					let call = b.call('$.set', node, value);
 
diff --git a/packages/svelte/src/compiler/phases/scope.js b/packages/svelte/src/compiler/phases/scope.js
index 66a49f87c7..f0db435b83 100644
--- a/packages/svelte/src/compiler/phases/scope.js
+++ b/packages/svelte/src/compiler/phases/scope.js
@@ -461,8 +461,20 @@ export function create_scopes(ast, root, allow_reactive_declarations, parent) {
 		ForStatement: create_block_scope,
 		ForInStatement: create_block_scope,
 		ForOfStatement: create_block_scope,
-		BlockStatement: create_block_scope,
 		SwitchStatement: create_block_scope,
+		BlockStatement(node, context) {
+			const parent = context.path.at(-1);
+			if (
+				parent?.type === 'FunctionDeclaration' ||
+				parent?.type === 'FunctionExpression' ||
+				parent?.type === 'ArrowFunctionExpression'
+			) {
+				// We already created a new scope for the function
+				context.next();
+			} else {
+				create_block_scope(node, context);
+			}
+		},
 
 		ClassDeclaration(node, { state, next }) {
 			if (node.id) state.scope.declare(node.id, 'normal', 'let', node);
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 1ca71708af..51b9705902 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -127,6 +127,7 @@ export {
 export { set_text } from './render.js';
 export {
 	get,
+	safe_get,
 	invalidate_inner_signals,
 	flush_sync,
 	tick,
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index b1a52b0878..f22a6c15a4 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/packages/svelte/src/internal/client/runtime.js
@@ -734,6 +734,16 @@ export function get(signal) {
 	return signal.v;
 }
 
+/**
+ * Like `get`, but checks for `undefined`. Used for `var` declarations because they can be accessed before being declared
+ * @template V
+ * @param {Value<V> | undefined} signal
+ * @returns {V | undefined}
+ */
+export function safe_get(signal) {
+	return signal && get(signal);
+}
+
 /**
  * Invokes a function and captures all signals that are read during the invocation,
  * then invalidates them.
diff --git a/packages/svelte/tests/runtime-runes/samples/var-declarations/_config.js b/packages/svelte/tests/runtime-runes/samples/var-declarations/_config.js
new file mode 100644
index 0000000000..46349dd2dc
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/var-declarations/_config.js
@@ -0,0 +1,7 @@
+import { test } from '../../test';
+
+export default test({
+	test({ assert, logs }) {
+		assert.deepEqual(logs, [undefined, undefined, 10, 20, 0, 1]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/var-declarations/main.svelte b/packages/svelte/tests/runtime-runes/samples/var-declarations/main.svelte
new file mode 100644
index 0000000000..8ed48fcbed
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/var-declarations/main.svelte
@@ -0,0 +1,24 @@
+<script>
+	console.log(foo, double);
+	var foo = $state(10);
+	var double = $derived(foo * 2);
+	console.log(foo, double);
+
+	function wrap(initial) {
+		var _value = $state(initial);
+
+		return {
+			get() {
+				return _value;
+			},
+			set(state) {
+				_value = state;
+			}
+		};
+	}
+
+	var wrapped = wrap(0);
+	console.log(wrapped.get());
+	wrapped.set(1);
+	console.log(wrapped.get());
+</script>

From 8c1d439a36db09dc9efe5f6ddfad6a375b9aced7 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 21 Aug 2024 16:59:17 -0400
Subject: [PATCH 182/196] fix: remove buggy `validate_dynamic_component` check
 (#12960)

closes #12857
---
 .changeset/young-peaches-agree.md             |  5 ++++
 .../client/visitors/shared/component.js       |  9 +------
 packages/svelte/src/internal/client/index.js  |  7 +-----
 .../svelte/src/internal/client/validate.js    | 25 -------------------
 .../component-not-constructor-dev/_config.js  | 12 ---------
 .../component-not-constructor-dev/main.svelte |  5 ----
 .../component-not-constructor2-dev/Sub.svelte |  1 -
 .../component-not-constructor2-dev/_config.js | 24 ------------------
 .../main.svelte                               | 14 -----------
 9 files changed, 7 insertions(+), 95 deletions(-)
 create mode 100644 .changeset/young-peaches-agree.md
 delete mode 100644 packages/svelte/tests/runtime-legacy/samples/component-not-constructor-dev/_config.js
 delete mode 100644 packages/svelte/tests/runtime-legacy/samples/component-not-constructor-dev/main.svelte
 delete mode 100644 packages/svelte/tests/runtime-legacy/samples/component-not-constructor2-dev/Sub.svelte
 delete mode 100644 packages/svelte/tests/runtime-legacy/samples/component-not-constructor2-dev/_config.js
 delete mode 100644 packages/svelte/tests/runtime-legacy/samples/component-not-constructor2-dev/main.svelte

diff --git a/.changeset/young-peaches-agree.md b/.changeset/young-peaches-agree.md
new file mode 100644
index 0000000000..59abf5b867
--- /dev/null
+++ b/.changeset/young-peaches-agree.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: remove buggy `validate_dynamic_component` check
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
index 43cc7b029f..5b1cfdbb05 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/component.js
@@ -348,14 +348,7 @@ export function build_component(node, component_name, context, anchor = context.
 				b.thunk(/** @type {Expression} */ (context.visit(node.expression))),
 				b.arrow(
 					[b.id('$$anchor'), b.id(component_name)],
-					b.block([
-						...binding_initializers,
-						b.stmt(
-							dev
-								? b.call('$.validate_dynamic_component', b.thunk(prev(b.id('$$anchor'))))
-								: prev(b.id('$$anchor'))
-						)
-					])
+					b.block([...binding_initializers, b.stmt(prev(b.id('$$anchor')))])
 				)
 			);
 		};
diff --git a/packages/svelte/src/internal/client/index.js b/packages/svelte/src/internal/client/index.js
index 51b9705902..cc7fa03dca 100644
--- a/packages/svelte/src/internal/client/index.js
+++ b/packages/svelte/src/internal/client/index.js
@@ -144,12 +144,7 @@ export {
 	setContext,
 	hasContext
 } from './runtime.js';
-export {
-	validate_binding,
-	validate_dynamic_component,
-	validate_each_keys,
-	validate_prop_bindings
-} from './validate.js';
+export { validate_binding, validate_each_keys, validate_prop_bindings } from './validate.js';
 export { raf } from './timing.js';
 export { proxy } from './proxy.js';
 export { create_custom_element } from './dom/elements/custom-element.js';
diff --git a/packages/svelte/src/internal/client/validate.js b/packages/svelte/src/internal/client/validate.js
index 8792d02f0d..d8ec8b6900 100644
--- a/packages/svelte/src/internal/client/validate.js
+++ b/packages/svelte/src/internal/client/validate.js
@@ -14,31 +14,6 @@ function is_void(tag) {
 	return void_element_names.test(tag) || tag.toLowerCase() === '!doctype';
 }
 
-/**
- * @template Component
- * @param {() => Component} component_fn
- * @returns {Component}
- */
-export function validate_dynamic_component(component_fn) {
-	try {
-		const instance = component_fn();
-
-		if (instance !== undefined && typeof instance !== 'object') {
-			e.svelte_component_invalid_this_value();
-		}
-
-		return instance;
-	} catch (err) {
-		const { message } = /** @type {Error} */ (err);
-
-		if (typeof message === 'string' && message.indexOf('is not a function') !== -1) {
-			e.svelte_component_invalid_this_value();
-		}
-
-		throw err;
-	}
-}
-
 /**
  * @param {() => any} collection
  * @param {(item: any, index: number) => string} key_fn
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-not-constructor-dev/_config.js b/packages/svelte/tests/runtime-legacy/samples/component-not-constructor-dev/_config.js
deleted file mode 100644
index a84708a774..0000000000
--- a/packages/svelte/tests/runtime-legacy/samples/component-not-constructor-dev/_config.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	mode: ['client'],
-
-	compileOptions: {
-		dev: true
-	},
-
-	error:
-		'svelte_component_invalid_this_value\nThe `this={...}` property of a `<svelte:component>` must be a Svelte component, if defined'
-});
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-not-constructor-dev/main.svelte b/packages/svelte/tests/runtime-legacy/samples/component-not-constructor-dev/main.svelte
deleted file mode 100644
index 80f9f969e6..0000000000
--- a/packages/svelte/tests/runtime-legacy/samples/component-not-constructor-dev/main.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	let banana = {};
-</script>
-
-<svelte:component this={banana} />
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-not-constructor2-dev/Sub.svelte b/packages/svelte/tests/runtime-legacy/samples/component-not-constructor2-dev/Sub.svelte
deleted file mode 100644
index dd6d0bb1a9..0000000000
--- a/packages/svelte/tests/runtime-legacy/samples/component-not-constructor2-dev/Sub.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<div>Sub</div>
\ No newline at end of file
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-not-constructor2-dev/_config.js b/packages/svelte/tests/runtime-legacy/samples/component-not-constructor2-dev/_config.js
deleted file mode 100644
index 9152c96354..0000000000
--- a/packages/svelte/tests/runtime-legacy/samples/component-not-constructor2-dev/_config.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { test } from '../../test';
-
-export default test({
-	compileOptions: {
-		dev: true
-	},
-	get props() {
-		return { componentName: 'Sub' };
-	},
-	html: '<div>Sub</div>',
-	test({ assert, component, target }) {
-		component.componentName = 'Proxy';
-		assert.htmlEqual(target.innerHTML, '<div>Sub</div>');
-		try {
-			component.componentName = 'banana';
-			throw new Error('Expected an error');
-		} catch (err) {
-			assert.include(
-				/** @type {Error} */ (err).message,
-				'svelte_component_invalid_this_value\nThe `this={...}` property of a `<svelte:component>` must be a Svelte component, if defined'
-			);
-		}
-	}
-});
diff --git a/packages/svelte/tests/runtime-legacy/samples/component-not-constructor2-dev/main.svelte b/packages/svelte/tests/runtime-legacy/samples/component-not-constructor2-dev/main.svelte
deleted file mode 100644
index 331fdfc385..0000000000
--- a/packages/svelte/tests/runtime-legacy/samples/component-not-constructor2-dev/main.svelte
+++ /dev/null
@@ -1,14 +0,0 @@
-<script>
-	import Sub from './Sub.svelte';
-	export let componentName = 'Sub';
-	let proxy = new Proxy(Sub, {});
-	let banana = {};
-	let component;
-	$: {
-		if (componentName === 'Sub') component = Sub;
-		else if (componentName === 'Proxy') component = proxy;
-		else component = banana;
-	};
-</script>
-
-<svelte:component this={component} />

From 39f2d5ef80b0c545f9b36a4b861655c795ec2ba2 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Wed, 21 Aug 2024 21:02:38 -0400
Subject: [PATCH 183/196] Version Packages (next) (#12958)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 4 +++-
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 4a6c736d7b..7cf3bd4574 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -687,6 +687,7 @@
     "spotty-rocks-destroy",
     "spotty-shrimps-hug",
     "spotty-spiders-compare",
+    "spotty-trees-provide",
     "spotty-turkeys-sparkle",
     "stale-books-perform",
     "stale-comics-look",
@@ -859,6 +860,7 @@
     "yellow-taxis-double",
     "yellow-trees-juggle",
     "young-ads-roll",
-    "young-masks-refuse"
+    "young-masks-refuse",
+    "young-peaches-agree"
   ]
 }
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 233099b19d..d0c47fd678 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.233
+
+### Patch Changes
+
+- fix: more robust handling of var declarations ([#12949](https://github.com/sveltejs/svelte/pull/12949))
+
+- fix: remove buggy `validate_dynamic_component` check ([#12960](https://github.com/sveltejs/svelte/pull/12960))
+
 ## 5.0.0-next.232
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 65790525ec..ae196097d7 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.232",
+  "version": "5.0.0-next.233",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 0ab4f7fac1..53f5bd5df2 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.232';
+export const VERSION = '5.0.0-next.233';
 export const PUBLIC_VERSION = '5';

From 803ebd56767eec5daf560f52bb88e6ab4ff97367 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 21 Aug 2024 21:35:05 -0400
Subject: [PATCH 184/196] typo

---
 documentation/docs/05-misc/05-reactivity-indepth.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/documentation/docs/05-misc/05-reactivity-indepth.md b/documentation/docs/05-misc/05-reactivity-indepth.md
index abd917c021..b40072552f 100644
--- a/documentation/docs/05-misc/05-reactivity-indepth.md
+++ b/documentation/docs/05-misc/05-reactivity-indepth.md
@@ -1,5 +1,5 @@
 ---
-title: Reactivity indepth
+title: Reactivity in depth
 ---
 
 - how to think about Runes ("just JavaScript" with added reactivity, what this means for keeping reactivity alive across boundaries)

From 1aa9c7ba8b55025c405d0f028179e500d73f9222 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Wed, 21 Aug 2024 20:40:30 -0700
Subject: [PATCH 185/196] docs: add a jsdoc description for reconcile (#12965)

---
 packages/svelte/src/internal/client/dom/blocks/each.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/svelte/src/internal/client/dom/blocks/each.js b/packages/svelte/src/internal/client/dom/blocks/each.js
index cdc5ef1799..7b27773a54 100644
--- a/packages/svelte/src/internal/client/dom/blocks/each.js
+++ b/packages/svelte/src/internal/client/dom/blocks/each.js
@@ -224,6 +224,7 @@ export function each(node, flags, get_collection, get_key, render_fn, fallback_f
 }
 
 /**
+ * Add, remove, or reorder items output by an each block as its input changes
  * @template V
  * @param {Array<V>} array
  * @param {EachState} state

From 213258b0240ea46d184efd5a274579642688395a Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 22 Aug 2024 03:58:45 -0400
Subject: [PATCH 186/196] docs: add note on when effects re-run (#12961)

closes #11806

---------

Co-authored-by: Conduitry <git@chor.date>
Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 documentation/docs/03-runes/02-side-effects.md    | 15 +++++++++++++++
 .../src/routes/docs/content/01-api/02-runes.md    | 15 +++++++++++++++
 2 files changed, 30 insertions(+)

diff --git a/documentation/docs/03-runes/02-side-effects.md b/documentation/docs/03-runes/02-side-effects.md
index 9cc0f15beb..f4bc8ef947 100644
--- a/documentation/docs/03-runes/02-side-effects.md
+++ b/documentation/docs/03-runes/02-side-effects.md
@@ -122,6 +122,21 @@ An effect only reruns when the object it reads changes, not when a property insi
 <p>{state.value} doubled is {derived.value}</p>
 ```
 
+An effect only depends on the values that it read the last time it ran. If `a` is true, changes to `b` will [not cause this effect to rerun](/#H4sIAAAAAAAAE3WQ0WrDMAxFf0U1hTow1vcsMfQ7lj3YjlxEXTvEymC4_vfFC6Ewtidxde8RkrJw5DGJ9j2LoO8oWnGZJvEi-GuqIn2iZ1x1istsa6dLdqaJ1RAG9sigoYdjYs0onfYJm7fdMX85q3dE59CylA30CnJtDWxjSNHjq49XeZqXEChcT9usLUAOpIbHA0yzM78oColGhDVofLS3neZSS6mqOz-XD51ZmGOAGKwne-vztk-956CL0kAJsi7decupf4l658EUZX4I8yTWt93jSI5wFC3PC5aP8g0Aje5DcQEAAA==):
+
+```ts
+let a = false;
+let b = false;
+// ---cut---
+$effect(() => {
+	console.log('running');
+
+	if (a || b) {
+		console.log('inside if block');
+	}
+});
+```
+
 ## When not to use `$effect`
 
 In general, `$effect` is best considered something of an escape hatch — useful for things like analytics and direct DOM manipulation — rather than a tool you should use frequently. In particular, avoid using it to synchronise state. Instead of this...
diff --git a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
index 02cea6ffb4..84062a1cfa 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/01-api/02-runes.md
@@ -258,6 +258,21 @@ An effect only reruns when the object it reads changes, not when a property insi
 <p>{state.value} doubled is {derived.value}</p>
 ```
 
+An effect only depends on the values that it read the last time it ran. If `a` is true, changes to `b` will [not cause this effect to rerun](/#H4sIAAAAAAAAE3WQ0WrDMAxFf0U1hTow1vcsMfQ7lj3YjlxEXTvEymC4_vfFC6Ewtidxde8RkrJw5DGJ9j2LoO8oWnGZJvEi-GuqIn2iZ1x1istsa6dLdqaJ1RAG9sigoYdjYs0onfYJm7fdMX85q3dE59CylA30CnJtDWxjSNHjq49XeZqXEChcT9usLUAOpIbHA0yzM78oColGhDVofLS3neZSS6mqOz-XD51ZmGOAGKwne-vztk-956CL0kAJsi7decupf4l658EUZX4I8yTWt93jSI5wFC3PC5aP8g0Aje5DcQEAAA==):
+
+```ts
+let a = false;
+let b = false;
+// ---cut---
+$effect(() => {
+	console.log('running');
+
+	if (a || b) {
+		console.log('inside if block');
+	}
+});
+```
+
 You can return a function from `$effect`, which will run immediately before the effect re-runs, and before it is destroyed ([demo](/#H4sIAAAAAAAAE42SzW6DMBCEX2Vl5RDaVCQ9JoDUY--9lUox9lKsGBvZC1GEePcaKPnpqSe86_m0M2t6ViqNnu0_e2Z4jWzP3pqGbRhdmrHwHWrCUHvbOjF2Ei-caijLTU4aCYRtDUEKK0-ccL2NDstNrbRWHoU10t8Eu-121gTVCssSBa3XEaQZ9GMrpziGj0p5OAccCgSHwmEgJZwrNNihg6MyhK7j-gii4uYb_YyGUZ5guQwzPdL7b_U4ZNSOvp9T2B3m1rB5cLx4zMkhtc7AHz7YVCVwEFzrgosTBMuNs52SKDegaPbvWnMH8AhUXaNUIY6-hHCldQhUIcyLCFlfAuHvkCKaYk8iYevGGgy2wyyJnpy9oLwG0sjdNe2yhGhJN32HsUzi2xOapNpl_bSLIYnDeeoVLZE1YI3QSpzSfo7-8J5PKbwOmdf2jC6JZyD7HxpPaMk93aHhF6utVKVCyfbkWhy-hh9Z3o_2nQIAAA==)).
 
 ```svelte

From 75759dbeaed0b1629c30bac1f4e24bc3855ef703 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Thu, 22 Aug 2024 14:48:48 +0200
Subject: [PATCH 187/196] fix: allow deleting non-existent `$$restProps`
 properties (#12971)

fixes #12966
---
 .changeset/light-tigers-smoke.md                             | 5 +++++
 packages/svelte/src/internal/client/reactivity/props.js      | 2 +-
 .../runtime-legacy/samples/rest-props-delete/App.svelte      | 2 ++
 3 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/light-tigers-smoke.md

diff --git a/.changeset/light-tigers-smoke.md b/.changeset/light-tigers-smoke.md
new file mode 100644
index 0000000000..c26824a41c
--- /dev/null
+++ b/.changeset/light-tigers-smoke.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: allow deleting non-existent `$$restProps` properties
diff --git a/packages/svelte/src/internal/client/reactivity/props.js b/packages/svelte/src/internal/client/reactivity/props.js
index b7200f6f96..fa2ea6dd7c 100644
--- a/packages/svelte/src/internal/client/reactivity/props.js
+++ b/packages/svelte/src/internal/client/reactivity/props.js
@@ -130,7 +130,7 @@ const legacy_rest_props_handler = {
 	},
 	deleteProperty(target, key) {
 		// Svelte 4 allowed for deletions on $$restProps
-		if (target.exclude.includes(key)) return false;
+		if (target.exclude.includes(key)) return true;
 		target.exclude.push(key);
 		update(target.version);
 		return true;
diff --git a/packages/svelte/tests/runtime-legacy/samples/rest-props-delete/App.svelte b/packages/svelte/tests/runtime-legacy/samples/rest-props-delete/App.svelte
index 37825576e5..e7857f28e9 100644
--- a/packages/svelte/tests/runtime-legacy/samples/rest-props-delete/App.svelte
+++ b/packages/svelte/tests/runtime-legacy/samples/rest-props-delete/App.svelte
@@ -2,6 +2,8 @@
 	function prune() {
 		$$restProps.a
 		delete $$restProps.a
+		// should be idempotent
+		delete $$restProps.a
 	}
 </script>
 

From cadc0dceca6625c9523becb3073c4e1c75cb4cbf Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 22 Aug 2024 09:05:27 -0400
Subject: [PATCH 188/196] feat: only traverse trailing static nodes during
 hydration (#12935)

---
 .changeset/quick-paws-wash.md                         |  5 +++++
 .../3-transform/client/visitors/shared/fragment.js    |  2 +-
 packages/svelte/src/internal/client/dom/hydration.js  | 11 +++++++++--
 .../_expected/client/index.svelte.js                  |  3 ++-
 .../_expected/server/index.svelte.js                  |  2 +-
 .../snapshot/samples/skip-static-subtree/index.svelte |  7 +++++++
 6 files changed, 25 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/quick-paws-wash.md

diff --git a/.changeset/quick-paws-wash.md b/.changeset/quick-paws-wash.md
new file mode 100644
index 0000000000..e93b68a0ca
--- /dev/null
+++ b/.changeset/quick-paws-wash.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+feat: only traverse trailing static nodes during hydration
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 6dcb794f2c..9251870c27 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
@@ -118,7 +118,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 	// traverse to the last (n - 1) one when hydrating
 	if (skipped > 1) {
 		skipped -= 1;
-		state.init.push(b.stmt(get_node(false)));
+		state.init.push(b.stmt(b.call('$.next', skipped !== 1 && b.literal(skipped))));
 	}
 }
 
diff --git a/packages/svelte/src/internal/client/dom/hydration.js b/packages/svelte/src/internal/client/dom/hydration.js
index 62b40c8ccd..8523ff97d5 100644
--- a/packages/svelte/src/internal/client/dom/hydration.js
+++ b/packages/svelte/src/internal/client/dom/hydration.js
@@ -66,9 +66,16 @@ export function hydrate_template(template) {
 	}
 }
 
-export function next() {
+export function next(count = 1) {
 	if (hydrating) {
-		hydrate_next();
+		var i = count;
+		var node = hydrate_node;
+
+		while (i--) {
+			node = /** @type {TemplateNode} */ (get_next_sibling(node));
+		}
+
+		hydrate_node = node;
 	}
 }
 
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
index 4f59c4932e..76433ad5a7 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/client/index.svelte.js
@@ -1,7 +1,7 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal/client";
 
-var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!></main> <cant-skip><custom-elements></custom-elements></cant-skip>`, 3);
+var root = $.template(`<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1> </h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> <!> <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements></custom-elements></cant-skip>`, 3);
 
 export default function Skip_static_subtree($$anchor, $$props) {
 	var fragment = root();
@@ -14,6 +14,7 @@ export default function Skip_static_subtree($$anchor, $$props) {
 	var node = $.sibling(h1, 10);
 
 	$.html(node, () => $$props.content, false, false);
+	$.next(14);
 	$.reset(main);
 
 	var cant_skip = $.sibling(main, 2);
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
index 1018b5425e..2bd910508d 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/_expected/server/index.svelte.js
@@ -3,5 +3,5 @@ import * as $ from "svelte/internal/server";
 export default function Skip_static_subtree($$payload, $$props) {
 	let { title, content } = $$props;
 
-	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)}</main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip>`;
+	$$payload.out += `<header><nav><a href="/">Home</a> <a href="/away">Away</a></nav></header> <main><h1>${$.escape(title)}</h1> <div class="static"><p>we don't need to traverse these nodes</p></div> <p>or</p> <p>these</p> <p>ones</p> ${$.html(content)} <p>these</p> <p>trailing</p> <p>nodes</p> <p>can</p> <p>be</p> <p>completely</p> <p>ignored</p></main> <cant-skip><custom-elements with="attributes"></custom-elements></cant-skip>`;
 }
\ No newline at end of file
diff --git a/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte b/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
index cc9d8172e6..de399169b4 100644
--- a/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
+++ b/packages/svelte/tests/snapshot/samples/skip-static-subtree/index.svelte
@@ -18,6 +18,13 @@
 	<p>these</p>
 	<p>ones</p>
 	{@html content}
+	<p>these</p>
+	<p>trailing</p>
+	<p>nodes</p>
+	<p>can</p>
+	<p>be</p>
+	<p>completely</p>
+	<p>ignored</p>
 </main>
 
 <cant-skip>

From f9020997e9b6696ba1b29bf7c79c500d9344b109 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 22 Aug 2024 09:51:35 -0400
Subject: [PATCH 189/196] Version Packages (next) (#12972)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 2 ++
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 7cf3bd4574..bdf3bfa713 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -375,6 +375,7 @@
     "light-humans-hang",
     "light-penguins-invent",
     "light-pens-watch",
+    "light-tigers-smoke",
     "little-ligers-exist",
     "little-pans-jog",
     "little-seals-reflect",
@@ -528,6 +529,7 @@
     "proud-queens-sniff",
     "purple-dragons-peel",
     "quick-eagles-sit",
+    "quick-paws-wash",
     "quick-pumpkins-study",
     "quiet-apricots-dream",
     "quiet-berries-end",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index d0c47fd678..60692aa48b 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.234
+
+### Patch Changes
+
+- fix: allow deleting non-existent `$restProps` properties ([#12971](https://github.com/sveltejs/svelte/pull/12971))
+
+- feat: only traverse trailing static nodes during hydration ([#12935](https://github.com/sveltejs/svelte/pull/12935))
+
 ## 5.0.0-next.233
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index ae196097d7..8dc8c5b0c6 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.233",
+  "version": "5.0.0-next.234",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 53f5bd5df2..ddf2e75cc3 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.233';
+export const VERSION = '5.0.0-next.234';
 export const PUBLIC_VERSION = '5';

From b579c5c06c6d84b7f1767ab3645b52dd6c9ac7e1 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Thu, 22 Aug 2024 09:56:06 -0400
Subject: [PATCH 190/196] chore: remove temporary code (#12973)

---
 packages/svelte/src/compiler/phases/1-parse/read/script.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/svelte/src/compiler/phases/1-parse/read/script.js b/packages/svelte/src/compiler/phases/1-parse/read/script.js
index 3403b5aab4..022a5e0aa0 100644
--- a/packages/svelte/src/compiler/phases/1-parse/read/script.js
+++ b/packages/svelte/src/compiler/phases/1-parse/read/script.js
@@ -65,10 +65,6 @@ export function read_script(parser, start, attributes) {
 
 		if (attribute.name === 'context') {
 			if (attribute.value === true || !is_text_attribute(attribute)) {
-				throw new Error('TODO');
-			}
-
-			if (attribute.value.length !== 1 || attribute.value[0].type !== 'Text') {
 				e.script_invalid_context(attribute);
 			}
 

From 448f21620f7bd22a6d3e19af378bdf6058fe4dd6 Mon Sep 17 00:00:00 2001
From: Ben McCann <322311+benmccann@users.noreply.github.com>
Date: Thu, 22 Aug 2024 10:55:34 -0700
Subject: [PATCH 191/196] chore: update client check for smaller bundle size
 (#12975)

---
 .changeset/rare-ears-agree.md                 | 5 +++++
 packages/svelte/src/internal/client/timing.js | 6 +++---
 2 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/rare-ears-agree.md

diff --git a/.changeset/rare-ears-agree.md b/.changeset/rare-ears-agree.md
new file mode 100644
index 0000000000..392d32c786
--- /dev/null
+++ b/.changeset/rare-ears-agree.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+chore: update client check for smaller bundle size
diff --git a/packages/svelte/src/internal/client/timing.js b/packages/svelte/src/internal/client/timing.js
index 3b9e5c511d..dc7d2ce4ed 100644
--- a/packages/svelte/src/internal/client/timing.js
+++ b/packages/svelte/src/internal/client/timing.js
@@ -1,11 +1,11 @@
 /** @import { Raf } from '#client' */
 import { noop } from '../shared/utils.js';
 
-const is_client = typeof window !== 'undefined';
+import { BROWSER } from 'esm-env';
 
-const request_animation_frame = is_client ? requestAnimationFrame : noop;
+const request_animation_frame = BROWSER ? requestAnimationFrame : noop;
 
-const now = is_client ? () => performance.now() : () => Date.now();
+const now = BROWSER ? () => performance.now() : () => Date.now();
 
 /** @type {Raf} */
 export const raf = {

From 5bdf71639efc3461426a72b18ea38b00636ff0f6 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Fri, 23 Aug 2024 01:31:25 +0100
Subject: [PATCH 192/196] fix: correctly hydrate empty raw blocks (#12979)

* fix: correctly hydrate empty raw blocks

* lint

* Update packages/svelte/src/internal/client/dom/blocks/html.js

---------

Co-authored-by: Rich Harris <rich.harris@vercel.com>
---
 .changeset/shiny-wombats-argue.md                 |  5 +++++
 .../svelte/src/internal/client/dom/blocks/html.js | 13 +++++++++----
 .../tests/hydration/samples/raw-empty/_config.js  | 15 +++++++++++++++
 .../tests/hydration/samples/raw-empty/main.svelte |  1 +
 4 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/shiny-wombats-argue.md
 create mode 100644 packages/svelte/tests/hydration/samples/raw-empty/_config.js
 create mode 100644 packages/svelte/tests/hydration/samples/raw-empty/main.svelte

diff --git a/.changeset/shiny-wombats-argue.md b/.changeset/shiny-wombats-argue.md
new file mode 100644
index 0000000000..b35f1cf304
--- /dev/null
+++ b/.changeset/shiny-wombats-argue.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly hydrate empty raw blocks
diff --git a/packages/svelte/src/internal/client/dom/blocks/html.js b/packages/svelte/src/internal/client/dom/blocks/html.js
index cdfa1baa71..1240352ea0 100644
--- a/packages/svelte/src/internal/client/dom/blocks/html.js
+++ b/packages/svelte/src/internal/client/dom/blocks/html.js
@@ -46,15 +46,20 @@ export function html(node, get_value, svg, mathml, skip_warning) {
 
 	var value = '';
 
-	/** @type {Effect | null} */
+	/** @type {Effect | undefined} */
 	var effect;
 
 	block(() => {
-		if (value === (value = get_value())) return;
+		if (value === (value = get_value())) {
+			if (hydrating) {
+				hydrate_next();
+			}
+			return;
+		}
 
-		if (effect) {
+		if (effect !== undefined) {
 			destroy_effect(effect);
-			effect = null;
+			effect = undefined;
 		}
 
 		if (value === '') return;
diff --git a/packages/svelte/tests/hydration/samples/raw-empty/_config.js b/packages/svelte/tests/hydration/samples/raw-empty/_config.js
new file mode 100644
index 0000000000..5f4d5bebb1
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/raw-empty/_config.js
@@ -0,0 +1,15 @@
+import { test } from '../../test';
+
+export default test({
+	server_props: {
+		html: '<div></div>'
+	},
+
+	props: {
+		html: '<div></div>'
+	},
+
+	test(assert, target) {
+		assert.htmlEqual(target.innerHTML, '<div></div>');
+	}
+});
diff --git a/packages/svelte/tests/hydration/samples/raw-empty/main.svelte b/packages/svelte/tests/hydration/samples/raw-empty/main.svelte
new file mode 100644
index 0000000000..c7ff3d05c9
--- /dev/null
+++ b/packages/svelte/tests/hydration/samples/raw-empty/main.svelte
@@ -0,0 +1 @@
+<div>{@html ''}</div>

From f1a1a08a74d5af12944b272bb9dbb9e6ab83ce76 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 22 Aug 2024 20:34:35 -0400
Subject: [PATCH 193/196] Version Packages (next) (#12978)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 2 ++
 packages/svelte/CHANGELOG.md   | 8 ++++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index bdf3bfa713..76f79463f4 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -538,6 +538,7 @@
     "quiet-cobras-smile",
     "quiet-crabs-nail",
     "quiet-timers-speak",
+    "rare-ears-agree",
     "rare-insects-tell",
     "rare-mirrors-act",
     "rare-pears-whisper",
@@ -606,6 +607,7 @@
     "shiny-rats-heal",
     "shiny-shrimps-march",
     "shiny-starfishes-cross",
+    "shiny-wombats-argue",
     "short-buses-camp",
     "short-countries-rush",
     "short-starfishes-beg",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index 60692aa48b..e79867735f 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,13 @@
 # svelte
 
+## 5.0.0-next.235
+
+### Patch Changes
+
+- chore: update client check for smaller bundle size ([#12975](https://github.com/sveltejs/svelte/pull/12975))
+
+- fix: correctly hydrate empty raw blocks ([#12979](https://github.com/sveltejs/svelte/pull/12979))
+
 ## 5.0.0-next.234
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 8dc8c5b0c6..3cc6e1a16d 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.234",
+  "version": "5.0.0-next.235",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index ddf2e75cc3..31f7807095 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.234';
+export const VERSION = '5.0.0-next.235';
 export const PUBLIC_VERSION = '5';

From b4382e422d954e99ef8197ae2ad5aa003fcf99c4 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 23 Aug 2024 09:31:09 -0400
Subject: [PATCH 194/196] fix: properly transform destructured `$derived.by`
 declarations (#12984)

fixes #12983
---
 .changeset/olive-llamas-warn.md                     |  5 +++++
 .../client/visitors/VariableDeclaration.js          |  2 +-
 .../samples/destructure-derived-by/_config.js       | 13 +++++++++++++
 .../samples/destructure-derived-by/main.svelte      |  8 ++++++++
 4 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/olive-llamas-warn.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/destructure-derived-by/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/destructure-derived-by/main.svelte

diff --git a/.changeset/olive-llamas-warn.md b/.changeset/olive-llamas-warn.md
new file mode 100644
index 0000000000..4cfbf1a763
--- /dev/null
+++ b/.changeset/olive-llamas-warn.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: properly transform destructured `$derived.by` declarations
diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
index c05c1b6075..319c711855 100644
--- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
+++ b/packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js
@@ -173,7 +173,7 @@ export function VariableDeclaration(node, context) {
 					let id;
 					let rhs = value;
 
-					if (init.arguments[0].type === 'Identifier') {
+					if (rune === '$derived' && init.arguments[0].type === 'Identifier') {
 						id = init.arguments[0];
 					} else {
 						id = b.id(context.state.scope.generate('$$d'));
diff --git a/packages/svelte/tests/runtime-runes/samples/destructure-derived-by/_config.js b/packages/svelte/tests/runtime-runes/samples/destructure-derived-by/_config.js
new file mode 100644
index 0000000000..5b090c388f
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/destructure-derived-by/_config.js
@@ -0,0 +1,13 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	html: '<button>clicks: 0</button>',
+
+	test({ assert, target }) {
+		const btn = target.querySelector('button');
+
+		flushSync(() => btn?.click());
+		assert.htmlEqual(target.innerHTML, `<button>clicks: 1</button>`);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/destructure-derived-by/main.svelte b/packages/svelte/tests/runtime-runes/samples/destructure-derived-by/main.svelte
new file mode 100644
index 0000000000..2b00935907
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/destructure-derived-by/main.svelte
@@ -0,0 +1,8 @@
+<script>
+	let count = $state(0);
+	let fn = () => ({ n: count });
+
+	let { n } = $derived.by(fn);
+</script>
+
+<button onclick={() => (count += 1)}>clicks: {n}</button>

From b92fe7951bed07c6905688295d9f1436981b71bf Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Fri, 23 Aug 2024 11:56:21 -0400
Subject: [PATCH 195/196] docs: add note on stricter attribute syntax (#12988)

closes #12910

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
Co-authored-by: brunnerh <brunnerh@users.noreply.github.com>
---
 .../content/03-appendix/02-breaking-changes.md  | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
index a414929203..4f104fa985 100644
--- a/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
+++ b/sites/svelte-5-preview/src/routes/docs/content/03-appendix/02-breaking-changes.md
@@ -244,6 +244,23 @@ When using `onwheel`, `onmousewheel`, `ontouchstart` and `ontouchmove` event att
 
 In the very rare cases that you need to prevent these event defaults, you should use [`on`](https://svelte-5-preview.vercel.app/docs/imports#svelte-events) instead (for example inside an action).
 
+### Attribute/prop syntax is stricter
+
+In Svelte 4, complex attribute values needn't be quoted:
+
+<!-- prettier-ignore -->
+```svelte
+<Component prop=this{is}valid />
+```
+
+This is a footgun. In runes mode, if you want to concatenate stuff you must wrap the value in quotes:
+
+```svelte
+<Component prop="this{is}valid" />
+```
+
+Note that Svelte 5 will also warn if you have a single expression wrapped in quotes, like `answer="{42}"` — in Svelte 6, that will cause the value to be converted to a string, rather than passed as a number.
+
 ## Other breaking changes
 
 ### Stricter `@const` assignment validation

From d42bd398e73c8fad22b610f4596f10d31c1bf7d7 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Fri, 23 Aug 2024 18:09:03 +0200
Subject: [PATCH 196/196] Version Packages (next) (#12986)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json            | 1 +
 packages/svelte/CHANGELOG.md   | 6 ++++++
 packages/svelte/package.json   | 2 +-
 packages/svelte/src/version.js | 2 +-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index 76f79463f4..83d5a5ceee 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -478,6 +478,7 @@
     "olive-cobras-wonder",
     "olive-forks-grin",
     "olive-kangaroos-brake",
+    "olive-llamas-warn",
     "olive-mice-fix",
     "olive-moons-act",
     "olive-seals-sell",
diff --git a/packages/svelte/CHANGELOG.md b/packages/svelte/CHANGELOG.md
index e79867735f..94c7d65db0 100644
--- a/packages/svelte/CHANGELOG.md
+++ b/packages/svelte/CHANGELOG.md
@@ -1,5 +1,11 @@
 # svelte
 
+## 5.0.0-next.236
+
+### Patch Changes
+
+- fix: properly transform destructured `$derived.by` declarations ([#12984](https://github.com/sveltejs/svelte/pull/12984))
+
 ## 5.0.0-next.235
 
 ### Patch Changes
diff --git a/packages/svelte/package.json b/packages/svelte/package.json
index 3cc6e1a16d..0151b97218 100644
--- a/packages/svelte/package.json
+++ b/packages/svelte/package.json
@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.0.0-next.235",
+  "version": "5.0.0-next.236",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
diff --git a/packages/svelte/src/version.js b/packages/svelte/src/version.js
index 31f7807095..6ca3f5b54e 100644
--- a/packages/svelte/src/version.js
+++ b/packages/svelte/src/version.js
@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.0.0-next.235';
+export const VERSION = '5.0.0-next.236';
 export const PUBLIC_VERSION = '5';