ripple 0.3.8 → 0.3.10

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

@@ -53,11 +53,13 @@ import {
 	determine_namespace_for_children,
 	index_to_key,
 	is_element_dynamic,
+	is_children_template_expression,
 	is_inside_left_side_assignment,
 	hash,
 	flatten_switch_consequent,
 	get_ripple_namespace_call_name,
 	is_ripple_import,
+	replace_lazy_param_pattern,
 	ripple_import_requires_block,
 } from '../../../utils.js';
 import {
@@ -111,16 +113,12 @@ function visit_function(node, context) {
 	// Replace lazy destructuring params with generated identifiers
 	const transformed_params = node.params.map((param) => {
 		const pattern = param.type === 'AssignmentPattern' ? param.left : param;
-		if (
-			(pattern.type === 'ObjectPattern' || pattern.type === 'ArrayPattern') &&
-			pattern.lazy &&
-			pattern.metadata?.lazy_id
-		) {
-			const id = b.id(pattern.metadata.lazy_id);
+		if (pattern.type === 'ObjectPattern' || pattern.type === 'ArrayPattern') {
+			const transformed_pattern = replace_lazy_param_pattern(pattern);
 			if (param.type === 'AssignmentPattern') {
-				return /** @type {AST.AssignmentPattern} */ ({ ...param, left: id });
+				return /** @type {AST.AssignmentPattern} */ ({ ...param, left: transformed_pattern });
 			}
-			return id;
+			return transformed_pattern;
 		}
 		return param;
 	});
@@ -633,7 +631,7 @@ const visitors = {
 
 		const matched_track_call = !context.state.to_ts ? is_ripple_track_call(callee, context) : null;
 		if (matched_track_call) {
-			const track_method_name = matched_track_call === 'trackSplit' ? 'track_split' : 'track';
+			const track_method_name = 'track';
 
 			if (callee.type === 'Identifier' && callee.name === 'track') {
 				if (node.arguments.length === 0) {
@@ -803,71 +801,11 @@ const visitors = {
 		return b.call('_$_.with_scope', b.id('__block'), b.thunk(new_node));
 	},
 
-	TrackedExpression(node, context) {
-		if (context.state.to_ts) {
-			const visited = /** @type {AST.Expression} */ (context.visit(node.argument));
-			const member = b.member(
-				visited,
-				b.literal('#v'),
-				true,
-				!is_inside_left_side_assignment(node),
-				/** @type {AST.NodeWithLocation} */ (node),
-			);
-			member.tracked = true;
-			return member;
-		}
-		return b.call('_$_.get', /** @type {AST.Expression} */ (context.visit(node.argument)));
-	},
-
 	MemberExpression(node, context) {
 		if (context.state.metadata?.tracking === false) {
 			context.state.metadata.tracking = true;
 		}
 
-		if (
-			node.tracked ||
-			((node.property.type === 'Identifier' || node.property.type === 'Literal') &&
-				node.property.tracked)
-		) {
-			if (context.state.to_ts) {
-				// In TypeScript mode, transform @user.@name or @user.@['name'] or @user?.@name
-				// to user['#v'].name['#v'] or user['#v']['name']['#v'] or user['#v']?.name['#v']
-				const visited_object = /** @type {AST.Expression} */ (context.visit(node.object));
-				const visited_property = /** @type {AST.Expression} */ (context.visit(node.property));
-
-				// Build the member access: object.property or object[property]
-				const member = b.member(
-					visited_object,
-					visited_property,
-					node.computed,
-					node.optional,
-					/** @type {AST.NodeWithLocation} */ (node),
-				);
-
-				// Wrap with ['#v'] access
-				const member_expanded = b.member(
-					member,
-					b.literal('#v'),
-					true,
-					!is_inside_left_side_assignment(node),
-					/** @type {AST.NodeWithLocation} */ (node),
-				);
-				member_expanded.tracked = true;
-				return member_expanded;
-			} else {
-				if (!context.state.to_ts) {
-					return b.call(
-						'_$_.get_property',
-						/** @type {AST.Expression} */ (context.visit(node.object)),
-						node.computed
-							? /** @type {AST.Expression} */ (context.visit(node.property))
-							: b.literal(/** @type {AST.Identifier} */ (node.property).name),
-						node.optional ? b.true : undefined,
-					);
-				}
-			}
-		}
-
 		if (node.object.type === 'MemberExpression' && node.object.optional) {
 			const metadata = { tracking: false, await: false };
 
@@ -1640,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) {
@@ -1674,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) {
@@ -1696,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;
 							}
 
@@ -1708,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 {
@@ -1757,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 })));
@@ -1986,7 +1944,9 @@ const visitors = {
 				delete props_param.typeAnnotation;
 				if (!props_param.lazy) {
 					// Non-lazy destructuring: use the pattern directly as the function param
-					props = props_param;
+					props = /** @type {AST.ObjectPattern | AST.ArrayPattern} */ (
+						replace_lazy_param_pattern(props_param)
+					);
 				}
 				// Lazy destructuring: props stays as __props, bindings resolved via transforms
 			}
@@ -2059,56 +2019,6 @@ const visitors = {
 			}
 		}
 
-		if (
-			left.type === 'MemberExpression' &&
-			(left.tracked || (left.property.type === 'Identifier' && left.property.tracked))
-		) {
-			const operator = node.operator;
-			const right = node.right;
-
-			if (operator !== '=' && context.state.metadata?.tracking === false) {
-				context.state.metadata.tracking = true;
-			}
-
-			return b.call(
-				'_$_.set_property',
-				/** @type {AST.Expression} */ (
-					context.visit(left.object, { ...context.state, metadata: { tracking: false } })
-				),
-				left.computed
-					? /** @type {AST.Expression} */ (context.visit(left.property))
-					: b.literal(/** @type {AST.Identifier} */ (left.property).name),
-				operator === '='
-					? /** @type {AST.Expression} */ (context.visit(right))
-					: b.binary(
-							operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
-							/** @type {AST.Expression} */ (context.visit(left)),
-							/** @type {AST.Expression} */ (context.visit(right)),
-						),
-			);
-		}
-
-		if (left.type === 'Identifier' && left.tracked) {
-			const operator = node.operator;
-			const right = node.right;
-
-			return b.call(
-				'_$_.set',
-				/** @type {AST.Expression} */ (
-					context.visit(left, { ...context.state, metadata: { tracking: null } })
-				),
-				operator === '='
-					? /** @type {AST.Expression} */ (context.visit(right))
-					: b.binary(
-							operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
-							/** @type {AST.Expression} */ (
-								context.visit(left, { ...context.state, metadata: { tracking: false } })
-							),
-							/** @type {AST.Expression} */ (context.visit(right)),
-						),
-			);
-		}
-
 		return visit_assignment_expression(node, context, build_assignment) ?? context.next();
 	},
 
@@ -2126,43 +2036,6 @@ const visitors = {
 			}
 		}
 
-		if (
-			argument.type === 'MemberExpression' &&
-			(argument.tracked || (argument.property.type === 'Identifier' && argument.property.tracked))
-		) {
-			if (context.state.metadata?.tracking === false) {
-				context.state.metadata.tracking = true;
-			}
-
-			return b.call(
-				node.prefix ? '_$_.update_pre_property' : '_$_.update_property',
-				/** @type {AST.Expression} */
-				(context.visit(argument.object, { ...context.state, metadata: { tracking: false } })),
-				argument.computed
-					? /** @type {AST.Expression} */ (context.visit(argument.property))
-					: b.literal(/** @type {AST.Identifier} */ (argument.property).name),
-				node.operator === '--' ? b.literal(-1) : undefined,
-			);
-		}
-
-		if (argument.type === 'Identifier' && argument.tracked) {
-			return b.call(
-				node.prefix ? '_$_.update_pre' : '_$_.update',
-				/** @type {AST.Expression} */
-				(context.visit(argument, { ...context.state, metadata: { tracking: null } })),
-				node.operator === '--' ? b.literal(-1) : undefined,
-			);
-		}
-
-		if (argument.type === 'TrackedExpression') {
-			return b.call(
-				node.prefix ? '_$_.update_pre' : '_$_.update',
-				/** @type {AST.Expression} */
-				(context.visit(argument.argument, { ...context.state, metadata: { tracking: null } })),
-				node.operator === '--' ? b.literal(-1) : undefined,
-			);
-		}
-
 		const left = object(/** @type {AST.MemberExpression | AST.Identifier} */ (argument));
 		const binding = left && context.state.scope.get(left.name);
 		const transformers = left && binding?.transform;
@@ -2786,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?
@@ -2953,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,
@@ -3212,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' ||
@@ -3310,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)
@@ -3482,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;
@@ -3496,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),
 		);
 	};
@@ -3652,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) {
@@ -3752,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()
@@ -3768,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 (
@@ -3814,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/segments.js

@@ -1123,13 +1123,6 @@ export function convert_source_map_to_mappings(
 						mapping_data_verify_only,
 					);
 
-					if (node.tracked) {
-						mapping.generatedLengths[0] = mapping.generatedLengths[0] + "['#v']".length;
-						if (node.optional) {
-							mapping.generatedLengths[0] = mapping.generatedLengths[0] + '.?'.length;
-						}
-					}
-
 					mappings.push(mapping);
 				}