feat: async SSR

.github/workflows/ci.yml

@@ -57,6 +57,7 @@ jobs:
       - run: pnpm install --frozen-lockfile
       - run: pnpm playwright install chromium
       - run: pnpm test runtime-runes
+      - run: pnpm test server-side-rendering
         env:
           CI: true
           SVELTE_NO_ASYNC: true

documentation/docs/98-reference/.generated/shared-errors.md

@@ -3,18 +3,14 @@
 ### await_outside_boundary
 
 ```
-Cannot await outside a `<svelte:boundary>` with a `pending` snippet
+Cannot await outside a `<svelte:boundary>`.
 ```
 
-The `await` keyword can only appear in a `$derived(...)` or template expression, or at the top level of a component's `<script>` block, if it is inside a [`<svelte:boundary>`](/docs/svelte/svelte-boundary) that has a `pending` snippet:
+The `await` keyword can only appear in a `$derived(...)` or template expression, or at the top level of a component's `<script>` block, if it is inside a [`<svelte:boundary>`](/docs/svelte/svelte-boundary):
 
 ```svelte
 <svelte:boundary>
 	<p>{await getData()}</p>
-
-	{#snippet pending()}
-		<p>loading...</p>
-	{/snippet}
 </svelte:boundary>
 ```
 

packages/svelte/messages/shared-errors/errors.md

@@ -1,16 +1,12 @@
 ## await_outside_boundary
 
-> Cannot await outside a `<svelte:boundary>` with a `pending` snippet
+> Cannot await outside a `<svelte:boundary>`.
 
-The `await` keyword can only appear in a `$derived(...)` or template expression, or at the top level of a component's `<script>` block, if it is inside a [`<svelte:boundary>`](/docs/svelte/svelte-boundary) that has a `pending` snippet:
+The `await` keyword can only appear in a `$derived(...)` or template expression, or at the top level of a component's `<script>` block, if it is inside a [`<svelte:boundary>`](/docs/svelte/svelte-boundary):
 
 ```svelte
 <svelte:boundary>
 	<p>{await getData()}</p>
-
-	{#snippet pending()}
-		<p>loading...</p>
-	{/snippet}
 </svelte:boundary>
 ```
 

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) {
@@ -303,8 +306,11 @@ export function analyze_module(source, options) {
 			has_props_rune: false,
 			options: /** @type {ValidatedCompileOptions} */ (options),
 			fragment: null,
+			title: null,
+			boundary: null,
 			parent_element: null,
-			reactive_statement: null
+			reactive_statement: null,
+			async_hoist_boundary: null
 		},
 		visitors
 	);
@@ -531,7 +537,9 @@ export function analyze_component(root, source, options) {
 		source,
 		snippet_renderers: new Map(),
 		snippets: new Set(),
-		async_deriveds: new Set()
+		async_deriveds: new Set(),
+		suspends_without_fallback: false,
+		hoisted_promises: new Map()
 	};
 
 	state.adjust({
@@ -691,13 +699,16 @@ export function analyze_component(root, source, options) {
 				options,
 				ast_type: ast === instance.ast ? 'instance' : ast === template.ast ? 'template' : 'module',
 				fragment: ast === template.ast ? ast : null,
+				title: null,
+				boundary: null,
 				parent_element: null,
 				has_props_rune: false,
 				component_slots: new Set(),
 				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);
@@ -757,14 +768,17 @@ export function analyze_component(root, source, options) {
 				analysis,
 				options,
 				fragment: ast === template.ast ? ast : null,
+				title: null,
+				boundary: null,
 				parent_element: null,
 				has_props_rune: false,
 				ast_type: ast === instance.ast ? 'instance' : ast === template.ast ? 'template' : 'module',
 				reactive_statement: null,
 				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

@@ -9,6 +9,16 @@ export interface AnalysisState {
 	options: ValidatedCompileOptions;
 	ast_type: 'instance' | 'template' | 'module';
 	fragment: AST.Fragment | 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
@@ -12,17 +13,31 @@ export function AwaitExpression(node, context) {
 	if (context.state.expression) {
 		context.state.expression.has_await = true;
 
-		if (
-			context.state.fragment &&
-			// TODO there's probably a better way to do this
-			context.path.some((node) => node.type === 'ConstTag')
-		) {
+		if (context.state.fragment && context.path.some((node) => node.type === 'ConstTag')) {
 			context.state.fragment.metadata.has_await = true;
 		}
 
+		if (context.state.async_hoist_boundary) {
+			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
+				)
+			);
+		}
+
 		suspend = true;
 	}
 
+	if (context.state.title) {
+		context.state.title.metadata.has_await = true;
+	}
+
 	// disallow top-level `await` or `await` in template expressions
 	// unless a) in runes mode and b) opted into `experimental.async`
 	if (suspend) {
@@ -33,6 +48,8 @@ export function AwaitExpression(node, context) {
 		if (!context.state.analysis.runes) {
 			e.legacy_await_invalid(node);
 		}
+
+		context.state.analysis.suspends_without_fallback ||= !context.state.boundary?.metadata.pending;
 	}
 
 	context.next();

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/RegularElement.js

@@ -70,7 +70,7 @@ export function RegularElement(node, context) {
 		)
 	) {
 		const child = node.fragment.nodes[0];
-		node.attributes.push(create_attribute('value', child.start, child.end, [child]));
+		node.metadata.synthetic_value_node = child;
 	}
 
 	const binding = context.state.scope.get(node.name);

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

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

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

@@ -14,6 +14,10 @@ export function SvelteBoundary(node, context) {
 			e.svelte_boundary_invalid_attribute(attribute);
 		}
 
+		if (attribute.name === 'pending') {
+			node.metadata.pending = attribute;
+		}
+
 		if (
 			attribute.value === true ||
 			(Array.isArray(attribute.value) &&
@@ -23,5 +27,16 @@ export function SvelteBoundary(node, context) {
 		}
 	}
 
-	context.next();
+	node.metadata.pending ??=
+		/** @type {AST.SnippetBlock | undefined} */ (
+			node.fragment.nodes.find(
+				(node) => node.type === 'SnippetBlock' && node.expression.name === 'pending'
+			)
+		) ?? null;
+
+	context.next({
+		...context.state,
+		boundary: node,
+		async_hoist_boundary: node.fragment
+	});
 }

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

@@ -17,5 +17,5 @@ export function TitleElement(node, context) {
 		}
 	}
 
-	context.next();
+	context.visit(node.fragment, { ...context.state, title: node });
 }