diff --git a/.changeset/loud-chairs-tease.md b/.changeset/loud-chairs-tease.md new file mode 100644 index 000000000000..e08d111cdd38 --- /dev/null +++ b/.changeset/loud-chairs-tease.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: settle batch after DOM updates diff --git a/packages/svelte/src/internal/client/reactivity/batch.js b/packages/svelte/src/internal/client/reactivity/batch.js index ab83050cd066..bbc05bb1ff87 100644 --- a/packages/svelte/src/internal/client/reactivity/batch.js +++ b/packages/svelte/src/internal/client/reactivity/batch.js @@ -196,6 +196,8 @@ export class Batch { flush_queued_effects(target.effects); previous_batch = null; + + this.#deferred?.resolve(); } batch_values = null; @@ -432,8 +434,6 @@ export class Batch { this.committed = true; batches.delete(this); - - this.#deferred?.resolve(); } /** diff --git a/packages/svelte/tests/runtime-runes/samples/async-settled-after-dom/_config.js b/packages/svelte/tests/runtime-runes/samples/async-settled-after-dom/_config.js new file mode 100644 index 000000000000..2c9816f3edd2 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-settled-after-dom/_config.js @@ -0,0 +1,27 @@ +import { settled, tick } from 'svelte'; +import { test } from '../../test'; + +export default test({ + mode: ['client'], + + async test({ assert, target }) { + const [shift, update] = target.querySelectorAll('button'); + + shift.click(); + await tick(); + + assert.htmlEqual(target.innerHTML, '
hello
'); + + update.click(); + const promise = settled(); + + await tick(); + shift.click(); + await promise; + + assert.htmlEqual( + target.innerHTML, + 'goodbye
' + ); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/async-settled-after-dom/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-settled-after-dom/main.svelte new file mode 100644 index 000000000000..0db9f80118b1 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-settled-after-dom/main.svelte @@ -0,0 +1,20 @@ + + + + + +{await push(text)}
+ + {#snippet pending()}{/snippet} +