Merge 3e6c448cac into ce89035ecb

.changeset/calm-batches-mount.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: initialize components invoked from effects with a batch

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);

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;

packages/svelte/tests/runtime-runes/samples/async-component-await-in-effect/Child.svelte

@@ -0,0 +1,5 @@
+{#await Promise.resolve('child')}
+	<p data-pending>pending</p>
+{:then value}
+	<p data-child>{value}</p>
+{/await}

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,
+			'<button>run</button><p data-child="">child</p><span></span>'
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-component-await-in-effect/main.svelte

@@ -0,0 +1,18 @@
+<script>
+	import Child from './Child.svelte';
+
+	let anchor = $state();
+	let run = $state(false);
+
+	function capture(node) {
+		anchor = node;
+		return () => (anchor = undefined);
+	}
+
+	$effect(() => {
+		if (run && anchor) Child(anchor, {});
+	});
+</script>
+
+<button onclick={() => (run = !run)}>run</button>
+<span {@attach capture}></span>

packages/svelte/tests/runtime-runes/samples/async-component-in-effect/Child.svelte

@@ -0,0 +1,5 @@
+<script>
+	const value = $derived(await Promise.resolve('child'));
+</script>
+
+<p>{value}</p>

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, '<button>run</button><p>child</p><span></span>');
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-component-in-effect/main.svelte

@@ -0,0 +1,13 @@
+<script>
+	import Child from './Child.svelte';
+
+	let anchor;
+	let run = $state(false);
+
+	$effect(() => {
+		if (run) Child(anchor, {});
+	});
+</script>
+
+<button onclick={() => (run = true)}>run</button>
+<span bind:this={anchor}></span>

packages/svelte/tests/runtime-runes/samples/component-boundary-in-effect/Child.svelte

@@ -0,0 +1,3 @@
+<svelte:boundary>
+	<p data-child>child</p>
+</svelte:boundary>

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,
+			'<button>run</button><p data-child="">child</p><span></span>'
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/component-boundary-in-effect/main.svelte

@@ -0,0 +1,18 @@
+<script>
+	import Child from './Child.svelte';
+
+	let anchor = $state();
+	let run = $state(false);
+
+	function capture(node) {
+		anchor = node;
+		return () => (anchor = undefined);
+	}
+
+	$effect(() => {
+		if (run && anchor) Child(anchor, {});
+	});
+</script>
+
+<button onclick={() => (run = !run)}>run</button>
+<span {@attach capture}></span>