ripple 0.2.103 → 0.2.104

package/package.json

@@ -3,7 +3,7 @@
   "description": "Ripple is an elegant TypeScript UI framework",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.2.103",
+  "version": "0.2.104",
   "type": "module",
   "module": "src/runtime/index-client.js",
   "main": "src/runtime/index-client.js",

package/src/compiler/phases/2-analyze/index.js

@@ -106,7 +106,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */ (parent)) &&
+			is_reference(node, /** @type {Node} */(parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -117,7 +117,7 @@ const visitors = {
 		}
 
 		if (
-			is_reference(node, /** @type {Node} */ (parent)) &&
+			is_reference(node, /** @type {Node} */(parent)) &&
 			node.tracked &&
 			binding?.node !== node
 		) {
@@ -250,7 +250,10 @@ const visitors = {
 		}
 		const elements = [];
 
-		context.next({ ...context.state, elements, function_depth: context.state.function_depth + 1 });
+		// Track metadata for this component
+		const metadata = { await: false };
+
+		context.next({ ...context.state, elements, function_depth: context.state.function_depth + 1, metadata });
 
 		const css = node.css;
 
@@ -259,6 +262,12 @@ const visitors = {
 				prune_css(css, node);
 			}
 		}
+
+		// Store component metadata in analysis
+		context.state.analysis.component_metadata.push({
+			id: node.id.name,
+			async: metadata.await,
+		});
 	},
 
 	ForStatement(node, context) {
@@ -357,6 +366,11 @@ const visitors = {
 		}
 
 		if (node.pending) {
+			// Try/pending blocks indicate async operations
+			if (context.state.metadata?.await === false) {
+				context.state.metadata.await = true;
+			}
+
 			node.metadata = {
 				has_template: false,
 			};
@@ -594,6 +608,7 @@ export function analyze(ast, filename) {
 		ast,
 		scope,
 		scopes,
+		component_metadata: [],
 	};
 
 	walk(

package/src/compiler/phases/3-transform/segments.js

@@ -99,15 +99,19 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 	/** @type {string[]} */
 	const tokens = [];
 	
+	// We have to visit everything in generated order to maintain correct indices
 	walk(ast, null, {
-		_(node, { next, visit }) {
+		_(node, { visit }) {
 			// Collect key node types: Identifiers, Literals, and JSX Elements
 			if (node.type === 'Identifier' && node.name) {
 				tokens.push(node.name);
+				return; // Leaf node, don't traverse further
 			} else if (node.type === 'JSXIdentifier' && node.name) {
 				tokens.push(node.name);
+				return; // Leaf node, don't traverse further
 			} else if (node.type === 'Literal' && node.raw) {
 				tokens.push(node.raw);
+				return; // Leaf node, don't traverse further
 			} else if (node.type === 'ImportDeclaration') {
 				// Visit specifiers in source order
 				if (node.specifiers) {
@@ -134,15 +138,15 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 				}
 				return;
 			} else if (node.type === 'ExportNamedDeclaration') {
-				// Visit in source order: declaration, specifiers
-				if (node.declaration) {
-					visit(node.declaration);
-				}
-				if (node.specifiers) {
+				if (node.specifiers && node.specifiers.length > 0) {
 					for (const specifier of node.specifiers) {
 						visit(specifier);
 					}
 				}
+				if (node.declaration) {
+					// The declaration will be visited with proper ordering
+					visit(node.declaration);
+				}
 				return;
 			} else if (node.type === 'ExportDefaultDeclaration') {
 				// Visit the declaration
@@ -153,6 +157,41 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 			} else if (node.type === 'ExportAllDeclaration') {
 				// Nothing to visit (just source string)
 				return;
+			} else if (node.type === 'JSXOpeningElement') {
+				// Visit name and attributes in source order
+				if (node.name) {
+					visit(node.name);
+				}
+				if (node.attributes) {
+					for (const attr of node.attributes) {
+						visit(attr);
+					}
+				}
+				return;
+			} else if (node.type === 'JSXAttribute') {
+				// Visit name and value in source order
+				if (node.name) {
+					visit(node.name);
+				}
+				if (node.value) {
+					visit(node.value);
+				}
+				return;
+			} else if (node.type === 'JSXSpreadAttribute') {
+				// Visit the spread argument
+				if (node.argument) {
+					visit(node.argument);
+				}
+				return;
+			} else if (node.type === 'JSXExpressionContainer') {
+				// Visit the expression inside {}
+				if (node.expression) {
+					visit(node.expression);
+				}
+				return;
+			} else if (node.type === 'JSXText') {
+				// Text content, no tokens to collect
+				return;
 			} else if (node.type === 'JSXElement') {
 				// Manually visit in source order: opening element, children, closing element
 				
@@ -335,11 +374,18 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 				return;
 			} else if (node.type === 'Property') {
 				// Visit in source order: key, value
-				if (node.key) {
-					visit(node.key);
-				}
-				if (node.value) {
-					visit(node.value);
+				// For shorthand properties ({ count }), key and value are the same node, only visit once
+				if (node.shorthand) {
+					if (node.value) {
+						visit(node.value);
+					}
+				} else {
+					if (node.key) {
+						visit(node.key);
+					}
+					if (node.value) {
+						visit(node.value);
+					}
 				}
 				return;
 			} else if (node.type === 'ArrayExpression' || node.type === 'ArrayPattern') {
@@ -459,9 +505,482 @@ export function convert_source_map_to_mappings(ast, source, generated_code) {
 					visit(node.value);
 				}
 				return;
+			} else if (node.type === 'SequenceExpression') {
+				// Visit expressions in order
+				if (node.expressions) {
+					for (const expr of node.expressions) {
+						visit(expr);
+					}
+				}
+				return;
+			} else if (node.type === 'SpreadElement' || node.type === 'RestElement') {
+				// Visit the argument
+				if (node.argument) {
+					visit(node.argument);
+				}
+				return;
+			} else if (node.type === 'YieldExpression' || node.type === 'AwaitExpression') {
+				// Visit the argument if present
+				if (node.argument) {
+					visit(node.argument);
+				}
+				return;
+			} else if (node.type === 'ChainExpression') {
+				// Visit the expression
+				if (node.expression) {
+					visit(node.expression);
+				}
+				return;
+			} else if (node.type === 'Super' || node.type === 'ThisExpression') {
+				// Leaf nodes, no children
+				return;
+			} else if (node.type === 'MetaProperty') {
+				// Visit meta and property (e.g., new.target, import.meta)
+				if (node.meta) {
+					visit(node.meta);
+				}
+				if (node.property) {
+					visit(node.property);
+				}
+				return;
+			} else if (node.type === 'EmptyStatement' || node.type === 'DebuggerStatement') {
+				// No children to visit
+				return;
+			} else if (node.type === 'LabeledStatement') {
+				// Visit label and statement
+				if (node.label) {
+					visit(node.label);
+				}
+				if (node.body) {
+					visit(node.body);
+				}
+				return;
+			} else if (node.type === 'BreakStatement' || node.type === 'ContinueStatement') {
+				// Visit label if present
+				if (node.label) {
+					visit(node.label);
+				}
+				return;
+			} else if (node.type === 'WithStatement') {
+				// Visit object and body
+				if (node.object) {
+					visit(node.object);
+				}
+				if (node.body) {
+					visit(node.body);
+				}
+				return;
+			} else if (node.type === 'JSXFragment') {
+				// Visit children in order
+				if (node.children) {
+					for (const child of node.children) {
+						visit(child);
+					}
+				}
+				return;
+			} else if (node.type === 'JSXClosingElement' || node.type === 'JSXClosingFragment' || node.type === 'JSXOpeningFragment') {
+				// These are handled by their parent nodes
+				return;
+			} else if (node.type === 'JSXMemberExpression') {
+				// Visit object and property (e.g., <Foo.Bar>)
+				if (node.object) {
+					visit(node.object);
+				}
+				if (node.property) {
+					visit(node.property);
+				}
+				return;
+			} else if (node.type === 'JSXNamespacedName') {
+				// Visit namespace and name (e.g., <svg:circle>)
+				if (node.namespace) {
+					visit(node.namespace);
+				}
+				if (node.name) {
+					visit(node.name);
+				}
+				return;
+			} else if (node.type === 'JSXEmptyExpression') {
+				// No children
+				return;
+			} else if (node.type === 'TemplateElement') {
+				// Leaf node, no children to visit
+				return;
+			} else if (node.type === 'PrivateIdentifier') {
+				// Leaf node
+				return;
+			} else if (node.type === 'PropertyDefinition') {
+				// Visit key and value
+				if (node.key) {
+					visit(node.key);
+				}
+				if (node.value) {
+					visit(node.value);
+				}
+				return;
+			} else if (node.type === 'StaticBlock') {
+				// Visit body
+				if (node.body) {
+					for (const statement of node.body) {
+						visit(statement);
+					}
+				}
+				return;
+			} else if (node.type === 'ImportExpression') {
+				// Visit source
+				if (node.source) {
+					visit(node.source);
+				}
+				return;
+			} else if (node.type === 'ParenthesizedExpression') {
+				// Visit the wrapped expression
+				if (node.expression) {
+					visit(node.expression);
+				}
+				return;
+			} else if (node.type === 'TSAsExpression' || node.type === 'TSSatisfiesExpression') {
+				// Type assertion: value as Type
+				if (node.expression) {
+					visit(node.expression);
+				}
+				// Skip typeAnnotation
+				return;
+			} else if (node.type === 'TSNonNullExpression') {
+				// Non-null assertion: value!
+				if (node.expression) {
+					visit(node.expression);
+				}
+				return;
+			} else if (node.type === 'TSTypeAssertion') {
+				// Type assertion: <Type>value
+				if (node.expression) {
+					visit(node.expression);
+				}
+				// Skip typeAnnotation
+				return;
+			} else if (node.type === 'TSTypeParameterInstantiation' || node.type === 'TSTypeParameterDeclaration') {
+				// Generic type parameters - visit to collect type variable names
+				if (node.params) {
+					for (const param of node.params) {
+						visit(param);
+					}
+				}
+				return;
+			} else if (node.type === 'TSTypeParameter') {
+				// Type parameter like T in <T>
+				if (node.name) {
+					visit(node.name);
+				}
+				if (node.constraint) {
+					visit(node.constraint);
+				}
+				if (node.default) {
+					visit(node.default);
+				}
+				return;
+			} else if (node.type === 'TSTypeAnnotation') {
+				// Type annotation - visit the type
+				if (node.typeAnnotation) {
+					visit(node.typeAnnotation);
+				}
+				return;
+			} else if (node.type === 'TSTypeReference') {
+				// Type reference like "string" or "Array<T>"
+				if (node.typeName) {
+					visit(node.typeName);
+				}
+				if (node.typeParameters) {
+					visit(node.typeParameters);
+				}
+				return;
+			} else if (node.type === 'TSQualifiedName') {
+				// Qualified name (e.g., Foo.Bar in types)
+				if (node.left) {
+					visit(node.left);
+				}
+				if (node.right) {
+					visit(node.right);
+				}
+				return;
+			} else if (node.type === 'TSArrayType') {
+				// Array type like T[]
+				if (node.elementType) {
+					visit(node.elementType);
+				}
+				return;
+			} else if (node.type === 'TSTupleType') {
+				// Tuple type like [string, number]
+				if (node.elementTypes) {
+					for (const type of node.elementTypes) {
+						visit(type);
+					}
+				}
+				return;
+			} else if (node.type === 'TSUnionType' || node.type === 'TSIntersectionType') {
+				// Union (A | B) or Intersection (A & B) types
+				if (node.types) {
+					for (const type of node.types) {
+						visit(type);
+					}
+				}
+				return;
+			} else if (node.type === 'TSFunctionType' || node.type === 'TSConstructorType') {
+				// Function or constructor type
+				if (node.typeParameters) {
+					visit(node.typeParameters);
+				}
+				if (node.parameters) {
+					for (const param of node.parameters) {
+						visit(param);
+					}
+				}
+				if (node.typeAnnotation) {
+					visit(node.typeAnnotation);
+				}
+				return;
+			} else if (node.type === 'TSTypeLiteral') {
+				// Object type literal { foo: string }
+				if (node.members) {
+					for (const member of node.members) {
+						visit(member);
+					}
+				}
+				return;
+			} else if (node.type === 'TSPropertySignature') {
+				// Property signature in type
+				if (node.key) {
+					visit(node.key);
+				}
+				if (node.typeAnnotation) {
+					visit(node.typeAnnotation);
+				}
+				return;
+			} else if (node.type === 'TSMethodSignature') {
+				// Method signature in type
+				if (node.key) {
+					visit(node.key);
+				}
+				if (node.typeParameters) {
+					visit(node.typeParameters);
+				}
+				if (node.parameters) {
+					for (const param of node.parameters) {
+						visit(param);
+					}
+				}
+				if (node.typeAnnotation) {
+					visit(node.typeAnnotation);
+				}
+				return;
+			} else if (node.type === 'TSIndexSignature') {
+				// Index signature [key: string]: Type
+				if (node.parameters) {
+					for (const param of node.parameters) {
+						visit(param);
+					}
+				}
+				if (node.typeAnnotation) {
+					visit(node.typeAnnotation);
+				}
+				return;
+			} else if (node.type === 'TSCallSignatureDeclaration' || node.type === 'TSConstructSignatureDeclaration') {
+				// Call or construct signature
+				if (node.typeParameters) {
+					visit(node.typeParameters);
+				}
+				if (node.parameters) {
+					for (const param of node.parameters) {
+						visit(param);
+					}
+				}
+				if (node.typeAnnotation) {
+					visit(node.typeAnnotation);
+				}
+				return;
+			} else if (node.type === 'TSConditionalType') {
+				// Conditional type: T extends U ? X : Y
+				if (node.checkType) {
+					visit(node.checkType);
+				}
+				if (node.extendsType) {
+					visit(node.extendsType);
+				}
+				if (node.trueType) {
+					visit(node.trueType);
+				}
+				if (node.falseType) {
+					visit(node.falseType);
+				}
+				return;
+			} else if (node.type === 'TSInferType') {
+				// Infer type: infer T
+				if (node.typeParameter) {
+					visit(node.typeParameter);
+				}
+				return;
+			} else if (node.type === 'TSParenthesizedType') {
+				// Parenthesized type: (T)
+				if (node.typeAnnotation) {
+					visit(node.typeAnnotation);
+				}
+				return;
+			} else if (node.type === 'TSTypeOperator') {
+				// Type operator: keyof T, readonly T
+				if (node.typeAnnotation) {
+					visit(node.typeAnnotation);
+				}
+				return;
+			} else if (node.type === 'TSIndexedAccessType') {
+				// Indexed access: T[K]
+				if (node.objectType) {
+					visit(node.objectType);
+				}
+				if (node.indexType) {
+					visit(node.indexType);
+				}
+				return;
+			} else if (node.type === 'TSMappedType') {
+				// Mapped type: { [K in keyof T]: ... }
+				if (node.typeParameter) {
+					visit(node.typeParameter);
+				}
+				if (node.typeAnnotation) {
+					visit(node.typeAnnotation);
+				}
+				return;
+			} else if (node.type === 'TSLiteralType') {
+				// Literal type: "foo" | 123 | true
+				if (node.literal) {
+					visit(node.literal);
+				}
+				return;
+			} else if (node.type === 'TSExpressionWithTypeArguments') {
+				// Expression with type arguments: Foo<Bar>
+				if (node.expression) {
+					visit(node.expression);
+				}
+				if (node.typeParameters) {
+					visit(node.typeParameters);
+				}
+				return;
+			} else if (node.type === 'TSImportType') {
+				// Import type: import("module").Type
+				if (node.argument) {
+					visit(node.argument);
+				}
+				if (node.qualifier) {
+					visit(node.qualifier);
+				}
+				if (node.typeParameters) {
+					visit(node.typeParameters);
+				}
+				return;
+			} else if (node.type === 'TSTypeQuery') {
+				// Type query: typeof x
+				if (node.exprName) {
+					visit(node.exprName);
+				}
+				return;
+			} else if (node.type === 'TSInterfaceDeclaration') {
+				// Interface declaration
+				if (node.id) {
+					visit(node.id);
+				}
+				if (node.typeParameters) {
+					visit(node.typeParameters);
+				}
+				if (node.extends) {
+					for (const ext of node.extends) {
+						visit(ext);
+					}
+				}
+				if (node.body) {
+					visit(node.body);
+				}
+				return;
+			} else if (node.type === 'TSInterfaceBody') {
+				// Interface body
+				if (node.body) {
+					for (const member of node.body) {
+						visit(member);
+					}
+				}
+				return;
+			} else if (node.type === 'TSTypeAliasDeclaration') {
+				// Type alias
+				if (node.id) {
+					visit(node.id);
+				}
+				if (node.typeParameters) {
+					visit(node.typeParameters);
+				}
+				if (node.typeAnnotation) {
+					visit(node.typeAnnotation);
+				}
+				return;
+			} else if (node.type === 'TSEnumDeclaration') {
+				// Visit id and members
+				if (node.id) {
+					visit(node.id);
+				}
+				if (node.members) {
+					for (const member of node.members) {
+						visit(member);
+					}
+				}
+				return;
+			} else if (node.type === 'TSEnumMember') {
+				// Visit id and initializer
+				if (node.id) {
+					visit(node.id);
+				}
+				if (node.initializer) {
+					visit(node.initializer);
+				}
+				return;
+			} else if (node.type === 'TSModuleDeclaration') {
+				// Namespace/module declaration
+				if (node.id) {
+					visit(node.id);
+				}
+				if (node.body) {
+					visit(node.body);
+				}
+				return;
+			} else if (node.type === 'TSModuleBlock') {
+				// Module body
+				if (node.body) {
+					for (const statement of node.body) {
+						visit(statement);
+					}
+				}
+				return;
+			} else if (node.type === 'TSNamedTupleMember') {
+				// Named tuple member: [name: Type]
+				if (node.label) {
+					visit(node.label);
+				}
+				if (node.elementType) {
+					visit(node.elementType);
+				}
+				return;
+			} else if (node.type === 'TSRestType') {
+				// Rest type: ...T[]
+				if (node.typeAnnotation) {
+					visit(node.typeAnnotation);
+				}
+				return;
+			} else if (node.type === 'TSOptionalType') {
+				// Optional type: T?
+				if (node.typeAnnotation) {
+					visit(node.typeAnnotation);
+				}
+				return;
+			} else if (node.type === 'TSAnyKeyword' || node.type === 'TSUnknownKeyword' || node.type === 'TSNumberKeyword' || node.type === 'TSObjectKeyword' || node.type === 'TSBooleanKeyword' || node.type === 'TSBigIntKeyword' || node.type === 'TSStringKeyword' || node.type === 'TSSymbolKeyword' || node.type === 'TSVoidKeyword' || node.type === 'TSUndefinedKeyword' || node.type === 'TSNullKeyword' || node.type === 'TSNeverKeyword' || node.type === 'TSThisType' || node.type === 'TSIntrinsicKeyword') {
+				// Primitive type keywords - leaf nodes, no children
+				return;
 			}
 
-			next();
+			throw new Error(`Unhandled AST node type in mapping walker: ${node.type}`);
 		}
 	});
 

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

@@ -16,6 +16,7 @@ import {
 import is_reference from 'is-reference';
 import { escape } from '../../../../utils/escaping.js';
 import { is_event_attribute } from '../../../../utils/events.js';
+import { render_stylesheets } from '../stylesheet.js';
 
 function add_ripple_internal_import(context) {
 	if (!context.state.to_ts) {
@@ -93,17 +94,33 @@ const visitors = {
 
 		if (node.css !== null && node.css) {
 			context.state.stylesheets.push(node.css);
+			// Register CSS hash during rendering
+			body_statements.unshift(
+				b.stmt(
+					b.call(
+						b.member(b.id('__output'), b.id('register_css')),
+						b.literal(node.css.hash),
+					),
+				),
+			);
 		}
 
-		return b.function(
+		let component_fn = b.function(
 			node.id,
 			node.params.length > 0 ? [b.id('__output'), node.params[0]] : [b.id('__output')],
 			b.block([
 				...(metadata.await
-					? [b.stmt(b.call('_$_.async', b.thunk(b.block(body_statements), true)))]
+					? [b.return(b.call('_$_.async', b.thunk(b.block(body_statements), true)))]
 					: body_statements),
 			]),
 		);
+
+		// Mark function as async if needed
+		if (metadata.await) {
+			component_fn = b.async(component_fn);
+		}
+
+		return component_fn;
 	},
 
 	CallExpression(node, context) {
@@ -127,6 +144,20 @@ const visitors = {
 		return context.next();
 	},
 
+	TSTypeAliasDeclaration(_, context) {
+		if (!context.state.to_ts) {
+			return b.empty;
+		}
+		context.next();
+	},
+
+	TSInterfaceDeclaration(_, context) {
+		if (!context.state.to_ts) {
+			return b.empty;
+		}
+		context.next();
+	},
+
 	ExportNamedDeclaration(node, context) {
 		if (!context.state.to_ts && node.exportKind === 'type') {
 			return b.empty;
@@ -164,13 +195,10 @@ const visitors = {
 			let class_attribute = null;
 
 			const handle_static_attr = (name, value) => {
-				const attr_value = b.literal(
-					` ${name}${
-						is_boolean_attribute(name) && value === true
-							? ''
-							: `="${value === true ? '' : escape_html(value, true)}"`
-					}`,
-				);
+				const attr_str = ` ${name}${is_boolean_attribute(name) && value === true
+					? ''
+					: `="${value === true ? '' : escape_html(value, true)}"`
+					}`;
 
 				if (is_spreading) {
 					// For spread attributes, store just the actual value, not the full attribute string
@@ -181,7 +209,7 @@ const visitors = {
 					spread_attributes.push(b.prop('init', b.literal(name), actual_value));
 				} else {
 					state.init.push(
-						b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(String(attr_value)))),
+						b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(attr_str))),
 					);
 				}
 			};
@@ -241,7 +269,8 @@ const visitors = {
 					let expression = visit(class_attribute.value, { ...state, metadata });
 
 					if (node.metadata.scoped && state.component.css) {
-						expression = b.binary('+', b.literal(state.component.css.hash + ' '), expression);
+						// Pass array to clsx so it can handle objects properly
+						expression = b.array([expression, b.literal(state.component.css.hash)]);
 					}
 
 					state.init.push(
@@ -256,7 +285,7 @@ const visitors = {
 			} else if (node.metadata.scoped && state.component.css) {
 				const value = state.component.css.hash;
 
-				// TOOO
+				handle_static_attr('class', value);
 			}
 
 			if (spread_attributes !== null && spread_attributes.length > 0) {
@@ -337,11 +366,33 @@ const visitors = {
 				}
 			}
 
-			state.init.push(b.stmt(b.call(visit(node.id, state), b.id('__output'), b.object(props))));
-		}
-	},
+			// For SSR, determine if we should await based on component metadata
+			const component_call = b.call(visit(node.id, state), b.id('__output'), b.object(props));
+
+			// Check if this is a locally defined component and if it's async
+			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)
+				: null;
 
-	ForOfStatement(node, context) {
+			if (local_metadata) {
+				// Component is defined locally - we know if it's async or not
+				if (local_metadata.async) {
+					state.init.push(b.stmt(b.await(component_call)));
+				} else {
+					state.init.push(b.stmt(component_call));
+				}
+			} else {
+				// Component is imported or dynamic - check .async property at runtime
+				const conditional_await = b.conditional(
+					b.member(visit(node.id, state), b.id('async')),
+					b.await(component_call),
+					component_call
+				);
+				state.init.push(b.stmt(conditional_await));
+			}
+		}
+	}, ForOfStatement(node, context) {
 		if (!is_inside_component(context)) {
 			context.next();
 			return;
@@ -392,6 +443,131 @@ const visitors = {
 		}
 	},
 
+	ImportDeclaration(node, context) {
+		if (!context.state.to_ts && node.importKind === 'type') {
+			return b.empty;
+		}
+
+		return {
+			...node,
+			specifiers: node.specifiers
+				.filter((spec) => spec.importKind !== 'type')
+				.map((spec) => context.visit(spec)),
+		};
+	},
+
+	TryStatement(node, context) {
+		if (!is_inside_component(context)) {
+			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 metadata = { await: false };
+		const body = transform_body(node.block.body, {
+			...context,
+			state: { ...context.state, metadata },
+		});
+
+		// 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;
+			}
+
+			// 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 try_statements = node.handler !== null
+				? [
+					b.try(
+						b.block(body),
+						b.catch_clause(
+							node.handler.param || b.id('error'),
+							b.block(
+								transform_body(node.handler.body.body, {
+									...context,
+									state: { ...context.state, scope: context.state.scopes.get(node.handler.body) },
+								}),
+							),
+						),
+					),
+				]
+				: body;
+
+			context.state.init.push(
+				b.stmt(b.await(b.call('_$_.async', b.thunk(b.block(try_statements), true)))),
+			);
+		} else {
+			// No async, just regular try/catch
+			if (node.handler !== null) {
+				const handler_body = transform_body(node.handler.body.body, {
+					...context,
+					state: { ...context.state, scope: context.state.scopes.get(node.handler.body) },
+				});
+
+				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) {
+		if (context.state.to_ts) {
+			return context.next();
+		}
+
+		if (context.state.metadata?.await === false) {
+			context.state.metadata.await = true;
+		}
+
+		return b.await(context.visit(node.argument));
+	},
+
+	TrackedObjectExpression(node, context) {
+		// For SSR, we just evaluate the object as-is since there's no reactivity
+		return b.object(node.properties.map((prop) => context.visit(prop)));
+	},
+
+	TrackedArrayExpression(node, context) {
+		// For SSR, we just evaluate the array as-is since there's no reactivity
+		return b.array(node.elements.map((el) => context.visit(el)));
+	},
+
+	MemberExpression(node, context) {
+		const parent = context.path.at(-1);
+
+		if (node.tracked || (node.property.type === 'Identifier' && node.property.tracked)) {
+			add_ripple_internal_import(context);
+
+			return b.call(
+				'_$_.get',
+				b.member(
+					context.visit(node.object),
+					node.computed ? context.visit(node.property) : node.property,
+					node.computed,
+					node.optional,
+				),
+			);
+		}
+
+		return context.next();
+	},
+
 	Text(node, { visit, state }) {
 		const metadata = { await: false };
 		const expression = visit(node.expression, { ...state, metadata });
@@ -408,21 +584,66 @@ const visitors = {
 			);
 		}
 	},
+
+	Html(node, { visit, state }) {
+		const metadata = { await: false };
+		const expression = visit(node.expression, { ...state, metadata });
+
+		// For Html nodes, we render the content as-is without escaping
+		if (expression.type === 'Literal') {
+			state.init.push(
+				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(expression.value))),
+			);
+		} else {
+			// If it's dynamic, we need to evaluate it and push it directly (not escaped)
+			state.init.push(b.stmt(b.call(b.member(b.id('__output'), b.id('push')), expression)));
+		}
+	},
 };
 
 export function transform_server(filename, source, analysis) {
+	// Use component metadata collected during the analyze phase
+	const component_metadata = analysis.component_metadata || [];
+
 	const state = {
 		imports: new Set(),
 		init: null,
 		scope: analysis.scope,
 		scopes: analysis.scopes,
 		stylesheets: [],
+		component_metadata,
 	};
 
 	const program = /** @type {ESTree.Program} */ (
 		walk(analysis.ast, { ...state, namespace: 'html' }, visitors)
 	);
 
+	const css = render_stylesheets(state.stylesheets);
+
+	// Add CSS registration if there are stylesheets
+	if (state.stylesheets.length > 0 && css) {
+		// Register each stylesheet's CSS
+		for (const stylesheet of state.stylesheets) {
+			const css_for_component = render_stylesheets([stylesheet]);
+			program.body.push(
+				b.stmt(
+					b.call('_$_.register_css', b.literal(stylesheet.hash), b.literal(css_for_component)),
+				),
+			);
+		}
+	}
+
+	// Add async property to component functions
+	for (const metadata of state.component_metadata) {
+		if (metadata.async) {
+			program.body.push(
+				b.stmt(
+					b.assignment('=', b.member(b.id(metadata.id), b.id('async')), b.true),
+				),
+			);
+		}
+	}
+
 	for (const import_node of state.imports) {
 		program.body.unshift(b.stmt(b.id(import_node)));
 	}
@@ -432,9 +653,6 @@ export function transform_server(filename, source, analysis) {
 		sourceMapSource: path.basename(filename),
 	});
 
-	// TODO: extract css
-	const css = '';
-
 	return {
 		ast: program,
 		js,

package/src/runtime/index-client.js

@@ -5,6 +5,7 @@ import { handle_root_events } from './internal/client/events.js';
 import { init_operations } from './internal/client/operations.js';
 import { active_block, tracked, derived } from './internal/client/runtime.js';
 import { create_anchor } from './internal/client/utils.js';
+import { remove_ssr_css } from './internal/client/css.js';
 
 // Re-export JSX runtime functions for jsxImportSource: "ripple"
 export { jsx, jsxs, Fragment } from '../jsx-runtime.js';
@@ -16,6 +17,7 @@ export { jsx, jsxs, Fragment } from '../jsx-runtime.js';
  */
 export function mount(component, options) {
 	init_operations();
+	remove_ssr_css();
 
 	const props = options.props || {};
 	const target = options.target;

package/src/runtime/internal/client/css.js

@@ -0,0 +1,68 @@
+export function remove_ssr_css() {
+	if (!document || typeof requestAnimationFrame !== "function") {
+		return;
+	}
+
+	remove_styles();
+}
+
+function remove_styles() {
+	if (import.meta.env.DEV) {
+		const styles = document.querySelector('style[data-vite-dev-id]');
+		if (styles) {
+			remove();
+		} else {
+			requestAnimationFrame(remove_styles);
+		}
+	} else if (import.meta.env.PROD) {
+		remove_when_css_loaded(() => requestAnimationFrame(remove));
+	}
+}
+
+function remove() {
+	document.querySelectorAll("style[data-ripple-ssr]").forEach((el) => el.remove());
+}
+
+/**
+ * @param {function} callback
+ * @returns {void}
+ */
+function remove_when_css_loaded(callback) {
+	/** @type {HTMLLinkElement[]} */
+	const links = Array.from(document.querySelectorAll('link[rel="stylesheet"]'));
+	let remaining = links.length;
+
+	if (remaining === 0) {
+		callback();
+		return;
+	}
+
+	const done = () => {
+		remaining--;
+		if (remaining === 0) {
+			// clean up all listeners
+			links.forEach((link) => {
+				link.removeEventListener('load', onLoad);
+				link.removeEventListener('error', onError);
+			});
+			callback();
+		}
+	};
+
+	function onLoad() {
+		done();
+	}
+	function onError() {
+		done();
+	}
+
+	links.forEach((link) => {
+		if (link.sheet) {
+			// already loaded (possibly cached)
+			done();
+		} else {
+			link.addEventListener('load', onLoad);
+			link.addEventListener('error', onError);
+		}
+	});
+}

package/src/runtime/internal/server/css-registry.js

@@ -0,0 +1,35 @@
+/**
+ * Global CSS registry for SSR
+ * Maps CSS hashes to their content
+ * This persists across requests for performance (CSS is immutable per hash)
+ * @type {Map<string, string>}
+ */
+const css_registry = new Map();
+
+/**
+ * Register a component's CSS
+ * Only sets if the hash doesn't already exist (CSS is immutable per hash)
+ * @param {string} hash - The CSS hash
+ * @param {string} content - The CSS content
+ */
+export function register_component_css(hash, content) {
+	if (!css_registry.has(hash)) {
+		css_registry.set(hash, content);
+	}
+}
+
+/**
+ * Get CSS content for a set of hashes
+ * @param {Set<string>} hashes
+ * @returns {string}
+ */
+export function get_css_for_hashes(hashes) {
+	const css_parts = [];
+	for (const hash of hashes) {
+		const content = css_registry.get(hash);
+		if (content) {
+			css_parts.push(content);
+		}
+	}
+	return css_parts.join('\n');
+}

package/src/runtime/internal/server/index.js

@@ -1,14 +1,12 @@
 /** @import { Component, Derived } from '#server' */
-
-import { DERIVED, UNINITIALIZED } from '../client/constants';
-import { is_tracked_object } from '../client/utils';
-
+import { DERIVED, UNINITIALIZED } from '../client/constants.js';
+import { is_tracked_object } from '../client/utils.js';
 import { escape } from '../../../utils/escaping.js';
 import { is_boolean_attribute } from '../../../compiler/utils';
-
 import { clsx } from 'clsx';
 
 export { escape };
+export { register_component_css as register_css } from './css-registry.js';
 
 /** @type {Component | null} */
 export let active_component = null;
@@ -29,6 +27,8 @@ const replacements = {
 class Output {
 	head = '';
 	body = '';
+	/** @type {Set<string>} */
+	css = new Set();
 	/** @type {Output | null} */
 	#parent = null;
 
@@ -46,25 +46,32 @@ class Output {
 	push(str) {
 		this.body += str;
 	}
+
+	/**
+	 * @param {string} hash
+	 * @returns {void}
+	 */
+	register_css(hash) {
+		this.css.add(hash);
+	}
 }
 
 /**
  * @param {((output: Output, props: Record<string, any>) => void | Promise<void>) & { async?: boolean }} component
- * @returns {Promise<{head: string, body: string}>}
+ * @returns {Promise<{head: string, body: string, css: Set<string>}>}
  */
 export async function render(component) {
 	const output = new Output(null);
 
-	// TODO add expando "async" property to component functions during SSR
 	if (component.async) {
 		await component(output, {});
 	} else {
 		component(output, {});
 	}
 
-	const { head, body } = output;
+	const { head, body, css } = output;
 
-	return { head, body };
+	return { head, body, css };
 }
 
 /**
@@ -91,7 +98,15 @@ export function pop_component() {
  * @returns {Promise<void>}
  */
 export async function async(fn) {
-	// TODO
+	await fn();
+}
+
+/**
+ * @returns {boolean}
+ */
+export function aborted() {
+	// For SSR, we don't abort rendering
+	return false;
 }
 
 /**
@@ -118,7 +133,7 @@ export function get(tracked) {
 		return tracked;
 	}
 
-	return (tracked.f & DERIVED) !== 0 ? get_derived(/** @type {Derived} */ (tracked)) : tracked.v;
+	return (tracked.f & DERIVED) !== 0 ? get_derived(/** @type {Derived} */(tracked)) : tracked.v;
 }
 
 /**
@@ -153,13 +168,13 @@ export function spread_attrs(attrs, css_hash) {
 
 		if (typeof value === 'function') continue;
 
-    if (is_tracked_object(value)) {
-      value = get(value);
-    }
+		if (is_tracked_object(value)) {
+			value = get(value);
+		}
 
-    if (name === 'class' && css_hash) {
-      value = value == null ? css_hash : [value, css_hash];
-    }
+		if (name === 'class' && css_hash) {
+			value = value == null ? css_hash : [value, css_hash];
+		}
 
 		attr_str += attr(name, value, is_boolean_attribute(name));
 	}

package/src/server/index.js

@@ -1 +1,2 @@
-export { render } from '../runtime/internal/server/index.js';
+export { render } from '../runtime/internal/server/index.js';
+export { get_css_for_hashes } from '../runtime/internal/server/css-registry.js';