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

Author: Rich-Harris

.changeset/silent-rockets-tease.md

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

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

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();

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

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

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