From 7e6a3bfea8f7023d725288c9ef82cb67d810ffe0 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Tue, 9 Sep 2025 22:05:25 -0400
Subject: [PATCH] fix: flush effects scheduled during boundary's pending phase

---
 .changeset/ninety-pandas-move.md               |  5 +++++
 .../src/internal/client/dom/blocks/boundary.js | 10 +++++++++-
 .../samples/async-attachment/Inner.svelte      | 10 ++++++++++
 .../samples/async-attachment/_config.js        | 18 ++++++++++++++++++
 .../samples/async-attachment/main.svelte       | 16 ++++++++++++++++
 5 files changed, 58 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/ninety-pandas-move.md
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-attachment/Inner.svelte
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-attachment/_config.js
 create mode 100644 packages/svelte/tests/runtime-runes/samples/async-attachment/main.svelte

diff --git a/.changeset/ninety-pandas-move.md b/.changeset/ninety-pandas-move.md
new file mode 100644
index 0000000000..65f57ddbbf
--- /dev/null
+++ b/.changeset/ninety-pandas-move.md
@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: flush effects scheduled during boundary's pending phase
diff --git a/packages/svelte/src/internal/client/dom/blocks/boundary.js b/packages/svelte/src/internal/client/dom/blocks/boundary.js
index b7f1803782..659f6014b8 100644
--- a/packages/svelte/src/internal/client/dom/blocks/boundary.js
+++ b/packages/svelte/src/internal/client/dom/blocks/boundary.js
@@ -23,7 +23,7 @@ import { queue_micro_task } from '../task.js';
 import * as e from '../../errors.js';
 import * as w from '../../warnings.js';
 import { DEV } from 'esm-env';
-import { Batch, effect_pending_updates } from '../../reactivity/batch.js';
+import { Batch, current_batch, effect_pending_updates } from '../../reactivity/batch.js';
 import { internal_set, source } from '../../reactivity/sources.js';
 import { tag } from '../../dev/tracing.js';
 import { createSubscriber } from '../../../../reactivity/create-subscriber.js';
@@ -259,6 +259,14 @@ export class Boundary {
 				this.#anchor.before(this.#offscreen_fragment);
 				this.#offscreen_fragment = null;
 			}
+
+			const batch = current_batch;
+
+			if (batch) {
+				queue_micro_task(() => {
+					batch.flush();
+				});
+			}
 		}
 	}
 
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attachment/Inner.svelte b/packages/svelte/tests/runtime-runes/samples/async-attachment/Inner.svelte
new file mode 100644
index 0000000000..b9b9d7a3d0
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attachment/Inner.svelte
@@ -0,0 +1,10 @@
+<script>
+	function renderContent(node) {
+		node.textContent = 'foo';
+	}
+ 
+	const test = await Promise.resolve('foo');
+</script>
+
+<p>{test}</p>
+<div {@attach renderContent}></div>
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attachment/_config.js b/packages/svelte/tests/runtime-runes/samples/async-attachment/_config.js
new file mode 100644
index 0000000000..f6b48b38b1
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attachment/_config.js
@@ -0,0 +1,18 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	async test({ assert, target }) {
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>toggle</button> <p>foo</p><div>foo</div>');
+
+		const [toggle] = target.querySelectorAll('button');
+		toggle.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>toggle</button>');
+
+		toggle.click();
+		await tick();
+		assert.htmlEqual(target.innerHTML, '<button>toggle</button> <p>foo</p><div>foo</div>');
+	}
+});
diff --git a/packages/svelte/tests/runtime-runes/samples/async-attachment/main.svelte b/packages/svelte/tests/runtime-runes/samples/async-attachment/main.svelte
new file mode 100644
index 0000000000..6cef6e8f5c
--- /dev/null
+++ b/packages/svelte/tests/runtime-runes/samples/async-attachment/main.svelte
@@ -0,0 +1,16 @@
+<script>
+	import Inner from './Inner.svelte';
+
+	let show = $state(true);
+</script>
+
+<svelte:boundary>
+	<button onclick={() => show = !show}>toggle</button>
+	{#if show}
+		<Inner />
+	{/if}
+
+	{#snippet pending()}
+		<p>pending</p>
+	{/snippet}
+</svelte:boundary>