ripple 0.3.9 → 0.3.11

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

@@ -53,6 +53,7 @@ import {
 	determine_namespace_for_children,
 	index_to_key,
 	is_element_dynamic,
+	is_children_template_expression,
 	is_inside_left_side_assignment,
 	hash,
 	flatten_switch_consequent,
@@ -60,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,
@@ -857,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
 		) {
@@ -1139,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) => {
@@ -1176,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;
 
@@ -1573,11 +1639,13 @@ const visitors = {
 							child.type === 'TryStatement' ||
 							child.type === 'ForOfStatement' ||
 							child.type === 'SwitchStatement' ||
+							child.type === 'Tsx' ||
 							child.type === 'TsxCompat' ||
 							child.type === 'Html' ||
 							(child.type === 'Element' &&
 								(child.id.type !== 'Identifier' || !is_element_dom_element(child))) ||
-							(child.type === 'Text' && child.expression.type !== 'Literal'),
+							((child.type === 'RippleExpression' || child.type === 'Text') &&
+								child.expression.type !== 'Literal'),
 					);
 
 				if (needs_pop) {
@@ -1611,7 +1679,7 @@ const visitors = {
 			const is_spreading = node.attributes.some((attr) => attr.type === 'SpreadAttribute');
 			/** @type {(AST.Property | AST.SpreadElement)[]} */
 			const props = [];
-			/** @type {AST.Expression | AST.BlockStatement | null} */
+			/** @type {AST.Property | null} */
 			let children_prop = null;
 
 			for (const attr of node.attributes) {
@@ -1621,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') {
@@ -1633,7 +1703,15 @@ const visitors = {
 
 						if (metadata.tracking || attr.name.tracked) {
 							if (attr.name.name === 'children') {
-								children_prop = b.thunk(property);
+								children_prop = b.prop(
+									'get',
+									b.id('children'),
+									b.function(
+										null,
+										[],
+										b.block([b.return(b.call('_$_.normalize_children', property))]),
+									),
+								);
 								continue;
 							}
 
@@ -1645,6 +1723,15 @@ const visitors = {
 								),
 							);
 						} else {
+							if (attr.name.name === 'children') {
+								children_prop = b.prop(
+									'init',
+									b.id('children'),
+									b.call('_$_.normalize_children', property),
+								);
+								continue;
+							}
+
 							props.push(b.prop('init', b.key(attr.name.name), property));
 						}
 					} else {
@@ -1652,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 })
+								),
 							),
 						);
 					}
@@ -1660,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') {
@@ -1671,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,
 						),
 					);
@@ -1694,60 +1791,63 @@ const visitors = {
 				}
 			}
 
-			const children_filtered = [];
-
-			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 })
-							),
-						),
-					);
-				} else {
-					children_filtered.push(child);
-				}
-			}
+			const children_filtered = node.children.filter(
+				(child) => child.type !== 'EmptyStatement' && child.type !== 'Component',
+			);
 
 			if (children_filtered.length > 0) {
 				const component_scope = state.scopes.get(node);
-				const children_component = b.component(b.id('children'), [], children_filtered);
-
-				const children = /** @type {AST.Expression} */ (
-					visit(children_component, {
-						...state,
-						...(apply_parent_css_scope ||
-						(is_dynamic_element && node.metadata.scoped && state.component?.css)
-							? {
-									applyParentCssScope:
-										apply_parent_css_scope ||
-										/** @type {AST.CSS.StyleSheet} */ (state.component?.css).hash,
-								}
-							: {}),
-						scope: /** @type {ScopeInterface} */ (component_scope),
-						namespace: child_namespace,
-					})
+				const children_component = b.component(b.id('render_children'), [], children_filtered);
+
+				const children = b.call(
+					'_$_.ripple_element',
+					/** @type {AST.Expression} */ (
+						visit(children_component, {
+							...state,
+							...(apply_parent_css_scope ||
+							(is_dynamic_element && node.metadata.scoped && state.component?.css)
+								? {
+										applyParentCssScope:
+											apply_parent_css_scope ||
+											/** @type {AST.CSS.StyleSheet} */ (state.component?.css).hash,
+									}
+								: {}),
+							scope: /** @type {ScopeInterface} */ (component_scope),
+							namespace: child_namespace,
+							is_ripple_element: true,
+						})
+					),
 				);
 
 				if (children_prop) {
-					/** @type {AST.ArrowFunctionExpression} */ (children_prop).body = b.logical(
-						'??',
-						/** @type {AST.Expression} */ (
-							/** @type {AST.ArrowFunctionExpression} */ (children_prop).body
-						),
-						children,
-					);
+					if (children_prop.kind === 'get') {
+						/** @type {AST.ReturnStatement} */ (
+							/** @type {AST.FunctionExpression} */ (children_prop.value).body.body[0]
+						).argument = b.logical(
+							'??',
+							/** @type {AST.Expression} */ (
+								/** @type {AST.ReturnStatement} */ (
+									/** @type {AST.FunctionExpression} */ (children_prop.value).body.body[0]
+								).argument
+							),
+							children,
+						);
+					} else {
+						children_prop.value = b.logical(
+							'??',
+							/** @type {AST.Expression} */ (children_prop.value),
+							children,
+						);
+					}
 				} else {
-					props.push(b.prop('init', b.id('children'), children));
+					children_prop = b.prop('init', b.id('children'), children);
 				}
 			}
 
+			if (children_prop) {
+				props.push(children_prop);
+			}
+
 			const metadata = { tracking: false, await: false };
 			// We visit, but only to gather metadata
 			b.call(/** @type {AST.Expression} */ (visit(node.id, { ...state, metadata })));
@@ -1932,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 ?? []),
@@ -2638,7 +2754,7 @@ function join_template(items) {
 function transform_ts_child(node, context) {
 	const { state, visit } = context;
 
-	if (node.type === 'Text') {
+	if (node.type === 'RippleExpression' || node.type === 'Text') {
 		state.init?.push(b.stmt(/** @type {AST.Expression} */ (visit(node.expression, { ...state }))));
 	} else if (node.type === 'Html') {
 		// Do we need to do something special here?
@@ -2800,17 +2916,37 @@ 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
 			// But the plan is to only rely on source_name and creating a const for the tag with ['#v']
+			const source_name = /** @type {AST.Identifier} */ (node.id).name;
+			const capitalized_name = source_name.charAt(0).toUpperCase() + source_name.slice(1);
+
+			// node.id and node.openingElement.name are the SAME object (convert_from_jsx mutates
+			// the JSXIdentifier to an Identifier in-place). Capitalize the name directly so that
+			// the generated JSX uses <Tag> (uppercase) matching the capitalized variable declaration,
+			// preventing the TypeScript "declared but never read" false-negative (ts6133).
+			/** @type {AST.Identifier} */ (node.id).name = capitalized_name;
+			if (!node.id.metadata) node.id.metadata = /** @type {any} */ ({});
+			node.id.metadata.is_capitalized = true;
+			node.id.metadata.source_name = source_name;
+
 			node.openingElement.metadata = {
 				...node.openingElement.metadata,
 				is_capitalized: true,
 			};
 
 			if (!node.selfClosing && !node.unclosed) {
+				// closingElement.name is a separate JSXIdentifier (not the same object as node.id)
+				// so we need to capitalize it separately
+				if (node.closingElement.name && 'name' in node.closingElement.name) {
+					/** @type {{ name: string }} */ (node.closingElement.name).name = capitalized_name;
+				}
 				node.closingElement.metadata = {
 					...node.closingElement.metadata,
 					is_capitalized: true,
@@ -3026,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
@@ -3064,8 +3212,10 @@ function transform_ts_child(node, context) {
 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' ||
@@ -3157,12 +3307,16 @@ function element_has_dynamic_content(element) {
 			child.type === 'TryStatement' ||
 			child.type === 'ForOfStatement' ||
 			child.type === 'SwitchStatement' ||
+			child.type === 'Tsx' ||
 			child.type === 'TsxCompat' ||
 			child.type === 'Html'
 		) {
 			return true;
 		}
-		if (child.type === 'Text' && child.expression.type !== 'Literal') {
+		if (
+			(child.type === 'RippleExpression' || child.type === 'Text') &&
+			child.expression.type !== 'Literal'
+		) {
 			return true;
 		}
 		// Non-DOM element (component)
@@ -3329,11 +3483,29 @@ 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' &&
 					(node.id.type !== 'Identifier' || !is_element_dom_element(node))),
 		) ||
+		(normalized.filter(
+			(node) => node.type !== 'VariableDeclaration' && node.type !== 'EmptyStatement',
+		).length === 1 &&
+			normalized.some(
+				(node) =>
+					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;
@@ -3348,9 +3520,11 @@ function transform_children(children, context) {
 		return b.id(
 			node.type == 'Element' && is_element_dom_element(node)
 				? state.scope.generate(/** @type {AST.Identifier} */ (node.id).name)
-				: node.type == 'Text'
-					? state.scope.generate('text')
-					: state.scope.generate('node'),
+				: node.type == 'RippleExpression'
+					? state.scope.generate('expression')
+					: node.type == 'Text'
+						? state.scope.generate('text')
+						: state.scope.generate('node'),
 			/** @type {AST.NodeWithLocation} */ (node.type === 'Element' ? node.openingElement : node),
 		);
 	};
@@ -3504,11 +3678,11 @@ function transform_children(children, context) {
 			/** @type {AST.Expression | undefined} */
 			let expression = undefined;
 			let is_create_text_only = false;
-			if (node.type === 'Text' || node.type === 'Html') {
+			if (node.type === 'RippleExpression' || node.type === 'Text' || node.type === 'Html') {
 				metadata = { tracking: false, await: false };
 				expression = /** @type {AST.Expression} */ (visit(node.expression, { ...state, metadata }));
 				is_create_text_only =
-					node.type === 'Text' && normalized.length === 1 && expression.type === 'Literal';
+					node.type !== 'Html' && normalized.length === 1 && expression.type === 'Literal';
 			}
 
 			if (initial === null && root && !is_create_text_only) {
@@ -3600,11 +3774,13 @@ 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' &&
 								(child.id.type !== 'Identifier' || !is_element_dom_element(child))) ||
-							(child.type === 'Text' && child.expression.type !== 'Literal'),
+							((child.type === 'RippleExpression' || child.type === 'Text') &&
+								child.expression.type !== 'Literal'),
 					);
 
 					// Add pop() if we have DOM element children AND the Element visitor didn't already add pop()
@@ -3620,7 +3796,7 @@ function transform_children(children, context) {
 								// Components always generate sibling()
 								needs_sibling_call = true;
 							}
-						} else if (next_node.type === 'Text') {
+						} else if (next_node.type === 'RippleExpression' || next_node.type === 'Text') {
 							// Only dynamic text generates sibling()
 							needs_sibling_call = next_node.expression.type !== 'Literal';
 						} else if (
@@ -3629,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;
@@ -3640,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, {
@@ -3666,6 +3843,50 @@ function transform_children(children, context) {
 							),
 						),
 				});
+			} else if (node.type === 'RippleExpression') {
+				const expr = /** @type {AST.Expression} */ (expression);
+
+				if (expr.type === 'Literal') {
+					if (normalized.length === 1) {
+						skipped++;
+						if (
+							/** @type {NonNullable<TransformClientState['template']>} */ (state.template).length >
+							0
+						) {
+							state.template?.push(escape_html(expr.value));
+						} else {
+							const id = flush_node(true);
+							state.init?.push(b.var(/** @type {AST.Identifier} */ (id), b.call('_$_.text', expr)));
+							state.final?.push(b.stmt(b.call('_$_.append', b.id('__anchor'), id)));
+						}
+					} else {
+						skipped++;
+						state.template?.push(escape_html(expr.value));
+					}
+				} else if (
+					normalized.length === 1 &&
+					!is_children_template_expression(node.expression, state.scope)
+				) {
+					skipped++;
+					state.template?.push(' ');
+					const id = flush_node(true);
+					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 {
+					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) {
 					skipped = 0;
@@ -4267,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);