@tsrx/react 0.0.6 → 0.1.0

package/package.json

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

package/src/transform.js

@@ -14,6 +14,9 @@ import {
 	replaceLazyParams as replace_lazy_params,
 	prepareStylesheetForRender as prepare_stylesheet_for_render,
 	annotateComponentWithHash as annotate_component_with_hash,
+	isInterleavedBody as is_interleaved_body_core,
+	isCapturableJsxChild as is_capturable_jsx_child,
+	captureJsxChild,
 } from '@tsrx/core';
 
 /**
@@ -51,7 +54,6 @@ 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 = {
@@ -71,13 +73,6 @@ export function transform(ast, source, filename) {
 			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 || {}),
@@ -304,6 +299,10 @@ function build_component_statements(
 	const render_nodes = [];
 	const bindings = new Map(available_bindings);
 
+	const pre_split_body = body_nodes.slice(0, split_index);
+	const interleaved = is_interleaved_body(pre_split_body);
+	let capture_index = 0;
+
 	for (let i = 0; i < split_index; i += 1) {
 		const child = body_nodes[i];
 
@@ -318,7 +317,14 @@ function build_component_statements(
 		}
 
 		if (is_jsx_child(child)) {
-			render_nodes.push(to_jsx_child(child, transform_context));
+			const jsx = to_jsx_child(child, transform_context);
+			if (interleaved && is_capturable_jsx_child(jsx)) {
+				const { declaration, reference } = captureJsxChild(jsx, capture_index++);
+				statements.push(declaration);
+				render_nodes.push(reference);
+			} else {
+				render_nodes.push(jsx);
+			}
 		} else {
 			statements.push(child);
 			collect_statement_bindings(child, bindings);
@@ -326,7 +332,9 @@ function build_component_statements(
 		}
 	}
 
-	hoist_static_render_nodes(render_nodes, transform_context);
+	if (!interleaved) {
+		hoist_static_render_nodes(render_nodes, transform_context);
+	}
 
 	const split_node = body_nodes[split_index];
 	const consequent_body =
@@ -389,6 +397,14 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 	const saved_bindings = transform_context.available_bindings;
 	transform_context.available_bindings = new Map(saved_bindings);
 
+	// When non-JSX statements are interleaved with JSX children, we must
+	// preserve source order so each JSX expression sees the variable state
+	// at its textual position. Otherwise statements would all run before
+	// any JSX is constructed, and every JSX child would observe the final
+	// state of mutable variables.
+	const interleaved = is_interleaved_body(body_nodes);
+	let capture_index = 0;
+
 	for (const child of body_nodes) {
 		if (is_bare_return_statement(child)) {
 			statements.push(create_component_return_statement(render_nodes, child));
@@ -402,14 +418,23 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 		}
 
 		if (is_jsx_child(child)) {
-			render_nodes.push(to_jsx_child(child, transform_context));
+			const jsx = to_jsx_child(child, transform_context);
+			if (interleaved && is_capturable_jsx_child(jsx)) {
+				const { declaration, reference } = captureJsxChild(jsx, capture_index++);
+				statements.push(declaration);
+				render_nodes.push(reference);
+			} else {
+				render_nodes.push(jsx);
+			}
 		} else {
 			statements.push(child);
 			collect_statement_bindings(child, transform_context.available_bindings);
 		}
 	}
 
-	hoist_static_render_nodes(render_nodes, transform_context);
+	if (!interleaved) {
+		hoist_static_render_nodes(render_nodes, transform_context);
+	}
 
 	const return_arg = build_return_expression(render_nodes);
 	if (return_arg || return_null_when_empty) {
@@ -423,6 +448,22 @@ function build_render_statements(body_nodes, return_null_when_empty, transform_c
 	return statements;
 }
 
+/**
+ * React-specific wrapper around the core `isInterleavedBody` helper that
+ * ignores bare `return` / lone return-if statements. Those are rewriting
+ * signals rather than user-visible side effects, so JSX children around
+ * them don't need capturing.
+ *
+ * @param {any[]} body_nodes
+ * @returns {boolean}
+ */
+function is_interleaved_body(body_nodes) {
+	const filtered = body_nodes.filter(
+		(child) => !is_bare_return_statement(child) && !is_lone_return_if_statement(child),
+	);
+	return is_interleaved_body_core(filtered, is_jsx_child);
+}
+
 /**
  * @param {any[]} body_nodes
  * @returns {number}
@@ -535,34 +576,6 @@ 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
@@ -881,6 +894,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.
@@ -896,6 +1019,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');
@@ -1092,6 +1216,19 @@ function to_jsx_element(node, transform_context) {
 		return dynamic_element_to_jsx_child(node, transform_context);
 	}
 
+	if (!node.id) {
+		const children = create_element_children(node.children || [], transform_context);
+		return set_loc(
+			/** @type {any} */ ({
+				type: 'JSXFragment',
+				openingFragment: { type: 'JSXOpeningFragment' },
+				closingFragment: { type: 'JSXClosingFragment' },
+				children,
+			}),
+			node,
+		);
+	}
+
 	const name = identifier_to_jsx_name(node.id);
 	const attributes = (node.attributes || []).map(to_jsx_attribute);
 	const selfClosing = !!node.selfClosing;