feat: add $inspect.trace rune

packages/svelte/src/ambient.d.ts

@@ -379,6 +379,10 @@ declare function $inspect<T extends any[]>(
 	...values: T
 ): { with: (fn: (type: 'init' | 'update', ...values: T) => void) => void };
 
+declare namespace $inspect {
+	export function trace(name: string): void;
+}
+
 /**
  * Retrieves the `this` reference of the custom element that contains this component. Example:
  *

packages/svelte/src/compiler/phases/2-analyze/visitors/CallExpression.js

@@ -5,6 +5,7 @@ import { get_rune } from '../../scope.js';
 import * as e from '../../../errors.js';
 import { get_parent, unwrap_optional } from '../../../utils/ast.js';
 import { is_pure, is_safe_identifier } from './shared/utils.js';
+import { dev } from '../../../state.js';
 
 /**
  * @param {CallExpression} node
@@ -135,6 +136,28 @@ export function CallExpression(node, context) {
 
 			break;
 
+		case '$inspect.trace':
+			if (node.arguments.length !== 1) {
+				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');
+			}
+			if (node.arguments[0].type !== 'Literal' || typeof node.arguments[0].value !== 'string') {
+				throw new Error('TODO: $track requires a string argument');
+			}
+			if (parent.type !== 'ExpressionStatement' || context.path.at(-2)?.type !== 'BlockStatement') {
+				throw new Error('TODO: $track must be inside a block statement');
+			}
+
+			if (context.state.scope.tracing) {
+				throw new Error('TODO: $track must only be used once within the same block statement');
+			}
+
+			if (dev) {
+				// TODO should we validate if tracing is already enabled in this or a parent scope?
+				context.state.scope.tracing = node.arguments[0].value;
+			}
+
+			break;
+
 		case '$state.snapshot':
 			if (node.arguments.length !== 1) {
 				e.rune_invalid_arguments_length(node, rune, 'exactly one argument');

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

@@ -1,12 +1,27 @@
-/** @import { BlockStatement } from 'estree' */
+/** @import { BlockStatement, Statement } from 'estree' */
 /** @import { ComponentContext } from '../types' */
 import { add_state_transformers } from './shared/declarations.js';
+import * as b from '../../../../utils/builders.js';
 
 /**
  * @param {BlockStatement} node
  * @param {ComponentContext} context
  */
 export function BlockStatement(node, context) {
 	add_state_transformers(context);
+	const tracing = context.state.scope.tracing;
+
+	if (tracing !== null) {
+		return b.block([
+			b.return(
+				b.call(
+					'$.trace',
+					b.thunk(b.block(node.body.map((n) => /** @type {Statement} */ (context.visit(n))))),
+					b.literal(tracing)
+				)
+			)
+		]);
+	}
+
 	context.next();
 }

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

@@ -33,6 +33,9 @@ export function CallExpression(node, context) {
 		case '$inspect':
 		case '$inspect().with':
 			return transform_inspect_rune(node, context);
+
+		case '$inspect.trace':
+			return b.empty;
 	}
 
 	if (

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

@@ -1,4 +1,4 @@
-/** @import { MemberExpression } from 'estree' */
+/** @import { MemberExpression, Expression, Super, PrivateIdentifier } from 'estree' */
 /** @import { Context } from '../types' */
 import * as b from '../../../../utils/builders.js';
 

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

@@ -27,6 +27,7 @@ export function VariableDeclaration(node, context) {
 				rune === '$effect.tracking' ||
 				rune === '$effect.root' ||
 				rune === '$inspect' ||
+				rune === '$inspect.trace' ||
 				rune === '$state.snapshot' ||
 				rune === '$host'
 			) {

packages/svelte/src/compiler/phases/3-transform/server/visitors/CallExpression.js

@@ -37,5 +37,9 @@ export function CallExpression(node, context) {
 		return transform_inspect_rune(node, context);
 	}
 
+	if (rune === '$inspect.trace') {
+		return b.empty;
+	}
+
 	context.next();
 }

packages/svelte/src/compiler/phases/scope.js

@@ -58,6 +58,12 @@ export class Scope {
 	 */
 	function_depth = 0;
 
+	/**
+	 * If tracing of reactive dependencies is enabled for this scope
+	 * @type {null | string}
+	 */
+	tracing = null;
+
 	/**
 	 *
 	 * @param {ScopeRoot} root

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

@@ -0,0 +1,172 @@
+/** @import { Derived, Reaction, Signal, Value } from '#client' */
+import { UNINITIALIZED } from '../../../constants.js';
+import { snapshot } from '../../shared/clone.js';
+import { define_property } from '../../shared/utils.js';
+import { DERIVED, STATE_SYMBOL } from '../constants.js';
+import { active_reaction, captured_signals, set_captured_signals, untrack } from '../runtime.js';
+
+/** @type { any } */
+export let tracing_expressions = null;
+
+/**
+ * @param { Value } signal
+ * @param { { read: Error[] } } [entry]
+ */
+function log_entry(signal, entry) {
+	const debug = signal.debug;
+	const value = signal.v;
+
+	if (value === UNINITIALIZED) {
+		return;
+	}
+
+	if (debug) {
+		var previous_captured_signals = captured_signals;
+		var captured = new Set();
+		set_captured_signals(captured);
+		try {
+			untrack(() => {
+				debug();
+			});
+		} finally {
+			set_captured_signals(previous_captured_signals);
+		}
+		if (captured.size > 0) {
+			for (const dep of captured) {
+				log_entry(dep);
+			}
+			return;
+		}
+	}
+
+	const type = (signal.f & DERIVED) !== 0 ? '$derived' : '$state';
+	const current_reaction = /** @type {Reaction} */ (active_reaction);
+	const status =
+		signal.version > current_reaction.version || current_reaction.version === 0 ? 'dirty' : 'clean';
+
+	// eslint-disable-next-line no-console
+	console.groupCollapsed(
+		`%c${type}`,
+		status !== 'clean'
+			? 'color: CornflowerBlue; font-weight: bold'
+			: 'color: grey; font-weight: bold',
+		typeof value === 'object' && STATE_SYMBOL in value ? snapshot(value, true) : value
+	);
+
+	if (type === '$derived') {
+		const deps = new Set(/** @type {Derived} */ (signal).deps);
+		for (const dep of deps) {
+			log_entry(dep);
+		}
+	}
+
+	if (signal.created) {
+		// eslint-disable-next-line no-console
+		console.log(signal.created);
+	}
+
+	if (signal.updated) {
+		// eslint-disable-next-line no-console
+		console.log(signal.updated);
+	}
+
+	const read = entry?.read;
+
+	if (read && read.length > 0) {
+		for (var stack of read) {
+			// eslint-disable-next-line no-console
+			console.log(stack);
+		}
+	}
+
+	// eslint-disable-next-line no-console
+	console.groupEnd();
+}
+
+/**
+ * @template T
+ * @param {() => T} fn
+ * @param {string} label
+ */
+export function trace(fn, label) {
+	var previously_tracing_expressions = tracing_expressions;
+	try {
+		tracing_expressions = { entries: new Map(), reaction: active_reaction };
+
+		var start = performance.now();
+		var value = fn();
+		var time = (performance.now() - start).toFixed(2);
+
+		if (tracing_expressions.entries.size === 0) {
+			// eslint-disable-next-line no-console
+			console.log(`${label} %cno reactive dependencies (${time}ms)`, 'color: grey');
+		} else {
+			// eslint-disable-next-line no-console
+			console.group(`${label} %c(${time}ms)`, 'color: grey');
+
+			var entries = tracing_expressions.entries;
+
+			tracing_expressions = null;
+
+			for (const [signal, entry] of entries) {
+				log_entry(signal, entry);
+			}
+			// eslint-disable-next-line no-console
+			console.groupEnd();
+		}
+
+		if (previously_tracing_expressions !== null) {
+			for (const [signal, entry] of tracing_expressions.entries) {
+				var prev_entry = previously_tracing_expressions.get(signal);
+
+				if (prev_entry === undefined) {
+					previously_tracing_expressions.set(signal, entry);
+				} else {
+					prev_entry.read.push(...entry.read);
+				}
+			}
+		}
+
+		return value;
+	} finally {
+		tracing_expressions = previously_tracing_expressions;
+	}
+}
+
+/**
+ * @param {string} label
+ */
+export function get_stack(label) {
+	let error = Error();
+	const stack = error.stack;
+
+	if (stack) {
+		const lines = stack.split('\n');
+		const new_lines = ['\n'];
+
+		for (let i = 0; i < lines.length; i++) {
+			const line = lines[i];
+			if (line.includes('validate_each_keys')) {
+				return null;
+			}
+			if (line.includes('svelte/src/internal') || !line.includes('.svelte')) {
+				continue;
+			}
+			new_lines.push(line);
+		}
+
+		if (new_lines.length === 1) {
+			return null;
+		}
+
+		define_property(error, 'stack', {
+			value: new_lines.join('\n')
+		});
+
+		define_property(error, 'name', {
+			// 'Error' suffix is required for stack traces to be rendered properly
+			value: `${label}Error`
+		});
+	}
+	return error;
+}