fix: correctly highlight first rerun of $inspect.trace (#14734)

Author: paoloricciuti

.changeset/tame-eggs-work.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly highlight first rerun of `$inspect.trace`

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

@@ -127,8 +127,8 @@ export function set_untracked_writes(value) {
 	untracked_writes = value;
 }
 
-/** @type {number} Used by sources and deriveds for handling updates to unowned deriveds */
-let current_version = 0;
+/** @type {number} Used by sources and deriveds for handling updates to unowned deriveds it starts from 1 to differentiate between a created effect and a run one for tracing */
+let current_version = 1;
 
 // If we are working with a get() chain that has no active container,
 // to prevent memory leaks, we skip adding the reaction.

packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js

@@ -11,12 +11,15 @@ function normalise_trace_logs(logs) {
 
 		if (typeof log === 'string' && log.includes('%c')) {
 			const split = log.split('%c');
-			normalised.push((split[0].length !== 0 ? split[0] : split[1]).trim());
+			normalised.push({
+				log: (split[0].length !== 0 ? split[0] : split[1]).trim(),
+				highlighted: logs[i + 1] === 'color: CornflowerBlue; font-weight: bold'
+			});
 			i++;
 		} else if (log instanceof Error) {
 			continue;
 		} else {
-			normalised.push(log);
+			normalised.push({ log });
 		}
 	}
 	return normalised;
@@ -28,14 +31,67 @@ export default test({
 	},
 
 	test({ assert, target, logs }) {
-		assert.deepEqual(normalise_trace_logs(logs), ['effect', '$derived', 0, '$state', 0]);
+		// initial log, everything is highlighted
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect', highlighted: false },
+			{ log: '$derived', highlighted: true },
+			{ log: 0 },
+			{ log: '$state', highlighted: true },
+			{ log: 0 },
+			{ log: '$state', highlighted: true },
+			{ log: false }
+		]);
 
 		logs.length = 0;
 
 		const button = target.querySelector('button');
 		button?.click();
 		flushSync();
 
-		assert.deepEqual(normalise_trace_logs(logs), ['effect', '$derived', 2, '$state', 1]);
+		// count changed, derived and state are highlighted, last state is not
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect', highlighted: false },
+			{ log: '$derived', highlighted: true },
+			{ log: 2 },
+			{ log: '$state', highlighted: true },
+			{ log: 1 },
+			{ log: '$state', highlighted: false },
+			{ log: false }
+		]);
+
+		logs.length = 0;
+
+		const input = target.querySelector('input');
+		input?.click();
+		flushSync();
+
+		// checked changed, last state is highlighted, first two are not
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect', highlighted: false },
+			{ log: '$derived', highlighted: false },
+			{ log: 2 },
+			{ log: '$state', highlighted: false },
+			{ log: 1 },
+			{ log: '$state', highlighted: true },
+			{ log: true }
+		]);
+
+		logs.length = 0;
+
+		button?.click();
+		flushSync();
+
+		// count change and derived it's >=4, checked is not in the dependencies anymore
+
+		assert.deepEqual(normalise_trace_logs(logs), [
+			{ log: 'effect', highlighted: false },
+			{ log: '$derived', highlighted: true },
+			{ log: 4 },
+			{ log: '$state', highlighted: true },
+			{ log: 2 }
+		]);
 	}
 });

packages/svelte/tests/runtime-runes/samples/inspect-trace/main.svelte

@@ -2,11 +2,15 @@
 	let count = $state(0);
 	let double = $derived(count * 2);
 
+	let checked = $state(false);
+
 	$effect(() => {
 		$inspect.trace('effect');
 
 		double;
-	})
+		double >= 4 || checked;
+	});
 </script>
 
 <button onclick={() => count++}>{double}</button>
+<input type="checkbox" bind:checked />