@tsrx/react 0.0.2 → 0.0.4

package/package.json

@@ -3,7 +3,7 @@
   "description": "React compiler built on @tsrx/core",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/index.js

@@ -1,7 +1,7 @@
 /** @import * as AST from 'estree' */
-/** @import { CodeMapping, ParseOptions } from '@tsrx/core/types' */
+/** @import { ParseOptions } from '@tsrx/core/types' */
 
-import { createVolarMappingsResult, parseModule } from '@tsrx/core';
+import { createVolarMappingsResult, dedupeMappings, parseModule } from '@tsrx/core';
 import { transform } from './transform.js';
 
 /**
@@ -51,56 +51,6 @@ export function compile_to_volar_mappings(source, filename, options) {
 
 	return {
 		...result,
-		mappings: dedupe_mappings(result.mappings),
+		mappings: dedupeMappings(result.mappings),
 	};
 }
-
-/**
- * Remove byte-for-byte duplicate mappings. React helper extraction can emit
- * identical mapping entries for the same source and generated span, which
- * causes Volar to merge duplicate hover/navigation results.
- *
- * @param {CodeMapping[]} mappings
- * @returns {CodeMapping[]}
- */
-function dedupe_mappings(mappings) {
-	const deduped = [];
-	const seen = new Set();
-
-	for (const mapping of mappings) {
-		const key = JSON.stringify(serialize_mapping_value(mapping));
-
-		if (seen.has(key)) {
-			continue;
-		}
-
-		seen.add(key);
-		deduped.push(mapping);
-	}
-
-	return deduped;
-}
-
-/**
- * @param {unknown} value
- * @returns {unknown}
- */
-function serialize_mapping_value(value) {
-	if (typeof value === 'function') {
-		return value.toString();
-	}
-
-	if (Array.isArray(value)) {
-		return value.map(serialize_mapping_value);
-	}
-
-	if (value && typeof value === 'object') {
-		return Object.fromEntries(
-			Object.entries(value)
-				.sort(([left], [right]) => left.localeCompare(right))
-				.map(([key, nested_value]) => [key, serialize_mapping_value(nested_value)]),
-		);
-	}
-
-	return value;
-}

package/src/transform.js

@@ -4,16 +4,33 @@
 import { walk } from 'zimmerframe';
 import { print } from 'esrap';
 import tsx from 'esrap/languages/tsx';
-import { renderStylesheets, setLocation } from '@tsrx/core';
+import {
+	renderStylesheets,
+	setLocation,
+	applyLazyTransforms as apply_lazy_transforms,
+	collectLazyBindingsFromComponent as collect_lazy_bindings_from_component,
+	preallocateLazyIds as preallocate_lazy_ids,
+	replaceLazyParams as replace_lazy_params,
+	prepareStylesheetForRender as prepare_stylesheet_for_render,
+	annotateComponentWithHash as annotate_component_with_hash,
+} from '@tsrx/core';
 
 /**
  * @typedef {{
  *   local_statement_component_index: number,
  *   needs_error_boundary: boolean,
  *   needs_suspense: boolean,
+ *   helper_state: { base_name: string, next_id: number, helpers: AST.FunctionDeclaration[], statics: any[] } | null,
+ *   available_bindings: Map<string, AST.Identifier>,
+ *   lazy_next_id: number,
+ *   current_css_hash: string | null,
  * }} TransformContext
  */
 
+/**
+ * @typedef {{ source_name: string, read: () => any }} LazyBinding
+ */
+
 /**
  * Transform a parsed tsrx-react AST into a TSX/JSX module.
  *
@@ -39,8 +56,14 @@ export function transform(ast, source, filename) {
 		local_statement_component_index: 0,
 		needs_error_boundary: false,
 		needs_suspense: false,
+		helper_state: null,
+		available_bindings: new Map(),
+		lazy_next_id: 0,
+		current_css_hash: null,
 	};
 
+	preallocate_lazy_ids(/** @type {any} */ (ast), transform_context);
+
 	walk(/** @type {any} */ (ast), transform_context, {
 		Component(node, { next, state }) {
 			const as_any = /** @type {any} */ (node);
@@ -56,8 +79,42 @@ export function transform(ast, source, filename) {
 
 	const transformed = walk(/** @type {any} */ (ast), transform_context, {
 		Component(node, { next, state }) {
+			const as_any = /** @type {any} */ (node);
+
+			// Set up helper_state and bindings BEFORE next() so that nested
+			// hook_safe_* calls (inside Element children) can register helpers
+			// and access available bindings during the bottom-up walk.
+			const helper_state = create_helper_state(as_any.id?.name || 'Component');
+			const saved_helper_state = state.helper_state;
+			const saved_bindings = state.available_bindings;
+			const saved_css_hash = state.current_css_hash;
+			state.helper_state = helper_state;
+			state.current_css_hash = as_any.css ? as_any.css.hash : null;
+
+			// Pre-collect component body bindings (params + top-level statements)
+			// so that Element children processed during the bottom-up walk can see
+			// the full scope. Without this, hoisted helpers would miss body-level
+			// variables like `const [x] = useState(...)` and produce ReferenceErrors.
+			// Only collect up to the split point — bindings declared after a
+			// hook-safe split aren't in scope at the return statement and would
+			// cause ReferenceErrors if passed as helper props.
+			const body_bindings = collect_param_bindings(as_any.params || []);
+			const body = as_any.body || [];
+			const split_index = find_hook_safe_split_index(body);
+			const collect_end = split_index === -1 ? body.length : split_index;
+			for (let i = 0; i < collect_end; i += 1) {
+				collect_statement_bindings(body[i], body_bindings);
+			}
+			state.available_bindings = body_bindings;
+
 			const inner = /** @type {any} */ (next() ?? node);
-			return /** @type {any} */ (component_to_function_declaration(inner, state));
+
+			// Restore context
+			state.helper_state = saved_helper_state;
+			state.available_bindings = saved_bindings;
+			state.current_css_hash = saved_css_hash;
+
+			return /** @type {any} */ (component_to_function_declaration(inner, state, helper_state));
 		},
 
 		Tsx(node, { next }) {
@@ -86,12 +143,30 @@ export function transform(ast, source, filename) {
 			const inner = /** @type {any} */ (next() ?? node);
 			return /** @type {any} */ (to_jsx_expression_container(inner.expression, inner));
 		},
+
+		MemberExpression(node, { next, state }) {
+			const as_any = /** @type {any} */ (node);
+			if (as_any.object && as_any.object.type === 'StyleIdentifier' && state.current_css_hash) {
+				const class_name = as_any.computed ? as_any.property.value : as_any.property.name;
+				const value = `${state.current_css_hash} ${class_name}`;
+				return /** @type {any} */ ({ type: 'Literal', value, raw: JSON.stringify(value) });
+			}
+			return next();
+		},
 	});
 
 	const expanded = expand_component_helpers(/** @type {AST.Program} */ (transformed));
 	inject_try_imports(expanded, transform_context);
 
-	const result = print(/** @type {any} */ (expanded), tsx(), {
+	// Apply lazy destructuring transforms to module-level code (top-level function
+	// declarations, arrow functions, etc.). Component bodies have already been
+	// transformed inside component_to_function_declaration; this catches plain
+	// functions outside components and any lazy patterns in module scope.
+	const final_program = /** @type {any} */ (
+		apply_lazy_transforms(/** @type {any} */ (expanded), new Map())
+	);
+
+	const result = print(/** @type {any} */ (final_program), tsx(), {
 		sourceMapSource: filename,
 		sourceMapContent: source,
 	});
@@ -106,30 +181,60 @@ export function transform(ast, source, filename) {
 				}
 			: null;
 
-	return { ast: expanded, code: result.code, map: result.map, css };
+	return { ast: final_program, code: result.code, map: result.map, css };
 }
 
 /**
  * @param {any} component
  * @param {TransformContext} transform_context
+ * @param {{ base_name: string, next_id: number, helpers: AST.FunctionDeclaration[], statics: any[] }} [walk_helper_state]
  * @returns {AST.FunctionDeclaration}
  */
-function component_to_function_declaration(component, transform_context) {
-	const helper_state = create_helper_state(component.id?.name || 'Component');
+function component_to_function_declaration(component, transform_context, walk_helper_state) {
+	const helper_state = walk_helper_state || create_helper_state(component.id?.name || 'Component');
+	const params = component.params || [];
+	const body = /** @type {any[]} */ (component.body || []);
+
+	// Collect param bindings from original patterns (lazy patterns still intact).
+	const param_bindings = collect_param_bindings(params);
+
+	// Collect lazy binding info WITHOUT mutating patterns. Stores lazy_id on metadata
+	// for later replacement. Body bindings (count, setCount, etc.) are still in the
+	// original patterns, so collect_statement_bindings during build will find them.
+	const lazy_bindings = collect_lazy_bindings_from_component(params, body, transform_context);
+
+	// Save and set context for this component scope
+	const saved_helper_state = transform_context.helper_state;
+	const saved_bindings = transform_context.available_bindings;
+	transform_context.helper_state = helper_state;
+	transform_context.available_bindings = new Map(param_bindings);
+
+	const body_statements = build_component_statements(
+		body,
+		helper_state,
+		param_bindings,
+		transform_context,
+	);
+
+	// Replace lazy param patterns with generated identifiers
+	const final_params = lazy_bindings.size > 0 ? replace_lazy_params(params) : params;
+
+	// Wrap body_statements in a BlockStatement so that apply_lazy_transforms
+	// runs collect_block_shadowed_names and detects body-level declarations
+	// (e.g. `const name = ...`) that shadow lazy binding names.
+	const body_block = /** @type {any} */ ({
+		type: 'BlockStatement',
+		body: body_statements,
+		metadata: { path: [] },
+	});
+	const final_body =
+		lazy_bindings.size > 0 ? apply_lazy_transforms(body_block, lazy_bindings) : body_block;
+
 	const fn = /** @type {any} */ ({
 		type: 'FunctionDeclaration',
 		id: component.id,
-		params: component.params || [],
-		body: {
-			type: 'BlockStatement',
-			body: build_component_statements(
-				/** @type {any[]} */ (component.body),
-				helper_state,
-				collect_param_bindings(component.params || []),
-				transform_context,
-			),
-			metadata: { path: [] },
-		},
+		params: final_params,
+		body: final_body,
 		async: false,
 		generator: false,
 		metadata: {
@@ -138,7 +243,12 @@ function component_to_function_declaration(component, transform_context) {
 		},
 	});
 
+	// Restore context
+	transform_context.helper_state = saved_helper_state;
+	transform_context.available_bindings = saved_bindings;
+
 	fn.metadata.generated_helpers = helper_state.helpers;
+	fn.metadata.generated_statics = helper_state.statics;
 
 	if (fn.id) {
 		fn.id.metadata = /** @type {AST.Identifier['metadata']} */ ({
@@ -153,7 +263,7 @@ function component_to_function_declaration(component, transform_context) {
 
 /**
  * @param {any[]} body_nodes
- * @param {{ base_name: string, next_id: number, helpers: AST.FunctionDeclaration[] }} helper_state
+ * @param {{ base_name: string, next_id: number, helpers: AST.FunctionDeclaration[], statics: any[] }} helper_state
  * @param {Map<string, AST.Identifier>} available_bindings
  * @param {TransformContext} transform_context
  * @returns {any[]}
@@ -191,9 +301,12 @@ function build_component_statements(
 		} else {
 			statements.push(child);
 			collect_statement_bindings(child, bindings);
+			transform_context.available_bindings = bindings;
 		}
 	}
 
+	hoist_static_render_nodes(render_nodes, transform_context);
+
 	const split_node = body_nodes[split_index];
 	const consequent_body =
 		split_node.consequent.type === 'BlockStatement'
@@ -250,9 +363,15 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 	const statements = [];
 	const render_nodes = [];
 
+	// Create a new bindings map so inner-scope bindings from
+	// collect_statement_bindings don't leak to the caller's scope.
+	const saved_bindings = transform_context.available_bindings;
+	transform_context.available_bindings = new Map(saved_bindings);
+
 	for (const child of body_nodes) {
 		if (is_bare_return_statement(child)) {
 			statements.push(create_component_return_statement(render_nodes, child));
+			transform_context.available_bindings = saved_bindings;
 			return statements;
 		}
 
@@ -265,9 +384,12 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 			render_nodes.push(to_jsx_child(child, transform_context));
 		} else {
 			statements.push(child);
+			collect_statement_bindings(child, transform_context.available_bindings);
 		}
 	}
 
+	hoist_static_render_nodes(render_nodes, transform_context);
+
 	const return_arg = build_return_expression(render_nodes);
 	if (return_arg || return_null_when_empty) {
 		statements.push({
@@ -276,6 +398,7 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 		});
 	}
 
+	transform_context.available_bindings = saved_bindings;
 	return statements;
 }
 
@@ -393,7 +516,7 @@ function is_hook_callee(callee) {
 
 /**
  * @param {any[]} body_nodes
- * @param {{ base_name: string, next_id: number, helpers: AST.FunctionDeclaration[] }} helper_state
+ * @param {{ base_name: string, next_id: number, helpers: AST.FunctionDeclaration[], statics: any[] }} helper_state
  * @param {Map<string, AST.Identifier>} available_bindings
  * @param {any} source_node
  * @param {string} suffix
@@ -433,7 +556,7 @@ function create_helper_component_expression(
 /**
  * @param {AST.Identifier} helper_id
  * @param {any[]} body_nodes
- * @param {{ base_name: string, next_id: number, helpers: AST.FunctionDeclaration[] }} helper_state
+ * @param {{ base_name: string, next_id: number, helpers: AST.FunctionDeclaration[], statics: any[] }} helper_state
  * @param {Map<string, AST.Identifier>} available_bindings
  * @param {AST.Identifier[]} helper_bindings
  * @param {any} source_node
@@ -552,7 +675,7 @@ function create_helper_component_element(helper_id, bindings, source_node) {
 }
 
 /**
- * @param {{ base_name: string, next_id: number, helpers: AST.FunctionDeclaration[] }} helper_state
+ * @param {{ base_name: string, next_id: number, helpers: AST.FunctionDeclaration[], statics: any[] }} helper_state
  * @param {string} suffix
  * @returns {string}
  */
@@ -563,13 +686,14 @@ function create_helper_name(helper_state, suffix) {
 
 /**
  * @param {string} base_name
- * @returns {{ base_name: string, next_id: number, helpers: AST.FunctionDeclaration[] }}
+ * @returns {{ base_name: string, next_id: number, helpers: AST.FunctionDeclaration[], statics: any[] }}
  */
 function create_helper_state(base_name) {
 	return {
 		base_name,
 		next_id: 0,
 		helpers: [],
+		statics: [],
 	};
 }
 
@@ -606,6 +730,18 @@ function collect_statement_bindings(statement, bindings) {
 	) {
 		bindings.set(statement.id.name, statement.id);
 	}
+
+	// Statement-level lazy assignment: `&[x] = expr;` introduces `x` as a binding.
+	if (
+		statement.type === 'ExpressionStatement' &&
+		statement.expression?.type === 'AssignmentExpression' &&
+		statement.expression.operator === '=' &&
+		(statement.expression.left?.type === 'ObjectPattern' ||
+			statement.expression.left?.type === 'ArrayPattern') &&
+		statement.expression.left.lazy
+	) {
+		collect_pattern_bindings(statement.expression.left, bindings);
+	}
 }
 
 /**
@@ -649,6 +785,93 @@ function collect_pattern_bindings(pattern, bindings) {
 	}
 }
 
+/**
+ * Check if a node references any of the given scope bindings.
+ * Used to determine if a JSX element is static and can be hoisted to module level.
+ *
+ * @param {any} node
+ * @param {Map<string, AST.Identifier>} scope_bindings
+ * @returns {boolean}
+ */
+function references_scope_bindings(node, scope_bindings) {
+	if (!node || typeof node !== 'object') return false;
+	if (scope_bindings.size === 0) return false;
+
+	if (node.type === 'Identifier') {
+		return scope_bindings.has(node.name);
+	}
+
+	// JSXIdentifier is a variable reference when capitalized (tag name like <MyComponent />)
+	// or when it's the object of a JSXMemberExpression (e.g. ui in <ui.Button />)
+	if (node.type === 'JSXIdentifier') {
+		return scope_bindings.has(node.name);
+	}
+
+	if (Array.isArray(node)) {
+		return node.some((child) => references_scope_bindings(child, scope_bindings));
+	}
+
+	for (const key of Object.keys(node)) {
+		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata') continue;
+
+		// Skip non-computed, non-shorthand property keys (they are labels, not references)
+		if (key === 'key' && node.type === 'Property' && !node.computed && !node.shorthand) continue;
+
+		// Skip non-computed member expression property access
+		if (key === 'property' && node.type === 'MemberExpression' && !node.computed) continue;
+
+		// Skip JSXMemberExpression property (e.g. Button in <Icons.Button /> is a label, not a reference)
+		if (key === 'property' && node.type === 'JSXMemberExpression') continue;
+
+		// Skip JSXAttribute names — they are attribute labels, not variable references
+		if (key === 'name' && node.type === 'JSXAttribute') continue;
+
+		if (references_scope_bindings(node[key], scope_bindings)) return true;
+	}
+
+	return false;
+}
+
+/**
+ * Hoist static JSX elements from render_nodes to module level.
+ * A JSX element is static if it doesn't reference any component-scope bindings.
+ * Hoisting prevents React from recreating the element on every render, allowing
+ * the reconciler to skip diffing when it sees the same element identity.
+ *
+ * @param {any[]} render_nodes
+ * @param {TransformContext} transform_context
+ */
+function hoist_static_render_nodes(render_nodes, transform_context) {
+	if (!transform_context.helper_state) return;
+
+	for (let i = 0; i < render_nodes.length; i++) {
+		const node = render_nodes[i];
+		if (node.type !== 'JSXElement') continue;
+		if (references_scope_bindings(node, transform_context.available_bindings)) continue;
+
+		const name = create_helper_name(transform_context.helper_state, 'static');
+		const id = create_generated_identifier(name);
+
+		transform_context.helper_state.statics.push(
+			/** @type {any} */ ({
+				type: 'VariableDeclaration',
+				kind: 'const',
+				declarations: [
+					{
+						type: 'VariableDeclarator',
+						id,
+						init: node,
+						metadata: { path: [] },
+					},
+				],
+				metadata: { path: [] },
+			}),
+		);
+
+		render_nodes[i] = to_jsx_expression_container(clone_identifier(id), node);
+	}
+}
+
 /**
  * @param {AST.Identifier} identifier
  * @returns {AST.Identifier}
@@ -683,9 +906,11 @@ function create_null_literal() {
 function expand_component_helpers(program) {
 	program.body = program.body.flatMap((statement) => {
 		if (statement.type === 'FunctionDeclaration') {
-			const helpers = /** @type {any} */ (statement.metadata)?.generated_helpers;
-			if (helpers?.length) {
-				return [...helpers, statement];
+			const meta = /** @type {any} */ (statement.metadata);
+			const statics = meta?.generated_statics || [];
+			const helpers = meta?.generated_helpers || [];
+			if (statics.length || helpers.length) {
+				return [...statics, ...helpers, statement];
 			}
 		}
 
@@ -694,9 +919,11 @@ function expand_component_helpers(program) {
 				statement.type === 'ExportDefaultDeclaration') &&
 			statement.declaration?.type === 'FunctionDeclaration'
 		) {
-			const helpers = /** @type {any} */ (statement.declaration.metadata)?.generated_helpers;
-			if (helpers?.length) {
-				return [...helpers, statement];
+			const meta = /** @type {any} */ (statement.declaration.metadata);
+			const statics = meta?.generated_statics || [];
+			const helpers = meta?.generated_helpers || [];
+			if (statics.length || helpers.length) {
+				return [...statics, ...helpers, statement];
 			}
 		}
 
@@ -775,176 +1002,6 @@ function create_component_lone_return_if_statement(node, render_nodes) {
 	);
 }
 
-/**
- * Mark every selector inside the stylesheet as "used" so `renderStylesheets`
- * does not comment it out. We skip Ripple's selector-pruning pass because
- * React component boundaries are dynamic — any selector authored inside the
- * component's `<style>` block is considered intentional.
- *
- * @param {any} stylesheet
- * @returns {any}
- */
-function prepare_stylesheet_for_render(stylesheet) {
-	walk(stylesheet, null, {
-		_(node, { next }) {
-			if (node && node.metadata && typeof node.metadata === 'object') {
-				node.metadata.used = true;
-				if (node.type === 'RelativeSelector' && !node.metadata.is_global) {
-					node.metadata.scoped = true;
-				}
-			}
-			return next();
-		},
-	});
-	return stylesheet;
-}
-
-/**
- * @param {any} node
- * @returns {boolean}
- */
-function is_style_element(node) {
-	return (
-		node &&
-		node.type === 'Element' &&
-		node.id &&
-		node.id.type === 'Identifier' &&
-		node.id.name === 'style'
-	);
-}
-
-/**
- * @param {any} node
- * @returns {boolean}
- */
-function is_composite_element(node) {
-	if (!node || node.type !== 'Element' || !node.id) {
-		return false;
-	}
-
-	if (node.id.type === 'Identifier') {
-		return /^[A-Z]/.test(node.id.name);
-	}
-
-	return node.id.type === 'MemberExpression';
-}
-
-/**
- * Recursively walk Element nodes within a component body and add the hash
- * class name so scope-qualified selectors (e.g. `.foo.hash`) match.
- *
- * @param {any} node
- * @param {string} hash
- * @returns {any}
- */
-function annotate_with_hash(node, hash) {
-	if (!node || typeof node !== 'object') return node;
-	if (
-		node.type === 'Component' ||
-		node.type === 'FunctionDeclaration' ||
-		node.type === 'FunctionExpression' ||
-		node.type === 'ArrowFunctionExpression'
-	) {
-		return node;
-	}
-
-	if (node.type === 'Element') {
-		if (!is_style_element(node) && !is_composite_element(node)) {
-			add_hash_class(node, hash);
-		}
-		if (Array.isArray(node.children)) {
-			node.children = node.children
-				.filter((/** @type {any} */ child) => !is_style_element(child))
-				.map((/** @type {any} */ child) => annotate_with_hash(child, hash));
-		}
-		return node;
-	}
-
-	for (const key of Object.keys(node)) {
-		if (key === 'loc' || key === 'start' || key === 'end' || key === 'metadata' || key === 'css') {
-			continue;
-		}
-
-		const value = node[key];
-		if (Array.isArray(value)) {
-			node[key] = value.map((/** @type {any} */ child) => annotate_with_hash(child, hash));
-		} else if (value && typeof value === 'object') {
-			node[key] = annotate_with_hash(value, hash);
-		}
-	}
-
-	return node;
-}
-
-/**
- * @param {any} component
- * @param {string} hash
- * @returns {void}
- */
-function annotate_component_with_hash(component, hash) {
-	/** @type {any[]} */
-	const body = component.body;
-	component.body = body
-		.filter((/** @type {any} */ child) => !is_style_element(child))
-		.map((/** @type {any} */ child) => annotate_with_hash(child, hash));
-}
-
-/**
- * Ensure the element carries a `class` attribute containing the scoping hash.
- * @param {any} element
- * @param {string} hash
- */
-function add_hash_class(element, hash) {
-	const attrs = element.attributes || (element.attributes = []);
-	const existing = attrs.find(
-		(/** @type {any} */ a) =>
-			a.type === 'Attribute' &&
-			a.name &&
-			a.name.type === 'Identifier' &&
-			(a.name.name === 'class' || a.name.name === 'className'),
-	);
-
-	if (!existing) {
-		attrs.push({
-			type: 'Attribute',
-			name: { type: 'Identifier', name: 'class' },
-			value: { type: 'Literal', value: hash, raw: JSON.stringify(hash) },
-		});
-		return;
-	}
-
-	const value = existing.value;
-	if (!value) {
-		existing.value = { type: 'Literal', value: hash, raw: JSON.stringify(hash) };
-		return;
-	}
-
-	if (value.type === 'Literal' && typeof value.value === 'string') {
-		const merged = `${value.value} ${hash}`;
-		existing.value = { type: 'Literal', value: merged, raw: JSON.stringify(merged) };
-		return;
-	}
-
-	// Dynamic expression. Concatenate at runtime via template literal.
-	const expression = value.type === 'JSXExpressionContainer' ? value.expression : value;
-	existing.value = {
-		type: 'TemplateLiteral',
-		expressions: [expression],
-		quasis: [
-			{
-				type: 'TemplateElement',
-				value: { raw: '', cooked: '' },
-				tail: false,
-			},
-			{
-				type: 'TemplateElement',
-				value: { raw: ` ${hash}`, cooked: ` ${hash}` },
-				tail: true,
-			},
-		],
-	};
-}
-
 /**
  * @param {any} node
  * @returns {boolean}
@@ -959,6 +1016,10 @@ function is_jsx_child(node) {
 		t === 'JSXText' ||
 		t === 'Tsx' ||
 		t === 'TsxCompat' ||
+		t === 'Element' ||
+		t === 'Text' ||
+		t === 'TSRXExpression' ||
+		t === 'Html' ||
 		t === 'IfStatement' ||
 		t === 'ForOfStatement' ||
 		t === 'SwitchStatement' ||
@@ -973,6 +1034,11 @@ function is_jsx_child(node) {
  */
 function to_jsx_element(node, transform_context) {
 	if (node.type === 'JSXElement') return node;
+	if ((node.children || []).some((/** @type {any} */ c) => c && c.type === 'Html')) {
+		throw new Error(
+			'`{html ...}` is not supported on the React target. Use `dangerouslySetInnerHTML={{ __html: ... }}` as an element attribute instead.',
+		);
+	}
 	if (is_dynamic_element_id(node.id)) {
 		return dynamic_element_to_jsx_child(node, transform_context);
 	}
@@ -1144,11 +1210,17 @@ function hook_safe_statement_body_to_jsx_child(body_nodes, transform_context) {
 		create_generated_identifier(create_local_statement_component_name(transform_context)),
 		source_node,
 	);
+	const helper_bindings = Array.from(transform_context.available_bindings.values());
+
+	// Save and isolate bindings for the helper body
+	const saved_bindings = transform_context.available_bindings;
+	transform_context.available_bindings = new Map(saved_bindings);
+
 	const helper_fn = set_loc(
 		/** @type {any} */ ({
 			type: 'FunctionDeclaration',
 			id: helper_id,
-			params: [],
+			params: helper_bindings.length > 0 ? [create_helper_props_pattern(helper_bindings)] : [],
 			body: {
 				type: 'BlockStatement',
 				body: build_render_statements(body_nodes, true, transform_context),
@@ -1165,6 +1237,19 @@ function hook_safe_statement_body_to_jsx_child(body_nodes, transform_context) {
 		source_node,
 	);
 
+	// Restore bindings
+	transform_context.available_bindings = saved_bindings;
+
+	// Register helper for hoisting to module level
+	if (transform_context.helper_state) {
+		transform_context.helper_state.helpers.push(helper_fn);
+
+		return to_jsx_expression_container(
+			/** @type {any} */ (create_helper_component_element(helper_id, helper_bindings, source_node)),
+			source_node,
+		);
+	}
+
 	return to_jsx_expression_container(
 		/** @type {any} */ ({
 			type: 'CallExpression',
@@ -1177,7 +1262,7 @@ function hook_safe_statement_body_to_jsx_child(body_nodes, transform_context) {
 						helper_fn,
 						{
 							type: 'ReturnStatement',
-							argument: create_helper_component_element(helper_id, [], source_node),
+							argument: create_helper_component_element(helper_id, helper_bindings, source_node),
 							metadata: { path: [] },
 						},
 					],
@@ -1206,8 +1291,10 @@ function create_local_statement_component_name(transform_context) {
 }
 
 /**
- * Wraps a list of body nodes into a locally-declared component and returns
- * statements that declare the component then return `<ComponentName />`.
+ * Wraps a list of body nodes into a component and returns
+ * statements that return `<ComponentName prop1={prop1} ... />`.
+ * The component is hoisted to module level via helper_state to avoid
+ * recreating the component identity on every render.
  * Used when a control flow branch contains hook calls that must be moved
  * into their own component boundary to satisfy the Rules of Hooks.
  *
@@ -1222,12 +1309,17 @@ function hook_safe_render_statements(body_nodes, key_expression, transform_conte
 		create_generated_identifier(create_local_statement_component_name(transform_context)),
 		source_node,
 	);
+	const helper_bindings = Array.from(transform_context.available_bindings.values());
+
+	// Save and isolate bindings for the helper body
+	const saved_bindings = transform_context.available_bindings;
+	transform_context.available_bindings = new Map(saved_bindings);
 
 	const helper_fn = set_loc(
 		/** @type {any} */ ({
 			type: 'FunctionDeclaration',
 			id: helper_id,
-			params: [],
+			params: helper_bindings.length > 0 ? [create_helper_props_pattern(helper_bindings)] : [],
 			body: {
 				type: 'BlockStatement',
 				body: build_render_statements(body_nodes, true, transform_context),
@@ -1244,7 +1336,19 @@ function hook_safe_render_statements(body_nodes, key_expression, transform_conte
 		source_node,
 	);
 
-	const component_element = create_helper_component_element(helper_id, [], source_node);
+	// Restore bindings
+	transform_context.available_bindings = saved_bindings;
+
+	// Register helper for hoisting to module level
+	if (transform_context.helper_state) {
+		transform_context.helper_state.helpers.push(helper_fn);
+	}
+
+	const component_element = create_helper_component_element(
+		helper_id,
+		helper_bindings,
+		source_node,
+	);
 
 	if (key_expression) {
 		component_element.openingElement.attributes.push(
@@ -1257,8 +1361,20 @@ function hook_safe_render_statements(body_nodes, key_expression, transform_conte
 		);
 	}
 
+	// When helper_state is null (no enclosing component context), inline the
+	// helper via an IIFE so the function declaration isn't silently dropped.
+	if (!transform_context.helper_state) {
+		return [
+			helper_fn,
+			{
+				type: 'ReturnStatement',
+				argument: component_element,
+				metadata: { path: [] },
+			},
+		];
+	}
+
 	return [
-		helper_fn,
 		{
 			type: 'ReturnStatement',
 			argument: component_element,
@@ -1307,6 +1423,10 @@ function to_jsx_child(node, transform_context) {
 			return to_jsx_expression_container(to_text_expression(node.expression, node), node);
 		case 'TSRXExpression':
 			return to_jsx_expression_container(node.expression, node);
+		case 'Html':
+			throw new Error(
+				'`{html ...}` is not supported on the React target. Use `dangerouslySetInnerHTML={{ __html: ... }}` as an element attribute instead.',
+			);
 		case 'IfStatement':
 			return if_statement_to_jsx_child(node, transform_context);
 		case 'ForOfStatement':
@@ -1411,6 +1531,20 @@ function for_of_statement_to_jsx_child(node, transform_context) {
 	const has_hooks = body_contains_top_level_hook_call(loop_body);
 	const key_expression = has_hooks ? find_key_expression_in_body(loop_body) : undefined;
 
+	// Add loop params to available bindings so hoisted helpers receive them as props
+	const saved_bindings = transform_context.available_bindings;
+	transform_context.available_bindings = new Map(saved_bindings);
+	for (const param of loop_params) {
+		collect_pattern_bindings(param, transform_context.available_bindings);
+	}
+
+	const body_statements = has_hooks
+		? hook_safe_render_statements(loop_body, key_expression, transform_context)
+		: build_render_statements(loop_body, true, transform_context);
+
+	// Restore bindings
+	transform_context.available_bindings = saved_bindings;
+
 	return to_jsx_expression_container(
 		/** @type {any} */ ({
 			type: 'CallExpression',
@@ -1428,9 +1562,7 @@ function for_of_statement_to_jsx_child(node, transform_context) {
 					params: loop_params,
 					body: /** @type {any} */ ({
 						type: 'BlockStatement',
-						body: has_hooks
-							? hook_safe_render_statements(loop_body, key_expression, transform_context)
-							: build_render_statements(loop_body, true, transform_context),
+						body: body_statements,
 						metadata: { path: [] },
 					}),
 					async: false,
@@ -1572,6 +1704,15 @@ function try_statement_to_jsx_child(node, transform_context) {
 		}
 
 		const catch_body_nodes = handler.body.body || [];
+
+		// Add catch params to available_bindings so static hoisting
+		// 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);
+		for (const param of catch_params) {
+			collect_pattern_bindings(param, transform_context.available_bindings);
+		}
+
 		const fallback_fn = {
 			type: 'ArrowFunctionExpression',
 			params: catch_params,
@@ -1586,6 +1727,8 @@ function try_statement_to_jsx_child(node, transform_context) {
 			metadata: { path: [] },
 		};
 
+		transform_context.available_bindings = saved_catch_bindings;
+
 		result = create_jsx_element(
 			'TsrxErrorBoundary',
 			[