Add inline jsx transform

facebook · Sep 16, 2024 · 8b69a6f · 8b69a6f
1 parent 8152e5c
commit 8b69a6f
Show file tree

Hide file tree

Showing 8 changed files with 699 additions and 14 deletions.
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts b/compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts
@@ -41,6 +41,7 @@ import {
   constantPropagation,
   deadCodeElimination,
   pruneMaybeThrows,
+  inlineJsxTransform,
 } from '../Optimization';
 import {instructionReordering} from '../Optimization/InstructionReordering';
 import {
@@ -351,6 +352,15 @@ function* runWithEnvironment(
     });
   }
 
+  if (env.config.enableInlineJsxTransform) {
+    inlineJsxTransform(hir);
+    yield log({
+      kind: 'hir',
+      name: 'inlineJsxTransform',
+      value: hir,
+    });
+  }
+
   const reactiveFunction = buildReactiveFunction(hir);
   yield log({
     kind: 'reactive',

diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildReactiveScopeTerminalsHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildReactiveScopeTerminalsHIR.ts
@@ -14,6 +14,7 @@ import {
   ScopeId,
 } from './HIR';
 import {
+  fixScopeAndIdentifierRanges,
   markInstructionIds,
   markPredecessors,
   reversePostorderBlocks,
@@ -176,20 +177,7 @@ export function buildReactiveScopeTerminalsHIR(fn: HIRFunction): void {
    * Step 5:
    * Fix scope and identifier ranges to account for renumbered instructions
    */
-  for (const [, block] of fn.body.blocks) {
-    const terminal = block.terminal;
-    if (terminal.kind === 'scope' || terminal.kind === 'pruned-scope') {
-      /*
-       * Scope ranges should always align to start at the 'scope' terminal
-       * and end at the first instruction of the fallthrough block
-       */
-      const fallthroughBlock = fn.body.blocks.get(terminal.fallthrough)!;
-      const firstId =
-        fallthroughBlock.instructions[0]?.id ?? fallthroughBlock.terminal.id;
-      terminal.scope.range.start = terminal.id;
-      terminal.scope.range.end = firstId;
-    }
-  }
+  fixScopeAndIdentifierRanges(fn.body);
 }
 
 type TerminalRewriteInfo =

diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts
@@ -233,6 +233,13 @@ const EnvironmentConfigSchema = z.object({
    */
   enableOptionalDependencies: z.boolean().default(true),
 
+  /**
+   * Enables inlining ReactElement object literals in place of JSX
+   * An alternative to the standard JSX transform which replaces JSX with React's jsxProd() runtime
+   * Currently a prod-only optimization, requiring Fast JSX dependencies
+   */
+  enableInlineJsxTransform: z.boolean().default(false),
+
   /*
    * Enable validation of hooks to partially check that the component honors the rules of hooks.
    * When disabled, the component is assumed to follow the rules (though the Babel plugin looks

diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIRBuilder.ts
@@ -17,6 +17,7 @@ import {
   GeneratedSource,
   GotoVariant,
   HIR,
+  HIRFunction,
   Identifier,
   IdentifierId,
   Instruction,
@@ -912,3 +913,23 @@ export function clonePlaceToTemporary(env: Environment, place: Place): Place {
   temp.reactive = place.reactive;
   return temp;
 }
+
+/**
+ * Fix scope and identifier ranges to account for renumbered instructions
+ */
+export function fixScopeAndIdentifierRanges(func: HIR): void {
+  for (const [, block] of func.blocks) {
+    const terminal = block.terminal;
+    if (terminal.kind === 'scope' || terminal.kind === 'pruned-scope') {
+      /*
+       * Scope ranges should always align to start at the 'scope' terminal
+       * and end at the first instruction of the fallthrough block
+       */
+      const fallthroughBlock = func.blocks.get(terminal.fallthrough)!;
+      const firstId =
+        fallthroughBlock.instructions[0]?.id ?? fallthroughBlock.terminal.id;
+      terminal.scope.range.start = terminal.id;
+      terminal.scope.range.end = firstId;
+    }
+  }
+}