fix: parallelize async @consts in the template (#17165)

* fix: parallelize async `@const`s in the template

This fixes #17075 by solving the TODO of #17038 to add out of order rendering for async `@const` declarations in the template.

It's implemented by a new field on the component state which is set as soon as we come across an async const. All async const declarations and those after it will be added to that field, and the existing blockers mechanism is then used to line up the async work correctly. After processing a fragment a `run` command is created from the collected consts.

* fix

* tweak

---------

Co-authored-by: Rich Harris <[email protected]>

Author: dummdidumm

.changeset/social-taxis-tell.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: ensure async `@const` in boundary hydrates correctly

.changeset/stale-items-know.md

@@ -0,0 +1,5 @@
+---
+'svelte': patch
+---
+
+fix: parallelize async `@const`s in the template

packages/svelte/src/compiler/phases/1-parse/utils/create.js

@@ -10,8 +10,7 @@ export function create_fragment(transparent = false) {
 		nodes: [],
 		metadata: {
 			transparent,
-			dynamic: false,
-			has_await: false
+			dynamic: false
 		}
 	};
 }

packages/svelte/src/compiler/phases/2-analyze/visitors/AwaitExpression.js

@@ -26,10 +26,6 @@ export function AwaitExpression(node, context) {
 	if (context.state.expression) {
 		context.state.expression.has_await = true;
 
-		if (context.state.fragment && context.path.some((node) => node.type === 'ConstTag')) {
-			context.state.fragment.metadata.has_await = true;
-		}
-
 		suspend = true;
 	}
 

packages/svelte/src/compiler/phases/3-transform/client/types.d.ts

@@ -51,6 +51,11 @@ export interface ComponentClientTransformState extends ClientTransformState {
 	readonly after_update: Statement[];
 	/** Transformed `{@const }` declarations */
 	readonly consts: Statement[];
+	/** Transformed async `{@const }` declarations (if any) and those coming after them */
+	async_consts?: {
+		id: Identifier;
+		thunks: Expression[];
+	};
 	/** Transformed `let:` directives */
 	readonly let_directives: Statement[];
 	/** Memoized expressions */

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

@@ -24,15 +24,15 @@ export function ConstTag(node, context) {
 			expression = b.call('$.tag', expression, b.literal(declaration.id.name));
 		}
 
-		context.state.consts.push(b.const(declaration.id, expression));
-
 		context.state.transform[declaration.id.name] = { read: get_value };
 
-		// we need to eagerly evaluate the expression in order to hit any
-		// 'Cannot access x before initialization' errors
-		if (dev) {
-			context.state.consts.push(b.stmt(b.call('$.get', declaration.id)));
-		}
+		add_const_declaration(
+			context.state,
+			declaration.id,
+			expression,
+			node.metadata.expression.has_await,
+			context.state.scope.get_bindings(declaration)
+		);
 	} else {
 		const identifiers = extract_identifiers(declaration.id);
 		const tmp = b.id(context.state.scope.generate('computed_const'));
@@ -69,13 +69,13 @@ export function ConstTag(node, context) {
 			expression = b.call('$.tag', expression, b.literal('[@const]'));
 		}
 
-		context.state.consts.push(b.const(tmp, expression));
-
-		// we need to eagerly evaluate the expression in order to hit any
-		// 'Cannot access x before initialization' errors
-		if (dev) {
-			context.state.consts.push(b.stmt(b.call('$.get', tmp)));
-		}
+		add_const_declaration(
+			context.state,
+			tmp,
+			expression,
+			node.metadata.expression.has_await,
+			context.state.scope.get_bindings(declaration)
+		);
 
 		for (const node of identifiers) {
 			context.state.transform[node.name] = {
@@ -84,3 +84,39 @@ export function ConstTag(node, context) {
 		}
 	}
 }
+
+/**
+ * @param {ComponentContext['state']} state
+ * @param {import('estree').Identifier} id
+ * @param {import('estree').Expression} expression
+ * @param {boolean} has_await
+ * @param {import('#compiler').Binding[]} bindings
+ */
+function add_const_declaration(state, id, expression, has_await, bindings) {
+	// we need to eagerly evaluate the expression in order to hit any
+	// 'Cannot access x before initialization' errors
+	const after = dev ? [b.stmt(b.call('$.get', id))] : [];
+
+	if (has_await || state.async_consts) {
+		const run = (state.async_consts ??= {
+			id: b.id(state.scope.generate('promises')),
+			thunks: []
+		});
+
+		state.consts.push(b.let(id));
+
+		const assignment = b.assignment('=', id, expression);
+		const body = after.length === 0 ? assignment : b.block([b.stmt(assignment), ...after]);
+
+		run.thunks.push(b.thunk(body, has_await));
+
+		const blocker = b.member(run.id, b.literal(run.thunks.length - 1), true);
+
+		for (const binding of bindings) {
+			binding.blocker = blocker;
+		}
+	} else {
+		state.consts.push(b.const(id, expression));
+		state.consts.push(...after);
+	}
+}

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

@@ -48,8 +48,6 @@ export function Fragment(node, context) {
 	const is_single_child_not_needing_template =
 		trimmed.length === 1 &&
 		(trimmed[0].type === 'SvelteFragment' || trimmed[0].type === 'TitleElement');
-	const has_await = context.state.init !== null && (node.metadata.has_await || false);
-
 	const template_name = context.state.scope.root.unique('root'); // TODO infer name from parent
 
 	/** @type {Statement[]} */
@@ -72,7 +70,8 @@ export function Fragment(node, context) {
 		metadata: {
 			namespace,
 			bound_contenteditable: context.state.metadata.bound_contenteditable
-		}
+		},
+		async_consts: undefined
 	};
 
 	for (const node of hoisted) {
@@ -153,8 +152,8 @@ export function Fragment(node, context) {
 
 	body.push(...state.let_directives, ...state.consts);
 
-	if (has_await) {
-		body.push(b.if(b.call('$.aborted'), b.return()));
+	if (state.async_consts && state.async_consts.thunks.length > 0) {
+		body.push(b.var(state.async_consts.id, b.call('$.run', b.array(state.async_consts.thunks))));
 	}
 
 	if (is_text_first) {
@@ -177,13 +176,5 @@ export function Fragment(node, context) {
 		body.push(close);
 	}
 
-	if (has_await) {
-		return b.block([
-			b.stmt(
-				b.call('$.async_body', b.id('$$anchor'), b.arrow([b.id('$$anchor')], b.block(body), true))
-			)
-		]);
-	} else {
-		return b.block(body);
-	}
+	return b.block(body);
 }

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

@@ -14,8 +14,6 @@ export function SnippetBlock(node, context) {
 	// TODO hoist where possible
 	/** @type {(Identifier | AssignmentPattern)[]} */
 	const args = [b.id('$$anchor')];
-	const has_await = node.body.metadata.has_await || false;
-
 	/** @type {BlockStatement} */
 	let body;
 
@@ -78,12 +76,8 @@ export function SnippetBlock(node, context) {
 
 	// in dev we use a FunctionExpression (not arrow function) so we can use `arguments`
 	let snippet = dev
-		? b.call(
-				'$.wrap_snippet',
-				b.id(context.state.analysis.name),
-				b.function(null, args, body, has_await)
-			)
-		: b.arrow(args, body, has_await);
+		? b.call('$.wrap_snippet', b.id(context.state.analysis.name), b.function(null, args, body))
+		: b.arrow(args, body);
 
 	const declaration = b.const(node.expression, snippet);
 

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

@@ -48,7 +48,11 @@ export function SvelteBoundary(node, context) {
 		if (child.type === 'ConstTag') {
 			has_const = true;
 			if (!context.state.options.experimental.async) {
-				context.visit(child, { ...context.state, consts: const_tags });
+				context.visit(child, {
+					...context.state,
+					consts: const_tags,
+					scope: context.state.scopes.get(node.fragment) ?? context.state.scope
+				});
 			}
 		}
 	}
@@ -101,7 +105,13 @@ export function SvelteBoundary(node, context) {
 		nodes.push(child);
 	}
 
-	const block = /** @type {BlockStatement} */ (context.visit({ ...node.fragment, nodes }));
+	const block = /** @type {BlockStatement} */ (
+		context.visit(
+			{ ...node.fragment, nodes },
+			// Since we're creating a new fragment the reference in scopes can't match, so we gotta attach the right scope manually
+			{ ...context.state, scope: context.state.scopes.get(node.fragment) ?? context.state.scope }
+		)
+	);
 
 	if (!context.state.options.experimental.async) {
 		block.body.unshift(...const_tags);

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

@@ -105,7 +105,7 @@ export function process_children(nodes, initial, is_element, context) {
 				is_element &&
 				// In case it's wrapped in async the async logic will want to skip sibling nodes up until the end, hence we cannot make this controlled
 				// TODO switch this around and instead optimize for elements with a single block child and not require extra comments (neither for async nor normally)
-				!(node.body.metadata.has_await || node.metadata.expression.is_async())
+				!node.metadata.expression.is_async()
 			) {
 				node.metadata.is_controlled = true;
 			} else {