ripple 0.3.11 → 0.3.13

package/src/compiler/phases/3-transform/server/index.js

@@ -32,6 +32,7 @@ import {
 	hash,
 	flatten_switch_consequent,
 	get_ripple_namespace_call_name,
+	strip_class_typescript_syntax,
 	jsx_to_ripple_node,
 } from '../../../utils.js';
 import { escape } from '../../../../utils/escaping.js';
@@ -65,6 +66,22 @@ function is_template_or_control_flow(node) {
 	);
 }
 
+/**
+ * @param {AST.Node} node
+ * @returns {boolean}
+ */
+function should_wrap_node_in_regular_block(node) {
+	return is_template_or_control_flow(node) && node.type !== 'TryStatement';
+}
+
+/**
+ * @param {AST.Node} node
+ * @returns {boolean}
+ */
+function is_head_element(node) {
+	return node.type === 'Element' && node.id.type === 'Identifier' && node.id.name === 'head';
+}
+
 /**
  * Builds a negated AND condition from return flag names: !__r_1 && !__r_2 && ...
  * @param {string[]} flags
@@ -79,23 +96,6 @@ function build_return_guard(flags) {
 	return condition;
 }
 
-/**
- * @param {AST.ClassDeclaration | AST.ClassExpression} node
- * @param {TransformServerContext} context
- * @returns {void}
- */
-function strip_class_typescript_syntax(node, context) {
-	delete node.typeParameters;
-	delete node.superTypeParameters;
-	delete node.implements;
-
-	if (node.superClass?.type === 'TSInstantiationExpression') {
-		node.superClass = /** @type {AST.Expression} */ (context.visit(node.superClass.expression));
-	} else if (node.superClass && 'typeArguments' in node.superClass) {
-		delete node.superClass.typeArguments;
-	}
-}
-
 /**
  * Collects all unique return statements from the direct children of a body
  * @param {AST.Node[]} children
@@ -131,6 +131,8 @@ function collect_returns_from_children(children) {
 function transform_children(children, context) {
 	const { visit, state } = context;
 	const normalized = normalize_children(children, context);
+	const should_wrap_in_regular_block =
+		state.component !== undefined && !state.skip_regular_blocks && !state.in_regular_block;
 
 	const all_returns = collect_returns_from_children(normalized);
 	/** @type {Map<AST.ReturnStatement, { name: string, tracked: boolean }>} */
@@ -166,8 +168,20 @@ function transform_children(children, context) {
 		}
 	};
 
+	/**
+	 * @param {AST.Statement[]} statements
+	 * @returns {AST.Statement[]}
+	 */
+	const wrap_regular_block = (statements) => {
+		if (!should_wrap_in_regular_block || statements.length === 0) {
+			return statements;
+		}
+
+		return [b.stmt(b.call('_$_.regular_block', b.arrow([], b.block(statements))))];
+	};
+
 	/** @param {AST.Node} node */
-	const process_node = (node) => {
+	const process_node = (node, local_state = state) => {
 		if (node.type === 'BreakStatement') {
 			state.init?.push(b.break);
 			return;
@@ -184,16 +198,9 @@ function transform_children(children, context) {
 			node.type === 'ReturnStatement' ||
 			node.type === 'Component'
 		) {
-			const metadata = { await: false };
 			state.init?.push(
-				/** @type {AST.Statement} */ (visit(node, { ...state, return_flags, metadata })),
+				/** @type {AST.Statement} */ (visit(node, { ...local_state, return_flags })),
 			);
-			if (metadata.await) {
-				state.init?.push(b.if(b.call('_$_.aborted'), b.return(null)));
-				if (state.metadata?.await === false) {
-					state.metadata.await = true;
-				}
-			}
 			if (node.type === 'ReturnStatement') {
 				const info = return_flags.get(node);
 				if (info && !accumulated_flags.includes(info.name)) {
@@ -201,7 +208,7 @@ function transform_children(children, context) {
 				}
 			}
 		} else {
-			visit(node, { ...state, return_flags, template_child: true });
+			visit(node, { ...local_state, return_flags, template_child: true });
 		}
 	};
 
@@ -224,7 +231,7 @@ function transform_children(children, context) {
 		state.init = wrapped;
 
 		for (const group_node of group) {
-			process_node(group_node);
+			process_node(group_node, { ...state, init: wrapped, in_regular_block: true });
 		}
 
 		state.init = saved_init;
@@ -232,18 +239,42 @@ function transform_children(children, context) {
 
 		const guard = build_return_guard(guard_flags);
 		state.init?.push(
-			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_OPEN))),
-		);
-		state.init?.push(b.if(guard, b.block(wrapped)));
-		state.init?.push(
-			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_CLOSE))),
+			...wrap_regular_block([
+				b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_OPEN))),
+				b.if(guard, b.block(wrapped)),
+				b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_CLOSE))),
+			]),
 		);
 	};
 
+	/**
+	 * @param {AST.Node} node
+	 * @returns {void}
+	 */
+	const process_wrapped_template_or_control_flow = (node) => {
+		/** @type {AST.Statement[]} */
+		const wrapped = [];
+		const saved_init = state.init;
+		state.init = wrapped;
+		process_node(node, { ...state, init: wrapped, in_regular_block: true });
+		state.init = saved_init;
+
+		if (wrapped.length === 0) {
+			return;
+		}
+
+		state.init?.push(...wrap_regular_block(wrapped));
+	};
+
 	for (let idx = 0; idx < normalized.length; idx++) {
 		const node = normalized[idx];
 
-		if (accumulated_flags.length > 0 && is_template_or_control_flow(node)) {
+		if (is_head_element(node)) {
+			flush_pending_group();
+			continue;
+		}
+
+		if (accumulated_flags.length > 0 && should_wrap_node_in_regular_block(node)) {
 			if (pending_group.length === 0) {
 				pending_guard_flags = [...accumulated_flags];
 			}
@@ -257,22 +288,23 @@ function transform_children(children, context) {
 		}
 
 		flush_pending_group();
-		process_node(node);
+
+		if (should_wrap_node_in_regular_block(node)) {
+			process_wrapped_template_or_control_flow(node);
+		} else {
+			process_node(node);
+		}
 		push_return_flags(node.metadata?.has_return ? node.metadata.returns : undefined);
 	}
 
 	flush_pending_group();
 
 	const head_elements = /** @type {AST.Element[]} */ (
-		children.filter(
-			(node) => node.type === 'Element' && node.id.type === 'Identifier' && node.id.name === 'head',
-		)
+		children.filter((node) => is_head_element(node))
 	);
 
 	if (head_elements.length) {
-		state.init?.push(
-			b.stmt(b.assignment('=', b.member(b.id('__output'), b.id('target')), b.literal('head'))),
-		);
+		state.init?.push(b.stmt(b.call(b.id('_$_.set_output_target'), b.literal('head'))));
 		for (let i = 0; i < head_elements.length; i++) {
 			const head_element = head_elements[i];
 			// Generate a hash for this head element to match client-side hydration
@@ -281,17 +313,17 @@ function transform_children(children, context) {
 			const hash_value = hash(hash_source);
 
 			// Emit hydration marker comment with hash
-			state.init?.push(
-				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(`<!--${hash_value}-->`))),
-			);
+			state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.literal(`<!--${hash_value}-->`))));
 
-			transform_children(head_element.children, context);
+			transform_children(head_element.children, {
+				...context,
+				state: { ...state, skip_regular_blocks: true },
+			});
 
 			// No closing marker needed for head elements - the hash is sufficient
 		}
-		state.init?.push(
-			b.stmt(b.assignment('=', b.member(b.id('__output'), b.id('target')), b.literal(null))),
-		);
+
+		state.init?.push(b.stmt(b.call(b.id('_$_.set_output_target'), b.literal(null))));
 	}
 }
 
@@ -345,7 +377,8 @@ const visitors = {
 	},
 
 	Component(node, context) {
-		let props_param_output;
+		/** @type {AST.Pattern | null} */
+		let props_param_output = null;
 
 		if (node.params.length > 0) {
 			let props_param = node.params[0];
@@ -366,8 +399,6 @@ const visitors = {
 			}
 		}
 
-		const metadata = { await: false };
-
 		/** @type {AST.Statement[]} */
 		const body_statements = [];
 
@@ -377,10 +408,7 @@ const visitors = {
 			context.state.stylesheets.push(node.css);
 
 			// Register CSS hash during rendering
-			body_statements.push(
-				hash,
-				b.stmt(b.call(b.member(b.id('__output'), b.id('register_css')), hash_id)),
-			);
+			body_statements.push(hash, b.stmt(b.call(b.id('_$_.output_register_css'), hash_id)));
 
 			if (node.metadata.styleIdentifierPresent) {
 				/** @type {AST.Property[]} */
@@ -407,7 +435,6 @@ const visitors = {
 				state: {
 					...context.state,
 					component: node,
-					metadata,
 					applyParentCssScope:
 						node.id?.name === 'render_children' ? context.state.applyParentCssScope : undefined,
 				},
@@ -417,80 +444,25 @@ const visitors = {
 
 		let component_fn = b.function(
 			node.id,
-			node.params.length > 0
-				? [b.id('__output'), /** @type {AST.Pattern} */ (props_param_output)]
-				: [b.id('__output')],
-			b.block([
-				...(metadata.await
-					? [b.return(b.call('_$_.async', b.thunk(b.block(body_statements), true)))]
-					: body_statements),
-			]),
+			props_param_output ? [props_param_output] : [],
+			b.block(body_statements),
 		);
 
-		// Mark function as async if needed
-		if (metadata.await) {
-			component_fn = b.async(component_fn);
-		}
-
 		// Anonymous components return a FunctionExpression
 		if (!node.id) {
-			// For async anonymous components, we need to set .async on the function
-			if (metadata.await) {
-				// Use IIFE pattern: (fn => (fn.async = true, fn))(function() { ... })
-				return b.call(
-					b.arrow(
-						[b.id('fn')],
-						b.sequence([
-							b.assignment('=', b.member(b.id('fn'), b.id('async')), b.true),
-							b.id('fn'),
-						]),
-					),
-					component_fn,
-				);
-			}
 			return component_fn;
 		}
 
 		// Named components return a FunctionDeclaration
-		const declaration = b.function_declaration(
-			node.id,
-			component_fn.params,
-			component_fn.body,
-			component_fn.async,
-		);
-
-		if (metadata.await) {
-			const parent = context.path.at(-1);
-			/** @type {AST.RippleProgram['body'] | null} */
-			let body = null;
-			/** @type {AST.Component | AST.ExportNamedDeclaration} */
-			let target_node = node;
-			if (parent?.type === 'Program' || parent?.type === 'BlockStatement') {
-				body = parent.body;
-			} else if (parent?.type === 'ExportNamedDeclaration') {
-				const grandparent = context.path.at(-2);
-				if (grandparent?.type === 'Program' || grandparent?.type === 'BlockStatement') {
-					body = grandparent.body;
-					target_node = parent;
-				}
-			}
-			if (body !== null) {
-				const index = body.indexOf(target_node);
-				if (index >= 0) {
-					body.splice(
-						index + 1,
-						0,
-						b.stmt(b.assignment('=', b.member(node.id, b.id('async')), b.true)),
-					);
-				}
-			}
-		}
+		const declaration = b.function_declaration(node.id, component_fn.params, component_fn.body);
 
 		return declaration;
 	},
 
 	CallExpression(node, context) {
-		if (!context.state.to_ts) {
+		const { state } = context;
+
+		if (!state.to_ts) {
 			delete node.typeArguments;
 		}
 
@@ -512,7 +484,7 @@ const visitors = {
 
 		const track_call_name = is_ripple_track_call(callee, context);
 		if (track_call_name) {
-			const track_method_name = 'track';
+			const track_method_name = track_call_name === 'trackAsync' ? 'track_async' : 'track';
 
 			return {
 				...node,
@@ -885,7 +857,7 @@ const visitors = {
 			state.init?.push(
 				b.stmt(
 					b.call(
-						b.member(b.id('__output'), b.id('push')),
+						b.id('_$_.output_push'),
 						dynamic_name
 							? b.template([b.quasi('<', false), b.quasi('', false)], [tag_name])
 							: b.literal('<' + /** @type {AST.Literal} */ (tag_name).value),
@@ -918,9 +890,7 @@ const visitors = {
 							: `="${value === true ? '' : escape_html(value, true)}"`
 					}`;
 
-					state.init?.push(
-						b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(attr_str))),
-					);
+					state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.literal(attr_str))));
 				}
 			};
 
@@ -948,7 +918,7 @@ const visitors = {
 						if (is_event_attribute(name)) {
 							continue;
 						}
-						const metadata = { tracking: false, await: false };
+						const metadata = { tracking: false };
 						const expression = /** @type {AST.Expression} */ (
 							visit(attr.value, { ...state, metadata })
 						);
@@ -956,7 +926,7 @@ const visitors = {
 						state.init?.push(
 							b.stmt(
 								b.call(
-									b.member(b.id('__output'), b.id('push')),
+									b.id('_$_.output_push'),
 									b.call(
 										'_$_.attr',
 										b.literal(name),
@@ -985,7 +955,7 @@ const visitors = {
 
 					handle_static_attr(class_attribute.name.name, value);
 				} else {
-					const metadata = { tracking: false, await: false };
+					const metadata = { tracking: false };
 					let expression = /** @type {AST.Expression} */ (
 						visit(attr_value, { ...state, metadata })
 					);
@@ -997,10 +967,7 @@ const visitors = {
 
 					state.init?.push(
 						b.stmt(
-							b.call(
-								b.member(b.id('__output'), b.id('push')),
-								b.call('_$_.attr', b.literal('class'), expression),
-							),
+							b.call(b.id('_$_.output_push'), b.call('_$_.attr', b.literal('class'), expression)),
 						),
 					);
 				}
@@ -1012,7 +979,7 @@ const visitors = {
 				state.init?.push(
 					b.stmt(
 						b.call(
-							b.member(b.id('__output'), b.id('push')),
+							b.id('_$_.output_push'),
 							b.call(
 								'_$_.spread_attrs',
 								b.object(spread_attributes),
@@ -1024,12 +991,7 @@ const visitors = {
 			}
 
 			state.init?.push(
-				b.stmt(
-					b.call(
-						b.member(b.id('__output'), b.id('push')),
-						b.literal(use_self_closing_syntax ? ' />' : '>'),
-					),
-				),
+				b.stmt(b.call(b.id('_$_.output_push'), b.literal(use_self_closing_syntax ? ' />' : '>'))),
 			);
 
 			// In dev mode, emit push_element for runtime nesting validation
@@ -1079,7 +1041,7 @@ const visitors = {
 					state.init?.push(
 						b.stmt(
 							b.call(
-								b.member(b.id('__output'), b.id('push')),
+								b.id('_$_.output_push'),
 								dynamic_name
 									? b.template([b.quasi('</', false), b.quasi('>', false)], [tag_name])
 									: b.literal('</' + /** @type {AST.Literal} */ (tag_name).value + '>'),
@@ -1104,7 +1066,7 @@ const visitors = {
 			for (const attr of node.attributes) {
 				if (attr.type === 'Attribute') {
 					if (attr.name.type === 'Identifier') {
-						const metadata = { tracking: false, await: false };
+						const metadata = { tracking: false };
 						let property =
 							attr.value === null
 								? b.literal(true)
@@ -1177,10 +1139,9 @@ const visitors = {
 				props.push(children_prop);
 			}
 
-			// For SSR, determine if we should await based on component metadata
-			const args = [b.id('__output'), b.object(props)];
+			const args = [b.object(props)];
 
-			// Check if this is a locally defined component and if it's async
+			// Check if this is a locally defined component
 			const component_name = node.id.type === 'Identifier' ? node.id.name : null;
 			const local_metadata = component_name
 				? state.component_metadata.find((m) => m.id === component_name)
@@ -1188,8 +1149,7 @@ const visitors = {
 			const comp_id = b.id('comp');
 			const args_id = b.id('args');
 			const comp_call = b.call(comp_id, b.spread(args_id));
-			const comp_call_regular = b.stmt(comp_call);
-			const comp_call_await = b.stmt(b.await(comp_call));
+			const comp_call_statement = b.stmt(comp_call);
 
 			/** @type {AST.Statement[]} */
 			const init = [];
@@ -1201,28 +1161,10 @@ const visitors = {
 			];
 
 			if (local_metadata) {
-				if (local_metadata?.async) {
-					statements.push(comp_call_await);
-
-					if (state.metadata?.await === false) {
-						state.metadata.await = true;
-					}
-				} else {
-					statements.push(comp_call_regular);
-				}
+				statements.push(comp_call_statement);
 			} else if (!is_element_dynamic(node)) {
-				// it's imported element, so it could be async
-				statements.push(
-					b.if(
-						b.member(comp_id, b.id('async'), false, true),
-						b.block([comp_call_await]),
-						b.if(comp_id, b.block([comp_call_regular])),
-					),
-				);
-
-				if (state.metadata?.await === false) {
-					state.metadata.await = true;
-				}
+				// imported or children
+				statements.push(b.if(comp_id, b.block([comp_call_statement])));
 			} else {
 				// if it's a dynamic element, build the element output
 				// and store the results in the `init` array
@@ -1235,33 +1177,18 @@ const visitors = {
 					}),
 				);
 
-				statements.push(
-					b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_OPEN))),
-				);
+				statements.push(b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_OPEN))));
 
 				statements.push(
 					b.if(
 						b.binary('===', b.unary('typeof', comp_id), b.literal('function')),
-						b.block([
-							b.if(
-								b.member(comp_id, b.id('async')),
-								b.block([comp_call_await]),
-								b.block([comp_call_regular]),
-							),
-						]),
+						b.block([comp_call_statement]),
 						// make sure that falsy values for dynamic element or component don't get rendered
 						b.if(comp_id, b.block(init)),
 					),
 				);
 
-				statements.push(
-					b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_CLOSE))),
-				);
-
-				// Mark parent component as async since this child component could potentially be async
-				if (state.metadata?.await === false) {
-					state.metadata.await = true;
-				}
+				statements.push(b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_CLOSE))));
 			}
 
 			state.init?.push(b.block(statements));
@@ -1299,17 +1226,13 @@ const visitors = {
 			);
 		}
 
-		context.state.init?.push(
-			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_OPEN))),
-		);
+		context.state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_OPEN))));
 
 		context.state.init?.push(
 			b.switch(/** @type {AST.Expression} */ (context.visit(node.discriminant)), cases),
 		);
 
-		context.state.init?.push(
-			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_CLOSE))),
-		);
+		context.state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_CLOSE))));
 	},
 
 	ForOfStatement(node, context) {
@@ -1319,9 +1242,7 @@ const visitors = {
 		}
 		const body_scope = context.state.scopes.get(node.body);
 
-		context.state.init?.push(
-			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_OPEN))),
-		);
+		context.state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_OPEN))));
 
 		const body = transform_body(/** @type {AST.BlockStatement} */ (node.body).body, {
 			...context,
@@ -1342,9 +1263,7 @@ const visitors = {
 			),
 		);
 
-		context.state.init?.push(
-			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_CLOSE))),
-		);
+		context.state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_CLOSE))));
 	},
 
 	IfStatement(node, context) {
@@ -1368,9 +1287,7 @@ const visitors = {
 			}),
 		);
 
-		context.state.init?.push(
-			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_OPEN))),
-		);
+		context.state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_OPEN))));
 
 		/** @type {AST.BlockStatement | AST.IfStatement | null} */
 		let alternate = null;
@@ -1393,9 +1310,7 @@ const visitors = {
 			b.if(/** @type {AST.Expression} */ (context.visit(node.test)), consequent, alternate),
 		);
 
-		context.state.init?.push(
-			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_CLOSE))),
-		);
+		context.state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_CLOSE))));
 	},
 
 	ReturnStatement(node, context) {
@@ -1489,180 +1404,120 @@ const visitors = {
 			return context.next();
 		}
 
-		// If there's a pending block, this is an async operation
 		const has_pending = node.pending !== null;
-		if (has_pending && context.state.metadata?.await === false) {
-			context.state.metadata.await = true;
-		}
+		const has_catch = node.handler !== null;
 
-		const metadata = { await: false };
 		const body = transform_body(node.block.body, {
 			...context,
-			state: { ...context.state, metadata },
+			state: {
+				...context.state,
+				scope: /** @type {ScopeInterface} */ (context.state.scopes.get(node.block)),
+			},
 		});
 
-		// Check if the try block itself contains async operations
-		const is_async = metadata.await || has_pending;
-
-		if (is_async) {
-			if (context.state.metadata?.await === false) {
-				context.state.metadata.await = true;
-			}
+		// Wrap try_fn body with hydration markers when pending or catch is present
+		const try_fn = b.arrow(
+			[],
+			b.block(
+				has_pending || has_catch
+					? [
+							b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_OPEN))),
+							...body,
+							b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_CLOSE))),
+						]
+					: body,
+			),
+		);
 
-			const pending_position_name = node.pending
-				? context.state.scope.generate('__pending_pos')
-				: null;
+		/** @type {AST.Expression} */
+		let catch_fn = b.literal(null);
 
-			// Render pending block first, saving position so we can remove it after async resolves
-			if (node.pending) {
-				context.state.init?.push(
-					b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_OPEN))),
-				);
-				const pending_body = transform_body(node.pending.body, {
-					...context,
-					state: {
-						...context.state,
-						scope: /** @type {ScopeInterface} */ (context.state.scopes.get(node.pending)),
-					},
-				});
-				context.state.init?.push(
-					b.var(
-						b.id(/** @type {string} */ (pending_position_name)),
-						b.member(b.member(b.id('__output'), b.id('body')), b.id('length')),
-					),
-				);
-				context.state.init?.push(...pending_body);
+		const handler = node.handler;
+		if (handler) {
+			if (handler.param) {
+				delete handler.param.typeAnnotation;
 			}
 
-			// For SSR with pending block: render the resolved content wrapped in async
-			// In a streaming SSR implementation, we'd render pending first, then stream resolved
-			const handler = node.handler;
-			/** @type {AST.Statement[]} */
-			let try_statements = body;
-			if (handler != null) {
-				try_statements = [
-					b.try(
-						b.block(body),
-						b.catch_clause(
-							handler.param || b.id('error'),
-							b.block(
-								transform_body(handler.body.body, {
-									...context,
-									state: {
-										...context.state,
-										scope: /** @type {ScopeInterface} */ (context.state.scopes.get(handler.body)),
-									},
-								}),
-							),
-						),
-					),
-				];
-			}
+			/** @type {AST.Statement | null} */
+			let reset = null;
+			if (handler.resetParam) {
+				delete handler.resetParam.typeAnnotation;
 
-			// Remove pending content before rendering resolved/catch content
-			if (node.pending) {
-				try_statements = [
-					b.stmt(
-						b.assignment(
-							'=',
-							b.member(b.id('__output'), b.id('body')),
-							b.call(
-								b.member(b.member(b.id('__output'), b.id('body')), b.id('slice')),
-								b.literal(0),
-								b.id(/** @type {string} */ (pending_position_name)),
-							),
-						),
-					),
-					...try_statements,
-				];
+				reset = b.const(
+					handler.resetParam.type === 'AssignmentPattern'
+						? /** @type {AST.Identifier} */ (handler.resetParam.left).name
+						: /** @type {AST.Identifier} */ (handler.resetParam).name,
+					b.id('_$_.noop'),
+				);
 			}
 
-			context.state.init?.push(
-				b.stmt(b.await(b.call('_$_.async', b.thunk(b.block(try_statements), true)))),
+			catch_fn = b.arrow(
+				[handler.param || b.id('error')],
+				b.block([
+					b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_OPEN))),
+					...(reset ? [reset] : []),
+					...transform_body(handler.body.body, {
+						...context,
+						state: {
+							...context.state,
+							scope: /** @type {ScopeInterface} */ (context.state.scopes.get(handler.body)),
+						},
+					}),
+					b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_CLOSE))),
+				]),
 			);
+		}
 
-			if (node.pending) {
-				context.state.init?.push(
-					b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_CLOSE))),
-				);
-			}
-		} else {
-			// No async, just regular try/catch
-			if (node.handler != null) {
-				const handler_body = transform_body(node.handler.body.body, {
+		const pending_body = node.pending
+			? transform_body(node.pending.body, {
 					...context,
 					state: {
 						...context.state,
-						scope: /** @type {ScopeInterface} */ (context.state.scopes.get(node.handler.body)),
+						scope: /** @type {ScopeInterface} */ (context.state.scopes.get(node.pending)),
 					},
-				});
-
-				context.state.init?.push(
-					b.try(
-						b.block(body),
-						b.catch_clause(node.handler.param || b.id('error'), b.block(handler_body)),
-					),
-				);
-			} else {
-				context.state.init?.push(...body);
-			}
-		}
-	},
-
-	AwaitExpression(node, context) {
-		const { state } = context;
-
-		if (state.to_ts) {
-			return context.next();
-		}
-
-		if (state.metadata?.await === false) {
-			state.metadata.await = true;
-		}
-
-		return b.await(/** @type {AST.AwaitExpression} */ (context.visit(node.argument)));
-	},
+				})
+			: null;
+
+		// Wrap pending_fn body with hydration markers
+		const pending_fn =
+			pending_body !== null
+				? b.arrow(
+						[],
+						b.block([
+							b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_OPEN))),
+							...pending_body,
+							b.stmt(b.call(b.id('_$_.output_push'), b.literal(BLOCK_CLOSE))),
+						]),
+					)
+				: b.literal(null);
 
-	MemberExpression(node, context) {
-		return context.next();
+		context.state.init?.push(b.stmt(b.call('_$_.try_block', try_fn, catch_fn, pending_fn)));
 	},
 
 	RippleExpression(node, { visit, state }) {
-		const metadata = { await: false };
-		let expression = /** @type {AST.Expression} */ (visit(node.expression, { ...state, metadata }));
+		let expression = /** @type {AST.Expression} */ (visit(node.expression, state));
 		const is_children_expression = is_children_template_expression(node.expression, state.scope);
 
 		if (expression.type === 'Literal') {
 			state.init?.push(
-				b.stmt(
-					b.call(b.member(b.id('__output'), b.id('push')), b.literal(escape(expression.value))),
-				),
+				b.stmt(b.call(b.id('_$_.output_push'), b.literal(escape(expression.value)))),
 			);
 		} else if (is_children_expression) {
-			state.init?.push(b.stmt(b.call('_$_.render_expression', b.id('__output'), expression)));
+			state.init?.push(b.stmt(b.call('_$_.render_expression', expression)));
 		} else {
-			state.init?.push(
-				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.call('_$_.escape', expression))),
-			);
+			state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.call('_$_.escape', expression))));
 		}
 	},
 
-	Text(node, context) {
-		const metadata = { await: false };
-		let expression = /** @type {AST.Expression} */ (
-			context.visit(node.expression, { ...context.state, metadata })
-		);
+	Text(node, { visit, state }) {
+		let expression = /** @type {AST.Expression} */ (visit(node.expression, state));
 
 		if (expression.type === 'Literal') {
-			context.state.init?.push(
-				b.stmt(
-					b.call(b.member(b.id('__output'), b.id('push')), b.literal(escape(expression.value))),
-				),
+			state.init?.push(
+				b.stmt(b.call(b.id('_$_.output_push'), b.literal(escape(expression.value)))),
 			);
 		} else {
-			context.state.init?.push(
-				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.call('_$_.escape', expression))),
-			);
+			state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.call('_$_.escape', expression))));
 		}
 	},
 
@@ -1692,31 +1547,24 @@ const visitors = {
 			}
 		} else {
 			// Expression context: return ripple_element(render_fn)
-			const render_fn = b.function(b.id('render_children'), [b.id('__output')], b.block(init));
+			const render_fn = b.function(b.id('render_children'), [], b.block(init));
 			return b.call('_$_.ripple_element', render_fn);
 		}
 	},
 
 	Html(node, { visit, state }) {
-		const metadata = { await: false };
-		const expression = /** @type {AST.Expression} */ (
-			visit(node.expression, { ...state, metadata })
-		);
+		const expression = /** @type {AST.Expression} */ (visit(node.expression, state));
 
 		// For literal values, compute hash at build time
 		if (expression.type === 'Literal') {
 			const value = String(expression.value ?? '');
 			const hash_value = hash(value);
 			// Push hash comment
-			state.init?.push(
-				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(`<!--${hash_value}-->`))),
-			);
+			state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.literal(`<!--${hash_value}-->`))));
 			// Push the HTML content
-			state.init?.push(b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(value))));
+			state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.literal(value))));
 			// Push empty comment as end marker
-			state.init?.push(
-				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal('<!---->'))),
-			);
+			state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.literal('<!---->'))));
 		} else {
 			// For dynamic values, compute hash at runtime
 			// Create a variable to store the value
@@ -1729,7 +1577,7 @@ const visitors = {
 				state.init?.push(
 					b.stmt(
 						b.call(
-							b.member(b.id('__output'), b.id('push')),
+							b.id('_$_.output_push'),
 							b.binary(
 								'+',
 								b.binary('+', b.literal('<!--'), b.call('_$_.hash', b.id(value_id))),
@@ -1739,19 +1587,15 @@ const visitors = {
 					),
 				);
 				// Push the HTML content
-				state.init?.push(b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.id(value_id))));
+				state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.id(value_id))));
 				// Push empty comment as end marker
-				state.init?.push(
-					b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal('<!---->'))),
-				);
+				state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.literal('<!---->'))));
 			}
 		}
 	},
 
 	ScriptContent(node, context) {
-		context.state.init?.push(
-			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(node.content))),
-		);
+		context.state.init?.push(b.stmt(b.call(b.id('_$_.output_push'), b.literal(node.content))));
 	},
 
 	ServerBlock(node, context) {
@@ -1877,15 +1721,21 @@ export function transform_server(filename, source, analysis, minify_css, dev = f
 		}
 	}
 
-	// Add async property to component functions
+	/** @type {AST.Program['body']} */
+	let body = [];
+
 	for (const import_node of state.imports) {
 		if (typeof import_node === 'string') {
-			program.body.unshift(b.stmt(b.id(import_node)));
+			body.push(b.stmt(b.id(import_node)));
 		} else {
-			program.body.unshift(import_node);
+			body.push(import_node);
 		}
 	}
 
+	body.push(...program.body);
+
+	program.body = body;
+
 	const js = print(program, /** @type {Visitors<AST.Node, TransformServerState>} */ (ts()), {
 		sourceMapContent: source,
 		sourceMapSource: path.basename(filename),