@tsrx/core 0.1.22 → 0.1.24

package/src/transform/jsx/index.js

@@ -7,6 +7,7 @@ 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,
@@ -25,7 +26,6 @@ import {
 	is_bare_render_expression,
 	is_component_jsx_name,
 	is_jsx_child,
-	jsx_name_to_expression,
 	set_loc,
 	to_text_expression,
 } from './ast-builders.js';
@@ -64,7 +64,7 @@ const HOOK_CALLBACK_OUTER_MUTATION_ERROR =
 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 =
-	'Return statements are not allowed inside TSRX template for...of loops. Filter the iterable before rendering or use an @for empty fallback for empty lists.';
+	'Return statements are not allowed inside TSRX template for...of loops. Filter the iterable before rendering or use an @empty fallback for empty lists.';
 const TSRX_FOR_BREAK_ERROR =
 	'Break statements are not allowed inside TSRX template for...of loops.';
 const TSRX_FOR_CONTINUE_ERROR =
@@ -223,6 +223,86 @@ function expand_child_code_blocks(node, seen = new Set()) {
 	}
 }
 
+/**
+ * A `@`-prefixed JSX control-flow expression (`@if`/`@for`/`@switch`/`@try`).
+ * These are the only control-flow nodes that can appear in expression position;
+ * the plain statement forms (`IfStatement`, `SwitchStatement`, …) never do.
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_jsx_control_flow_expression(node) {
+	return (
+		node?.type === 'JSXIfExpression' ||
+		node?.type === 'JSXForExpression' ||
+		node?.type === 'JSXSwitchExpression' ||
+		node?.type === 'JSXTryExpression'
+	);
+}
+
+/**
+ * Wrap a render-output node in a native TSRX fragment so it flows through the
+ * same single-child render path as a `<> … </>` output.
+ * @param {any} node
+ * @returns {any}
+ */
+function wrap_in_native_tsrx_fragment(node) {
+	const fragment = b.jsx_fragment([node]);
+	fragment.metadata = { ...(fragment.metadata || {}), native_tsrx: true };
+	return fragment;
+}
+
+/**
+ * Wrap a bare JSX control-flow directive that sits directly in an expression
+ * position — an expression-bodied arrow (`() => @switch (…) { … }`), a
+ * `return @switch (…) { … }`, an unused expression statement,
+ * assignment to a variable
+ * (`const x = @switch (…) { … }`, `x = @switch (…) { … }`), or a call/`new`
+ * argument (`render(@if (…) { … })`) — in a native TSRX fragment.
+ * @param {any} node
+ * @param {Set<any>} [seen]
+ * @returns {void}
+ */
+function wrap_control_flow_expression_values(node, seen = new Set()) {
+	if (!node || typeof node !== 'object' || seen.has(node)) return;
+	seen.add(node);
+
+	if (Array.isArray(node)) {
+		for (const item of node) wrap_control_flow_expression_values(item, seen);
+		return;
+	}
+
+	if (
+		node.type === 'ArrowFunctionExpression' &&
+		node.body?.type !== 'BlockStatement' &&
+		is_jsx_control_flow_expression(node.body)
+	) {
+		node.body = wrap_in_native_tsrx_fragment(node.body);
+	} else if (node.type === 'ReturnStatement' && is_jsx_control_flow_expression(node.argument)) {
+		node.argument = wrap_in_native_tsrx_fragment(node.argument);
+	} else if (
+		node.type === 'ExpressionStatement' &&
+		is_jsx_control_flow_expression(node.expression)
+	) {
+		node.expression = wrap_in_native_tsrx_fragment(node.expression);
+	} else if (node.type === 'VariableDeclarator' && is_jsx_control_flow_expression(node.init)) {
+		node.init = wrap_in_native_tsrx_fragment(node.init);
+	} else if (node.type === 'AssignmentExpression' && is_jsx_control_flow_expression(node.right)) {
+		node.right = wrap_in_native_tsrx_fragment(node.right);
+	} else if (
+		(node.type === 'CallExpression' || node.type === 'NewExpression') &&
+		Array.isArray(node.arguments)
+	) {
+		node.arguments = node.arguments.map((/** @type {any} */ arg) =>
+			is_jsx_control_flow_expression(arg) ? wrap_in_native_tsrx_fragment(arg) : arg,
+		);
+	}
+
+	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);
+	}
+}
+
 /**
  * Build a `transform()` function for a specific JSX platform (React, Preact,
  * Solid). Given a `JsxPlatform` descriptor, returns a transform that lowers
@@ -273,6 +353,7 @@ 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,
@@ -285,6 +366,11 @@ 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(
+			/** @type {any} */ (ast),
+			transform_context,
+		);
 
 		if (!transform_context.typeOnly) {
 			preallocate_lazy_ids(/** @type {any} */ (ast), transform_context);
@@ -321,10 +407,6 @@ export function createJsxTransform(platform) {
 			},
 
 			JSXElement(node, { next, path, state }) {
-				if (!node.metadata?.native_tsrx && is_dynamic_jsx_element(node)) {
-					return dynamic_element_to_jsx(node, state, in_jsx_child_context(path));
-				}
-
 				if (!node.metadata?.native_tsrx) {
 					return next() ?? node;
 				}
@@ -464,16 +546,26 @@ export function createJsxTransform(platform) {
  *
  * @param {any} component
  * @param {any} css
+ * @param {TransformContext} transform_context
  * @param {boolean} [export_top_scoped_classes]
  * @returns {void}
  */
-function apply_css_definition_metadata(component, css, export_top_scoped_classes = false) {
+function apply_css_definition_metadata(
+	component,
+	css,
+	transform_context,
+	export_top_scoped_classes = false,
+) {
 	analyze_css(css);
 
 	const metadata = component.metadata || (component.metadata = { path: [] });
 	const style_classes = metadata.styleClasses || (metadata.styleClasses = new Map());
 	const top_scoped_classes = metadata.topScopedClasses || new Map();
-	const elements = collect_css_prunable_elements(component.body || component.children || []);
+	const elements = collect_css_prunable_elements(
+		component.body || component.children || [],
+		[],
+		transform_context,
+	);
 
 	const prune = () => {
 		for (const element of elements) {
@@ -498,16 +590,17 @@ function apply_css_definition_metadata(component, css, export_top_scoped_classes
 /**
  * @param {any} value
  * @param {any[]} [elements]
+ * @param {TransformContext | null} [transform_context]
  * @returns {any[]}
  */
-function collect_css_prunable_elements(value, elements = []) {
+function collect_css_prunable_elements(value, elements = [], transform_context = null) {
 	if (!value || typeof value !== 'object') {
 		return elements;
 	}
 
 	if (Array.isArray(value)) {
 		for (const child of value) {
-			collect_css_prunable_elements(child, elements);
+			collect_css_prunable_elements(child, elements, transform_context);
 		}
 		return elements;
 	}
@@ -521,6 +614,7 @@ function collect_css_prunable_elements(value, elements = []) {
 	}
 
 	if (value.type === 'JSXElement' && value.metadata?.native_tsrx) {
+		mark_runtime_dynamic_element(value, transform_context);
 		if (!is_style_element(value)) {
 			elements.push(value);
 		}
@@ -530,12 +624,247 @@ function collect_css_prunable_elements(value, elements = []) {
 		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata' || key === 'css') {
 			continue;
 		}
-		collect_css_prunable_elements(value[key], elements);
+		collect_css_prunable_elements(value[key], 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
@@ -598,7 +927,7 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 					(node) =>
 						!is_loop_skip_return_statement(node) &&
 						!is_loop_skip_if_statement(node) &&
-						!is_jsx_child(node),
+						!is_render_child_node(node),
 				);
 
 				if (!continuation_has_setup_statements) {
@@ -640,7 +969,7 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 		}
 
 		if (
-			is_for_of_control_node(child) &&
+			is_template_for_of_node(child) &&
 			!child.await &&
 			should_extract_hook_helpers(transform_context) &&
 			!transform_context.platform.hooks?.isTopLevelSetupCall &&
@@ -668,7 +997,7 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 			}
 		}
 
-		if (is_jsx_child(child)) {
+		if (is_render_child_node(child)) {
 			const jsx = to_jsx_child(child, transform_context);
 			statements.push(...extract_jsx_setup_declarations(jsx));
 			if (interleaved && is_capturable_jsx_child(jsx)) {
@@ -705,7 +1034,7 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
  * @returns {boolean}
  */
 function is_interleaved_body(body_nodes) {
-	return is_interleaved_body_core(body_nodes, is_jsx_child);
+	return is_interleaved_body_core(body_nodes, is_render_child_node);
 }
 
 /**
@@ -714,10 +1043,12 @@ function is_interleaved_body(body_nodes) {
  * @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(node.body.body || [], transform_context) !== -1
+		(find_hook_split_index(body, transform_context) !== -1 ||
+			body_contains_component_body_branch_hook_return(body, transform_context))
 	);
 }
 
@@ -735,29 +1066,35 @@ function create_hook_split_block(node, transform_context) {
 		return null;
 	}
 
-	const body = node.body.body || [];
+	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) {
+	if (split_index === -1 && !branch_rewrite.changed) {
 		return null;
 	}
 
-	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,
-	);
+	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,
+		);
 
-	const block = b.block(
-		[
+		block_body = [
 			...body.slice(0, split_index + 1),
 			...helper.setup_statements,
 			set_loc(b.return(helper.component_element), split_statement),
-		],
-		node.body,
-	);
+		];
+	}
+
+	const block = b.block(block_body, node.body);
 	block.metadata = {
 		...(block.metadata || {}),
 		hook_split_block: true,
@@ -765,6 +1102,228 @@ function create_hook_split_block(node, transform_context) {
 	return block;
 }
 
+/**
+ * @param {any[]} body_nodes
+ * @param {TransformContext} transform_context
+ * @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),
+	);
+}
+
+/**
+ * @param {any} node
+ * @param {TransformContext} transform_context
+ * @returns {boolean}
+ */
+function statement_contains_component_body_branch_hook_return(node, transform_context) {
+	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
@@ -1114,7 +1673,7 @@ function transform_block_statement(node, { next, visit, state, path }) {
 		}
 	}
 
-	if (get_active_native_tsrx_function(path)) {
+	if (get_active_native_tsrx_function(path)?.metadata?.native_tsrx_body) {
 		const block = create_native_tsrx_statement_list_block(node, state);
 		if (block) {
 			return visit(block, state);
@@ -1130,7 +1689,22 @@ function transform_block_statement(node, { next, visit, state, path }) {
  * @returns {any}
  */
 function transform_return_statement(node, { next, visit, state, path }) {
-	if (get_active_native_tsrx_function(path) && is_native_tsrx_node(node.argument)) {
+	const active_native_tsrx_function = get_active_native_tsrx_function(path);
+	if (active_native_tsrx_function && is_native_tsrx_node(node.argument)) {
+		if (!active_native_tsrx_function.metadata?.native_tsrx_body) {
+			const statements = mark_native_pretransformed_jsx(
+				create_native_tsrx_render_statements(node.argument, state),
+			);
+			if (statements.length === 1) {
+				return visit(statements[0], state);
+			}
+			const block = b.block(statements, node.argument);
+			block.metadata = {
+				...(block.metadata || {}),
+				native_return_block: true,
+			};
+			return visit(block, state);
+		}
 		return visit(create_native_tsrx_render_block(node.argument, state), state);
 	}
 
@@ -1190,10 +1764,17 @@ function transform_function(node, context) {
 	// render output. The parser already marks the render JSX as native_tsrx, so
 	// from here it flows through the existing native-component machinery exactly
 	// like the older fenced `{ return <> … </> }` shape.
+	const has_jsx_code_block_body = node.body?.type === 'JSXCodeBlock';
 	lower_jsx_code_block_function_body(node);
 
-	if (node.metadata?.native_tsrx_function || function_has_native_tsrx_return(node)) {
-		return transform_native_tsrx_function(node, context);
+	if (
+		has_jsx_code_block_body ||
+		node.metadata?.native_tsrx_function ||
+		function_has_native_tsrx_return(node)
+	) {
+		return transform_native_tsrx_function(node, context, {
+			nativeBody: has_jsx_code_block_body || !!node.metadata?.native_tsrx_function,
+		});
 	}
 
 	return transform_function_with_hook_helpers(node, context);
@@ -1230,9 +1811,10 @@ function lower_jsx_code_block_function_body(node) {
 /**
  * @param {any} node
  * @param {{ next: () => any, state: TransformContext }} context
+ * @param {{ nativeBody?: boolean }} [options]
  * @returns {any}
  */
-function transform_native_tsrx_function(node, { next, state }) {
+function transform_native_tsrx_function(node, { next, state }, { nativeBody = false } = {}) {
 	const helper_state =
 		state.helper_state || create_helper_state(get_function_helper_base_name(node));
 	const saved_helper_state = state.helper_state;
@@ -1244,7 +1826,8 @@ function transform_native_tsrx_function(node, { next, state }) {
 	node.metadata = {
 		...(node.metadata || {}),
 		native_tsrx: true,
-		...(needs_hook_split(node, state) ? { hook_split: true } : {}),
+		...(nativeBody ? { native_tsrx_body: true } : {}),
+		...(nativeBody && needs_hook_split(node, state) ? { hook_split: true } : {}),
 	};
 	state.available_bindings = merge_binding_maps(
 		saved_bindings,
@@ -1270,6 +1853,7 @@ function transform_native_tsrx_function(node, { next, state }) {
 	inner.metadata = {
 		...strip_function_transform_metadata(inner.metadata),
 		native_tsrx_function: true,
+		...(nativeBody ? { native_tsrx_body: true } : {}),
 		...(!saved_helper_state ? create_generated_helper_metadata(helper_state) || {} : {}),
 	};
 
@@ -1396,12 +1980,7 @@ function find_native_await_in_statement(statement) {
  */
 function transform_function_with_hook_helpers(node, { next, state }) {
 	const has_hook_bearing_tsrx = function_contains_hook_bearing_tsrx(node, state);
-	const has_hook_split = needs_hook_split(node, state);
-	if (
-		state.helper_state ||
-		!is_uppercase_function_like(node) ||
-		(!has_hook_bearing_tsrx && !has_hook_split)
-	) {
+	if (state.helper_state || !is_uppercase_function_like(node) || !has_hook_bearing_tsrx) {
 		return next() ?? node;
 	}
 
@@ -1412,12 +1991,6 @@ function transform_function_with_hook_helpers(node, { next, state }) {
 
 	state.helper_state = helper_state;
 	state.hook_helpers_enabled = true;
-	if (has_hook_split) {
-		node.metadata = {
-			...(node.metadata || {}),
-			hook_split: true,
-		};
-	}
 	state.available_bindings = collect_function_scope_bindings(node);
 
 	const inner = /** @type {any} */ (next() ?? node);
@@ -1681,7 +2254,7 @@ function prepare_tsrx_fragment_styles(node, transform_context) {
 	if (!css) return null;
 
 	const style_refs = collect_style_ref_attributes(node);
-	apply_css_definition_metadata(node, css, style_refs.length > 0);
+	apply_css_definition_metadata(node, css, transform_context, style_refs.length > 0);
 	transform_context.stylesheets.push(css);
 	const fragment = annotate_tsrx_with_hash(
 		node,
@@ -3056,7 +3629,7 @@ function to_jsx_element(
 	raw_children = node.children || [],
 	in_jsx_child = false,
 ) {
-	if (node.type === 'JSXElement' && !node.metadata?.native_tsrx && !is_dynamic_jsx_element(node)) {
+	if (node.type === 'JSXElement' && !node.metadata?.native_tsrx) {
 		return node;
 	}
 
@@ -3066,10 +3639,6 @@ function to_jsx_element(
 		report_jsx_fragment_in_tsrx_error(node, transform_context);
 		return set_loc(b.jsx_fragment(), node);
 	}
-	if (is_dynamic_jsx_element(node)) {
-		return dynamic_element_to_jsx(node, transform_context, in_jsx_child);
-	}
-
 	const name = clone_jsx_name(source_name);
 	const attributes = transform_element_attributes_dispatch(
 		source_opening.attributes || [],
@@ -3205,7 +3774,7 @@ function child_contains_return_semantics(node) {
  * @returns {boolean}
  */
 function is_inline_element_child(node) {
-	return node && is_jsx_child(node);
+	return node && is_render_child_node(node);
 }
 
 /**
@@ -4314,31 +4883,46 @@ function is_native_tsrx_node(node) {
  * @param {any} node
  * @returns {boolean}
  */
-function is_dynamic_jsx_element(node) {
-	return !!(
-		node?.type === 'JSXElement' &&
-		(node.dynamic === true ||
-			node.openingElement?.dynamic === true ||
-			is_dynamic_jsx_name(node.openingElement?.name))
-	);
+function is_if_control_node(node) {
+	return node?.type === 'IfStatement' || node?.type === 'JSXIfExpression';
 }
 
 /**
- * @param {any} name
+ * @param {any} node
  * @returns {boolean}
  */
-function is_dynamic_jsx_name(name) {
-	if (!name || typeof name !== 'object') return false;
-	if (name.dynamic === true) return true;
-	return name.type === 'JSXMemberExpression' && is_dynamic_jsx_name(name.object);
+function is_plain_if_statement(node) {
+	return node?.type === 'IfStatement' && !is_template_if_node(node);
 }
 
 /**
  * @param {any} node
  * @returns {boolean}
  */
-function is_if_control_node(node) {
-	return node?.type === 'IfStatement' || node?.type === 'JSXIfExpression';
+function is_render_child_node(node) {
+	if (!node) return false;
+
+	switch (node.type) {
+		case 'JSXElement':
+		case 'JSXFragment':
+		case 'JSXExpressionContainer':
+		case 'JSXText':
+		case 'JSXIfExpression':
+		case 'JSXForExpression':
+		case 'JSXSwitchExpression':
+		case 'JSXTryExpression':
+			return true;
+		case 'IfStatement':
+			return is_template_if_node(node);
+		case 'ForOfStatement':
+			return is_template_for_of_node(node);
+		case 'SwitchStatement':
+			return is_template_switch_node(node);
+		case 'TryStatement':
+			return is_template_try_node(node);
+		default:
+			return false;
+	}
 }
 
 /**
@@ -4380,9 +4964,6 @@ function to_jsx_child(node, transform_context) {
 			if (is_native_tsrx_node(node)) {
 				return to_jsx_element(node, transform_context, node.children || [], true);
 			}
-			if (is_dynamic_jsx_element(node)) {
-				return dynamic_element_to_jsx(node, transform_context, true);
-			}
 			return node;
 		case 'JSXFragment':
 			if (is_native_tsrx_node(node)) {
@@ -4391,6 +4972,9 @@ function to_jsx_child(node, transform_context) {
 			return node;
 		case 'JSXIfExpression':
 		case 'IfStatement':
+			if (node.type === 'IfStatement' && !is_template_if_node(node)) {
+				return node;
+			}
 			if (node.metadata?.generated_loop_skip_if) {
 				return node;
 			}
@@ -4412,17 +4996,26 @@ function to_jsx_child(node, transform_context) {
 				transform_context.platform.hooks?.controlFlow?.forOf ?? for_of_statement_to_jsx_child
 			)(jsx_control_expression_to_statement(node), transform_context);
 		case 'ForOfStatement':
+			if (!is_template_for_of_node(node)) {
+				return node;
+			}
 			return (
 				transform_context.platform.hooks?.controlFlow?.forOf ?? for_of_statement_to_jsx_child
 			)(node, transform_context);
 		case 'JSXSwitchExpression':
 		case 'SwitchStatement':
+			if (node.type === 'SwitchStatement' && !is_template_switch_node(node)) {
+				return node;
+			}
 			return (
 				transform_context.platform.hooks?.controlFlow?.switchStatement ??
 				switch_statement_to_jsx_child
 			)(jsx_control_expression_to_statement(node), transform_context);
 		case 'JSXTryExpression':
 		case 'TryStatement':
+			if (node.type === 'TryStatement' && !is_template_try_node(node)) {
+				return node;
+			}
 			return (
 				transform_context.platform.hooks?.controlFlow?.tryStatement ?? try_statement_to_jsx_child
 			)(jsx_control_expression_to_statement(node), transform_context);
@@ -4910,6 +5503,42 @@ function is_template_if_node(node) {
 	);
 }
 
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_template_for_of_node(node) {
+	return (
+		node?.type === 'JSXForExpression' ||
+		node?.metadata?.tsrxDirective === 'for' ||
+		(node?.type === 'ForOfStatement' && node?.statementType === 'ForOfStatement')
+	);
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_template_switch_node(node) {
+	return (
+		node?.type === 'JSXSwitchExpression' ||
+		node?.metadata?.tsrxDirective === 'switch' ||
+		(node?.type === 'SwitchStatement' && node?.statementType === 'SwitchStatement')
+	);
+}
+
+/**
+ * @param {any} node
+ * @returns {boolean}
+ */
+function is_template_try_node(node) {
+	return (
+		node?.type === 'JSXTryExpression' ||
+		node?.metadata?.tsrxDirective === 'try' ||
+		(node?.type === 'TryStatement' && node?.statementType === 'TryStatement')
+	);
+}
+
 /**
  * @param {any} node
  * @returns {boolean}
@@ -5707,7 +6336,7 @@ function build_switch_with_lift(switch_node, transform_context) {
 					has_terminal = true;
 					break;
 				}
-				if (is_jsx_child(child)) {
+				if (is_render_child_node(child)) {
 					render_nodes.push(to_jsx_child(child, transform_context));
 				} else if (is_bare_render_expression(child)) {
 					render_nodes.push(to_jsx_expression_container(child, child));
@@ -6266,57 +6895,6 @@ function value_has_unmappable_jsx_loc(value) {
 	);
 }
 
-/**
- * @param {any} node
- * @param {TransformContext} transform_context
- * @param {boolean} in_jsx_child
- * @returns {any}
- */
-function dynamic_element_to_jsx(node, transform_context, in_jsx_child) {
-	const source_name = node.openingElement?.name;
-	const dynamic_id = set_loc(create_generated_identifier('DynamicElement'), source_name || node);
-	const alias_declaration = set_loc(
-		b.const(dynamic_id, jsx_name_to_expression(source_name)),
-		source_name || node,
-	);
-	const jsx_element = create_dynamic_jsx_element(dynamic_id, node, transform_context);
-
-	const expression = b.call(
-		b.arrow(
-			[],
-			b.block([
-				alias_declaration,
-				b.return(b.conditional(clone_identifier(dynamic_id), jsx_element, create_null_literal())),
-			]),
-		),
-	);
-
-	return in_jsx_child ? to_jsx_expression_container(expression, node) : set_loc(expression, node);
-}
-
-/**
- * @param {AST.Identifier} dynamic_id
- * @param {any} node
- * @param {TransformContext} transform_context
- * @returns {ESTreeJSX.JSXElement}
- */
-function create_dynamic_jsx_element(dynamic_id, node, transform_context) {
-	const attributes = transform_element_attributes_dispatch(
-		node.openingElement?.attributes || [],
-		transform_context,
-		node,
-	);
-	const selfClosing = !!node.openingElement?.selfClosing;
-	const children = create_element_children(node.children || [], transform_context);
-	const name = identifier_to_jsx_name(clone_identifier(dynamic_id));
-
-	return b.jsx_element_fresh(
-		b.jsx_opening_element(name, attributes, selfClosing),
-		selfClosing ? null : b.jsx_closing_element(clone_jsx_name(name)),
-		children,
-	);
-}
-
 /**
  * @param {any[]} render_nodes
  * @returns {any}