fix

Author: Rich-Harris

packages/svelte/src/compiler/phases/3-transform/client/transform-client.js

@@ -354,12 +354,6 @@ export function client_component(analysis, options) {
 	const push_args = [b.id('$$props'), b.literal(analysis.runes)];
 	if (dev) push_args.push(b.id(analysis.name));
 
-	if (analysis.is_async) {
-		const body = /** @type {ESTree.FunctionDeclaration} */ (template.body[0]);
-		body.body.body.unshift(...instance.body);
-		instance.body.length = 0;
-	}
-
 	let component_block = b.block([
 		...store_setup,
 		...legacy_reactive_declarations,
@@ -372,6 +366,24 @@ export function client_component(analysis, options) {
 		.../** @type {ESTree.Statement[]} */ (template.body)
 	]);
 
+	if (analysis.is_async) {
+		const body = b.function_declaration(
+			b.id('$$body'),
+			[b.id('$$anchor'), b.id('$$props')],
+			component_block
+		);
+		body.async = true;
+
+		state.hoisted.push(body);
+
+		component_block = b.block([
+			b.var('fragment', b.call('$.comment')),
+			b.var('node', b.call('$.first_child', b.id('fragment'))),
+			b.stmt(b.call(body.id, b.id('node'), b.id('$$props'))),
+			b.stmt(b.call('$.append', b.id('$$anchor'), b.id('fragment')))
+		]);
+	}
+
 	if (!analysis.runes) {
 		// Bind static exports to props so that people can access them with bind:x
 		for (const { name, alias } of analysis.exports) {

packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js

@@ -199,47 +199,6 @@ export function Fragment(node, context) {
 	const async =
 		state.metadata.async.length > 0 || (state.analysis.is_async && context.path.length === 0);
 
-	if (async) {
-		// TODO need to create bookends for hydration to work
-		return b.block([
-			b.function_declaration(
-				b.id('$$body'),
-				[b.id('$$anchor')],
-				b.block([
-					b.var(
-						b.array_pattern(state.metadata.async.map(({ id }) => id)),
-						b.call(
-							b.member(
-								b.await(
-									b.call(
-										'$.suspend',
-										b.call(
-											'Promise.all',
-											b.array(
-												state.metadata.async.map(({ expression }) =>
-													b.call('$.async_derived', b.thunk(expression, true))
-												)
-											)
-										)
-									)
-								),
-								'exit'
-							)
-						)
-					),
-					...body,
-					b.stmt(b.call('$.exit'))
-				]),
-				true
-			),
-
-			b.var('fragment', b.call('$.comment')),
-			b.var('node', b.call('$.first_child', b.id('fragment'))),
-			b.stmt(b.call(b.id('$$body'), b.id('node'))),
-			b.stmt(b.call('$.append', b.id('$$anchor'), b.id('fragment')))
-		]);
-	}
-
 	return b.block(body);
 }