From 3604fdac6bedb09e26dca250e757543910c0ed22 Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Tue, 18 Nov 2025 01:19:31 +0100 Subject: [PATCH] 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 --- .changeset/sixty-glasses-try.md | 5 ++ .../src/internal/client/reactivity/batch.js | 10 ++- .../async-block-effect-queueing/A.svelte | 15 +++++ .../async-block-effect-queueing/B.svelte | 1 + .../async-block-effect-queueing/_config.js | 63 +++++++++++++++++++ .../async-block-effect-queueing/main.svelte | 24 +++++++ 6 files changed, 117 insertions(+), 1 deletion(-) create mode 100644 .changeset/sixty-glasses-try.md create mode 100644 packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/A.svelte create mode 100644 packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/B.svelte create mode 100644 packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/_config.js create mode 100644 packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/main.svelte diff --git a/.changeset/sixty-glasses-try.md b/.changeset/sixty-glasses-try.md new file mode 100644 index 0000000000..77db4a5cc5 --- /dev/null +++ b/.changeset/sixty-glasses-try.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: avoid other batches running with queued root effects of main batch diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js index 03a0721057..c7e01fbcba 100644 --- a/packages/svelte/src/internal/client/reactivity/batch.js +++ b/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} */ const marked = new Set(); /** @type {Map} */ @@ -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; } } diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/A.svelte b/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/A.svelte new file mode 100644 index 0000000000..7971deff5f --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/A.svelte @@ -0,0 +1,15 @@ + + + diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/B.svelte b/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/B.svelte new file mode 100644 index 0000000000..7371f47a6f --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/B.svelte @@ -0,0 +1 @@ +B \ No newline at end of file diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/_config.js b/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/_config.js new file mode 100644 index 0000000000..789cdfaa02 --- /dev/null +++ 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, + ` + + + + ` + ); + + toggle.click(); + await tick(); + assert.htmlEqual( + target.innerHTML, + ` + + + + ` + ); + + toggle.click(); + await tick(); + assert.htmlEqual( + target.innerHTML, + ` + + + + ` + ); + + toggle.click(); + await tick(); + assert.htmlEqual( + target.innerHTML, + ` + + + + ` + ); + + commit.click(); + await tick(); + assert.htmlEqual( + target.innerHTML, + ` + + + B + ` + ); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/main.svelte new file mode 100644 index 0000000000..7342a37f05 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-block-effect-queueing/main.svelte @@ -0,0 +1,24 @@ + + + + + + +{#if open} + +{:else} + +{/if}