@tsrx/core 0.1.24 → 0.1.26

package/package.json

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

package/src/analyze/prune.js

@@ -1,4 +1,5 @@
 /** @import * as AST from 'estree' */
+/** @import * as ESTreeJSX from 'estree-jsx' */
 /** @import { Visitors, TopScopedClasses, StyleClasses } from '../../types/index' */
 /** @typedef {0 | 1} Direction */
 
@@ -66,8 +67,14 @@ function get_attribute_value(attribute) {
  * @param {AST.Node} node
  * @returns {boolean}
  */
-function is_runtime_dynamic_element(node) {
-	return node?.metadata?.runtime_dynamic_element === true;
+function is_dynamic_element(node) {
+	// `metadata.dynamicElement` marks lowered dynamic tags; `isDynamic` is the
+	// parser flag on a not-yet-lowered `<{expr}>` element. Both resolve their
+	// tag at runtime, so they can match any type selector.
+	return (
+		node?.metadata?.dynamicElement === true ||
+		/** @type {ESTreeJSX.JSXExpressionContainer} */ (node)?.isDynamic === true
+	);
 }
 
 /**
@@ -390,7 +397,7 @@ function get_descendant_elements(node, adjacent_only) {
  * @returns {boolean}
  */
 function can_render_dynamic_content(element, check_classes = false) {
-	if (is_runtime_dynamic_element(element)) {
+	if (is_dynamic_element(element)) {
 		return true;
 	}
 
@@ -1014,7 +1021,7 @@ function relative_selector_might_apply_to_node(relative_selector, rule, element,
 			}
 
 			case 'TypeSelector': {
-				if (is_runtime_dynamic_element(element)) {
+				if (is_dynamic_element(element)) {
 					break;
 				}
 

package/src/index.js

@@ -173,6 +173,7 @@ export {
 	get_style_element_stylesheet as getStyleElementStylesheet,
 } from './transform/style-ref.js';
 export {
+	add_extra_source_mappings_from_matching_expression,
 	clone_expression_node,
 	clone_identifier,
 	clone_jsx_name,

package/src/plugin.js

@@ -76,6 +76,25 @@ const REGEX_PRECEDING_KEYWORDS = new Set([
 	'throw',
 ]);
 
+// Transparent wrappers to look through when validating a dynamic tag
+// expression (`<{expr}>`), and syntax that disqualifies one outright.
+const DYNAMIC_TAG_WRAPPER_TYPES = new Set([
+	'TSAsExpression',
+	'TSTypeAssertion',
+	'TSNonNullExpression',
+	'ParenthesizedExpression',
+	'ChainExpression',
+]);
+const DYNAMIC_TAG_DISALLOWED_TYPES = new Set([
+	'SpreadElement',
+	'ExperimentalSpreadProperty',
+	'ObjectExpression',
+	'ArrayExpression',
+	'CallExpression',
+	'NewExpression',
+	'TaggedTemplateExpression',
+]);
+
 /** @type {WeakMap<Record<string, boolean>, Map<string, number>>} */
 const argument_clash_first_positions = new WeakMap();
 /** @type {WeakMap<Record<string, boolean>, Set<string>>} */
@@ -1163,6 +1182,7 @@ export function TSRXPlugin(config) {
 					if (next === CharCode.slash) return false;
 					const tagLike =
 						next === CharCode.greaterThan ||
+						next === CharCode.openBrace ||
 						next === CharCode.at ||
 						next === CharCode.dollar ||
 						next === CharCode.underscore ||
@@ -2581,10 +2601,70 @@ export function TSRXPlugin(config) {
 				} else if (node.type === 'MemberExpression' || node.type === 'JSXMemberExpression') {
 					// For components like <Foo.Bar>, return "Foo.Bar"
 					return this.getElementName(node.object) + '.' + this.getElementName(node.property);
+				} else if (this.#isDynamicJSXElementName(node)) {
+					// 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);
+					return `{${this.input.slice(expression.start, expression.end).trim()}}`;
 				}
 				return null;
 			}
 
+			/**
+			 * @param {any} name
+			 * @returns {boolean}
+			 */
+			#isDynamicJSXElementName(name) {
+				return !!(name && name.type === 'JSXExpressionContainer' && name.isDynamic === true);
+			}
+
+			/**
+			 * Dynamic tag expressions must be able to resolve to an element name:
+			 * an identifier, member access, static string, or a runtime expression
+			 * 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
+			 * @returns {boolean}
+			 */
+			#isValidDynamicTagExpression(expression) {
+				let node = expression;
+				while (node && DYNAMIC_TAG_WRAPPER_TYPES.has(node.type)) {
+					node = node.expression;
+				}
+				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;
+				return !this.#containsDisallowedDynamicTagSyntax(node);
+			}
+
+			/**
+			 * @param {any} node
+			 * @param {Set<any>} [seen]
+			 * @returns {boolean}
+			 */
+			#containsDisallowedDynamicTagSyntax(node, seen = new Set()) {
+				if (!node || typeof node !== 'object' || seen.has(node)) return false;
+				seen.add(node);
+				if (Array.isArray(node)) {
+					return node.some((child) => this.#containsDisallowedDynamicTagSyntax(child, seen));
+				}
+				if (
+					DYNAMIC_TAG_DISALLOWED_TYPES.has(node.type) ||
+					(node.type === 'TemplateLiteral' && node.expressions.length > 0) ||
+					(node.type === 'BinaryExpression' && node.operator === '+')
+				) {
+					return true;
+				}
+				for (const key of Object.keys(node)) {
+					if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') continue;
+					if (this.#containsDisallowedDynamicTagSyntax(node[key], seen)) return true;
+				}
+				return false;
+			}
+
 			/**
 			 * `<T,>(x: T) => x` and `<T>(x: T): T => x` should parse as generic
 			 * arrow functions, not JSX elements. acorn-typescript's `readToken`
@@ -2639,6 +2719,7 @@ export function TSRXPlugin(config) {
 					const isTagLikeAfterLt =
 						next === CharCode.slash ||
 						next === CharCode.greaterThan ||
+						next === CharCode.openBrace ||
 						next === CharCode.at ||
 						next === CharCode.dollar ||
 						next === CharCode.underscore ||
@@ -2759,6 +2840,7 @@ export function TSRXPlugin(config) {
 						!isWhitespaceAfterLt &&
 						(nextChar === CharCode.slash ||
 							nextChar === CharCode.greaterThan ||
+							nextChar === CharCode.openBrace ||
 							nextChar === CharCode.at ||
 							nextChar === CharCode.dollar ||
 							nextChar === CharCode.underscore ||
@@ -3444,6 +3526,18 @@ export function TSRXPlugin(config) {
 				return this.finishNode(node, 'JSXIdentifier');
 			}
 
+			#parseJSXDynamicElementName() {
+				const container = this.jsx_parseExpressionContainer();
+				container.isDynamic = true;
+				if (!this.#isValidDynamicTagExpression(container.expression)) {
+					this.raise(
+						/** @type {number} */ (container.expression?.start ?? container.start),
+						'Dynamic element names must be an identifier, member expression, static string, or runtime expression; calls, spreads, string concatenation, string interpolation, and static null, undefined, boolean, number, object, and array literals are not valid tag names.',
+					);
+				}
+				return container;
+			}
+
 			/**
 			 * @type {Parse.Parser['jsx_parseElementName']}
 			 */
@@ -3452,6 +3546,10 @@ export function TSRXPlugin(config) {
 					return '';
 				}
 
+				if (this.type === tt.braceL) {
+					return this.#parseJSXDynamicElementName();
+				}
+
 				let node = this.jsx_parseNamespacedName();
 
 				if (node.type === 'JSXNamespacedName') {
@@ -3983,7 +4081,10 @@ export function TSRXPlugin(config) {
 				);
 				node.attributes = [];
 				const nodeName = this.jsx_parseElementName();
-				if (nodeName) node.name = nodeName;
+				if (nodeName) node.name = /** @type {any} */ (nodeName);
+				if (this.#isDynamicJSXElementName(nodeName)) {
+					/** @type {any} */ (node).isDynamic = true;
+				}
 				if (this.match(tt.relational) || this.match(tt.bitShift)) {
 					const typeArguments = /** @type {any} */ (this).tsTryParseAndCatch(() =>
 						/** @type {any} */ (this).tsParseTypeArgumentsInExpression(),
@@ -4003,6 +4104,9 @@ export function TSRXPlugin(config) {
 							this.getElementName(nodeName) === 'style' ? 'JSXStyleElement' : 'JSXElement';
 						/** @type {any} */ (opening_template_node).openingElement = node;
 						/** @type {any} */ (opening_template_node).closingElement = null;
+						if (this.#isDynamicJSXElementName(nodeName)) {
+							/** @type {any} */ (opening_template_node).isDynamic = true;
+						}
 					} else {
 						/** @type {any} */ (opening_template_node).type = 'JSXFragment';
 						/** @type {any} */ (opening_template_node).openingFragment =
@@ -4076,6 +4180,7 @@ export function TSRXPlugin(config) {
 					this.#openingNativeTemplateNode = previous_opening_native_template_node;
 				}
 				const tag_name = open.name ? this.getElementName(open.name) : null;
+				const is_dynamic = this.#isDynamicJSXElementName(open.name);
 				const is_style = tag_name === 'style';
 				const inside_head = this.#path.findLast((n) => this.#isNativeElementNamed(n, 'head'));
 
@@ -4109,6 +4214,9 @@ export function TSRXPlugin(config) {
 						/** @type {ESTreeJSX.JSXElement} */ (node).type = 'JSXElement';
 						/** @type {ESTreeJSX.JSXElement} */ (node).openingElement = open;
 						/** @type {ESTreeJSX.JSXElement} */ (node).closingElement = null;
+						if (is_dynamic) {
+							/** @type {any} */ (node).isDynamic = true;
+						}
 					}
 				}
 
@@ -4232,7 +4340,36 @@ export function TSRXPlugin(config) {
 						body.push(text);
 					}
 				} else if (this.#isJSXControlFlowDirectiveStart()) {
-					body.push(this.#parseJSXControlFlowExpression());
+					const directive = this.#parseJSXControlFlowExpression();
+					body.push(directive);
+					// `#parseTemplateControlFlowBlock` reads the token after the block's
+					// closing `}` in a code (b_stat) context, which runs `skipSpace()` and
+					// advances `start` past any whitespace. The following token is therefore a
+					// JS token (e.g. the `else` keyword), and when it is actually sibling
+					// template raw text it reaches `#parseTemplateRawText` having lost the
+					// space(s) between `}` and the text (e.g. `@if (x) { … } else` -> the text
+					// "else" instead of " else"). JSX text after a plain element keeps that
+					// whitespace, so when raw text follows and only whitespace was skipped,
+					// rewind `start` to the block's end to re-include the dropped whitespace.
+					const blockEnd = directive.end;
+					const nextCh = this.input.charCodeAt(this.start);
+					const startsRawText =
+						this.type !== tt.eof &&
+						nextCh !== CharCode.lessThan &&
+						nextCh !== CharCode.openBrace &&
+						nextCh !== CharCode.closeBrace &&
+						!this.#isJSXControlFlowDirectiveStart();
+					if (
+						startsRawText &&
+						typeof blockEnd === 'number' &&
+						this.start > blockEnd &&
+						/^\s*$/.test(this.input.slice(blockEnd, this.start))
+					) {
+						const loc = acorn.getLineInfo(this.input, blockEnd);
+						this.pos = blockEnd;
+						this.start = blockEnd;
+						this.startLoc = new acorn.Position(loc.line, loc.column);
+					}
 				} else if (this.type === tt.braceR) {
 					// Leaving a native template body. We may still be in TSX/JSX tokenization
 					// context (e.g. after parsing markup), but the closing `}` is a JS token.
@@ -4259,6 +4396,18 @@ export function TSRXPlugin(config) {
 						this.start = startPos;
 						this.startLoc = startLoc;
 						this.exprAllowed = false;
+						// A genuine `jsxTagStart` pushes `tc_expr` + `tc_oTag` in its
+						// `updateContext`; faking the token here skips those pushes. That is
+						// harmless for an opening tag (the next token is the tag name), but a
+						// closing tag (`</`) immediately runs `context.length -= 2` in the
+						// slash `updateContext`, which would underflow the context stack and
+						// throw "Invalid array length" (e.g. `<>@if (a) { … } done</>`). Push
+						// the two contexts a real `jsxTagStart` would have added so the closing
+						// tag pops its own contexts instead of the enclosing template's.
+						if (this.input.charCodeAt(this.pos) === CharCode.slash) {
+							this.context.push(tstc.tc_expr);
+							this.context.push(tstc.tc_oTag);
+						}
 						this.next();
 					}
 					if (this.value === '/' || this.type === tt.slash) {
@@ -4274,6 +4423,9 @@ export function TSRXPlugin(config) {
 						} finally {
 							this.#closingNativeTemplateNode = false;
 						}
+						if (this.#isDynamicJSXElementName(closingElement.name)) {
+							/** @type {any} */ (closingElement).isDynamic = true;
+						}
 						this.exprAllowed = false;
 
 						// Validate that the closing tag matches the opening tag

package/src/transform/jsx/ast-builders.js

@@ -89,6 +89,33 @@ export function clone_jsx_name(name, source_node = name) {
 	return name;
 }
 
+/**
+ * Record extra source positions on a generated expression so one generated
+ * range can map back to several source ranges. Used for dynamic tags, where
+ * the generated `is={expr}` value stands in for both `<{expr}` and `</{expr}>`;
+ * segments.js turns each recorded node into an additional mapping token.
+ * @param {any} generated
+ * @param {any} source
+ * @returns {void}
+ */
+export function add_extra_source_mappings_from_matching_expression(generated, source) {
+	if (!generated || !source || generated.type !== source.type) return;
+
+	if (generated.type === 'Identifier' || generated.type === 'PrivateIdentifier') {
+		if (!source.loc) return;
+		generated.metadata ??= { path: [] };
+		generated.metadata.extra_source_mappings ??= [];
+		generated.metadata.extra_source_mappings.push(source);
+		return;
+	}
+
+	for (const key of ['expression', 'object', 'property']) {
+		if (generated[key] && source[key]) {
+			add_extra_source_mappings_from_matching_expression(generated[key], source[key]);
+		}
+	}
+}
+
 /**
  * @returns {AST.Literal}
  */

package/src/transform/jsx/helpers.js

@@ -52,7 +52,14 @@ export function tsx_node_to_jsx_expression(node, in_jsx_child = false) {
 		(/** @type {any} */ child) => child.type !== 'JSXText' || child.value.trim() !== '',
 	);
 
-	if (children.length === 1 && children[0].type !== 'JSXText') {
+	if (
+		children.length === 1 &&
+		children[0].type !== 'JSXText' &&
+		// Reactive-block containers (dynamic tags) must stay expression
+		// children so the host JSX compiler wraps them in a render block;
+		// unwrapping to a bare call would evaluate them once.
+		children[0].metadata?.tsrx_reactive_block !== true
+	) {
 		const only = children[0];
 		if (only.type === 'JSXExpressionContainer' && !in_jsx_child) {
 			return only.expression;