WIP

Author: trueadm

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

@@ -357,7 +357,7 @@ export function is_inlinable_expression(node_or_nodes, state) {
  * @param {Expression} expression
  * @param {ClientTransformState} state
  */
-export function trace_expression(node, expression, state) {
+export function trace(node, expression, state) {
 	const loc = node.loc;
 	if (!loc) {
 		return expression;
@@ -383,5 +383,10 @@ export function trace_expression(node, expression, state) {
 		}
 	}
 
-	return b.call('$.trace_expression', b.thunk(expression), b.literal(code));
+	return b.call(
+		'$.trace',
+		b.thunk(expression),
+		b.literal(code),
+		node.type === 'CallExpression' ? b.literal(true) : undefined
+	);
 }

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

@@ -15,7 +15,7 @@ export function BlockStatement(node, context) {
 		return b.block([
 			b.return(
 				b.call(
-					'$.log_traced_expressions',
+					'$.log_trace',
 					b.thunk(
 						b.block(
 							node.body.map(

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

@@ -4,7 +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_expression } from '../utils.js';
+import { trace } from '../utils.js';
 
 /**
  * @param {CallExpression} node
@@ -62,8 +62,8 @@ export function CallExpression(node, context) {
 		);
 	}
 
-	if (context.state.trace_dependencies) {
-		return trace_expression(
+	if (dev) {
+		return trace(
 			node,
 			{
 				...node,

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

@@ -2,7 +2,8 @@
 /** @import { Context } from '../types' */
 import is_reference from 'is-reference';
 import * as b from '../../../../utils/builders.js';
-import { build_getter, trace_expression } from '../utils.js';
+import { build_getter, trace } from '../utils.js';
+import { dev } from '../../../../state.js';
 
 /**
  * @param {Identifier} node
@@ -42,8 +43,8 @@ export function Identifier(node, context) {
 		}
 	}
 
-	if (transformed && transformed !== node && context.state.trace_dependencies) {
-		return trace_expression(node, transformed, 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,7 +1,8 @@
 /** @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_expression } from '../utils.js';
+import { trace } from '../utils.js';
 
 /**
  * @param {MemberExpression} node
@@ -17,8 +18,8 @@ export function MemberExpression(node, context) {
 		}
 	}
 
-	if (context.state.trace_dependencies) {
-		return trace_expression(
+	if (dev) {
+		return trace(
 			node,
 			transformed || {
 				...node,

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

@@ -1,75 +1,123 @@
 import { snapshot } from '../../server';
 import { STATE_SYMBOL } from '../constants';
 
-/** @type { Map<string, any> | null } */
+/** @type { { label: string, time: number, sub: any, stack: string | void, value: any }[] | null } */
 export let tracing_expressions = null;
 export let tracing_expression_reactive = false;
 
 /**
- * @template T
- * @param {() => T} fn
- * @param {string} label
+ * @param {any} expressions
  */
-export function log_traced_expressions(fn, label) {
-	var previously_tracing_expressions = tracing_expressions;
-	tracing_expressions = new Map();
-	try {
-		var val = fn();
+function log_expressions(expressions) {
+	for (let expression of expressions) {
+		const val = expression.value;
+		const label = expression.label;
+		const time = expression.time;
 
-		// eslint-disable-next-line no-console
-		console.group(`${label} (trace)`);
-		for (let [label, [val, stack]] of tracing_expressions) {
+		if (time) {
 			// eslint-disable-next-line no-console
 			console.groupCollapsed(
-				label,
+				`${label} %c${time.toFixed(2)}ms`,
+				'color: grey',
 				val && typeof val === 'object' && STATE_SYMBOL in val ? snapshot(val, true) : val
 			);
+		} else {
 			// eslint-disable-next-line no-console
-			console.log(stack);
-			// eslint-disable-next-line no-console
-			console.groupEnd();
+			console.groupCollapsed(
+				label,
+				val && typeof val === 'object' && STATE_SYMBOL in val ? snapshot(val, true) : val
+			);
+		}
+
+		if (expression.sub) {
+			log_expressions(expression.sub);
 		}
 		// eslint-disable-next-line no-console
+		console.log(expression.stack);
+		// eslint-disable-next-line no-console
+		console.groupEnd();
+	}
+}
+
+/**
+ * @template T
+ * @param {() => T} fn
+ * @param {string} label
+ */
+export function log_trace(fn, label) {
+	var previously_tracing_expressions = tracing_expressions;
+	try {
+		tracing_expressions = [];
+
+		var start = performance.now();
+		var value = fn();
+		var time = (performance.now() - start).toFixed(2);
+		// eslint-disable-next-line no-console
+		console.group(`${label} %c${time}ms`, 'color: grey');
+		log_expressions(tracing_expressions);
+		// eslint-disable-next-line no-console
 		console.groupEnd();
 
-		return val;
-	} finally {
 		if (previously_tracing_expressions !== null) {
-			for (let [label, entries] of tracing_expressions) {
-				if (!previously_tracing_expressions.has(label)) {
-					previously_tracing_expressions.set(label, entries);
-				}
-			}
+			previously_tracing_expressions.push(...tracing_expressions);
 		}
+
+		return value;
+	} finally {
 		tracing_expressions = previously_tracing_expressions;
 	}
 }
 
 /**
  * @template T
  * @param {() => T} fn
+ * @param {boolean} [call_expression]
  * @param {string} label
  */
-export function trace_expression(fn, label) {
+export function trace(fn, label, call_expression) {
+	var previously_tracing_expressions = tracing_expressions;
 	var previously_tracing_expression_reactive = tracing_expression_reactive;
+
 	try {
 		tracing_expression_reactive = false;
-		var val = fn();
+		tracing_expressions = [];
+		var value,
+			time = 0;
+
+		if (call_expression) {
+			var start = performance.now();
+			value = fn();
+			time = (performance.now() - start);
+		} else {
+			value = fn();
+		}
 
-		if (
-			tracing_expression_reactive &&
-			tracing_expressions !== null &&
-			!tracing_expressions.has(label)
-		) {
+		if (tracing_expressions !== null) {
 			// The Stack isn't as useful in FF and doesn't show sourcemaps
-			const stack = new Error().stack
+			var stack = new Error().stack
 				?.split('\n')
 				[/Firefox/.test(navigator.userAgent) ? 3 : 2].trimStart();
-			tracing_expressions.set(label, [val, stack]);
+
+			if (tracing_expression_reactive) {
+				tracing_expressions.push({ label, value, time, stack, sub: null });
+
+				if (previously_tracing_expressions !== null) {
+					previously_tracing_expressions.push(...tracing_expressions);
+				}
+			} else if (previously_tracing_expressions !== null) {
+				previously_tracing_expressions.push({
+					label,
+					value,
+					time,
+					stack,
+					sub: tracing_expressions
+				});
+			}
 		}
 
-		return val;
+		return value;
 	} finally {
+		tracing_expressions = previously_tracing_expressions;
 		tracing_expression_reactive = previously_tracing_expression_reactive;
 	}
 }

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

@@ -11,7 +11,7 @@ export {
 	skip_ownership_validation
 } from './dev/ownership.js';
 export { check_target, legacy_api } from './dev/legacy.js';
-export { log_traced_expressions, trace_expression } from './dev/tracing.js';
+export { log_trace, trace } from './dev/tracing.js';
 export { inspect } from './dev/inspect.js';
 export { await_block as await } from './dom/blocks/await.js';
 export { if_block as if } from './dom/blocks/if.js';