Support prop spreads

facebook · Sep 3, 2024 · 87482f0 · 87482f0
1 parent a3b018e
commit 87482f0
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 4 deletions.
diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts
@@ -14,6 +14,7 @@ import {
   makeInstructionId,
   ObjectProperty,
   Place,
+  SpreadPattern,
 } from '../HIR';
 import {
   createTemporaryPlace,
@@ -146,7 +147,7 @@ function createPropsProperties(
 } {
   let refProperty: ObjectProperty | undefined;
   let keyProperty: ObjectProperty | undefined;
-  const props: Array<ObjectProperty> = [];
+  const props: Array<ObjectProperty | SpreadPattern> = [];
   propAttributes.forEach(prop => {
     switch (prop.kind) {
       case 'JsxAttribute':
@@ -175,7 +176,12 @@ function createPropsProperties(
         }
         break;
       case 'JsxSpreadAttribute':
-        // TODO
+        // TODO: Optimize spreads to pass object directly
+        // if none of its properties are mutated
+        props.push({
+          kind: 'Spread',
+          place: {...prop.argument},
+        });
         break;
     }
   });
@@ -363,7 +369,6 @@ export function inlineJsxTransform(fn: HIRFunction): void {
     }
   }
   /**
-   * Step 4:
    * Fixup the HIR to restore RPO, ensure correct predecessors, and
    * renumber instructions. Note that the renumbering instructions
    * invalidates scope and identifier ranges, so we fix them in the
@@ -374,7 +379,6 @@ export function inlineJsxTransform(fn: HIRFunction): void {
   markInstructionIds(fn.body);
 
   /**
-   * Step 5:
    * Fix scope and identifier ranges to account for renumbered instructions
    */
   for (const [, block] of fn.body.blocks) {

diff --git a/...n-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md b/...n-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md
@@ -34,6 +34,11 @@ function ParentAndChildren(props) {
   )
 }
 
+const propsToSpread = {a: 'a', b: 'b', c: 'c'};
+function PropsSpread() {
+  return <Test {...propsToSpread} />
+}
+
 export const FIXTURE_ENTRYPOINT = {
   fn: ParentAndChildren,
   params: [{foo: 'abc'}],
@@ -192,6 +197,25 @@ function ParentAndChildren(props) {
   return t2;
 }
 
+const propsToSpread = { a: "a", b: "b", c: "c" };
+function PropsSpread() {
+  const $ = _c2(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      $$typeof: Symbol.for("react.transitional.element"),
+      type: Test,
+      ref: null,
+      key: null,
+      props: { ...propsToSpread },
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
 export const FIXTURE_ENTRYPOINT = {
   fn: ParentAndChildren,
   params: [{ foo: "abc" }],

diff --git a/...kages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.js b/...kages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.js
@@ -30,6 +30,11 @@ function ParentAndChildren(props) {
   )
 }
 
+const propsToSpread = {a: 'a', b: 'b', c: 'c'};
+function PropsSpread() {
+  return <Test {...propsToSpread} />
+}
+
 export const FIXTURE_ENTRYPOINT = {
   fn: ParentAndChildren,
   params: [{foo: 'abc'}],