basic SSR

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

@@ -1,5 +1,11 @@
 <!-- This file is generated by scripts/process-messages/index.js. Do not edit! -->
 
+### await_outside_boundary
+
+```
+Cannot await outside a `<svelte:boundary>` with a `pending` snippet
+```
+
 ### invalid_default_snippet
 
 ```

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

@@ -1,3 +1,9 @@
+## await_outside_boundary
+
+> Cannot await outside a `<svelte:boundary>` with a `pending` snippet
+
+TODO
+
 ## invalid_default_snippet
 
 > Cannot use `{@render children(...)}` if the parent component uses `let:` directives. Consider using a named snippet instead

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

@@ -1,10 +1,10 @@
 /** @import { AwaitExpression, Expression } from 'estree' */
-/** @import { ComponentContext } from '../types' */
+/** @import { Context } from '../types' */
 import * as b from '../../../../utils/builders.js';
 
 /**
  * @param {AwaitExpression} node
- * @param {ComponentContext} context
+ * @param {Context} context
  */
 export function AwaitExpression(node, context) {
 	const suspend = context.state.analysis.suspenders.has(node);

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

@@ -10,6 +10,7 @@ import { dev, filename } from '../../../state.js';
 import { render_stylesheet } from '../css/index.js';
 import { AssignmentExpression } from './visitors/AssignmentExpression.js';
 import { AwaitBlock } from './visitors/AwaitBlock.js';
+import { AwaitExpression } from './visitors/AwaitExpression.js';
 import { CallExpression } from './visitors/CallExpression.js';
 import { ClassBody } from './visitors/ClassBody.js';
 import { Component } from './visitors/Component.js';
@@ -44,6 +45,7 @@ import { SvelteBoundary } from './visitors/SvelteBoundary.js';
 const global_visitors = {
 	_: set_scope,
 	AssignmentExpression,
+	AwaitExpression,
 	CallExpression,
 	ClassBody,
 	ExpressionStatement,

packages/svelte/src/compiler/phases/3-transform/server/visitors/AwaitExpression.js

@@ -0,0 +1,17 @@
+/** @import { AwaitExpression } from 'estree' */
+/** @import { ComponentContext } from '../types.js' */
+import * as b from '../../../../utils/builders.js';
+
+/**
+ * @param {AwaitExpression} node
+ * @param {ComponentContext} context
+ */
+export function AwaitExpression(node, context) {
+	const suspend = context.state.analysis.suspenders.has(node);
+
+	if (!suspend) {
+		return context.next();
+	}
+
+	return b.call('$.await_outside_boundary');
+}

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

@@ -1,17 +1,38 @@
-/** @import { BlockStatement } from 'estree' */
+/** @import { BlockStatement, Expression } from 'estree' */
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../../../internal/server/hydration.js';
 import * as b from '../../../../utils/builders.js';
+import { build_attribute_value } from './shared/utils.js';
 
 /**
  * @param {AST.SvelteBoundary} node
  * @param {ComponentContext} context
  */
 export function SvelteBoundary(node, context) {
-	context.state.template.push(
-		b.literal(BLOCK_OPEN),
-		/** @type {BlockStatement} */ (context.visit(node.fragment)),
-		b.literal(BLOCK_CLOSE)
+	context.state.template.push(b.literal(BLOCK_OPEN));
+
+	// if this has a `pending` snippet, render it
+	const pending_attribute = /** @type {AST.Attribute} */ (
+		node.attributes.find((node) => node.type === 'Attribute' && node.name === 'pending')
+	);
+
+	const pending_snippet = /** @type {AST.SnippetBlock} */ (
+		node.fragment.nodes.find(
+			(node) => node.type === 'SnippetBlock' && node.expression.name === 'pending'
+		)
 	);
+
+	if (pending_attribute) {
+		const value = build_attribute_value(pending_attribute.value, context, false, true);
+		context.state.template.push(b.call(value, b.id('$$payload')));
+	} else if (pending_snippet) {
+		context.state.template.push(
+			/** @type {BlockStatement} */ (context.visit(pending_snippet.body))
+		);
+	} else {
+		context.state.template.push(/** @type {BlockStatement} */ (context.visit(node.fragment)));
+	}
+
+	context.state.template.push(b.literal(BLOCK_CLOSE));
 }

packages/svelte/src/internal/server/index.js

@@ -545,3 +545,5 @@ export {
 } from '../shared/validate.js';
 
 export { escape_html as escape };
+
+export { await_outside_boundary } from '../shared/errors.js';

packages/svelte/src/internal/shared/errors.js

@@ -62,4 +62,19 @@ export function svelte_element_invalid_this_value() {
 	} else {
 		throw new Error(`https://svelte.dev/e/svelte_element_invalid_this_value`);
 	}
+}
+
+/**
+ * Cannot await outside a `<svelte:boundary>` with a `pending` snippet
+ * @returns {never}
+ */
+export function await_outside_boundary() {
+	if (DEV) {
+		const error = new Error(`await_outside_boundary\nCannot await outside a \`<svelte:boundary>\` with a \`pending\` snippet\nhttps://svelte.dev/e/await_outside_boundary`);
+
+		error.name = 'Svelte error';
+		throw error;
+	} else {
+		throw new Error(`https://svelte.dev/e/await_outside_boundary`);
+	}
 }