ripple 0.3.9 → 0.3.11

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

@@ -23,6 +23,7 @@ import {
 	is_inside_component,
 	is_void_element,
 	normalize_children,
+	is_children_template_expression,
 	is_binding_function,
 	is_element_dynamic,
 	is_ripple_track_call,
@@ -31,6 +32,7 @@ import {
 	hash,
 	flatten_switch_consequent,
 	get_ripple_namespace_call_name,
+	jsx_to_ripple_node,
 } from '../../../utils.js';
 import { escape } from '../../../../utils/escaping.js';
 import { is_event_attribute } from '../../../../utils/events.js';
@@ -51,8 +53,10 @@ import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../../constants.js';
 function is_template_or_control_flow(node) {
 	return (
 		node.type === 'Element' ||
+		node.type === 'RippleExpression' ||
 		node.type === 'Text' ||
 		node.type === 'Html' ||
+		node.type === 'Tsx' ||
 		node.type === 'TsxCompat' ||
 		node.type === 'IfStatement' ||
 		node.type === 'ForOfStatement' ||
@@ -197,7 +201,7 @@ function transform_children(children, context) {
 				}
 			}
 		} else {
-			visit(node, { ...state, return_flags });
+			visit(node, { ...state, return_flags, template_child: true });
 		}
 	};
 
@@ -400,14 +404,22 @@ const visitors = {
 			b.stmt(b.call('_$_.push_component')),
 			...transform_body(node.body, {
 				...context,
-				state: { ...context.state, component: node, metadata },
+				state: {
+					...context.state,
+					component: node,
+					metadata,
+					applyParentCssScope:
+						node.id?.name === 'render_children' ? context.state.applyParentCssScope : undefined,
+				},
 			}),
 			b.stmt(b.call('_$_.pop_component')),
 		);
 
 		let component_fn = b.function(
 			node.id,
-			node.params.length > 0 ? [b.id('__output'), props_param_output] : [b.id('__output')],
+			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)))]
@@ -805,6 +817,8 @@ const visitors = {
 		// Handle standalone lazy destructuring: &[data] = track(0); → const lazy0 = track(0);
 		if (
 			node.expression.type === 'AssignmentExpression' &&
+			(node.expression.left.type === 'ObjectPattern' ||
+				node.expression.left.type === 'ArrayPattern') &&
 			node.expression.left.lazy &&
 			node.expression.left.metadata?.lazy_id
 		) {
@@ -1082,7 +1096,7 @@ const visitors = {
 		} else {
 			/** @type {(AST.Property | AST.SpreadElement)[]} */
 			const props = [];
-			/** @type {AST.Expression | null} */
+			/** @type {AST.Property | null} */
 			let children_prop = null;
 
 			const apply_parent_css_scope = state.applyParentCssScope;
@@ -1102,7 +1116,11 @@ const visitors = {
 									);
 
 						if (attr.name.name === 'children') {
-							children_prop = attr.name.tracked ? b.thunk(property) : property;
+							children_prop = b.prop(
+								'init',
+								b.id('children'),
+								b.call('_$_.normalize_children', property),
+							);
 							continue;
 						}
 
@@ -1119,50 +1137,44 @@ const visitors = {
 				}
 			}
 
-			const children_filtered = [];
+			const children_filtered = node.children.filter(
+				(child) => child.type !== 'EmptyStatement' && child.type !== 'Component',
+			);
 
-			for (const child of node.children) {
-				if (child.type === 'Component') {
-					// in this case, id cannot be null
-					// as these are direct children of the component
-					const id = /** @type {AST.Identifier} */ (child.id);
-					props.push(
-						b.prop(
-							'init',
-							id,
-							/** @type {AST.Expression} */ (
-								visit(child, { ...state, namespace: child_namespace })
-							),
-						),
+			if (children_filtered.length > 0) {
+				const component_scope = /** @type {ScopeInterface} */ (context.state.scopes.get(node));
+				const children = b.call(
+					'_$_.ripple_element',
+					/** @type {AST.Expression} */ (
+						visit(b.component(b.id('render_children'), [], children_filtered), {
+							...context.state,
+							...(apply_parent_css_scope ||
+							(is_element_dynamic(node) && node.metadata.scoped && state.component?.css)
+								? {
+										applyParentCssScope:
+											apply_parent_css_scope ||
+											/** @type {AST.CSS.StyleSheet} */ (state.component?.css).hash,
+									}
+								: {}),
+							scope: component_scope,
+							namespace: child_namespace,
+						})
+					),
+				);
+
+				if (children_prop) {
+					children_prop.value = b.logical(
+						'??',
+						/** @type {AST.Expression} */ (children_prop.value),
+						children,
 					);
 				} else {
-					children_filtered.push(child);
+					children_prop = b.prop('init', b.id('children'), children);
 				}
 			}
 
 			if (children_prop) {
-				props.push(b.prop('init', b.id('children'), children_prop));
-			}
-
-			if (children_filtered.length > 0) {
-				const component_scope = /** @type {ScopeInterface} */ (context.state.scopes.get(node));
-				const children = /** @type {AST.Expression} */ (
-					visit(b.component(b.id('children'), [], children_filtered), {
-						...context.state,
-						...(apply_parent_css_scope ||
-						(is_element_dynamic(node) && node.metadata.scoped && state.component?.css)
-							? {
-									applyParentCssScope:
-										apply_parent_css_scope ||
-										/** @type {AST.CSS.StyleSheet} */ (state.component?.css).hash,
-								}
-							: {}),
-						scope: component_scope,
-						namespace: child_namespace,
-					})
-				);
-
-				props.push(b.prop('init', b.id('children'), children));
+				props.push(children_prop);
 			}
 
 			// For SSR, determine if we should await based on component metadata
@@ -1615,9 +1627,10 @@ const visitors = {
 		return context.next();
 	},
 
-	Text(node, { visit, state }) {
+	RippleExpression(node, { visit, state }) {
 		const metadata = { await: false };
 		let expression = /** @type {AST.Expression} */ (visit(node.expression, { ...state, metadata }));
+		const is_children_expression = is_children_template_expression(node.expression, state.scope);
 
 		if (expression.type === 'Literal') {
 			state.init?.push(
@@ -1625,6 +1638,8 @@ const visitors = {
 					b.call(b.member(b.id('__output'), b.id('push')), b.literal(escape(expression.value))),
 				),
 			);
+		} else if (is_children_expression) {
+			state.init?.push(b.stmt(b.call('_$_.render_expression', b.id('__output'), expression)));
 		} else {
 			state.init?.push(
 				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.call('_$_.escape', expression))),
@@ -1632,6 +1647,56 @@ const visitors = {
 		}
 	},
 
+	Text(node, context) {
+		const metadata = { await: false };
+		let expression = /** @type {AST.Expression} */ (
+			context.visit(node.expression, { ...context.state, metadata })
+		);
+
+		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))),
+				),
+			);
+		} else {
+			context.state.init?.push(
+				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.call('_$_.escape', expression))),
+			);
+		}
+	},
+
+	Tsx(node, { visit, state }) {
+		const converted_children = node.children
+			.map((child) => jsx_to_ripple_node(/** @type {AST.Node} */ (child)))
+			.flat()
+			.filter((child) => child != null);
+
+		/** @type {AST.Statement[]} */
+		const init = [];
+		transform_children(
+			converted_children,
+			/** @type {TransformServerContext} */ ({
+				visit,
+				state: {
+					...state,
+					init,
+				},
+			}),
+		);
+
+		if (state.template_child) {
+			// Template body: push children statements inline
+			if (init.length > 0) {
+				state.init?.push(b.block(init));
+			}
+		} else {
+			// Expression context: return ripple_element(render_fn)
+			const render_fn = b.function(b.id('render_children'), [b.id('__output')], b.block(init));
+			return b.call('_$_.ripple_element', render_fn);
+		}
+	},
+
 	Html(node, { visit, state }) {
 		const metadata = { await: false };
 		const expression = /** @type {AST.Expression} */ (

package/src/compiler/types/index.d.ts

@@ -22,6 +22,7 @@ interface BaseNodeMetaData {
 	inside_component_top_level?: boolean;
 	returns?: AST.ReturnStatement[];
 	has_return?: boolean;
+	has_throw?: boolean;
 	is_reactive?: boolean;
 	lone_return?: boolean;
 	forceMapping?: boolean;
@@ -116,7 +117,9 @@ declare module 'estree' {
 
 	// We mark the whole node as marked when member is @[expression]
 	// Otherwise, we only mark Identifier nodes
-	interface MemberExpression {}
+	interface MemberExpression {
+		tracked?: boolean;
+	}
 
 	interface SimpleLiteral extends AST.LiteralNode {}
 	interface RegExpLiteral extends AST.LiteralNode {}
@@ -133,7 +136,9 @@ declare module 'estree' {
 	// Include TypeScript node types and Ripple-specific nodes in NodeMap
 	interface NodeMap {
 		Component: Component;
+		Tsx: Tsx;
 		TsxCompat: TsxCompat;
+		RippleExpression: RippleExpression;
 		Html: Html;
 		Element: Element;
 		Text: TextNode;
@@ -269,6 +274,16 @@ declare module 'estree' {
 		typeParameters?: AST.TSTypeParameterDeclaration;
 	}
 
+	interface Tsx extends AST.BaseNode {
+		type: 'Tsx';
+		attributes: Array<any>;
+		children: ESTreeJSX.JSXElement['children'];
+		selfClosing?: boolean;
+		unclosed?: boolean;
+		openingElement: ESTreeJSX.JSXOpeningElement;
+		closingElement: ESTreeJSX.JSXClosingElement;
+	}
+
 	interface TsxCompat extends AST.BaseNode {
 		type: 'TsxCompat';
 		kind: string;
@@ -282,7 +297,13 @@ declare module 'estree' {
 
 	interface Html extends AST.BaseNode {
 		type: 'Html';
-		expression: Expression;
+		expression: AST.Expression;
+	}
+
+	export interface RippleExpression extends AST.BaseExpression {
+		type: 'RippleExpression';
+		expression: AST.Expression;
+		loc?: AST.SourceLocation;
 	}
 
 	interface Element extends AST.BaseNode {
@@ -399,7 +420,7 @@ declare module 'estree' {
 
 	export type RippleStatement = AST.Statement | TSESTree.Statement;
 
-	export type NodeWithChildren = AST.Element | AST.TsxCompat;
+	export type NodeWithChildren = AST.Element | AST.Tsx | AST.TsxCompat;
 
 	export namespace CSS {
 		export interface BaseNode extends AST.NodeWithMaybeComments {
@@ -601,6 +622,7 @@ declare module 'estree-jsx' {
 
 	interface JSXExpressionContainer {
 		html?: boolean;
+		text?: boolean;
 	}
 
 	interface JSXMemberExpression {
@@ -1262,6 +1284,7 @@ export interface AnalysisState extends BaseState {
 	elements?: AST.Element[];
 	function_depth?: number;
 	loose?: boolean;
+	configured_compat_kinds?: Set<string>;
 	metadata: BaseStateMetaData & {
 		styleClasses?: StyleClasses;
 	};
@@ -1282,6 +1305,7 @@ export interface TransformServerState extends BaseState {
 	applyParentCssScope?: AST.CSS.StyleSheet['hash'];
 	dev?: boolean;
 	return_flags?: Map<AST.ReturnStatement, { name: string; tracked: boolean }>;
+	template_child?: boolean;
 }
 
 type UpdateList = Array<
@@ -1315,6 +1339,7 @@ export interface TransformClientState extends BaseState {
 	applyParentCssScope?: AST.CSS.StyleSheet['hash'];
 	skip_children_traversal: boolean;
 	return_flags?: Map<AST.ReturnStatement, { name: string; tracked: boolean }>;
+	is_ripple_element?: boolean;
 }
 
 /** Override zimmerframe types and provide our own */

package/src/compiler/types/parse.d.ts

@@ -1166,7 +1166,7 @@ export namespace Parse {
 
 		parseServerBlock(): AST.ServerBlock;
 
-		parseElement(): AST.Element | AST.TsxCompat;
+		parseElement(): AST.Element | AST.Tsx | AST.TsxCompat;
 
 		parseTemplateBody(
 			body: (AST.Statement | AST.Node | ESTreeJSX.JSXText | ESTreeJSX.JSXElement['children'])[],
@@ -1195,6 +1195,8 @@ export namespace Parse {
 			topLevel?: boolean,
 			exports?: AST.ExportSpecifier,
 		):
+			| AST.RippleExpression
+			| AST.Html
 			| AST.TextNode
 			| ESTreeJSX.JSXEmptyExpression
 			| ESTreeJSX.JSXExpressionContainer

package/src/compiler/utils.js

@@ -631,7 +631,22 @@ export function normalize_children(children, context) {
 		const child = normalized[i];
 		const prev_child = normalized[i - 1];
 
-		if (child.type === 'Text' && prev_child?.type === 'Text') {
+		if (
+			(child.type === 'RippleExpression' || child.type === 'Text') &&
+			(prev_child?.type === 'RippleExpression' || prev_child?.type === 'Text')
+		) {
+			if (
+				(child.type === 'RippleExpression' &&
+					is_children_template_expression(child.expression, context.state.scope)) ||
+				(prev_child.type === 'RippleExpression' &&
+					is_children_template_expression(prev_child.expression, context.state.scope))
+			) {
+				continue;
+			}
+
+			if (prev_child.type === 'Text' || child.type === 'Text') {
+				prev_child.type = 'Text';
+			}
 			if (child.expression.type === 'Literal' && prev_child.expression.type === 'Literal') {
 				prev_child.expression = b.literal(
 					prev_child.expression.value + String(child.expression.value),
@@ -650,6 +665,91 @@ export function normalize_children(children, context) {
 	return normalized;
 }
 
+/**
+ * @param {AST.Expression} expression
+ * @returns {AST.Expression}
+ */
+export function unwrap_template_expression(expression) {
+	/** @type {AST.Expression} */
+	let node = expression;
+
+	while (true) {
+		if (
+			node.type === 'ParenthesizedExpression' ||
+			node.type === 'TSAsExpression' ||
+			node.type === 'TSSatisfiesExpression' ||
+			node.type === 'TSNonNullExpression' ||
+			node.type === 'TSInstantiationExpression'
+		) {
+			node = /** @type {AST.Expression} */ (node.expression);
+			continue;
+		}
+
+		if (node.type === 'ChainExpression') {
+			node = /** @type {AST.Expression} */ (node.expression);
+			continue;
+		}
+
+		break;
+	}
+
+	return node;
+}
+
+/**
+ * @param {AST.Expression} expression
+ * @param {ScopeInterface | null | undefined} scope
+ * @param {ScopeInterface | null} [component_scope]
+ * @returns {boolean}
+ */
+export function is_children_template_expression(expression, scope, component_scope = null) {
+	if (scope == null) {
+		return false;
+	}
+
+	const unwrapped = unwrap_template_expression(expression);
+
+	if (unwrapped.type === 'MemberExpression') {
+		let property_name = null;
+
+		if (!unwrapped.computed && unwrapped.property.type === 'Identifier') {
+			property_name = unwrapped.property.name;
+		} else if (
+			unwrapped.computed &&
+			unwrapped.property.type === 'Literal' &&
+			typeof unwrapped.property.value === 'string'
+		) {
+			property_name = unwrapped.property.value;
+		}
+
+		if (property_name === 'children') {
+			const target = unwrap_template_expression(/** @type {AST.Expression} */ (unwrapped.object));
+
+			if (target.type === 'Identifier') {
+				const binding = scope.get(target.name);
+				return (
+					binding?.declaration_kind === 'param' &&
+					(component_scope === null || binding.scope === component_scope)
+				);
+			}
+		}
+	}
+
+	if (unwrapped.type !== 'Identifier' || unwrapped.name !== 'children') {
+		return false;
+	}
+
+	const binding = scope.get(unwrapped.name);
+	return (
+		(binding?.declaration_kind === 'param' ||
+			binding?.kind === 'prop' ||
+			binding?.kind === 'prop_fallback' ||
+			binding?.kind === 'lazy' ||
+			binding?.kind === 'lazy_fallback') &&
+		(component_scope === null || binding.scope === component_scope)
+	);
+}
+
 /**
  * @param {AST.Node} node
  * @param {AST.Node[]} normalized
@@ -987,3 +1087,177 @@ export function get_ripple_namespace_call_name(name) {
 export function ripple_import_requires_block(name) {
 	return name !== 'effect' && name !== 'untrack' && name !== 'Context';
 }
+
+/**
+ * Converts a JSXMemberExpression to an AST MemberExpression.
+ * e.g., <Foo.Bar.Baz> → MemberExpression(MemberExpression(Foo, Bar), Baz)
+ * @param {import('estree-jsx').JSXMemberExpression} jsx_member
+ * @returns {AST.MemberExpression}
+ */
+function jsx_member_expression_to_member_expression(jsx_member) {
+	/** @type {AST.Expression} */
+	let object;
+
+	if (jsx_member.object.type === 'JSXMemberExpression') {
+		// Recursively convert nested member expressions
+		object = jsx_member_expression_to_member_expression(jsx_member.object);
+	} else {
+		// Base case: JSXIdentifier
+		object = /** @type {AST.Identifier} */ ({
+			type: 'Identifier',
+			name: jsx_member.object.name,
+			start: jsx_member.object.start,
+			end: jsx_member.object.end,
+		});
+	}
+
+	return /** @type {AST.MemberExpression} */ ({
+		type: 'MemberExpression',
+		object,
+		property: /** @type {AST.Identifier} */ ({
+			type: 'Identifier',
+			name: jsx_member.property.name,
+			start: jsx_member.property.start,
+			end: jsx_member.property.end,
+		}),
+		computed: false,
+		optional: false,
+		start: jsx_member.start,
+		end: jsx_member.end,
+	});
+}
+
+/**
+ * Converts a JSX AST node (JSXElement, JSXText, etc.) to a Ripple AST node
+ * (Element, Text, RippleExpression) for processing inside `<tsx>` blocks.
+ * @param {AST.Node} node
+ * @returns {AST.Node | AST.Node[] | null}
+ */
+export function jsx_to_ripple_node(node) {
+	if (node.type === 'JSXElement') {
+		const opening = node.openingElement;
+		const name = opening.name;
+
+		/** @type {AST.Identifier | AST.MemberExpression} */
+		let id;
+
+		if (name.type === 'JSXIdentifier') {
+			id = /** @type {AST.Identifier} */ ({
+				type: 'Identifier',
+				name: name.name,
+				start: name.start,
+				end: name.end,
+			});
+		} else if (name.type === 'JSXMemberExpression') {
+			// Convert JSXMemberExpression to MemberExpression
+			// e.g., <Foo.Bar.Baz> → MemberExpression(MemberExpression(Foo, Bar), Baz)
+			id = jsx_member_expression_to_member_expression(name);
+		} else if (name.type === 'JSXNamespacedName') {
+			// For JSXNamespacedName like <namespace:element>, create an identifier with the full name
+			id = /** @type {AST.Identifier} */ ({
+				type: 'Identifier',
+				name: name.namespace.name + ':' + name.name.name,
+				start: name.start,
+				end: name.end,
+			});
+		} else {
+			// Fallback - should not reach here
+			id = /** @type {AST.Identifier} */ ({
+				type: 'Identifier',
+				name: 'unknown',
+				start: /** @type {any} */ (name).start,
+				end: /** @type {any} */ (name).end,
+			});
+		}
+
+		const attributes = opening.attributes
+			.map((attr) => {
+				if (attr.type === 'JSXAttribute') {
+					const is_dynamic = attr.value && attr.value.type === 'JSXExpressionContainer';
+					return /** @type {AST.Node} */ ({
+						type: 'Attribute',
+						name: {
+							type: 'Identifier',
+							name:
+								attr.name.type === 'JSXIdentifier'
+									? attr.name.name
+									: attr.name.namespace.name + ':' + attr.name.name.name,
+							tracked: is_dynamic,
+							start: attr.name.start,
+							end: attr.name.end,
+						},
+						value: attr.value
+							? attr.value.type === 'JSXExpressionContainer'
+								? attr.value.expression
+								: attr.value
+							: null,
+						shorthand: false,
+						start: attr.start,
+						end: attr.end,
+					});
+				} else if (attr.type === 'JSXSpreadAttribute') {
+					return /** @type {AST.Node} */ ({
+						type: 'SpreadAttribute',
+						argument: attr.argument,
+						start: attr.start,
+						end: attr.end,
+					});
+				}
+				return null;
+			})
+			.filter(Boolean);
+
+		const children = /** @type {AST.Node[]} */ (
+			/** @type {AST.Node[]} */ (node.children).map(jsx_to_ripple_node).flat().filter(Boolean)
+		);
+
+		return /** @type {AST.Element} */ (
+			/** @type {unknown} */ ({
+				type: 'Element',
+				id,
+				attributes,
+				children,
+				selfClosing: opening.selfClosing,
+				metadata: { scoped: false, path: /** @type {string[]} */ ([]) },
+				start: node.start,
+				end: node.end,
+			})
+		);
+	}
+
+	if (node.type === 'JSXText') {
+		if (node.value.trim() === '') return null;
+		return /** @type {AST.Node} */ ({
+			type: 'Text',
+			expression: {
+				type: 'Literal',
+				value: node.value,
+				raw: JSON.stringify(node.value),
+				start: node.start,
+				end: node.end,
+			},
+			metadata: {},
+			start: node.start,
+			end: node.end,
+		});
+	}
+
+	if (node.type === 'JSXExpressionContainer') {
+		if (node.expression.type === 'JSXEmptyExpression') return null;
+		return /** @type {AST.Node} */ ({
+			type: 'RippleExpression',
+			expression: node.expression,
+			metadata: {},
+			start: node.start,
+			end: node.end,
+		});
+	}
+
+	if (node.type === 'JSXFragment') {
+		return /** @type {AST.Node[]} */ (
+			/** @type {AST.Node[]} */ (node.children).map(jsx_to_ripple_node).flat().filter(Boolean)
+		);
+	}
+
+	return node;
+}

package/src/runtime/element.js

@@ -0,0 +1,39 @@
+const RIPPLE_ELEMENT = Symbol.for('ripple.element');
+
+/**
+ * @typedef {{
+ * 	render: Function;
+ * 	[RIPPLE_ELEMENT]: true;
+ * }} RippleElement
+ */
+
+/**
+ * @param {Function} render
+ * @returns {RippleElement}
+ */
+export function ripple_element(render) {
+	return {
+		render,
+		[RIPPLE_ELEMENT]: true,
+	};
+}
+
+/**
+ * @param {any} value
+ * @returns {value is RippleElement}
+ */
+export function is_ripple_element(value) {
+	return value != null && value[RIPPLE_ELEMENT] === true;
+}
+
+/**
+ * @param {any} value
+ * @returns {any}
+ */
+export function normalize_children(value) {
+	if (value == null || is_ripple_element(value) || typeof value !== 'function') {
+		return value;
+	}
+
+	return ripple_element(value);
+}