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

pull/14737/head
Paolo Ricciuti 9 months ago committed by GitHub
parent e0e999055d
commit 36d73cad55
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

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

@ -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.

@ -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 }
]);
}
});

@ -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 />

Loading…
Cancel
Save