fix: avoid other batches running with queued root effects of main batch (#17145)

* fix: avoid other batches running with queued root effects of main batch

When `#traverse_effect_tree` runs, it can execute block effects, which in turn can create effects which are scheduled, which means `queued_root_effects` is now filled again. We didn't take that into account and assumed that in `#commit` we would have no queued root effects. As a result another batch could wrongfully run with the queued root effects of the main batch. That in turn can mean that `skipped_effects` is different on the other batch, leading to some branches not getting traversed into. As a result part of the tree is marked clean while further below batches are still not marked clean. That then breaks reactivity as soon as you schedule an effect in this still-not-clean sub tree, as it will not bubble all the way up to the root, since it comes across a not-clean branch, assuming something was already scheduled.

The fix is simple: Stash the queued root effects before rebasing branches.

Fixes #17118

* add note to self

---------

Co-authored-by: Rich Harris <[email protected]>

Author: dummdidumm

.changeset/sixty-glasses-try.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: avoid other batches running with queued root effects of main batch

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

@@ -68,6 +68,7 @@ export let previous_batch = null;
  */
 export let batch_values = null;
 
+// TODO this should really be a property of `batch`
 /** @type {Effect[]} */
 let queued_root_effects = [];
 
@@ -171,6 +172,8 @@ export class Batch {
 
 		for (const root of root_effects) {
 			this.#traverse_effect_tree(root, target);
+			// Note: #traverse_effect_tree runs block effects eagerly, which can schedule effects,
+			// which means queued_root_effects now may be filled again.
 		}
 
 		if (!this.is_fork) {
@@ -418,6 +421,10 @@ export class Batch {
 				// Re-run async/block effects that depend on distinct values changed in both batches
 				const others = [...batch.current.keys()].filter((s) => !this.current.has(s));
 				if (others.length > 0) {
+					// Avoid running queued root effects on the wrong branch
+					var prev_queued_root_effects = queued_root_effects;
+					queued_root_effects = [];
+
 					/** @type {Set<Value>} */
 					const marked = new Set();
 					/** @type {Map<Reaction, boolean>} */
@@ -436,9 +443,10 @@ export class Batch {
 
 						// TODO do we need to do anything with `target`? defer block effects?
 
-						queued_root_effects = [];
 						batch.deactivate();
 					}
+
+					queued_root_effects = prev_queued_root_effects;
 				}
 			}
 

packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/A.svelte

@@ -0,0 +1,15 @@
+<script>
+	let open = $state(false);
+	let menuOptionsEl = $state(null);
+</script>
+
+<button onclick={() => open = !open}>
+	toggle
+
+		{#if open}
+			<!-- bind:this uses effect, which is scheduled, causing queued_root_effects to be filled again -->
+			<span bind:this={menuOptionsEl}>
+				A
+			</span>
+		{/if}
+</button>

packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/B.svelte

@@ -0,0 +1 @@
+B

packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/_config.js

@@ -0,0 +1,63 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		const [fork, commit, toggle] = target.querySelectorAll('button');
+
+		fork.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork</button>
+			<button>commit</button>
+			<button>toggle</button>
+		`
+		);
+
+		toggle.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork</button>
+			<button>commit</button>
+			<button>toggle <span>A</span></button>
+		`
+		);
+
+		toggle.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork</button>
+			<button>commit</button>
+			<button>toggle</button>
+		`
+		);
+
+		toggle.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork</button>
+			<button>commit</button>
+			<button>toggle <span>A</span></button>
+		`
+		);
+
+		commit.click();
+		await tick();
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+			<button>fork</button>
+			<button>commit</button>
+			B
+		`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/main.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { fork } from 'svelte';
+	import A from './A.svelte';
+	import B from './B.svelte';
+
+	let open = $state(true);
+	let f;
+</script>
+
+
+<button onclick={() => {
+	f = fork(() => {
+		open = !open;
+	})
+}}>fork</button>
+<button onclick={() => {
+	f.commit()
+}}>commit</button>
+
+{#if open}
+	<A />
+{:else}
+	<B />
+{/if}