Merge branch 'main' into class-enhancements

Author: dummdidumm

documentation/docs/02-runes/07-$inspect.md

@@ -42,3 +42,20 @@ A convenient way to find the origin of some change is to pass `console.trace` to
 // @errors: 2304
 $inspect(stuff).with(console.trace);
 ```
+
+## $inspect.trace(...)
+
+This rune, added in 5.14, causes the surrounding function to be _traced_ in development. Any time the function re-runs as part of an [effect]($effect) or a [derived]($derived), information will be printed to the console about which pieces of reactive state caused the effect to fire.
+
+```svelte
+<script>
+	import { doSomeWork } from './elsewhere';
+
+	$effect(() => {
+		+++$inspect.trace();+++
+		doSomeWork();
+	});
+</script>
+```
+
+`$inspect.trace` takes an optional first argument which will be used as the label.

documentation/docs/98-reference/.generated/compile-errors.md

@@ -442,6 +442,18 @@ Expected whitespace
 Imports of `svelte/internal/*` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from `svelte/internal/*` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case
 ```
 
+### inspect_trace_generator
+
+```
+`$inspect.trace(...)` cannot be used inside a generator function
+```
+
+### inspect_trace_invalid_placement
+
+```
+`$inspect.trace(...)` must be the first statement of a function body
+```
+
 ### invalid_arguments_usage
 
 ```

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,41 @@
 # 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
+
+- feat: adds $inspect.trace rune ([#14290](https://github.com/sveltejs/svelte/pull/14290))
+
 ## 5.13.0
 
 ### Minor Changes

packages/svelte/messages/compile-errors/script.md

@@ -54,6 +54,14 @@
 
 > Imports of `svelte/internal/*` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from `svelte/internal/*` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case
 
+## inspect_trace_generator
+
+> `$inspect.trace(...)` cannot be used inside a generator function
+
+## inspect_trace_invalid_placement
+
+> `$inspect.trace(...)` must be the first statement of a function body
+
 ## invalid_arguments_usage
 
 > The arguments keyword cannot be used within the template or at the top level of a component

packages/svelte/package.json

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.13.0",
+  "version": "5.14.4",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {
@@ -148,7 +148,7 @@
     "axobject-query": "^4.1.0",
     "clsx": "^2.1.1",
     "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/ambient.d.ts

@@ -371,6 +371,25 @@ declare function $inspect<T extends any[]>(
 	...values: T
 ): { with: (fn: (type: 'init' | 'update', ...values: T) => void) => void };
 
+declare namespace $inspect {
+	/**
+	 * Tracks which reactive state changes caused an effect to re-run. Must be the first
+	 * statement of a function body. Example:
+	 *
+	 * ```svelte
+	 * <script>
+	 *   let count = $state(0);
+	 *
+	 *   $effect(() => {
+	 *     $inspect.trace('my effect');
+	 *
+	 *     count;
+	 *   });
+	 * </script>
+	 */
+	export function trace(name: string): void;
+}
+
 /**
  * Retrieves the `this` reference of the custom element that contains this component. Example:
  *

packages/svelte/src/compiler/errors.js

@@ -206,6 +206,24 @@ export function import_svelte_internal_forbidden(node) {
 	e(node, "import_svelte_internal_forbidden", `Imports of \`svelte/internal/*\` are forbidden. It contains private runtime code which is subject to change without notice. If you're importing from \`svelte/internal/*\` to work around a limitation of Svelte, please open an issue at https://github.com/sveltejs/svelte and explain your use case\nhttps://svelte.dev/e/import_svelte_internal_forbidden`);
 }
 
+/**
+ * `$inspect.trace(...)` cannot be used inside a generator function
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function inspect_trace_generator(node) {
+	e(node, "inspect_trace_generator", `\`$inspect.trace(...)\` cannot be used inside a generator function\nhttps://svelte.dev/e/inspect_trace_generator`);
+}
+
+/**
+ * `$inspect.trace(...)` must be the first statement of a function body
+ * @param {null | number | NodeLike} node
+ * @returns {never}
+ */
+export function inspect_trace_invalid_placement(node) {
+	e(node, "inspect_trace_invalid_placement", `\`$inspect.trace(...)\` must be the first statement of a function body\nhttps://svelte.dev/e/inspect_trace_invalid_placement`);
+}
+
 /**
  * The arguments keyword cannot be used within the template or at the top level of a component
  * @param {null | number | NodeLike} node

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) {