@tsrx/core 0.1.24 → 0.1.26

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,
@@ -49,7 +49,6 @@ import {
 	create_style_ref_setup_statements,
 	get_style_element_stylesheet,
 } from '../style-ref.js';
-import { is_function_or_component_node } from '../../utils/ast.js';
 import {
 	is_interleaved_body as is_interleaved_body_core,
 	is_capturable_jsx_child,
@@ -57,10 +56,6 @@ import {
 } from '../jsx-interleave.js';
 import { is_hoist_safe_jsx_node } from '../jsx-hoist.js';
 
-const HOOK_OUTER_ASSIGNMENT_ERROR =
-	'Hook calls inside conditional or repeated TSRX scopes must keep their results local to the generated hook component.';
-const HOOK_CALLBACK_OUTER_MUTATION_ERROR =
-	'Hook callbacks inside conditional or repeated TSRX scopes must not mutate bindings declared outside the generated hook component.';
 const TEMPLATE_FRAGMENT_ERROR =
 	'JSX fragment syntax is not needed in TSRX templates. TSRX renders in immediate mode, so everything is already a fragment. Use `<>...</>` only in expression position.';
 const TSRX_FOR_RETURN_ERROR =
@@ -74,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
@@ -89,44 +86,6 @@ function report_jsx_fragment_in_tsrx_error(node, transform_context) {
 	);
 }
 
-/**
- * @param {AST.Node} node
- * @param {string[]} names
- * @param {string} hook_name
- * @param {TransformContext} transform_context
- * @returns {void}
- */
-function report_hook_outer_assignment_error(node, names, hook_name, transform_context) {
-	const target =
-		names.length === 1 ? `\`${names[0]}\`` : names.map((name) => `\`${name}\``).join(', ');
-	error(
-		`${HOOK_OUTER_ASSIGNMENT_ERROR} The ${hook_name} result is assigned to ${target}, which is declared outside that generated component. Declare the hook result inside the TSRX branch, or move the hook into an explicit child component and pass values with props.`,
-		transform_context.filename,
-		node,
-		transform_context.errors,
-		transform_context.comments,
-	);
-}
-
-/**
- * @param {AST.Node} node
- * @param {string[]} names
- * @param {string} hook_name
- * @param {TransformContext} transform_context
- * @returns {void}
- */
-function report_hook_callback_outer_mutation_error(node, names, hook_name, transform_context) {
-	const target =
-		names.length === 1 ? `\`${names[0]}\`` : names.map((name) => `\`${name}\``).join(', ');
-	error(
-		`${HOOK_CALLBACK_OUTER_MUTATION_ERROR} The ${hook_name} callback mutates ${target}. Read outer values through props or dependencies, and move mutable state into an explicit child component when it needs to change over time.`,
-		transform_context.filename,
-		node,
-		transform_context.errors,
-		transform_context.comments,
-	);
-}
-
 /**
  * Local alias for the shared `JsxTransformContext`. Kept as a typedef so the
  * rest of this file's `@param {TransformContext}` annotations don't all have
@@ -259,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;
 	}
 
@@ -299,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);
 	}
 }
 
@@ -343,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,
@@ -353,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,
@@ -366,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) {
@@ -406,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;
 				}
@@ -505,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 {
@@ -540,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.
@@ -606,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);
 		}
@@ -630,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
@@ -1038,424 +965,54 @@ function is_interleaved_body(body_nodes) {
 }
 
 /**
- * @param {any} node
+ * @param {any[]} body_nodes
  * @param {TransformContext} transform_context
+ * @param {boolean} include_platform_setup
  * @returns {boolean}
  */
-function needs_hook_split(node, transform_context) {
-	const body = node.body?.body || [];
-	return (
-		transform_context.platform.hooks?.componentBodyHookHelpers === true &&
-		node.body?.type === 'BlockStatement' &&
-		(find_hook_split_index(body, transform_context) !== -1 ||
-			body_contains_component_body_branch_hook_return(body, transform_context))
+function body_contains_top_level_hook_call(
+	body_nodes,
+	transform_context,
+	include_platform_setup = false,
+) {
+	return body_nodes.some((node) =>
+		statement_contains_top_level_hook_call(node, transform_context, include_platform_setup),
 	);
 }
 
 /**
  * @param {any} node
  * @param {TransformContext} transform_context
- * @returns {any}
- */
-function create_hook_split_block(node, transform_context) {
-	if (
-		transform_context.platform.hooks?.componentBodyHookHelpers !== true ||
-		!should_extract_hook_helpers(transform_context) ||
-		node.body?.type !== 'BlockStatement'
-	) {
-		return null;
-	}
-
-	const source_body = node.body.body || [];
-	const branch_rewrite = rewrite_component_body_branch_hook_returns(source_body, transform_context);
-	const body = branch_rewrite.body;
-	const split_index = find_hook_split_index(body, transform_context);
-	if (split_index === -1 && !branch_rewrite.changed) {
-		return null;
-	}
-
-	let block_body;
-	if (split_index === -1) {
-		block_body = expand_native_tsrx_return_statement_list(body, transform_context);
-	} else {
-		const split_statement = body[split_index];
-		const continuation_body = body.slice(split_index + 1);
-		const helper = create_hook_safe_helper(
-			expand_native_tsrx_return_statement_list(continuation_body, transform_context),
-			undefined,
-			get_body_source_node(continuation_body) || split_statement,
-			transform_context,
-		);
-
-		block_body = [
-			...body.slice(0, split_index + 1),
-			...helper.setup_statements,
-			set_loc(b.return(helper.component_element), split_statement),
-		];
-	}
-
-	const block = b.block(block_body, node.body);
-	block.metadata = {
-		...(block.metadata || {}),
-		hook_split_block: true,
-	};
-	return block;
-}
-
-/**
- * @param {any[]} body_nodes
- * @param {TransformContext} transform_context
+ * @param {boolean} include_platform_setup
  * @returns {boolean}
  */
-function body_contains_component_body_branch_hook_return(body_nodes, transform_context) {
-	return body_nodes.some((node) =>
-		statement_contains_component_body_branch_hook_return(node, transform_context),
-	);
+function statement_contains_top_level_hook_call(node, transform_context, include_platform_setup) {
+	return node_contains_top_level_hook_call(node, false, transform_context, include_platform_setup);
 }
 
 /**
  * @param {any} node
+ * @param {boolean} inside_nested_function
  * @param {TransformContext} transform_context
+ * @param {boolean} include_platform_setup
  * @returns {boolean}
  */
-function statement_contains_component_body_branch_hook_return(node, transform_context) {
+function node_contains_top_level_hook_call(
+	node,
+	inside_nested_function,
+	transform_context,
+	include_platform_setup,
+) {
 	if (!node || typeof node !== 'object') {
 		return false;
 	}
 
-	if (Array.isArray(node)) {
-		return body_contains_component_body_branch_hook_return(node, transform_context);
-	}
-
-	if (is_function_or_class_boundary(node)) {
-		return false;
-	}
-
-	if (is_plain_if_statement(node)) {
-		return (
-			branch_needs_component_body_hook_helper(node.consequent, transform_context) ||
-			statement_contains_component_body_branch_hook_return(node.consequent, transform_context) ||
-			branch_needs_component_body_hook_helper(node.alternate, transform_context) ||
-			statement_contains_component_body_branch_hook_return(node.alternate, transform_context)
-		);
-	}
-
-	if (node.type === 'BlockStatement') {
-		return body_contains_component_body_branch_hook_return(node.body || [], transform_context);
-	}
-
-	return false;
-}
-
-/**
- * @param {any[]} body_nodes
- * @param {TransformContext} transform_context
- * @returns {{ body: any[], changed: boolean }}
- */
-function rewrite_component_body_branch_hook_returns(body_nodes, transform_context) {
-	let changed = false;
-	const body = body_nodes.map((node) => {
-		const next_node = rewrite_component_body_branch_hook_return_statement(node, transform_context);
-		if (next_node !== node) {
-			changed = true;
-		}
-		return next_node;
-	});
-	return changed ? { body, changed } : { body: body_nodes, changed: false };
-}
-
-/**
- * @param {any} node
- * @param {TransformContext} transform_context
- * @returns {any}
- */
-function rewrite_component_body_branch_hook_return_statement(node, transform_context) {
-	if (!node || typeof node !== 'object' || is_function_or_class_boundary(node)) {
-		return node;
-	}
-
-	if (is_plain_if_statement(node)) {
-		const consequent = rewrite_component_body_hook_return_branch(
-			node.consequent,
-			transform_context,
-		);
-		const alternate = node.alternate
-			? rewrite_component_body_hook_return_branch(node.alternate, transform_context)
-			: { node: node.alternate, changed: false };
-
-		if (!consequent.changed && !alternate.changed) {
-			return node;
-		}
-		return set_loc(b.if(node.test, consequent.node, alternate.node), node);
-	}
-
-	if (node.type === 'BlockStatement') {
-		const rewritten = rewrite_component_body_branch_hook_returns(
-			node.body || [],
-			transform_context,
-		);
-		return rewritten.changed ? set_loc(b.block(rewritten.body, node), node) : node;
-	}
-
-	return node;
-}
-
-/**
- * @param {any} branch
- * @param {TransformContext} transform_context
- * @returns {{ node: any, changed: boolean }}
- */
-function rewrite_component_body_hook_return_branch(branch, transform_context) {
-	if (!branch || typeof branch !== 'object') {
-		return { node: branch, changed: false };
-	}
-
-	if (is_plain_if_statement(branch)) {
-		const next_node = rewrite_component_body_branch_hook_return_statement(
-			branch,
-			transform_context,
-		);
-		return { node: next_node, changed: next_node !== branch };
-	}
-
-	const branch_body = branch.type === 'BlockStatement' ? branch.body || [] : [branch];
-	const rewritten = rewrite_component_body_branch_hook_returns(branch_body, transform_context);
-	const body = rewritten.body;
-	const needs_helper = branch_needs_component_body_hook_helper_body(body, transform_context);
-
-	if (!needs_helper) {
-		if (!rewritten.changed) {
-			return { node: branch, changed: false };
-		}
-		const node =
-			branch.type === 'BlockStatement'
-				? set_loc(b.block(body, branch), branch)
-				: (body[0] ?? branch);
-		return { node, changed: true };
-	}
-
-	const helper_body = expand_native_tsrx_return_statement_list(body, transform_context);
-	const helper = create_hook_safe_helper(
-		helper_body,
-		undefined,
-		get_body_source_node(body) || branch,
-		transform_context,
-	);
-	const node = set_loc(
-		b.block([...helper.setup_statements, set_loc(b.return(helper.component_element), branch)]),
-		branch,
-	);
-	return { node, changed: true };
-}
-
-/**
- * @param {any} branch
- * @param {TransformContext} transform_context
- * @returns {boolean}
- */
-function branch_needs_component_body_hook_helper(branch, transform_context) {
-	if (!branch || typeof branch !== 'object' || is_plain_if_statement(branch)) {
-		return false;
-	}
-	const body = branch.type === 'BlockStatement' ? branch.body || [] : [branch];
-	return branch_needs_component_body_hook_helper_body(body, transform_context);
-}
-
-/**
- * @param {any[]} body
- * @param {TransformContext} transform_context
- * @returns {boolean}
- */
-function branch_needs_component_body_hook_helper_body(body, transform_context) {
-	return (
-		body_has_top_level_component_body_return(body) &&
-		body_contains_direct_top_level_hook_call(body, transform_context, true)
-	);
-}
-
-/**
- * @param {any[]} body
- * @returns {boolean}
- */
-function body_has_top_level_component_body_return(body) {
-	return body.some((node) => node?.type === 'ReturnStatement');
-}
-
-/**
- * @param {any[]} body
- * @param {TransformContext} transform_context
- * @param {boolean} include_platform_setup
- * @returns {boolean}
- */
-function body_contains_direct_top_level_hook_call(body, transform_context, include_platform_setup) {
-	return body.some((node) =>
-		statement_contains_direct_top_level_hook_call(node, transform_context, include_platform_setup),
-	);
-}
-
-/**
- * @param {any} node
- * @param {TransformContext} transform_context
- * @param {boolean} include_platform_setup
- * @returns {boolean}
- */
-function statement_contains_direct_top_level_hook_call(
-	node,
-	transform_context,
-	include_platform_setup,
-) {
-	if (!node || typeof node !== 'object') {
-		return false;
-	}
-
-	if (is_function_or_class_boundary(node)) {
-		return false;
-	}
-
-	if (
-		is_plain_if_statement(node) ||
-		is_switch_control_node(node) ||
-		is_try_control_node(node) ||
-		is_for_of_control_node(node)
-	) {
-		return false;
-	}
-
-	return statement_contains_top_level_hook_call(node, transform_context, include_platform_setup);
-}
-
-/**
- * @param {any[]} body_nodes
- * @param {TransformContext} transform_context
- * @returns {number}
- */
-function find_hook_split_index(body_nodes, transform_context) {
-	for (let i = 0; i < body_nodes.length; i += 1) {
-		if (!is_component_body_conditional_return_statement(body_nodes[i])) {
-			continue;
-		}
-
-		if (body_contains_top_level_hook_call(body_nodes.slice(i + 1), transform_context, true)) {
-			return i;
-		}
-	}
-
-	return -1;
-}
-
-/**
- * @param {any} node
- * @returns {boolean}
- */
-function is_component_body_conditional_return_statement(node) {
-	if (!is_if_control_node(node)) {
-		return false;
-	}
-
-	return (
-		statement_contains_component_body_return(node.consequent) ||
-		statement_contains_component_body_return(node.alternate)
-	);
-}
-
-/**
- * @param {any} node
- * @returns {boolean}
- */
-function statement_contains_component_body_return(node) {
-	if (!node || typeof node !== 'object') {
-		return false;
-	}
-
-	if (node.type === 'ReturnStatement') {
-		return true;
-	}
-
-	if (is_function_or_class_boundary(node)) {
-		return false;
-	}
-
-	if (Array.isArray(node)) {
-		return node.some(statement_contains_component_body_return);
-	}
-
-	if (node.type === 'BlockStatement') {
-		return (node.body || []).some(statement_contains_component_body_return);
-	}
-
-	if (is_if_control_node(node)) {
-		return (
-			statement_contains_component_body_return(node.consequent) ||
-			statement_contains_component_body_return(node.alternate)
-		);
-	}
-
-	if (is_switch_control_node(node)) {
-		return (node.cases || []).some((/** @type {any} */ switch_case) =>
-			statement_contains_component_body_return(switch_case.consequent || []),
-		);
-	}
-
-	if (is_try_control_node(node)) {
-		return (
-			statement_contains_component_body_return(node.block) ||
-			statement_contains_component_body_return(node.handler?.body) ||
-			statement_contains_component_body_return(node.finalizer)
-		);
-	}
-
-	return false;
-}
-
-/**
- * @param {any[]} body_nodes
- * @param {TransformContext} transform_context
- * @param {boolean} include_platform_setup
- * @returns {boolean}
- */
-function body_contains_top_level_hook_call(
-	body_nodes,
-	transform_context,
-	include_platform_setup = false,
-) {
-	return body_nodes.some((node) =>
-		statement_contains_top_level_hook_call(node, transform_context, include_platform_setup),
-	);
-}
-
-/**
- * @param {any} node
- * @param {TransformContext} transform_context
- * @param {boolean} include_platform_setup
- * @returns {boolean}
- */
-function statement_contains_top_level_hook_call(node, transform_context, include_platform_setup) {
-	return node_contains_top_level_hook_call(node, false, transform_context, include_platform_setup);
-}
-
-/**
- * @param {any} node
- * @param {boolean} inside_nested_function
- * @param {TransformContext} transform_context
- * @param {boolean} include_platform_setup
- * @returns {boolean}
- */
-function node_contains_top_level_hook_call(
-	node,
-	inside_nested_function,
-	transform_context,
-	include_platform_setup,
-) {
-	if (!node || typeof node !== 'object') {
-		return false;
-	}
-
-	if (
-		inside_nested_function &&
-		(node.type === 'FunctionDeclaration' ||
-			node.type === 'FunctionExpression' ||
-			node.type === 'ArrowFunctionExpression')
-	) {
+	if (
+		inside_nested_function &&
+		(node.type === 'FunctionDeclaration' ||
+			node.type === 'FunctionExpression' ||
+			node.type === 'ArrowFunctionExpression')
+	) {
 		return false;
 	}
 
@@ -1651,7 +1208,7 @@ function create_generated_helper_metadata(helper_state) {
  * @returns {any}
  */
 function strip_function_transform_metadata(metadata) {
-	const { native_tsrx, hook_split, ...next_metadata } = metadata || {};
+	const { native_tsrx, ...next_metadata } = metadata || {};
 	return next_metadata;
 }
 
@@ -1661,18 +1218,10 @@ function strip_function_transform_metadata(metadata) {
  * @returns {any}
  */
 function transform_block_statement(node, { next, visit, state, path }) {
-	if (node.metadata?.hook_split_block || node.metadata?.native_return_block) {
+	if (node.metadata?.native_return_block) {
 		return next() ?? node;
 	}
 
-	const parent = /** @type {any} */ (path.at(-1));
-	if (parent?.metadata?.hook_split && parent.body === node) {
-		const block = create_hook_split_block(parent, state);
-		if (block) {
-			return visit(block, state);
-		}
-	}
-
 	if (get_active_native_tsrx_function(path)?.metadata?.native_tsrx_body) {
 		const block = create_native_tsrx_statement_list_block(node, state);
 		if (block) {
@@ -1827,7 +1376,6 @@ function transform_native_tsrx_function(node, { next, state }, { nativeBody = fa
 		...(node.metadata || {}),
 		native_tsrx: true,
 		...(nativeBody ? { native_tsrx_body: true } : {}),
-		...(nativeBody && needs_hook_split(node, state) ? { hook_split: true } : {}),
 	};
 	state.available_bindings = merge_binding_maps(
 		saved_bindings,
@@ -1979,6 +1527,10 @@ function find_native_await_in_statement(statement) {
  * @returns {any}
  */
 function transform_function_with_hook_helpers(node, { next, state }) {
+	if (!state.platform.hooks?.moduleScopedHookComponents) {
+		return next() ?? node;
+	}
+
 	const has_hook_bearing_tsrx = function_contains_hook_bearing_tsrx(node, state);
 	if (state.helper_state || !is_uppercase_function_like(node) || !has_hook_bearing_tsrx) {
 		return next() ?? node;
@@ -2844,7 +2396,10 @@ function should_use_module_scoped_hook_components(transform_context) {
  * @returns {boolean}
  */
 function should_extract_hook_helpers(transform_context) {
-	return !!transform_context.hook_helpers_enabled;
+	return !!(
+		transform_context.hook_helpers_enabled &&
+		transform_context.platform.hooks?.moduleScopedHookComponents
+	);
 }
 
 /**
@@ -3406,11 +2961,6 @@ function build_hoisted_for_of_with_hooks(node, transform_context) {
 	for (const param of loop_params) {
 		collect_pattern_bindings(param, transform_context.available_bindings);
 	}
-	validate_hook_safe_body_does_not_assign_hook_results_to_outer_bindings(
-		original_loop_body,
-		transform_context,
-		loop_scoped_names,
-	);
 
 	const all_helper_bindings = get_referenced_helper_bindings(
 		original_loop_body,
@@ -3678,676 +3228,82 @@ function to_jsx_element(
 		? opening_element_node
 		: set_loc(opening_element_node, node.openingElement || node);
 
-	const closingElement = selfClosing
-		? null
-		: set_loc(
-				b.jsx_closing_element(
-					clone_jsx_name(name, node.closingElement?.name || node.closingElement || node),
-				),
-				node.closingElement || node,
-			);
-
-	const element = set_loc(b.jsx_element_fresh(openingElement, closingElement, children), node);
-	if (transform_context.typeOnly && is_style_element(node)) {
-		disable_style_anchor_verification(element);
-	}
-	return element;
-}
-
-/**
- * @param {any[]} children
- * @param {TransformContext} transform_context
- * @returns {any[]}
- */
-
-function create_element_children(children, transform_context) {
-	if (children.length === 0) {
-		return [];
-	}
-
-	if (children.every(is_inline_element_child) && !children_contain_return_semantics(children)) {
-		const saved_inside_element_child = transform_context.inside_element_child;
-		transform_context.inside_element_child = true;
-		try {
-			return children.map((/** @type {any} */ child) => to_jsx_child(child, transform_context));
-		} finally {
-			transform_context.inside_element_child = saved_inside_element_child;
-		}
-	}
-
-	const saved_inside_element_child = transform_context.inside_element_child;
-	transform_context.inside_element_child = true;
-	try {
-		return [statement_body_to_jsx_child(children, transform_context)];
-	} finally {
-		transform_context.inside_element_child = saved_inside_element_child;
-	}
-}
-
-/**
- * @param {any[]} children
- * @returns {boolean}
- */
-function children_contain_return_semantics(children) {
-	return children.some(child_contains_return_semantics);
-}
-
-/**
- * @param {any} node
- * @returns {boolean}
- */
-function child_contains_return_semantics(node) {
-	if (!node || typeof node !== 'object') {
-		return false;
-	}
-
-	if (node.type === 'ReturnStatement') {
-		return true;
-	}
-
-	if (
-		node.type === 'FunctionDeclaration' ||
-		node.type === 'FunctionExpression' ||
-		node.type === 'ArrowFunctionExpression'
-	) {
-		return false;
-	}
-
-	if (Array.isArray(node)) {
-		return node.some(child_contains_return_semantics);
-	}
-
-	for (const key of Object.keys(node)) {
-		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
-			continue;
-		}
-		if (child_contains_return_semantics(node[key])) {
-			return true;
-		}
-	}
-
-	return false;
-}
-
-/**
- * @param {any} node
- * @returns {boolean}
- */
-function is_inline_element_child(node) {
-	return node && is_render_child_node(node);
-}
-
-/**
- * @param {any[]} body_nodes
- * @param {TransformContext} transform_context
- * @returns {ESTreeJSX.JSXExpressionContainer}
- */
-function statement_body_to_jsx_child(body_nodes, transform_context) {
-	if (
-		should_extract_hook_helpers(transform_context) &&
-		body_contains_top_level_hook_call(body_nodes, transform_context, true)
-	) {
-		return hook_safe_statement_body_to_jsx_child(body_nodes, transform_context);
-	}
-
-	return to_jsx_expression_container(
-		b.call(b.arrow([], b.block(build_render_statements(body_nodes, true, transform_context)))),
-	);
-}
-
-/**
- * @param {any[]} body_nodes
- * @param {TransformContext} transform_context
- * @returns {ESTreeJSX.JSXExpressionContainer}
- */
-function hook_safe_statement_body_to_jsx_child(body_nodes, transform_context) {
-	const source_node = get_body_source_node(body_nodes);
-	const helper = create_hook_safe_helper(body_nodes, undefined, source_node, transform_context);
-
-	return to_jsx_expression_container(
-		create_hook_safe_helper_iife(helper.setup_statements, helper.component_element),
-		source_node,
-	);
-}
-
-/**
- * @param {TransformContext} transform_context
- * @returns {string}
- */
-function create_local_statement_component_name(transform_context) {
-	transform_context.local_statement_component_index += 1;
-	return `StatementBodyHook${transform_context.local_statement_component_index}`;
-}
-
-/**
- * Wraps a list of body nodes into a component and returns
- * statements that return `<ComponentName prop1={prop1} ... />`.
- * Targets can either emit the helper component at module scope or cache the
- * component identity in module state while initializing it from the parent.
- * Used when a control flow branch contains hook calls that must be moved
- * into their own component boundary to satisfy the Rules of Hooks.
- *
- * @param {any[]} body_nodes
- * @param {any} key_expression - Optional key expression to add to the component element (for for-of loops)
- * @param {TransformContext} transform_context
- * @returns {any[]}
- */
-function hook_safe_render_statements(body_nodes, key_expression, transform_context) {
-	const source_node = get_body_source_node(body_nodes);
-	const helper = create_hook_safe_helper(
-		body_nodes,
-		key_expression,
-		source_node,
-		transform_context,
-	);
-	const statements = [...helper.setup_statements];
-
-	statements.push(b.return(helper.component_element));
-
-	return statements;
-}
-
-/**
- * @param {any[]} body_nodes
- * @param {Map<string, AST.Identifier>} available_bindings
- * @returns {AST.Identifier[]}
- */
-function get_referenced_helper_bindings(body_nodes, available_bindings) {
-	const helper_bindings = [];
-	const local_bindings = new Map();
-
-	for (const node of body_nodes) {
-		collect_statement_bindings(node, local_bindings);
-	}
-
-	for (const [name, binding] of available_bindings) {
-		if (local_bindings.has(name)) continue;
-
-		if (references_scope_bindings(body_nodes, new Map([[name, binding]]))) {
-			helper_bindings.push(binding);
-		}
-	}
-
-	return helper_bindings;
-}
-
-/**
- * @param {any[]} body_nodes
- * @param {TransformContext} transform_context
- * @param {Set<string>} [local_binding_names]
- * @returns {void}
- */
-function validate_hook_safe_body_does_not_assign_hook_results_to_outer_bindings(
-	body_nodes,
-	transform_context,
-	local_binding_names,
-) {
-	if (!is_react_like_hook_platform(transform_context)) {
-		return;
-	}
-	if (!body_contains_top_level_hook_call(body_nodes, transform_context, true)) {
-		return;
-	}
-	if (!transform_context.available_bindings || transform_context.available_bindings.size === 0) {
-		return;
-	}
-
-	const shadowed_names = collect_block_binding_names(body_nodes);
-	for (const name of local_binding_names || []) {
-		shadowed_names.add(name);
-	}
-	validate_hook_outer_assignments_in_node(body_nodes, shadowed_names, transform_context, new Set());
-}
-
-/**
- * @param {TransformContext} transform_context
- * @returns {boolean}
- */
-function is_react_like_hook_platform(transform_context) {
-	return (
-		transform_context.platform.name === 'React' || transform_context.platform.name === 'Preact'
-	);
-}
-
-/**
- * @param {any[]} statements
- * @returns {Set<string>}
- */
-function collect_block_binding_names(statements) {
-	const names = new Set();
-	for (const statement of statements || []) {
-		collect_block_binding_names_from_statement(statement, names);
-	}
-	return names;
-}
-
-/**
- * @param {any} statement
- * @param {Set<string>} names
- * @returns {void}
- */
-function collect_block_binding_names_from_statement(statement, names) {
-	if (!statement || typeof statement !== 'object') {
-		return;
-	}
-
-	if (statement.type === 'VariableDeclaration') {
-		for (const declaration of statement.declarations || []) {
-			collect_pattern_names(declaration.id, names);
-		}
-		return;
-	}
-
-	if (
-		(statement.type === 'FunctionDeclaration' || statement.type === 'ClassDeclaration') &&
-		statement.id?.type === 'Identifier'
-	) {
-		names.add(statement.id.name);
-		return;
-	}
-
-	if (
-		statement.type === 'ForOfStatement' ||
-		statement.type === 'ForInStatement' ||
-		(statement.type === 'JSXForExpression' &&
-			(statement.statementType === 'ForOfStatement' ||
-				statement.statementType === 'ForInStatement'))
-	) {
-		if (statement.left?.type === 'VariableDeclaration' && statement.left.kind === 'var') {
-			for (const declaration of statement.left.declarations || []) {
-				collect_pattern_names(declaration.id, names);
-			}
-		}
-		return;
-	}
-
-	if (
-		statement.type === 'ForStatement' &&
-		statement.init?.type === 'VariableDeclaration' &&
-		statement.init.kind === 'var'
-	) {
-		for (const declaration of statement.init.declarations || []) {
-			collect_pattern_names(declaration.id, names);
-		}
-	}
-}
-
-/**
- * @param {any} pattern
- * @param {Set<string>} names
- * @returns {void}
- */
-function collect_pattern_names(pattern, names) {
-	if (!pattern || typeof pattern !== 'object') {
-		return;
-	}
-
-	if (pattern.type === 'Identifier') {
-		names.add(pattern.name);
-		return;
-	}
-
-	if (pattern.type === 'RestElement') {
-		collect_pattern_names(pattern.argument, names);
-		return;
-	}
-
-	if (pattern.type === 'AssignmentPattern') {
-		collect_pattern_names(pattern.left, names);
-		return;
-	}
-
-	if (pattern.type === 'ArrayPattern') {
-		for (const element of pattern.elements || []) {
-			collect_pattern_names(element, names);
-		}
-		return;
-	}
-
-	if (pattern.type === 'ObjectPattern') {
-		for (const property of pattern.properties || []) {
-			if (property.type === 'RestElement') {
-				collect_pattern_names(property.argument, names);
-			} else {
-				collect_pattern_names(property.value, names);
-			}
-		}
-	}
-}
-
-/**
- * @param {any} node
- * @param {Set<string>} shadowed_names
- * @param {TransformContext} transform_context
- * @param {Set<string>} hook_result_names
- * @returns {void}
- */
-function validate_hook_outer_assignments_in_node(
-	node,
-	shadowed_names,
-	transform_context,
-	hook_result_names,
-) {
-	if (!node || typeof node !== 'object') {
-		return;
-	}
-
-	if (Array.isArray(node)) {
-		for (const child of node) {
-			validate_hook_outer_assignments_in_node(
-				child,
-				shadowed_names,
-				transform_context,
-				hook_result_names,
-			);
-		}
-		return;
-	}
-
-	if (is_function_or_component_node(node)) {
-		return;
-	}
-
-	if (node.type === 'CallExpression' && is_hook_callee(node.callee)) {
-		validate_hook_callback_outer_mutations(node, shadowed_names, transform_context);
-	}
-
-	if (node.type === 'BlockStatement') {
-		const next_shadowed = new Set(shadowed_names);
-		const next_hook_result_names = new Set(hook_result_names);
-		for (const name of collect_block_binding_names(node.body || [])) {
-			next_shadowed.add(name);
-		}
-		for (const child of node.body || []) {
-			validate_hook_outer_assignments_in_node(
-				child,
-				next_shadowed,
-				transform_context,
-				next_hook_result_names,
-			);
-		}
-		return;
-	}
-
-	if (node.type === 'VariableDeclaration') {
-		for (const declaration of node.declarations || []) {
-			if (
-				declaration.init &&
-				expression_contains_hook_derived_value(
-					declaration.init,
-					transform_context,
-					hook_result_names,
-				)
-			) {
-				collect_pattern_names(declaration.id, hook_result_names);
-			}
-			validate_hook_outer_assignments_in_node(
-				declaration.init,
-				shadowed_names,
-				transform_context,
-				hook_result_names,
-			);
-		}
-		return;
-	}
-
-	if (
-		node.type === 'AssignmentExpression' &&
-		expression_contains_hook_derived_value(node.right, transform_context, hook_result_names)
-	) {
-		const outer_names = get_referenced_outer_binding_names(
-			node.left,
-			transform_context.available_bindings,
-			shadowed_names,
-		);
-		if (outer_names.length > 0) {
-			report_hook_outer_assignment_error(
-				node.left,
-				outer_names,
-				find_first_hook_call_name(node.right) || 'hook',
-				transform_context,
-			);
-		}
-		for (const name of get_referenced_local_binding_names(node.left, shadowed_names)) {
-			hook_result_names.add(name);
-		}
-	}
-
-	if (is_for_of_control_node(node)) {
-		if (
-			node.left &&
-			node.left.type !== 'VariableDeclaration' &&
-			expression_contains_hook_derived_value(node.right, transform_context, hook_result_names)
-		) {
-			const outer_names = get_referenced_outer_binding_names(
-				node.left,
-				transform_context.available_bindings,
-				shadowed_names,
-			);
-			if (outer_names.length > 0) {
-				report_hook_outer_assignment_error(
-					node.left,
-					outer_names,
-					find_first_hook_call_name(node.right) || 'hook',
-					transform_context,
-				);
-			}
-			for (const name of get_referenced_local_binding_names(node.left, shadowed_names)) {
-				hook_result_names.add(name);
-			}
-		}
-
-		validate_hook_outer_assignments_in_node(
-			node.right,
-			shadowed_names,
-			transform_context,
-			hook_result_names,
-		);
-
-		// Loop-declared bindings (`for (const x of …)`, `for (let x of …)`) live
-		// only in the body. They are deliberately NOT in the enclosing block's
-		// shadowed set (see collect_block_binding_names_from_statement), so add
-		// them just for the body recursion to keep references to the loop var
-		// from being flagged as outer-binding mutations.
-		const body_shadowed = new Set(shadowed_names);
-		if (node.left && node.left.type === 'VariableDeclaration') {
-			for (const declaration of node.left.declarations || []) {
-				collect_pattern_names(declaration.id, body_shadowed);
-			}
-		}
-		validate_hook_outer_assignments_in_node(
-			node.body,
-			body_shadowed,
-			transform_context,
-			hook_result_names,
-		);
-		return;
-	}
-
-	for (const key of Object.keys(node)) {
-		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
-			continue;
-		}
-		validate_hook_outer_assignments_in_node(
-			node[key],
-			shadowed_names,
-			transform_context,
-			hook_result_names,
-		);
-	}
-}
-
-/**
- * @param {any} call_node
- * @param {Set<string>} shadowed_names
- * @param {TransformContext} transform_context
- * @returns {void}
- */
-function validate_hook_callback_outer_mutations(call_node, shadowed_names, transform_context) {
-	const hook_name = get_hook_callee_name(call_node.callee);
-	for (const argument of call_node.arguments || []) {
-		if (!is_function_or_component_node(argument)) {
-			continue;
-		}
-		const callback_shadowed_names = create_function_like_shadowed_names(argument, shadowed_names);
-		validate_hook_callback_outer_mutations_in_node(
-			argument.body,
-			callback_shadowed_names,
-			transform_context,
-			hook_name,
-		);
-	}
-}
-
-/**
- * @param {any} node
- * @param {Set<string>} shadowed_names
- * @returns {Set<string>}
- */
-function create_function_like_shadowed_names(node, shadowed_names) {
-	const next_shadowed_names = new Set(shadowed_names);
-	for (const param of node.params || []) {
-		collect_pattern_names(param, next_shadowed_names);
-	}
-	if (node.body?.type === 'BlockStatement') {
-		for (const name of collect_block_binding_names(node.body.body || [])) {
-			next_shadowed_names.add(name);
-		}
-	}
-	return next_shadowed_names;
-}
-
-/**
- * @param {any} node
- * @param {Set<string>} shadowed_names
- * @param {TransformContext} transform_context
- * @param {string} hook_name
- * @returns {void}
- */
-function validate_hook_callback_outer_mutations_in_node(
-	node,
-	shadowed_names,
-	transform_context,
-	hook_name,
-) {
-	if (!node || typeof node !== 'object') {
-		return;
-	}
-
-	if (Array.isArray(node)) {
-		for (const child of node) {
-			validate_hook_callback_outer_mutations_in_node(
-				child,
-				shadowed_names,
-				transform_context,
-				hook_name,
+	const closingElement = selfClosing
+		? null
+		: set_loc(
+				b.jsx_closing_element(
+					// 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,
 			);
-		}
-		return;
-	}
 
-	if (is_function_or_component_node(node)) {
-		validate_hook_callback_outer_mutations_in_node(
-			node.body,
-			create_function_like_shadowed_names(node, shadowed_names),
-			transform_context,
-			hook_name,
-		);
-		return;
+	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 (node.type === 'BlockStatement') {
-		const next_shadowed_names = new Set(shadowed_names);
-		for (const name of collect_block_binding_names(node.body || [])) {
-			next_shadowed_names.add(name);
-		}
-		for (const child of node.body || []) {
-			validate_hook_callback_outer_mutations_in_node(
-				child,
-				next_shadowed_names,
-				transform_context,
-				hook_name,
-			);
-		}
-		return;
+	if (transform_context.typeOnly && is_style_element(node)) {
+		disable_style_anchor_verification(element);
 	}
+	return element;
+}
 
-	if (node.type === 'AssignmentExpression') {
-		const outer_names = get_referenced_outer_binding_names(
-			node.left,
-			transform_context.available_bindings,
-			shadowed_names,
-		);
-		if (outer_names.length > 0) {
-			report_hook_callback_outer_mutation_error(
-				node.left,
-				outer_names,
-				hook_name,
-				transform_context,
-			);
-		}
+/**
+ * @param {any[]} children
+ * @param {TransformContext} transform_context
+ * @returns {any[]}
+ */
+
+function create_element_children(children, transform_context) {
+	if (children.length === 0) {
+		return [];
 	}
 
-	if (node.type === 'UpdateExpression') {
-		const outer_names = get_referenced_outer_binding_names(
-			node.argument,
-			transform_context.available_bindings,
-			shadowed_names,
-		);
-		if (outer_names.length > 0) {
-			report_hook_callback_outer_mutation_error(
-				node.argument,
-				outer_names,
-				hook_name,
-				transform_context,
-			);
+	if (children.every(is_inline_element_child) && !children_contain_return_semantics(children)) {
+		const saved_inside_element_child = transform_context.inside_element_child;
+		transform_context.inside_element_child = true;
+		try {
+			return children.map((/** @type {any} */ child) => to_jsx_child(child, transform_context));
+		} finally {
+			transform_context.inside_element_child = saved_inside_element_child;
 		}
 	}
 
-	for (const key of Object.keys(node)) {
-		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
-			continue;
-		}
-		if (key === 'left' && node.type === 'AssignmentExpression') {
-			continue;
-		}
-		if (key === 'argument' && node.type === 'UpdateExpression') {
-			continue;
-		}
-		validate_hook_callback_outer_mutations_in_node(
-			node[key],
-			shadowed_names,
-			transform_context,
-			hook_name,
-		);
+	const saved_inside_element_child = transform_context.inside_element_child;
+	transform_context.inside_element_child = true;
+	try {
+		return [statement_body_to_jsx_child(children, transform_context)];
+	} finally {
+		transform_context.inside_element_child = saved_inside_element_child;
 	}
 }
 
 /**
- * @param {any} node
- * @param {TransformContext} transform_context
- * @param {Set<string>} hook_result_names
+ * @param {any[]} children
  * @returns {boolean}
  */
-function expression_contains_hook_derived_value(node, transform_context, hook_result_names) {
-	return (
-		node_contains_top_level_hook_call(node, false, transform_context, true) ||
-		references_name_in_set(node, hook_result_names)
-	);
+function children_contain_return_semantics(children) {
+	return children.some(child_contains_return_semantics);
 }
 
 /**
  * @param {any} node
- * @param {Set<string>} names
  * @returns {boolean}
  */
-function references_name_in_set(node, names) {
-	if (!node || typeof node !== 'object' || names.size === 0) {
+function child_contains_return_semantics(node) {
+	if (!node || typeof node !== 'object') {
 		return false;
 	}
 
-	if (node.type === 'Identifier') {
-		return names.has(node.name);
+	if (node.type === 'ReturnStatement') {
+		return true;
 	}
 
 	if (
@@ -4359,20 +3315,14 @@ function references_name_in_set(node, names) {
 	}
 
 	if (Array.isArray(node)) {
-		return node.some((child) => references_name_in_set(child, names));
+		return node.some(child_contains_return_semantics);
 	}
 
 	for (const key of Object.keys(node)) {
 		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
 			continue;
 		}
-		if (key === 'property' && node.type === 'MemberExpression' && !node.computed) {
-			continue;
-		}
-		if (key === 'key' && node.type === 'Property' && !node.computed && !node.shorthand) {
-			continue;
-		}
-		if (references_name_in_set(node[key], names)) {
+		if (child_contains_return_semantics(node[key])) {
 			return true;
 		}
 	}
@@ -4382,162 +3332,104 @@ function references_name_in_set(node, names) {
 
 /**
  * @param {any} node
- * @param {Set<string>} shadowed_names
- * @returns {string[]}
+ * @returns {boolean}
  */
-function get_referenced_local_binding_names(node, shadowed_names) {
-	const names = new Set();
-	collect_referenced_local_binding_names(node, shadowed_names, names);
-	return [...names];
+function is_inline_element_child(node) {
+	return node && is_render_child_node(node);
 }
 
 /**
- * @param {any} node
- * @param {Set<string>} shadowed_names
- * @param {Set<string>} names
- * @returns {void}
+ * @param {any[]} body_nodes
+ * @param {TransformContext} transform_context
+ * @returns {ESTreeJSX.JSXExpressionContainer}
  */
-function collect_referenced_local_binding_names(node, shadowed_names, names) {
-	if (!node || typeof node !== 'object') {
-		return;
+function statement_body_to_jsx_child(body_nodes, transform_context) {
+	if (
+		should_extract_hook_helpers(transform_context) &&
+		body_contains_top_level_hook_call(body_nodes, transform_context, true)
+	) {
+		return hook_safe_statement_body_to_jsx_child(body_nodes, transform_context);
 	}
 
-	if (node.type === 'Identifier') {
-		if (shadowed_names.has(node.name)) {
-			names.add(node.name);
-		}
-		return;
-	}
+	return to_jsx_expression_container(
+		b.call(b.arrow([], b.block(build_render_statements(body_nodes, true, transform_context)))),
+	);
+}
 
-	if (Array.isArray(node)) {
-		for (const child of node) {
-			collect_referenced_local_binding_names(child, shadowed_names, names);
-		}
-		return;
-	}
+/**
+ * @param {any[]} body_nodes
+ * @param {TransformContext} transform_context
+ * @returns {ESTreeJSX.JSXExpressionContainer}
+ */
+function hook_safe_statement_body_to_jsx_child(body_nodes, transform_context) {
+	const source_node = get_body_source_node(body_nodes);
+	const helper = create_hook_safe_helper(body_nodes, undefined, source_node, transform_context);
 
-	for (const key of Object.keys(node)) {
-		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
-			continue;
-		}
-		if (key === 'property' && node.type === 'MemberExpression' && !node.computed) {
-			continue;
-		}
-		if (key === 'key' && node.type === 'Property' && !node.computed && !node.shorthand) {
-			continue;
-		}
-		collect_referenced_local_binding_names(node[key], shadowed_names, names);
-	}
+	return to_jsx_expression_container(
+		create_hook_safe_helper_iife(helper.setup_statements, helper.component_element),
+		source_node,
+	);
 }
 
 /**
- * @param {any} node
- * @param {Map<string, AST.Identifier>} available_bindings
- * @param {Set<string>} shadowed_names
- * @returns {string[]}
+ * @param {TransformContext} transform_context
+ * @returns {string}
  */
-function get_referenced_outer_binding_names(node, available_bindings, shadowed_names) {
-	const names = new Set();
-	collect_referenced_outer_binding_names(node, available_bindings, shadowed_names, names);
-	return [...names];
+function create_local_statement_component_name(transform_context) {
+	transform_context.local_statement_component_index += 1;
+	return `StatementBodyHook${transform_context.local_statement_component_index}`;
 }
 
 /**
- * @param {any} node
- * @param {Map<string, AST.Identifier>} available_bindings
- * @param {Set<string>} shadowed_names
- * @param {Set<string>} names
- * @returns {void}
+ * Wraps a list of body nodes into a component and returns
+ * statements that return `<ComponentName prop1={prop1} ... />`.
+ * Targets can either emit the helper component at module scope or cache the
+ * component identity in module state while initializing it from the parent.
+ * Used when a control flow branch contains hook calls that must be moved
+ * into their own component boundary to satisfy the Rules of Hooks.
+ *
+ * @param {any[]} body_nodes
+ * @param {any} key_expression - Optional key expression to add to the component element (for for-of loops)
+ * @param {TransformContext} transform_context
+ * @returns {any[]}
  */
-function collect_referenced_outer_binding_names(node, available_bindings, shadowed_names, names) {
-	if (!node || typeof node !== 'object') {
-		return;
-	}
-
-	if (node.type === 'Identifier') {
-		if (available_bindings.has(node.name) && !shadowed_names.has(node.name)) {
-			names.add(node.name);
-		}
-		return;
-	}
+function hook_safe_render_statements(body_nodes, key_expression, transform_context) {
+	const source_node = get_body_source_node(body_nodes);
+	const helper = create_hook_safe_helper(
+		body_nodes,
+		key_expression,
+		source_node,
+		transform_context,
+	);
+	const statements = [...helper.setup_statements];
 
-	if (Array.isArray(node)) {
-		for (const child of node) {
-			collect_referenced_outer_binding_names(child, available_bindings, shadowed_names, names);
-		}
-		return;
-	}
+	statements.push(b.return(helper.component_element));
 
-	for (const key of Object.keys(node)) {
-		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
-			continue;
-		}
-		if (key === 'property' && node.type === 'MemberExpression' && !node.computed) {
-			continue;
-		}
-		if (key === 'key' && node.type === 'Property' && !node.computed && !node.shorthand) {
-			continue;
-		}
-		collect_referenced_outer_binding_names(node[key], available_bindings, shadowed_names, names);
-	}
+	return statements;
 }
 
 /**
- * @param {any} node
- * @returns {string | null}
+ * @param {any[]} body_nodes
+ * @param {Map<string, AST.Identifier>} available_bindings
+ * @returns {AST.Identifier[]}
  */
-function find_first_hook_call_name(node) {
-	if (!node || typeof node !== 'object') {
-		return null;
-	}
-
-	if (node.type === 'CallExpression' && is_hook_callee(node.callee)) {
-		return get_hook_callee_name(node.callee);
-	}
+function get_referenced_helper_bindings(body_nodes, available_bindings) {
+	const helper_bindings = [];
+	const local_bindings = new Map();
 
-	if (
-		node.type === 'FunctionDeclaration' ||
-		node.type === 'FunctionExpression' ||
-		node.type === 'ArrowFunctionExpression'
-	) {
-		return null;
+	for (const node of body_nodes) {
+		collect_statement_bindings(node, local_bindings);
 	}
 
-	if (Array.isArray(node)) {
-		for (const child of node) {
-			const name = find_first_hook_call_name(child);
-			if (name) return name;
-		}
-		return null;
-	}
+	for (const [name, binding] of available_bindings) {
+		if (local_bindings.has(name)) continue;
 
-	for (const key of Object.keys(node)) {
-		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') {
-			continue;
+		if (references_scope_bindings(body_nodes, new Map([[name, binding]]))) {
+			helper_bindings.push(binding);
 		}
-		const name = find_first_hook_call_name(node[key]);
-		if (name) return name;
 	}
 
-	return null;
-}
-
-/**
- * @param {any} callee
- * @returns {string}
- */
-function get_hook_callee_name(callee) {
-	if (callee?.type === 'Identifier') {
-		return callee.name;
-	}
-	if (
-		callee?.type === 'MemberExpression' &&
-		!callee.computed &&
-		callee.property?.type === 'Identifier'
-	) {
-		return callee.property.name;
-	}
-	return 'hook';
+	return helper_bindings;
 }
 
 /**
@@ -4558,11 +3450,6 @@ export function create_hook_safe_helper(
 	preallocated_helper_id,
 	options = {},
 ) {
-	validate_hook_safe_body_does_not_assign_hook_results_to_outer_bindings(
-		body_nodes,
-		transform_context,
-	);
-
 	const helper_id =
 		preallocated_helper_id ??
 		create_generated_identifier(create_local_statement_component_name(transform_context));
@@ -4887,14 +3774,6 @@ function is_if_control_node(node) {
 	return node?.type === 'IfStatement' || node?.type === 'JSXIfExpression';
 }
 
-/**
- * @param {any} node
- * @returns {boolean}
- */
-function is_plain_if_statement(node) {
-	return node?.type === 'IfStatement' && !is_template_if_node(node);
-}
-
 /**
  * @param {any} node
  * @returns {boolean}
@@ -4941,17 +3820,6 @@ function is_try_control_node(node) {
 	return node?.type === 'TryStatement' || node?.type === 'JSXTryExpression';
 }
 
-/**
- * @param {any} node
- * @returns {boolean}
- */
-function is_for_of_control_node(node) {
-	return (
-		node?.type === 'ForOfStatement' ||
-		(node?.type === 'JSXForExpression' && node.statementType === 'ForOfStatement')
-	);
-}
-
 /**
  * @param {any} node
  * @param {TransformContext} transform_context
@@ -5902,16 +4770,9 @@ function try_statement_to_jsx_child(node, transform_context) {
 		// correctly identifies references to err/reset as non-static
 		const saved_catch_bindings = transform_context.available_bindings;
 		transform_context.available_bindings = new Map(saved_catch_bindings);
-		const catch_scoped_names = new Set();
 		for (const param of catch_params) {
 			collect_pattern_bindings(param, transform_context.available_bindings);
-			collect_pattern_names(param, catch_scoped_names);
 		}
-		validate_hook_safe_body_does_not_assign_hook_results_to_outer_bindings(
-			catch_body_nodes,
-			transform_context,
-			catch_scoped_names,
-		);
 
 		const fallback_fn = b.arrow(
 			catch_params,
@@ -6904,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') {