@tsrx/react 0.0.4 → 0.0.6

package/package.json

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

package/src/transform.js

@@ -8,6 +8,7 @@ import {
 	renderStylesheets,
 	setLocation,
 	applyLazyTransforms as apply_lazy_transforms,
+	findFirstTopLevelAwaitInComponentBody as find_first_top_level_await_in_component_body,
 	collectLazyBindingsFromComponent as collect_lazy_bindings_from_component,
 	preallocateLazyIds as preallocate_lazy_ids,
 	replaceLazyParams as replace_lazy_params,
@@ -50,6 +51,7 @@ import {
 export function transform(ast, source, filename) {
 	/** @type {any[]} */
 	const stylesheets = [];
+	const module_uses_server_directive = has_use_server_directive(ast);
 
 	/** @type {TransformContext} */
 	const transform_context = {
@@ -67,6 +69,22 @@ export function transform(ast, source, filename) {
 	walk(/** @type {any} */ (ast), transform_context, {
 		Component(node, { next, state }) {
 			const as_any = /** @type {any} */ (node);
+			const await_expression = find_first_top_level_await_in_component_body(as_any.body || []);
+
+			if (await_expression && !module_uses_server_directive) {
+				throw create_compile_error(
+					await_expression,
+					'React components can only use `await` when the module has a top-level "use server" directive.',
+				);
+			}
+
+			if (await_expression) {
+				as_any.metadata = /** @type {any} */ ({
+					...(as_any.metadata || {}),
+					contains_top_level_await: true,
+				});
+			}
+
 			const css = as_any.css;
 			if (css) {
 				stylesheets.push(css);
@@ -194,6 +212,9 @@ function component_to_function_declaration(component, transform_context, walk_he
 	const helper_state = walk_helper_state || create_helper_state(component.id?.name || 'Component');
 	const params = component.params || [];
 	const body = /** @type {any[]} */ (component.body || []);
+	const is_async_component =
+		!!component?.metadata?.contains_top_level_await ||
+		find_first_top_level_await_in_component_body(body) !== null;
 
 	// Collect param bindings from original patterns (lazy patterns still intact).
 	const param_bindings = collect_param_bindings(params);
@@ -235,7 +256,7 @@ function component_to_function_declaration(component, transform_context, walk_he
 		id: component.id,
 		params: final_params,
 		body: final_body,
-		async: false,
+		async: is_async_component,
 		generator: false,
 		metadata: {
 			path: [],
@@ -514,6 +535,34 @@ function is_hook_callee(callee) {
 	return false;
 }
 
+/**
+ * @param {AST.Program} program
+ * @returns {boolean}
+ */
+function has_use_server_directive(program) {
+	for (const statement of program.body || []) {
+		const directive = /** @type {any} */ (statement).directive;
+
+		if (directive === 'use server') {
+			return true;
+		}
+
+		if (
+			statement.type === 'ExpressionStatement' &&
+			statement.expression?.type === 'Literal' &&
+			statement.expression.value === 'use server'
+		) {
+			return true;
+		}
+
+		if (directive == null) {
+			break;
+		}
+	}
+
+	return false;
+}
+
 /**
  * @param {any[]} body_nodes
  * @param {{ base_name: string, next_id: number, helpers: AST.FunctionDeclaration[], statics: any[] }} helper_state
@@ -1519,6 +1568,13 @@ function find_key_expression_in_body(body_nodes) {
  * @returns {ESTreeJSX.JSXExpressionContainer}
  */
 function for_of_statement_to_jsx_child(node, transform_context) {
+	if (node.await) {
+		throw create_compile_error(
+			node,
+			'React TSRX does not support `for await...of` in component templates.',
+		);
+	}
+
 	if (node.key) {
 		throw create_compile_error(
 			node.key,
@@ -1529,7 +1585,15 @@ function for_of_statement_to_jsx_child(node, transform_context) {
 	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 key_expression = has_hooks ? find_key_expression_in_body(loop_body) : undefined;
+	const explicit_key_expression = has_hooks ? find_key_expression_in_body(loop_body) : 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)
+			: undefined;
 
 	// Add loop params to available bindings so hoisted helpers receive them as props
 	const saved_bindings = transform_context.available_bindings;
@@ -1542,6 +1606,10 @@ function for_of_statement_to_jsx_child(node, transform_context) {
 		? hook_safe_render_statements(loop_body, key_expression, transform_context)
 		: build_render_statements(loop_body, true, transform_context);
 
+	if (implicit_non_hook_key_expression) {
+		apply_key_to_render_statements(body_statements, implicit_non_hook_key_expression);
+	}
+
 	// Restore bindings
 	transform_context.available_bindings = saved_bindings;
 
@@ -1578,6 +1646,46 @@ function for_of_statement_to_jsx_child(node, transform_context) {
 	);
 }
 
+/**
+ * @param {any[]} statements
+ * @param {any} key_expression
+ * @returns {void}
+ */
+function apply_key_to_render_statements(statements, key_expression) {
+	for (let i = statements.length - 1; i >= 0; i -= 1) {
+		const statement = statements[i];
+		if (statement?.type !== 'ReturnStatement' || !statement.argument) {
+			continue;
+		}
+
+		if (statement.argument.type === 'JSXElement') {
+			const attributes = statement.argument.openingElement?.attributes || [];
+			const has_key = attributes.some(
+				(/** @type {any} */ attr) =>
+					attr.type === 'JSXAttribute' &&
+					attr.name?.type === 'JSXIdentifier' &&
+					attr.name.name === 'key',
+			);
+
+			if (!has_key) {
+				attributes.push(
+					/** @type {any} */ ({
+						type: 'JSXAttribute',
+						name: { type: 'JSXIdentifier', name: 'key', metadata: { path: [] } },
+						value: to_jsx_expression_container(
+							clone_expression_node(key_expression),
+							key_expression,
+						),
+						metadata: { path: [] },
+					}),
+				);
+			}
+		}
+
+		return;
+	}
+}
+
 /**
  * @param {any} node
  * @param {TransformContext} transform_context