feat: hoisting

Author: elliott-with-the-longest-name-on-github

packages/svelte/src/compiler/phases/1-parse/state/element.js

@@ -177,7 +177,8 @@ export default function element(parser) {
 						mathml: false,
 						scoped: false,
 						has_spread: false,
-						path: []
+						path: [],
+						synthetic_value_node: null
 					}
 				}
 			: /** @type {AST.ElementLike} */ ({

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

@@ -11,7 +11,9 @@ export function create_fragment(transparent = false) {
 		metadata: {
 			transparent,
 			dynamic: false,
-			has_await: false
+			has_await: false,
+			// name is added later, after we've done scope analysis
+			hoisted_promises: { name: '', promises: [] }
 		}
 	};
 }

packages/svelte/src/compiler/phases/2-analyze/index.js

@@ -131,6 +131,9 @@ const visitors = {
 		ignore_map.set(node, structuredClone(ignore_stack));
 
 		const scope = state.scopes.get(node);
+		if (node.type === 'Fragment') {
+			node.metadata.hoisted_promises.name = state.scope.generate('promises');
+		}
 		next(scope !== undefined && scope !== state.scope ? { ...state, scope } : state);
 
 		if (ignores.length > 0) {
@@ -307,7 +310,8 @@ export function analyze_module(source, options) {
 			title: null,
 			boundary: null,
 			parent_element: null,
-			reactive_statement: null
+			reactive_statement: null,
+			async_hoist_boundary: null
 		},
 		visitors
 	);
@@ -535,7 +539,8 @@ export function analyze_component(root, source, options) {
 		snippet_renderers: new Map(),
 		snippets: new Set(),
 		async_deriveds: new Set(),
-		has_blocking_await: false
+		has_blocking_await: false,
+		hoisted_promises: new Map()
 	};
 
 	state.adjust({
@@ -704,7 +709,8 @@ export function analyze_component(root, source, options) {
 				expression: null,
 				state_fields: new Map(),
 				function_depth: scope.function_depth,
-				reactive_statement: null
+				reactive_statement: null,
+				async_hoist_boundary: ast === template.ast ? ast : null
 			};
 
 			walk(/** @type {AST.SvelteNode} */ (ast), state, visitors);
@@ -774,7 +780,8 @@ export function analyze_component(root, source, options) {
 				component_slots: new Set(),
 				expression: null,
 				state_fields: new Map(),
-				function_depth: scope.function_depth
+				function_depth: scope.function_depth,
+				async_hoist_boundary: ast === template.ast ? ast : null
 			};
 
 			walk(/** @type {AST.SvelteNode} */ (ast), state, visitors);

packages/svelte/src/compiler/phases/2-analyze/types.d.ts

@@ -12,6 +12,14 @@ export interface AnalysisState {
 	snippet: AST.SnippetBlock | null;
 	title: AST.TitleElement | null;
 	boundary: AST.SvelteBoundary | null;
+	/**
+	 * The "anchor" fragment for any hoisted promises. This is the root fragment when
+	 * walking starts and until another boundary fragment is encountered, like a
+	 * consequent or alternate of an `#if` or `#each` block. When this fragment is emitted
+	 * during server transformation, the promise expressions will be hoisted out of the fragment
+	 * and placed right above it in an array.
+	 */
+	async_hoist_boundary: AST.Fragment | null;
 	/**
 	 * Tag name of the parent element. `null` if the parent is `svelte:element`, `#snippet`, a component or the root.
 	 * Parent doesn't necessarily mean direct path predecessor because there could be `#each`, `#if` etc in-between.

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

@@ -41,8 +41,25 @@ export function AwaitBlock(node, context) {
 
 	mark_subtree_dynamic(context.path);
 
+	// this one doesn't get the new state because it still hoists to the existing scope
 	context.visit(node.expression, { ...context.state, expression: node.metadata.expression });
-	if (node.pending) context.visit(node.pending);
-	if (node.then) context.visit(node.then);
-	if (node.catch) context.visit(node.catch);
+
+	if (node.pending) {
+		context.visit(node.pending, {
+			...context.state,
+			async_hoist_boundary: node.pending
+		});
+	}
+	if (node.then) {
+		context.visit(node.then, {
+			...context.state,
+			async_hoist_boundary: node.then
+		});
+	}
+	if (node.catch) {
+		context.visit(node.catch, {
+			...context.state,
+			async_hoist_boundary: node.catch
+		});
+	}
 }

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

@@ -1,6 +1,7 @@
 /** @import { AwaitExpression } from 'estree' */
 /** @import { Context } from '../types' */
 import * as e from '../../../errors.js';
+import * as b from '#compiler/builders';
 
 /**
  * @param {AwaitExpression} node
@@ -19,8 +20,21 @@ export function AwaitExpression(node, context) {
 		suspend = true;
 	}
 
-	if (context.state.snippet) {
-		context.state.snippet.metadata.has_await = true;
+	// Only set has_await on the boundary when we're in a template expression context
+	// (not in event handlers or other non-template contexts)
+	if (context.state.async_hoist_boundary && context.state.expression) {
+		context.state.async_hoist_boundary.metadata.is_async = true;
+		const len = context.state.async_hoist_boundary.metadata.hoisted_promises.promises.push(
+			node.argument
+		);
+		context.state.analysis.hoisted_promises.set(
+			node.argument,
+			b.member(
+				b.id(context.state.async_hoist_boundary.metadata.hoisted_promises.name),
+				b.literal(len - 1),
+				true
+			)
+		);
 	}
 
 	if (context.state.title) {

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

@@ -35,9 +35,17 @@ export function EachBlock(node, context) {
 		scope: /** @type {Scope} */ (context.state.scope.parent)
 	});
 
-	context.visit(node.body);
+	context.visit(node.body, {
+		...context.state,
+		async_hoist_boundary: node.body
+	});
 	if (node.key) context.visit(node.key);
-	if (node.fallback) context.visit(node.fallback);
+	if (node.fallback) {
+		context.visit(node.fallback, {
+			...context.state,
+			async_hoist_boundary: node.fallback
+		});
+	}
 
 	if (!context.state.analysis.runes) {
 		let mutated =

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

@@ -22,6 +22,14 @@ export function IfBlock(node, context) {
 		expression: node.metadata.expression
 	});
 
-	context.visit(node.consequent);
-	if (node.alternate) context.visit(node.alternate);
+	context.visit(node.consequent, {
+		...context.state,
+		async_hoist_boundary: node.consequent
+	});
+	if (node.alternate) {
+		context.visit(node.alternate, {
+			...context.state,
+			async_hoist_boundary: node.alternate
+		});
+	}
 }

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

@@ -17,5 +17,9 @@ export function KeyBlock(node, context) {
 	mark_subtree_dynamic(context.path);
 
 	context.visit(node.expression, { ...context.state, expression: node.metadata.expression });
-	context.visit(node.fragment);
+
+	context.visit(node.fragment, {
+		...context.state,
+		async_hoist_boundary: node.fragment
+	});
 }

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

@@ -23,7 +23,12 @@ export function SnippetBlock(node, context) {
 		}
 	}
 
-	context.next({ ...context.state, parent_element: null, snippet: node });
+	context.next({
+		...context.state,
+		parent_element: null,
+		snippet: node,
+		async_hoist_boundary: node.body
+	});
 
 	const can_hoist =
 		context.path.length === 1 &&