fix: ensure signal graph is consistent before triggering $inspect signals (#13153)

Fixes #13146.

Sync effects are not possible with Svelte 5's push-pull system because they can make can break the reactive graph – which is also why we don't permit writes within a derived too. The same problem is occurring here, as inspect effects are run sync – they are actually happening as part of an existing derived – which means they're a bit like writes in a derived and can cause tearing to the reactive signal graph. To avoid this we can call flushSync just before invoking these effects, as that should ensure the graph is made consistent again.

Also another issue I found was that we don't "reset" the inspect_effects Set when we enter a derived – which we should as a derived can create it's own local state that should have no bearing on the parent inspect effect.

Author: trueadm

.changeset/chatty-snails-train.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure signal graph is consistent before triggering $inspect signals

packages/svelte/src/internal/client/reactivity/deriveds.js

@@ -13,6 +13,7 @@ import {
 import { equals, safe_equals } from './equality.js';
 import * as e from '../errors.js';
 import { destroy_effect } from './effects.js';
+import { inspect_effects, set_inspect_effects } from './sources.js';
 
 /**
  * @template V
@@ -92,6 +93,8 @@ export function update_derived(derived) {
 	var value;
 
 	if (DEV) {
+		let prev_inspect_effects = inspect_effects;
+		set_inspect_effects(new Set());
 		try {
 			if (stack.includes(derived)) {
 				e.derived_references_self();
@@ -102,6 +105,7 @@ export function update_derived(derived) {
 			destroy_derived_children(derived);
 			value = update_reaction(derived);
 		} finally {
+			set_inspect_effects(prev_inspect_effects);
 			stack.pop();
 		}
 	} else {

packages/svelte/src/internal/client/reactivity/sources.js

@@ -15,7 +15,8 @@ import {
 	increment_version,
 	update_effect,
 	derived_sources,
-	set_derived_sources
+	set_derived_sources,
+	flush_sync
 } from '../runtime.js';
 import { equals, safe_equals } from './equality.js';
 import {
@@ -29,7 +30,14 @@ import {
 } from '../constants.js';
 import * as e from '../errors.js';
 
-let inspect_effects = new Set();
+export let inspect_effects = new Set();
+
+/**
+ * @param {Set<any>} v
+ */
+export function set_inspect_effects(v) {
+	inspect_effects = v;
+}
 
 /**
  * @template V
@@ -159,11 +167,19 @@ export function set(source, value) {
 			}
 		}
 
-		if (DEV) {
-			for (const effect of inspect_effects) {
+		if (DEV && inspect_effects.size > 0) {
+			const inspects = Array.from(inspect_effects);
+			if (current_effect === null) {
+				// Triggering an effect sync can tear the signal graph, so to avoid this we need
+				// to ensure the graph has been flushed before triggering any inspect effects.
+				// Only needed when there's currently no effect, and flushing with one present
+				// could have other unintended consequences, like effects running out of order.
+				// This is expensive, but given this is a DEV mode only feature, it should be fine
+				flush_sync();
+			}
+			for (const effect of inspects) {
 				update_effect(effect);
 			}
-
 			inspect_effects.clear();
 		}
 	}

packages/svelte/tests/runtime-runes/samples/inspect-recursive/_config.js

@@ -0,0 +1,16 @@
+import { test } from '../../test';
+
+export default test({
+	compileOptions: {
+		dev: true
+	},
+
+	async test({ assert, logs, target }) {
+		const [btn] = target.querySelectorAll('button');
+		btn.click();
+		btn.click();
+		await Promise.resolve();
+
+		assert.deepEqual(logs, ['init', [], 'update', [{}], 'update', [{}, {}]]);
+	}
+});

packages/svelte/tests/runtime-runes/samples/inspect-recursive/main.svelte

@@ -0,0 +1,35 @@
+<script>
+	class Rect{
+		x = $state();
+		y = $state();
+
+		constructor(x, y){
+			this.x = x;
+			this.y = y;
+		}
+	}
+
+	class Node{
+		pos = $state({ x: 0, y: 0 });
+		rect = $derived(new Rect(this.pos.x, this.pos.y));
+
+		constructor(pos){
+			this.pos = pos;
+		}
+	}
+
+	const nodes = $state([]);
+
+	const rects = $derived(nodes.map(n => n.rect));
+
+	$inspect(rects);
+</script>
+
+<button onclick={()=>{
+	nodes.push(new Node({x: Math.floor(Math.random()*100), y: Math.floor(Math.random()*100)}));
+}}>add</button>
+<ul>
+	{#each rects as rect}
+		<li>{rect.x} - {rect.y}</li>
+	{/each}
+</ul>