diff --git a/.changeset/calm-batches-mount.md b/.changeset/calm-batches-mount.md new file mode 100644 index 0000000000..9c241ab124 --- /dev/null +++ b/.changeset/calm-batches-mount.md @@ -0,0 +1,5 @@ +--- +'svelte': patch +--- + +fix: initialize components invoked from effects with a batch diff --git a/packages/svelte/src/internal/client/reactivity/async.js b/packages/svelte/src/internal/client/reactivity/async.js index a75f97a54f..5b79392075 100644 --- a/packages/svelte/src/internal/client/reactivity/async.js +++ b/packages/svelte/src/internal/client/reactivity/async.js @@ -388,7 +388,7 @@ export function wait(blockers) { export function increment_pending() { var effect = /** @type {Effect} */ (active_effect); var boundary = effect.b; // undefined if called outside the render tree, e.g. a standalone $effect.root - var batch = /** @type {Batch} */ (current_batch); + var batch = Batch.ensure(); var blocking = !!boundary?.is_rendered(); boundary?.update_pending_count(1, batch); diff --git a/packages/svelte/src/internal/client/reactivity/effects.js b/packages/svelte/src/internal/client/reactivity/effects.js index e69a639a94..e8c0621677 100644 --- a/packages/svelte/src/internal/client/reactivity/effects.js +++ b/packages/svelte/src/internal/client/reactivity/effects.js @@ -413,6 +413,7 @@ export function deferred_template_effect(fn, sync = [], async = [], blockers = [ * @param {number} flags */ export function block(fn, flags = 0) { + Batch.ensure(); var effect = create_effect(BLOCK_EFFECT | flags, fn); if (DEV) { effect.dev_stack = dev_stack; diff --git a/packages/svelte/tests/runtime-runes/samples/async-component-await-in-effect/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-component-await-in-effect/Child.svelte new file mode 100644 index 0000000000..2025540df0 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-component-await-in-effect/Child.svelte @@ -0,0 +1,5 @@ +{#await Promise.resolve('child')} +
pending
+{:then value} +{value}
+{/await} diff --git a/packages/svelte/tests/runtime-runes/samples/async-component-await-in-effect/_config.js b/packages/svelte/tests/runtime-runes/samples/async-component-await-in-effect/_config.js new file mode 100644 index 0000000000..a7bb5e425d --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-component-await-in-effect/_config.js @@ -0,0 +1,13 @@ +import { tick } from 'svelte'; +import { test } from '../../test'; + +export default test({ + async test({ assert, target }) { + target.querySelector('button')?.click(); + await tick(); + assert.htmlEqual( + target.innerHTML, + 'child
' + ); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/async-component-await-in-effect/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-component-await-in-effect/main.svelte new file mode 100644 index 0000000000..c337ab97f7 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-component-await-in-effect/main.svelte @@ -0,0 +1,18 @@ + + + + diff --git a/packages/svelte/tests/runtime-runes/samples/async-component-in-effect/Child.svelte b/packages/svelte/tests/runtime-runes/samples/async-component-in-effect/Child.svelte new file mode 100644 index 0000000000..85b69adcef --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-component-in-effect/Child.svelte @@ -0,0 +1,5 @@ + + +{value}
diff --git a/packages/svelte/tests/runtime-runes/samples/async-component-in-effect/_config.js b/packages/svelte/tests/runtime-runes/samples/async-component-in-effect/_config.js new file mode 100644 index 0000000000..13bcc4a9a5 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-component-in-effect/_config.js @@ -0,0 +1,10 @@ +import { tick } from 'svelte'; +import { test } from '../../test'; + +export default test({ + async test({ assert, target }) { + target.querySelector('button')?.click(); + await tick(); + assert.htmlEqual(target.innerHTML, 'child
'); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/async-component-in-effect/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-component-in-effect/main.svelte new file mode 100644 index 0000000000..2a04fa69f6 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/async-component-in-effect/main.svelte @@ -0,0 +1,13 @@ + + + + diff --git a/packages/svelte/tests/runtime-runes/samples/component-boundary-in-effect/Child.svelte b/packages/svelte/tests/runtime-runes/samples/component-boundary-in-effect/Child.svelte new file mode 100644 index 0000000000..cabffef04e --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/component-boundary-in-effect/Child.svelte @@ -0,0 +1,3 @@ +child
+child
' + ); + } +}); diff --git a/packages/svelte/tests/runtime-runes/samples/component-boundary-in-effect/main.svelte b/packages/svelte/tests/runtime-runes/samples/component-boundary-in-effect/main.svelte new file mode 100644 index 0000000000..c337ab97f7 --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/component-boundary-in-effect/main.svelte @@ -0,0 +1,18 @@ + + + +