feat: add source name logging to $inspect.trace (#16060)

* init

* improve symbol logging

* doh

* remove proxy path name when reassigned to a source

* try this

* fix

* oops

* fix

* "unown" proxy when in another source declaration

* fix

* tag proxy version

* proxy bindable props

* tag iterables used in destructuring

* add changeset, fix failing tests

* add comments, minor tweak

* lint

* somehow forgot to add support for class fields

* more class fields

* tag_source -> tag, since it applies to deriveds as well

* private class fields

* this condition is impossible

* explicit type narrowing lets us avoid coercion

* simplify

* unused

* tweak

* oops, never meant to commit that

* minor tweaks

* fix private field tagging, only get `declaration` once

* fix state declarations in constructors

* fix

* tag `svelte/reactivity`, `svelte/motion` sources in DEV

* try fixing lint

* fix intellisense formatting

* actually fix lint

* replace tag_if_necessary with conditional tagging

* avoid [[object Object]] in labels

* remove PROXY_REMOVE_PATH

* simplify a bit

* simplify

* tweak

* tweak implementation

* tweak implementation

* tweak implementation

* hoist

* tweak

* fix

* WIP (reduce number of with_parent calls, move towards possibility of combining tag and tag_proxy)

* DRY out

* tweak labels

* remove PROXY_REMOVE_PATH (#16126)

* remove PROXY_REMOVE_PATH

* simplify a bit

* simplify

* tweak

* tweak implementation

* tweak implementation

* tweak implementation

* hoist

* tweak

* fix

* WIP (reduce number of with_parent calls, move towards possibility of combining tag and tag_proxy)

* DRY out

* come on this was just lazy

* fix tests

---------

Co-authored-by: Rich Harris <[email protected]>

Author: Ocean-OS

.changeset/big-teachers-agree.md

@@ -0,0 +1,5 @@
+---
+'svelte': minor
+---
+
+feat: add source name logging to `$inspect.trace`

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

@@ -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/ClassBody.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/VariableDeclaration.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));
@@ -176,8 +197,13 @@ export function VariableDeclaration(node, context) {
 				if (declarator.id.type === 'Identifier') {
 					let expression = /** @type {Expression} */ (context.visit(value));
 					if (rune === '$derived') expression = b.thunk(expression);
-
-					declarations.push(b.declarator(declarator.id, b.call('$.derived', expression)));
+					const call = b.call('$.derived', expression);
+					declarations.push(
+						b.declarator(
+							declarator.id,
+							dev ? b.call('$.tag', call, b.literal(declarator.id.name)) : call
+						)
+					);
 				} else {
 					const init = /** @type {CallExpression} */ (declarator.init);
 
@@ -189,8 +215,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);
@@ -200,12 +228,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/internal/client/constants.js

@@ -25,3 +25,4 @@ export const EFFECT_IS_UPDATING = 1 << 21;
 export const STATE_SYMBOL = Symbol('$state');
 export const LEGACY_PROPS = Symbol('legacy props');
 export const LOADING_ATTR_SYMBOL = Symbol('');
+export const PROXY_PATH_SYMBOL = Symbol('proxy path');

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

@@ -2,7 +2,7 @@
 import { UNINITIALIZED } from '../../../constants.js';
 import { snapshot } from '../../shared/clone.js';
 import { define_property } from '../../shared/utils.js';
-import { DERIVED, STATE_SYMBOL } from '#client/constants';
+import { DERIVED, PROXY_PATH_SYMBOL, STATE_SYMBOL } from '#client/constants';
 import { effect_tracking } from '../reactivity/effects.js';
 import { active_reaction, captured_signals, set_captured_signals, untrack } from '../runtime.js';
 
@@ -43,11 +43,15 @@ function log_entry(signal, entry) {
 	const type = (signal.f & DERIVED) !== 0 ? '$derived' : '$state';
 	const current_reaction = /** @type {Reaction} */ (active_reaction);
 	const dirty = signal.wv > current_reaction.wv || current_reaction.wv === 0;
+	const style = dirty
+		? 'color: CornflowerBlue; font-weight: bold'
+		: 'color: grey; font-weight: normal';
 
 	// eslint-disable-next-line no-console
 	console.groupCollapsed(
-		`%c${type}`,
-		dirty ? 'color: CornflowerBlue; font-weight: bold' : 'color: grey; font-weight: bold',
+		signal.label ? `%c${type}%c ${signal.label}` : `%c${type}%c`,
+		style,
+		dirty ? 'font-weight: normal' : style,
 		typeof value === 'object' && value !== null && STATE_SYMBOL in value
 			? snapshot(value, true)
 			: value
@@ -177,3 +181,34 @@ export function get_stack(label) {
 	}
 	return error;
 }
+
+/**
+ * @param {Value} source
+ * @param {string} label
+ */
+export function tag(source, label) {
+	source.label = label;
+	tag_proxy(source.v, label);
+
+	return source;
+}
+
+/**
+ * @param {unknown} value
+ * @param {string} label
+ */
+export function tag_proxy(value, label) {
+	// @ts-expect-error
+	value?.[PROXY_PATH_SYMBOL]?.(label);
+	return value;
+}
+
+/**
+ * @param {unknown} value
+ */
+export function label(value) {
+	if (typeof value === 'symbol') return `Symbol(${value.description})`;
+	if (typeof value === 'function') return '<function>';
+	if (typeof value === 'object' && value) return '<object>';
+	return String(value);
+}

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

@@ -7,7 +7,7 @@ export { add_locations } from './dev/elements.js';
 export { hmr } from './dev/hmr.js';
 export { create_ownership_validator } from './dev/ownership.js';
 export { check_target, legacy_api } from './dev/legacy.js';
-export { trace } from './dev/tracing.js';
+export { trace, tag, tag_proxy } from './dev/tracing.js';
 export { inspect } from './dev/inspect.js';
 export { validate_snippet_args } from './dev/validation.js';
 export { await_block as await } from './dom/blocks/await.js';