checkpoint

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

@@ -275,10 +275,10 @@ export class Boundary {
 		if (!this.has_pending_snippet()) {
 			if (this.parent) {
 				this.parent.#update_pending_count(d);
-				return;
 			}
 
-			e.await_outside_boundary();
+			// if there's no parent, we're in a scope with no pending snippet
+			return;
 		}
 
 		this.#pending_count += d;

packages/svelte/src/internal/client/render.js

@@ -31,6 +31,7 @@ import * as e from './errors.js';
 import { assign_nodes } from './dom/template.js';
 import { is_passive_event } from '../../utils.js';
 import { COMMENT_NODE } from './constants.js';
+import { boundary } from './dom/blocks/boundary.js';
 
 /**
  * This is normally true — block effects should run their intro transitions —
@@ -218,6 +219,7 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro
 	var unmount = component_root(() => {
 		var anchor_node = anchor ?? target.appendChild(create_text());
 
+		boundary(anchor_node, {}, (anchor_node) =>
 			branch(() => {
 				if (context) {
 					push({});
@@ -246,7 +248,8 @@ function _mount(Component, { target, anchor, props = {}, events, context, intro
 				if (context) {
 					pop();
 				}
-		});
+			})
+		);
 
 		return () => {
 			for (var event_name of registered_events) {

packages/svelte/src/internal/server/index.js

@@ -104,6 +104,8 @@ export function render(component, options = {}) {
 		let { head, body } = payload.collect();
 		head += payload.global.head.title.value;
 
+		body = BLOCK_OPEN + body + BLOCK_CLOSE; // this inserts a fake boundary so hydration matches
+
 		for (const { hash, code } of payload.global.css) {
 			head += `<style id="${hash}">${code}</style>`;
 		}
@@ -171,6 +173,8 @@ export async function render_async(component, options = {}) {
 		let { head, body } = await payload;
 		head += payload.global.head.title.value;
 
+		body = BLOCK_OPEN + body + BLOCK_CLOSE; // this inserts a fake boundary so hydration matches
+
 		for (const { hash, code } of payload.global.css) {
 			head += `<style id="${hash}">${code}</style>`;
 		}

packages/svelte/tests/runtime-legacy/shared.ts

@@ -398,12 +398,17 @@ async function run_test_variant(
 					};
 				} else {
 					const render = variant === 'hydrate' ? hydrate : mount;
+					// catch and log error from this function
+					try {
 						instance = render(mod.default, {
 							target,
 							props,
 							intro: config.intro,
 							recover: config.recover ?? false
 						});
+					} catch (error) {
+						console.log(error);
+					}
 				}
 			} else {
 				instance = createClassComponent({

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

@@ -1,14 +1,23 @@
+import { flushSync, settled } from 'svelte';
 import { ok, test } from '../../test';
 
 export default test({
-	skip: true,
+	skip_mode: ['hydrate', 'server'],
+
 	html: `
 		<p>hello</p>
 	`,
 
-	async test({ assert, target }) {
+	async test({ assert, target, variant }) {
+		if (variant === 'dom') {
+			await settled();
+		}
 		const p = target.querySelector('p');
 		ok(p);
+		assert.htmlEqual(p.outerHTML, '<p>Loading...</p>');
+
+		await settled();
+		flushSync();
 		assert.htmlEqual(p.outerHTML, '<p>hello</p>');
 	}
 });

packages/svelte/tests/runtime-runes/samples/async-hydrate/main.svelte

@@ -1,2 +1,7 @@
+<svelte:boundary>
+	<p>{await Promise.resolve('hello')}</p>
 
-<p>{await Promise.resolve('hello')}</p>
+	{#snippet pending()}
+		<p>Loading...</p>
+	{/snippet}
+</svelte:boundary>