@tsrx/core 0.1.3 → 0.1.6

package/src/plugin.js

@@ -216,12 +216,15 @@ export function TSRXPlugin(config) {
 			#loose = false;
 			/** @type {AST.Node[]} */
 			#functionStack = [];
+			/** @type {Array<{ parentContext: any[], canRestore: boolean, restore: boolean }>} */
+			#functionBodyContextRestoreStack = [];
 			/** @type {import('../types/index').CompileError[] | undefined} */
 			#errors = undefined;
 			/** @type {string | null} */
 			#filename = null;
 			#componentDepth = 0;
 			#functionBodyDepth = 0;
+			#allowExpressionContainerTrailingSemicolon = false;
 
 			/**
 			 * @type {Parse.Parser['finishNode']}
@@ -279,6 +282,211 @@ export function TSRXPlugin(config) {
 				return this.#isInsideComponent() && this.#functionBodyDepth === 0;
 			}
 
+			/**
+			 * Component bodies and native TSRX element bodies share the same grammar.
+			 * This helper keeps the parser-state setup in one place while callers keep
+			 * ownership of their distinct closing delimiter handling (`}` vs `</tag>`).
+			 *
+			 * @param {AST.Node} node
+			 * @param {AST.Node[]} body
+			 * @param {{
+			 *   enterScope?: boolean,
+			 *   pushPath?: boolean,
+			 *   trackComponentDepth?: boolean,
+			 *   resetFunctionBodyDepth?: boolean,
+			 * }} [options]
+			 */
+			#parseNativeTemplateBody(
+				node,
+				body,
+				{
+					enterScope = false,
+					pushPath = false,
+					trackComponentDepth = false,
+					resetFunctionBodyDepth = false,
+				} = {},
+			) {
+				const parent_function_body_depth = this.#functionBodyDepth;
+
+				if (resetFunctionBodyDepth) {
+					this.#functionBodyDepth = 0;
+				}
+				if (enterScope) {
+					this.enterScope(0);
+				}
+				if (pushPath) {
+					this.#path.push(node);
+				}
+				if (trackComponentDepth) {
+					this.#componentDepth++;
+				}
+
+				try {
+					this.parseTemplateBody(body);
+				} finally {
+					if (trackComponentDepth) {
+						this.#componentDepth--;
+					}
+					if (pushPath) {
+						this.#path.pop();
+					}
+					if (enterScope) {
+						this.exitScope();
+					}
+					if (resetFunctionBodyDepth) {
+						this.#functionBodyDepth = parent_function_body_depth;
+					}
+				}
+			}
+
+			/**
+			 * @param {AST.Node | undefined} node
+			 */
+			#isNativeTemplateNode(node) {
+				return (
+					node?.type === 'Component' ||
+					node?.type === 'Element' ||
+					node?.type === 'Tsx' ||
+					node?.type === 'Tsrx' ||
+					node?.type === 'TsxCompat'
+				);
+			}
+
+			#parseNativeTemplateExpressionContainer() {
+				const allow_trailing_semicolon = this.#allowExpressionContainerTrailingSemicolon;
+				this.#allowExpressionContainerTrailingSemicolon = true;
+				let node;
+				try {
+					node = this.jsx_parseExpressionContainer();
+				} finally {
+					this.#allowExpressionContainerTrailingSemicolon = allow_trailing_semicolon;
+				}
+				// Keep JSXEmptyExpression as-is (for prettier to handle comments)
+				// but convert other expressions to native TSRX child nodes.
+				if (node.expression.type !== 'JSXEmptyExpression') {
+					/** @type {AST.TSRXExpression | AST.Html | AST.TextNode | AST.Style} */ (
+						/** @type {unknown} */ (node)
+					).type = node.html
+						? 'Html'
+						: node.text
+							? 'Text'
+							: node.style
+								? 'Style'
+								: 'TSRXExpression';
+					if (node.style) {
+						/** @type {AST.Style} */ (/** @type {unknown} */ (node)).value =
+							/** @type {AST.Literal} */ (node.expression);
+						delete (/** @type {any} */ (node).expression);
+					}
+					delete node.html;
+					delete node.text;
+					delete node.style;
+				}
+
+				return /** @type {ESTreeJSX.JSXEmptyExpression | AST.TSRXExpression | AST.Html | AST.TextNode | AST.Style | ESTreeJSX.JSXExpressionContainer} */ (
+					/** @type {unknown} */ (node)
+				);
+			}
+
+			/**
+			 * @param {AST.Tsx | AST.TsxCompat} island
+			 * @param {AST.Node[]} body
+			 */
+			#parseTsxIslandBody(island, body) {
+				const tagName =
+					island.type === 'TsxCompat'
+						? `tsx:${island.kind}`
+						: island.openingElement.name
+							? 'tsx'
+							: '';
+
+				this.exprAllowed = true;
+
+				while (true) {
+					if (this.type === tt.eof || this.pos >= this.input.length || this.type === tt.braceR) {
+						const displayTag = tagName || '';
+						this.#report_broken_markup_error(
+							this.start,
+							`Unclosed tag '<${displayTag}>'. Expected '</${displayTag}>' before end of component.`,
+						);
+						island.unclosed = true;
+						/** @type {AST.NodeWithLocation} */ (island).loc.end = {
+							.../** @type {AST.SourceLocation} */ (island.openingElement.loc).end,
+						};
+						island.end = island.openingElement.end;
+						return;
+					}
+
+					if (this.#isAtTsxIslandClosing(island)) {
+						this.exprAllowed = false;
+						return;
+					}
+
+					if (this.type === tt.braceL) {
+						body.push(this.jsx_parseExpressionContainer());
+					} else if (this.type === tstt.jsxTagStart) {
+						body.push(super.jsx_parseElement());
+					} else {
+						const node = this.#parseTsxIslandText();
+						if (node) {
+							body.push(node);
+						}
+						this.#popTemplateLiteralTokenContext();
+						this.next();
+					}
+				}
+			}
+
+			/**
+			 * @param {AST.Tsx | AST.TsxCompat} island
+			 */
+			#isAtTsxIslandClosing(island) {
+				if (island.type === 'TsxCompat') {
+					return this.input.slice(this.pos, this.pos + 5) === '/tsx:';
+				}
+
+				if (!island.openingElement.name) {
+					return this.input.slice(this.pos, this.pos + 2) === '/>';
+				}
+
+				if (this.input.slice(this.pos, this.pos + 4) !== '/tsx') {
+					return false;
+				}
+
+				const after = this.input.charCodeAt(this.pos + 4);
+				return after === 62 /* > */;
+			}
+
+			#parseTsxIslandText() {
+				const start = this.start;
+				this.pos = start;
+				let text = '';
+
+				while (this.pos < this.input.length) {
+					const ch = this.input.charCodeAt(this.pos);
+
+					// Stop at opening tag, expression, or the component-closing brace
+					if (ch === 60 || ch === 123 || ch === 125) {
+						break;
+					}
+
+					text += this.input[this.pos];
+					this.pos++;
+				}
+
+				if (!text) {
+					return null;
+				}
+
+				return /** @type {ESTreeJSX.JSXText} */ ({
+					type: 'JSXText',
+					value: text,
+					raw: text,
+					start,
+					end: this.pos,
+				});
+			}
+
 			#popTsxTokenContextBeforeTemplateExpressionChild() {
 				let index = this.pos;
 				let has_newline = false;
@@ -444,6 +652,18 @@ export function TSRXPlugin(config) {
 					ctx.length = ci - 1;
 					return;
 				}
+				// Statement-bodied `<tsrx>` attributes can leave the attribute's
+				// expression contexts above the still-open JSX tag context. Strip
+				// those so a following `/>` stays in JSX opening-tag mode.
+				if (
+					this.type === tt.braceR &&
+					top === tstc.tc_expr &&
+					second === b_expr &&
+					ctx[ci - 2] === tstc.tc_oTag
+				) {
+					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
@@ -1151,6 +1371,11 @@ export function TSRXPlugin(config) {
 				skipName = false,
 			} = {}) {
 				const node = /** @type {AST.Component} */ (this.startNode());
+				const parent_context = [...this.context];
+				const restore_parent_context =
+					!requireName &&
+					this.#isInsideComponent() &&
+					this.context.some((context) => context === tstc.tc_oTag || context === tstc.tc_cTag);
 				node.type = 'Component';
 				node.css = null;
 				node.default = isDefault;
@@ -1201,32 +1426,24 @@ export function TSRXPlugin(config) {
 					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
-				// branching while inside the template.
-				const parent_function_body_depth = this.#functionBodyDepth;
-				this.#functionBodyDepth = 0;
-
 				if (this.type === tt.braceL) {
 					this.#allowDoubleQuotedTextChildAfterBrace = true;
 				}
 				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.#parseNativeTemplateBody(node, node.body, {
+					pushPath: true,
+					trackComponentDepth: true,
+					resetFunctionBodyDepth: true,
+				});
 				this.exitScope();
 
 				this.next();
 				skipWhitespace(this);
+				if (restore_parent_context) {
+					this.context = this.type === tt.braceR ? parent_context.slice(0, -1) : parent_context;
+					this.exprAllowed = false;
+				}
 				this.finishNode(node, 'Component');
 				this.awaitPos = 0;
 
@@ -1444,6 +1661,14 @@ export function TSRXPlugin(config) {
 			parseFunctionBody(node, isArrowFunction, isMethod, forInit, ...args) {
 				this.#functionBodyDepth++;
 				this.#functionStack.push(node);
+				const context_restore = {
+					parentContext: [...this.context],
+					canRestore:
+						this.#isInsideComponent() &&
+						this.context.some((context) => context === tstc.tc_oTag || context === tstc.tc_cTag),
+					restore: false,
+				};
+				this.#functionBodyContextRestoreStack.push(context_restore);
 				// Inside a component, nested JS function bodies should parse like
 				// ordinary functions, not component template bodies.
 				if (
@@ -1452,9 +1677,9 @@ export function TSRXPlugin(config) {
 					// 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) &&
+					// Keep callback props on their surrounding JSX attribute path until
+					// statement-position TSRX needs to suspend it.
+					!context_restore.canRestore &&
 					// Only reset statement-level function bodies, not expression
 					// contexts that are actively parsing JSX.
 					this.curContext() === b_stat
@@ -1465,6 +1690,11 @@ export function TSRXPlugin(config) {
 				try {
 					return super.parseFunctionBody(node, isArrowFunction, isMethod, forInit, ...args);
 				} finally {
+					if (context_restore.restore) {
+						this.context = context_restore.parentContext.slice(0, -1);
+						this.exprAllowed = false;
+					}
+					this.#functionBodyContextRestoreStack.pop();
 					this.#functionStack.pop();
 					this.#functionBodyDepth--;
 				}
@@ -1561,6 +1791,16 @@ export function TSRXPlugin(config) {
 						'"style" is a TSRX keyword and must be used in the form {style "class_name"}',
 					);
 				}
+				if (this.#allowExpressionContainerTrailingSemicolon && this.type === tt.semi) {
+					if (this.#collect) {
+						this.#report_recoverable_error(
+							this.start,
+							'TSRX expression containers do not use semicolons. Remove this semicolon.',
+							DIAGNOSTIC_CODES.TEMPLATE_EXPRESSION_TRAILING_SEMICOLON,
+						);
+					}
+					this.next();
+				}
 				this.expect(tt.braceR);
 
 				return this.finishNode(node, 'JSXExpressionContainer');
@@ -2226,9 +2466,9 @@ export function TSRXPlugin(config) {
 						this.next();
 					}
 				} else if (is_fragment) {
-					this.enterScope(0);
-					this.parseTemplateBody(/** @type {AST.Element} */ (element).children);
-					this.exitScope();
+					this.#parseNativeTemplateBody(element, /** @type {AST.Element} */ (element).children, {
+						enterScope: true,
+					});
 
 					if (element.type === 'Tsx') {
 						this.#path.pop();
@@ -2395,12 +2635,7 @@ export function TSRXPlugin(config) {
 						// Ensure we escape JSX <tag></tag> context
 						const curContext = this.curContext();
 						const parent = this.#path.at(-1);
-						const insideTemplate =
-							parent?.type === 'Component' ||
-							parent?.type === 'Element' ||
-							parent?.type === 'Tsx' ||
-							parent?.type === 'Tsrx' ||
-							parent?.type === 'TsxCompat';
+						const insideTemplate = this.#isNativeTemplateNode(parent);
 
 						if (curContext === tstc.tc_expr && !insideTemplate) {
 							this.context.pop();
@@ -2408,9 +2643,9 @@ export function TSRXPlugin(config) {
 
 						/** @type {AST.Element} */ (element).css = content;
 					} else {
-						this.enterScope(0);
-						this.parseTemplateBody(/** @type {AST.Element} */ (element).children);
-						this.exitScope();
+						this.#parseNativeTemplateBody(element, /** @type {AST.Element} */ (element).children, {
+							enterScope: true,
+						});
 
 						if (element.type === 'Tsx') {
 							this.#path.pop();
@@ -2501,12 +2736,7 @@ export function TSRXPlugin(config) {
 					// Ensure we escape JSX <tag></tag> context
 					const curContext = this.curContext();
 					const parent = this.#path.at(-1);
-					const insideTemplate =
-						parent?.type === 'Component' ||
-						parent?.type === 'Element' ||
-						parent?.type === 'Tsx' ||
-						parent?.type === 'Tsrx' ||
-						parent?.type === 'TsxCompat';
+					const insideTemplate = this.#isNativeTemplateNode(parent);
 
 					if (curContext === tstc.tc_expr && !insideTemplate) {
 						this.context.pop();
@@ -2535,8 +2765,9 @@ export function TSRXPlugin(config) {
 			parseTemplateBody(body) {
 				const inside_func =
 					this.context.some((n) => n.token === 'function') || this.scopeStack.length > 1;
-				const inside_tsx = this.#path.findLast((n) => n.type === 'Tsx');
-				const inside_tsx_compat = this.#path.findLast((n) => n.type === 'TsxCompat');
+				const inside_tsx_island = this.#path.findLast(
+					(n) => n.type === 'Tsx' || n.type === 'TsxCompat',
+				);
 
 				if (!inside_func) {
 					if (this.type.label === 'continue') {
@@ -2547,168 +2778,15 @@ export function TSRXPlugin(config) {
 					}
 				}
 
-				if (inside_tsx) {
-					this.exprAllowed = true;
-
-					while (true) {
-						if (this.type === tt.eof || this.pos >= this.input.length || this.type === tt.braceR) {
-							this.#report_broken_markup_error(
-								this.start,
-								`Unclosed tag '<tsx>'. Expected '</tsx>' before end of component.`,
-							);
-							inside_tsx.unclosed = true;
-							/** @type {AST.NodeWithLocation} */ (inside_tsx).loc.end = {
-								.../** @type {AST.SourceLocation} */ (inside_tsx.openingElement.loc).end,
-							};
-							inside_tsx.end = inside_tsx.openingElement.end;
-							return;
-						}
-
-						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;
-							}
-						}
-
-						if (this.type === tt.braceL) {
-							const node = this.jsx_parseExpressionContainer();
-							body.push(node);
-						} else if (this.type === tstt.jsxTagStart) {
-							// Parse JSX element
-							const node = super.jsx_parseElement();
-							body.push(node);
-						} else {
-							const start = this.start;
-							this.pos = start;
-							let text = '';
-
-							while (this.pos < this.input.length) {
-								const ch = this.input.charCodeAt(this.pos);
-
-								// Stop at opening tag, expression, or the component-closing brace
-								if (ch === 60 || ch === 123 || ch === 125) {
-									// < or { or }
-									break;
-								}
-
-								text += this.input[this.pos];
-								this.pos++;
-							}
-
-							if (text) {
-								const node = /** @type {ESTreeJSX.JSXText} */ ({
-									type: 'JSXText',
-									value: text,
-									raw: text,
-									start,
-									end: this.pos,
-								});
-								body.push(node);
-							}
-
-							this.#popTemplateLiteralTokenContext();
-							// Always call next() to ensure parser makes progress
-							this.next();
-						}
-					}
-				}
-				if (inside_tsx_compat) {
-					this.exprAllowed = true;
-
-					while (true) {
-						if (this.type === tt.eof || this.pos >= this.input.length || this.type === tt.braceR) {
-							this.#report_broken_markup_error(
-								this.start,
-								`Unclosed tag '<tsx:${inside_tsx_compat.kind}>'. Expected '</tsx:${inside_tsx_compat.kind}>' before end of component.`,
-							);
-							inside_tsx_compat.unclosed = true;
-							/** @type {AST.NodeWithLocation} */ (inside_tsx_compat).loc.end = {
-								.../** @type {AST.SourceLocation} */ (inside_tsx_compat.openingElement.loc).end,
-							};
-							inside_tsx_compat.end = inside_tsx_compat.openingElement.end;
-							return;
-						}
-
-						if (this.input.slice(this.pos, this.pos + 5) === '/tsx:') {
-							this.exprAllowed = false;
-							return;
-						}
-
-						if (this.type === tt.braceL) {
-							const node = this.jsx_parseExpressionContainer();
-							body.push(node);
-						} else if (this.type === tstt.jsxTagStart) {
-							// Parse JSX element
-							const node = super.jsx_parseElement();
-							body.push(node);
-						} else {
-							const start = this.start;
-							this.pos = start;
-							let text = '';
-
-							while (this.pos < this.input.length) {
-								const ch = this.input.charCodeAt(this.pos);
-
-								// Stop at opening tag, expression, or the component-closing brace
-								if (ch === 60 || ch === 123 || ch === 125) {
-									// < or { or }
-									break;
-								}
-
-								text += this.input[this.pos];
-								this.pos++;
-							}
-
-							if (text) {
-								const node = /** @type {ESTreeJSX.JSXText} */ ({
-									type: 'JSXText',
-									value: text,
-									raw: text,
-									start,
-									end: this.pos,
-								});
-								body.push(node);
-							}
-
-							this.#popTemplateLiteralTokenContext();
-							this.next();
-						}
-					}
+				if (inside_tsx_island) {
+					this.#parseTsxIslandBody(
+						/** @type {AST.Tsx | AST.TsxCompat} */ (inside_tsx_island),
+						/** @type {AST.Node[]} */ (/** @type {unknown} */ (body)),
+					);
+					return;
 				}
 				if (this.type === tt.braceL) {
-					const node = this.jsx_parseExpressionContainer();
-					// Keep JSXEmptyExpression as-is (for prettier to handle comments)
-					// but convert other expressions to Html/TSRXExpression/Text nodes
-					if (node.expression.type !== 'JSXEmptyExpression') {
-						/** @type {AST.TSRXExpression | AST.Html | AST.TextNode | AST.Style} */ (
-							/** @type {unknown} */ (node)
-						).type = node.html
-							? 'Html'
-							: node.text
-								? 'Text'
-								: node.style
-									? 'Style'
-									: 'TSRXExpression';
-						if (node.style) {
-							/** @type {AST.Style} */ (/** @type {unknown} */ (node)).value =
-								/** @type {AST.Literal} */ (node.expression);
-							delete (/** @type {any} */ (node).expression);
-						}
-						delete node.html;
-						delete node.text;
-						delete node.style;
-					}
-					body.push(node);
+					body.push(this.#parseNativeTemplateExpressionContainer());
 				} else if (this.type === tt.string && this.input.charCodeAt(this.start) === 34) {
 					body.push(this.parseDoubleQuotedTextChild());
 				} else if (this.type === tt.braceR) {
@@ -2957,30 +3035,8 @@ export function TSRXPlugin(config) {
 					this.type === tt.braceL &&
 					this.context.some((c) => c === tstc.tc_expr)
 				) {
-					const node = this.jsx_parseExpressionContainer();
-					// Keep JSXEmptyExpression as-is (don't convert to TSRXExpression/Text/Html)
-					if (node.expression.type !== 'JSXEmptyExpression') {
-						/** @type {AST.TSRXExpression | AST.Html | AST.TextNode | AST.Style} */ (
-							/** @type {unknown} */ (node)
-						).type = node.html
-							? 'Html'
-							: node.text
-								? 'Text'
-								: node.style
-									? 'Style'
-									: 'TSRXExpression';
-						if (node.style) {
-							/** @type {AST.Style} */ (/** @type {unknown} */ (node)).value =
-								/** @type {AST.Literal} */ (node.expression);
-							delete (/** @type {any} */ (node).expression);
-						}
-						delete node.html;
-						delete node.text;
-						delete node.style;
-					}
-
 					return /** @type {ESTreeJSX.JSXEmptyExpression | AST.TSRXExpression | AST.Html | AST.TextNode | ESTreeJSX.JSXExpressionContainer} */ (
-						/** @type {unknown} */ (node)
+						/** @type {unknown} */ (this.#parseNativeTemplateExpressionContainer())
 					);
 				}
 
@@ -3008,6 +3064,18 @@ export function TSRXPlugin(config) {
 							this.context.pop();
 						}
 					}
+					const context_restore = this.#functionBodyContextRestoreStack.at(-1);
+					if (
+						this.#functionBodyDepth > 0 &&
+						node.type === 'Tsrx' &&
+						context_restore?.canRestore &&
+						this.type !== tt.braceR &&
+						this.type !== tt.comma
+					) {
+						context_restore.restore = true;
+						this.context = [b_stat];
+						this.exprAllowed = true;
+					}
 					return node;
 				}
 
@@ -3077,10 +3145,9 @@ export function TSRXPlugin(config) {
 					node.body = [];
 					this.#allowDoubleQuotedTextChildAfterBrace = true;
 					this.expect(tt.braceL);
-					if (createNewLexicalScope) {
-						this.enterScope(0);
-					}
-					this.parseTemplateBody(node.body);
+					this.#parseNativeTemplateBody(node, node.body, {
+						enterScope: createNewLexicalScope,
+					});
 
 					if (exitStrict) {
 						this.strict = false;
@@ -3088,9 +3155,6 @@ export function TSRXPlugin(config) {
 					this.exprAllowed = true;
 
 					this.next();
-					if (createNewLexicalScope) {
-						this.exitScope();
-					}
 					return this.finishNode(node, 'BlockStatement');
 				}