fix: tag stores for `$inspect.trace()` (#16452)

pull/16455/head
Rich Harris 2 months ago committed by GitHub
parent dd55de3b75
commit 5033c8e965
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

@ -0,0 +1,5 @@
---
'svelte': patch
---
fix: tag stores for `$inspect.trace()`

@ -26,7 +26,7 @@ function log_entry(signal, entry) {
return;
}
const type = (signal.f & (DERIVED | ASYNC)) !== 0 ? '$derived' : '$state';
const type = get_type(signal);
const current_reaction = /** @type {Reaction} */ (active_reaction);
const dirty = signal.wv > current_reaction.wv || current_reaction.wv === 0;
const style = dirty
@ -73,6 +73,15 @@ function log_entry(signal, entry) {
console.groupEnd();
}
/**
* @param {Value} signal
* @returns {'$state' | '$derived' | 'store'}
*/
function get_type(signal) {
if ((signal.f & (DERIVED | ASYNC)) !== 0) return '$derived';
return signal.label?.startsWith('$') ? 'store' : '$state';
}
/**
* @template T
* @param {() => string} label

@ -6,6 +6,7 @@ import { define_property, noop } from '../../shared/utils.js';
import { get } from '../runtime.js';
import { teardown } from './effects.js';
import { mutable_source, set } from './sources.js';
import { DEV } from 'esm-env';
/**
* Whether or not the prop currently being read is a store binding, as in
@ -33,6 +34,10 @@ export function store_get(store, store_name, stores) {
unsubscribe: noop
});
if (DEV) {
entry.source.label = store_name;
}
// if the component that setup this is already unmounted we don't want to register a subscription
if (entry.store !== store && !(IS_UNMOUNTED in stores)) {
entry.unsubscribe();

@ -0,0 +1,30 @@
import { flushSync } from 'svelte';
import { test } from '../../test';
import { normalise_trace_logs } from '../../../helpers.js';
export default test({
compileOptions: {
dev: true
},
test({ assert, target, logs }) {
assert.deepEqual(normalise_trace_logs(logs), [
{ log: 'effect' },
{ log: 'store', highlighted: true },
{ log: '$count', highlighted: false },
{ log: 0 }
]);
logs.length = 0;
const [button] = target.querySelectorAll('button');
flushSync(() => button.click());
assert.deepEqual(normalise_trace_logs(logs), [
{ log: 'effect' },
{ log: 'store', highlighted: true },
{ log: '$count', highlighted: false },
{ log: 1 }
]);
}
});

@ -0,0 +1,14 @@
<script>
import { writable } from 'svelte/store';
const count = writable(0);
$effect(() => {
$inspect.trace('effect');
$count;
});
</script>
<button onclick={() => $count += 1}>
clicks: {$count}
</button>
Loading…
Cancel
Save