fix: ensure $inspect untracks inspected object (#11432)

trueadm · web-flow · commit 1f9ad03287a0 · 2024-05-02T21:04:43.000+01:00
diff --git a/.changeset/violet-mugs-behave.md b/.changeset/violet-mugs-behave.md
@@ -0,0 +1,5 @@
+---
+"svelte": patch
+---
+
+fix: ensure $inspect untracks inspected object
diff --git a/packages/svelte/src/internal/client/dev/inspect.js b/packages/svelte/src/internal/client/dev/inspect.js
@@ -1,6 +1,6 @@
 import { snapshot } from '../proxy.js';
 import { render_effect, validate_effect } from '../reactivity/effects.js';
-import { current_effect, deep_read } from '../runtime.js';
+import { current_effect, deep_read, untrack } from '../runtime.js';
 import { array_prototype, get_prototype_of, object_prototype } from '../utils.js';
 
 /** @type {Function | null} */
@@ -28,7 +28,7 @@ export function inspect(get_value, inspector = console.log) {
 	// calling `inspector` directly inside the effect, so that
 	// we get useful stack traces
 	var fn = () => {
-		const value = deep_snapshot(get_value());
+		const value = untrack(() => deep_snapshot(get_value()));
 		inspector(initial ? 'init' : 'update', ...value);
 	};
 
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-deep/_config.js b/packages/svelte/tests/runtime-runes/samples/inspect-deep/_config.js
@@ -0,0 +1,11 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, logs }) {
+		assert.deepEqual(logs, ['init', undefined, 'update', [{}]]);
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/inspect-deep/main.svelte b/packages/svelte/tests/runtime-runes/samples/inspect-deep/main.svelte
@@ -0,0 +1,11 @@
+<script>
+	let items = [{}];
+	let data = $state();
+
+	$effect(() => {
+		data = items.slice(0, 1);
+	});
+
+	$inspect(data);
+</script>
+

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"svelte": patch
 +---
++
 +fix: ensure $inspect untracks inspected object