ripple 0.3.10 → 0.3.11

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

@@ -61,6 +61,7 @@ import {
 	is_ripple_import,
 	replace_lazy_param_pattern,
 	ripple_import_requires_block,
+	jsx_to_ripple_node,
 } from '../../../utils.js';
 import {
 	CSS_HASH_IDENTIFIER,
@@ -858,6 +859,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
 		) {
@@ -1140,6 +1143,16 @@ const visitors = {
 	TsxCompat(node, context) {
 		const { state, visit } = context;
 
+		// to_ts mode: produce a JSX fragment
+		if (state.to_ts) {
+			const children = /** @type {AST.TsxCompat['children']} */ (
+				node.children
+					.map((child) => visit(/** @type {AST.Node} */ (child), state))
+					.filter((child) => child.type !== 'JSXText' || child.value.trim() !== '')
+			);
+			return b.jsx_fragment(children);
+		}
+
 		state.template?.push('<!>');
 
 		const normalized_children = node.children.filter((child) => {
@@ -1177,6 +1190,58 @@ const visitors = {
 		);
 	},
 
+	Tsx(node, context) {
+		const { state, visit } = context;
+
+		// to_ts mode: produce a JSX fragment
+		if (state.to_ts) {
+			const children = /** @type {AST.Tsx['children']} */ (
+				node.children
+					.map((child) => visit(/** @type {AST.Node} */ (child), state))
+					.filter((child) => child.type !== 'JSXText' || child.value.trim() !== '')
+			);
+			return b.jsx_fragment(children);
+		}
+
+		const children_filtered = node.children
+			.map((child) => jsx_to_ripple_node(/** @type {AST.Node} */ (child)))
+			.flat()
+			.filter(
+				(child) => child != null && child.type !== 'EmptyStatement' && child.type !== 'Component',
+			);
+
+		const children_component = b.component(b.id('render_children'), [], children_filtered);
+
+		const element = b.call(
+			'_$_.ripple_element',
+			/** @type {AST.Expression} */ (
+				visit(children_component, {
+					...state,
+					namespace: state.namespace,
+					is_ripple_element: true,
+				})
+			),
+		);
+
+		// Template body context: push to template and schedule init
+		if (state.flush_node) {
+			state.template?.push('<!>');
+
+			const id = state.flush_node(false);
+
+			const call = b.call('_$_.expression', id, b.thunk(element));
+			state.init?.push(
+				state.namespace !== DEFAULT_NAMESPACE
+					? b.stmt(b.call('_$_.with_ns', b.literal(state.namespace), b.thunk(call)))
+					: b.stmt(call),
+			);
+			return;
+		}
+
+		// Expression context: return the ripple_element directly as an expression value
+		return element;
+	},
+
 	Element(node, context) {
 		const { state, visit } = context;
 
@@ -1574,6 +1639,7 @@ const visitors = {
 							child.type === 'TryStatement' ||
 							child.type === 'ForOfStatement' ||
 							child.type === 'SwitchStatement' ||
+							child.type === 'Tsx' ||
 							child.type === 'TsxCompat' ||
 							child.type === 'Html' ||
 							(child.type === 'Element' &&
@@ -1623,7 +1689,9 @@ const visitors = {
 						let property =
 							attr.value === null
 								? b.literal(true)
-								: /** @type {AST.Expression} */ (visit(attr.value, { ...state, metadata }));
+								: /** @type {AST.Expression} */ (
+										visit(attr.value, { ...state, flush_node: null, metadata })
+									);
 
 						if (attr.name.name === 'class' && node.metadata.scoped && state.component?.css) {
 							if (property.type === 'Literal') {
@@ -1671,7 +1739,9 @@ const visitors = {
 							b.prop(
 								'init',
 								b.key(attr.name.name),
-								/** @type {AST.Expression} */ (visit(/** @type {AST.Node} */ (attr.value), state)),
+								/** @type {AST.Expression} */ (
+									visit(/** @type {AST.Node} */ (attr.value), { ...state, flush_node: null })
+								),
 							),
 						);
 					}
@@ -1679,7 +1749,13 @@ const visitors = {
 					props.push(
 						b.spread(
 							/** @type {AST.Expression} */
-							(visit(attr.argument, { ...state, metadata: { ...state.metadata } })),
+							(
+								visit(attr.argument, {
+									...state,
+									flush_node: null,
+									metadata: { ...state.metadata },
+								})
+							),
 						),
 					);
 				} else if (attr.type === 'RefAttribute') {
@@ -1690,7 +1766,9 @@ const visitors = {
 						b.prop(
 							'init',
 							b.id(ref_id),
-							/** @type {AST.Expression} */ (visit(attr.argument, { ...state, metadata })),
+							/** @type {AST.Expression} */ (
+								visit(attr.argument, { ...state, flush_node: null, metadata })
+							),
 							true,
 						),
 					);
@@ -1736,6 +1814,7 @@ const visitors = {
 								: {}),
 							scope: /** @type {ScopeInterface} */ (component_scope),
 							namespace: child_namespace,
+							is_ripple_element: true,
 						})
 					),
 				);
@@ -1953,30 +2032,46 @@ const visitors = {
 		}
 
 		const component_scope = context.state.scopes.get(node) || context.state.scope;
-		const body_statements = [
-			b.stmt(b.call('_$_.push_component')),
-			...transform_body(node.body, {
-				...context,
-				state: {
-					...context.state,
-					flush_node: null,
-					component: node,
-					metadata,
-					scope: component_scope,
-				},
-			}),
-			b.stmt(b.call('_$_.pop_component')),
-		];
+		const is_ripple_element = context.state.is_ripple_element;
+		const is_synthetic_children = node.id?.name === 'render_children';
+		const transformed_body = transform_body(node.body, {
+			...context,
+			state: {
+				...context.state,
+				flush_node: null,
+				component: node,
+				metadata,
+				scope: component_scope,
+				is_ripple_element: false,
+				applyParentCssScope: is_synthetic_children ? context.state.applyParentCssScope : undefined,
+			},
+		});
+
+		// RippleElement render functions don't need push/pop component context
+		// since they inherit context from where they're used
+		const body_statements = is_ripple_element
+			? transformed_body
+			: [
+					b.stmt(b.call('_$_.push_component')),
+					...transformed_body,
+					b.stmt(b.call('_$_.pop_component')),
+				];
 
 		if (node.css !== null && node.css) {
 			context.state.stylesheets.push(node.css);
 		}
 
+		// RippleElement render functions use simpler params: [__anchor, __block]
+		// Regular components use: [__anchor, props, __block] or [__anchor, _, __block]
+		const params = is_ripple_element
+			? [b.id('__anchor'), b.id('__block')]
+			: node.params.length > 0
+				? [b.id('__anchor'), props, b.id('__block')]
+				: [b.id('__anchor'), b.id('_'), b.id('__block')];
+
 		const func = b.function(
 			node.id,
-			node.params.length > 0
-				? [b.id('__anchor'), props, b.id('__block')]
-				: [b.id('__anchor'), b.id('_'), b.id('__block')],
+			params,
 			b.block([
 				...style_statements,
 				...(prop_statements ?? []),
@@ -2821,7 +2916,10 @@ function transform_ts_child(node, context) {
 			}
 		}
 
-		if (/** @type {AST.Node} */ (node.id).type !== 'MemberExpression' && node.id.tracked) {
+		if (
+			/** @type {AST.Node} */ (node.id).type !== 'MemberExpression' &&
+			/** @type {AST.Identifier} */ (node.id).tracked
+		) {
 			// This is just temporary until we remove capitalization
 			// The `is_capitalized` was never handled for MemberExpression
 			// but it should've been for the `object` part because it starts the tag
@@ -3064,6 +3162,18 @@ function transform_ts_child(node, context) {
 		);
 
 		state.init?.push(b.stmt(b.jsx_fragment(children)));
+	} else if (node.type === 'Tsx') {
+		const children = /** @type {AST.Tsx['children']} */ (
+			node.children
+				.map((child) => visit(/** @type {AST.Node} */ (child), state))
+				.filter((child) => child.type !== 'JSXText' || child.value.trim() !== '')
+		);
+
+		const result = b.jsx_fragment(children);
+		if (!state.init) {
+			return result;
+		}
+		state.init.push(b.stmt(result));
 	} else if (node.type === 'JSXExpressionContainer') {
 		// JSX comments {/* ... */} are JSXExpressionContainer with JSXEmptyExpression
 		// These should be preserved in the output as-is for prettier to handle
@@ -3105,6 +3215,7 @@ function is_template_or_control_flow(node) {
 		node.type === 'RippleExpression' ||
 		node.type === 'Text' ||
 		node.type === 'Html' ||
+		node.type === 'Tsx' ||
 		node.type === 'TsxCompat' ||
 		node.type === 'IfStatement' ||
 		node.type === 'ForOfStatement' ||
@@ -3196,6 +3307,7 @@ function element_has_dynamic_content(element) {
 			child.type === 'TryStatement' ||
 			child.type === 'ForOfStatement' ||
 			child.type === 'SwitchStatement' ||
+			child.type === 'Tsx' ||
 			child.type === 'TsxCompat' ||
 			child.type === 'Html'
 		) {
@@ -3371,6 +3483,7 @@ function transform_children(children, context) {
 				node.type === 'TryStatement' ||
 				node.type === 'ForOfStatement' ||
 				node.type === 'SwitchStatement' ||
+				node.type === 'Tsx' ||
 				node.type === 'TsxCompat' ||
 				node.type === 'Html' ||
 				(node.type === 'Element' &&
@@ -3384,6 +3497,15 @@ function transform_children(children, context) {
 					node.type === 'RippleExpression' &&
 					is_children_template_expression(node.expression, state.scope),
 			)) ||
+		// At root level, non-literal expressions need a fragment template so the
+		// anchor has a parent node. Without a parent, expression()'s .before() call
+		// is a no-op when the value is a RippleElement.
+		(root &&
+			normalized.some(
+				(node) =>
+					node.type === 'RippleExpression' &&
+					/** @type {AST.RippleExpression} */ (node).expression.type !== 'Literal',
+			)) ||
 		normalized.filter(
 			(node) => node.type !== 'VariableDeclaration' && node.type !== 'EmptyStatement',
 		).length > 1;
@@ -3652,6 +3774,7 @@ function transform_children(children, context) {
 							child.type === 'TryStatement' ||
 							child.type === 'ForOfStatement' ||
 							child.type === 'SwitchStatement' ||
+							child.type === 'Tsx' ||
 							child.type === 'TsxCompat' ||
 							child.type === 'Html' ||
 							(child.type === 'Element' &&
@@ -3682,6 +3805,7 @@ function transform_children(children, context) {
 							next_node.type === 'TryStatement' ||
 							next_node.type === 'ForOfStatement' ||
 							next_node.type === 'SwitchStatement' ||
+							next_node.type === 'Tsx' ||
 							next_node.type === 'TsxCompat'
 						) {
 							needs_sibling_call = true;
@@ -3693,7 +3817,7 @@ function transform_children(children, context) {
 						}
 					}
 				}
-			} else if (node.type === 'TsxCompat') {
+			} else if (node.type === 'TsxCompat' || node.type === 'Tsx') {
 				skipped = 0;
 
 				visit(node, {
@@ -3721,10 +3845,6 @@ function transform_children(children, context) {
 				});
 			} else if (node.type === 'RippleExpression') {
 				const expr = /** @type {AST.Expression} */ (expression);
-				const is_children_expression = is_children_template_expression(
-					node.expression,
-					state.scope,
-				);
 
 				if (expr.type === 'Literal') {
 					if (normalized.length === 1) {
@@ -3743,60 +3863,29 @@ function transform_children(children, context) {
 						skipped++;
 						state.template?.push(escape_html(expr.value));
 					}
-				} else if (is_children_expression) {
-					skipped = 0;
-					state.template?.push('<!>');
-					const id = flush_node(false);
-					state.update?.push({
-						operation: () => {
-							const call = b.call('_$_.expression', id, b.thunk(expr));
-							return state.namespace !== DEFAULT_NAMESPACE
-								? b.stmt(b.call('_$_.with_ns', b.literal(state.namespace), b.thunk(call)))
-								: b.stmt(call);
-						},
-					});
-					if (metadata?.await) {
-						/** @type {NonNullable<TransformClientState['update']>} */ (state.update).async = true;
-					}
-				} else if (metadata?.tracking) {
-					skipped = 0;
-					state.template?.push(' ');
-					const id = flush_node(true);
-					state.update?.push({
-						operation: (key) => b.stmt(b.call('_$_.set_text', id, key)),
-						expression: expr,
-						identity: node.expression,
-						initial: b.literal(' '),
-					});
-					if (metadata.await) {
-						/** @type {NonNullable<TransformClientState['update']>} */ (state.update).async = true;
-					}
-				} else if (normalized.length === 1) {
+				} else if (
+					normalized.length === 1 &&
+					!is_children_template_expression(node.expression, state.scope)
+				) {
 					skipped++;
-					const id = flush_node(true);
 					state.template?.push(' ');
+					const id = flush_node(true);
+					const call = b.call('_$_.expression', id, b.thunk(expr));
 					state.init?.push(
-						b.stmt(
-							b.assignment(
-								'=',
-								b.member(/** @type {AST.Identifier} */ (id), b.id('nodeValue')),
-								expr,
-							),
-						),
+						state.namespace !== DEFAULT_NAMESPACE
+							? b.stmt(b.call('_$_.with_ns', b.literal(state.namespace), b.thunk(call)))
+							: b.stmt(call),
 					);
 				} else {
-					skipped++;
-					state.template?.push(' ');
-					const id = flush_node(true);
-					state.update?.push({
-						operation: (key) => b.stmt(b.call('_$_.set_text', id, key)),
-						expression: expr,
-						identity: node.expression,
-						initial: b.literal(' '),
-					});
-					if (metadata?.await) {
-						/** @type {NonNullable<TransformClientState['update']>} */ (state.update).async = true;
-					}
+					skipped = 0;
+					state.template?.push('<!>');
+					const id = flush_node(false);
+					const call = b.call('_$_.expression', id, b.thunk(expr));
+					state.init?.push(
+						state.namespace !== DEFAULT_NAMESPACE
+							? b.stmt(b.call('_$_.with_ns', b.literal(state.namespace), b.thunk(call)))
+							: b.stmt(call),
+					);
 				}
 			} else if (node.type === 'Text') {
 				if (metadata?.tracking) {
@@ -4399,7 +4488,10 @@ function create_tsx_with_typescript_support(comments) {
 					// Shorthand object properties require an Identifier value. When the
 					// transformed value is a tracked MemberExpression (for example
 					// @value), emit longhand to keep valid output.
-					if (node.value.type === 'MemberExpression' && node.value.tracked) {
+					if (
+						node.value.type === 'MemberExpression' &&
+						/** @type {AST.MemberExpression & { tracked?: boolean }} */ (node.value).tracked
+					) {
 						context.visit(node.key);
 						context.write(': ');
 						context.visit(node.value);

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

@@ -32,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';
@@ -55,6 +56,7 @@ function is_template_or_control_flow(node) {
 		node.type === 'RippleExpression' ||
 		node.type === 'Text' ||
 		node.type === 'Html' ||
+		node.type === 'Tsx' ||
 		node.type === 'TsxCompat' ||
 		node.type === 'IfStatement' ||
 		node.type === 'ForOfStatement' ||
@@ -199,7 +201,7 @@ function transform_children(children, context) {
 				}
 			}
 		} else {
-			visit(node, { ...state, return_flags });
+			visit(node, { ...state, return_flags, template_child: true });
 		}
 	};
 
@@ -402,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)))]
@@ -807,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
 		) {
@@ -1654,6 +1666,37 @@ const visitors = {
 		}
 	},
 
+	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,6 +136,7 @@ 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;
@@ -270,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;
@@ -406,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 {
@@ -1270,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;
 	};
@@ -1290,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<
@@ -1323,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'])[],