@tsrx/react 0.0.5 → 0.0.7

package/package.json

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

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
@@ -832,6 +881,116 @@ 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.
@@ -847,6 +1006,7 @@ function hoist_static_render_nodes(render_nodes, transform_context) {
 	for (let i = 0; i < render_nodes.length; i++) {
 		const node = render_nodes[i];
 		if (node.type !== 'JSXElement') continue;
+		if (!is_hoist_safe_jsx_node(node)) continue;
 		if (references_scope_bindings(node, transform_context.available_bindings)) continue;
 
 		const name = create_helper_name(transform_context.helper_state, 'static');
@@ -1519,6 +1679,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 +1696,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 +1717,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 +1757,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