WIP

Author: trueadm

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

@@ -1,9 +1,14 @@
 import { snapshot } from '../../shared/clone.js';
 import { STATE_SYMBOL } from '../constants.js';
 
-/** @type { { label: string, time: number, sub: any, stack: string | void, value: any }[] | null } */
+export const NOT_REACTIVE = 0;
+export const REACTIVE_UNCHANGED = 1;
+export const REACTIVE_CHANGED = 2;
+
+/** @type { { changed: boolean, label: string, time: number, sub: any, stack: string | void, value: any }[] | null } */
 export let tracing_expressions = null;
-export let tracing_expression_reactive = false;
+/** @type { 0 | 1 | 2 } */
+export let tracing_expression_reactive = NOT_REACTIVE;
 
 /**
  * @param {any} expressions
@@ -13,18 +18,21 @@ function log_expressions(expressions) {
 		const val = expression.value;
 		const label = expression.label;
 		const time = expression.time;
+		const changed = expression.changed;
 
 		if (time) {
 			// eslint-disable-next-line no-console
 			console.groupCollapsed(
-				`${label} %c${time.toFixed(2)}ms`,
+				`%c${label} %c${time.toFixed(2)}ms`,
+				!changed ? 'color: darkgrey; font-weight: normal' : undefined,
 				'color: grey',
 				val && typeof val === 'object' && STATE_SYMBOL in val ? snapshot(val, true) : val
 			);
 		} else {
 			// eslint-disable-next-line no-console
 			console.groupCollapsed(
-				label,
+				`%c${label}`,
+				!changed ? 'color: darkgrey; font-weight: normal' : undefined,
 				val && typeof val === 'object' && STATE_SYMBOL in val ? snapshot(val, true) : val
 			);
 		}
@@ -79,7 +87,7 @@ export function trace(fn, label, computed) {
 	var previously_tracing_expression_reactive = tracing_expression_reactive;
 
 	try {
-		tracing_expression_reactive = false;
+		tracing_expression_reactive = NOT_REACTIVE;
 		tracing_expressions = [];
 		var value,
 			time = 0;
@@ -98,8 +106,15 @@ export function trace(fn, label, computed) {
 				?.split('\n')
 				[/Firefox/.test(navigator.userAgent) ? 3 : 2].trimStart();
 
-			if (tracing_expression_reactive) {
-				tracing_expressions.push({ label, value, time, stack, sub: null });
+			if (tracing_expression_reactive !== NOT_REACTIVE) {
+				tracing_expressions.push({
+					changed: tracing_expression_reactive === REACTIVE_CHANGED,
+					label,
+					value,
+					time,
+					stack,
+					sub: null
+				});
 
 				if (previously_tracing_expressions !== null) {
 					previously_tracing_expressions.push(...tracing_expressions);
@@ -109,6 +124,7 @@ export function trace(fn, label, computed) {
 				previously_tracing_expressions.length !== 0
 			) {
 				previously_tracing_expressions.push({
+					changed: tracing_expressions.some(e => e.changed),
 					label,
 					value,
 					time,
@@ -125,6 +141,9 @@ export function trace(fn, label, computed) {
 	}
 }
 
-export function tracing_reactive_signal() {
-	tracing_expression_reactive = true;
+/**
+ * @param {0 | 1 | 2} value
+ */
+export function set_tracing_expression_reactive(value) {
+	tracing_expression_reactive = value;
 }

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

@@ -34,7 +34,12 @@ import * as e from './errors.js';
 import { lifecycle_outside_component } from '../shared/errors.js';
 import { FILENAME } from '../../constants.js';
 import { legacy_mode_flag } from '../flags/index.js';
-import { tracing_expressions, tracing_reactive_signal } from './dev/tracing.js';
+import {
+	tracing_expressions,
+	set_tracing_expression_reactive,
+	REACTIVE_UNCHANGED,
+	REACTIVE_CHANGED
+} from './dev/tracing.js';
 
 const FLUSH_MICROTASK = 0;
 const FLUSH_SYNC = 1;
@@ -739,9 +744,6 @@ export function get(signal) {
 
 	// Register the dependency on the current reaction signal.
 	if (active_reaction !== null) {
-		if (DEV && tracing_expressions !== null) {
-			tracing_reactive_signal();
-		}
 		if (derived_sources !== null && derived_sources.includes(signal)) {
 			e.state_unsafe_local_read();
 		}
@@ -785,6 +787,12 @@ export function get(signal) {
 		}
 	}
 
+	if (DEV && active_reaction !== null && tracing_expressions !== null) {
+		set_tracing_expression_reactive(
+			signal.version > active_reaction.version ? REACTIVE_CHANGED : REACTIVE_UNCHANGED
+		);
+	}
+
 	return signal.v;
 }