@tsrx/core 0.1.49 → 0.1.51

package/src/plugin.js

@@ -7,7 +7,7 @@
 import * as acorn from 'acorn';
 import { isWhitespaceTextNode, BINDING_TYPES, DestructuringErrors } from './parse/index.js';
 import { parse_style } from './parse/style.js';
-import { regex_newline_characters } from './utils/patterns.js';
+import { regex_newline_characters, regex_not_whitespace } from './utils/patterns.js';
 import { error } from './errors.js';
 import { DIAGNOSTIC_CODES } from './diagnostics.js';
 import { TSRX_RETURN_STATEMENT_ERROR } from './analyze/validation.js';
@@ -68,6 +68,15 @@ const DYNAMIC_TAG_DISALLOWED_TYPES = new Set([
 	'TaggedTemplateExpression',
 ]);
 
+/**
+ * The expression wrappers a dynamic tag (`<{expr}>`) may be written through.
+ * @param {AST.Node} node
+ * @returns {node is AST.TSAsExpression | AST.TSTypeAssertion | AST.TSNonNullExpression | AST.ParenthesizedExpression | AST.ChainExpression}
+ */
+function is_dynamic_tag_wrapper(node) {
+	return DYNAMIC_TAG_WRAPPER_TYPES.has(node.type);
+}
+
 /** @type {WeakMap<Record<string, boolean>, Map<string, number>>} */
 const argument_clash_first_positions = new WeakMap();
 /** @type {WeakMap<Record<string, boolean>, Set<string>>} */
@@ -278,7 +287,7 @@ export function TSRXPlugin(config) {
 			#templateControlFlowTryDepth = 0;
 			/** @type {Parse.Parser['context']} */
 			context = [b_stat];
-			/** @type {AST.Node | null} */
+			/** @type {AST.NativeTSRXTemplateNode | null} */
 			#openingNativeTemplateNode = null;
 			#closingNativeTemplateNode = false;
 			#readingJSXControlFlowDirectiveKeyword = false;
@@ -926,14 +935,24 @@ export function TSRXPlugin(config) {
 			 *   template-mode element whose text children are raw JSX text; the rest of
 			 *   the directive/comment/boundary checks below still apply, so a directive
 			 *   body inside an expression container is correctly excluded.
+			 * @param {boolean} [ignore_directive_start] Skip the directive-start bail —
+			 *   used to ask whether the position is template text APART from starting a
+			 *   directive, so whitespace directly before the directive can be kept. Also
+			 *   skips the value-position (`#templateScriptParsingDepth`) and `@switch`
+			 *   (JS switch label) bails: those describe the surrounding construct, not
+			 *   this position, and significant whitespace between template siblings must
+			 *   not depend on which construct the template sits in.
 			 */
-			#shouldReadTemplateRawTextToken(allow_inside_expression_container = false) {
+			#shouldReadTemplateRawTextToken(
+				allow_inside_expression_container = false,
+				ignore_directive_start = false,
+			) {
 				if (
 					this.#closingNativeTemplateNode ||
 					this.#readingJSXControlFlowDirectiveKeyword ||
 					this.#readingJSXControlFlowHeader ||
 					this.#parsingJSXSwitchCaseScriptStatementDepth > 0 ||
-					this.#templateScriptParsingDepth > 0 ||
+					(!ignore_directive_start && this.#templateScriptParsingDepth > 0) ||
 					(!allow_inside_expression_container && this.#jsxExpressionContainerDepth > 0)
 				) {
 					return false;
@@ -942,11 +961,14 @@ export function TSRXPlugin(config) {
 				if (current_context_token === '<tag' || current_context_token === '</tag') {
 					return false;
 				}
-				if (this.labels.some((label) => label.kind === 'switch')) {
+				if (!ignore_directive_start && this.labels.some((label) => label.kind === 'switch')) {
 					return false;
 				}
 				const current_template_node = this.#currentNativeTemplateNode();
-				if (!current_template_node || this.#isJSXControlFlowDirectiveAt(this.pos)) {
+				if (
+					!current_template_node ||
+					(!ignore_directive_start && this.#isJSXControlFlowDirectiveAt(this.pos))
+				) {
 					return false;
 				}
 				// Inside an expression container (only reachable with
@@ -1007,7 +1029,8 @@ export function TSRXPlugin(config) {
 				if (
 					opening &&
 					current_template_node === opening &&
-					/** @type {any} */ (opening).openingElement?.selfClosing &&
+					opening.type !== 'JSXFragment' &&
+					opening.openingElement?.selfClosing &&
 					this.input.charCodeAt(this.lastTokEnd - 1) === CharCode.greaterThan &&
 					this.input.charCodeAt(this.lastTokEnd - 2) === CharCode.slash
 				) {
@@ -1022,6 +1045,26 @@ export function TSRXPlugin(config) {
 				return true;
 			}
 
+			/**
+			 * At a raw-text bail boundary in `jsx_readToken`, decides whether the
+			 * accumulated run is template text that must be finished as a jsxText
+			 * token rather than silently discarded by the token-start reset. True
+			 * when the run contains non-whitespace (whitespace accumulates without
+			 * consulting the raw-text gate, so a whitespace-only run can be plain JS
+			 * layout — a newline before a `return`, indentation before `: null`), or
+			 * when it is significant whitespace directly before a directive in an
+			 * open template element (`<><a /> @for (…) { … }</>`).
+			 * @param {string} accumulated
+			 */
+			#shouldFinishAccumulatedTemplateText(accumulated) {
+				if (!accumulated) return false;
+				if (regex_not_whitespace.test(accumulated)) return true;
+				return (
+					this.#isJSXControlFlowDirectiveAt(this.pos) &&
+					this.#shouldReadTemplateRawTextToken(true, true)
+				);
+			}
+
 			#readTemplateRawTextToken() {
 				const start = this.pos;
 				const index = this.#templateRawTextEnd(start);
@@ -1260,6 +1303,7 @@ export function TSRXPlugin(config) {
 			 * Parse the single bare render node of a code block — a JSX element/fragment
 			 * (parsed as a native TSRX element so its own body may again be plain JSX or
 			 * a nested `@{ … }`) or an `@if`/`@for`/`@switch`/`@try` directive.
+			 * @returns {AST.TSRXRenderOutput}
 			 */
 			#parseCodeBlockRenderNode() {
 				const at_index = skip_whitespace_from(this.input, this.start);
@@ -1276,13 +1320,11 @@ export function TSRXPlugin(config) {
 				}
 
 				if (this.#isCodeBlockStart(at_index)) {
-					return /** @type {AST.Node} */ (/** @type {unknown} */ (this.#parseCodeBlock()));
+					return this.#parseCodeBlock();
 				}
 
 				if (this.#isJSXControlFlowDirectiveAt(at_index)) {
-					return /** @type {AST.Node} */ (
-						/** @type {unknown} */ (this.#parseJSXControlFlowExpression())
-					);
+					return this.#parseJSXControlFlowExpression();
 				}
 
 				// Re-read the `<` so its `jsxTagStart` pushes the opening-tag contexts.
@@ -1303,7 +1345,7 @@ export function TSRXPlugin(config) {
 				if (this.curContext() === tstc.tc_expr) {
 					this.context.pop();
 				}
-				return /** @type {AST.Node} */ (/** @type {unknown} */ (node));
+				return node;
 			}
 
 			/**
@@ -1438,30 +1480,43 @@ export function TSRXPlugin(config) {
 			 * @type {Parse.Parser['parseExprAtom']}
 			 */
 			parseExprAtom(refDestructuringErrors, forInit, forNew) {
-				if (this.input.charCodeAt(this.start) === CharCode.at) {
+				// A token already consumed as JSX text (a script-mode element child) must
+				// stay text even when it happens to begin at an `@` — otherwise whether
+				// `@if` parses as a directive would depend on leading whitespace.
+				if (this.input.charCodeAt(this.start) === CharCode.at && this.type !== tstt.jsxText) {
 					if (this.#isCodeBlockStart(this.start)) {
-						return /** @type {any} */ (this.#parseCodeBlock());
+						return this.#parseCodeBlock();
 					}
 					if (this.#isJSXControlFlowDirectiveAt(this.start)) {
-						return /** @type {any} */ (this.#parseJSXControlFlowExpression());
+						return this.#parseJSXControlFlowExpression();
 					}
 				}
 				return super.parseExprAtom(refDestructuringErrors, forInit, forNew);
 			}
 
 			/**
+			 * Retype a parsed control-flow statement in place as its directive
+			 * expression form (`IfStatement` -> `JSXIfExpression`, …), keeping the
+			 * original statement type in `statementType`.
+			 *
 			 * @param {AST.Node} node
-			 * @param {string} type
+			 * @param {AST.JSXTemplateDirective['type']} type
 			 * @param {number} start
 			 * @param {AST.Position} startLoc
+			 * @returns {AST.JSXTemplateDirective}
 			 */
 			#finishJSXControlFlowExpression(node, type, start, startLoc) {
 				node.start = start;
 				/** @type {AST.NodeWithLocation} */ (node).loc.start = startLoc;
 				node.metadata ??= { path: [] };
-				/** @type {any} */ (node).statementType = node.type;
-				/** @type {any} */ (node).type = type;
-				return node;
+				const directive = /** @type {Parse.JSXControlFlowDirectiveSlots} */ (
+					/** @type {unknown} */ (node)
+				);
+				directive.statementType = /** @type {AST.JSXTemplateDirective['statementType']} */ (
+					node.type
+				);
+				directive.type = type;
+				return /** @type {AST.JSXTemplateDirective} */ (directive);
 			}
 
 			/**
@@ -1880,7 +1935,7 @@ export function TSRXPlugin(config) {
 				if (this.type === tstt.jsxText) {
 					const text = this.#parseJSXSwitchCaseRawText();
 					if (!isWhitespaceTextNode(text)) {
-						consequent.push(/** @type {any} */ (text));
+						consequent.push(text);
 					}
 					return;
 				}
@@ -1908,12 +1963,12 @@ export function TSRXPlugin(config) {
 					if (!node) {
 						this.unexpected();
 					}
-					consequent.push(/** @type {any} */ (node));
+					consequent.push(node);
 					return;
 				}
 
 				if (this.#isJSXControlFlowDirectiveStart()) {
-					consequent.push(/** @type {any} */ (this.#parseJSXControlFlowExpression()));
+					consequent.push(this.#parseJSXControlFlowExpression());
 					return;
 				}
 
@@ -1965,30 +2020,31 @@ export function TSRXPlugin(config) {
 			}
 
 			/**
-			 * @param {ESTreeJSX.JSXOpeningElement} openingElement
+			 * @param {ESTreeJSX.TSRXJSXOpeningElement} openingElement
 			 * @returns {ESTreeJSX.JSXOpeningFragment}
 			 */
 			#toOpeningFragment(openingElement) {
+				const element = /** @type {Partial<ESTreeJSX.TSRXJSXOpeningElement>} */ (openingElement);
+				delete element.name;
+				delete element.attributes;
+				delete element.selfClosing;
 				const openingFragment = /** @type {ESTreeJSX.JSXOpeningFragment} */ (
 					/** @type {unknown} */ (openingElement)
 				);
 				openingFragment.type = 'JSXOpeningFragment';
-				delete (/** @type {any} */ (openingFragment).name);
-				delete (/** @type {any} */ (openingFragment).attributes);
-				delete (/** @type {any} */ (openingFragment).selfClosing);
 				return openingFragment;
 			}
 
 			/**
-			 * @param {ESTreeJSX.JSXClosingElement} closingElement
+			 * @param {ESTreeJSX.TSRXJSXClosingElement} closingElement
 			 * @returns {ESTreeJSX.JSXClosingFragment}
 			 */
 			#toClosingFragment(closingElement) {
+				delete (/** @type {Partial<ESTreeJSX.TSRXJSXClosingElement>} */ (closingElement).name);
 				const closingFragment = /** @type {ESTreeJSX.JSXClosingFragment} */ (
 					/** @type {unknown} */ (closingElement)
 				);
 				closingFragment.type = 'JSXClosingFragment';
-				delete (/** @type {any} */ (closingFragment).name);
 				return closingFragment;
 			}
 
@@ -1998,7 +2054,7 @@ export function TSRXPlugin(config) {
 			 * synthesize the closing element, and restore the tokenizer state past it.
 			 * Shared by `<style>` and `<script>`.
 			 *
-			 * @param {ESTreeJSX.JSXOpeningElement & AST.NodeWithLocation} open
+			 * @param {ESTreeJSX.TSRXJSXOpeningElement & AST.NodeWithLocation} open
 			 * @param {AST.JSXStyleElement | AST.TSRXJSXElement} node
 			 * @param {'style' | 'script'} tagName
 			 * @returns {string} The raw body text
@@ -2092,7 +2148,7 @@ export function TSRXPlugin(config) {
 			}
 
 			/**
-			 * @param {ESTreeJSX.JSXOpeningElement & AST.NodeWithLocation} open
+			 * @param {ESTreeJSX.TSRXJSXOpeningElement & AST.NodeWithLocation} open
 			 * @param {AST.JSXStyleElement} node
 			 * @param {boolean} insideHead
 			 */
@@ -2135,7 +2191,7 @@ export function TSRXPlugin(config) {
 			 * `content` directly (the Ripple transforms, the prettier plugin) must skip
 			 * the children instead of emitting both.
 			 *
-			 * @param {ESTreeJSX.JSXOpeningElement & AST.NodeWithLocation} open
+			 * @param {ESTreeJSX.TSRXJSXOpeningElement & AST.NodeWithLocation} open
 			 * @param {AST.TSRXJSXElement} node
 			 */
 			#parseScriptElement(open, node) {
@@ -2680,11 +2736,14 @@ export function TSRXPlugin(config) {
 					return null;
 				}
 
-				const children = Array.isArray(/** @type {any} */ (container).children)
-					? /** @type {any} */ (container).children
+				// A directive's `{ }` block is a native template node too, and it has no
+				// `children`, so read the slot defensively.
+				const container_children = /** @type {{ children?: unknown }} */ (container).children;
+				const children = Array.isArray(container_children)
+					? /** @type {AST.Node[]} */ (container_children)
 					: [];
 				const hasMeaningfulChildren = children.some(
-					(/** @type {any} */ child) => child && !isWhitespaceTextNode(child),
+					(child) => child && !isWhitespaceTextNode(child),
 				);
 
 				if (hasMeaningfulChildren) {
@@ -2718,18 +2777,23 @@ export function TSRXPlugin(config) {
 					// Dynamic tags (`<{Tag}>`) name by expression source. The braces keep
 					// them from colliding with static tag names ('style', 'head', ...) and
 					// read as source syntax in error messages (`</{Tag}>`).
-					const expression = /** @type {AST.Expression} */ (/** @type {any} */ (node).expression);
+					const expression = node.expression;
 					return `{${this.input.slice(expression.start, expression.end).trim()}}`;
 				}
 				return null;
 			}
 
 			/**
-			 * @param {any} name
-			 * @returns {boolean}
+			 * @param {AST.Node | '' | null | undefined} name
+			 * @returns {name is ESTreeJSX.JSXExpressionContainer}
 			 */
 			#isDynamicJSXElementName(name) {
-				return !!(name && name.type === 'JSXExpressionContainer' && name.isDynamic === true);
+				return (
+					!!name &&
+					typeof name !== 'string' &&
+					name.type === 'JSXExpressionContainer' &&
+					name.isDynamic === true
+				);
 			}
 
 			/**
@@ -2738,15 +2802,15 @@ export function TSRXPlugin(config) {
 			 * composed of those. Constructed values (calls, spreads, concatenation,
 			 * interpolation, object/array literals) and static non-string literals
 			 * can never be valid tag names.
-			 * @param {any} expression
+			 * @param {AST.Node | null | undefined} expression
 			 * @returns {boolean}
 			 */
 			#isValidDynamicTagExpression(expression) {
 				let node = expression;
-				while (node && DYNAMIC_TAG_WRAPPER_TYPES.has(node.type)) {
+				while (node && is_dynamic_tag_wrapper(node)) {
 					node = node.expression;
 				}
-				if (!node || node.type?.startsWith?.('JSX')) return false;
+				if (!node || node.type.startsWith('JSX')) return false;
 				if (node.type === 'Identifier') return node.name !== 'undefined';
 				if (node.type === 'Literal') return typeof node.value === 'string';
 				if (node.type === 'UnaryExpression' && node.operator === 'void') return false;
@@ -2754,8 +2818,10 @@ export function TSRXPlugin(config) {
 			}
 
 			/**
-			 * @param {any} node
-			 * @param {Set<any>} [seen]
+			 * Walks every property of the tag expression, so it receives whatever the
+			 * AST holds — nodes, arrays of nodes, and the primitives in between.
+			 * @param {unknown} node
+			 * @param {Set<unknown>} [seen]
 			 * @returns {boolean}
 			 */
 			#containsDisallowedDynamicTagSyntax(node, seen = new Set()) {
@@ -2764,16 +2830,18 @@ export function TSRXPlugin(config) {
 				if (Array.isArray(node)) {
 					return node.some((child) => this.#containsDisallowedDynamicTagSyntax(child, seen));
 				}
+				const ast_node = /** @type {AST.Node} */ (node);
 				if (
-					DYNAMIC_TAG_DISALLOWED_TYPES.has(node.type) ||
-					(node.type === 'TemplateLiteral' && node.expressions.length > 0) ||
-					(node.type === 'BinaryExpression' && node.operator === '+')
+					DYNAMIC_TAG_DISALLOWED_TYPES.has(ast_node.type) ||
+					(ast_node.type === 'TemplateLiteral' && ast_node.expressions.length > 0) ||
+					(ast_node.type === 'BinaryExpression' && ast_node.operator === '+')
 				) {
 					return true;
 				}
-				for (const key of Object.keys(node)) {
+				for (const key of Object.keys(ast_node)) {
 					if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') continue;
-					if (this.#containsDisallowedDynamicTagSyntax(node[key], seen)) return true;
+					const value = /** @type {Record<string, unknown>} */ (ast_node)[key];
+					if (this.#containsDisallowedDynamicTagSyntax(value, seen)) return true;
 				}
 				return false;
 			}
@@ -3411,17 +3479,20 @@ export function TSRXPlugin(config) {
 				let node = /** @type {ESTreeJSX.JSXExpressionContainer} */ (this.startNode());
 				this.#jsxExpressionContainerDepth++;
 				let pushed_context_baseline = false;
-				/** @type {number} */
-				let context_baseline;
+				// The stack depth with the container's `{` brace context on top, taken
+				// before `next()` so the first expression token's own context pushes
+				// (e.g. a fragment's `<` pushing its tag contexts) are not counted.
+				// This is the depth the stack must return to when the container's
+				// closing `}` is the current token.
+				const container_context_depth = this.context.length;
 				try {
 					this.next();
 
-					// Record the context-stack depth now that the container's `{` brace
-					// context is on the stack. A control-flow directive parsed inside this
+					// Record the context-stack depth now that the first expression token
+					// has been read. A control-flow directive parsed inside this
 					// container must not strip anything below this floor (see
 					// `#filterTemplateScriptContexts`).
-					context_baseline = this.context.length;
-					this.#expressionContainerContextBaselines.push(context_baseline);
+					this.#expressionContainerContextBaselines.push(this.context.length);
 					this.#expressionContainerPathBaselines.push(this.#path.length);
 					pushed_context_baseline = true;
 
@@ -3442,13 +3513,14 @@ export function TSRXPlugin(config) {
 						// a snapshot taken inside this container
 						// (`#parseTemplateControlFlowBlock`), so the container's closing `}`
 						// — read while that stale snapshot was active — pops the wrong entry
-						// and leaves stale brace contexts above the enclosing tag's contexts.
-						// Once the `}` has been read the stack must be back at one below the
-						// baseline (the container's own brace context popped); drop anything
-						// above that so the token after `}` (e.g. the `>` finishing the
-						// enclosing opening tag) tokenizes in the right context.
-						if (this.type === tt.braceR && this.context.length >= context_baseline) {
-							this.context.length = context_baseline - 1;
+						// and leaves stale contexts above the enclosing tag's contexts (the
+						// directive's statement brace, or a wrapping fragment's child
+						// context). Once the `}` has been read the stack must be back at one
+						// below the container's depth (its own brace context popped); drop
+						// anything above that so the token after `}` (e.g. the `>` finishing
+						// the enclosing opening tag) tokenizes in the right context.
+						if (this.type === tt.braceR && this.context.length >= container_context_depth) {
+							this.context.length = container_context_depth - 1;
 						}
 						this.expect(tt.braceR);
 					}
@@ -3540,8 +3612,8 @@ export function TSRXPlugin(config) {
 								acorn.getLineInfo(this.input, brace_start + 1),
 							);
 							/** @type {ESTreeJSX.JSXAttribute} */ (node).name = id;
-							/** @type {any} */ (node).value = expression;
-							/** @type {any} */ (node).shorthand = true;
+							/** @type {ESTreeJSX.JSXAttribute} */ (node).value = expression;
+							/** @type {ESTreeJSX.JSXAttribute} */ (node).shorthand = true;
 
 							const end = brace_start + 1;
 							const endLoc = acorn.getLineInfo(this.input, end);
@@ -3613,13 +3685,13 @@ export function TSRXPlugin(config) {
 						);
 						expression.expression = name;
 						/** @type {ESTreeJSX.JSXAttribute} */ (node).name = id;
-						/** @type {any} */ (node).value = this.finishNodeAt(
+						/** @type {ESTreeJSX.JSXAttribute} */ (node).value = this.finishNodeAt(
 							expression,
 							'JSXExpressionContainer',
 							this.end + 1,
 							this.endLoc,
 						);
-						/** @type {any} */ (node).shorthand = true;
+						/** @type {ESTreeJSX.JSXAttribute} */ (node).shorthand = true;
 						this.next();
 						this.expect(tt.braceR);
 						return this.finishNode(node, 'JSXAttribute');
@@ -3727,13 +3799,23 @@ export function TSRXPlugin(config) {
 			/** @type {Parse.Parser['jsx_parseAttributeValue']} */
 			jsx_parseAttributeValue() {
 				switch (this.type) {
-					case tt.braceL:
+					case tt.braceL: {
+						// The host element's `templateMode` is still `'script'` while its
+						// opening tag parses, which would route JSX inside the value
+						// container to the vanilla (non-TSRX) element parser. Clear the
+						// opening node so the container parses exactly like a child-position
+						// `{ … }` container — an inline template value must behave the same
+						// as one assigned to a variable and passed by name.
+						const opening_node = this.#openingNativeTemplateNode;
+						this.#openingNativeTemplateNode = null;
 						this.#jsxAttributeValueExpressionDepth++;
 						try {
 							return this.jsx_parseExpressionContainer();
 						} finally {
 							this.#jsxAttributeValueExpressionDepth--;
+							this.#openingNativeTemplateNode = opening_node;
 						}
+					}
 					case tstt.jsxTagStart:
 					case tt.string:
 						return this.parseExprAtom();
@@ -3992,18 +4074,27 @@ export function TSRXPlugin(config) {
 
 					switch (ch) {
 						case CharCode.equals:
+							// The `allow_inside_expression_container` form keeps `=` (and `=>`)
+							// as text inside a container-nested element's children, matching the
+							// bare-template path — see the default case below.
 							if (
-								!this.#shouldReadTemplateRawTextToken() &&
+								!this.#shouldReadTemplateRawTextToken(true) &&
 								this.input.charCodeAt(this.pos + 1) === CharCode.greaterThan
 							) {
 								this.#resetTokenStartToCurrentPosition();
 								this.pos += 2;
 								return this.finishToken(tt.arrow);
 							}
-							if (this.#shouldReadTemplateRawTextToken()) {
+							if (this.#shouldReadTemplateRawTextToken(true)) {
 								++this.pos;
 								break;
 							}
+							{
+								const accumulated = out + this.input.slice(chunkStart, this.pos);
+								if (this.#shouldFinishAccumulatedTemplateText(accumulated)) {
+									return this.finishToken(tstt.jsxText, accumulated);
+								}
+							}
 							this.#resetTokenStartToCurrentPosition();
 							this.context.push(b_stat);
 							this.exprAllowed = true;
@@ -4182,6 +4273,16 @@ export function TSRXPlugin(config) {
 									++this.pos;
 									break;
 								}
+								// Like `<` and `{` above, a bail boundary (e.g. a directive's `@`)
+								// must first finish accumulated template text — resetting the token
+								// start here would silently drop it from the template. See
+								// `#shouldFinishAccumulatedTemplateText` for which runs qualify.
+								{
+									const accumulated = out + this.input.slice(chunkStart, this.pos);
+									if (this.#shouldFinishAccumulatedTemplateText(accumulated)) {
+										return this.finishToken(tstt.jsxText, accumulated);
+									}
+								}
 								this.#resetTokenStartToCurrentPosition();
 								this.context.push(b_stat);
 								this.exprAllowed = true;
@@ -4225,18 +4326,18 @@ export function TSRXPlugin(config) {
 			 * @type {Parse.Parser['jsx_parseOpeningElementAt']}
 			 */
 			jsx_parseOpeningElementAt(startPos, startLoc) {
-				const node = /** @type {ESTreeJSX.JSXOpeningElement & AST.NodeWithLocation} */ (
+				const node = /** @type {ESTreeJSX.TSRXJSXOpeningElement & AST.NodeWithLocation} */ (
 					this.startNodeAt(/** @type {number} */ (startPos), /** @type {AST.Position} */ (startLoc))
 				);
 				node.attributes = [];
 				const nodeName = this.jsx_parseElementName();
-				if (nodeName) node.name = /** @type {any} */ (nodeName);
+				if (nodeName) node.name = nodeName;
 				if (this.#isDynamicJSXElementName(nodeName)) {
-					/** @type {any} */ (node).isDynamic = true;
+					node.isDynamic = true;
 				}
 				if (this.match(tt.relational) || this.match(tt.bitShift)) {
-					const typeArguments = /** @type {any} */ (this).tsTryParseAndCatch(() =>
-						/** @type {any} */ (this).tsParseTypeArgumentsInExpression(),
+					const typeArguments = this.tsTryParseAndCatch(() =>
+						this.tsParseTypeArgumentsInExpression(),
 					);
 					if (typeArguments) node.typeArguments = typeArguments;
 				}
@@ -4248,19 +4349,23 @@ export function TSRXPlugin(config) {
 				const opening_template_node = this.#openingNativeTemplateNode;
 				let pushed_opening_template_node = false;
 				if (opening_template_node) {
+					// The enclosing `parseElement` started this node before the opening tag
+					// said what it is; stamp its shape now that the tag has been read.
+					const template_node = /** @type {Parse.NativeTemplateNodeSlots} */ (
+						opening_template_node
+					);
 					if (nodeName) {
-						/** @type {any} */ (opening_template_node).type =
+						template_node.type =
 							this.getElementName(nodeName) === 'style' ? 'JSXStyleElement' : 'JSXElement';
-						/** @type {any} */ (opening_template_node).openingElement = node;
-						/** @type {any} */ (opening_template_node).closingElement = null;
+						template_node.openingElement = node;
+						template_node.closingElement = null;
 						if (this.#isDynamicJSXElementName(nodeName)) {
-							/** @type {any} */ (opening_template_node).isDynamic = true;
+							template_node.isDynamic = true;
 						}
 					} else {
-						/** @type {any} */ (opening_template_node).type = 'JSXFragment';
-						/** @type {any} */ (opening_template_node).openingFragment =
-							this.#toOpeningFragment(node);
-						/** @type {any} */ (opening_template_node).closingFragment = null;
+						template_node.type = 'JSXFragment';
+						template_node.openingFragment = this.#toOpeningFragment(node);
+						template_node.closingFragment = null;
 					}
 					this.#path.push(opening_template_node);
 					pushed_opening_template_node = true;
@@ -4276,8 +4381,10 @@ export function TSRXPlugin(config) {
 				if (nodeName) {
 					return this.finishNode(node, 'JSXOpeningElement');
 				}
-				return /** @type {any} */ (
-					/** @type {any} */ (this).finishNode(node, 'JSXOpeningFragment')
+				// `<>` reuses the opening-element node, so finishing it also retypes it.
+				return this.finishNode(
+					/** @type {ESTreeJSX.JSXOpeningFragment} */ (/** @type {unknown} */ (node)),
+					'JSXOpeningFragment',
 				);
 			}
 
@@ -4322,7 +4429,7 @@ export function TSRXPlugin(config) {
 				this.#openingNativeTemplateNode = node;
 				let open;
 				try {
-					open = /** @type {ESTreeJSX.JSXOpeningElement & AST.NodeWithLocation} */ (
+					open = /** @type {ESTreeJSX.TSRXJSXOpeningElement & AST.NodeWithLocation} */ (
 						this.jsx_parseOpeningElementAt(start, position)
 					);
 				} finally {
@@ -4350,24 +4457,24 @@ export function TSRXPlugin(config) {
 					);
 				}
 
+				// The node was started before its opening tag was read, so its shape is
+				// stamped through the under-construction view.
+				const slots = /** @type {Parse.NativeTemplateNodeSlots} */ (node);
 				if (is_fragment) {
-					/** @type {ESTreeJSX.JSXFragment} */ (node).type = 'JSXFragment';
-					/** @type {ESTreeJSX.JSXFragment} */ (node).openingFragment =
-						this.#toOpeningFragment(open);
-					/** @type {any} */ (node).closingFragment = null;
+					slots.type = 'JSXFragment';
+					slots.openingFragment = this.#toOpeningFragment(open);
+					slots.closingFragment = null;
 				} else {
 					if (is_style) {
-						/** @type {AST.JSXStyleElement} */ (node).type = 'JSXStyleElement';
-						/** @type {AST.JSXStyleElement} */ (node).openingElement =
-							/** @type {AST.JSXStyleElement['openingElement']} */ (open);
-						/** @type {AST.JSXStyleElement} */ (node).closingElement =
-							/** @type {AST.JSXStyleElement['closingElement']} */ (null);
+						slots.type = 'JSXStyleElement';
+						slots.openingElement = open;
+						slots.closingElement = null;
 					} else {
-						/** @type {ESTreeJSX.JSXElement} */ (node).type = 'JSXElement';
-						/** @type {ESTreeJSX.JSXElement} */ (node).openingElement = open;
-						/** @type {ESTreeJSX.JSXElement} */ (node).closingElement = null;
+						slots.type = 'JSXElement';
+						slots.openingElement = open;
+						slots.closingElement = null;
 						if (is_dynamic) {
-							/** @type {any} */ (node).isDynamic = true;
+							slots.isDynamic = true;
 						}
 					}
 				}
@@ -4403,7 +4510,7 @@ export function TSRXPlugin(config) {
 							this.start,
 							`Unclosed tag '<${displayTag}>'. Expected '</${displayTag}>' before end of template.`,
 						);
-						/** @type {any} */ (node).unclosed = true;
+						slots.unclosed = true;
 						/** @type {AST.SourceLocation} */ (node.loc).end = {
 							.../** @type {AST.SourceLocation} */ (
 								is_fragment
@@ -4474,7 +4581,7 @@ export function TSRXPlugin(config) {
 						this.curLine = loc.line;
 						this.lineStart = at_index - loc.column;
 					}
-					body.push(/** @type {any} */ (this.#parseCodeBlock()));
+					body.push(this.#parseCodeBlock());
 					this.parseTemplateBody(body);
 					return;
 				}
@@ -4578,8 +4685,7 @@ export function TSRXPlugin(config) {
 							this.#closingNativeTemplateNode = false;
 						}
 						if (closingName) {
-							/** @type {ESTreeJSX.JSXClosingElement} */ (closingNode).name =
-								/** @type {ESTreeJSX.JSXIdentifier} */ (closingName);
+							/** @type {ESTreeJSX.TSRXJSXClosingElement} */ (closingNode).name = closingName;
 						}
 						const current = /** @type {ESTreeJSX.JSXFragment | ESTreeJSX.JSXElement} */ (
 							this.#path[this.#path.length - 1]
@@ -4602,19 +4708,21 @@ export function TSRXPlugin(config) {
 						this.expect(tstt.jsxTagEnd);
 						this.#closingNativeTemplateNode = false;
 						const closingElement =
-							/** @type {ESTreeJSX.JSXClosingElement & AST.NodeWithLocation} */ (
+							/** @type {ESTreeJSX.TSRXJSXClosingElement & AST.NodeWithLocation} */ (
 								this.finishNode(
 									closingNode,
 									closingName ? 'JSXClosingElement' : 'JSXClosingFragment',
 								)
 							);
 						if (this.#isDynamicJSXElementName(closingElement.name)) {
-							/** @type {any} */ (closingElement).isDynamic = true;
+							closingElement.isDynamic = true;
 						}
 						this.exprAllowed = false;
 
 						// Validate that the closing tag matches the opening tag
-						const currentElement = /** @type {any} */ (this.#path[this.#path.length - 1]);
+						const currentElement = /** @type {AST.NativeTSRXTemplateNode} */ (
+							this.#path[this.#path.length - 1]
+						);
 						if (!this.#isNativeTemplateNode(currentElement)) {
 							this.raise(this.start, 'Unexpected closing tag');
 						}
@@ -4648,7 +4756,7 @@ export function TSRXPlugin(config) {
 							// simply an unexpected closing tag (e.g. `<div></span>`).
 							const normalized_closing_name = closingTagName ?? '';
 							const matches_open_element = this.#path.some((node) => {
-								const elem = /** @type {any} */ (node);
+								const elem = /** @type {AST.NativeTSRXTemplateNode} */ (node);
 								if (!this.#isNativeTemplateNode(elem)) return false;
 								const elemName =
 									elem.type === 'JSXFragment'
@@ -4669,7 +4777,9 @@ export function TSRXPlugin(config) {
 							);
 							// Loop through all unclosed elements on the stack
 							while (this.#path.length > 0) {
-								const elem = /** @type {any} */ (this.#path[this.#path.length - 1]);
+								const elem = /** @type {AST.NativeTSRXTemplateNode} */ (
+									this.#path[this.#path.length - 1]
+								);
 
 								// Stop at non-template boundaries.
 								if (!this.#isNativeTemplateNode(elem)) {
@@ -4702,7 +4812,9 @@ export function TSRXPlugin(config) {
 							}
 						}
 
-						const elementToClose = /** @type {any} */ (this.#path[this.#path.length - 1]);
+						const elementToClose = /** @type {AST.NativeTSRXTemplateNode} */ (
+							this.#path[this.#path.length - 1]
+						);
 						if (this.#isNativeTemplateNode(elementToClose)) {
 							const elementToCloseName =
 								elementToClose.type === 'JSXFragment'