ripple 0.2.208 → 0.2.211

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

@@ -55,6 +55,7 @@ import {
 	index_to_key,
 	is_element_dynamic,
 	is_inside_left_side_assignment,
+	hash,
 } from '../../../utils.js';
 import {
 	CSS_HASH_IDENTIFIER,
@@ -130,9 +131,10 @@ function visit_function(node, context) {
 
 /**
  * @param {AST.Element} node
+ * @param {number} index
  * @param {TransformClientContext} context
  */
-function visit_head_element(node, context) {
+function visit_head_element(node, index, context) {
 	const { state, visit } = context;
 
 	/** @type {TransformClientState['init']} */
@@ -154,10 +156,16 @@ function visit_head_element(node, context) {
 	);
 
 	if (init.length > 0 || update.length > 0 || final.length > 0) {
+		// Generate a hash for this head element based on filename and index
+		// Use both filename and index to ensure uniqueness across multiple head blocks
+		const hash_source = `${state.filename}:head:${index}:${node.start ?? 0}`;
+		const hash_value = hash(hash_source);
+
 		context.state.init?.push(
 			b.stmt(
 				b.call(
 					'_$_.head',
+					b.literal(hash_value),
 					b.arrow(
 						[b.id('__anchor')],
 						b.block([
@@ -1466,7 +1474,13 @@ const visitors = {
 					node.children,
 					/** @type {VisitorClientContext} */ ({
 						visit,
-						state: { ...state, init, update, namespace: child_namespace },
+						state: {
+							...state,
+							init,
+							update,
+							namespace: child_namespace,
+							skip_children_traversal: true,
+						},
 						root: false,
 					}),
 				);
@@ -2105,6 +2119,44 @@ const visitors = {
 		const id = context.state.flush_node?.();
 		const statements = [];
 
+		// Optimize lone return: if (cond) { return; } with no alternate
+		if (node.metadata?.lone_return && context.state.return_flags) {
+			const consequent_body =
+				node.consequent.type === 'BlockStatement' ? node.consequent.body : [node.consequent];
+			const ret = /** @type {AST.ReturnStatement} */ (consequent_body[0]);
+			const info = context.state.return_flags.get(ret);
+
+			if (info) {
+				/** @type {AST.Statement[]} */
+				const callback_body = [];
+
+				if (info.tracked) {
+					callback_body.push(b.stmt(b.call('_$_.set', b.id(info.name), b.false)));
+					callback_body.push(
+						b.if(
+							/** @type {AST.Expression} */ (context.visit(node.test)),
+							b.stmt(b.call('_$_.set', b.id(info.name), b.true)),
+						),
+					);
+				} else {
+					callback_body.push(b.stmt(b.assignment('=', b.id(info.name), b.false)));
+					callback_body.push(
+						b.if(
+							/** @type {AST.Expression} */ (context.visit(node.test)),
+							b.stmt(b.assignment('=', b.id(info.name), b.true)),
+						),
+					);
+				}
+
+				statements.push(
+					b.stmt(b.call('_$_.if', id, b.arrow([b.id('__render')], b.block(callback_body)))),
+				);
+
+				context.state.init?.push(b.block(statements));
+				return;
+			}
+		}
+
 		const consequent_scope =
 			/** @type {ScopeInterface} */ (context.state.scopes.get(node.consequent)) ||
 			context.state.scope;
@@ -2137,36 +2189,65 @@ const visitors = {
 			statements.push(b.var(b.id(alternate_id), b.arrow([b.id('__anchor')], alternate_block)));
 		}
 
-		statements.push(
-			b.stmt(
-				b.call(
-					'_$_.if',
-					id,
-					b.arrow(
-						[b.id('__render')],
-						b.block([
-							b.if(
-								/** @type {AST.Expression} */ (context.visit(node.test)),
-								b.stmt(b.call(b.id('__render'), b.id(consequent_id))),
-								alternate_id
-									? b.stmt(
-											b.call(
-												b.id('__render'),
-												b.id(alternate_id),
-												node.alternate ? b.literal(false) : undefined,
-											),
-										)
-									: undefined,
+		// Collect return flag resets for IfStatements that contain returns
+		/** @type {AST.Statement[]} */
+		const callback_body = [];
+
+		if (node.metadata?.has_return && context.state.return_flags) {
+			const returns = node.metadata.returns || [];
+			for (const ret of returns) {
+				const info = context.state.return_flags.get(ret);
+				if (info) {
+					if (info.tracked) {
+						callback_body.push(b.stmt(b.call('_$_.set', b.id(info.name), b.false)));
+					} else {
+						callback_body.push(b.stmt(b.assignment('=', b.id(info.name), b.false)));
+					}
+				}
+			}
+		}
+
+		callback_body.push(
+			b.if(
+				/** @type {AST.Expression} */ (context.visit(node.test)),
+				b.stmt(b.call(b.id('__render'), b.id(consequent_id))),
+				alternate_id
+					? b.stmt(
+							b.call(
+								b.id('__render'),
+								b.id(alternate_id),
+								node.alternate ? b.literal(false) : undefined,
 							),
-						]),
-					),
-				),
+						)
+					: undefined,
 			),
 		);
 
+		statements.push(
+			b.stmt(b.call('_$_.if', id, b.arrow([b.id('__render')], b.block(callback_body)))),
+		);
+
 		context.state.init?.push(b.block(statements));
 	},
 
+	ReturnStatement(node, context) {
+		if (!is_inside_component(context)) {
+			return context.next();
+		}
+		if (context.state.to_ts) {
+			return context.next();
+		}
+		const info = context.state.return_flags?.get(node);
+		if (info) {
+			if (info.tracked) {
+				return b.stmt(b.call('_$_.set', b.id(info.name), b.true));
+			} else {
+				return b.stmt(b.assignment('=', b.id(info.name), b.true));
+			}
+		}
+		return context.next();
+	},
+
 	TSAsExpression(node, context) {
 		if (!context.state.to_ts) {
 			return context.visit(/** @type {AST.Expression} */ (node.expression));
@@ -2525,26 +2606,30 @@ function transform_ts_child(node, context) {
 
 				const jsx_attr = b.jsx_attribute(
 					jsx_name,
-					b.jsx_expression_container(
-						/** @type {AST.Expression} */ (value),
-						attr_value === null
-							? /** @type {AST.NodeWithLocation} */ (value)
-							: // account location for opening and closing braces around the expression
-								/** @type {AST.NodeWithLocation} */ ({
-									start: attr_value.start - 1,
-									end: attr_value.end + 1,
-									loc: {
-										start: {
-											line: attr_value.loc.start.line,
-											column: attr_value.loc.start.column - 1,
-										},
-										end: {
-											line: attr_value.loc.end.line,
-											column: attr_value.loc.end.column + 1,
-										},
-									},
-								}),
-					),
+					// match the source code usage of expressions for literals
+					// for proper source mapping to avoid turning strings into expressions
+					attr_value?.type === 'Literal' && !attr_value.was_expression
+						? /** @type {AST.Literal} */ (value)
+						: b.jsx_expression_container(
+								/** @type {AST.Expression} */ (value),
+								attr_value === null
+									? /** @type {AST.NodeWithLocation} */ (value)
+									: // account location for opening and closing braces around the expression
+										/** @type {AST.NodeWithLocation} */ ({
+											start: attr_value.start - 1,
+											end: attr_value.end + 1,
+											loc: {
+												start: {
+													line: attr_value.loc.start.line,
+													column: attr_value.loc.start.column - 1,
+												},
+												end: {
+													line: attr_value.loc.end.line,
+													column: attr_value.loc.end.column + 1,
+												},
+											},
+										}),
+							),
 					attr.shorthand ?? false,
 					/** @type {AST.NodeWithLocation} */ (attr),
 				);
@@ -2589,6 +2674,7 @@ function transform_ts_child(node, context) {
 											/** @type {AST.Identifier} */ (node.id).name === 'head'
 												? true
 												: state.inside_head,
+										skip_children_traversal: is_dom_element,
 									},
 								}),
 							),
@@ -2848,6 +2934,71 @@ function transform_ts_child(node, context) {
 	}
 }
 
+/**
+ * Checks if a node is template or control-flow content
+ * @param {AST.Node} node
+ * @returns {boolean}
+ */
+function is_template_or_control_flow(node) {
+	return (
+		node.type === 'Element' ||
+		node.type === 'Text' ||
+		node.type === 'Html' ||
+		node.type === 'TsxCompat' ||
+		node.type === 'IfStatement' ||
+		node.type === 'ForOfStatement' ||
+		node.type === 'TryStatement' ||
+		node.type === 'SwitchStatement'
+	);
+}
+
+/**
+ * Builds a negated AND condition from return flag info: !flag1 && !flag2 && ...
+ * Uses _$_.get() for tracked flags and direct reference for plain booleans.
+ * @param {{ name: string, tracked: boolean }[]} flags
+ * @returns {AST.Expression}
+ */
+function build_return_guard(flags) {
+	/** @param {{ name: string, tracked: boolean }} flag */
+	const negate_flag = (flag) =>
+		flag.tracked ? b.unary('!', b.call('_$_.get', b.id(flag.name))) : b.unary('!', b.id(flag.name));
+
+	/** @type {AST.Expression} */
+	let condition = negate_flag(flags[0]);
+	for (let i = 1; i < flags.length; i++) {
+		condition = b.logical('&&', condition, negate_flag(flags[i]));
+	}
+	return condition;
+}
+
+/**
+ * Collects all unique return statements from direct children
+ * @param {AST.Node[]} children
+ * @returns {AST.ReturnStatement[]}
+ */
+function collect_returns_from_children(children) {
+	/** @type {AST.ReturnStatement[]} */
+	const returns = [];
+	const seen = new Set();
+	for (const node of children) {
+		if (node.type === 'ReturnStatement') {
+			if (!seen.has(node)) {
+				seen.add(node);
+				returns.push(node);
+			}
+		}
+		if (node.metadata?.returns) {
+			for (const ret of node.metadata.returns) {
+				if (!seen.has(ret)) {
+					seen.add(ret);
+					returns.push(ret);
+				}
+			}
+		}
+	}
+	return returns;
+}
+
 /**
  *
  * @param {AST.Node[]} children
@@ -2866,6 +3017,36 @@ function transform_children(children, context) {
 		)
 	);
 
+	const all_returns = collect_returns_from_children(normalized);
+	/** @type {Map<AST.ReturnStatement, { name: string, tracked: boolean }>} */
+	const return_flags = new Map([...(state.return_flags || [])]);
+	/** @type {AST.ReturnStatement[]} */
+	const new_returns = [];
+	for (const ret of all_returns) {
+		if (!return_flags.has(ret)) {
+			return_flags.set(ret, {
+				name: state.scope.generate('__r'),
+				tracked: ret.metadata?.is_reactive ?? false,
+			});
+			new_returns.push(ret);
+		}
+	}
+
+	if (!state.to_ts) {
+		for (const ret of new_returns) {
+			const info = /** @type {{ name: string, tracked: boolean }} */ (return_flags.get(ret));
+			if (info.tracked) {
+				state.init?.unshift(b.var(b.id(info.name), b.call('_$_.tracked', b.false)));
+			} else {
+				state.init?.unshift(b.var(b.id(info.name), b.false));
+			}
+		}
+	}
+
+	/** @type {{ name: string, tracked: boolean }[]} */
+	const accumulated_return_flags = [];
+	const has_returns = all_returns.length > 0;
+
 	const is_fragment =
 		normalized.some(
 			(node) =>
@@ -2883,6 +3064,7 @@ function transform_children(children, context) {
 		).length > 1;
 	/** @type {AST.Identifier | null} */
 	let initial = null;
+	/** @type {(() => AST.Identifier) | null} */
 	let prev = null;
 	let template_id = null;
 
@@ -2913,7 +3095,97 @@ function transform_children(children, context) {
 		state.init?.push(b.var(id, b.call(template_id)));
 	};
 
-	for (const node of normalized) {
+	/** @type {AST.Node[]} */
+	let pending_group = [];
+	/** @type {{ name: string, tracked: boolean }[]} */
+	let pending_guard_flags = [];
+
+	let skipped = 0;
+
+	const flush_pending_group = () => {
+		if (pending_group.length === 0) return;
+
+		const guard_flags = pending_guard_flags;
+		const group_nodes = pending_group;
+		pending_group = [];
+		pending_guard_flags = [];
+
+		// Push <!> placeholder for the _$_.if anchor
+		state.template?.push('<!>');
+
+		if (initial === null && root) {
+			create_initial(group_nodes[0]);
+		}
+
+		const current_prev = prev;
+		/** @type {AST.Identifier | null} */
+		let cached_anchor = null;
+		const group_flush_node = () => {
+			if (cached_anchor) return cached_anchor;
+			const id = b.id(state.scope.generate('node'));
+			if (current_prev !== null) {
+				state.init?.push(b.var(id, b.call('_$_.sibling', current_prev())));
+			} else if (initial !== null) {
+				if (is_fragment) {
+					state.init?.push(b.var(id, b.call('_$_.first_child_frag', initial)));
+				} else {
+					cached_anchor = initial;
+					return initial;
+				}
+			} else if (state.flush_node !== null) {
+				state.init?.push(b.var(id, b.call('_$_.child', state.flush_node?.())));
+			}
+			cached_anchor = id;
+			return id;
+		};
+
+		prev = group_flush_node;
+
+		const anchor = group_flush_node();
+
+		// Process group nodes through transform_body
+		const body = transform_body(group_nodes, {
+			...context,
+			state: { ...context.state, flush_node: null, return_flags },
+		});
+
+		const content_id = state.scope.generate('content');
+		const guard_condition = build_return_guard(guard_flags);
+
+		/** @type {AST.Statement[]} */
+		const callback_body = [
+			b.if(guard_condition, b.stmt(b.call(b.id('__render'), b.id(content_id)))),
+		];
+
+		state.init?.push(b.var(b.id(content_id), b.arrow([b.id('__anchor')], b.block(body))));
+		state.init?.push(
+			b.stmt(b.call('_$_.if', anchor, b.arrow([b.id('__render')], b.block(callback_body)))),
+		);
+	};
+
+	for (let node_idx = 0; node_idx < normalized.length; node_idx++) {
+		const node = normalized[node_idx];
+
+		if (accumulated_return_flags.length > 0 && is_template_or_control_flow(node) && !state.to_ts) {
+			if (pending_group.length === 0) {
+				pending_guard_flags = [...accumulated_return_flags];
+			}
+			pending_group.push(node);
+
+			if (node.metadata?.has_return && node.metadata.returns) {
+				flush_pending_group();
+				for (const ret of node.metadata.returns) {
+					const info = return_flags.get(ret);
+					if (info && !accumulated_return_flags.some((f) => f.name === info.name)) {
+						accumulated_return_flags.push(info);
+					}
+				}
+			}
+			continue;
+		}
+
+		flush_pending_group();
+
 		if (
 			node.type === 'VariableDeclaration' ||
 			node.type === 'ExpressionStatement' ||
@@ -2923,16 +3195,25 @@ function transform_children(children, context) {
 			node.type === 'ClassDeclaration' ||
 			node.type === 'TSTypeAliasDeclaration' ||
 			node.type === 'TSInterfaceDeclaration' ||
+			node.type === 'ReturnStatement' ||
 			node.type === 'Component'
 		) {
 			const metadata = { await: false };
-			state.init?.push(/** @type {AST.Statement} */ (visit(node, { ...state, metadata })));
+			state.init?.push(
+				/** @type {AST.Statement} */ (visit(node, { ...state, return_flags, metadata })),
+			);
 			if (metadata.await) {
 				state.init?.push(b.if(b.call('_$_.aborted'), b.return(null)));
 				if (state.metadata?.await === false) {
 					state.metadata.await = true;
 				}
 			}
+			if (!state.to_ts && node.type === 'ReturnStatement') {
+				const info = return_flags.get(node);
+				if (info && !accumulated_return_flags.some((f) => f.name === info.name)) {
+					accumulated_return_flags.push(info);
+				}
+			}
 		} else if (state.to_ts) {
 			transform_ts_child(node, /** @type {VisitorClientContext} */ ({ visit, state }));
 		} else {
@@ -2993,19 +3274,30 @@ function transform_children(children, context) {
 			const is_controlled = normalized.length === 1 && !root;
 
 			if (node.type === 'Element') {
+				if (is_element_dom_element(node)) {
+					skipped++;
+				} else {
+					skipped = 0;
+				}
+
 				visit(node, {
 					...state,
+					return_flags,
 					flush_node: /** @type {TransformClientState['flush_node']} */ (flush_node),
 					namespace: state.namespace,
 				});
 			} else if (node.type === 'TsxCompat') {
+				skipped = 0;
+
 				visit(node, {
 					...state,
+					return_flags,
 					flush_node: /** @type {TransformClientState['flush_node']} */ (flush_node),
 					namespace: state.namespace,
 				});
 			} else if (node.type === 'Html') {
 				context.state.template?.push('<!>');
+				skipped = 0;
 
 				const id = flush_node(false);
 				state.update?.push({
@@ -3022,6 +3314,7 @@ function transform_children(children, context) {
 				});
 			} else if (node.type === 'Text') {
 				if (metadata?.tracking) {
+					skipped = 0;
 					state.template?.push(' ');
 					const id = flush_node(true);
 					state.update?.push({
@@ -3034,6 +3327,7 @@ function transform_children(children, context) {
 						/** @type {NonNullable<TransformClientState['update']>} */ (state.update).async = true;
 					}
 				} else if (normalized.length === 1) {
+					skipped++;
 					const expr = /** @type {AST.Expression} */ (expression);
 					if (expr.type === 'Literal') {
 						if (
@@ -3061,6 +3355,7 @@ function transform_children(children, context) {
 						);
 					}
 				} else {
+					skipped++;
 					// Handle Text nodes in fragments
 					const expr = /** @type {AST.Expression} */ (expression);
 					if (expr.type === 'Literal') {
@@ -3081,6 +3376,7 @@ function transform_children(children, context) {
 					}
 				}
 			} else if (node.type === 'ForOfStatement') {
+				skipped = 0;
 				node.is_controlled = is_controlled;
 				visit(node, {
 					...state,
@@ -3088,13 +3384,16 @@ function transform_children(children, context) {
 					namespace: state.namespace,
 				});
 			} else if (node.type === 'IfStatement') {
+				skipped = 0;
 				node.is_controlled = is_controlled;
 				visit(node, {
 					...state,
+					return_flags,
 					flush_node: /** @type {TransformClientState['flush_node']} */ (flush_node),
 					namespace: state.namespace,
 				});
 			} else if (node.type === 'TryStatement') {
+				skipped = 0;
 				node.is_controlled = is_controlled;
 				visit(node, {
 					...state,
@@ -3102,6 +3401,7 @@ function transform_children(children, context) {
 					namespace: state.namespace,
 				});
 			} else if (node.type === 'SwitchStatement') {
+				skipped = 0;
 				node.is_controlled = is_controlled;
 				visit(node, {
 					...state,
@@ -3114,13 +3414,25 @@ function transform_children(children, context) {
 				debugger;
 			}
 		}
+
+		if (has_returns && node.metadata?.has_return && node.metadata.returns) {
+			for (const ret of node.metadata.returns) {
+				const info = return_flags.get(ret);
+				if (info && !accumulated_return_flags.some((f) => f.name === info.name)) {
+					accumulated_return_flags.push(info);
+				}
+			}
+		}
 	}
 
-	for (const head_element of head_elements) {
+	flush_pending_group();
+
+	for (let i = 0; i < head_elements.length; i++) {
+		const head_element = head_elements[i];
 		if (state.to_ts) {
 			transform_ts_child(head_element, /** @type {VisitorClientContext} */ ({ visit, state }));
 		} else {
-			visit_head_element(head_element, context);
+			visit_head_element(head_element, i, context);
 		}
 	}
 
@@ -3137,6 +3449,13 @@ function transform_children(children, context) {
 		}
 	}
 
+	let emitted_next = false;
+	if (is_fragment && skipped > 1 && !state.skip_children_traversal) {
+		skipped--;
+		state.init?.push(b.stmt(b.call('_$_.next', skipped !== 1 && b.literal(skipped))));
+		emitted_next = true;
+	}
+
 	const template_namespace = state.namespace || 'html';
 
 	if (root && initial !== null && template_id !== null) {
@@ -3146,7 +3465,9 @@ function transform_children(children, context) {
 		} else if (template_namespace === 'mathml') {
 			flags |= TEMPLATE_MATHML_NAMESPACE;
 		}
-		state.final?.push(b.stmt(b.call('_$_.append', b.id('__anchor'), initial)));
+		state.final?.push(
+			b.stmt(b.call('_$_.append', b.id('__anchor'), initial, emitted_next && b.true)),
+		);
 		state.hoisted.push(
 			b.var(
 				template_id,
@@ -3466,6 +3787,18 @@ function create_tsx_with_typescript_support(comments) {
 			// cover the end
 			context.location(loc.end.line, loc.end.column);
 		},
+		ReturnStatement(node, context) {
+			if (!node.loc) {
+				base_tsx.ReturnStatement?.(node, context);
+				return;
+			}
+
+			const { start, end } = node.loc;
+
+			context.location(start.line, start.column);
+			base_tsx.ReturnStatement?.(node, context);
+			context.location(end.line, end.column);
+		},
 		AwaitExpression(node, context) {
 			const loc = /** @type {AST.SourceLocation} */ (node.loc);
 			// the start needs to be covered as we don't cover it in visitors
@@ -3597,6 +3930,10 @@ function create_tsx_with_typescript_support(comments) {
 				}
 				context.write('>');
 			}
+
+			if (node.loc) {
+				context.location(node.loc.end.line, node.loc.end.column);
+			}
 		},
 		JSXClosingElement(node, context) {
 			const loc = /** @type {AST.SourceLocation} */ (node.loc);
@@ -4115,6 +4452,7 @@ export function transform_client(filename, source, analysis, to_ts, minify_css)
 		namespace: 'html',
 		metadata: {},
 		errors: analysis.errors,
+		skip_children_traversal: false,
 	};
 
 	// Add ripple internal import once for the entire module