diff --git a/.changeset/tame-eggs-work.md b/.changeset/tame-eggs-work.md
new file mode 100644
index 000000000000..2c1c59de4a3e
--- /dev/null
+++ b/.changeset/tame-eggs-work.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: correctly highlight first rerun of `$inspect.trace`
diff --git a/packages/svelte/src/internal/client/runtime.js b/packages/svelte/src/internal/client/runtime.js
index 27e174d3aa73..4aa3d17a15e8 100644
--- a/packages/svelte/src/internal/client/runtime.js
+++ b/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.
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js
index 517e11d74e06..efa5985e4e56 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-trace/_config.js
+++ b/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,7 +31,17 @@ 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;
@@ -36,6 +49,49 @@ export default test({
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 }
+ ]);
}
});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace/main.svelte
index 99c30a07bf2f..99f246aa73a3 100644
--- a/packages/svelte/tests/runtime-runes/samples/inspect-trace/main.svelte
+++ b/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;
+ });
+