diff --git a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js b/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js index 93540db6a7..0861a7735c 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/transform-client.js +++ b/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) { diff --git a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js b/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js index a4da29743e..da65862fd9 100644 --- a/packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js +++ b/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); }