@tsrx/react 0.1.0 → 0.1.1

package/package.json

@@ -3,7 +3,7 @@
   "description": "React compiler built on @tsrx/core",
   "license": "MIT",
   "author": "Dominic Gannaway",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -25,7 +25,7 @@
   "dependencies": {
     "esrap": "^2.1.0",
     "zimmerframe": "^1.1.2",
-    "@tsrx/core": "0.0.6"
+    "@tsrx/core": "0.0.7"
   },
   "peerDependencies": {
     "react": ">=18"

package/src/transform.js

@@ -17,6 +17,7 @@ import {
 	isInterleavedBody as is_interleaved_body_core,
 	isCapturableJsxChild as is_capturable_jsx_child,
 	captureJsxChild,
+	isHoistSafeJsxNode as is_hoist_safe_jsx_node,
 } from '@tsrx/core';
 
 /**
@@ -894,116 +895,6 @@ function references_scope_bindings(node, scope_bindings) {
 	return false;
 }
 
-/**
- * @param {AST.Literal} node
- * @returns {boolean}
- */
-function is_static_literal(node) {
-	return (
-		node.value === null ||
-		typeof node.value === 'string' ||
-		typeof node.value === 'number' ||
-		typeof node.value === 'boolean' ||
-		typeof node.value === 'bigint'
-	);
-}
-
-/**
- * @param {any} node
- * @returns {boolean}
- */
-function is_hoist_safe_expression(node) {
-	if (!node || typeof node !== 'object') return false;
-
-	switch (node.type) {
-		case 'Literal':
-			return is_static_literal(node);
-		case 'TemplateLiteral':
-			return node.expressions.length === 0;
-		case 'UnaryExpression':
-			return node.operator !== 'delete' && is_hoist_safe_expression(node.argument);
-		case 'BinaryExpression':
-		case 'LogicalExpression':
-			return is_hoist_safe_expression(node.left) && is_hoist_safe_expression(node.right);
-		case 'ConditionalExpression':
-			return (
-				is_hoist_safe_expression(node.test) &&
-				is_hoist_safe_expression(node.consequent) &&
-				is_hoist_safe_expression(node.alternate)
-			);
-		case 'SequenceExpression':
-			return node.expressions.every(is_hoist_safe_expression);
-		case 'ParenthesizedExpression':
-			return is_hoist_safe_expression(node.expression);
-		case 'JSXElement':
-			return is_hoist_safe_jsx_node(node);
-		case 'JSXFragment':
-			return node.children.every(is_hoist_safe_jsx_child);
-		default:
-			return false;
-	}
-}
-
-/**
- * @param {any} node
- * @returns {boolean}
- */
-function is_hoist_safe_jsx_child(node) {
-	if (!node || typeof node !== 'object') return false;
-
-	switch (node.type) {
-		case 'JSXText':
-			return true;
-		case 'JSXElement':
-			return is_hoist_safe_jsx_node(node);
-		case 'JSXFragment':
-			return node.children.every(is_hoist_safe_jsx_child);
-		case 'JSXExpressionContainer':
-			return (
-				node.expression.type !== 'JSXEmptyExpression' && is_hoist_safe_expression(node.expression)
-			);
-		default:
-			return false;
-	}
-}
-
-/**
- * @param {ESTreeJSX.JSXAttribute | ESTreeJSX.JSXSpreadAttribute} attribute
- * @returns {boolean}
- */
-function is_hoist_safe_jsx_attribute(attribute) {
-	if (attribute.type === 'JSXSpreadAttribute') return false;
-	if (attribute.value == null) return true;
-
-	if (attribute.value.type === 'Literal') {
-		return is_static_literal(attribute.value);
-	}
-
-	if (attribute.value.type === 'JSXExpressionContainer') {
-		return (
-			attribute.value.expression.type !== 'JSXEmptyExpression' &&
-			is_hoist_safe_expression(attribute.value.expression)
-		);
-	}
-
-	return false;
-}
-
-/**
- * @param {ESTreeJSX.JSXElement | ESTreeJSX.JSXFragment} node
- * @returns {boolean}
- */
-function is_hoist_safe_jsx_node(node) {
-	if (node.type === 'JSXFragment') {
-		return node.children.every(is_hoist_safe_jsx_child);
-	}
-
-	return (
-		node.openingElement.attributes.every(is_hoist_safe_jsx_attribute) &&
-		node.children.every(is_hoist_safe_jsx_child)
-	);
-}
-
 /**
  * Hoist static JSX elements from render_nodes to module level.
  * A JSX element is static if it doesn't reference any component-scope bindings.
@@ -1712,24 +1603,23 @@ function for_of_statement_to_jsx_child(node, transform_context) {
 		);
 	}
 
-	if (node.key) {
-		throw create_compile_error(
-			node.key,
-			'React TSRX does not support `key` in `for` control flow. Put the key on the rendered element instead, for example `<div key={i}>...</div>`.',
-		);
-	}
-
 	const loop_params = get_for_of_iteration_params(node.left, node.index);
 	const loop_body = node.body.type === 'BlockStatement' ? node.body.body : [node.body];
 	const has_hooks = body_contains_top_level_hook_call(loop_body);
-	const explicit_key_expression = has_hooks ? find_key_expression_in_body(loop_body) : undefined;
+	const body_key_expression = find_key_expression_in_body(loop_body);
+	const explicit_key_expression =
+		body_key_expression ?? (node.key ? clone_expression_node(node.key) : undefined);
 	const key_expression =
 		has_hooks && explicit_key_expression == null && node.index
 			? clone_expression_node(node.index)
 			: explicit_key_expression;
 	const implicit_non_hook_key_expression =
-		!has_hooks && node.index && find_key_expression_in_body(loop_body) == null
-			? clone_expression_node(node.index)
+		!has_hooks && body_key_expression == null
+			? node.key
+				? clone_expression_node(node.key)
+				: node.index
+					? clone_expression_node(node.index)
+					: undefined
 			: undefined;
 
 	// Add loop params to available bindings so hoisted helpers receive them as props