Merge branch 'main' into svelte-html

documentation/docs/99-legacy/30-legacy-svelte-component.md

@@ -2,7 +2,7 @@
 title: <svelte:component>
 ---
 
-In runes mode, `<MyComponent>` will re-render if the value of `MyComponent` changes.
+In runes mode, `<MyComponent>` will re-render if the value of `MyComponent` changes. See the [Svelte 5 migration guide](/docs/svelte/v5-migration-guide#Breaking-changes-in-runes-mode-svelte:component-is-no-longer-necessary) for an example.
 
 In legacy mode, it won't — we must use `<svelte:component>`, which destroys and recreates the component instance when the value of its `this` expression changes:
 

packages/svelte/CHANGELOG.md

@@ -1,5 +1,35 @@
 # svelte
 
+## 5.14.4
+
+### Patch Changes
+
+- fix: remove implements from class declarations ([#14749](https://github.com/sveltejs/svelte/pull/14749))
+
+- fix: remove unwanted properties from both replaced and unreplaced nodes ([#14744](https://github.com/sveltejs/svelte/pull/14744))
+
+## 5.14.3
+
+### Patch Changes
+
+- fix: bump esrap, prevent malformed AST ([#14742](https://github.com/sveltejs/svelte/pull/14742))
+
+- fix: compare array contents for equality mismatch detections, not the arrays themselves ([#14738](https://github.com/sveltejs/svelte/pull/14738))
+
+## 5.14.2
+
+### Patch Changes
+
+- fix: correctly highlight first rerun of `$inspect.trace` ([#14734](https://github.com/sveltejs/svelte/pull/14734))
+
+- chore: more loose parser improvements ([#14733](https://github.com/sveltejs/svelte/pull/14733))
+
+## 5.14.1
+
+### Patch Changes
+
+- fix: improve unowned derived performance ([#14724](https://github.com/sveltejs/svelte/pull/14724))
+
 ## 5.14.0
 
 ### Minor Changes

packages/svelte/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.14.0",
+  "version": "5.14.4",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
@@ -147,7 +147,7 @@
     "aria-query": "^5.3.1",
     "axobject-query": "^4.1.0",
     "esm-env": "^1.2.1",
-    "esrap": "^1.2.3",
+    "esrap": "^1.3.1",
     "is-reference": "^3.0.3",
     "locate-character": "^3.0.0",
     "magic-string": "^0.30.11",

packages/svelte/src/compiler/phases/1-parse/read/expression.js

@@ -7,9 +7,10 @@ import { find_matching_bracket } from '../utils/bracket.js';
 
 /**
  * @param {Parser} parser
+ * @param {string} [opening_token]
  * @returns {Expression}
  */
-export default function read_expression(parser) {
+export default function read_expression(parser, opening_token) {
 	try {
 		const node = parse_expression_at(parser.template, parser.ts, parser.index);
 
@@ -42,7 +43,7 @@ export default function read_expression(parser) {
 	} catch (err) {
 		if (parser.loose) {
 			// Find the next } and treat it as the end of the expression
-			const end = find_matching_bracket(parser.template, parser.index, '{');
+			const end = find_matching_bracket(parser.template, parser.index, opening_token ?? '{');
 			if (end) {
 				const start = parser.index;
 				parser.index = end;

packages/svelte/src/compiler/phases/1-parse/remove_typescript_nodes.js

@@ -17,6 +17,16 @@ function remove_this_param(node, context) {
 
 /** @type {Visitors<any, null>} */
 const visitors = {
+	_(node, context) {
+		const n = context.next() ?? node;
+
+		// TODO there may come a time when we decide to preserve type annotations.
+		// until that day comes, we just delete them so they don't confuse esrap
+		delete n.typeAnnotation;
+		delete n.typeParameters;
+		delete n.returnType;
+		delete n.accessibility;
+	},
 	Decorator(node) {
 		e.typescript_invalid_feature(node, 'decorators (related TSC proposal is not stage 4 yet)');
 	},
@@ -78,23 +88,12 @@ const visitors = {
 	TSNonNullExpression(node, context) {
 		return context.visit(node.expression);
 	},
-	TSTypeAnnotation() {
-		// This isn't correct, strictly speaking, and could result in invalid ASTs (like an empty statement within function parameters),
-		// but esrap, our printing tool, just ignores these AST nodes at invalid positions, so it's fine
-		return b.empty;
-	},
 	TSInterfaceDeclaration() {
 		return b.empty;
 	},
 	TSTypeAliasDeclaration() {
 		return b.empty;
 	},
-	TSTypeParameterDeclaration() {
-		return b.empty;
-	},
-	TSTypeParameterInstantiation() {
-		return b.empty;
-	},
 	TSEnumDeclaration(node) {
 		e.typescript_invalid_feature(node, 'enums');
 	},
@@ -116,6 +115,7 @@ const visitors = {
 		if (node.declare) {
 			return b.empty;
 		}
+		delete node.implements;
 		return context.next();
 	},
 	VariableDeclaration(node, context) {

packages/svelte/src/compiler/phases/1-parse/state/element.js

@@ -124,8 +124,11 @@ export default function element(parser) {
 	}
 
 	if (!regex_valid_element_name.test(name) && !regex_valid_component_name.test(name)) {
-		const bounds = { start: start + 1, end: start + 1 + name.length };
-		e.tag_invalid_name(bounds);
+		// <div. -> in the middle of typing -> allow in loose mode
+		if (!parser.loose || !name.endsWith('.')) {
+			const bounds = { start: start + 1, end: start + 1 + name.length };
+			e.tag_invalid_name(bounds);
+		}
 	}
 
 	if (root_only_meta_tags.has(name)) {
@@ -142,7 +145,7 @@ export default function element(parser) {
 
 	const type = meta_tags.has(name)
 		? meta_tags.get(name)
-		: regex_valid_component_name.test(name)
+		: regex_valid_component_name.test(name) || (parser.loose && name.endsWith('.'))
 			? 'Component'
 			: name === 'title' && parent_is_head(parser.stack)
 				? 'TitleElement'

packages/svelte/src/compiler/phases/1-parse/state/tag.js

@@ -174,13 +174,30 @@ function open(parser) {
 		if (parser.eat('(')) {
 			parser.allow_whitespace();
 
-			key = read_expression(parser);
+			key = read_expression(parser, '(');
 			parser.allow_whitespace();
 			parser.eat(')', true);
 			parser.allow_whitespace();
 		}
 
-		parser.eat('}', true);
+		const matches = parser.eat('}', true, false);
+
+		if (!matches) {
+			// Parser may have read the `as` as part of the expression (e.g. in `{#each foo. as x}`)
+			if (parser.template.slice(parser.index - 4, parser.index) === ' as ') {
+				const prev_index = parser.index;
+				context = read_pattern(parser);
+				parser.eat('}', true);
+				expression = {
+					type: 'Identifier',
+					name: '',
+					start: expression.start,
+					end: prev_index - 4
+				};
+			} else {
+				parser.eat('}', true); // rerun to produce the parser error
+			}
+		}
 
 		/** @type {AST.EachBlock} */
 		const block = parser.append({
@@ -246,7 +263,39 @@ function open(parser) {
 			parser.fragments.push(block.pending);
 		}
 
-		parser.eat('}', true);
+		const matches = parser.eat('}', true, false);
+
+		// Parser may have read the `then/catch` as part of the expression (e.g. in `{#await foo. then x}`)
+		if (!matches) {
+			if (parser.template.slice(parser.index - 6, parser.index) === ' then ') {
+				const prev_index = parser.index;
+				block.value = read_pattern(parser);
+				parser.eat('}', true);
+				block.expression = {
+					type: 'Identifier',
+					name: '',
+					start: expression.start,
+					end: prev_index - 6
+				};
+				block.then = block.pending;
+				block.pending = null;
+			} else if (parser.template.slice(parser.index - 7, parser.index) === ' catch ') {
+				const prev_index = parser.index;
+				block.error = read_pattern(parser);
+				parser.eat('}', true);
+				block.expression = {
+					type: 'Identifier',
+					name: '',
+					start: expression.start,
+					end: prev_index - 7
+				};
+				block.catch = block.pending;
+				block.pending = null;
+			} else {
+				parser.eat('}', true); // rerun to produce the parser error
+			}
+		}
+
 		parser.stack.push(block);
 
 		return;

packages/svelte/src/compiler/phases/1-parse/utils/bracket.js

@@ -4,6 +4,8 @@ const SQUARE_BRACKET_OPEN = '['.charCodeAt(0);
 const SQUARE_BRACKET_CLOSE = ']'.charCodeAt(0);
 const CURLY_BRACKET_OPEN = '{'.charCodeAt(0);
 const CURLY_BRACKET_CLOSE = '}'.charCodeAt(0);
+const PARENTHESES_OPEN = '('.charCodeAt(0);
+const PARENTHESES_CLOSE = ')'.charCodeAt(0);
 
 /** @param {number} code */
 export function is_bracket_open(code) {
@@ -34,6 +36,9 @@ export function get_bracket_close(open) {
 	if (open === CURLY_BRACKET_OPEN) {
 		return CURLY_BRACKET_CLOSE;
 	}
+	if (open === PARENTHESES_OPEN) {
+		return PARENTHESES_CLOSE;
+	}
 }
 
 /**

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

@@ -33,12 +33,15 @@ export function transform_component(analysis, source, options) {
 			: client_component(analysis, options);
 
 	const js_source_name = get_source_name(options.filename, options.outputFilename, 'input.svelte');
+
+	// @ts-expect-error
 	const js = print(program, {
 		// include source content; makes it easier/more robust looking up the source map code
 		// (else esrap does return null for source and sourceMapContent which may trip up tooling)
 		sourceMapContent: source,
 		sourceMapSource: js_source_name
 	});
+
 	merge_with_preprocessor_map(js, options, js_source_name);
 
 	const css =
@@ -92,6 +95,7 @@ export function transform_module(analysis, source, options) {
 	}
 
 	return {
+		// @ts-expect-error
 		js: print(program, {
 			// include source content; makes it easier/more robust looking up the source map code
 			// (else esrap does return null for source and sourceMapContent which may trip up tooling)

packages/svelte/src/internal/client/dev/equality.js

@@ -17,10 +17,11 @@ export function init_array_prototype_warnings() {
 		const index = indexOf.call(this, item, from_index);
 
 		if (index === -1) {
-			const test = indexOf.call(get_proxied_value(this), get_proxied_value(item), from_index);
-
-			if (test !== -1) {
-				w.state_proxy_equality_mismatch('array.indexOf(...)');
+			for (let i = from_index ?? 0; i < this.length; i += 1) {
+				if (get_proxied_value(this[i]) === item) {
+					w.state_proxy_equality_mismatch('array.indexOf(...)');
+					break;
+				}
 			}
 		}
 
@@ -33,16 +34,11 @@ export function init_array_prototype_warnings() {
 		const index = lastIndexOf.call(this, item, from_index ?? this.length - 1);
 
 		if (index === -1) {
-			// we need to specify this.length - 1 because it's probably using something like
-			// `arguments` inside so passing undefined is different from not passing anything
-			const test = lastIndexOf.call(
-				get_proxied_value(this),
-				get_proxied_value(item),
-				from_index ?? this.length - 1
-			);
-
-			if (test !== -1) {
-				w.state_proxy_equality_mismatch('array.lastIndexOf(...)');
+			for (let i = 0; i <= (from_index ?? this.length - 1); i += 1) {
+				if (get_proxied_value(this[i]) === item) {
+					w.state_proxy_equality_mismatch('array.lastIndexOf(...)');
+					break;
+				}
 			}
 		}
 
@@ -53,10 +49,11 @@ export function init_array_prototype_warnings() {
 		const has = includes.call(this, item, from_index);
 
 		if (!has) {
-			const test = includes.call(get_proxied_value(this), get_proxied_value(item), from_index);
-
-			if (test) {
-				w.state_proxy_equality_mismatch('array.includes(...)');
+			for (let i = 0; i < this.length; i += 1) {
+				if (get_proxied_value(this[i]) === item) {
+					w.state_proxy_equality_mismatch('array.includes(...)');
+					break;
+				}
 			}
 		}
 

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

@@ -127,8 +127,8 @@ export function set_untracked_writes(value) {
 	untracked_writes = value;
 }
 
-/** @type {number} Used by sources and deriveds for handling updates to unowned deriveds */
-let current_version = 0;
+/** @type {number} Used by sources and deriveds for handling updates to unowned deriveds it starts from 1 to differentiate between a created effect and a run one for tracing */
+let current_version = 1;
 
 // If we are working with a get() chain that has no active container,
 // to prevent memory leaks, we skip adding the reaction.
@@ -230,8 +230,9 @@ export function check_dirtiness(reaction) {
 			}
 		}
 
-		// Unowned signals should never be marked as clean.
-		if (!is_unowned) {
+		// Unowned signals should never be marked as clean unless they
+		// are used within an active_effect without skip_reaction
+		if (!is_unowned || (active_effect !== null && !skip_reaction)) {
 			set_signal_status(reaction, CLEAN);
 		}
 	}

packages/svelte/src/version.js

@@ -6,5 +6,5 @@
  * https://svelte.dev/docs/svelte-compiler#svelte-version
  * @type {string}
  */
-export const VERSION = '5.14.0';
+export const VERSION = '5.14.4';
 export const PUBLIC_VERSION = '5';

packages/svelte/tests/parser-legacy/samples/loose-invalid-expression/input.svelte

@@ -9,3 +9,15 @@
 
 asd{a.}asd
 {foo[bar.]}
+
+{#if x.}{/if}
+
+{#each array as item (item.)}{/each}
+
+{#each obj. as item}{/each}
+
+{#await x.}{/await}
+
+{#await x. then y}{/await}
+
+{#await x. catch y}{/await}

packages/svelte/tests/parser-legacy/samples/loose-invalid-expression/output.json

@@ -2,7 +2,7 @@
 	"html": {
 		"type": "Fragment",
 		"start": 0,
-		"end": 164,
+		"end": 324,
 		"children": [
 			{
 				"type": "Element",
@@ -236,6 +236,272 @@
 					"end": 163,
 					"name": ""
 				}
+			},
+			{
+				"type": "Text",
+				"start": 164,
+				"end": 166,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "IfBlock",
+				"start": 166,
+				"end": 179,
+				"expression": {
+					"type": "Identifier",
+					"start": 171,
+					"end": 173,
+					"name": ""
+				},
+				"children": []
+			},
+			{
+				"type": "Text",
+				"start": 179,
+				"end": 181,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "EachBlock",
+				"start": 181,
+				"end": 217,
+				"children": [],
+				"context": {
+					"type": "Identifier",
+					"name": "item",
+					"start": 197,
+					"loc": {
+						"start": {
+							"line": 15,
+							"column": 16,
+							"character": 197
+						},
+						"end": {
+							"line": 15,
+							"column": 20,
+							"character": 201
+						}
+					},
+					"end": 201
+				},
+				"expression": {
+					"type": "Identifier",
+					"start": 188,
+					"end": 193,
+					"loc": {
+						"start": {
+							"line": 15,
+							"column": 7
+						},
+						"end": {
+							"line": 15,
+							"column": 12
+						}
+					},
+					"name": "array"
+				},
+				"key": {
+					"type": "Identifier",
+					"start": 203,
+					"end": 208,
+					"name": ""
+				}
+			},
+			{
+				"type": "Text",
+				"start": 217,
+				"end": 219,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "EachBlock",
+				"start": 219,
+				"end": 246,
+				"children": [],
+				"context": {
+					"type": "Identifier",
+					"name": "item",
+					"start": 234,
+					"loc": {
+						"start": {
+							"line": 17,
+							"column": 15,
+							"character": 234
+						},
+						"end": {
+							"line": 17,
+							"column": 19,
+							"character": 238
+						}
+					},
+					"end": 238
+				},
+				"expression": {
+					"type": "Identifier",
+					"name": "",
+					"start": 226,
+					"end": 230
+				}
+			},
+			{
+				"type": "Text",
+				"start": 246,
+				"end": 248,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "AwaitBlock",
+				"start": 248,
+				"end": 267,
+				"expression": {
+					"type": "Identifier",
+					"start": 256,
+					"end": 258,
+					"name": ""
+				},
+				"value": null,
+				"error": null,
+				"pending": {
+					"type": "PendingBlock",
+					"start": 259,
+					"end": 259,
+					"children": [],
+					"skip": false
+				},
+				"then": {
+					"type": "ThenBlock",
+					"start": null,
+					"end": null,
+					"children": [],
+					"skip": true
+				},
+				"catch": {
+					"type": "CatchBlock",
+					"start": null,
+					"end": null,
+					"children": [],
+					"skip": true
+				}
+			},
+			{
+				"type": "Text",
+				"start": 267,
+				"end": 269,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "AwaitBlock",
+				"start": 269,
+				"end": 295,
+				"expression": {
+					"type": "Identifier",
+					"name": "",
+					"start": 277,
+					"end": 279
+				},
+				"value": {
+					"type": "Identifier",
+					"name": "y",
+					"start": 285,
+					"loc": {
+						"start": {
+							"line": 21,
+							"column": 16,
+							"character": 285
+						},
+						"end": {
+							"line": 21,
+							"column": 17,
+							"character": 286
+						}
+					},
+					"end": 286
+				},
+				"error": null,
+				"pending": {
+					"type": "PendingBlock",
+					"start": null,
+					"end": null,
+					"children": [],
+					"skip": true
+				},
+				"then": {
+					"type": "ThenBlock",
+					"start": 287,
+					"end": 267,
+					"children": [],
+					"skip": false
+				},
+				"catch": {
+					"type": "CatchBlock",
+					"start": null,
+					"end": null,
+					"children": [],
+					"skip": true
+				}
+			},
+			{
+				"type": "Text",
+				"start": 295,
+				"end": 297,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "AwaitBlock",
+				"start": 297,
+				"end": 324,
+				"expression": {
+					"type": "Identifier",
+					"name": "",
+					"start": 305,
+					"end": 307
+				},
+				"value": null,
+				"error": {
+					"type": "Identifier",
+					"name": "y",
+					"start": 314,
+					"loc": {
+						"start": {
+							"line": 23,
+							"column": 17,
+							"character": 314
+						},
+						"end": {
+							"line": 23,
+							"column": 18,
+							"character": 315
+						}
+					},
+					"end": 315
+				},
+				"pending": {
+					"type": "PendingBlock",
+					"start": null,
+					"end": null,
+					"children": [],
+					"skip": true
+				},
+				"then": {
+					"type": "ThenBlock",
+					"start": null,
+					"end": null,
+					"children": [],
+					"skip": true
+				},
+				"catch": {
+					"type": "CatchBlock",
+					"start": 316,
+					"end": 295,
+					"children": [],
+					"skip": false
+				}
 			}
 		]
 	}

packages/svelte/tests/parser-legacy/samples/loose-unclosed-tag/input.svelte

@@ -10,6 +10,14 @@
 	<span
 </div>
 
+<div>
+	<Comp.
+</div>
+
+<div>
+	<comp.
+</div>
+
 {#if foo}
 	<div>
 {/if}

packages/svelte/tests/parser-legacy/samples/loose-unclosed-tag/output.json

@@ -2,7 +2,7 @@
 	"html": {
 		"type": "Fragment",
 		"start": 0,
-		"end": 160,
+		"end": 204,
 		"children": [
 			{
 				"type": "Element",
@@ -136,20 +136,82 @@
 				"data": "\n\n"
 			},
 			{
-				"type": "IfBlock",
+				"type": "Element",
 				"start": 74,
+				"end": 94,
+				"name": "div",
+				"attributes": [],
+				"children": [
+					{
+						"type": "Text",
+						"start": 79,
+						"end": 81,
+						"raw": "\n\t",
+						"data": "\n\t"
+					},
+					{
+						"type": "InlineComponent",
+						"start": 81,
+						"end": 88,
+						"name": "Comp.",
+						"attributes": [],
+						"children": []
+					}
+				]
+			},
+			{
+				"type": "Text",
+				"start": 94,
 				"end": 96,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "Element",
+				"start": 96,
+				"end": 116,
+				"name": "div",
+				"attributes": [],
+				"children": [
+					{
+						"type": "Text",
+						"start": 101,
+						"end": 103,
+						"raw": "\n\t",
+						"data": "\n\t"
+					},
+					{
+						"type": "InlineComponent",
+						"start": 103,
+						"end": 110,
+						"name": "comp.",
+						"attributes": [],
+						"children": []
+					}
+				]
+			},
+			{
+				"type": "Text",
+				"start": 116,
+				"end": 118,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "IfBlock",
+				"start": 118,
+				"end": 140,
 				"expression": {
 					"type": "Identifier",
-					"start": 79,
-					"end": 82,
+					"start": 123,
+					"end": 126,
 					"loc": {
 						"start": {
-							"line": 13,
+							"line": 21,
 							"column": 5
 						},
 						"end": {
-							"line": 13,
+							"line": 21,
 							"column": 8
 						}
 					},
@@ -158,15 +220,15 @@
 				"children": [
 					{
 						"type": "Element",
-						"start": 85,
-						"end": 91,
+						"start": 129,
+						"end": 135,
 						"name": "div",
 						"attributes": [],
 						"children": [
 							{
 								"type": "Text",
-								"start": 90,
-								"end": 91,
+								"start": 134,
+								"end": 135,
 								"raw": "\n",
 								"data": "\n"
 							}
@@ -176,26 +238,26 @@
 			},
 			{
 				"type": "Text",
-				"start": 96,
-				"end": 98,
+				"start": 140,
+				"end": 142,
 				"raw": "\n\n",
 				"data": "\n\n"
 			},
 			{
 				"type": "IfBlock",
-				"start": 98,
-				"end": 130,
+				"start": 142,
+				"end": 174,
 				"expression": {
 					"type": "Identifier",
-					"start": 103,
-					"end": 106,
+					"start": 147,
+					"end": 150,
 					"loc": {
 						"start": {
-							"line": 17,
+							"line": 25,
 							"column": 5
 						},
 						"end": {
-							"line": 17,
+							"line": 25,
 							"column": 8
 						}
 					},
@@ -204,31 +266,31 @@
 				"children": [
 					{
 						"type": "InlineComponent",
-						"start": 109,
-						"end": 125,
+						"start": 153,
+						"end": 169,
 						"name": "Comp",
 						"attributes": [
 							{
 								"type": "Attribute",
-								"start": 115,
-								"end": 124,
+								"start": 159,
+								"end": 168,
 								"name": "foo",
 								"value": [
 									{
 										"type": "MustacheTag",
-										"start": 119,
-										"end": 124,
+										"start": 163,
+										"end": 168,
 										"expression": {
 											"type": "Identifier",
-											"start": 120,
-											"end": 123,
+											"start": 164,
+											"end": 167,
 											"loc": {
 												"start": {
-													"line": 18,
+													"line": 26,
 													"column": 12
 												},
 												"end": {
-													"line": 18,
+													"line": 26,
 													"column": 15
 												}
 											},
@@ -244,36 +306,36 @@
 			},
 			{
 				"type": "Text",
-				"start": 130,
-				"end": 132,
+				"start": 174,
+				"end": 176,
 				"raw": "\n\n",
 				"data": "\n\n"
 			},
 			{
 				"type": "Element",
-				"start": 132,
-				"end": 160,
+				"start": 176,
+				"end": 204,
 				"name": "div",
 				"attributes": [],
 				"children": [
 					{
 						"type": "Text",
-						"start": 137,
-						"end": 138,
+						"start": 181,
+						"end": 182,
 						"raw": "\n",
 						"data": "\n"
 					},
 					{
 						"type": "Element",
-						"start": 138,
-						"end": 147,
+						"start": 182,
+						"end": 191,
 						"name": "p",
 						"attributes": [],
 						"children": [
 							{
 								"type": "Text",
-								"start": 141,
-								"end": 143,
+								"start": 185,
+								"end": 187,
 								"raw": "hi",
 								"data": "hi"
 							}
@@ -281,15 +343,15 @@
 					},
 					{
 						"type": "Text",
-						"start": 147,
-						"end": 149,
+						"start": 191,
+						"end": 193,
 						"raw": "\n\n",
 						"data": "\n\n"
 					},
 					{
 						"type": "Element",
-						"start": 149,
-						"end": 160,
+						"start": 193,
+						"end": 204,
 						"name": "open-ended",
 						"attributes": [],
 						"children": []

packages/svelte/tests/parser-modern/samples/loose-invalid-expression/input.svelte

@@ -9,3 +9,15 @@
 
 asd{a.}asd
 {foo[bar.]}
+
+{#if x.}{/if}
+
+{#each array as item (item.)}{/each}
+
+{#each obj. as item}{/each}
+
+{#await x.}{/await}
+
+{#await x. then y}{/await}
+
+{#await x. catch y}{/await}

packages/svelte/tests/parser-modern/samples/loose-invalid-expression/output.json

@@ -2,7 +2,7 @@
 	"css": null,
 	"js": [],
 	"start": 0,
-	"end": 164,
+	"end": 324,
 	"type": "Root",
 	"fragment": {
 		"type": "Fragment",
@@ -247,6 +247,238 @@
 					"end": 163,
 					"name": ""
 				}
+			},
+			{
+				"type": "Text",
+				"start": 164,
+				"end": 166,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "IfBlock",
+				"elseif": false,
+				"start": 166,
+				"end": 179,
+				"test": {
+					"type": "Identifier",
+					"start": 171,
+					"end": 173,
+					"name": ""
+				},
+				"consequent": {
+					"type": "Fragment",
+					"nodes": []
+				},
+				"alternate": null
+			},
+			{
+				"type": "Text",
+				"start": 179,
+				"end": 181,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "EachBlock",
+				"start": 181,
+				"end": 217,
+				"expression": {
+					"type": "Identifier",
+					"start": 188,
+					"end": 193,
+					"loc": {
+						"start": {
+							"line": 15,
+							"column": 7
+						},
+						"end": {
+							"line": 15,
+							"column": 12
+						}
+					},
+					"name": "array"
+				},
+				"body": {
+					"type": "Fragment",
+					"nodes": []
+				},
+				"context": {
+					"type": "Identifier",
+					"name": "item",
+					"start": 197,
+					"loc": {
+						"start": {
+							"line": 15,
+							"column": 16,
+							"character": 197
+						},
+						"end": {
+							"line": 15,
+							"column": 20,
+							"character": 201
+						}
+					},
+					"end": 201
+				},
+				"key": {
+					"type": "Identifier",
+					"start": 203,
+					"end": 208,
+					"name": ""
+				}
+			},
+			{
+				"type": "Text",
+				"start": 217,
+				"end": 219,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "EachBlock",
+				"start": 219,
+				"end": 246,
+				"expression": {
+					"type": "Identifier",
+					"name": "",
+					"start": 226,
+					"end": 230
+				},
+				"body": {
+					"type": "Fragment",
+					"nodes": []
+				},
+				"context": {
+					"type": "Identifier",
+					"name": "item",
+					"start": 234,
+					"loc": {
+						"start": {
+							"line": 17,
+							"column": 15,
+							"character": 234
+						},
+						"end": {
+							"line": 17,
+							"column": 19,
+							"character": 238
+						}
+					},
+					"end": 238
+				}
+			},
+			{
+				"type": "Text",
+				"start": 246,
+				"end": 248,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "AwaitBlock",
+				"start": 248,
+				"end": 267,
+				"expression": {
+					"type": "Identifier",
+					"start": 256,
+					"end": 258,
+					"name": ""
+				},
+				"value": null,
+				"error": null,
+				"pending": {
+					"type": "Fragment",
+					"nodes": []
+				},
+				"then": null,
+				"catch": null
+			},
+			{
+				"type": "Text",
+				"start": 267,
+				"end": 269,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "AwaitBlock",
+				"start": 269,
+				"end": 295,
+				"expression": {
+					"type": "Identifier",
+					"name": "",
+					"start": 277,
+					"end": 279
+				},
+				"value": {
+					"type": "Identifier",
+					"name": "y",
+					"start": 285,
+					"loc": {
+						"start": {
+							"line": 21,
+							"column": 16,
+							"character": 285
+						},
+						"end": {
+							"line": 21,
+							"column": 17,
+							"character": 286
+						}
+					},
+					"end": 286
+				},
+				"error": null,
+				"pending": null,
+				"then": {
+					"type": "Fragment",
+					"nodes": []
+				},
+				"catch": null
+			},
+			{
+				"type": "Text",
+				"start": 295,
+				"end": 297,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "AwaitBlock",
+				"start": 297,
+				"end": 324,
+				"expression": {
+					"type": "Identifier",
+					"name": "",
+					"start": 305,
+					"end": 307
+				},
+				"value": null,
+				"error": {
+					"type": "Identifier",
+					"name": "y",
+					"start": 314,
+					"loc": {
+						"start": {
+							"line": 23,
+							"column": 17,
+							"character": 314
+						},
+						"end": {
+							"line": 23,
+							"column": 18,
+							"character": 315
+						}
+					},
+					"end": 315
+				},
+				"pending": null,
+				"then": null,
+				"catch": {
+					"type": "Fragment",
+					"nodes": []
+				}
 			}
 		]
 	},

packages/svelte/tests/parser-modern/samples/loose-unclosed-tag/input.svelte

@@ -10,6 +10,14 @@
 	<span
 </div>
 
+<div>
+	<Comp.
+</div>
+
+<div>
+	<comp.
+</div>
+
 {#if foo}
 	<div>
 {/if}

packages/svelte/tests/parser-modern/samples/loose-unclosed-tag/output.json

@@ -2,7 +2,7 @@
 	"css": null,
 	"js": [],
 	"start": 0,
-	"end": 160,
+	"end": 204,
 	"type": "Root",
 	"fragment": {
 		"type": "Fragment",
@@ -155,21 +155,95 @@
 				"data": "\n\n"
 			},
 			{
-				"type": "IfBlock",
-				"elseif": false,
+				"type": "RegularElement",
 				"start": 74,
+				"end": 94,
+				"name": "div",
+				"attributes": [],
+				"fragment": {
+					"type": "Fragment",
+					"nodes": [
+						{
+							"type": "Text",
+							"start": 79,
+							"end": 81,
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"type": "Component",
+							"start": 81,
+							"end": 88,
+							"name": "Comp.",
+							"attributes": [],
+							"fragment": {
+								"type": "Fragment",
+								"nodes": []
+							}
+						}
+					]
+				}
+			},
+			{
+				"type": "Text",
+				"start": 94,
 				"end": 96,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "RegularElement",
+				"start": 96,
+				"end": 116,
+				"name": "div",
+				"attributes": [],
+				"fragment": {
+					"type": "Fragment",
+					"nodes": [
+						{
+							"type": "Text",
+							"start": 101,
+							"end": 103,
+							"raw": "\n\t",
+							"data": "\n\t"
+						},
+						{
+							"type": "Component",
+							"start": 103,
+							"end": 110,
+							"name": "comp.",
+							"attributes": [],
+							"fragment": {
+								"type": "Fragment",
+								"nodes": []
+							}
+						}
+					]
+				}
+			},
+			{
+				"type": "Text",
+				"start": 116,
+				"end": 118,
+				"raw": "\n\n",
+				"data": "\n\n"
+			},
+			{
+				"type": "IfBlock",
+				"elseif": false,
+				"start": 118,
+				"end": 140,
 				"test": {
 					"type": "Identifier",
-					"start": 79,
-					"end": 82,
+					"start": 123,
+					"end": 126,
 					"loc": {
 						"start": {
-							"line": 13,
+							"line": 21,
 							"column": 5
 						},
 						"end": {
-							"line": 13,
+							"line": 21,
 							"column": 8
 						}
 					},
@@ -180,15 +254,15 @@
 					"nodes": [
 						{
 							"type": "Text",
-							"start": 83,
-							"end": 85,
+							"start": 127,
+							"end": 129,
 							"raw": "\n\t",
 							"data": "\n\t"
 						},
 						{
 							"type": "RegularElement",
-							"start": 85,
-							"end": 91,
+							"start": 129,
+							"end": 135,
 							"name": "div",
 							"attributes": [],
 							"fragment": {
@@ -196,8 +270,8 @@
 								"nodes": [
 									{
 										"type": "Text",
-										"start": 90,
-										"end": 91,
+										"start": 134,
+										"end": 135,
 										"raw": "\n",
 										"data": "\n"
 									}
@@ -210,27 +284,27 @@
 			},
 			{
 				"type": "Text",
-				"start": 96,
-				"end": 98,
+				"start": 140,
+				"end": 142,
 				"raw": "\n\n",
 				"data": "\n\n"
 			},
 			{
 				"type": "IfBlock",
 				"elseif": false,
-				"start": 98,
-				"end": 130,
+				"start": 142,
+				"end": 174,
 				"test": {
 					"type": "Identifier",
-					"start": 103,
-					"end": 106,
+					"start": 147,
+					"end": 150,
 					"loc": {
 						"start": {
-							"line": 17,
+							"line": 25,
 							"column": 5
 						},
 						"end": {
-							"line": 17,
+							"line": 25,
 							"column": 8
 						}
 					},
@@ -241,37 +315,37 @@
 					"nodes": [
 						{
 							"type": "Text",
-							"start": 107,
-							"end": 109,
+							"start": 151,
+							"end": 153,
 							"raw": "\n\t",
 							"data": "\n\t"
 						},
 						{
 							"type": "Component",
-							"start": 109,
-							"end": 125,
+							"start": 153,
+							"end": 169,
 							"name": "Comp",
 							"attributes": [
 								{
 									"type": "Attribute",
-									"start": 115,
-									"end": 124,
+									"start": 159,
+									"end": 168,
 									"name": "foo",
 									"value": {
 										"type": "ExpressionTag",
-										"start": 119,
-										"end": 124,
+										"start": 163,
+										"end": 168,
 										"expression": {
 											"type": "Identifier",
-											"start": 120,
-											"end": 123,
+											"start": 164,
+											"end": 167,
 											"loc": {
 												"start": {
-													"line": 18,
+													"line": 26,
 													"column": 12
 												},
 												"end": {
-													"line": 18,
+													"line": 26,
 													"column": 15
 												}
 											},
@@ -291,15 +365,15 @@
 			},
 			{
 				"type": "Text",
-				"start": 130,
-				"end": 132,
+				"start": 174,
+				"end": 176,
 				"raw": "\n\n",
 				"data": "\n\n"
 			},
 			{
 				"type": "RegularElement",
-				"start": 132,
-				"end": 160,
+				"start": 176,
+				"end": 204,
 				"name": "div",
 				"attributes": [],
 				"fragment": {
@@ -307,15 +381,15 @@
 					"nodes": [
 						{
 							"type": "Text",
-							"start": 137,
-							"end": 138,
+							"start": 181,
+							"end": 182,
 							"raw": "\n",
 							"data": "\n"
 						},
 						{
 							"type": "RegularElement",
-							"start": 138,
-							"end": 147,
+							"start": 182,
+							"end": 191,
 							"name": "p",
 							"attributes": [],
 							"fragment": {
@@ -323,8 +397,8 @@
 								"nodes": [
 									{
 										"type": "Text",
-										"start": 141,
-										"end": 143,
+										"start": 185,
+										"end": 187,
 										"raw": "hi",
 										"data": "hi"
 									}
@@ -333,15 +407,15 @@
 						},
 						{
 							"type": "Text",
-							"start": 147,
-							"end": 149,
+							"start": 191,
+							"end": 193,
 							"raw": "\n\n",
 							"data": "\n\n"
 						},
 						{
 							"type": "RegularElement",
-							"start": 149,
-							"end": 160,
+							"start": 193,
+							"end": 204,
 							"name": "open-ended",
 							"attributes": [],
 							"fragment": {

packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js

@@ -11,12 +11,15 @@ function normalise_trace_logs(logs) {
 
 		if (typeof log === 'string' && log.includes('%c')) {
 			const split = log.split('%c');
-			normalised.push((split[0].length !== 0 ? split[0] : split[1]).trim());
+			normalised.push({
+				log: (split[0].length !== 0 ? split[0] : split[1]).trim(),
+				highlighted: logs[i + 1] === 'color: CornflowerBlue; font-weight: bold'
+			});
 			i++;
 		} else if (log instanceof Error) {
 			continue;
 		} else {
-			normalised.push(log);
+			normalised.push({ log });
 		}
 	}
 	return normalised;
@@ -28,7 +31,17 @@ export default test({
 	},
 
 	test({ assert, target, logs }) {
-		assert.deepEqual(normalise_trace_logs(logs), ['effect', '$derived', 0, '$state', 0]);
+		// initial log, everything is highlighted
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect', highlighted: false },
+			{ log: '$derived', highlighted: true },
+			{ log: 0 },
+			{ log: '$state', highlighted: true },
+			{ log: 0 },
+			{ log: '$state', highlighted: true },
+			{ log: false }
+		]);
 
 		logs.length = 0;
 
@@ -36,6 +49,49 @@ export default test({
 		button?.click();
 		flushSync();
 
-		assert.deepEqual(normalise_trace_logs(logs), ['effect', '$derived', 2, '$state', 1]);
+		// count changed, derived and state are highlighted, last state is not
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect', highlighted: false },
+			{ log: '$derived', highlighted: true },
+			{ log: 2 },
+			{ log: '$state', highlighted: true },
+			{ log: 1 },
+			{ log: '$state', highlighted: false },
+			{ log: false }
+		]);
+
+		logs.length = 0;
+
+		const input = target.querySelector('input');
+		input?.click();
+		flushSync();
+
+		// checked changed, last state is highlighted, first two are not
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect', highlighted: false },
+			{ log: '$derived', highlighted: false },
+			{ log: 2 },
+			{ log: '$state', highlighted: false },
+			{ log: 1 },
+			{ log: '$state', highlighted: true },
+			{ log: true }
+		]);
+
+		logs.length = 0;
+
+		button?.click();
+		flushSync();
+
+		// count change and derived it's >=4, checked is not in the dependencies anymore
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect', highlighted: false },
+			{ log: '$derived', highlighted: true },
+			{ log: 4 },
+			{ log: '$state', highlighted: true },
+			{ log: 2 }
+		]);
 	}
 });

packages/svelte/tests/runtime-runes/samples/inspect-trace/main.svelte

@@ -2,11 +2,15 @@
 	let count = $state(0);
 	let double = $derived(count * 2);
 
+	let checked = $state(false);
+
 	$effect(() => {
 		$inspect.trace('effect');
 
 		double;
-	})
+		double >= 4 || checked;
+	});
 </script>
 
 <button onclick={() => count++}>{double}</button>
+<input type="checkbox" bind:checked />

packages/svelte/tests/runtime-runes/samples/state-proxy-equality-mismatch/_config.js

@@ -0,0 +1,41 @@
+import { flushSync } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, target, warnings }) {
+		const [btn1, btn2, btn3, btn4, btn5, btn6, clear] = target.querySelectorAll('button');
+
+		flushSync(() => {
+			btn1.click();
+			btn2.click();
+			btn3.click();
+			btn4.click();
+			btn5.click();
+			btn6.click();
+		});
+
+		assert.deepEqual(warnings, [
+			'Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `array.includes(...)` will produce unexpected results',
+			'Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `array.indexOf(...)` will produce unexpected results',
+			'Reactive `$state(...)` proxies and the values they proxy have different identities. Because of this, comparisons with `array.lastIndexOf(...)` will produce unexpected results'
+		]);
+
+		flushSync(() => clear.click());
+		warnings.length = 0;
+
+		flushSync(() => {
+			btn1.click();
+			btn2.click();
+			btn3.click();
+			btn4.click();
+			btn5.click();
+			btn6.click();
+		});
+
+		assert.deepEqual(warnings, []);
+	}
+});

packages/svelte/tests/runtime-runes/samples/state-proxy-equality-mismatch/main.svelte

@@ -0,0 +1,23 @@
+<script>
+	let primitive = 'foo';
+	let object = {};
+
+	let array = $state([primitive, object]);
+</script>
+
+<button onclick={() => array.includes(primitive)}>array.includes(primitive)</button>
+<button onclick={() => array.includes(object)}>array.includes(object)</button>
+
+<hr />
+
+<button onclick={() => array.indexOf(primitive)}>array.indexOf(primitive)</button>
+<button onclick={() => array.indexOf(object)}>array.indexOf(object)</button>
+
+<hr />
+
+<button onclick={() => array.lastIndexOf(primitive)}>array.lastIndexOf(primitive)</button>
+<button onclick={() => array.lastIndexOf(object)}>array.lastIndexOf(object)</button>
+
+<hr />
+
+<button onclick={() => (array.length = 0)}>clear</button>

packages/svelte/tests/runtime-runes/samples/typescript/main.svelte

@@ -8,6 +8,10 @@
 		console.log(this);
 	}
 
+	function foo(): string {
+		return ""!;
+	}
+
 	class Foo<T> {
 		public name: string;
 		x = 'x' as const;
@@ -16,6 +20,8 @@
 		}
 	}
 
+	class MyClass implements Hello {}
+
 	declare const declared_const: number;
 	declare function declared_fn(): void;
 	declare class declared_class {
@@ -24,7 +30,7 @@
 
 	declare module 'foobar' {}
 	namespace SomeNamespace {
-		export type Foo = true
+		export type Foo = true;
 	}
 
 	export function overload(a: boolean): boolean;

packages/svelte/tsconfig.json

@@ -40,5 +40,9 @@
 		"./tests/runtime-browser/test-ssr.ts",
 		"./tests/*/samples/*/_config.js"
 	],
-	"exclude": ["./scripts/process-messages/templates/", "./src/compiler/optimizer/"]
+	"exclude": [
+		"./scripts/process-messages/templates/",
+		"./scripts/_bundle.js",
+		"./src/compiler/optimizer/"
+	]
 }

pnpm-lock.yaml

@@ -84,8 +84,8 @@ importers:
         specifier: ^1.2.1
         version: 1.2.1
       esrap:
-        specifier: ^1.2.3
-        version: 1.2.3
+        specifier: ^1.3.1
+        version: 1.3.1
       is-reference:
         specifier: ^3.0.3
         version: 3.0.3
@@ -1111,8 +1111,8 @@ packages:
     resolution: {integrity: sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==}
     engines: {node: '>=0.10'}
 
-  esrap@1.2.3:
-    resolution: {integrity: sha512-ZlQmCCK+n7SGoqo7DnfKaP1sJZa49P01/dXzmjCASSo04p72w8EksT2NMK8CEX8DhKsfJXANioIw8VyHNsBfvQ==}
+  esrap@1.3.1:
+    resolution: {integrity: sha512-KpAH3+QsDmtOP1KOW04CbD1PgzWsIHjB8tOCk3PCb8xzNGn8XkjI8zl80i09fmXdzQyaS8tcsKCCDzHF7AcowA==}
 
   esrecurse@4.3.0:
     resolution: {integrity: sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==}
@@ -3315,10 +3315,10 @@ snapshots:
     dependencies:
       estraverse: 5.3.0
 
-  esrap@1.2.3:
+  esrap@1.3.1:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
-      '@types/estree': 1.0.6
+      '@typescript-eslint/types': 8.2.0
 
   esrecurse@4.3.0:
     dependencies: