@tsrx/core 0.1.1 → 0.1.3

package/package.json

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

package/src/index.js

@@ -149,6 +149,7 @@ export {
 	MERGE_REFS_INTERNAL_NAME,
 	merge_duplicate_refs as mergeDuplicateRefs,
 	NORMALIZE_SPREAD_PROPS_INTERNAL_NAME,
+	return_value_body_to_expression as returnValueBodyToExpression,
 	rewrite_loop_continues_to_bare_returns as rewriteLoopContinuesToBareReturns,
 	to_jsx_attribute as toJsxAttribute,
 	validate_at_most_one_ref_attribute as validateAtMostOneRefAttribute,

package/src/plugin.js

@@ -202,6 +202,7 @@ export function TSRXPlugin(config) {
 		// Some parser constructors (e.g. via TS plugins) expose `tokContexts` without `b_stat`.
 		// If we push an undefined context, Acorn's tokenizer will later crash reading `.override`.
 		const b_stat = tc.b_stat || acorn.tokContexts.b_stat;
+		const b_expr = tc.b_expr || acorn.tokContexts.b_expr;
 		const tstt = Parser.acornTypeScript.tokTypes;
 		const tstc = Parser.acornTypeScript.tokContexts;
 
@@ -219,6 +220,7 @@ export function TSRXPlugin(config) {
 			#errors = undefined;
 			/** @type {string | null} */
 			#filename = null;
+			#componentDepth = 0;
 			#functionBodyDepth = 0;
 
 			/**
@@ -269,6 +271,14 @@ export function TSRXPlugin(config) {
 				return null;
 			}
 
+			#isInsideComponent() {
+				return this.#componentDepth > 0;
+			}
+
+			#isInsideComponentTemplate() {
+				return this.#isInsideComponent() && this.#functionBodyDepth === 0;
+			}
+
 			#popTsxTokenContextBeforeTemplateExpressionChild() {
 				let index = this.pos;
 				let has_newline = false;
@@ -319,6 +329,137 @@ export function TSRXPlugin(config) {
 				}
 			}
 
+			/**
+			 * @param {number} index
+			 * @returns {number}
+			 */
+			#skipWhitespaceAndComments(index) {
+				while (index < this.input.length) {
+					const ch = this.input.charCodeAt(index);
+					if (ch === 32 || ch === 9 || ch === 10 || ch === 13) {
+						index++;
+					} else if (ch === 47 && this.input.charCodeAt(index + 1) === 42) {
+						const end = this.input.indexOf('*/', index + 2);
+						index = end === -1 ? this.input.length : end + 2;
+					} else if (ch === 47 && this.input.charCodeAt(index + 1) === 47) {
+						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;
+					}
+				}
+				return index;
+			}
+
+			/** @returns {number} */
+			#countFollowingRightBraces() {
+				let index = this.end;
+				let count = 0;
+				while (index < this.input.length) {
+					index = this.#skipWhitespaceAndComments(index);
+					if (this.input.charCodeAt(index) !== 125) break;
+					count++;
+					index++;
+				}
+				return count;
+			}
+
+			/**
+			 * @param {AST.Tsx | AST.Tsrx | AST.TsxCompat} node
+			 * @returns {boolean}
+			 */
+			#hasDirectStatementChild(node) {
+				return node.children?.some(
+					(child) => child.type.endsWith('Statement') || child.type === 'VariableDeclaration',
+				);
+			}
+
+			/**
+			 * @param {AST.Tsx | AST.Tsrx | AST.TsxCompat} node
+			 */
+			#popTokenContextsAfterTemplateExpressionElement(node) {
+				const ctx = this.context;
+				const ci = ctx.length - 1;
+				const top = ctx[ci];
+				const second = ctx[ci - 1];
+
+				// Expression-bodied templates (no statement child) followed by `,`
+				// in an object/array literal need surgical fixups; statement-bodied
+				// templates fall through to the JSX-expression-container strip.
+				const has_stmt_child = this.#hasDirectStatementChild(node);
+				if (this.type === tt.comma && !has_stmt_child) {
+					// Tail `..., (b_expr)+, tc_expr, b_stat`: the JSX expression
+					// container leaks an extra `tc_expr, b_stat`. Pop them, and if
+					// the JSX container also closes immediately (`}}` ahead), drop
+					// one of the doubled-up `b_expr` contexts too.
+					if (top === b_stat && second === tstc.tc_expr) {
+						let expr_count = 0;
+						for (let i = ci - 2; ctx[i] === b_expr; i--) expr_count++;
+						const following_braces = this.#countFollowingRightBraces();
+						if (expr_count === 2 || following_braces > 1) {
+							if (following_braces > 1 && expr_count > 1) {
+								ctx.splice(ci - 2, expr_count - 1);
+								ctx.pop();
+								this.exprAllowed = false;
+								return;
+							}
+							if (expr_count === 2 && following_braces === 0) {
+								// Fragment expression value followed by another
+								// object/array entry inside a JSX expression
+								// container (`{ a: <></>, b: ... }` or
+								// `[<></>, ...]`): strip both the leaked tc_expr
+								// and b_stat so the next entry parses as an
+								// expression, and leave exprAllowed alone so a
+								// following `<` still tokenizes as jsxTagStart.
+								ctx.length = ci - 1;
+								return;
+							}
+							ctx.pop();
+							this.exprAllowed = false;
+							return;
+						}
+					}
+					// Tail `..., b_expr, b_expr` for fragments-with-children
+					// inside an array or object literal: re-arm expression mode
+					// so the next item parses as an expression value, not a JSX
+					// child. If the surrounding b_expr chain has already been
+					// consumed, push one back so the subsequent item still has
+					// a literal context. Leave exprAllowed alone so a following
+					// `<` still tokenizes as jsxTagStart.
+					if (top === b_expr && second === b_expr) {
+						if (ctx[ci - 2] !== b_expr && ctx[ci - 2] !== tstc.tc_oTag) {
+							ctx.push(b_expr);
+						}
+						return;
+					}
+				}
+
+				// Inside `{<tsrx>...</tsrx>}` JSX expression container — strip
+				// both the leaked `b_stat` and the container's `tc_expr`.
+				if (top === b_stat && second === tstc.tc_expr) {
+					ctx.length = ci - 1;
+					return;
+				}
+				// Closing token after the template at expression position. For `}`
+				// only pop if it actually closes this `b_expr` — otherwise the
+				// brace targets an inner callback/object body that should pop it
+				// naturally on the next token step.
+				if (
+					(this.type === tt.braceR &&
+						top === b_expr &&
+						(this.#countFollowingRightBraces() === 0 || second === b_expr)) ||
+					(this.type === tt.parenR && top?.token === '(') ||
+					(this.type === tt.bracketR && top?.token === '[')
+				) {
+					ctx.pop();
+					this.exprAllowed = false;
+				}
+			}
+
 			#isDoubleQuotedTextChildStart() {
 				if (this.#path.findLast((n) => n.type === 'TsxCompat' || n.type === 'Tsx')) {
 					return false;
@@ -717,7 +858,7 @@ export function TSRXPlugin(config) {
 
 				if (code === 60) {
 					// < character
-					const inComponent = this.#path.findLast((n) => n.type === 'Component');
+					const inComponent = this.#isInsideComponentTemplate();
 					/** @type {number | null} */
 					let prevNonWhitespaceChar = null;
 
@@ -1073,11 +1214,13 @@ export function TSRXPlugin(config) {
 				this.eat(tt.braceL);
 				node.body = [];
 				this.#path.push(node);
+				this.#componentDepth++;
 
 				try {
 					this.parseTemplateBody(node.body);
 				} finally {
 					this.#functionBodyDepth = parent_function_body_depth;
+					this.#componentDepth--;
 				}
 				this.#path.pop();
 				this.exitScope();
@@ -1301,6 +1444,23 @@ export function TSRXPlugin(config) {
 			parseFunctionBody(node, isArrowFunction, isMethod, forInit, ...args) {
 				this.#functionBodyDepth++;
 				this.#functionStack.push(node);
+				// Inside a component, nested JS function bodies should parse like
+				// ordinary functions, not component template bodies.
+				if (
+					// Only adjust functions declared while parsing a component body.
+					this.#isInsideComponent() &&
+					// A stale JSX expression context means the surrounding template
+					// tokenizer can still treat `<` as template markup.
+					this.context.some((context) => context === tstc.tc_expr) &&
+					// Keep arrows/functions inside JSX tags, such as event handlers,
+					// on the normal JSX attribute parsing path.
+					!this.context.some((context) => context === tstc.tc_oTag || context === tstc.tc_cTag) &&
+					// Only reset statement-level function bodies, not expression
+					// contexts that are actively parsing JSX.
+					this.curContext() === b_stat
+				) {
+					this.context = [b_stat];
+				}
 
 				try {
 					return super.parseFunctionBody(node, isArrowFunction, isMethod, forInit, ...args);
@@ -1910,9 +2070,20 @@ export function TSRXPlugin(config) {
 					// Use Ripple's parseElement to create a Tsx/Tsrx/TsxCompat node.
 					// Bare fragments (<></>) are shorthand for <tsx>...</tsx>.
 					this.next();
-					return /** @type {import('estree-jsx').JSXElement} */ (
+					const parsed = /** @type {import('estree-jsx').JSXElement} */ (
 						/** @type {unknown} */ (this.parseElement())
 					);
+					this.#popTokenContextsAfterTemplateExpressionElement(
+						/** @type {AST.Tsx | AST.Tsrx | AST.TsxCompat} */ (/** @type {unknown} */ (parsed)),
+					);
+					return parsed;
+				}
+
+				if (
+					!this.#path.findLast((node) => node.type === 'Component') &&
+					!this.#functionStack.findLast(is_pascal_case_function)
+				) {
+					return super.jsx_parseElement();
 				}
 
 				const code = this.#functionStack.findLast(is_pascal_case_function)
@@ -2828,6 +2999,15 @@ export function TSRXPlugin(config) {
 					if (!node) {
 						this.unexpected();
 					}
+					if (this.#functionBodyDepth > 0 && node.type === 'Tsrx' && this.curContext() === b_stat) {
+						this.context.pop();
+						if (this.curContext() === tstc.tc_expr) {
+							this.context.pop();
+						}
+						if (this.curContext() === b_stat) {
+							this.context.pop();
+						}
+					}
 					return node;
 				}
 

package/src/transform/jsx/index.js

@@ -682,7 +682,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;
+	let has_terminal_return = false;
 
 	// Create a new bindings map so inner-scope bindings from
 	// collect_statement_bindings don't leak to the caller's scope.
@@ -707,7 +707,13 @@ 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;
+			has_terminal_return = true;
+			continue;
+		}
+
+		if (child?.type === 'ReturnStatement' && child.argument != null) {
+			statements.push(child);
+			has_terminal_return = true;
 			continue;
 		}
 
@@ -968,7 +974,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 && !has_bare_return)) {
+	if (return_arg || (return_null_when_empty && !has_terminal_return)) {
 		statements.push({
 			type: 'ReturnStatement',
 			argument: return_arg || { type: 'Literal', value: null, raw: 'null' },
@@ -2761,7 +2767,10 @@ function child_contains_return_semantics(node) {
 		return false;
 	}
 
-	if (node.type === 'ReturnStatement' || is_lone_return_if_statement(node)) {
+	if (
+		(node.type === 'ReturnStatement' && node.argument == null) ||
+		is_lone_return_if_statement(node)
+	) {
 		return true;
 	}
 
@@ -3448,22 +3457,25 @@ function tsrx_node_to_jsx_expression(node, transform_context, in_jsx_child = fal
 	let expression;
 	if (children.length === 0) {
 		expression = create_null_literal();
-	} else if (
-		children.every(is_inline_element_child) &&
-		!children_contain_return_semantics(children)
-	) {
-		const saved_inside_element_child = transform_context.inside_element_child;
-		transform_context.inside_element_child = true;
-		try {
-			const render_nodes = children.map((/** @type {any} */ child) =>
-				to_jsx_child(child, transform_context),
-			);
-			expression = build_return_expression(render_nodes) || create_null_literal();
-		} finally {
-			transform_context.inside_element_child = saved_inside_element_child;
-		}
 	} else {
-		expression = statement_body_to_jsx_child(children, transform_context).expression;
+		expression = return_value_body_to_expression(children, node, transform_context);
+	}
+
+	if (!expression) {
+		if (children.every(is_inline_element_child) && !children_contain_return_semantics(children)) {
+			const saved_inside_element_child = transform_context.inside_element_child;
+			transform_context.inside_element_child = true;
+			try {
+				const render_nodes = children.map((/** @type {any} */ child) =>
+					to_jsx_child(child, transform_context),
+				);
+				expression = build_return_expression(render_nodes) || create_null_literal();
+			} finally {
+				transform_context.inside_element_child = saved_inside_element_child;
+			}
+		} else {
+			expression = statement_body_to_jsx_child(children, transform_context).expression;
+		}
 	}
 
 	if (
@@ -3479,6 +3491,149 @@ function tsrx_node_to_jsx_expression(node, transform_context, in_jsx_child = fal
 	return expression;
 }
 
+/**
+ * Explicit return values inside expression-position `<tsrx>` templates are JavaScript
+ * values, so keep them out of platform render control flow.
+ *
+ * @param {any[]} body_nodes
+ * @param {any} source_node
+ * @param {TransformContext} [transform_context]
+ * @returns {any | null}
+ */
+export function return_value_body_to_expression(body_nodes, source_node, transform_context) {
+	if (!body_contains_top_level_return_value(body_nodes)) return null;
+
+	if (body_nodes.length === 1) {
+		const expression = return_value_statement_to_expression(body_nodes[0], transform_context);
+		if (expression) return expression;
+	}
+
+	return create_statement_iife(body_nodes, source_node, transform_context);
+}
+
+/**
+ * @param {any} node
+ * @param {TransformContext} [transform_context]
+ * @returns {any | null}
+ */
+function return_value_statement_to_expression(node, transform_context) {
+	if (node?.type === 'ReturnStatement' && node.argument != null) {
+		return node.argument;
+	}
+
+	if (node?.type === 'IfStatement') {
+		return return_value_if_statement_to_conditional_expression(node, transform_context);
+	}
+
+	return null;
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function body_contains_top_level_return_value(node) {
+	if (!node || typeof node !== 'object') return false;
+
+	if (Array.isArray(node)) {
+		return node.some(body_contains_top_level_return_value);
+	}
+
+	if (node.type === 'ReturnStatement') {
+		return node.argument != null;
+	}
+
+	if (
+		node.type === 'FunctionDeclaration' ||
+		node.type === 'FunctionExpression' ||
+		node.type === 'ArrowFunctionExpression' ||
+		node.type === 'ClassDeclaration' ||
+		node.type === 'ClassExpression' ||
+		node.type === 'Component'
+	) {
+		return false;
+	}
+
+	for (const key of Object.keys(node)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
+			continue;
+		}
+		if (body_contains_top_level_return_value(node[key])) {
+			return true;
+		}
+	}
+
+	return false;
+}
+
+/**
+ * @param {any[]} body_nodes
+ * @param {any} source_node
+ * @param {TransformContext} [transform_context]
+ * @returns {any}
+ */
+function create_statement_iife(body_nodes, source_node, transform_context) {
+	return set_generated_expression_loc(
+		b.call(b.arrow([], b.block(body_nodes))),
+		source_node,
+		transform_context,
+	);
+}
+
+/**
+ * @param {any} node
+ * @param {any} source_node
+ * @param {TransformContext} [transform_context]
+ * @returns {any}
+ */
+function set_generated_expression_loc(node, source_node, transform_context) {
+	if (transform_context?.typeOnly || !source_node?.loc) return node;
+	return setLocation(/** @type {any} */ (node), source_node);
+}
+
+/**
+ * @returns {any}
+ */
+function create_undefined_expression() {
+	return b.unary('void', b.literal(0));
+}
+
+/**
+ * @param {any} node
+ * @param {TransformContext} [transform_context]
+ * @returns {any | null}
+ */
+function return_value_block_to_expression(node, transform_context) {
+	const body = node?.type === 'BlockStatement' ? node.body : node ? [node] : [];
+	if (body.length !== 1) return null;
+
+	return return_value_statement_to_expression(body[0], transform_context);
+}
+
+/**
+ * @param {any} node
+ * @param {TransformContext} [transform_context]
+ * @returns {any | null}
+ */
+function return_value_if_statement_to_conditional_expression(node, transform_context) {
+	if (!node || node.type !== 'IfStatement') return null;
+
+	const consequent = return_value_block_to_expression(node.consequent, transform_context);
+	if (!consequent) return null;
+
+	let alternate = create_undefined_expression();
+	if (node.alternate) {
+		alternate = return_value_block_to_expression(node.alternate, transform_context);
+		if (!alternate) return null;
+	}
+
+	return set_generated_expression_loc(
+		b.conditional(node.test, consequent, alternate),
+		node,
+		transform_context,
+	);
+}
+
 /**
  * @param {any} node
  * @param {TransformContext} transform_context
@@ -4009,7 +4164,7 @@ function try_statement_to_jsx_child(node, transform_context) {
 			);
 		}
 		const pending_body = pending.body || [];
-		if (!pending_body.some(is_jsx_child)) {
+		if (pending_body.length > 0 && !pending_body.some(is_jsx_child)) {
 			error(
 				'Component try statements must contain a template in their "pending" body. Rendering a pending fallback is required to have a template.',
 				transform_context.filename,
@@ -4031,7 +4186,10 @@ function try_statement_to_jsx_child(node, transform_context) {
 	if (pending) {
 		transform_context.needs_suspense = true;
 		const pending_body_nodes = pending.body || [];
-		const fallback_content = statement_body_to_jsx_child(pending_body_nodes, transform_context);
+		const fallback_content =
+			pending_body_nodes.length === 0
+				? to_jsx_expression_container(create_null_literal())
+				: statement_body_to_jsx_child(pending_body_nodes, transform_context);
 
 		result = create_jsx_element(
 			'Suspense',