ripple 0.2.103 → 0.2.105

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/compiler/types/index.d.ts

@@ -65,6 +65,11 @@ export interface TrackedArrayExpression extends Omit<ArrayExpression, 'type'> {
 	elements: (Expression | null)[];
 }
 
+export interface TrackedExpression extends Omit<Expression, 'type'> {
+	argument: Expression;
+	type: 'TrackedExpression';
+}
+
 /**
  * Tracked object expression node
  */

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,70 @@
+import { DEV } from 'esm-env';
+
+export function remove_ssr_css() {
+	if (!document || typeof requestAnimationFrame !== "function") {
+		return;
+	}
+
+	remove_styles();
+}
+
+function remove_styles() {
+	if (DEV) {
+		const styles = document.querySelector('style[data-vite-dev-id]');
+		if (styles) {
+			remove();
+		} else {
+			requestAnimationFrame(remove_styles);
+		}
+	} else {
+		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';

package/tests/client/__snapshots__/tracked-expression.test.ripple.snap

@@ -0,0 +1,34 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TrackedExpression tests > should handle the syntax correctly 1`] = `
+<div>
+  <div>
+    0
+  </div>
+  <div>
+    0
+  </div>
+  <div>
+    1
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    2
+  </div>
+  <div>
+    3
+  </div>
+  <div>
+    4
+  </div>
+  <div>
+    false
+  </div>
+  <div>
+    true
+  </div>
+  
+</div>
+`;