merge main

Author: Rich-Harris

.changeset/flat-points-kick.md

@@ -20,7 +20,7 @@ Unlike other frameworks you may have encountered, there is no API for interactin
 
 If `$state` is used with an array or a simple object, the result is a deeply reactive _state proxy_. [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) allow Svelte to run code when you read or write properties, including via methods like `array.push(...)`, triggering granular updates.
 
-State is proxified recursively until Svelte finds something other than an array or simple object (like a class). In a case like this...
+State is proxified recursively until Svelte finds something other than an array or simple object (like a class or an object created with `Object.create`). In a case like this...
 
 ```js
 let todos = $state([

documentation/docs/02-runes/02-$state.md

@@ -1,5 +1,25 @@
 # svelte
 
+## 5.34.0
+
+### Minor Changes
+
+- feat: add source name logging to `$inspect.trace` ([#16060](https://github.com/sveltejs/svelte/pull/16060))
+
+### Patch Changes
+
+- fix: add `command` and `commandfor` to `HTMLButtonAttributes` ([#16117](https://github.com/sveltejs/svelte/pull/16117))
+
+- fix: better `$inspect.trace()` output ([#16131](https://github.com/sveltejs/svelte/pull/16131))
+
+- fix: properly hydrate dynamic css props components and remove element removal ([#16118](https://github.com/sveltejs/svelte/pull/16118))
+
+## 5.33.19
+
+### Patch Changes
+
+- fix: reset `is_flushing` if `flushSync` is called and there's no scheduled effect ([#16119](https://github.com/sveltejs/svelte/pull/16119))
+
 ## 5.33.18
 
 ### Patch Changes

packages/svelte/CHANGELOG.md

@@ -926,6 +926,17 @@ export interface HTMLButtonAttributes extends HTMLAttributes<HTMLButtonElement>
 	value?: string | string[] | number | undefined | null;
 	popovertarget?: string | undefined | null;
 	popovertargetaction?: 'toggle' | 'show' | 'hide' | undefined | null;
+	command?:
+		| 'show-modal'
+		| 'close'
+		| 'request-close'
+		| 'show-popover'
+		| 'hide-popover'
+		| 'toggle-popover'
+		| (string & {})
+		| undefined
+		| null;
+	commandfor?: string | undefined | null;
 }
 
 export interface HTMLCanvasAttributes extends HTMLAttributes<HTMLCanvasElement> {

packages/svelte/elements.d.ts

@@ -2,7 +2,7 @@
   "name": "svelte",
   "description": "Cybernetically enhanced web apps",
   "license": "MIT",
-  "version": "5.33.18",
+  "version": "5.34.0",
   "type": "module",
   "types": "./types/index.d.ts",
   "engines": {

packages/svelte/package.json

@@ -67,11 +67,20 @@ function build_assignment(operator, left, right, context) {
 						in_constructor: rune !== '$derived' && rune !== '$derived.by'
 					};
 
-					return b.assignment(
-						operator,
-						b.member(b.this, field.key),
-						/** @type {Expression} */ (context.visit(right, child_state))
-					);
+					let value = /** @type {Expression} */ (context.visit(right, child_state));
+
+					if (dev) {
+						const declaration = context.path.findLast(
+							(parent) => parent.type === 'ClassDeclaration' || parent.type === 'ClassExpression'
+						);
+						value = b.call(
+							'$.tag',
+							value,
+							b.literal(`${declaration?.id?.name ?? '[class]'}.${name}`)
+						);
+					}
+
+					return b.assignment(operator, b.member(b.this, field.key), value);
 				}
 			}
 

packages/svelte/src/compiler/phases/3-transform/client/visitors/AssignmentExpression.js

@@ -1,7 +1,9 @@
-/** @import { CallExpression, ClassBody, MethodDefinition, PropertyDefinition, StaticBlock } from 'estree' */
+/** @import { CallExpression, ClassBody, ClassDeclaration, ClassExpression, MethodDefinition, PropertyDefinition, StaticBlock } from 'estree' */
 /** @import { StateField } from '#compiler' */
 /** @import { Context } from '../types' */
 import * as b from '#compiler/builders';
+import { dev } from '../../../../state.js';
+import { get_parent } from '../../../../utils/ast.js';
 import { get_name } from '../../../nodes.js';
 
 /**
@@ -50,6 +52,10 @@ export function ClassBody(node, context) {
 		}
 	}
 
+	const declaration = /** @type {ClassDeclaration | ClassExpression} */ (
+		get_parent(context.path, -1)
+	);
+
 	// Replace parts of the class body
 	for (const definition of node.body) {
 		if (definition.type !== 'PropertyDefinition') {
@@ -68,17 +74,26 @@ export function ClassBody(node, context) {
 		}
 
 		if (name[0] === '#') {
-			body.push(/** @type {PropertyDefinition} */ (context.visit(definition, child_state)));
+			let value = definition.value
+				? /** @type {CallExpression} */ (context.visit(definition.value, child_state))
+				: undefined;
+
+			if (dev) {
+				value = b.call('$.tag', value, b.literal(`${declaration.id?.name ?? '[class]'}.${name}`));
+			}
+
+			body.push(b.prop_def(definition.key, value));
 		} else if (field.node === definition) {
-			const member = b.member(b.this, field.key);
+			let call = /** @type {CallExpression} */ (context.visit(field.value, child_state));
 
+			if (dev) {
+				call = b.call('$.tag', call, b.literal(`${declaration.id?.name ?? '[class]'}.${name}`));
+			}
+			const member = b.member(b.this, field.key);
 			const should_proxy = field.type === '$state' && true; // TODO
 
 			body.push(
-				b.prop_def(
-					field.key,
-					/** @type {CallExpression} */ (context.visit(field.value, child_state))
-				),
+				b.prop_def(field.key, call),
 
 				b.method('get', definition.key, [], [b.return(b.call('$.get', member))]),
 

packages/svelte/src/compiler/phases/3-transform/client/visitors/ClassBody.js

@@ -1,32 +1,19 @@
-/** @import { Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
-import * as b from '#compiler/builders';
+import { regex_is_valid_identifier } from '../../../patterns.js';
 import { build_component } from './shared/component.js';
 
 /**
  * @param {AST.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 = build_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 = build_component(node, node.name, context);
+	const component = build_component(
+		node,
+		// if it's not dynamic we will just use the node name, if it is dynamic we will use the node name
+		// only if it's a valid identifier, otherwise we will use a default name
+		!node.metadata.dynamic || regex_is_valid_identifier.test(node.name) ? node.name : '$$component',
+		context
+	);
 	context.state.init.push(component);
 }

packages/svelte/src/compiler/phases/3-transform/client/visitors/Component.js

@@ -90,6 +90,10 @@ export function VariableDeclaration(node, context) {
 								should_proxy(initial, context.state.scope)
 							) {
 								initial = b.call('$.proxy', initial);
+
+								if (dev) {
+									initial = b.call('$.tag_proxy', initial, b.literal(id.name));
+								}
 							}
 
 							if (is_prop_source(binding, context.state)) {
@@ -128,12 +132,25 @@ 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)) {
+					const is_state = is_state_source(binding, context.state.analysis);
+					const is_proxy = should_proxy(value, context.state.scope);
+
+					if (rune === '$state' && is_proxy) {
 						value = b.call('$.proxy', value);
+
+						if (dev && !is_state) {
+							value = b.call('$.tag_proxy', value, b.literal(id.name));
+						}
 					}
-					if (is_state_source(binding, context.state.analysis)) {
+
+					if (is_state) {
 						value = b.call('$.state', value);
+
+						if (dev) {
+							value = b.call('$.tag', value, b.literal(id.name));
+						}
 					}
+
 					return value;
 				};
 
@@ -154,7 +171,11 @@ export function VariableDeclaration(node, context) {
 							context.state.transform[id.name] = { read: get_value };
 
 							const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
-							return b.declarator(id, b.call('$.derived', expression));
+							const call = b.call('$.derived', expression);
+							return b.declarator(
+								id,
+								dev ? b.call('$.tag', call, b.literal('[$state iterable]')) : call
+							);
 						}),
 						...paths.map((path) => {
 							const value = /** @type {Expression} */ (context.visit(path.expression));
@@ -203,7 +224,10 @@ export function VariableDeclaration(node, context) {
 						let expression = /** @type {Expression} */ (context.visit(value));
 						if (rune === '$derived') expression = b.thunk(expression);
 
-						declarations.push(b.declarator(declarator.id, b.call('$.derived', expression)));
+						let call = b.call('$.derived', expression);
+						if (dev) call = b.call('$.tag', call, b.literal(declarator.id.name));
+
+						declarations.push(b.declarator(declarator.id, call));
 					}
 				} else {
 					const init = /** @type {CallExpression} */ (declarator.init);
@@ -216,8 +240,10 @@ export function VariableDeclaration(node, context) {
 
 						let expression = /** @type {Expression} */ (context.visit(value));
 						if (rune === '$derived') expression = b.thunk(expression);
-
-						declarations.push(b.declarator(id, b.call('$.derived', expression)));
+						const call = b.call('$.derived', expression);
+						declarations.push(
+							b.declarator(id, dev ? b.call('$.tag', call, b.literal('[$derived iterable]')) : call)
+						);
 					}
 
 					const { inserts, paths } = extract_paths(declarator.id, rhs);
@@ -227,12 +253,23 @@ export function VariableDeclaration(node, context) {
 						context.state.transform[id.name] = { read: get_value };
 
 						const expression = /** @type {Expression} */ (context.visit(b.thunk(value)));
-						declarations.push(b.declarator(id, b.call('$.derived', expression)));
+						const call = b.call('$.derived', expression);
+						declarations.push(
+							b.declarator(id, dev ? b.call('$.tag', call, b.literal('[$derived iterable]')) : call)
+						);
 					}
 
 					for (const path of paths) {
 						const expression = /** @type {Expression} */ (context.visit(path.expression));
-						declarations.push(b.declarator(path.node, b.call('$.derived', b.thunk(expression))));
+						const call = b.call('$.derived', b.thunk(expression));
+						declarations.push(
+							b.declarator(
+								path.node,
+								dev
+									? b.call('$.tag', call, b.literal(/** @type {Identifier} */ (path.node).name))
+									: call
+							)
+						);
 					}
 				}
 

packages/svelte/src/compiler/phases/3-transform/client/visitors/VariableDeclaration.js

@@ -14,10 +14,13 @@ import { create_derived } from '../../utils.js';
  * @param {AST.Component | AST.SvelteComponent | AST.SvelteSelf} node
  * @param {string} component_name
  * @param {ComponentContext} context
- * @param {Expression} anchor
  * @returns {Statement}
  */
-export function build_component(node, component_name, context, anchor = context.state.node) {
+export function build_component(node, component_name, context) {
+	/**
+	 * @type {Expression}
+	 */
+	const anchor = context.state.node;
 	/** @type {Array<Property[] | Expression>} */
 	const props_and_spreads = [];
 	/** @type {Array<() => void>} */
@@ -435,7 +438,7 @@ export function build_component(node, component_name, context, anchor = context.
 			// 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'
+			node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic)
 				? component_name
 				: /** @type {Expression} */ (context.visit(b.member_id(component_name))),
 			node_id,
@@ -458,14 +461,18 @@ export function build_component(node, component_name, context, anchor = context.
 		)
 	];
 
-	if (node.type === 'SvelteComponent') {
+	if (node.type === 'SvelteComponent' || (node.type === 'Component' && node.metadata.dynamic)) {
 		const prev = fn;
 
 		fn = (node_id) => {
 			return b.call(
 				'$.component',
 				node_id,
-				b.thunk(/** @type {Expression} */ (context.visit(node.expression))),
+				b.thunk(
+					/** @type {Expression} */ (
+						context.visit(node.type === 'Component' ? b.member_id(node.name) : node.expression)
+					)
+				),
 				b.arrow(
 					[b.id('$$anchor'), b.id(component_name)],
 					b.block([...binding_initializers, b.stmt(prev(b.id('$$anchor')))])