@tsrx/core 0.1.22 → 0.1.24

package/src/plugin.js

@@ -16,8 +16,8 @@ import { regex_newline_characters } from './utils/patterns.js';
 import { error } from './errors.js';
 import { DIAGNOSTIC_CODES } from './diagnostics.js';
 import { TSRX_RETURN_STATEMENT_ERROR } from './analyze/validation.js';
-const DYNAMIC_ATTRIBUTE_NAME_ERROR =
-	'Dynamic component / element syntax (`@`) is only supported on native TSRX element names, not attribute names.';
+const FORGOTTEN_STATEMENT_CONTAINER_ERROR =
+	"This function body contains TSRX template output, but it is a normal JavaScript block. Add '@' before the opening brace to use a TSRX statement container.";
 
 const CharCode = Object.freeze({
 	tab: 9,
@@ -256,6 +256,15 @@ export function TSRXPlugin(config) {
 			#allowExpressionContainerTrailingSemicolon = false;
 			#jsxAttributeValueExpressionDepth = 0;
 			#jsxExpressionContainerDepth = 0;
+			// Context-stack length at the start of each open `{ … }` expression container.
+			// A control-flow directive (`@if`/`@for`/…) parsed inside a container strips
+			// JSX contexts so its header/body tokenize as JS; without a floor it would also
+			// strip the enclosing element's and container's contexts (which nothing rebuilds),
+			// underflowing the context stack when the surrounding markup closes. The directive
+			// filter preserves everything below the innermost baseline. See
+			// `#filterTemplateScriptContexts`.
+			/** @type {number[]} */
+			#expressionContainerContextBaselines = [];
 			#consumeContainerBraceAfterScope = false;
 			#scriptJSXElementDepth = 0;
 			#forceScriptJSXElementDepth = 0;
@@ -316,7 +325,7 @@ export function TSRXPlugin(config) {
 			 * 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?: AST.Node }} node
 			 * @param {AST.Node[]} body
 			 * @param {{
 			 *   enterScope?: boolean,
@@ -450,16 +459,6 @@ export function TSRXPlugin(config) {
 				);
 			}
 
-			/**
-			 * @param {any} name
-			 * @returns {boolean}
-			 */
-			#isDynamicJSXElementName(name) {
-				if (!name || typeof name !== 'object') return false;
-				if (name.dynamic === true) return true;
-				return name.type === 'JSXMemberExpression' && this.#isDynamicJSXElementName(name.object);
-			}
-
 			#isInsideNativeTemplateScriptSection() {
 				const node = this.#currentNativeTemplateNode();
 				return !!node && node.metadata?.templateMode !== 'template';
@@ -836,10 +835,7 @@ export function TSRXPlugin(config) {
 				}
 				this.pos = index;
 				if (found_boundary) {
-					this.context = this.context.filter(
-						(context) =>
-							context !== tstc.tc_expr && context !== tstc.tc_oTag && context !== tstc.tc_cTag,
-					);
+					this.#filterTemplateScriptContexts();
 					if (this.curContext() !== b_stat) {
 						this.context.push(b_stat);
 					}
@@ -851,14 +847,22 @@ export function TSRXPlugin(config) {
 				return this.finishNodeAt(node, 'JSXText', index, endLoc);
 			}
 
-			#shouldReadTemplateRawTextToken() {
+			/**
+			 * @param {boolean} [allow_inside_expression_container] When set, do not bail
+			 *   purely because we are inside a `{ … }` expression container. A JSX
+			 *   element nested in a container (e.g. `{<div>   a</div>}`) is still a
+			 *   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.
+			 */
+			#shouldReadTemplateRawTextToken(allow_inside_expression_container = false) {
 				if (
 					this.#closingNativeTemplateNode ||
 					this.#readingJSXControlFlowDirectiveKeyword ||
 					this.#readingJSXControlFlowHeader ||
 					this.#parsingJSXSwitchCaseScriptStatementDepth > 0 ||
 					this.#templateScriptParsingDepth > 0 ||
-					this.#jsxExpressionContainerDepth > 0
+					(!allow_inside_expression_container && this.#jsxExpressionContainerDepth > 0)
 				) {
 					return false;
 				}
@@ -1055,6 +1059,85 @@ export function TSRXPlugin(config) {
 				return false;
 			}
 
+			/**
+			 * @param {AST.Node | null | undefined} node
+			 */
+			#isForgottenStatementContainerOutputNode(node) {
+				return this.#isRenderOutputNode(node) && node?.type !== 'JSXCodeBlock';
+			}
+
+			/**
+			 * @param {AST.Node | null | undefined} node
+			 */
+			#isIgnoredForgottenStatementContainerStatement(node) {
+				return !node || node.type === 'EmptyStatement';
+			}
+
+			/**
+			 * A normal function body that directly contains a bare JSX/control-flow node
+			 * almost always means the author wrote `{ ... <div /> }` but intended
+			 * `@{ ... <div /> }`. Only report when adding `@` would produce a valid
+			 * statement container: setup statements first, followed by one final render
+			 * output. Report only direct body children so ordinary nested callbacks/branches
+			 * are diagnosed by their own function body, not their parent.
+			 * @param {AST.Node} node
+			 */
+			#reportForgottenStatementContainerBody(node) {
+				if (!this.#collect) {
+					return;
+				}
+
+				const body = /** @type {{ body?: AST.Node }} */ (node).body;
+				if (body?.type !== 'BlockStatement') {
+					return;
+				}
+
+				const statements = /** @type {AST.BlockStatement} */ (body).body || [];
+				const has_return_type = Boolean(/** @type {{ returnType?: AST.Node }} */ (node).returnType);
+				if (!has_return_type) {
+					return;
+				}
+
+				let target = null;
+				let target_index = -1;
+				for (let index = 0; index < statements.length; index++) {
+					const statement = statements[index];
+					const output =
+						this.#isForgottenStatementContainerOutputNode(statement) ||
+						(statement.type === 'ExpressionStatement' &&
+							this.#isForgottenStatementContainerOutputNode(statement.expression))
+							? statement
+							: null;
+
+					if (!output) {
+						continue;
+					}
+
+					if (target_index !== -1) {
+						return;
+					}
+					target_index = index;
+					target = output;
+				}
+
+				if (!target) {
+					return;
+				}
+
+				for (const statement of statements.slice(target_index + 1)) {
+					if (!this.#isIgnoredForgottenStatementContainerStatement(statement)) {
+						return;
+					}
+				}
+
+				this.#report_recoverable_error_range(
+					/** @type {number} */ (target.start),
+					/** @type {number} */ (target.end),
+					FORGOTTEN_STATEMENT_CONTAINER_ERROR,
+					DIAGNOSTIC_CODES.FORGOTTEN_STATEMENT_CONTAINER,
+				);
+			}
+
 			/**
 			 * Inside a code block (`@{ … }` or a directive's `{ }`), decides whether the
 			 * next thing is the single bare render node (`<tag …>`, `<>…</>`, or an
@@ -1255,7 +1338,7 @@ export function TSRXPlugin(config) {
 			 * `JSXCodeBlock` whose `body` holds the setup statements and `render` the
 			 * single optional render output (§9).
 			 */
-			#parseCodeBlock() {
+			#parseCodeBlock({ allowReturnStatements = false } = {}) {
 				const start = this.start;
 				const startLoc = this.startLoc;
 				const node = /** @type {AST.JSXCodeBlock} */ (this.startNodeAt(start, startLoc));
@@ -1306,6 +1389,9 @@ export function TSRXPlugin(config) {
 				} else {
 					node.body = /** @type {AST.Statement[]} */ (flat);
 				}
+				if (!allowReturnStatements) {
+					this.#report_invalid_template_return_statements(node.body);
+				}
 
 				if (this.type !== tt.braceR) {
 					this.unexpected();
@@ -1358,6 +1444,25 @@ export function TSRXPlugin(config) {
 				return node;
 			}
 
+			/**
+			 * Drop the JSX tokenizer contexts (`tc_expr`/`tc_oTag`/`tc_cTag`) so the
+			 * directive header/body tokenizes as JavaScript, while preserving every
+			 * context below the innermost open `{ … }` expression container. Those lower
+			 * contexts belong to the enclosing markup (the container brace, the element
+			 * that holds the `{ … }`, any outer fragment); a plain filter would drop them
+			 * too and underflow the context stack when that markup later closes. Outside
+			 * any expression container the baseline is 0, so this matches the original
+			 * "strip everything" behavior the bare-template path relies on.
+			 */
+			#filterTemplateScriptContexts() {
+				const baseline = this.#expressionContainerContextBaselines.at(-1) ?? 0;
+				this.context = this.context.filter(
+					(context, index) =>
+						index < baseline ||
+						(context !== tstc.tc_expr && context !== tstc.tc_oTag && context !== tstc.tc_cTag),
+				);
+			}
+
 			#parseJSXControlFlowExpression() {
 				const start = this.start;
 				const startLoc = this.startLoc;
@@ -1365,6 +1470,13 @@ export function TSRXPlugin(config) {
 				this.pos = keywordStart;
 				this.start = keywordStart;
 				this.startLoc = acorn.getLineInfo(this.input, keywordStart);
+				this.curLine = this.startLoc.line;
+				this.lineStart = keywordStart - this.startLoc.column;
+				this.#filterTemplateScriptContexts();
+				if (this.curContext() !== b_stat) {
+					this.context.push(b_stat);
+				}
+				this.exprAllowed = true;
 				this.#readingJSXControlFlowDirectiveKeyword = true;
 				try {
 					this.nextToken();
@@ -1421,7 +1533,7 @@ export function TSRXPlugin(config) {
 						} finally {
 							this.#templateControlFlowBlockDepth--;
 						}
-					} else if (this.#isUnprefixedDirectiveClauseKeyword('empty')) {
+					} else if (this.#isUnprefixedDirectiveClauseContinuation('empty', ['{'])) {
 						this.raise(this.start, 'Expected `@empty` after `@for` block.');
 					} else {
 						/** @type {any} */ (node).empty = null;
@@ -1471,10 +1583,7 @@ export function TSRXPlugin(config) {
 				this.startLoc = acorn.getLineInfo(this.input, wordStart);
 				this.curLine = this.startLoc.line;
 				this.lineStart = wordStart - this.startLoc.column;
-				this.context = this.context.filter(
-					(context) =>
-						context !== tstc.tc_expr && context !== tstc.tc_oTag && context !== tstc.tc_cTag,
-				);
+				this.#filterTemplateScriptContexts();
 				if (this.curContext() !== b_stat) {
 					this.context.push(b_stat);
 				}
@@ -1510,10 +1619,7 @@ export function TSRXPlugin(config) {
 				this.startLoc = acorn.getLineInfo(this.input, wordStart);
 				this.curLine = this.startLoc.line;
 				this.lineStart = wordStart - this.startLoc.column;
-				this.context = this.context.filter(
-					(context) =>
-						context !== tstc.tc_expr && context !== tstc.tc_oTag && context !== tstc.tc_cTag,
-				);
+				this.#filterTemplateScriptContexts();
 				if (this.curContext() !== b_stat) {
 					this.context.push(b_stat);
 				}
@@ -1529,13 +1635,31 @@ export function TSRXPlugin(config) {
 
 			/**
 			 * @param {string} keyword
+			 * @param {string[]} continuations
 			 */
-			#isUnprefixedDirectiveClauseKeyword(keyword) {
+			#isUnprefixedDirectiveClauseContinuation(keyword, continuations) {
 				const keywordStart = skip_whitespace_from(this.input, this.start);
-				return (
-					this.input.slice(keywordStart, keywordStart + keyword.length) === keyword &&
-					!this.#isIdentifierChar(this.input.charCodeAt(keywordStart + keyword.length))
-				);
+				if (
+					this.input.slice(keywordStart, keywordStart + keyword.length) !== keyword ||
+					this.#isIdentifierChar(this.input.charCodeAt(keywordStart + keyword.length))
+				) {
+					return false;
+				}
+
+				const continuationStart = skip_whitespace_from(this.input, keywordStart + keyword.length);
+				for (const continuation of continuations) {
+					if (continuation.length === 1 && this.input[continuationStart] === continuation) {
+						return true;
+					}
+					if (
+						this.input.slice(continuationStart, continuationStart + continuation.length) ===
+							continuation &&
+						!this.#isIdentifierChar(this.input.charCodeAt(continuationStart + continuation.length))
+					) {
+						return true;
+					}
+				}
+				return false;
 			}
 
 			/**
@@ -1575,7 +1699,7 @@ export function TSRXPlugin(config) {
 					node.alternate = this.#eatJSXDirectiveBareClauseKeyword('if')
 						? this.#parseTemplateIfStatement()
 						: /** @type {AST.Statement} */ (this.#parseTemplateControlFlowStatement());
-				} else if (this.#isUnprefixedDirectiveClauseKeyword('else')) {
+				} else if (this.#isUnprefixedDirectiveClauseContinuation('else', ['{', 'if'])) {
 					this.raise(this.start, 'Expected `@else` after `@if` block.');
 				}
 
@@ -1683,10 +1807,7 @@ export function TSRXPlugin(config) {
 					if (/^return\b/.test(raw)) {
 						this.raise(this.start, '`return` is invalid inside `@switch` cases.');
 					}
-					this.context = this.context.filter(
-						(context) =>
-							context !== tstc.tc_expr && context !== tstc.tc_oTag && context !== tstc.tc_cTag,
-					);
+					this.#filterTemplateScriptContexts();
 					this.pos = this.start;
 					this.startLoc = this.curPosition();
 					if (this.curContext() !== b_stat) {
@@ -1772,10 +1893,7 @@ export function TSRXPlugin(config) {
 				// token contexts so the statement and the following `}`/`case` tokenize as
 				// code.
 				if (this.type !== tstt.jsxText && this.type !== tt.eof) {
-					this.context = this.context.filter(
-						(context) =>
-							context !== tstc.tc_expr && context !== tstc.tc_oTag && context !== tstc.tc_cTag,
-					);
+					this.#filterTemplateScriptContexts();
 					if (this.curContext() !== b_stat) {
 						this.context.push(b_stat);
 					}
@@ -1859,7 +1977,6 @@ export function TSRXPlugin(config) {
 						)
 					);
 					name.name = 'style';
-					name.tracked = false;
 					this.finishNodeAt(
 						name,
 						'JSXIdentifier',
@@ -2054,9 +2171,19 @@ export function TSRXPlugin(config) {
 			#popTokenContextsAfterTemplateExpressionElement(node) {
 				// A fragment in expression position (`() => <>…</>`) leaves the tokenizer
 				// at `exprAllowed === false`, unlike a self-closing element. When the next
-				// token is a `;`, the following statement may legitimately open with a JSX
-				// tag (`<List/>`), so restore expression position to match the element path.
-				if (this.type === tt.semi && node.type === 'JSXFragment') {
+				// token is a `;` or ASI can insert one, the following statement may
+				// legitimately open with a JSX tag (`<List/>`), so restore expression
+				// position to match the element path.
+				if ((this.type === tt.semi || this.canInsertSemicolon()) && node.type === 'JSXFragment') {
+					this.exprAllowed = true;
+				}
+				// A JSX element/fragment used as a ternary consequent (`cond ? <a>…</a> : …`)
+				// likewise leaves the tokenizer at `exprAllowed === false`, so the `<` after
+				// the `:` would not start a tag. Restore expression position so the alternate
+				// branch parses as JSX too. This applies to both elements and fragments,
+				// unlike the `;`/ASI case above (a `:` only follows a value, so the next
+				// token always begins the alternate expression).
+				if (this.type === tt.colon) {
 					this.exprAllowed = true;
 				}
 				const ctx = this.context;
@@ -3038,10 +3165,9 @@ export function TSRXPlugin(config) {
 			parseFunctionBody(node, isArrowFunction, isMethod, forInit, ...args) {
 				this.#functionBodyDepth++;
 				try {
-					// Allow a `@{ … }` code block as the body of a (non-arrow) function or
-					// method, so a component can be written `function Something() @{ … }` or
-					// `{ Render() @{ … } }`. Arrow concise bodies (`() => @{ … }`) already
-					// route through `parseExprAtom`.
+					// Allow a `@{ … }` code block as the body of a function, method, or
+					// arrow function, so components can be written as `function Something()
+					// @{ … }`, `{ Render() @{ … } }`, or `const Something = () => @{ … }`.
 					//
 					// A return-type annotation sits between the params and the body
 					// (`function f(): T @{ … }`). acorn-typescript parses it inside
@@ -3051,13 +3177,15 @@ export function TSRXPlugin(config) {
 					if (!isArrowFunction && this.match(tt.colon)) {
 						node.returnType = this.tsParseTypeOrTypePredicateAnnotation(tt.colon);
 					}
-					if (!isArrowFunction && this.#isCodeBlockStart(this.start)) {
-						node.body = this.parseMaybeAssign(forInit);
+					if (this.#isCodeBlockStart(this.start)) {
+						node.body = this.#parseCodeBlock({ allowReturnStatements: true });
 						this.checkParams(node, false);
 						this.exitScope();
 						return node;
 					}
-					return super.parseFunctionBody(node, isArrowFunction, isMethod, forInit, ...args);
+					const parsed = super.parseFunctionBody(node, isArrowFunction, isMethod, forInit, ...args);
+					this.#reportForgottenStatementContainerBody(parsed);
+					return parsed;
 				} finally {
 					this.#functionBodyDepth--;
 				}
@@ -3077,9 +3205,17 @@ export function TSRXPlugin(config) {
 				this.#consumeContainerBraceAfterScope = false;
 				let node = /** @type {ESTreeJSX.JSXExpressionContainer} */ (this.startNode());
 				this.#jsxExpressionContainerDepth++;
+				let pushed_context_baseline = false;
 				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
+					// container must not strip anything below this floor (see
+					// `#filterTemplateScriptContexts`).
+					this.#expressionContainerContextBaselines.push(this.context.length);
+					pushed_context_baseline = true;
+
 					node.expression =
 						this.type === tt.braceR ? this.jsx_parseEmptyExpression() : this.parseExpression();
 					if (this.#allowExpressionContainerTrailingSemicolon && this.type === tt.semi) {
@@ -3097,6 +3233,9 @@ export function TSRXPlugin(config) {
 					}
 				} finally {
 					this.#jsxExpressionContainerDepth--;
+					if (pushed_context_baseline) {
+						this.#expressionContainerContextBaselines.pop();
+					}
 				}
 
 				if (consumeBraceAfterScope) {
@@ -3162,7 +3301,6 @@ export function TSRXPlugin(config) {
 								this.startNodeAt(name_start, name_start_loc)
 							);
 							id.name = name_value;
-							id.tracked = false;
 							this.finishNodeAt(id, 'JSXIdentifier', name_end, name_end_loc);
 							const name = /** @type {AST.Identifier} */ (
 								this.startNodeAt(name_start, name_start_loc)
@@ -3239,7 +3377,6 @@ export function TSRXPlugin(config) {
 							this.startNodeAt(name_start, name_start_loc)
 						);
 						id.name = name_value;
-						id.tracked = false;
 						this.finishNodeAt(id, 'JSXIdentifier', name_end, name_end_loc);
 						const name = /** @type {AST.Identifier} */ (
 							this.startNodeAt(name_start, name_start_loc)
@@ -3267,16 +3404,6 @@ export function TSRXPlugin(config) {
 					}
 				}
 				/** @type {ESTreeJSX.JSXAttribute} */ (node).name = this.jsx_parseNamespacedName();
-				if (this.#isDynamicJSXElementName(/** @type {ESTreeJSX.JSXAttribute} */ (node).name)) {
-					this.#report_recoverable_error_range(
-						/** @type {AST.NodeWithLocation} */ (node).start,
-						/** @type {AST.NodeWithLocation} */ (/** @type {ESTreeJSX.JSXAttribute} */ (node).name)
-							.end ??
-							node.end ??
-							node.start,
-						DYNAMIC_ATTRIBUTE_NAME_ERROR,
-					);
-				}
 				const value = /** @type {ESTreeJSX.JSXAttribute['value'] | null} */ (
 					this.eat(tt.eq) ? this.jsx_parseAttributeValue() : null
 				);
@@ -3307,18 +3434,7 @@ export function TSRXPlugin(config) {
 			jsx_parseIdentifier() {
 				const node = /** @type {ESTreeJSX.JSXIdentifier} */ (this.startNode());
 
-				if (this.type.label === '@') {
-					this.next(); // consume @
-
-					if (this.type === tt.name || this.type === tstt.jsxName) {
-						node.name = /** @type {string} */ (this.value);
-						/** @type {any} */ (node).dynamic = true;
-						this.next();
-					} else {
-						// Unexpected token after @
-						this.unexpected();
-					}
-				} else if (this.type === tt.name || this.type.keyword || this.type === tstt.jsxName) {
+				if (this.type === tt.name || this.type.keyword || this.type === tstt.jsxName) {
 					node.name = /** @type {string} */ (this.value);
 					this.next();
 				} else {
@@ -3389,7 +3505,7 @@ export function TSRXPlugin(config) {
 			}
 
 			/**
-			 * `@try`/`@pending`/`@catch`/`finally` blocks lower their direct `return`
+			 * `@try`/`@pending`/`@catch` blocks lower their direct `return`
 			 * values into reactive boundary fallbacks, so unlike `@if`/`@for`/`@switch`
 			 * blocks they legitimately allow `return <markup>` statements. Set the flag
 			 * immediately before parsing each such block so its body sees it.
@@ -3413,7 +3529,7 @@ export function TSRXPlugin(config) {
 
 						if (this.#eatJSXDirectiveClauseKeyword('pending')) {
 							node.pending = this.#parseTemplateControlFlowReturnBlock();
-						} else if (this.#isUnprefixedDirectiveClauseKeyword('pending')) {
+						} else if (this.#isUnprefixedDirectiveClauseContinuation('pending', ['{'])) {
 							this.raise(this.start, 'Expected `@pending` after `@try` block.');
 						} else {
 							node.pending = null;
@@ -3432,12 +3548,7 @@ export function TSRXPlugin(config) {
 								this.startLoc = acorn.getLineInfo(this.input, paramStart);
 								this.curLine = this.startLoc.line;
 								this.lineStart = paramStart - this.startLoc.column;
-								this.context = this.context.filter(
-									(context) =>
-										context !== tstc.tc_expr &&
-										context !== tstc.tc_oTag &&
-										context !== tstc.tc_cTag,
-								);
+								this.#filterTemplateScriptContexts();
 								if (this.curContext() !== b_stat) {
 									this.context.push(b_stat);
 								}
@@ -3495,17 +3606,15 @@ export function TSRXPlugin(config) {
 							clause.body = this.#parseTemplateControlFlowReturnBlock(false);
 							this.exitScope();
 							node.handler = this.finishNode(clause, 'CatchClause');
-						} else if (this.#isUnprefixedDirectiveClauseKeyword('catch')) {
+						} else if (this.#isUnprefixedDirectiveClauseContinuation('catch', ['{', '('])) {
 							this.raise(this.start, 'Expected `@catch` after `@try` block.');
 						}
-						node.finalizer = this.eat(tt._finally)
-							? this.#parseTemplateControlFlowReturnBlock()
-							: null;
+						node.finalizer = null;
 
-						if (!node.handler && !node.finalizer && !node.pending) {
+						if (!node.handler && !node.pending) {
 							this.raise(
 								/** @type {AST.NodeWithLocation} */ (node).start,
-								'Missing catch or finally clause',
+								'Missing `@catch` or `@pending` after `@try` block.',
 							);
 						}
 						return this.finishNode(node, 'TryStatement');
@@ -3811,7 +3920,18 @@ export function TSRXPlugin(config) {
 							} else if (ch === CharCode.space || ch === CharCode.tab) {
 								++this.pos;
 							} else {
-								if (this.#shouldReadTemplateRawTextToken()) {
+								// A JSX element nested inside a `{ … }` expression container is
+								// still a template-mode element whose text children are raw JSX
+								// text (e.g. `{<div>   a</div>}`). The default raw-text check bails
+								// for everything inside an expression container, so without the
+								// `allow_inside_expression_container` form the first non-space char
+								// would re-anchor the token start and drop the leading whitespace
+								// this loop already skipped. Keep scanning so the full run —
+								// leading indentation included — is captured, matching the
+								// bare-template path. Directive bodies (`@if`/`@for`/…) inside the
+								// element still fall through to JS tokenization via the other
+								// checks in `#shouldReadTemplateRawTextToken`.
+								if (this.#shouldReadTemplateRawTextToken(true)) {
 									++this.pos;
 									break;
 								}
@@ -3854,32 +3974,6 @@ export function TSRXPlugin(config) {
 				return parsed;
 			}
 
-			/**
-			 * @type {Parse.Parser['jsx_parseElementAt']}
-			 */
-			jsx_parseElementAt(startPos, startLoc) {
-				if (this.input.charCodeAt(startPos + 1) === CharCode.at) {
-					const previous_script_jsx_element_depth = this.#scriptJSXElementDepth;
-					this.#scriptJSXElementDepth = 0;
-					try {
-						const parsed = /** @type {ESTreeJSX.JSXElement} */ (
-							/** @type {unknown} */ (this.parseElement())
-						);
-						// A dynamic `<@tag>` parsed here goes straight through `parseElement`,
-						// bypassing `jsx_parseElement`'s context cleanup. In expression
-						// position (e.g. a render-prop arrow body inside object params) its
-						// markup contexts must be unwound, or the following JS token (a `,`/`}`)
-						// is mis-tokenized as JSX raw text.
-						this.#popTokenContextsAfterTemplateExpressionElement(parsed);
-						return parsed;
-					} finally {
-						this.#scriptJSXElementDepth = previous_script_jsx_element_depth;
-					}
-				}
-
-				return super.jsx_parseElementAt(startPos, startLoc);
-			}
-
 			/**
 			 * @type {Parse.Parser['jsx_parseOpeningElementAt']}
 			 */
@@ -3890,9 +3984,6 @@ export function TSRXPlugin(config) {
 				node.attributes = [];
 				const nodeName = this.jsx_parseElementName();
 				if (nodeName) node.name = nodeName;
-				if (this.#isDynamicJSXElementName(nodeName)) {
-					/** @type {any} */ (node).dynamic = true;
-				}
 				if (this.match(tt.relational) || this.match(tt.bitShift)) {
 					const typeArguments = /** @type {any} */ (this).tsTryParseAndCatch(() =>
 						/** @type {any} */ (this).tsParseTypeArgumentsInExpression(),
@@ -4018,9 +4109,6 @@ export function TSRXPlugin(config) {
 						/** @type {ESTreeJSX.JSXElement} */ (node).type = 'JSXElement';
 						/** @type {ESTreeJSX.JSXElement} */ (node).openingElement = open;
 						/** @type {ESTreeJSX.JSXElement} */ (node).closingElement = null;
-						if (/** @type {any} */ (open).dynamic) {
-							/** @type {any} */ (node).dynamic = true;
-						}
 					}
 				}
 
@@ -4421,6 +4509,18 @@ export function TSRXPlugin(config) {
 					return node;
 				}
 
+				if (
+					this.input.charCodeAt(this.start) === CharCode.at &&
+					(this.#isCodeBlockStart(this.start) || this.#isJSXControlFlowDirectiveStart())
+				) {
+					const node = /** @type {AST.ExpressionStatement} */ (this.startNode());
+					node.expression = /** @type {AST.Expression} */ (this.parseExpression());
+					this.semicolon();
+					return /** @type {AST.ExpressionStatement} */ (
+						this.finishNode(node, 'ExpressionStatement')
+					);
+				}
+
 				// &[ or &{ at statement level — lazy destructuring assignment
 				// e.g., &[data] = track(0); or &{x, y} = obj;
 				if (this.type === tt.bitwiseAND) {

package/src/runtime/html.js

@@ -1,3 +1,3 @@
-export { is_boolean_attribute } from '../utils/dom.js';
+export { is_boolean_attribute, is_void_element } from '../utils/dom.js';
 export { escape, escape_script } from '../utils/escaping.js';
 export { normalize_css_property_name } from '../utils/normalize_css_property_name.js';

package/src/runtime/language-helpers.js

@@ -89,3 +89,42 @@ export function iterable_array_from(iterable, index = 0) {
 	}
 	return result;
 }
+
+/**
+ * Creates a shallow forwarding object without one prop. Values are exposed through
+ * getters so compiler-emitted reactive prop accessors are not snapshotted.
+ * @param {Record<PropertyKey, any> | null | undefined} props
+ * @param {PropertyKey} exclude_prop
+ * @returns {Record<PropertyKey, any>}
+ */
+export function exclude_prop_from_object(props, exclude_prop) {
+	/** @type {Record<PropertyKey, any>} */
+	const next = {};
+	if (props == null) return next;
+
+	for (const prop of Reflect.ownKeys(props)) {
+		if (prop === exclude_prop) continue;
+
+		const descriptor = get_descriptor(props, prop);
+		if (!descriptor?.enumerable) continue;
+
+		/** @type {PropertyDescriptor} */
+		const forwarding_descriptor = {
+			enumerable: true,
+			configurable: true,
+			get() {
+				return props[prop];
+			},
+		};
+
+		if (descriptor.writable === true || typeof descriptor.set === 'function') {
+			forwarding_descriptor.set = (value) => {
+				props[prop] = value;
+			};
+		}
+
+		define_property(next, prop, forwarding_descriptor);
+	}
+
+	return next;
+}