feat: add $trace rune

WIP

WIP

WIP

WIP

WIP

WIP

WIP

WIP

WIP

WIP

WIP

WIP

WIP

WIP

WIP

WIP

WIP

WIP

WIP

WIP

Author: trueadm

packages/svelte/src/ambient.d.ts

@@ -399,3 +399,5 @@ declare function $inspect<T extends any[]>(
  * https://svelte.dev/docs/svelte/$host
  */
 declare function $host<El extends HTMLElement = HTMLElement>(): El;
+
+declare function $trace(name: string): void;

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 '$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/transform-client.js

@@ -17,6 +17,7 @@ import { BindDirective } from './visitors/BindDirective.js';
 import { BlockStatement } from './visitors/BlockStatement.js';
 import { BreakStatement } from './visitors/BreakStatement.js';
 import { CallExpression } from './visitors/CallExpression.js';
+import { NewExpression } from './visitors/NewExpression.js';
 import { ClassBody } from './visitors/ClassBody.js';
 import { Comment } from './visitors/Comment.js';
 import { Component } from './visitors/Component.js';
@@ -91,6 +92,7 @@ const visitors = {
 	BlockStatement,
 	BreakStatement,
 	CallExpression,
+	NewExpression,
 	ClassBody,
 	Comment,
 	Component,
@@ -134,14 +136,16 @@ const visitors = {
 
 /**
  * @param {ComponentAnalysis} analysis
+ * @param {string} source
  * @param {ValidatedCompileOptions} options
  * @returns {ESTree.Program}
  */
-export function client_component(analysis, options) {
+export function client_component(analysis, source, options) {
 	/** @type {ComponentClientTransformState} */
 	const state = {
 		analysis,
 		options,
+		source: source.split('\n'),
 		scope: analysis.module.scope,
 		scopes: analysis.module.scopes,
 		is_instance: false,
@@ -163,6 +167,7 @@ export function client_component(analysis, options) {
 		private_state: new Map(),
 		transform: {},
 		in_constructor: false,
+		trace_dependencies: false,
 
 		// these are set inside the `Fragment` visitor, and cannot be used until then
 		before_init: /** @type {any} */ (null),
@@ -643,20 +648,23 @@ export function client_component(analysis, options) {
 
 /**
  * @param {Analysis} analysis
+ * @param {string} source
  * @param {ValidatedModuleCompileOptions} options
  * @returns {ESTree.Program}
  */
-export function client_module(analysis, options) {
+export function client_module(analysis, source, options) {
 	/** @type {ClientTransformState} */
 	const state = {
 		analysis,
 		options,
+		source: source.split('\n'),
 		scope: analysis.module.scope,
 		scopes: analysis.module.scopes,
 		public_state: new Map(),
 		private_state: new Map(),
 		transform: {},
-		in_constructor: false
+		in_constructor: false,
+		trace_dependencies: false
 	};
 
 	const module = /** @type {ESTree.Program} */ (

packages/svelte/src/compiler/phases/3-transform/client/types.d.ts

@@ -23,6 +23,10 @@ export interface ClientTransformState extends TransformState {
 	 */
 	readonly in_constructor: boolean;
 
+	readonly source: string[];
+
+	readonly trace_dependencies: boolean;
+
 	readonly transform: Record<
 		string,
 		{

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

@@ -351,3 +351,50 @@ export function is_inlinable_expression(node_or_nodes, state) {
 	}
 	return has_expression_tag;
 }
+
+/**
+ * @param {Expression} node
+ * @param {Expression} expression
+ * @param {ClientTransformState} state
+ */
+export function trace(node, expression, state) {
+	const loc = node.loc;
+	const source = state.source;
+	let code = '';
+
+	if (loc) {
+		const start = loc.start;
+		const end = loc.end;
+
+		if (start.line === end.line) {
+			code = source[start.line - 1].slice(start.column, end.column);
+		} else {
+			for (let i = start.line; i < end.line + 1; i++) {
+				const loc = source[i - 1];
+
+				if (i === start.line) {
+					code += loc.slice(start.column) + '\n';
+				} else if (i === end.line) {
+					code += loc.slice(0, end.column);
+				} else {
+					code += loc + '\n';
+				}
+			}
+		}
+	} else if (node.start !== undefined && node.end !== undefined) {
+		code = source.join('\n').slice(node.start, node.end);
+	} else {
+		return expression;
+	}
+
+	return b.call(
+		'$.trace',
+		b.thunk(expression),
+		b.literal(code),
+		node.type === 'CallExpression' ||
+			node.type === 'MemberExpression' ||
+			node.type === 'NewExpression'
+			? b.literal(true)
+			: undefined
+	);
+}

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

@@ -1,12 +1,36 @@
-/** @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(
+					'$.log_trace',
+					b.thunk(
+						b.block(
+							node.body.map(
+								(n) =>
+									/** @type {Statement} */ (
+										context.visit(n, { ...context.state, trace_dependencies: true })
+									)
+							)
+						)
+					),
+					b.literal(tracing)
+				)
+			)
+		]);
+	}
+
 	context.next();
 }

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

@@ -4,6 +4,7 @@ import { dev, is_ignored } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
 import { get_rune } from '../../../scope.js';
 import { transform_inspect_rune } from '../../utils.js';
+import { trace } from '../utils.js';
 
 /**
  * @param {CallExpression} node
@@ -33,6 +34,9 @@ export function CallExpression(node, context) {
 		case '$inspect':
 		case '$inspect().with':
 			return transform_inspect_rune(node, context);
+
+		case '$trace':
+			return b.empty;
 	}
 
 	if (
@@ -58,5 +62,17 @@ export function CallExpression(node, context) {
 		);
 	}
 
+	if (dev) {
+		return trace(
+			node,
+			{
+				...node,
+				callee: /** @type {Expression} */ (context.visit(node.callee)),
+				arguments: node.arguments.map((arg) => /** @type {Expression} */ (context.visit(arg)))
+			},
+			context.state
+		);
+	}
+
 	context.next();
 }

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

@@ -2,14 +2,16 @@
 /** @import { Context } from '../types' */
 import is_reference from 'is-reference';
 import * as b from '../../../../utils/builders.js';
-import { build_getter } from '../utils.js';
+import { build_getter, trace } from '../utils.js';
+import { dev } from '../../../../state.js';
 
 /**
  * @param {Identifier} node
  * @param {Context} context
  */
 export function Identifier(node, context) {
 	const parent = /** @type {Node} */ (context.path.at(-1));
+	let transformed;
 
 	if (is_reference(node, parent)) {
 		if (node.name === '$$props') {
@@ -32,10 +34,18 @@ export function Identifier(node, context) {
 				grand_parent?.type !== 'AssignmentExpression' &&
 				grand_parent?.type !== 'UpdateExpression'
 			) {
-				return b.id('$$props');
+				transformed = b.id('$$props');
 			}
 		}
 
-		return build_getter(node, context.state);
+		if (!transformed) {
+			transformed = build_getter(node, context.state);
+		}
+	}
+
+	if (transformed && transformed !== node && dev) {
+		return trace(node, transformed, context.state);
 	}
+
+	return transformed;
 }

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

@@ -1,19 +1,46 @@
-/** @import { MemberExpression } from 'estree' */
+/** @import { MemberExpression, Expression, Super, PrivateIdentifier } from 'estree' */
 /** @import { Context } from '../types' */
+import { dev } from '../../../../state.js';
 import * as b from '../../../../utils/builders.js';
+import { trace } from '../utils.js';
 
 /**
  * @param {MemberExpression} node
  * @param {Context} context
  */
 export function MemberExpression(node, context) {
+	let transformed;
 	// rewrite `this.#foo` as `this.#foo.v` inside a constructor
 	if (node.property.type === 'PrivateIdentifier') {
 		const field = context.state.private_state.get(node.property.name);
 		if (field) {
-			return context.state.in_constructor ? b.member(node, 'v') : b.call('$.get', node);
+			transformed = context.state.in_constructor ? b.member(node, 'v') : b.call('$.get', node);
 		}
 	}
 
+	const parent = context.path.at(-1);
+
+	if (
+		dev &&
+		// Bail out of tracing members if they're used as calees to avoid context issues
+		(parent?.type !== 'CallExpression' || parent.callee !== node) &&
+		parent?.type !== 'BindDirective' &&
+		parent?.type !== 'AssignmentExpression' &&
+		parent?.type !== 'UpdateExpression' &&
+		parent?.type !== 'Component'
+	) {
+		return trace(
+			node,
+			transformed || {
+				...node,
+				object: /** @type {Expression | Super} */ (context.visit(node.object)),
+				property: /** @type {Expression | PrivateIdentifier} */ (context.visit(node.property))
+			},
+			context.state
+		);
+	} else if (transformed) {
+		return transformed;
+	}
+
 	context.next();
 }

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

@@ -0,0 +1,24 @@
+/** @import { NewExpression, Expression } from 'estree' */
+/** @import { Context } from '../types' */
+import { dev } from '../../../../state.js';
+import { trace } from '../utils.js';
+
+/**
+ * @param {NewExpression} node
+ * @param {Context} context
+ */
+export function NewExpression(node, context) {
+	if (dev) {
+		return trace(
+			node,
+			{
+				...node,
+				callee: /** @type {Expression} */ (context.visit(node.callee)),
+				arguments: node.arguments.map((arg) => /** @type {Expression} */ (context.visit(arg)))
+			},
+			context.state
+		);
+	}
+
+	context.next();
+}

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

@@ -28,7 +28,8 @@ export function VariableDeclaration(node, context) {
 				rune === '$effect.root' ||
 				rune === '$inspect' ||
 				rune === '$state.snapshot' ||
-				rune === '$host'
+				rune === '$host' ||
+				rune === '$trace'
 			) {
 				if (init != null && is_hoisted_function(init)) {
 					context.state.hoisted.push(

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

@@ -30,7 +30,7 @@ export function transform_component(analysis, source, options) {
 	const program =
 		options.generate === 'server'
 			? server_component(analysis, options)
-			: client_component(analysis, options);
+			: client_component(analysis, source, options);
 
 	const js_source_name = get_source_name(options.filename, options.outputFilename, 'input.svelte');
 	const js = print(program, {
@@ -79,7 +79,7 @@ export function transform_module(analysis, source, options) {
 	const program =
 		options.generate === 'server'
 			? server_module(analysis, options)
-			: client_module(analysis, options);
+			: client_module(analysis, source, options);
 
 	const basename = options.filename.split(/[/\\]/).at(-1);
 	if (program.body.length > 0) {

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 === '$trace') {
+		return b.empty;
+	}
+
 	context.next();
 }