@tsrx/core 0.1.25 → 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.25",
+  "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;
+						}
 					}
 				}
 
@@ -4315,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;

package/src/transform/jsx/index.js

@@ -7,7 +7,6 @@ import { print } from 'esrap';
 import { error } from '../../errors.js';
 import { analyze_css } from '../../analyze/css-analyze.js';
 import { prune_css } from '../../analyze/prune.js';
-import { create_scopes, ScopeRoot } from '../../scope.js';
 import {
 	in_jsx_child_context,
 	set_node_path_metadata,
@@ -15,6 +14,7 @@ import {
 	tsx_with_ts_locations,
 } from './helpers.js';
 import {
+	add_extra_source_mappings_from_matching_expression,
 	clone_expression_node,
 	clone_identifier,
 	clone_jsx_name,
@@ -69,6 +69,8 @@ const TSRX_IF_RETURN_ERROR =
 const TSRX_IF_BREAK_ERROR = 'Break statements are not allowed inside TSRX template @if blocks.';
 const TSRX_IF_CONTINUE_ERROR =
 	'Continue statements are not allowed inside TSRX template @if blocks. Filter before rendering or use conditional output instead.';
+const DYNAMIC_IMPORT_LOCAL = 'TsrxDynamic';
+const DYNAMIC_FACTORY_LOCAL = '_tsrx_dynamic';
 
 /**
  * @param {AST.Node} node
@@ -216,15 +218,32 @@ function wrap_in_native_tsrx_fragment(node) {
  * (`const x = @switch (…) { … }`, `x = @switch (…) { … }`), or a call/`new`
  * argument (`render(@if (…) { … })`) — in a native TSRX fragment.
  * @param {any} node
+ * @param {TransformContext | null} lower_dynamic_context
  * @param {Set<any>} [seen]
  * @returns {void}
  */
-function wrap_control_flow_expression_values(node, seen = new Set()) {
+function wrap_control_flow_expression_values(node, lower_dynamic_context, seen = new Set()) {
 	if (!node || typeof node !== 'object' || seen.has(node)) return;
 	seen.add(node);
 
+	// Dynamic tags on factory platforms must lower before control-flow
+	// conversion and static hoisting run. Production output needs the scoped
+	// `const TsrxDynamic_N = ...` binding declared in the scope that owns the
+	// tag expression (e.g. a `@for` loop variable); type-only output needs
+	// `<TsrxDynamic is={expr}>` in place before a reference-free tree (e.g.
+	// `<{'div'}>`) is hoisted to a module-level static const while still
+	// carrying the raw dynamic tag. Alias lowerings return a replacement
+	// fragment, which is swapped into the child's position here.
+	const lower_child = (/** @type {any} */ child) => {
+		if (!lower_dynamic_context || child?.type !== 'JSXElement') return child;
+		return lower_dynamic_jsx_element(child, lower_dynamic_context) ?? child;
+	};
+
 	if (Array.isArray(node)) {
-		for (const item of node) wrap_control_flow_expression_values(item, seen);
+		for (let i = 0; i < node.length; i++) {
+			node[i] = lower_child(node[i]);
+			wrap_control_flow_expression_values(node[i], lower_dynamic_context, seen);
+		}
 		return;
 	}
 
@@ -256,7 +275,8 @@ function wrap_control_flow_expression_values(node, seen = new Set()) {
 
 	for (const key of Object.keys(node)) {
 		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') continue;
-		wrap_control_flow_expression_values(node[key], seen);
+		node[key] = lower_child(node[key]);
+		wrap_control_flow_expression_values(node[key], lower_dynamic_context, seen);
 	}
 }
 
@@ -300,6 +320,8 @@ export function createJsxTransform(platform) {
 			needs_normalize_spread_props: false,
 			needs_normalize_spread_props_for_ref_attr: false,
 			needs_fragment: false,
+			needs_dynamic_element: false,
+			needs_dynamic_factory: false,
 			needs_for_of_iterable: false,
 			needs_iteration_value_type: false,
 			stylesheets,
@@ -310,7 +332,6 @@ export function createJsxTransform(platform) {
 			hook_helpers_enabled: false,
 			available_bindings: new Map(),
 			lazy_next_id: 0,
-			runtime_dynamic_scopes: null,
 			filename: filename ?? null,
 			source,
 			collect,
@@ -323,10 +344,9 @@ export function createJsxTransform(platform) {
 		};
 
 		expand_child_code_blocks(/** @type {any} */ (ast));
-		wrap_control_flow_expression_values(/** @type {any} */ (ast));
-		transform_context.runtime_dynamic_scopes = create_runtime_dynamic_scopes(
+		wrap_control_flow_expression_values(
 			/** @type {any} */ (ast),
-			transform_context,
+			platform.imports.dynamicFactory ? transform_context : null,
 		);
 
 		if (!transform_context.typeOnly) {
@@ -363,7 +383,15 @@ export function createJsxTransform(platform) {
 				return /** @type {any} */ (wrap_jsx_setup_declarations(expression, in_jsx_child));
 			},
 
-			JSXElement(node, { next, path, state }) {
+			JSXElement(node, { next, path, state, visit }) {
+				const lowered = lower_dynamic_jsx_element(node, state);
+				if (lowered) {
+					// Alias lowerings replace the element with a fragment; factory
+					// platforms normally lower in the pre-walk pass, so this only
+					// covers elements introduced after it.
+					return /** @type {any} */ (visit(lowered, state));
+				}
+
 				if (!node.metadata?.native_tsrx) {
 					return next() ?? node;
 				}
@@ -462,6 +490,7 @@ export function createJsxTransform(platform) {
 			transformed_program.body.unshift(...type_only_style_anchors);
 		}
 		const expanded = expand_component_helpers(transformed_program);
+		inject_dynamic_import(expanded, transform_context);
 		if (platform.hooks?.injectImports) {
 			platform.hooks.injectImports(expanded, transform_context, suspense_source);
 		} else {
@@ -497,6 +526,179 @@ export function createJsxTransform(platform) {
 	return transform;
 }
 
+/**
+ * Lower a single parser-native dynamic tag (`<{expr}>`) into the target runtime
+ * `<Dynamic is={expr}>` helper shape while the existing JSXElement walker is
+ * already visiting it. The dynamic name container travels by reference through
+ * element rebuilds, so checking it covers rebuilt elements too; once lowered,
+ * the name is a plain `JSXIdentifier` and the element is skipped on re-visits.
+ *
+ * The parsed element is never mutated: every lowering builds a fresh
+ * replacement node (an element, or a fragment for the alias lowering) that
+ * the caller must put in the original element's position.
+ *
+ * @param {any} node
+ * @param {TransformContext} transform_context
+ * @returns {ESTreeJSX.JSXElement | ESTreeJSX.JSXFragment | undefined}
+ */
+function lower_dynamic_jsx_element(node, transform_context) {
+	const dynamic_name = node.openingElement?.name;
+	if (dynamic_name?.type !== 'JSXExpressionContainer' || dynamic_name.isDynamic !== true) return;
+
+	// Type-only output always uses the `<TsrxDynamic is={expr}>` component
+	// shape; production output prefers the platform's runtime factory when one
+	// is configured (e.g. Solid's `dynamic`).
+	const factory = transform_context.typeOnly
+		? undefined
+		: transform_context.platform.imports.dynamicFactory;
+	if (!factory && !transform_context.platform.imports.dynamic) return;
+
+	const dynamic_expression = dynamic_name.expression;
+	if (!dynamic_expression) return;
+	const generated_expression = clone_expression_node(dynamic_expression);
+	if (node.closingElement?.name?.expression) {
+		// One generated expression stands in for both tags; record the closing
+		// tag's positions so editor features keep working on `</{expr}>`.
+		add_extra_source_mappings_from_matching_expression(
+			generated_expression,
+			clone_expression_node(node.closingElement.name.expression),
+		);
+	}
+
+	/**
+	 * Rebuild the element as an ordinary component reference named `name_id`,
+	 * carrying the original attributes (after any `extra_attributes`) and
+	 * children over by reference.
+	 *
+	 * @param {ESTreeJSX.JSXIdentifier} name_id
+	 * @param {ESTreeJSX.JSXAttribute[]} [extra_attributes]
+	 * @returns {ESTreeJSX.JSXElement}
+	 */
+	const rebuild_element = (name_id, extra_attributes = []) => {
+		const element = b.jsx_element_fresh(
+			b.jsx_opening_element(
+				name_id,
+				[...extra_attributes, ...(node.openingElement.attributes || [])],
+				node.openingElement.selfClosing,
+				node.openingElement.typeArguments,
+				node.openingElement,
+			),
+			node.closingElement
+				? b.jsx_closing_element(b.jsx_id(name_id.name), node.closingElement)
+				: null,
+			node.children,
+			node,
+		);
+		element.metadata = { ...(node.metadata || {}), path: [] };
+		return element;
+	};
+
+	/**
+	 * Scoped-CSS passes treat lowered dynamic tags like the imported `Dynamic`
+	 * helper: type selectors survive pruning and the scope hash lands on the
+	 * element's class.
+	 *
+	 * @param {ESTreeJSX.JSXElement} element
+	 * @returns {ESTreeJSX.JSXElement}
+	 */
+	const mark_dynamic_element = (element) => {
+		element.metadata.dynamicElement = true;
+		return element;
+	};
+
+	if (factory) {
+		// Bind the tag expression to a scoped component const and reference it
+		// like an ordinary component.
+		transform_context.local_statement_component_index += 1;
+		const local = `${DYNAMIC_IMPORT_LOCAL}_${transform_context.local_statement_component_index}`;
+		const local_id = b.jsx_id(local);
+		transform_context.needs_dynamic_factory = true;
+
+		if (factory.renderBlock) {
+			// Import-free alias inside a reactive render block (Vue): the const
+			// is a plain snapshot and Vapor never re-runs setup, so the whole
+			// element is rebuilt in a native fragment whose expression-container
+			// child holds
+			// `(() => { const TsrxDynamic_1 = expr; return <TsrxDynamic_1 ...>; })()`
+			// — vue-jsx-vapor compiles expression children into `createNodes(...)`
+			// render blocks, which re-run the IIFE when the tag expression
+			// changes. The container is marked so downstream lone-child
+			// collapsing keeps it in expression-child position instead of
+			// unwrapping to a bare call.
+			const element = mark_dynamic_element(rebuild_element(local_id));
+			const wrapper = b.arrow(
+				[],
+				b.block([b.const(b.id(local), generated_expression), b.return(element)], node),
+			);
+			// Lets scoped-CSS collection descend into this generated closure;
+			// user function boundaries are otherwise skipped.
+			wrapper.metadata = /** @type {any} */ ({
+				...(wrapper.metadata || { path: [] }),
+				tsrx_dynamic_wrapper: true,
+			});
+			const container = to_jsx_expression_container(b.call(wrapper), element);
+			container.metadata = /** @type {any} */ ({
+				...(container.metadata || { path: [] }),
+				tsrx_reactive_block: true,
+			});
+
+			return set_loc(wrap_in_native_tsrx_fragment(container), node);
+		}
+
+		// Statement placement: `const TsrxDynamic_1 = ...;` next to the
+		// template. With a factory, the thunk keeps the tag reactive (Solid:
+		// `_tsrx_dynamic(() => expr)`); without one, the plain alias is
+		// re-evaluated by the host's render cycle (React/Preact re-run the
+		// component body). The declaration rides on the name node's metadata:
+		// element rebuilds clone names with a shared metadata reference, so
+		// setup extraction still finds it afterwards.
+		add_jsx_setup_declaration(
+			local_id,
+			b.const(
+				b.id(local),
+				factory.name
+					? b.call(b.id(DYNAMIC_FACTORY_LOCAL), b.arrow([], generated_expression))
+					: generated_expression,
+			),
+		);
+		return mark_dynamic_element(rebuild_element(local_id));
+	}
+
+	transform_context.needs_dynamic_element = true;
+	return mark_dynamic_element(
+		rebuild_element(b.jsx_id(DYNAMIC_IMPORT_LOCAL), [
+			b.jsx_attribute(
+				b.jsx_id('is'),
+				b.jsx_expression_container(generated_expression, dynamic_name),
+				false,
+				dynamic_name,
+			),
+		]),
+	);
+}
+
+/**
+ * @param {AST.Program} program
+ * @param {TransformContext} transform_context
+ * @returns {void}
+ */
+function inject_dynamic_import(program, transform_context) {
+	const factory = transform_context.platform.imports.dynamicFactory;
+	if (transform_context.needs_dynamic_factory && factory?.name && factory.source) {
+		program.body.unshift(
+			b.import_declaration(
+				[b.import_specifier(factory.name, DYNAMIC_FACTORY_LOCAL)],
+				factory.source,
+			),
+		);
+	}
+	const source = transform_context.platform.imports.dynamic;
+	if (!transform_context.needs_dynamic_element || !source) return;
+	program.body.unshift(
+		b.import_declaration([b.import_specifier('Dynamic', DYNAMIC_IMPORT_LOCAL)], source),
+	);
+}
+
 /**
  * Attach selector-location metadata used by editor definitions/hover before
  * the shared scoping pass mutates class attributes with the component hash.
@@ -563,15 +765,18 @@ function collect_css_prunable_elements(value, elements = [], transform_context =
 	}
 
 	if (
-		value.type === 'FunctionDeclaration' ||
-		value.type === 'FunctionExpression' ||
-		value.type === 'ArrowFunctionExpression'
+		(value.type === 'FunctionDeclaration' ||
+			value.type === 'FunctionExpression' ||
+			value.type === 'ArrowFunctionExpression') &&
+		// Generated dynamic-tag wrappers are render-block closures, not user
+		// component boundaries — the element inside still belongs to this
+		// component's scoped CSS.
+		value.metadata?.tsrx_dynamic_wrapper !== true
 	) {
 		return elements;
 	}
 
 	if (value.type === 'JSXElement' && value.metadata?.native_tsrx) {
-		mark_runtime_dynamic_element(value, transform_context);
 		if (!is_style_element(value)) {
 			elements.push(value);
 		}
@@ -587,241 +792,6 @@ function collect_css_prunable_elements(value, elements = [], transform_context =
 	return elements;
 }
 
-/**
- * @param {AST.Program} ast
- * @param {TransformContext} transform_context
- * @returns {Map<any, any> | null}
- */
-function create_runtime_dynamic_scopes(ast, transform_context) {
-	const dynamic_source = transform_context.platform.imports.dynamic;
-	if (!dynamic_source) {
-		return null;
-	}
-	if (!has_runtime_dynamic_import(ast, dynamic_source)) {
-		return null;
-	}
-
-	const { scopes } = create_scopes(ast, new ScopeRoot(), null, {
-		collect: true,
-		errors: [],
-		filename: transform_context.filename ?? '',
-		comments: transform_context.comments,
-	});
-
-	return scopes;
-}
-
-/**
- * @param {any} node
- * @param {TransformContext | null} transform_context
- * @returns {void}
- */
-function mark_runtime_dynamic_element(node, transform_context) {
-	const dynamic_source = transform_context?.platform.imports.dynamic;
-	const scopes = transform_context?.runtime_dynamic_scopes;
-	if (
-		!dynamic_source ||
-		!scopes ||
-		node.metadata?.runtime_dynamic_element === true ||
-		!has_jsx_attribute(node, 'is') ||
-		!is_runtime_dynamic_jsx_name(node.openingElement?.name, scopes.get(node), dynamic_source)
-	) {
-		return;
-	}
-
-	node.metadata.runtime_dynamic_element = true;
-}
-
-/**
- * @param {AST.Program} ast
- * @param {string} dynamic_source
- * @returns {boolean}
- */
-function has_runtime_dynamic_import(ast, dynamic_source) {
-	return ast.body.some(
-		(/** @type {any} */ node) =>
-			node.type === 'ImportDeclaration' &&
-			node.importKind !== 'type' &&
-			node.source?.type === 'Literal' &&
-			node.source.value === dynamic_source &&
-			node.specifiers.some(
-				(/** @type {any} */ specifier) =>
-					is_runtime_dynamic_import_specifier(specifier, 'component') ||
-					is_runtime_dynamic_import_specifier(specifier, 'namespace'),
-			),
-	);
-}
-
-/**
- * @param {any} node
- * @param {string} name
- * @returns {boolean}
- */
-function has_jsx_attribute(node, name) {
-	return (node.openingElement?.attributes ?? []).some(
-		(/** @type {any} */ attr) =>
-			attr.type === 'JSXAttribute' &&
-			attr.name?.type === 'JSXIdentifier' &&
-			attr.name.name === name,
-	);
-}
-
-/**
- * @param {any} name
- * @param {any} scope
- * @param {string} dynamic_source
- * @returns {boolean}
- */
-function is_runtime_dynamic_jsx_name(name, scope, dynamic_source) {
-	if (!scope || !name) {
-		return false;
-	}
-
-	if (name.type === 'JSXIdentifier') {
-		return is_runtime_dynamic_binding(scope.get(name.name), dynamic_source, 'component', new Set());
-	}
-
-	if (
-		name.type === 'JSXMemberExpression' &&
-		name.object?.type === 'JSXIdentifier' &&
-		name.property?.type === 'JSXIdentifier' &&
-		name.property.name === 'Dynamic'
-	) {
-		return is_runtime_dynamic_binding(
-			scope.get(name.object.name),
-			dynamic_source,
-			'namespace',
-			new Set(),
-		);
-	}
-
-	return false;
-}
-
-/**
- * @param {any} binding
- * @param {string} dynamic_source
- * @param {'component' | 'namespace'} kind
- * @param {Set<any>} seen
- * @returns {boolean}
- */
-function is_runtime_dynamic_binding(binding, dynamic_source, kind, seen) {
-	if (!binding || seen.has(binding)) {
-		return false;
-	}
-	seen.add(binding);
-
-	if (is_runtime_dynamic_import_binding(binding, dynamic_source, kind)) {
-		return true;
-	}
-
-	if (binding.reassigned) {
-		return false;
-	}
-
-	const initial = unwrap_reference_expression(binding.initial);
-	if (!initial) {
-		return false;
-	}
-
-	if (initial.type === 'Identifier') {
-		return is_runtime_dynamic_binding(binding.scope.get(initial.name), dynamic_source, kind, seen);
-	}
-
-	if (
-		kind === 'component' &&
-		initial.type === 'MemberExpression' &&
-		!initial.computed &&
-		initial.object?.type === 'Identifier' &&
-		initial.property?.type === 'Identifier' &&
-		initial.property.name === 'Dynamic'
-	) {
-		return is_runtime_dynamic_binding(
-			binding.scope.get(initial.object.name),
-			dynamic_source,
-			'namespace',
-			new Set(),
-		);
-	}
-
-	return false;
-}
-
-/**
- * @param {any} binding
- * @param {string} dynamic_source
- * @param {'component' | 'namespace'} kind
- * @returns {boolean}
- */
-function is_runtime_dynamic_import_binding(binding, dynamic_source, kind) {
-	const declaration = binding?.initial;
-	if (
-		binding?.declaration_kind !== 'import' ||
-		declaration?.type !== 'ImportDeclaration' ||
-		declaration.importKind === 'type' ||
-		declaration.source?.type !== 'Literal' ||
-		declaration.source.value !== dynamic_source
-	) {
-		return false;
-	}
-
-	return declaration.specifiers.some(
-		(/** @type {any} */ specifier) =>
-			specifier.local?.name === binding.node?.name &&
-			is_runtime_dynamic_import_specifier(specifier, kind),
-	);
-}
-
-/**
- * @param {any} specifier
- * @param {'component' | 'namespace'} kind
- * @returns {boolean}
- */
-function is_runtime_dynamic_import_specifier(specifier, kind) {
-	if (kind === 'namespace') {
-		return specifier.type === 'ImportNamespaceSpecifier';
-	}
-	return (
-		specifier.type === 'ImportSpecifier' &&
-		specifier.importKind !== 'type' &&
-		get_imported_name(specifier) === 'Dynamic'
-	);
-}
-
-/**
- * @param {any} specifier
- * @returns {string | null}
- */
-function get_imported_name(specifier) {
-	const imported = specifier.imported;
-	if (imported?.type === 'Identifier') {
-		return imported.name;
-	}
-	if (imported?.type === 'Literal') {
-		return String(imported.value);
-	}
-	return null;
-}
-
-/**
- * @param {any} expression
- * @returns {any}
- */
-function unwrap_reference_expression(expression) {
-	let node = expression;
-	while (
-		node &&
-		(node.type === 'TSAsExpression' ||
-			node.type === 'TSTypeAssertion' ||
-			node.type === 'TSNonNullExpression' ||
-			node.type === 'ParenthesizedExpression' ||
-			node.type === 'ChainExpression')
-	) {
-		node = node.expression;
-	}
-	return node;
-}
-
 /**
  * @param {any[]} body_nodes
  * @param {TransformContext} transform_context
@@ -3262,12 +3232,23 @@ function to_jsx_element(
 		? null
 		: set_loc(
 				b.jsx_closing_element(
-					clone_jsx_name(name, node.closingElement?.name || node.closingElement || node),
+					// Clone from the actual closing name when there is one: a dynamic
+					// tag's closing expression (`</{Tag}>`) has its own source positions,
+					// which editor mappings need.
+					clone_jsx_name(
+						node.closingElement?.name ?? name,
+						node.closingElement?.name || node.closingElement || node,
+					),
 				),
 				node.closingElement || node,
 			);
 
 	const element = set_loc(b.jsx_element_fresh(openingElement, closingElement, children), node);
+	if (node.metadata?.dynamicElement === true) {
+		// Keep lowered dynamic tags recognizable to scoped-CSS passes and the
+		// static-hoist veto after the rebuild.
+		element.metadata.dynamicElement = true;
+	}
 	if (transform_context.typeOnly && is_style_element(node)) {
 		disable_style_anchor_verification(element);
 	}
@@ -5784,6 +5765,12 @@ function build_return_expression(render_nodes) {
 	if (render_nodes.length === 1) {
 		const only = render_nodes[0];
 		if (only.type === 'JSXExpressionContainer') {
+			// Reactive-block containers (dynamic tags) must stay expression
+			// children so the host JSX compiler wraps them in a render block;
+			// returning the bare call would evaluate them once.
+			if (only.metadata?.tsrx_reactive_block === true) {
+				return set_loc(b.jsx_fragment([only]), only.loc ? only : undefined);
+			}
 			return only.expression;
 		}
 		if (only.type === 'JSXText') {

package/src/transform/jsx-hoist.js

@@ -112,6 +112,12 @@ export function is_hoist_safe_jsx_node(node) {
 		return node.children.every(is_hoist_safe_jsx_child);
 	}
 
+	// Lowered dynamic tags reference a component-scoped const and resolve at
+	// runtime — never static, never hoistable.
+	if (/** @type {any} */ (node).metadata?.dynamicElement === true) {
+		return false;
+	}
+
 	return (
 		node.openingElement.attributes.every(is_hoist_safe_jsx_attribute) &&
 		node.children.every(is_hoist_safe_jsx_child)

package/src/transform/jsx-interleave.js

@@ -43,6 +43,10 @@ export function is_interleaved_body(body_nodes, is_jsx_child) {
  */
 export function is_capturable_jsx_child(jsx) {
 	if (!jsx) return false;
+	// Reactive-block containers (dynamic tags) must stay expression children
+	// so the host JSX compiler wraps them in a render block; capturing them
+	// into a const would evaluate them once.
+	if (jsx.metadata?.tsrx_reactive_block === true) return false;
 	const t = jsx.type;
 	return t === 'JSXElement' || t === 'JSXFragment' || t === 'JSXExpressionContainer';
 }

package/src/transform/scoping.js

@@ -75,15 +75,19 @@ export function annotate_with_hash(
 ) {
 	if (!node || typeof node !== 'object') return node;
 	if (
-		node.type === 'FunctionDeclaration' ||
-		node.type === 'FunctionExpression' ||
-		node.type === 'ArrowFunctionExpression'
+		(node.type === 'FunctionDeclaration' ||
+			node.type === 'FunctionExpression' ||
+			node.type === 'ArrowFunctionExpression') &&
+		// Generated dynamic-tag wrappers are render-block closures, not user
+		// component boundaries — the element inside still belongs to this
+		// component's scoped CSS.
+		node.metadata?.tsrx_dynamic_wrapper !== true
 	) {
 		return node;
 	}
 
 	if (node.type === 'JSXElement') {
-		if (!is_composite_jsx_element(node) || node.metadata?.runtime_dynamic_element) {
+		if (!is_composite_jsx_element(node) || node.metadata?.dynamicElement) {
 			add_hash_class_to_jsx_element(node, hash, jsx_class_attr_name);
 		}
 		if (Array.isArray(node.children)) {

package/src/transform/segments.js

@@ -27,6 +27,7 @@
 	generated: string;
 	loc: AST.SourceLocation;
 	metadata: PluginActionOverrides;
+	generatedLoc?: AST.SourceLocation;
 	end_loc?: AST.SourceLocation;
 	sourceLength?: number;
 	mappingData?: Partial<VolarCodeMapping['data']>;
@@ -387,7 +388,8 @@ export function convert_source_map_to_mappings(
 	 * @returns {{ line: number; column: number }}
 	 */
 	function get_generated_position_for_token(token) {
-		const key = `${token.loc.start.line}:${token.loc.start.column}`;
+		const generated_loc = token.generatedLoc ?? token.loc;
+		const key = `${generated_loc.start.line}:${generated_loc.start.column}`;
 		const positions = src_to_gen_map.get(key);
 		if (!positions || positions.length === 0) {
 			throw new Error(`No source map entry for position "${key}"`);
@@ -478,6 +480,32 @@ export function convert_source_map_to_mappings(
 		}
 	}
 
+	/**
+	 * @param {any} generated_node
+	 * @returns {void}
+	 */
+	function add_extra_source_mapping_tokens(generated_node) {
+		if (!generated_node?.loc || !Array.isArray(generated_node.metadata?.extra_source_mappings)) {
+			return;
+		}
+
+		for (const source_node of generated_node.metadata.extra_source_mappings) {
+			if (!source_node?.loc) continue;
+
+			tokens.push({
+				source: source_node.name ?? generated_node.name,
+				generated: generated_node.name,
+				loc: source_node.loc,
+				generatedLoc: generated_node.loc,
+				metadata: {},
+				sourceLength:
+					typeof source_node.start === 'number' && typeof source_node.end === 'number'
+						? source_node.end - source_node.start
+						: undefined,
+			});
+		}
+	}
+
 	// We have to visit everything in generated order to maintain correct indices
 
 	walk(ast, null, {
@@ -521,6 +549,7 @@ export function convert_source_map_to_mappings(
 						token.mappingData = { ...mapping_data, verification: false };
 					}
 					tokens.push(token);
+					add_extra_source_mapping_tokens(node);
 
 					if (Array.isArray(node.metadata?.lazy_param_binding_mappings)) {
 						for (const binding_mapping of node.metadata.lazy_param_binding_mappings) {
@@ -558,6 +587,7 @@ export function convert_source_map_to_mappings(
 						token.mappingData = { ...mapping_data, verification: false };
 					}
 					tokens.push(token);
+					add_extra_source_mapping_tokens(node);
 				}
 				return; // Leaf node, don't traverse further
 			} else if (node.type === 'Literal') {

package/types/index.d.ts

@@ -84,7 +84,7 @@ interface BaseNodeMetaData {
 	parenthesized?: boolean;
 	native_tsrx?: boolean;
 	native_tsrx_template_block?: boolean;
-	runtime_dynamic_element?: boolean;
+	dynamicElement?: boolean;
 	templateMode?: 'script' | 'template';
 	script_only?: boolean;
 	tsrxDirective?: 'if' | 'for' | 'switch' | 'try';
@@ -299,13 +299,14 @@ declare module 'estree' {
 
 	interface Element extends AST.BaseExpression {
 		type: 'Element';
-		id: AST.Identifier | AST.MemberExpression | AST.Literal;
+		id: AST.Expression;
 		attributes: Array<Attribute | SpreadAttribute>;
 		children: AST.Node[];
 		openingElement: ESTreeJSX.JSXOpeningElement;
 		closingElement: ESTreeJSX.JSXClosingElement | null;
 		selfClosing?: boolean;
 		unclosed?: boolean;
+		isDynamic?: boolean;
 		css?: string;
 		metadata: BaseNodeMetaData;
 		start: number;
@@ -727,6 +728,7 @@ declare module 'estree-jsx' {
 	interface JSXExpressionContainer {
 		text?: boolean;
 		style?: boolean;
+		isDynamic?: boolean;
 	}
 
 	interface JSXMemberExpression {

package/types/jsx-platform.d.ts

@@ -39,6 +39,8 @@ export interface JsxTransformContext {
 	needs_normalize_spread_props: boolean;
 	needs_normalize_spread_props_for_ref_attr: boolean;
 	needs_fragment: boolean;
+	needs_dynamic_element: boolean;
+	needs_dynamic_factory: boolean;
 	needs_for_of_iterable: boolean;
 	needs_iteration_value_type: boolean;
 	stylesheets: AST.CSS.StyleSheet[];
@@ -53,8 +55,6 @@ export interface JsxTransformContext {
 	hook_helpers_enabled: boolean;
 	available_bindings: Map<string, AST.Identifier>;
 	lazy_next_id: number;
-	/** Scope map used to resolve runtime Dynamic imports for scoped CSS pruning. */
-	runtime_dynamic_scopes: Map<any, any> | null;
 	inside_element_child?: boolean;
 	/** Full source text for source-aware diagnostics. */
 	source: string;
@@ -316,11 +316,30 @@ export interface JsxPlatform {
 		 */
 		suspense: string;
 		/**
-		 * Module that exports the target runtime `Dynamic` component. When set,
-		 * the shared JSX transform treats imported `Dynamic` elements with an
-		 * `is` prop as runtime-dynamic for scoped CSS pruning.
+		 * Module the type-only transform imports the `Dynamic` component type
+		 * from when lowering dynamic tags to `<TsrxDynamic is={expr}>`. The
+		 * module only needs type declarations; production output never imports
+		 * it.
 		 */
 		dynamic?: string;
+		/**
+		 * Scoped-binding lowering for dynamic tags (`<{expr}>`) in production
+		 * output; each tag binds a scoped component const referenced like an
+		 * ordinary component. With `name`/`source`, the factory is imported as
+		 * `_tsrx_dynamic` and wraps the tag expression in a reactive thunk:
+		 * `const TsrxDynamic_N = _tsrx_dynamic(() => expr);` (Solid:
+		 * `{ name: 'dynamic', source: '@solidjs/web' }`). With an empty object,
+		 * the const is a plain import-free alias re-evaluated by the host's
+		 * render cycle: `const TsrxDynamic_N = expr;` (React/Preact). With
+		 * `renderBlock: true`, the alias and element move inside an
+		 * expression-child IIFE,
+		 * `{(() => { const TsrxDynamic_N = expr; return <TsrxDynamic_N ...>; })()}`,
+		 * relying on the host JSX compiler's reactive render block for
+		 * expression children (Vue Vapor, which never re-runs setup). In
+		 * type-only output, dynamic tags always lower to
+		 * `<TsrxDynamic is={expr}>` imported from `imports.dynamic`.
+		 */
+		dynamicFactory?: { name?: string; source?: string; renderBlock?: boolean };
 		/**
 		 * Module to import `TsrxErrorBoundary` from when an `@try { ... } @catch (...)`
 		 * block appears. Usually `'@tsrx/<platform>/error-boundary'`.

package/types/parse.d.ts

@@ -1621,11 +1621,13 @@ export namespace Parse {
 			| ReturnType<Parser['jsx_parseIdentifier']>;
 
 		/**
-		 * Parse JSX element name (identifier, member, namespaced)
+		 * Parse JSX element name (identifier, member, namespaced, or a dynamic
+		 * `{expression}` container)
 		 */
 		jsx_parseElementName():
 			| ESTreeJSX.JSXMemberExpression
 			| ReturnType<Parser['jsx_parseNamespacedName']>
+			| ESTreeJSX.JSXExpressionContainer
 			| '';
 
 		/**