@tsrx/core 0.0.13 → 0.0.15

package/README.md

@@ -61,15 +61,20 @@ component Button(props: Props) {
 ### 2. JSX-as-statements
 
 Inside a `component` body, JSX elements are valid _statement_ forms. They describe
-rendered output and are not expressions — they have no value.
+rendered output and are not expressions — they have no value. Static text may be
+written as a direct double-quoted child; dynamic values and other JavaScript
+expressions stay inside `{}`.
 
 ```tsx
 component Greeting() {
-  <h1>{'Hello'}</h1>
-  <p>{'Welcome'}</p>
+  <h1>"Hello"</h1>
+  <p>"Welcome"</p>
 }
 ```
 
+Only double quotes have direct-child text meaning. Single-quoted strings and
+template literals remain JavaScript expressions and must be written inside `{}`.
+
 Elsewhere (outside a `component` body), JSX remains an expression, as in standard
 JSX.
 
@@ -84,9 +89,9 @@ introduced — but framework compilers treat them as _reactive_ boundaries.
 ```tsx
 component List(props: { items: Item[]; showHeader: boolean }) {
   if (props.showHeader) {
-    <h1>{'Items'}</h1>
+    <h1>"Items"</h1>
   } else {
-    <h2>{'(no header)'}</h2>
+    <h2>"(no header)"</h2>
   }
 
   for (const item of props.items) {
@@ -95,10 +100,10 @@ component List(props: { items: Item[]; showHeader: boolean }) {
 
   switch (props.items.length) {
     case 0:
-      <p>{'empty'}</p>
+      <p>"empty"</p>
       break;
     default:
-      <p>{'has items'}</p>
+      <p>"has items"</p>
   }
 
   try {
@@ -169,7 +174,7 @@ children).
 
 ```tsx
 component Page() {
-  const header = <tsx><h1>{'Hello'}</h1></tsx>;
+  const header = <tsx><h1>Hello</h1></tsx>;
   renderSomewhereElse(header);
 }
 ```

package/package.json

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

package/src/analyze/validation.js

@@ -5,6 +5,9 @@
 
 import { error } from '../errors.js';
 
+export const COMPONENT_RETURN_VALUE_ERROR =
+	'Return statements inside components cannot have a return value.';
+
 const invalid_nestings = {
 	// <p> cannot contain block-level elements
 	p: new Set([
@@ -125,6 +128,50 @@ function get_element_tag(element) {
 	return element.id.type === 'Identifier' ? element.id.name : null;
 }
 
+/**
+ * @param {AST.ReturnStatement} node
+ * @returns {AST.ReturnStatement}
+ */
+export function get_return_keyword_node(node) {
+	const return_keyword_length = 'return'.length;
+	const start = /** @type {AST.NodeWithLocation} */ (node).start ?? 0;
+	const loc = /** @type {AST.NodeWithLocation} */ (node).loc;
+
+	return /** @type {AST.ReturnStatement} */ ({
+		...node,
+		end: start + return_keyword_length,
+		loc: loc
+			? {
+					start: loc.start,
+					end: {
+						line: loc.start.line,
+						column: loc.start.column + return_keyword_length,
+					},
+				}
+			: undefined,
+	});
+}
+
+/**
+ * @param {AST.ReturnStatement} node
+ * @param {string | null | undefined} filename
+ * @param {CompileError[]} [errors]
+ * @param {AST.CommentWithLocation[]} [comments]
+ */
+export function validate_component_return_statement(node, filename, errors, comments) {
+	if (node.argument === null) {
+		return;
+	}
+
+	error(
+		COMPONENT_RETURN_VALUE_ERROR,
+		filename ?? null,
+		get_return_keyword_node(node),
+		errors,
+		comments,
+	);
+}
+
 /**
  * @param {AST.Element} element
  * @param {AnalysisContext} context

package/src/index.js

@@ -78,12 +78,17 @@ export {
 
 // AST utils
 export {
+	get_component_from_path as getComponentFromPath,
 	object,
 	unwrap_pattern as unwrapPattern,
 	extract_identifiers as extractIdentifiers,
 	extract_paths as extractPaths,
 	build_fallback as buildFallback,
 	build_assignment_value as buildAssignmentValue,
+	is_class_node as isClassNode,
+	is_component_node as isComponentNode,
+	is_function_node as isFunctionNode,
+	is_inside_component as isInsideComponent,
 } from './utils/ast.js';
 
 // Builders (namespace re-export — members mirror AST node kinds)
@@ -197,4 +202,9 @@ export {
 
 // Analyze
 export { analyze_css as analyzeCss } from './analyze/css-analyze.js';
-export { validate_nesting as validateNesting } from './analyze/validation.js';
+export {
+	COMPONENT_RETURN_VALUE_ERROR,
+	get_return_keyword_node as getReturnKeywordNode,
+	validate_component_return_statement as validateComponentReturnStatement,
+	validate_nesting as validateNesting,
+} from './analyze/validation.js';

package/src/plugin.js

@@ -16,6 +16,143 @@ import {
 import { regex_newline_characters } from './utils/patterns.js';
 import { error } from './errors.js';
 
+/** @type {WeakMap<Record<string, boolean>, Map<string, number>>} */
+const argument_clash_first_positions = new WeakMap();
+/** @type {WeakMap<Record<string, boolean>, Set<string>>} */
+const argument_clash_reported_names = new WeakMap();
+
+/**
+ * @param {Record<string, boolean>} check_clashes
+ * @returns {Map<string, number>}
+ */
+function get_argument_clash_first_positions(check_clashes) {
+	let first_positions = argument_clash_first_positions.get(check_clashes);
+	if (!first_positions) {
+		first_positions = new Map();
+		argument_clash_first_positions.set(check_clashes, first_positions);
+	}
+	return first_positions;
+}
+
+/**
+ * @param {Record<string, boolean>} check_clashes
+ * @returns {Set<string>}
+ */
+function get_argument_clash_reported_names(check_clashes) {
+	let reported_names = argument_clash_reported_names.get(check_clashes);
+	if (!reported_names) {
+		reported_names = new Set();
+		argument_clash_reported_names.set(check_clashes, reported_names);
+	}
+	return reported_names;
+}
+
+/**
+ * @param {string} input
+ * @param {number} i
+ */
+function skip_whitespace_from(input, i) {
+	while (i < input.length) {
+		const ch = input.charCodeAt(i);
+		if (ch !== 32 && ch !== 9 && ch !== 10 && ch !== 13) break;
+		i++;
+	}
+	return i;
+}
+
+/**
+ * Skip past a string literal opened at `i` with the given quote char code.
+ * @param {string} input
+ * @param {number} i
+ * @param {number} quote
+ */
+function skip_string_from(input, i, quote) {
+	i++;
+	while (i < input.length) {
+		const ch = input.charCodeAt(i);
+		i++;
+		if (ch === 92)
+			i++; // backslash escape
+		else if (ch === quote) return i;
+	}
+	return i;
+}
+
+/**
+ * Scan past a balanced pair starting at `i` (which must point at `open`).
+ * Returns the position after the matching close, or -1 if unbalanced.
+ * @param {string} input
+ * @param {number} i
+ * @param {number} open
+ * @param {number} close
+ */
+function scan_balanced_from(input, i, open, close) {
+	let depth = 1;
+	i++;
+	while (i < input.length) {
+		const ch = input.charCodeAt(i);
+		if (ch === 34 || ch === 39 || ch === 96) {
+			i = skip_string_from(input, i, ch);
+			continue;
+		}
+		if (ch === open) depth++;
+		else if (ch === close && --depth === 0) return i + 1;
+		i++;
+	}
+	return -1;
+}
+
+/**
+ * Best-effort lookahead at a `<` to decide whether it starts a generic arrow
+ * expression — `<...>(...)[: T] => ...`. Conservative: returns false on any
+ * unexpected shape so JSX continues to parse as JSX.
+ * @param {string} input
+ * @param {number} pos
+ */
+function looks_like_generic_arrow(input, pos) {
+	if (input.charCodeAt(pos) !== 60) return false;
+
+	// Match the angle brackets, skipping over string literals.
+	let i = pos + 1;
+	let depth = 1;
+	while (i < input.length) {
+		const ch = input.charCodeAt(i);
+		if (ch === 34 || ch === 39 || ch === 96) {
+			i = skip_string_from(input, i, ch);
+			continue;
+		}
+		if (ch === 60) depth++;
+		else if (ch === 62 && --depth === 0) break;
+		i++;
+	}
+	if (depth !== 0) return false;
+
+	// `>` must be followed by `(...)`.
+	i = skip_whitespace_from(input, i + 1);
+	if (input.charCodeAt(i) !== 40) return false;
+	i = scan_balanced_from(input, i, 40, 41);
+	if (i === -1) return false;
+
+	// Optional `: ReturnType` before `=>`.
+	i = skip_whitespace_from(input, i);
+	if (input.charCodeAt(i) === 58) {
+		i++;
+		while (i < input.length) {
+			const ch = input.charCodeAt(i);
+			if (ch === 34 || ch === 39 || ch === 96) {
+				i = skip_string_from(input, i, ch);
+				continue;
+			}
+			if (ch === 61 && input.charCodeAt(i + 1) === 62) return true;
+			if (ch === 59 || ch === 123 || ch === 125) return false;
+			i++;
+		}
+		return false;
+	}
+
+	return input.charCodeAt(i) === 61 && input.charCodeAt(i + 1) === 62;
+}
+
 /**
  * Acorn parser plugin for Ripple syntax extensions.
  * Adds support for: component declarations, &[]/&{} lazy destructuring,
@@ -38,12 +175,14 @@ export function TSRXPlugin(config) {
 		class TSRXParser extends Parser {
 			/** @type {AST.Node[]} */
 			#path = [];
+			#allowTagStartAfterDoubleQuotedText = false;
 			#commentContextId = 0;
 			#loose = false;
 			/** @type {import('../types/index').CompileError[] | undefined} */
 			#errors = undefined;
 			/** @type {string | null} */
 			#filename = null;
+			#functionBodyDepth = 0;
 
 			/**
 			 * @param {Parse.Options} options
@@ -59,20 +198,21 @@ export function TSRXPlugin(config) {
 
 			/**
 			 * @param {number} position
+			 * @param {number} end
 			 * @param {string} message
 			 */
-			#report_recoverable_error(position, message) {
+			#report_recoverable_error_range(position, end, message) {
 				const start = Math.max(0, Math.min(position, this.input.length));
-				const end = Math.min(this.input.length, start + 1);
+				const range_end = Math.max(start, Math.min(end, this.input.length));
 				const start_loc = acorn.getLineInfo(this.input, start);
-				const end_loc = acorn.getLineInfo(this.input, end);
+				const end_loc = acorn.getLineInfo(this.input, range_end);
 
 				error(
 					message,
 					this.#filename,
 					/** @type {AST.NodeWithLocation} */ ({
 						start,
-						end,
+						end: range_end,
 						loc: {
 							start: start_loc,
 							end: end_loc,
@@ -82,6 +222,14 @@ export function TSRXPlugin(config) {
 				);
 			}
 
+			/**
+			 * @param {number} position
+			 * @param {string} message
+			 */
+			#report_recoverable_error(position, message) {
+				this.#report_recoverable_error_range(position, position + 1, message);
+			}
+
 			/**
 			 * In loose mode, keep parsing after duplicate declaration diagnostics so
 			 * editor tooling can continue producing AST and mappings.
@@ -96,7 +244,10 @@ export function TSRXPlugin(config) {
 							? message.message
 							: String(message);
 
-				if (error_message.includes('has already been declared')) {
+				if (
+					error_message.includes('has already been declared') ||
+					error_message === 'Argument name clash'
+				) {
 					this.#report_recoverable_error(position, error_message);
 					return;
 				}
@@ -381,11 +532,37 @@ export function TSRXPlugin(config) {
 				return null;
 			}
 
+			/**
+			 * Inside a component, `<T,>(x: T) => x` should parse as a generic arrow
+			 * function, not a JSX element. acorn-typescript's `readToken` would
+			 * otherwise tokenize `<` as `jsxTagStart` (when `exprAllowed` or the
+			 * context is `tc_expr`), bypassing our `getTokenFromCode` override. We
+			 * intercept here, but only when the source from `<` actually looks like
+			 * a generic arrow expression — so JSX like `<div>` keeps parsing normally.
+			 *
+			 * @type {Parse.Parser['readToken']}
+			 */
+			readToken(code) {
+				if (
+					code === 60 &&
+					this.#path.findLast((n) => n.type === 'Component') &&
+					looks_like_generic_arrow(this.input, this.pos)
+				) {
+					++this.pos;
+					return this.finishToken(tt.relational, '<');
+				}
+				return super.readToken(code);
+			}
+
 			/**
 			 * Get token from character code - handles Ripple-specific tokens
 			 * @type {Parse.Parser['getTokenFromCode']}
 			 */
 			getTokenFromCode(code) {
+				if (code !== 60) {
+					this.#allowTagStartAfterDoubleQuotedText = false;
+				}
+
 				if (code === 60) {
 					// < character
 					const inComponent = this.#path.findLast((n) => n.type === 'Component');
@@ -462,29 +639,21 @@ export function TSRXPlugin(config) {
 						// Inside component template bodies, allow adjacent tags without requiring
 						// a newline/indentation before the next '<'. This is important for inputs
 						// like `<div />` and `</div><style>...</style>` which Prettier formats.
-						if (prevNonWhitespaceChar === 123 /* '{' */ || prevNonWhitespaceChar === 62 /* '>' */) {
+						if (
+							(prevNonWhitespaceChar === 34 /* '"' */ &&
+								this.#allowTagStartAfterDoubleQuotedText) ||
+							prevNonWhitespaceChar === 123 /* '{' */ ||
+							prevNonWhitespaceChar === 62 /* '>' */
+						) {
 							if (!isWhitespaceAfterLt) {
+								this.#allowTagStartAfterDoubleQuotedText = false;
 								++this.pos;
 								return this.finishToken(tstt.jsxTagStart);
 							}
 						}
 
-						// Check if we're inside a nested function (arrow function, function expression, etc.)
-						// We need to distinguish between being inside a function vs just being in nested scopes
-						// (like for loops, if blocks, JSX elements, etc.)
-						const nestedFunctionContext = this.context.some((ctx) => ctx.token === 'function');
-
-						// Inside nested functions, treat < as relational/generic operator
-						// BUT: if the < is followed by /, it's a closing JSX tag, not a less-than operator
-						const nextChar =
-							this.pos + 1 < this.input.length ? this.input.charCodeAt(this.pos + 1) : -1;
-						const isClosingTag = nextChar === 47; // '/'
-
-						if (nestedFunctionContext && !isClosingTag) {
-							// Inside function - treat as TypeScript generic, not JSX
-							++this.pos;
-							return this.finishToken(tt.relational, '<');
-						}
+						// `<` inside a nested function body is intercepted earlier in
+						// `readToken` so it never reaches this path.
 
 						// Check if everything before this position on the current line is whitespace
 						let lineStart = this.pos - 1;
@@ -554,6 +723,7 @@ export function TSRXPlugin(config) {
 						}
 					}
 				}
+				this.#allowTagStartAfterDoubleQuotedText = false;
 				return super.getTokenFromCode(code);
 			}
 
@@ -599,6 +769,67 @@ export function TSRXPlugin(config) {
 				return super.parseBindingAtom();
 			}
 
+			/**
+			 * Acorn reports only the second duplicate function parameter. In loose
+			 * mode, report the first one too so editor diagnostics can underline both
+			 * binding sites. Keep strict mode on Acorn's normal fatal path.
+			 *
+			 * @type {Parse.Parser['checkLValSimple']}
+			 */
+			checkLValSimple(expr, bindingType = BINDING_TYPES.BIND_NONE, checkClashes) {
+				if (
+					this.#loose &&
+					expr.type === 'Identifier' &&
+					bindingType !== BINDING_TYPES.BIND_NONE &&
+					checkClashes
+				) {
+					const first_positions = get_argument_clash_first_positions(checkClashes);
+					const reported_names = get_argument_clash_reported_names(checkClashes);
+					const first_position = first_positions.get(expr.name);
+
+					if (Object.prototype.hasOwnProperty.call(checkClashes, expr.name)) {
+						if (first_position != null && !reported_names.has(expr.name)) {
+							this.#report_recoverable_error_range(
+								first_position,
+								first_position + expr.name.length,
+								'Argument name clash',
+							);
+							reported_names.add(expr.name);
+						}
+						const start = /** @type {number} */ (expr.start);
+						this.#report_recoverable_error_range(
+							start,
+							/** @type {number} */ (expr.end ?? start + expr.name.length),
+							'Argument name clash',
+						);
+						return;
+					}
+
+					const result = super.checkLValSimple(expr, bindingType, checkClashes);
+					first_positions.set(expr.name, /** @type {number} */ (expr.start));
+					return result;
+				}
+
+				return super.checkLValSimple(expr, bindingType, checkClashes);
+			}
+
+			/**
+			 * Components do not use Acorn's normal function-body parser, but they
+			 * should still report duplicate parameter names like functions do. Keep
+			 * this validation on `BIND_OUTSIDE` so params are checked without being
+			 * declared in the component template scope, preserving existing shadowing
+			 * behavior.
+			 *
+			 * @param {AST.Pattern[]} params
+			 */
+			checkComponentParams(params) {
+				/** @type {Record<string, boolean>} */
+				const name_hash = Object.create(null);
+				for (const param of params || []) {
+					this.checkLValInnerPattern(param, BINDING_TYPES.BIND_OUTSIDE, name_hash);
+				}
+			}
+
 			/**
 			 * Parse expression atom - handles RippleArray and RippleObject literals
 			 * @type {Parse.Parser['parseExprAtom']}
@@ -741,11 +972,24 @@ export function TSRXPlugin(config) {
 				}
 
 				this.parseFunctionParams(node);
+				this.checkComponentParams(node.params);
+
+				// 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
+				// branching while inside the template.
+				const parent_function_body_depth = this.#functionBodyDepth;
+				this.#functionBodyDepth = 0;
+
 				this.eat(tt.braceL);
 				node.body = [];
 				this.#path.push(node);
 
-				this.parseTemplateBody(node.body);
+				try {
+					this.parseTemplateBody(node.body);
+				} finally {
+					this.#functionBodyDepth = parent_function_body_depth;
+				}
 				this.#path.pop();
 				this.exitScope();
 
@@ -962,6 +1206,19 @@ export function TSRXPlugin(config) {
 				return this.finishNode(node, isForIn ? 'ForInStatement' : 'ForOfStatement');
 			}
 
+			/**
+			 * @type {Parse.Parser['parseFunctionBody']}
+			 */
+			parseFunctionBody(node, isArrowFunction, isMethod, forInit, ...args) {
+				this.#functionBodyDepth++;
+
+				try {
+					return super.parseFunctionBody(node, isArrowFunction, isMethod, forInit, ...args);
+				} finally {
+					this.#functionBodyDepth--;
+				}
+			}
+
 			/**
 			 * @type {Parse.Parser['checkUnreserved']}
 			 */
@@ -1055,6 +1312,30 @@ export function TSRXPlugin(config) {
 				);
 			}
 
+			/**
+			 * @returns {AST.TextNode}
+			 */
+			parseDoubleQuotedTextChild() {
+				const node = /** @type {AST.TextNode} */ (this.startNode());
+				const expression = /** @type {AST.Literal} */ (this.startNode());
+				const raw = this.input.slice(this.start, this.end);
+				const end = this.end;
+				const endLoc = this.endLoc;
+
+				expression.value = this.value;
+				expression.raw = raw;
+				node.expression = this.finishNodeAt(expression, 'Literal', end, endLoc);
+
+				this.#allowTagStartAfterDoubleQuotedText = true;
+				try {
+					this.next();
+				} finally {
+					this.#allowTagStartAfterDoubleQuotedText = false;
+				}
+
+				return this.finishNodeAt(node, 'Text', end, endLoc);
+			}
+
 			/**
 			 * @type {Parse.Parser['jsx_parseAttribute']}
 			 */
@@ -1916,12 +2197,16 @@ export function TSRXPlugin(config) {
 
 						if (!inside_tsx.openingElement.name) {
 							if (this.input.slice(this.pos, this.pos + 2) === '/>') {
+								// Reset exprAllowed so the trailing `/` of `</>` is tokenized
+								// as a slash rather than as the start of a regex literal.
+								this.exprAllowed = false;
 								return;
 							}
 						} else if (this.input.slice(this.pos, this.pos + 4) === '/tsx') {
 							const after = this.input.charCodeAt(this.pos + 4);
 							// Make sure it's </tsx> and not </tsx:...>
 							if (after === 62 /* > */) {
+								this.exprAllowed = false;
 								return;
 							}
 						}
@@ -1988,6 +2273,7 @@ export function TSRXPlugin(config) {
 						}
 
 						if (this.input.slice(this.pos, this.pos + 5) === '/tsx:') {
+							this.exprAllowed = false;
 							return;
 						}
 
@@ -2043,6 +2329,8 @@ export function TSRXPlugin(config) {
 						delete node.text;
 					}
 					body.push(node);
+				} else if (this.type === tt.string && this.input.charCodeAt(this.start) === 34) {
+					body.push(this.parseDoubleQuotedTextChild());
 				} else if (this.type === tt.braceR) {
 					// Leaving a component/template body. We may still be in TSX/JSX tokenization
 					// context (e.g. after parsing markup), but the closing `}` is a JS token.
@@ -2188,6 +2476,7 @@ export function TSRXPlugin(config) {
 				if (
 					context !== 'for' &&
 					context !== 'if' &&
+					this.#functionBodyDepth === 0 &&
 					this.context.at(-1) === b_stat &&
 					this.type === tt.braceL &&
 					this.context.some((c) => c === tstc.tc_expr)
@@ -2277,7 +2566,13 @@ export function TSRXPlugin(config) {
 			parseBlock(createNewLexicalScope, node, exitStrict) {
 				const parent = this.#path.at(-1);
 
-				if (parent?.type === 'Component' || parent?.type === 'Element') {
+				// Inside a JS function body, parse `{...}` as a regular block statement,
+				// even if the nearest `#path` entry is a Component/Element — we're in a
+				// nested function callable, not in a template.
+				if (
+					this.#functionBodyDepth === 0 &&
+					(parent?.type === 'Component' || parent?.type === 'Element')
+				) {
 					if (createNewLexicalScope === void 0) createNewLexicalScope = true;
 					if (node === void 0) node = /** @type {AST.BlockStatement} */ (this.startNode());
 

package/src/transform/jsx/helpers.js

@@ -106,6 +106,23 @@ export function tsx_with_ts_locations() {
 				context.visit(node.typeAnnotation);
 			}
 		},
+		Identifier: (node, context) => {
+			context.write(node.name, node);
+			if (node.optional) {
+				context.write('?');
+			}
+			if (node.typeAnnotation) {
+				context.visit(node.typeAnnotation);
+			}
+		},
+		TSNamedTupleMember: (node, context) => {
+			context.visit(node.label);
+			if (node.optional) {
+				context.write('?');
+			}
+			context.write(': ');
+			context.visit(node.elementType);
+		},
 	};
 	for (const type of [
 		// JS nodes whose esrap printer emits no location marker, causing