diff --git a/.changeset/calm-batches-mount.md b/.changeset/calm-batches-mount.md index 330f8d37df..9c241ab124 100644 --- a/.changeset/calm-batches-mount.md +++ b/.changeset/calm-batches-mount.md @@ -2,4 +2,4 @@ 'svelte': patch --- -fix: prevent async component batch crash +fix: initialize components invoked from effects with a 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/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

+
diff --git a/packages/svelte/tests/runtime-runes/samples/component-boundary-in-effect/_config.js b/packages/svelte/tests/runtime-runes/samples/component-boundary-in-effect/_config.js new file mode 100644 index 0000000000..a7bb5e425d --- /dev/null +++ b/packages/svelte/tests/runtime-runes/samples/component-boundary-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/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 @@ + + + +