ripple 0.3.8 → 0.3.10

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

@@ -23,11 +23,12 @@ import {
 	is_inside_component,
 	is_void_element,
 	normalize_children,
+	is_children_template_expression,
 	is_binding_function,
 	is_element_dynamic,
 	is_ripple_track_call,
 	is_ripple_import,
-	ripple_import_requires_block,
+	replace_lazy_param_pattern,
 	hash,
 	flatten_switch_consequent,
 	get_ripple_namespace_call_name,
@@ -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' ||
@@ -355,7 +357,7 @@ const visitors = {
 					// Lazy destructuring: use __props identifier, bindings resolved via transforms
 					props_param_output = b.id('__props');
 				} else {
-					props_param_output = props_param;
+					props_param_output = replace_lazy_param_pattern(props_param);
 				}
 			} else {
 				props_param_output = props_param;
@@ -500,7 +502,7 @@ const visitors = {
 
 		const track_call_name = is_ripple_track_call(callee, context);
 		if (track_call_name) {
-			const track_method_name = track_call_name === 'trackSplit' ? 'track_split' : 'track';
+			const track_method_name = 'track';
 
 			return {
 				...node,
@@ -597,16 +599,12 @@ const visitors = {
 				}
 				// Replace lazy destructuring params with generated identifiers
 				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);
 					node.params[i] =
 						param.type === 'AssignmentPattern'
-							? /** @type {AST.AssignmentPattern} */ ({ ...param, left: id })
-							: id;
+							? /** @type {AST.AssignmentPattern} */ ({ ...param, left: transformed_pattern })
+							: transformed_pattern;
 				}
 			}
 		}
@@ -626,16 +624,12 @@ const visitors = {
 				}
 				// Replace lazy destructuring params with generated identifiers
 				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);
 					node.params[i] =
 						param.type === 'AssignmentPattern'
-							? /** @type {AST.AssignmentPattern} */ ({ ...param, left: id })
-							: id;
+							? /** @type {AST.AssignmentPattern} */ ({ ...param, left: transformed_pattern })
+							: transformed_pattern;
 				}
 			}
 		}
@@ -665,16 +659,12 @@ const visitors = {
 			}
 			// Replace lazy destructuring params with generated identifiers
 			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);
 				node.params[i] =
 					param.type === 'AssignmentPattern'
-						? /** @type {AST.AssignmentPattern} */ ({ ...param, left: id })
-						: id;
+						? /** @type {AST.AssignmentPattern} */ ({ ...param, left: transformed_pattern })
+						: transformed_pattern;
 			}
 		}
 
@@ -1094,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;
@@ -1114,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;
 						}
 
@@ -1131,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
@@ -1429,53 +1417,6 @@ const visitors = {
 			}
 		}
 
-		if (
-			left.type === 'MemberExpression' &&
-			(left.tracked || (left.property.type === 'Identifier' && left.property.tracked))
-		) {
-			const operator = node.operator;
-			const right = node.right;
-
-			return b.call(
-				'_$_.set_property',
-				/** @type {AST.Expression} */ (context.visit(left.object)),
-				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 === '*=' ? '*' : '/',
-							b.call(
-								'_$_.get_property',
-								/** @type {AST.Expression} */ (context.visit(left.object)),
-								left.computed
-									? /** @type {AST.Expression} */ (context.visit(left.property))
-									: b.literal(/** @type {AST.Identifier} */ (left.property).name),
-								undefined,
-							),
-							/** @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)),
-				operator === '='
-					? /** @type {AST.Expression} */ (context.visit(right))
-					: b.binary(
-							operator === '+=' ? '+' : operator === '-=' ? '-' : operator === '*=' ? '*' : '/',
-							b.call('_$_.get', left),
-							/** @type {AST.Expression} */ (context.visit(right)),
-						),
-			);
-		}
-
 		return context.next();
 	},
 
@@ -1489,39 +1430,6 @@ const visitors = {
 				return binding.transform.update(node);
 			}
 		}
-
-		if (
-			argument.type === 'MemberExpression' &&
-			(argument.tracked || (argument.property.type === 'Identifier' && argument.property.tracked))
-		) {
-			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)),
-				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)),
-				node.operator === '--' ? b.literal(-1) : undefined,
-			);
-		}
 	},
 
 	ServerIdentifier(node, context) {
@@ -1703,36 +1611,14 @@ const visitors = {
 		return b.await(/** @type {AST.AwaitExpression} */ (context.visit(node.argument)));
 	},
 
-	TrackedExpression(node, context) {
-		return b.call('_$_.get', /** @type {AST.Expression} */ (context.visit(node.argument)));
-	},
-
 	MemberExpression(node, context) {
-		if (
-			node.tracked ||
-			((node.property.type === 'Identifier' || node.property.type === 'Literal') &&
-				node.property.tracked)
-		) {
-			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,
-			);
-		}
-
 		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 }));
-
-		if (expression.type === 'Identifier' && expression.tracked) {
-			expression = b.call('_$_.get', expression);
-		}
+		const is_children_expression = is_children_template_expression(node.expression, state.scope);
 
 		if (expression.type === 'Literal') {
 			state.init?.push(
@@ -1740,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))),
@@ -1747,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/acorn.d.ts

@@ -6,6 +6,6 @@
 //
 // The relative import of './parser' loads the augmentation declarations
 // (declare module 'acorn' { ... }) so the re-exported types include
-// Ripple-specific nodes like Component, Element, TrackedExpression, etc.
+// Ripple-specific nodes like Component, Element, etc.
 import './parser.d.ts';
 export * from 'acorn';

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

@@ -6,6 +6,6 @@
 //
 // The relative import of './index' loads the augmentation declarations
 // (declare module 'estree' { ... }) so the re-exported types include
-// Ripple-specific nodes like Component, Element, TrackedExpression, etc.
+// Ripple-specific nodes like Component, Element, etc.
 import './index';
 export * from 'estree';

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

@@ -41,7 +41,6 @@ import {
 	MediaQuery as _$_MediaQuery__,
 	createRefKey as _$_RefKey__create,
 	track as _$_track__,
-	trackSplit as _$_trackSplit__,
 	effect as _$_effect__,
 	untrack as _$_untrack__,
 	ripple_namespace as _$__u0023_ripple,
@@ -59,7 +58,6 @@ export {
 	_$_MediaQuery__,
 	_$_RefKey__create,
 	_$_track__,
-	_$_trackSplit__,
 	_$_effect__,
 	_$_untrack__,
 	_$__u0023_ripple,

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

@@ -116,19 +116,17 @@ declare module 'estree' {
 
 	// We mark the whole node as marked when member is @[expression]
 	// Otherwise, we only mark Identifier nodes
-	interface MemberExpression extends AST.TrackedNode {}
+	interface MemberExpression {}
 
-	// These 3 are needed so that Literal can extend TrackedNode
-	// since Literal is a union type we have to extend each individually
-	interface SimpleLiteral extends AST.LiteralTrackedNode {}
-	interface RegExpLiteral extends AST.LiteralTrackedNode {}
-	interface BigIntLiteral extends AST.LiteralTrackedNode {}
+	interface SimpleLiteral extends AST.LiteralNode {}
+	interface RegExpLiteral extends AST.LiteralNode {}
+	interface BigIntLiteral extends AST.LiteralNode {}
 
 	interface TrackedNode {
 		tracked?: boolean;
 	}
 
-	interface LiteralTrackedNode extends AST.TrackedNode {
+	interface LiteralNode {
 		was_expression?: boolean;
 	}
 
@@ -136,6 +134,7 @@ declare module 'estree' {
 	interface NodeMap {
 		Component: Component;
 		TsxCompat: TsxCompat;
+		RippleExpression: RippleExpression;
 		Html: Html;
 		Element: Element;
 		Text: TextNode;
@@ -143,7 +142,6 @@ declare module 'estree' {
 		ServerBlockStatement: ServerBlockStatement;
 		ServerIdentifier: ServerIdentifier;
 		StyleIdentifier: StyleIdentifier;
-		TrackedExpression: TrackedExpression;
 		Attribute: Attribute;
 		RefAttribute: RefAttribute;
 		SpreadAttribute: SpreadAttribute;
@@ -152,7 +150,6 @@ declare module 'estree' {
 	}
 
 	interface ExpressionMap {
-		TrackedExpression: TrackedExpression;
 		StyleIdentifier: StyleIdentifier;
 		ServerIdentifier: ServerIdentifier;
 		Text: TextNode;
@@ -286,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 {
@@ -345,14 +348,6 @@ declare module 'estree' {
 		content: string;
 	}
 
-	/**
-	 * Tracked Expressions
-	 */
-	interface TrackedExpression extends AST.BaseExpression {
-		argument: AST.Expression;
-		type: 'TrackedExpression';
-	}
-
 	/**
 	 * Ripple attribute nodes
 	 */
@@ -613,6 +608,7 @@ declare module 'estree-jsx' {
 
 	interface JSXExpressionContainer {
 		html?: boolean;
+		text?: boolean;
 	}
 
 	interface JSXMemberExpression {

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

@@ -924,13 +924,7 @@ export namespace Parse {
 			refDestructuringErrors?: DestructuringErrors,
 			forInit?: ForInit,
 			forNew?: boolean,
-		):
-			| AST.ServerIdentifier
-			| AST.StyleIdentifier
-			| AST.TrackedExpression
-			| AST.Component
-			| AST.Identifier
-			| AST.Literal;
+		): AST.ServerIdentifier | AST.StyleIdentifier | AST.Component | AST.Identifier | AST.Literal;
 
 		/** Default handler for parseExprAtom when no other case matches */
 		parseExprAtomDefault(): AST.Expression;
@@ -950,8 +944,6 @@ export namespace Parse {
 		/** Parse parenthesized expression (just the expression) */
 		parseParenExpression(): AST.Expression;
 
-		parseTrackedExpression(): AST.TrackedExpression;
-
 		/**
 		 * Parse item in parentheses (can be overridden for flow/ts)
 		 */
@@ -1203,6 +1195,8 @@ export namespace Parse {
 			topLevel?: boolean,
 			exports?: AST.ExportSpecifier,
 		):
+			| AST.RippleExpression
+			| AST.Html
 			| AST.TextNode
 			| ESTreeJSX.JSXEmptyExpression
 			| ESTreeJSX.JSXExpressionContainer