ripple 0.3.9 → 0.3.10

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,
@@ -1577,7 +1578,8 @@ const visitors = {
 							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 +1613,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) {
@@ -1633,7 +1635,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 +1655,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 {
@@ -1694,60 +1713,62 @@ 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,
+						})
+					),
 				);
 
 				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 })));
@@ -2638,7 +2659,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?
@@ -2805,12 +2826,29 @@ function transform_ts_child(node, context) {
 			// 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,
@@ -3064,6 +3102,7 @@ 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 === 'TsxCompat' ||
@@ -3162,7 +3201,10 @@ function element_has_dynamic_content(element) {
 		) {
 			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)
@@ -3334,6 +3376,14 @@ function transform_children(children, context) {
 				(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),
+			)) ||
 		normalized.filter(
 			(node) => node.type !== 'VariableDeclaration' && node.type !== 'EmptyStatement',
 		).length > 1;
@@ -3348,9 +3398,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 +3556,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) {
@@ -3604,7 +3656,8 @@ function transform_children(children, context) {
 							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 +3673,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 (
@@ -3666,6 +3719,85 @@ 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) {
+						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 (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) {
+					skipped++;
+					const id = flush_node(true);
+					state.template?.push(' ');
+					state.init?.push(
+						b.stmt(
+							b.assignment(
+								'=',
+								b.member(/** @type {AST.Identifier} */ (id), b.id('nodeValue')),
+								expr,
+							),
+						),
+					);
+				} 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;
+					}
+				}
 			} else if (node.type === 'Text') {
 				if (metadata?.tracking) {
 					skipped = 0;

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,
@@ -51,6 +52,7 @@ 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 === 'TsxCompat' ||
@@ -1082,7 +1084,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 +1104,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 +1125,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 +1615,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 +1626,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 +1635,25 @@ 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))),
+			);
+		}
+	},
+
 	Html(node, { visit, state }) {
 		const metadata = { await: false };
 		const expression = /** @type {AST.Expression} */ (

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

@@ -134,6 +134,7 @@ declare module 'estree' {
 	interface NodeMap {
 		Component: Component;
 		TsxCompat: TsxCompat;
+		RippleExpression: RippleExpression;
 		Html: Html;
 		Element: Element;
 		Text: TextNode;
@@ -282,7 +283,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 {
@@ -601,6 +608,7 @@ declare module 'estree-jsx' {
 
 	interface JSXExpressionContainer {
 		html?: boolean;
+		text?: boolean;
 	}
 
 	interface JSXMemberExpression {

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

@@ -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