diff --git a/.changeset/silent-rockets-tease.md b/.changeset/silent-rockets-tease.md new file mode 100644 index 0000000000..1a708c1d69 --- /dev/null +++ b/.changeset/silent-rockets-tease.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: tag stores for `$inspect.trace()` diff --git a/packages/svelte/src/internal/client/dev/tracing.js b/packages/svelte/src/internal/client/dev/tracing.js index b7a6a38548..1b26c702fb 100644 --- a/packages/svelte/src/internal/client/dev/tracing.js +++ b/packages/svelte/src/internal/client/dev/tracing.js @@ -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 diff --git a/packages/svelte/src/internal/client/reactivity/store.js b/packages/svelte/src/internal/client/reactivity/store.js index e7a92ee052..ce082866ce 100644 --- a/packages/svelte/src/internal/client/reactivity/store.js +++ b/packages/svelte/src/internal/client/reactivity/store.js @@ -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(); diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/_config.js new file mode 100644 index 0000000000..4e16c0cf2a --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/_config.js @@ -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 } + ]); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/main.svelte new file mode 100644 index 0000000000..af57513365 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/inspect-trace-store/main.svelte @@ -0,0 +1,14 @@ + + +