@tsrx/core 0.0.23 → 0.0.25

package/package.json

@@ -3,7 +3,7 @@
   "description": "Core compiler infrastructure for TSRX syntax",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "type": "module",
   "repository": {
     "type": "git",

package/src/analyze/validation.js

@@ -7,6 +7,18 @@ import { error } from '../errors.js';
 
 export const COMPONENT_RETURN_VALUE_ERROR =
 	'Return statements inside components cannot have a return value.';
+export const COMPONENT_LOOP_RETURN_ERROR =
+	'Return statements are not allowed inside component for...of loops. Use continue instead.';
+export const COMPONENT_LOOP_BREAK_ERROR =
+	'Break statements are not allowed inside component for...of loops.';
+export const COMPONENT_FOR_STATEMENT_ERROR =
+	'For loops are not supported in components. Use for...of instead.';
+export const COMPONENT_FOR_IN_STATEMENT_ERROR =
+	'For...in loops are not supported in components. Use for...of instead.';
+export const COMPONENT_WHILE_STATEMENT_ERROR =
+	'While loops are not supported in components. Move the while loop into a function.';
+export const COMPONENT_DO_WHILE_STATEMENT_ERROR =
+	'Do...while loops are not supported in components. Move the do...while loop into a function.';
 
 const invalid_nestings = {
 	// <p> cannot contain block-level elements
@@ -133,19 +145,29 @@ function get_element_tag(element) {
  * @returns {AST.ReturnStatement}
  */
 export function get_return_keyword_node(node) {
-	const return_keyword_length = 'return'.length;
+	return get_statement_keyword_node(node, 'return');
+}
+
+/**
+ * @template {AST.Node} T
+ * @param {T} node
+ * @param {string} keyword
+ * @returns {T}
+ */
+export function get_statement_keyword_node(node, keyword) {
+	const keyword_length = keyword.length;
 	const start = /** @type {AST.NodeWithLocation} */ (node).start ?? 0;
 	const loc = /** @type {AST.NodeWithLocation} */ (node).loc;
 
-	return /** @type {AST.ReturnStatement} */ ({
+	return /** @type {T} */ ({
 		...node,
-		end: start + return_keyword_length,
+		end: start + keyword_length,
 		loc: loc
 			? {
 					start: loc.start,
 					end: {
 						line: loc.start.line,
-						column: loc.start.column + return_keyword_length,
+						column: loc.start.column + keyword_length,
 					},
 				}
 			: undefined,
@@ -172,6 +194,59 @@ export function validate_component_return_statement(node, filename, errors, comm
 	);
 }
 
+/**
+ * @param {AST.ReturnStatement} node
+ * @param {string | null | undefined} filename
+ * @param {CompileError[]} [errors]
+ * @param {AST.CommentWithLocation[]} [comments]
+ */
+export function validate_component_loop_return_statement(node, filename, errors, comments) {
+	error(
+		COMPONENT_LOOP_RETURN_ERROR,
+		filename ?? null,
+		get_return_keyword_node(node),
+		errors,
+		comments,
+	);
+}
+
+/**
+ * @param {AST.BreakStatement} node
+ * @param {string | null | undefined} filename
+ * @param {CompileError[]} [errors]
+ * @param {AST.CommentWithLocation[]} [comments]
+ */
+export function validate_component_loop_break_statement(node, filename, errors, comments) {
+	error(
+		COMPONENT_LOOP_BREAK_ERROR,
+		filename ?? null,
+		get_statement_keyword_node(node, 'break'),
+		errors,
+		comments,
+	);
+}
+
+/**
+ * @param {AST.ForStatement | AST.ForInStatement | AST.WhileStatement | AST.DoWhileStatement} node
+ * @param {string | null | undefined} filename
+ * @param {CompileError[]} [errors]
+ * @param {AST.CommentWithLocation[]} [comments]
+ */
+export function validate_component_unsupported_loop_statement(node, filename, errors, comments) {
+	let message;
+	if (node.type === 'ForStatement') {
+		message = COMPONENT_FOR_STATEMENT_ERROR;
+	} else if (node.type === 'ForInStatement') {
+		message = COMPONENT_FOR_IN_STATEMENT_ERROR;
+	} else if (node.type === 'WhileStatement') {
+		message = COMPONENT_WHILE_STATEMENT_ERROR;
+	} else {
+		message = COMPONENT_DO_WHILE_STATEMENT_ERROR;
+	}
+
+	error(message, filename ?? null, node, errors, comments);
+}
+
 /**
  * @param {AST.Element} element
  * @param {AnalysisContext} context

package/src/index.js

@@ -133,13 +133,17 @@ export {
 // Sanitize
 export { sanitize_template_string as sanitizeTemplateString } from './utils/sanitize_template_string.js';
 
+// CSS Property Name
+export { normalize_css_property_name as normalizeCssPropertyName } from './utils/normalize_css_property_name.js';
+
 // Escaping
-export { escape } from './utils/escaping.js';
+export { escape, escape_script as escapeScript } from './utils/escaping.js';
 
 // Transform
 export {
 	createJsxTransform,
 	merge_duplicate_refs as mergeDuplicateRefs,
+	rewrite_loop_continues_to_bare_returns as rewriteLoopContinuesToBareReturns,
 	to_jsx_attribute as toJsxAttribute,
 	validate_at_most_one_ref_attribute as validateAtMostOneRefAttribute,
 	component_to_function_declaration as componentToFunctionDeclaration,
@@ -209,8 +213,18 @@ export {
 // Analyze
 export { analyze_css as analyzeCss } from './analyze/css-analyze.js';
 export {
+	COMPONENT_DO_WHILE_STATEMENT_ERROR,
+	COMPONENT_FOR_IN_STATEMENT_ERROR,
+	COMPONENT_FOR_STATEMENT_ERROR,
+	COMPONENT_LOOP_BREAK_ERROR,
+	COMPONENT_LOOP_RETURN_ERROR,
 	COMPONENT_RETURN_VALUE_ERROR,
+	COMPONENT_WHILE_STATEMENT_ERROR,
 	get_return_keyword_node as getReturnKeywordNode,
+	get_statement_keyword_node as getStatementKeywordNode,
+	validate_component_loop_break_statement as validateComponentLoopBreakStatement,
+	validate_component_loop_return_statement as validateComponentLoopReturnStatement,
 	validate_component_return_statement as validateComponentReturnStatement,
+	validate_component_unsupported_loop_statement as validateComponentUnsupportedLoopStatement,
 	validate_nesting as validateNesting,
 } from './analyze/validation.js';

package/src/plugin.js

@@ -269,6 +269,56 @@ export function TSRXPlugin(config) {
 				return null;
 			}
 
+			#popTsxTokenContextBeforeTemplateExpressionChild() {
+				let index = this.pos;
+				let has_newline = false;
+
+				// Text-only Tsx nodes can leave the tokenizer in JSX text mode.
+				// Only unwind it for ASI before a following TSRX `{expr}` child;
+				// fragment props like `content={<></>}` still need the JSX context.
+				while (index < this.input.length) {
+					const ch = this.input.charCodeAt(index);
+					if (ch === 32 || ch === 9) {
+						index++;
+					} else if (ch === 10 || ch === 13) {
+						has_newline = true;
+						index++;
+					} else if (ch === 47 && this.input.charCodeAt(index + 1) === 42) {
+						const end = this.input.indexOf('*/', index + 2);
+						const comment_end = end === -1 ? this.input.length : end + 2;
+						if (this.input.slice(index, comment_end).match(regex_newline_characters)) {
+							has_newline = true;
+						}
+						index = comment_end;
+					} else if (ch === 47 && this.input.charCodeAt(index + 1) === 47) {
+						has_newline = true;
+						index += 2;
+						while (index < this.input.length) {
+							const comment_ch = this.input.charCodeAt(index);
+							if (comment_ch === 10 || comment_ch === 13) break;
+							index++;
+						}
+					} else {
+						break;
+					}
+				}
+
+				if (!has_newline || this.input.charCodeAt(index) !== 123) {
+					return;
+				}
+
+				const context_index = this.context.lastIndexOf(tstc.tc_expr);
+				if (context_index !== -1) {
+					this.context.length = context_index;
+				}
+			}
+
+			#popTemplateLiteralTokenContext() {
+				while (this.curContext()?.token === '`') {
+					this.context.pop();
+				}
+			}
+
 			#isDoubleQuotedTextChildStart() {
 				if (this.#path.findLast((n) => n.type === 'TsxCompat' || n.type === 'Tsx')) {
 					return false;
@@ -1053,6 +1103,19 @@ export function TSRXPlugin(config) {
 				this.parseFunctionParams(node);
 				this.checkComponentParams(node.params);
 
+				const is_arrow_component = this.type === tt.arrow;
+				if (is_arrow_component) {
+					if (node.id || requireName || skipName) {
+						this.raise(
+							this.start,
+							'Arrow component syntax is only supported for anonymous component expressions.',
+						);
+					}
+					node.metadata ??= { path: [] };
+					node.metadata.arrow = true;
+					this.next();
+				}
+
 				// Reset before `eat(braceL)` so the lookahead `next()` it triggers reads
 				// the component body's first token as if we'd entered fresh — no
 				// surrounding function body should affect our parseStatement/parseBlock
@@ -2009,6 +2072,7 @@ export function TSRXPlugin(config) {
 							if (this.type !== tstt.jsxTagEnd) {
 								raise_error();
 							}
+							this.#popTsxTokenContextBeforeTemplateExpressionChild();
 							this.next();
 						}
 					}
@@ -2194,6 +2258,7 @@ export function TSRXPlugin(config) {
 								if (this.type !== tstt.jsxTagEnd) {
 									raise_error();
 								}
+								this.#popTsxTokenContextBeforeTemplateExpressionChild();
 								this.next();
 							}
 						} else if (element.type === 'TsxCompat') {
@@ -2225,6 +2290,7 @@ export function TSRXPlugin(config) {
 								if (this.type !== tstt.jsxTagEnd) {
 									raise_error();
 								}
+								this.#popTsxTokenContextBeforeTemplateExpressionChild();
 								this.next();
 							}
 						} else if (this.#path[this.#path.length - 1] === element) {
@@ -2323,7 +2389,7 @@ export function TSRXPlugin(config) {
 							body.push(node);
 						} else if (this.type === tstt.jsxTagStart) {
 							// Parse JSX element
-							const node = super.parseExpression();
+							const node = super.jsx_parseElement();
 							body.push(node);
 						} else {
 							const start = this.start;
@@ -2354,6 +2420,7 @@ export function TSRXPlugin(config) {
 								body.push(node);
 							}
 
+							this.#popTemplateLiteralTokenContext();
 							// Always call next() to ensure parser makes progress
 							this.next();
 						}
@@ -2386,7 +2453,7 @@ export function TSRXPlugin(config) {
 							body.push(node);
 						} else if (this.type === tstt.jsxTagStart) {
 							// Parse JSX element
-							const node = super.parseExpression();
+							const node = super.jsx_parseElement();
 							body.push(node);
 						} else {
 							const start = this.start;
@@ -2417,6 +2484,7 @@ export function TSRXPlugin(config) {
 								body.push(node);
 							}
 
+							this.#popTemplateLiteralTokenContext();
 							this.next();
 						}
 					}
@@ -2701,6 +2769,19 @@ export function TSRXPlugin(config) {
 					return node;
 				}
 
+				if (
+					this.#functionBodyDepth === 0 &&
+					this.type === tt.string &&
+					this.input.charCodeAt(this.start) === 34 &&
+					(this.#path.at(-1)?.type === 'Component' || this.#path.at(-1)?.type === 'Element')
+				) {
+					this.pos = this.start;
+					this.#readDoubleQuotedTextChildToken();
+					const node = this.parseDoubleQuotedTextChild();
+					this.semicolon();
+					return node;
+				}
+
 				// &[ or &{ at statement level — lazy destructuring assignment
 				// e.g., &[data] = track(0); or &{x, y} = obj;
 				if (this.type === tt.bitwiseAND) {

package/src/transform/jsx/index.js

@@ -40,7 +40,12 @@ import {
 } from '../lazy.js';
 import { find_first_top_level_await_in_component_body } from '../await.js';
 import { prepare_stylesheet_for_render, annotate_component_with_hash } from '../scoping.js';
-import { validate_component_return_statement } from '../../analyze/validation.js';
+import {
+	validate_component_loop_break_statement,
+	validate_component_loop_return_statement,
+	validate_component_return_statement,
+	validate_component_unsupported_loop_statement,
+} from '../../analyze/validation.js';
 import { get_component_from_path } from '../../utils/ast.js';
 import {
 	is_interleaved_body as is_interleaved_body_core,
@@ -61,6 +66,63 @@ import { is_hoist_safe_jsx_node } from '../jsx-hoist.js';
  * @typedef {{ source_name: string, read: () => any }} LazyBinding
  */
 
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_function_or_class_boundary(node) {
+	return (
+		node?.type === 'FunctionDeclaration' ||
+		node?.type === 'FunctionExpression' ||
+		node?.type === 'ArrowFunctionExpression' ||
+		node?.type === 'ClassDeclaration' ||
+		node?.type === 'ClassExpression'
+	);
+}
+
+/**
+ * @param {any[]} path
+ * @returns {boolean}
+ */
+function is_inside_component_for_of(path) {
+	for (let i = path.length - 1; i >= 0; i -= 1) {
+		const node = path[i];
+		if (is_function_or_class_boundary(node) || node?.type === 'Component') {
+			return false;
+		}
+		if (node?.type === 'ForOfStatement') {
+			return true;
+		}
+	}
+	return false;
+}
+
+/**
+ * @param {any[]} path
+ * @returns {boolean}
+ */
+function break_targets_component_loop(path) {
+	for (let i = path.length - 1; i >= 0; i -= 1) {
+		const node = path[i];
+		if (is_function_or_class_boundary(node) || node?.type === 'Component') {
+			return false;
+		}
+		if (node?.type === 'SwitchStatement') {
+			return false;
+		}
+		if (
+			node?.type === 'ForOfStatement' ||
+			node?.type === 'ForStatement' ||
+			node?.type === 'ForInStatement' ||
+			node?.type === 'WhileStatement' ||
+			node?.type === 'DoWhileStatement'
+		) {
+			return true;
+		}
+	}
+	return false;
+}
+
 /**
  * Build a `transform()` function for a specific JSX platform (React, Preact,
  * Solid). Given a `JsxPlatform` descriptor, returns a transform that parses
@@ -104,6 +166,7 @@ export function createJsxTransform(platform) {
 			needs_error_boundary: false,
 			needs_suspense: false,
 			needs_merge_refs: false,
+			needs_fragment: false,
 			helper_state: null,
 			available_bindings: new Map(),
 			lazy_next_id: 0,
@@ -122,7 +185,81 @@ export function createJsxTransform(platform) {
 		walk(/** @type {any} */ (ast), transform_context, {
 			ReturnStatement(node, { next, path }) {
 				if (get_component_from_path(path)) {
-					validate_component_return_statement(
+					if (is_inside_component_for_of(path)) {
+						validate_component_loop_return_statement(
+							node,
+							filename,
+							transform_context.errors,
+							transform_context.comments,
+						);
+					} else {
+						validate_component_return_statement(
+							node,
+							filename,
+							transform_context.errors,
+							transform_context.comments,
+						);
+					}
+				}
+
+				return next();
+			},
+
+			BreakStatement(node, { next, path }) {
+				if (get_component_from_path(path) && break_targets_component_loop(path)) {
+					validate_component_loop_break_statement(
+						node,
+						filename,
+						transform_context.errors,
+						transform_context.comments,
+					);
+				}
+
+				return next();
+			},
+
+			ForStatement(node, { next, path }) {
+				if (get_component_from_path(path)) {
+					validate_component_unsupported_loop_statement(
+						node,
+						filename,
+						transform_context.errors,
+						transform_context.comments,
+					);
+				}
+
+				return next();
+			},
+
+			ForInStatement(node, { next, path }) {
+				if (get_component_from_path(path)) {
+					validate_component_unsupported_loop_statement(
+						node,
+						filename,
+						transform_context.errors,
+						transform_context.comments,
+					);
+				}
+
+				return next();
+			},
+
+			WhileStatement(node, { next, path }) {
+				if (get_component_from_path(path)) {
+					validate_component_unsupported_loop_statement(
+						node,
+						filename,
+						transform_context.errors,
+						transform_context.comments,
+					);
+				}
+
+				return next();
+			},
+
+			DoWhileStatement(node, { next, path }) {
+				if (get_component_from_path(path)) {
+					validate_component_unsupported_loop_statement(
 						node,
 						filename,
 						transform_context.errors,
@@ -350,7 +487,7 @@ function has_use_server_directive(program) {
  * @param {any} component
  * @param {TransformContext} transform_context
  * @param {{ base_name: string, next_id: number, helpers: AST.FunctionDeclaration[], statics: any[] }} [walk_helper_state]
- * @returns {AST.FunctionDeclaration}
+ * @returns {AST.FunctionDeclaration | AST.FunctionExpression | AST.ArrowFunctionExpression}
  */
 export function component_to_function_declaration(component, transform_context, walk_helper_state) {
 	const helper_state = walk_helper_state || create_helper_state(component.id?.name || 'Component');
@@ -390,28 +527,62 @@ export function component_to_function_declaration(component, transform_context,
 	const final_body =
 		lazy_bindings.size > 0 ? apply_lazy_transforms(body_block, lazy_bindings) : body_block;
 
-	const fn = /** @type {any} */ ({
-		type: 'FunctionDeclaration',
-		id: component.id,
-		typeParameters: component.typeParameters,
-		params: final_params,
-		body: final_body,
-		async: is_async_component,
-		generator: false,
-		metadata: {
-			path: [],
-			is_component: true,
-		},
-	});
+	/** @type {AST.FunctionDeclaration | AST.FunctionExpression | AST.ArrowFunctionExpression} */
+	let fn;
+
+	if (component.id) {
+		fn = /** @type {any} */ ({
+			type: 'FunctionDeclaration',
+			id: component.id,
+			typeParameters: component.typeParameters,
+			params: final_params,
+			body: final_body,
+			async: is_async_component,
+			generator: false,
+			metadata: {
+				path: [],
+				is_component: true,
+			},
+		});
+	} else if (component.metadata?.arrow) {
+		fn = /** @type {any} */ ({
+			type: 'ArrowFunctionExpression',
+			typeParameters: component.typeParameters,
+			params: final_params,
+			body: final_body,
+			async: is_async_component,
+			generator: false,
+			expression: false,
+			metadata: {
+				path: [],
+				is_component: true,
+			},
+		});
+	} else {
+		fn = /** @type {any} */ ({
+			type: 'FunctionExpression',
+			id: null,
+			typeParameters: component.typeParameters,
+			params: final_params,
+			body: final_body,
+			async: is_async_component,
+			generator: false,
+			metadata: {
+				path: [],
+				is_component: true,
+			},
+		});
+	}
 
 	// Restore context
 	transform_context.helper_state = saved_helper_state;
 	transform_context.available_bindings = saved_bindings;
 
-	fn.metadata.generated_helpers = helper_state.helpers;
-	fn.metadata.generated_statics = helper_state.statics;
+	const fn_metadata = /** @type {any} */ (fn.metadata);
+	fn_metadata.generated_helpers = helper_state.helpers;
+	fn_metadata.generated_statics = helper_state.statics;
 
-	if (fn.id) {
+	if (fn.type === 'FunctionDeclaration' && fn.id) {
 		fn.id.metadata = /** @type {AST.Identifier['metadata']} */ ({
 			...fn.id.metadata,
 			is_component: true,
@@ -440,6 +611,7 @@ function build_component_statements(body_nodes, transform_context) {
 function build_render_statements(body_nodes, return_null_when_empty, transform_context) {
 	const statements = [];
 	const render_nodes = [];
+	let has_bare_return = false;
 
 	// Create a new bindings map so inner-scope bindings from
 	// collect_statement_bindings don't leak to the caller's scope.
@@ -460,6 +632,7 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 		if (is_bare_return_statement(child)) {
 			statements.push(create_component_return_statement(render_nodes, child));
 			render_nodes.length = 0;
+			has_bare_return = true;
 			continue;
 		}
 
@@ -708,7 +881,7 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 	}
 
 	const return_arg = build_return_expression(render_nodes);
-	if (return_arg || return_null_when_empty) {
+	if (return_arg || (return_null_when_empty && !has_bare_return)) {
 		statements.push({
 			type: 'ReturnStatement',
 			argument: return_arg || { type: 'Literal', value: null, raw: 'null' },
@@ -1158,9 +1331,9 @@ function hoist_static_render_nodes(render_nodes, transform_context) {
  */
 function expand_component_helpers(program) {
 	program.body = program.body.flatMap((statement) => {
-		const meta = get_generated_component_metadata(statement);
-		const statics = meta?.generated_statics || [];
-		const helpers = meta?.generated_helpers || [];
+		const metas = get_generated_component_metadata_list(statement);
+		const statics = metas.flatMap((meta) => meta.generated_statics || []);
+		const helpers = metas.flatMap((meta) => meta.generated_helpers || []);
 		if (statics.length || helpers.length) {
 			return [...statics, ...helpers, statement];
 		}
@@ -1173,30 +1346,63 @@ function expand_component_helpers(program) {
 
 /**
  * Component hooks may replace a `Component` node with a function declaration,
- * variable declaration, or export-safe expression. Generated helper/statics
- * metadata is carried on whichever replacement node the hook returns, so
- * helper expansion must read metadata from that broader set.
+ * variable declaration, object literal member, or export-safe expression.
+ * Generated helper/statics metadata is carried on whichever replacement node
+ * the hook returns, so helper expansion must read metadata from that broader
+ * set.
  *
  * @param {any} node
- * @returns {{ generated_helpers?: any[], generated_statics?: any[] } | null}
+ * @returns {{ generated_helpers?: any[], generated_statics?: any[] }[]}
  */
-function get_generated_component_metadata(node) {
-	if (!node || typeof node !== 'object') {
-		return null;
-	}
+function get_generated_component_metadata_list(node) {
+	/** @type {{ generated_helpers?: any[], generated_statics?: any[] }[]} */
+	const metas = [];
+	const seen_nodes = new Set();
+	const seen_metas = new Set();
+
+	/** @param {any} current */
+	const visit = (current) => {
+		if (!current || typeof current !== 'object' || seen_nodes.has(current)) {
+			return;
+		}
 
-	if (node.metadata?.generated_helpers || node.metadata?.generated_statics) {
-		return node.metadata;
-	}
+		seen_nodes.add(current);
 
-	if (
-		(node.type === 'ExportNamedDeclaration' || node.type === 'ExportDefaultDeclaration') &&
-		node.declaration?.metadata
-	) {
-		return node.declaration.metadata;
-	}
+		if (current.metadata?.generated_helpers || current.metadata?.generated_statics) {
+			if (!seen_metas.has(current.metadata)) {
+				seen_metas.add(current.metadata);
+				metas.push(current.metadata);
+			}
+			return;
+		}
+
+		if (
+			current.type === 'FunctionDeclaration' ||
+			current.type === 'FunctionExpression' ||
+			current.type === 'ArrowFunctionExpression'
+		) {
+			return;
+		}
+
+		for (const key of Object.keys(current)) {
+			if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
+				continue;
+			}
+
+			const value = current[key];
+			if (Array.isArray(value)) {
+				for (const child of value) {
+					visit(child);
+				}
+			} else {
+				visit(value);
+			}
+		}
+	};
+
+	visit(node);
 
-	return null;
+	return metas;
 }
 
 /**
@@ -1339,6 +1545,126 @@ function append_tail_invocation(body, tail_helper) {
 	return [...body, clone_tail_invocation(tail_helper)];
 }
 
+/**
+ * @param {AST.Identifier} tail_synthetic_id
+ * @param {{ component_element: ESTreeJSX.JSXElement }} tail_helper
+ * @returns {any}
+ */
+function create_loop_tail_expression(tail_synthetic_id, tail_helper) {
+	return b.logical('&&', clone_identifier(tail_synthetic_id), clone_tail_invocation(tail_helper));
+}
+
+/**
+ * @param {AST.Identifier} tail_synthetic_id
+ * @param {{ component_element: ESTreeJSX.JSXElement }} tail_helper
+ * @returns {any}
+ */
+function create_loop_tail_conditional(tail_synthetic_id, tail_helper) {
+	return b.conditional(
+		clone_identifier(tail_synthetic_id),
+		clone_tail_invocation(tail_helper),
+		create_null_literal(),
+	);
+}
+
+/**
+ * @param {any[]} statements
+ * @param {AST.Identifier} tail_synthetic_id
+ * @param {{ component_element: ESTreeJSX.JSXElement }} tail_helper
+ * @returns {void}
+ */
+function append_loop_tail_to_return_statements(statements, tail_synthetic_id, tail_helper) {
+	for (const statement of statements) {
+		append_loop_tail_to_return_statement(statement, tail_synthetic_id, tail_helper, false);
+	}
+}
+
+/**
+ * @param {any} node
+ * @param {AST.Identifier} tail_synthetic_id
+ * @param {{ component_element: ESTreeJSX.JSXElement }} tail_helper
+ * @param {boolean} inside_nested_function
+ * @returns {void}
+ */
+function append_loop_tail_to_return_statement(
+	node,
+	tail_synthetic_id,
+	tail_helper,
+	inside_nested_function,
+) {
+	if (!node || typeof node !== 'object') {
+		return;
+	}
+
+	if (
+		node.type === 'FunctionDeclaration' ||
+		node.type === 'FunctionExpression' ||
+		node.type === 'ArrowFunctionExpression'
+	) {
+		inside_nested_function = true;
+	}
+
+	if (!inside_nested_function && node.type === 'ReturnStatement') {
+		if (
+			references_scope_bindings(
+				node.argument,
+				new Map([[tail_synthetic_id.name, tail_synthetic_id]]),
+			)
+		) {
+			return;
+		}
+		node.argument = append_loop_tail_to_return_argument(
+			node.argument,
+			tail_synthetic_id,
+			tail_helper,
+		);
+		return;
+	}
+
+	if (Array.isArray(node)) {
+		for (const child of node) {
+			append_loop_tail_to_return_statement(
+				child,
+				tail_synthetic_id,
+				tail_helper,
+				inside_nested_function,
+			);
+		}
+		return;
+	}
+
+	for (const key of Object.keys(node)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
+			continue;
+		}
+		append_loop_tail_to_return_statement(
+			node[key],
+			tail_synthetic_id,
+			tail_helper,
+			inside_nested_function,
+		);
+	}
+}
+
+/**
+ * @param {any} return_argument
+ * @param {AST.Identifier} tail_synthetic_id
+ * @param {{ component_element: ESTreeJSX.JSXElement }} tail_helper
+ * @returns {any}
+ */
+function append_loop_tail_to_return_argument(return_argument, tail_synthetic_id, tail_helper) {
+	if (return_argument == null || is_null_literal(return_argument)) {
+		return create_loop_tail_conditional(tail_synthetic_id, tail_helper);
+	}
+
+	return (
+		build_return_expression([
+			return_argument_to_render_node(return_argument),
+			to_jsx_expression_container(create_loop_tail_expression(tail_synthetic_id, tail_helper)),
+		]) || create_null_literal()
+	);
+}
+
 /**
  * Build a `return <combined-render-fragment>;` statement, prepending any
  * `render_nodes` collected before the control-flow construct so they don't
@@ -1703,7 +2029,11 @@ function build_hoisted_for_of_with_hooks(node, continuation_body, transform_cont
 	}
 
 	const has_tail = continuation_body.length > 0;
-	const original_loop_body = node.body.type === 'BlockStatement' ? node.body.body : [node.body];
+	const original_loop_body = /** @type {any[]} */ (
+		rewrite_loop_continues_to_bare_returns(
+			node.body.type === 'BlockStatement' ? node.body.body : [node.body],
+		)
+	);
 
 	// When there's a tail, build TailHelper first so its component_element can
 	// be embedded inside the loop helper's body (gated on isLast). The
@@ -1720,18 +2050,13 @@ function build_hoisted_for_of_with_hooks(node, continuation_body, transform_cont
 	} else {
 		tail_synthetic_id = /** @type {any} */ (null);
 	}
-	const loop_body = has_tail
-		? [
-				...original_loop_body,
-				b.jsx_expression_container(
-					b.logical(
-						'&&',
-						clone_identifier(tail_synthetic_id),
-						clone_tail_invocation(/** @type {any} */ (tail_helper)),
-					),
-				),
-			]
-		: original_loop_body;
+	const loop_tail_expression = has_tail
+		? create_loop_tail_expression(tail_synthetic_id, /** @type {any} */ (tail_helper))
+		: null;
+	const loop_body =
+		has_tail && loop_tail_expression
+			? [...original_loop_body, b.jsx_expression_container(loop_tail_expression)]
+			: original_loop_body;
 
 	const source_id = create_generated_identifier(
 		`_tsrx_iteration_items_${transform_context.local_statement_component_index + 1}`,
@@ -1767,10 +2092,8 @@ function build_hoisted_for_of_with_hooks(node, continuation_body, transform_cont
 	);
 
 	// Synthetic `isLast` prop on the loop helper when there's a tail. It's
-	// passed from the .map callback as `i === source.length - 1` so the loop
-	// helper renders the tail helper only on the last iteration. We do not
-	// gate on this prop's value here — the JSXLogicalExpression appended to
-	// `loop_body` does the gating at render time.
+	// passed from the .map callback as `i === source.length - 1` so every
+	// loop-helper return can append the tail helper on the last iteration.
 	const tail_isLast_alias = has_tail
 		? {
 				id: create_generated_identifier(`_tsrx_${helper_id.name}_isLast`),
@@ -1808,6 +2131,13 @@ function build_hoisted_for_of_with_hooks(node, continuation_body, transform_cont
 		transform_context.available_bindings.set(tail_synthetic_id.name, tail_synthetic_id);
 	}
 	const fn_body_statements = build_render_statements(loop_body, true, transform_context);
+	if (has_tail) {
+		append_loop_tail_to_return_statements(
+			fn_body_statements,
+			tail_synthetic_id,
+			/** @type {any} */ (tail_helper),
+		);
+	}
 	transform_context.available_bindings = fn_saved_bindings;
 
 	const helper_fn = /** @type {any} */ (
@@ -1851,7 +2181,7 @@ function build_hoisted_for_of_with_hooks(node, continuation_body, transform_cont
 		index_identifier = null;
 	}
 
-	const body_key_expression = find_key_expression_in_body(loop_body);
+	const body_key_expression = find_key_expression_in_body(original_loop_body);
 	const explicit_key_expression =
 		body_key_expression ?? (node.key ? clone_expression_node(node.key) : undefined);
 	const key_expression =
@@ -2087,7 +2417,7 @@ function prepend_render_nodes_to_return_statement(node, render_nodes, inside_nes
 function combine_render_return_argument(render_nodes, return_argument) {
 	const combined = render_nodes.map((node) => clone_expression_node_without_locations(node));
 
-	if (!is_null_literal(return_argument)) {
+	if (return_argument != null && !is_null_literal(return_argument)) {
 		combined.push(return_argument_to_render_node(return_argument));
 	}
 
@@ -3049,6 +3379,71 @@ function find_key_expression_in_body(body_nodes) {
 	return undefined;
 }
 
+/**
+ * @param {any} source_node
+ * @returns {any}
+ */
+function continue_to_bare_return(source_node) {
+	return set_loc(
+		/** @type {any} */ ({
+			type: 'ReturnStatement',
+			argument: null,
+			metadata: { path: [] },
+		}),
+		source_node,
+	);
+}
+
+/**
+ * `continue` in a component `for...of` body means "skip this item". JSX targets
+ * lower `for...of` to callbacks, so a raw ContinueStatement would be invalid JS;
+ * a bare `return` from the callback preserves the item-skip behavior.
+ *
+ * @param {any[] | any} node
+ * @param {boolean} [is_root]
+ * @returns {any[] | any}
+ */
+export function rewrite_loop_continues_to_bare_returns(node, is_root = true) {
+	if (Array.isArray(node)) {
+		return node.map((child) => rewrite_loop_continues_to_bare_returns(child, false));
+	}
+
+	if (!node || typeof node !== 'object') {
+		return node;
+	}
+
+	if (node.type === 'ContinueStatement') {
+		return continue_to_bare_return(node);
+	}
+
+	if (is_function_or_class_boundary(node) || (!is_root && is_loop_statement(node))) {
+		return node;
+	}
+
+	for (const key of Object.keys(node)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
+			continue;
+		}
+		node[key] = rewrite_loop_continues_to_bare_returns(node[key], false);
+	}
+
+	return node;
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_loop_statement(node) {
+	return (
+		node?.type === 'ForOfStatement' ||
+		node?.type === 'ForStatement' ||
+		node?.type === 'ForInStatement' ||
+		node?.type === 'WhileStatement' ||
+		node?.type === 'DoWhileStatement'
+	);
+}
+
 /**
  * @param {any} node
  * @param {TransformContext} transform_context
@@ -3066,7 +3461,11 @@ function for_of_statement_to_jsx_child(node, transform_context) {
 	}
 
 	const loop_params = get_for_of_iteration_params(node.left, node.index);
-	const loop_body = node.body.type === 'BlockStatement' ? node.body.body : [node.body];
+	const loop_body = /** @type {any[]} */ (
+		rewrite_loop_continues_to_bare_returns(
+			node.body.type === 'BlockStatement' ? node.body.body : [node.body],
+		)
+	);
 	const has_hooks = body_contains_top_level_hook_call(loop_body, transform_context, true);
 	const body_key_expression = find_key_expression_in_body(loop_body);
 	const explicit_key_expression =
@@ -3091,14 +3490,14 @@ function for_of_statement_to_jsx_child(node, transform_context) {
 		collect_pattern_bindings(param, transform_context.available_bindings);
 	}
 
+	if (implicit_non_hook_key_expression && should_apply_key_to_loop_body(loop_body)) {
+		apply_key_to_loop_body(loop_body, implicit_non_hook_key_expression);
+	}
+
 	const body_statements = has_hooks
 		? hook_safe_render_statements(loop_body, key_expression, transform_context)
 		: build_render_statements(loop_body, true, transform_context);
 
-	if (implicit_non_hook_key_expression) {
-		apply_key_to_render_statements(body_statements, implicit_non_hook_key_expression);
-	}
-
 	const platform_for_of = transform_context.platform.hooks?.renderForOf?.(
 		node,
 		loop_params,
@@ -3110,6 +3509,11 @@ function for_of_statement_to_jsx_child(node, transform_context) {
 		return platform_for_of;
 	}
 
+	const non_hook_key_expression = key_expression ?? implicit_non_hook_key_expression;
+	if (!has_hooks && non_hook_key_expression) {
+		apply_key_to_render_statements(body_statements, non_hook_key_expression, transform_context);
+	}
+
 	// Restore bindings
 	transform_context.available_bindings = saved_bindings;
 
@@ -3147,19 +3551,33 @@ function for_of_statement_to_jsx_child(node, transform_context) {
 }
 
 /**
- * @param {any[]} statements
+ * @param {any[]} body_nodes
  * @param {any} key_expression
  * @returns {void}
  */
-function apply_key_to_render_statements(statements, key_expression) {
-	for (let i = statements.length - 1; i >= 0; i -= 1) {
-		const statement = statements[i];
-		if (statement?.type !== 'ReturnStatement' || !statement.argument) {
-			continue;
+function apply_key_to_loop_body(body_nodes, key_expression) {
+	for (const node of body_nodes) {
+		if (node.type === 'Element') {
+			const attributes = node.attributes || (node.attributes = []);
+			const has_key = attributes.some((/** @type {any} */ attr) => {
+				const attr_name = typeof attr.name === 'string' ? attr.name : attr.name?.name;
+				return attr_name === 'key';
+			});
+
+			if (!has_key) {
+				attributes.push({
+					type: 'Attribute',
+					name: { type: 'Identifier', name: 'key', metadata: { path: [] } },
+					value: clone_expression_node(key_expression),
+					shorthand: false,
+					metadata: { path: [] },
+				});
+			}
+			return;
 		}
 
-		if (statement.argument.type === 'JSXElement') {
-			const attributes = statement.argument.openingElement?.attributes || [];
+		if (node.type === 'JSXElement') {
+			const attributes = node.openingElement?.attributes || [];
 			const has_key = attributes.some(
 				(/** @type {any} */ attr) =>
 					attr.type === 'JSXAttribute' &&
@@ -3180,12 +3598,92 @@ function apply_key_to_render_statements(statements, key_expression) {
 					}),
 				);
 			}
+			return;
+		}
+	}
+}
+
+/**
+ * @param {any[]} body_nodes
+ * @returns {boolean}
+ */
+function should_apply_key_to_loop_body(body_nodes) {
+	let keyable_children = 0;
+	for (const node of body_nodes) {
+		if (node.type === 'Element' || node.type === 'JSXElement') {
+			keyable_children += 1;
+		}
+	}
+	return keyable_children === 1;
+}
+
+/**
+ * @param {any[]} statements
+ * @param {any} key_expression
+ * @param {TransformContext} transform_context
+ * @returns {void}
+ */
+function apply_key_to_render_statements(statements, key_expression, transform_context) {
+	for (let i = statements.length - 1; i >= 0; i -= 1) {
+		const statement = statements[i];
+		if (statement?.type !== 'ReturnStatement' || !statement.argument) {
+			continue;
+		}
+
+		if (statement.argument.type === 'JSXElement') {
+			apply_key_to_jsx_element(statement.argument, key_expression);
+		} else if (statement.argument.type === 'JSXFragment') {
+			transform_context.needs_fragment = true;
+			statement.argument = keyed_fragment_to_jsx_element(statement.argument, key_expression);
 		}
 
 		return;
 	}
 }
 
+/**
+ * @param {any} element
+ * @param {any} key_expression
+ * @returns {void}
+ */
+function apply_key_to_jsx_element(element, key_expression) {
+	const attributes = element.openingElement?.attributes || [];
+	const has_key = attributes.some(
+		(/** @type {any} */ attr) =>
+			attr.type === 'JSXAttribute' &&
+			attr.name?.type === 'JSXIdentifier' &&
+			attr.name.name === 'key',
+	);
+
+	if (!has_key) {
+		attributes.push(
+			b.jsx_attribute(
+				b.jsx_id('key'),
+				to_jsx_expression_container(clone_expression_node(key_expression), key_expression),
+			),
+		);
+	}
+}
+
+/**
+ * @param {any} fragment
+ * @param {any} key_expression
+ * @returns {any}
+ */
+function keyed_fragment_to_jsx_element(fragment, key_expression) {
+	const name = b.jsx_id('Fragment');
+	const key_attribute = b.jsx_attribute(
+		b.jsx_id('key'),
+		to_jsx_expression_container(clone_expression_node(key_expression), key_expression),
+	);
+
+	return b.jsx_element_fresh(
+		b.jsx_opening_element(name, [key_attribute]),
+		b.jsx_closing_element(clone_jsx_name(name)),
+		fragment.children,
+	);
+}
+
 /**
  * @param {any} node
  * @param {TransformContext} transform_context
@@ -3473,6 +3971,27 @@ function inject_try_imports(program, transform_context, platform, suspense_sourc
 	/** @type {any[]} */
 	const imports = [];
 
+	if (transform_context.needs_fragment && platform.imports.fragment) {
+		const fragment_source = platform.imports.fragment;
+		imports.push({
+			type: 'ImportDeclaration',
+			specifiers: [
+				{
+					type: 'ImportSpecifier',
+					imported: { type: 'Identifier', name: 'Fragment', metadata: { path: [] } },
+					local: { type: 'Identifier', name: 'Fragment', metadata: { path: [] } },
+					metadata: { path: [] },
+				},
+			],
+			source: {
+				type: 'Literal',
+				value: fragment_source,
+				raw: `'${fragment_source}'`,
+			},
+			metadata: { path: [] },
+		});
+	}
+
 	if (transform_context.needs_suspense) {
 		imports.push({
 			type: 'ImportDeclaration',

package/src/utils/builders.js

@@ -57,18 +57,21 @@ export function assignment_pattern(left, right) {
 /**
  * @param {Array<AST.Pattern>} params
  * @param {AST.BlockStatement | AST.Expression} body
+ * @param {AST.NodeWithLocation} [loc_info]
  * @returns {AST.ArrowFunctionExpression}
  */
-export function arrow(params, body, async = false) {
-	return {
+export function arrow(params, body, async = false, loc_info) {
+	const node = /** @type {AST.ArrowFunctionExpression} */ ({
 		type: 'ArrowFunctionExpression',
 		params,
 		body,
 		expression: body.type !== 'BlockStatement',
 		generator: false,
 		async,
-		metadata: /** @type {any} */ (null), // should not be used by codegen
-	};
+		metadata: { path: [] },
+	});
+
+	return set_location(node, loc_info);
 }
 
 /**
@@ -1343,6 +1346,15 @@ export const break_statement = {
 	metadata: { path: [] },
 };
 
+/**
+ * @type {AST.ContinueStatement}
+ */
+export const continue_statement = {
+	type: 'ContinueStatement',
+	label: null,
+	metadata: { path: [] },
+};
+
 export {
 	await_builder as await,
 	let_builder as let,
@@ -1352,6 +1364,7 @@ export {
 	true_instance as true,
 	false_instance as false,
 	break_statement as break,
+	continue_statement as continue,
 	for_builder as for,
 	switch_builder as switch,
 	function_builder as function,

package/src/utils/escaping.js

@@ -1,5 +1,7 @@
 const ATTR_REGEX = /[&"<]/g;
 const CONTENT_REGEX = /[&<]/g;
+const OPEN_TAG_REGEX = /</g;
+const CLOSE_TAG_REGEX = />/g;
 
 /**
  * @template V
@@ -24,3 +26,12 @@ export function escape(value, is_attr) {
 
 	return escaped + str.substring(last);
 }
+
+/**
+ * Escapes characters that can prematurely terminate inline script tags.
+ * @param {string} str
+ * @returns {string}
+ */
+export function escape_script(str) {
+	return str.replace(OPEN_TAG_REGEX, '\\u003c').replace(CLOSE_TAG_REGEX, '\\u003e');
+}

package/src/utils/events.js

@@ -1,4 +1,4 @@
-/** @import { AddEventObject } from '../../types/index'*/
+/** @import { AddEventObject } from '../../types/index' */
 
 const NON_DELEGATED_EVENTS = new Set([
 	'abort',

package/types/index.d.ts

@@ -74,6 +74,7 @@ interface BaseNodeMetaData {
 	returns?: AST.ReturnStatement[];
 	has_return?: boolean;
 	has_throw?: boolean;
+	has_continue?: boolean;
 	is_reactive?: boolean;
 	lone_return?: boolean;
 	forceMapping?: boolean;
@@ -319,12 +320,13 @@ declare module 'estree' {
 	 */
 	interface Component extends AST.BaseNode {
 		type: 'Component';
-		// null is for anonymous components {component: () => {}}
+		// null is for anonymous components, e.g. `component(props) => {}`
 		id: AST.Identifier | null;
 		params: AST.Pattern[];
 		body: AST.Node[];
 		css: CSS.StyleSheet | null;
 		metadata: BaseNodeMetaData & {
+			arrow?: boolean;
 			topScopedClasses?: TopScopedClasses;
 			styleClasses?: StyleClasses;
 		};
@@ -1498,15 +1500,20 @@ export type StyleClasses = Map<string, AST.MemberExpression['property']>;
 /**
  * Event handling types
  */
-export interface AddEventObject {
+export interface AddEventOptions extends ExtendedEventOptions {
 	customName?: string;
-	// from AddEventListenerOptions
+}
+
+export interface AddEventObject extends AddEventOptions {
+	handleEvent(object: Event): void;
+}
+
+export interface ExtendedEventOptions {
+	capture?: boolean;
 	once?: boolean;
 	passive?: boolean;
 	signal?: AbortSignal;
-	capture?: boolean;
-	// from EventListenerObject
-	handleEvent?(object: Event): void;
+	delegated?: boolean;
 }
 
 /**

package/types/jsx-platform.d.ts

@@ -29,6 +29,7 @@ export interface JsxTransformContext {
 	needs_error_boundary: boolean;
 	needs_suspense: boolean;
 	needs_merge_refs: boolean;
+	needs_fragment: boolean;
 	helper_state: {
 		base_name: string;
 		next_id: number;
@@ -239,6 +240,11 @@ export interface JsxPlatform {
 	name: string;
 
 	imports: {
+		/**
+		 * Module to import `Fragment` from when a keyed fragment is required
+		 * for a multi-child loop body. React: `'react'`. Preact: `'preact'`.
+		 */
+		fragment?: string;
 		/**
 		 * Module to import `Suspense` from when a `try { ... } pending { ... }`
 		 * block appears. React: `'react'`. Preact: `'preact/compat'`.
@@ -345,4 +351,4 @@ export function componentToFunctionDeclaration(
 	component: any,
 	ctx: any,
 	helperState?: any,
-): AST.FunctionDeclaration;
+): AST.FunctionDeclaration | AST.FunctionExpression | AST.ArrowFunctionExpression;