Merge 8bb6adf7c2 into fa4f1c45f4

packages/svelte/src/internal/client/dom/blocks/boundary.js

@@ -68,6 +68,10 @@ export class Boundary {
 	/** @type {Boundary | null} */
 	parent;
 
+	/**
+	 * True if the boundary has a `pending` snippet, is not yet resolved, and either
+	 * a) is mounting or b) is hydrating a server-rendered `pending` snippet
+	 */
 	is_pending = false;
 
 	/**

packages/svelte/tests/runtime-runes/samples/async-boundary-coordination/_config.js

@@ -0,0 +1,62 @@
+import { tick } from 'svelte';
+import { test } from '../../test';
+
+export default test({
+	mode: ['hydrate'],
+
+	props: {
+		browser: true
+	},
+
+	server_props: {
+		browser: false
+	},
+
+	async test({ assert, target }) {
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>resolve a</button>
+				<button>resolve b</button>
+				<p>hello from server</p>
+				<p>hello from server</p>
+				<p>hello from server</p>
+				<p>hello from server</p>
+			`
+		);
+
+		const [button1, button2] = target.querySelectorAll('button');
+
+		button1.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>resolve a</button>
+				<button>resolve b</button>
+				<p>hello from browser</p>
+				<p>hello from browser</p>
+				<p>hello from server</p>
+				<p>hello from server</p>
+			`
+		);
+
+		button2.click();
+		await tick();
+
+		assert.htmlEqual(
+			target.innerHTML,
+			`
+				<button>resolve a</button>
+				<button>resolve b</button>
+				<p>hello from browser</p>
+				<p>hello from browser</p>
+				<p>hello from browser</p>
+				<p>hello from browser</p>
+			`
+		);
+	}
+});

packages/svelte/tests/runtime-runes/samples/async-boundary-coordination/main.svelte

@@ -0,0 +1,39 @@
+<script>
+	let { browser } = $props();
+
+	let a = Promise.withResolvers();
+	let b = Promise.withResolvers();
+
+	if (!browser) {
+		a.resolve(true);
+		b.resolve(true);
+	}
+</script>
+
+<button onclick={() => a.resolve(true)}>
+	resolve a
+</button>
+
+<button onclick={() => b.resolve(true)}>
+	resolve b
+</button>
+
+<svelte:boundary>
+	{#if true}
+		<p>hello from {browser ? 'browser' : 'server'}</p>
+	{/if}
+
+	{#if await a.promise}
+		<p>hello from {browser ? 'browser' : 'server'}</p>
+	{/if}
+</svelte:boundary>
+
+<svelte:boundary>
+	{#if true}
+		<p>hello from {browser ? 'browser' : 'server'}</p>
+	{/if}
+
+	{#if await b.promise}
+		<p>hello from {browser ? 'browser' : 'server'}</p>
+	{/if}
+</svelte:boundary>