ripple 0.2.208 → 0.2.210

package/src/compiler/phases/3-transform/segments.js

@@ -675,22 +675,18 @@ export function convert_source_map_to_mappings(
 
 				if (opening.loc) {
 					// Add tokens for '<' and '>' brackets to ensure auto-close feature works
-					if (opening.loc) {
-						// Add '<' bracket
-						tokens.push({
-							source: '<',
-							generated: '<',
-							loc: {
-								start: { line: opening.loc.start.line, column: opening.loc.start.column },
-								end: { line: opening.loc.start.line, column: opening.loc.start.column + 1 },
-							},
-							metadata: {},
-							mappingData: mapping_data_verify_only,
-						});
-					}
+					tokens.push({
+						source: '<',
+						generated: '<',
+						loc: {
+							start: { line: opening.loc.start.line, column: opening.loc.start.column },
+							end: { line: opening.loc.start.line, column: opening.loc.start.column + 1 },
+						},
+						metadata: {},
+						mappingData: mapping_data_verify_only,
+					});
 
 					if (!opening.selfClosing) {
-						// Add '>' bracket
 						tokens.push({
 							source: '>',
 							generated: '>',
@@ -715,17 +711,28 @@ export function convert_source_map_to_mappings(
 					}
 				}
 
-				if (closing) {
-					// Add the whole closing tag
-					mappings.push(
-						get_mapping_from_node(
-							closing,
-							src_to_gen_map,
-							gen_line_offsets,
-							mapping_data_verify_only,
-						),
+				if (closing || opening.selfClosing) {
+					// Add the whole closing tag or the self-closing
+					const mapping = get_mapping_from_node(
+						closing ? closing : opening,
+						src_to_gen_map,
+						gen_line_offsets,
+						mapping_data_verify_only,
 					);
 
+					// The generated code includes a semicolon after the closing or self-closed tag
+					// We're extending the mapping to include the semicolon
+					// because the diagnostics errors can include the whole element
+					// and we need to account for the semicolon as it's a part of the diagnostic
+					// At the same time, we could've instead applied this logic to the whole `node` element
+					// but since we already map the opening - start, we just need the proper end
+					// and it was causing some issues with mappings
+					mapping.generatedLengths = [mapping.generatedLengths[0] + 1];
+					mapping.data.customData.generatedLengths = mapping.generatedLengths;
+					mappings.push(mapping);
+				}
+
+				if (closing) {
 					visit(closing);
 				}
 
@@ -838,26 +845,86 @@ export function convert_source_map_to_mappings(
 				if (node.test) {
 					visit(node.test);
 				}
+
 				if (node.consequent) {
-					mappings.push(
-						get_mapping_from_node(
-							node.consequent,
-							src_to_gen_map,
-							gen_line_offsets,
-							mapping_data_verify_only,
-						),
-					);
+					if (node.consequent.loc) {
+						// We're mapping only the brackets because mapping the whole thing
+						// would be way too broad and causes
+						// issues with partial mapping of something inside the body that we need
+						tokens.push(
+							{
+								source: '{',
+								generated: '{',
+								loc: {
+									start: {
+										line: node.consequent.loc.start.line,
+										column: node.consequent.loc.start.column,
+									},
+									end: {
+										line: node.consequent.loc.start.line,
+										column: node.consequent.loc.start.column + 1,
+									},
+								},
+								metadata: {},
+								mappingData: mapping_data_verify_only,
+							},
+							{
+								source: '}',
+								generated: '}',
+								loc: {
+									start: {
+										line: node.consequent.loc.end.line,
+										column: node.consequent.loc.end.column - 1,
+									},
+									end: {
+										line: node.consequent.loc.end.line,
+										column: node.consequent.loc.end.column,
+									},
+								},
+								metadata: {},
+								mappingData: mapping_data_verify_only,
+							},
+						);
+					}
+
 					visit(node.consequent);
 				}
+
 				if (node.alternate) {
-					mappings.push(
-						get_mapping_from_node(
-							node.alternate,
-							src_to_gen_map,
-							gen_line_offsets,
-							mapping_data_verify_only,
-						),
-					);
+					if (node.alternate.loc) {
+						tokens.push(
+							{
+								source: '{',
+								generated: '{',
+								loc: {
+									start: {
+										line: node.alternate.loc.start.line,
+										column: node.alternate.loc.start.column,
+									},
+									end: {
+										line: node.alternate.loc.start.line,
+										column: node.alternate.loc.start.column + 1,
+									},
+								},
+								metadata: {},
+								mappingData: mapping_data_verify_only,
+							},
+							{
+								source: '}',
+								generated: '}',
+								loc: {
+									start: {
+										line: node.alternate.loc.end.line,
+										column: node.alternate.loc.end.column - 1,
+									},
+									end: { line: node.alternate.loc.end.line, column: node.alternate.loc.end.column },
+								},
+								metadata: {},
+								mappingData: mapping_data_verify_only,
+							},
+						);
+					}
+
 					visit(node.alternate);
 				}
 
@@ -1198,6 +1265,23 @@ export function convert_source_map_to_mappings(
 				if (node.argument) {
 					visit(node.argument);
 				}
+
+				if (node.type === 'ReturnStatement' && node.loc) {
+					const mapping = get_mapping_from_node(
+						node,
+						src_to_gen_map,
+						gen_line_offsets,
+						mapping_data_verify_only,
+					);
+					// We're only mapping the 'return' keyword, otherwise the mapping would be too broad
+					// and likely may cause issues with partial mappings of something inside the return statement that we need
+					const return_keyword_length = 'return'.length;
+					mapping.lengths = [return_keyword_length];
+					mapping.generatedLengths = [return_keyword_length];
+					mapping.data.customData.generatedLengths = mapping.generatedLengths;
+
+					mappings.push(mapping);
+				}
 				return;
 			} else if (node.type === 'ExpressionStatement') {
 				if (node.expression) {

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

@@ -24,8 +24,8 @@ import {
 	is_void_element,
 	normalize_children,
 	is_binding_function,
-	build_getter,
 	is_element_dynamic,
+	hash,
 } from '../../../utils.js';
 import { escape } from '../../../../utils/escaping.js';
 import { is_event_attribute } from '../../../../utils/events.js';
@@ -38,6 +38,66 @@ import {
 } from '../../../identifier-utils.js';
 import { BLOCK_CLOSE, BLOCK_OPEN } from '../../../../constants.js';
 
+/**
+ * Checks if a node is template or control-flow content that should be wrapped when return flags are active
+ * @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 names: !__r_1 && !__r_2 && ...
+ * @param {string[]} flags
+ * @returns {AST.Expression}
+ */
+function build_return_guard(flags) {
+	/** @type {AST.Expression} */
+	let condition = b.unary('!', b.id(flags[0]));
+	for (let i = 1; i < flags.length; i++) {
+		condition = b.logical('&&', condition, b.unary('!', b.id(flags[i])));
+	}
+	return condition;
+}
+
+/**
+ * Collects all unique return statements from the direct children of a body
+ * @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
  * @param {TransformServerContext} context
@@ -46,10 +106,45 @@ function transform_children(children, context) {
 	const { visit, state } = context;
 	const normalized = normalize_children(children, context);
 
-	for (const node of normalized) {
+	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: false });
+			new_returns.push(ret);
+		}
+	}
+
+	for (const ret of new_returns) {
+		const info = /** @type {{ name: string, tracked: boolean }} */ (return_flags.get(ret));
+		state.init?.push(b.var(b.id(info.name), b.false));
+	}
+
+	// Track accumulated return flags as we process children
+	/** @type {string[]} */
+	let accumulated_flags = [];
+
+	/**
+	 * @param {AST.ReturnStatement[] | undefined} returns
+	 */
+	const push_return_flags = (returns) => {
+		if (!returns) return;
+		for (const ret of returns) {
+			const info = return_flags.get(ret);
+			if (info && !accumulated_flags.includes(info.name)) {
+				accumulated_flags.push(info.name);
+			}
+		}
+	};
+
+	/** @param {AST.Node} node */
+	const process_node = (node) => {
 		if (node.type === 'BreakStatement') {
 			state.init?.push(b.break);
-			continue;
+			return;
 		}
 		if (
 			node.type === 'VariableDeclaration' ||
@@ -60,21 +155,88 @@ 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 (node.type === 'ReturnStatement') {
+				const info = return_flags.get(node);
+				if (info && !accumulated_flags.includes(info.name)) {
+					accumulated_flags.push(info.name);
+				}
+			}
 		} else {
-			visit(node, state);
+			visit(node, { ...state, return_flags });
+		}
+	};
+
+	/** @type {AST.Node[]} */
+	let pending_group = [];
+	/** @type {string[]} */
+	let pending_guard_flags = [];
+
+	const flush_pending_group = () => {
+		if (pending_group.length === 0) return;
+
+		const group = pending_group;
+		const guard_flags = pending_guard_flags;
+		pending_group = [];
+		pending_guard_flags = [];
+
+		/** @type {AST.Statement[]} */
+		const wrapped = [];
+		const saved_init = state.init;
+		state.init = wrapped;
+
+		for (const group_node of group) {
+			process_node(group_node);
+		}
+
+		state.init = saved_init;
+		if (wrapped.length === 0) return;
+
+		const guard = build_return_guard(guard_flags);
+		state.init?.push(
+			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_OPEN))),
+		);
+		state.init?.push(b.if(guard, b.block(wrapped)));
+		state.init?.push(
+			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_CLOSE))),
+		);
+	};
+
+	for (let idx = 0; idx < normalized.length; idx++) {
+		const node = normalized[idx];
+
+		if (accumulated_flags.length > 0 && is_template_or_control_flow(node)) {
+			if (pending_group.length === 0) {
+				pending_guard_flags = [...accumulated_flags];
+			}
+			pending_group.push(node);
+
+			if (node.metadata?.has_return && node.metadata.returns) {
+				flush_pending_group();
+				push_return_flags(node.metadata.returns);
+			}
+			continue;
 		}
+
+		flush_pending_group();
+		process_node(node);
+		push_return_flags(node.metadata?.has_return ? node.metadata.returns : undefined);
 	}
 
+	flush_pending_group();
+
 	const head_elements = /** @type {AST.Element[]} */ (
 		children.filter(
 			(node) => node.type === 'Element' && node.id.type === 'Identifier' && node.id.name === 'head',
@@ -85,8 +247,21 @@ function transform_children(children, context) {
 		state.init?.push(
 			b.stmt(b.assignment('=', b.member(b.id('__output'), b.id('target')), b.literal('head'))),
 		);
-		for (const head_element of head_elements) {
+		for (let i = 0; i < head_elements.length; i++) {
+			const head_element = head_elements[i];
+			// Generate a hash for this head element to match client-side hydration
+			// Use both filename and index to ensure uniqueness
+			const hash_source = `${context.state.filename}:head:${i}:${head_element.start ?? 0}`;
+			const hash_value = hash(hash_source);
+
+			// Emit hydration marker comment with hash
+			state.init?.push(
+				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(`<!--${hash_value}-->`))),
+			);
+
 			transform_children(head_element.children, context);
+
+			// No closing marker needed for head elements - the hash is sufficient
 		}
 		state.init?.push(
 			b.stmt(b.assignment('=', b.member(b.id('__output'), b.id('target')), b.literal(null))),
@@ -504,6 +679,7 @@ const visitors = {
 			const is_void = dynamic_name
 				? false
 				: is_void_element(/** @type {AST.Identifier} */ (node.id).name);
+			const use_self_closing_syntax = node.selfClosing && (is_void || !!dynamic_name);
 			const tag_name = dynamic_name
 				? dynamic_name
 				: b.literal(/** @type {AST.Identifier} */ (node.id).name);
@@ -659,11 +835,28 @@ const visitors = {
 				b.stmt(
 					b.call(
 						b.member(b.id('__output'), b.id('push')),
-						b.literal(!node.selfClosing ? '>' : ' />'),
+						b.literal(use_self_closing_syntax ? ' />' : '>'),
 					),
 				),
 			);
 
+			// In dev mode, emit push_element for runtime nesting validation
+			if (state.dev && !dynamic_name) {
+				const element_name = /** @type {AST.Identifier} */ (node.id).name;
+				const loc = node.loc;
+				state.init?.push(
+					b.stmt(
+						b.call(
+							'_$_.push_element',
+							b.literal(element_name),
+							b.literal(state.filename),
+							b.literal(loc?.start.line ?? 0),
+							b.literal(loc?.start.column ?? 0),
+						),
+					),
+				);
+			}
+
 			if (!is_void) {
 				/** @type {AST.Statement[]} */
 				const init = [];
@@ -690,7 +883,7 @@ const visitors = {
 					state.init?.push(b.block(init));
 				}
 
-				if (!node.selfClosing) {
+				if (!use_self_closing_syntax) {
 					state.init?.push(
 						b.stmt(
 							b.call(
@@ -703,6 +896,11 @@ const visitors = {
 					);
 				}
 			}
+
+			// In dev mode, emit pop_element after the element is fully rendered
+			if (state.dev && !dynamic_name) {
+				state.init?.push(b.stmt(b.call('_$_.pop_element')));
+			}
 		} else {
 			/** @type {(AST.Property | AST.SpreadElement)[]} */
 			const props = [];
@@ -904,9 +1102,17 @@ const visitors = {
 			);
 		}
 
+		context.state.init?.push(
+			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_OPEN))),
+		);
+
 		context.state.init?.push(
 			b.switch(/** @type {AST.Expression} */ (context.visit(node.discriminant)), cases),
 		);
+
+		context.state.init?.push(
+			b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(BLOCK_CLOSE))),
+		);
 	},
 
 	ForOfStatement(node, context) {
@@ -995,6 +1201,17 @@ const visitors = {
 		);
 	},
 
+	ReturnStatement(node, context) {
+		if (!is_inside_component(context)) {
+			return context.next();
+		}
+		const info = context.state.return_flags?.get(node);
+		if (info) {
+			return b.stmt(b.assignment('=', b.id(info.name), b.true));
+		}
+		return context.next();
+	},
+
 	AssignmentExpression(node, context) {
 		const left = node.left;
 
@@ -1296,14 +1513,48 @@ const visitors = {
 			visit(node.expression, { ...state, metadata })
 		);
 
-		// For Html nodes, we render the content as-is without escaping
+		// For literal values, compute hash at build time
 		if (expression.type === 'Literal') {
+			const value = String(expression.value ?? '');
+			const hash_value = hash(value);
+			// Push hash comment
+			state.init?.push(
+				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(`<!--${hash_value}-->`))),
+			);
+			// Push the HTML content
+			state.init?.push(b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(value))));
+			// Push empty comment as end marker
 			state.init?.push(
-				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal(expression.value))),
+				b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal('<!---->'))),
 			);
 		} else {
-			// If it's dynamic, we need to evaluate it and push it directly (not escaped)
-			state.init?.push(b.stmt(b.call(b.member(b.id('__output'), b.id('push')), expression)));
+			// For dynamic values, compute hash at runtime
+			// Create a variable to store the value
+			const value_id = state.scope?.generate('html_value');
+			if (value_id) {
+				state.init?.push(
+					b.const(value_id, b.call(b.id('String'), b.logical('??', expression, b.literal('')))),
+				);
+				// Compute hash at runtime using _$_.hash and push as comment
+				state.init?.push(
+					b.stmt(
+						b.call(
+							b.member(b.id('__output'), b.id('push')),
+							b.binary(
+								'+',
+								b.binary('+', b.literal('<!--'), b.call('_$_.hash', b.id(value_id))),
+								b.literal('-->'),
+							),
+						),
+					),
+				);
+				// Push the HTML content
+				state.init?.push(b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.id(value_id))));
+				// Push empty comment as end marker
+				state.init?.push(
+					b.stmt(b.call(b.member(b.id('__output'), b.id('push')), b.literal('<!---->'))),
+				);
+			}
 		}
 	},
 
@@ -1390,9 +1641,10 @@ const visitors = {
  * @param {string} source
  * @param {AnalysisResult} analysis
  * @param {boolean} minify_css
+ * @param {boolean} [dev]
  * @returns {{ ast: AST.Program; js: { code: string; map: RawSourceMap | null }; css: string; }}
  */
-export function transform_server(filename, source, analysis, minify_css) {
+export function transform_server(filename, source, analysis, minify_css, dev = false) {
 	// Use component metadata collected during the analyze phase
 	const component_metadata = analysis.component_metadata || [];
 
@@ -1413,6 +1665,7 @@ export function transform_server(filename, source, analysis, minify_css) {
 		// TODO: should we remove all `to_ts` usages we use the client rendering for that?
 		to_ts: false,
 		metadata: {},
+		dev,
 	};
 
 	state.imports.add(`import * as _$_ from 'ripple/internal/server'`);

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

@@ -26,6 +26,10 @@ interface BaseNodeMetaData {
 	parenthesized?: boolean;
 	elementLeadingComments?: AST.Comment[];
 	inside_component_top_level?: boolean;
+	returns?: AST.ReturnStatement[];
+	has_return?: boolean;
+	is_reactive?: boolean;
+	lone_return?: boolean;
 }
 
 interface FunctionMetaData extends BaseNodeMetaData {
@@ -95,14 +99,18 @@ declare module 'estree' {
 
 	// 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.TrackedNode {}
-	interface RegExpLiteral extends AST.TrackedNode {}
-	interface BigIntLiteral extends AST.TrackedNode {}
+	interface SimpleLiteral extends AST.LiteralTrackedNode {}
+	interface RegExpLiteral extends AST.LiteralTrackedNode {}
+	interface BigIntLiteral extends AST.LiteralTrackedNode {}
 
 	interface TrackedNode {
 		tracked?: boolean;
 	}
 
+	interface LiteralTrackedNode extends AST.TrackedNode {
+		was_expression?: boolean;
+	}
+
 	// Include TypeScript node types and Ripple-specific nodes in NodeMap
 	interface NodeMap {
 		Component: Component;
@@ -132,6 +140,7 @@ declare module 'estree' {
 		ServerIdentifier: ServerIdentifier;
 		Text: TextNode;
 		JSXEmptyExpression: ESTreeJSX.JSXEmptyExpression;
+		ParenthesizedExpression: ParenthesizedExpression;
 	}
 
 	// Missing estree type
@@ -1212,6 +1221,8 @@ export interface TransformServerState extends BaseState {
 	server_exported_names: string[];
 	dynamicElementName?: AST.TemplateLiteral;
 	applyParentCssScope?: AST.CSS.StyleSheet['hash'];
+	dev?: boolean;
+	return_flags?: Map<AST.ReturnStatement, { name: string; tracked: boolean }>;
 }
 
 type UpdateList = Array<
@@ -1243,6 +1254,8 @@ export interface TransformClientState extends BaseState {
 	update: UpdateList | null;
 	errors: RippleCompileError[];
 	applyParentCssScope?: AST.CSS.StyleSheet['hash'];
+	skip_children_traversal: boolean;
+	return_flags?: Map<AST.ReturnStatement, { name: string; tracked: boolean }>;
 }
 
 /** Override zimmerframe types and provide our own */

package/src/compiler/utils.js

@@ -7,7 +7,7 @@ import { build_assignment_value, extract_paths } from '../utils/ast.js';
 import * as b from '../utils/builders.js';
 import { is_capture_event, is_non_delegated, normalize_event_name } from '../utils/events.js';
 
-const regex_return_characters = /\r/g;
+export { hash } from '../utils/hashing.js';
 
 const VOID_ELEMENT_NAMES = [
 	'area',
@@ -555,20 +555,6 @@ export function escape_html(value, is_attr = false) {
 	return escaped + str.substring(last);
 }
 
-/**
- * Hashes a string to a base36 value
- * @param {string} str
- * @returns {string}
- */
-export function hash(str) {
-	str = str.replace(regex_return_characters, '');
-	let hash = 5381;
-	let i = str.length;
-
-	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
-	return (hash >>> 0).toString(36);
-}
-
 /**
  * Returns true if node is a DOM element (not a component)
  * @param {AST.Node} node

package/src/constants.js

@@ -6,12 +6,10 @@ export const TEMPLATE_SVG_NAMESPACE = 1 << 5;
 export const TEMPLATE_MATHML_NAMESPACE = 1 << 6;
 
 export const HYDRATION_START = '[';
-export const HYDRATION_START_ELSE = '[!';
 export const HYDRATION_END = ']';
 export const HYDRATION_ERROR = {};
 
 export const BLOCK_OPEN = `<!--${HYDRATION_START}-->`;
-export const BLOCK_OPEN_ELSE = `<!--${HYDRATION_START_ELSE}-->`;
 export const BLOCK_CLOSE = `<!--${HYDRATION_END}-->`;
 export const EMPTY_COMMENT = `<!---->`;