[compiler] Support enableRefAsProp in jsx transform (#31558)

Since `enableRefAsProp` shipped everywhere, the ReactElement implementation on prod puts refs on both `element.ref` and `element.props.ref`. Here we let the `ref` case fall through so its now available on props, matching the JSX runtime.
facebook · Nov 18, 2024 · 4beb1fd · 4beb1fd
1 parent 047d95e
commit 4beb1fd
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 24 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
@@ -559,28 +559,45 @@ function createPropsProperties(
   propAttributes.forEach(prop => {
     switch (prop.kind) {
       case 'JsxAttribute': {
-        if (prop.name === 'ref') {
-          refProperty = {
-            kind: 'ObjectProperty',
-            key: {name: 'ref', kind: 'string'},
-            type: 'property',
-            place: {...prop.place},
-          };
-        } else if (prop.name === 'key') {
-          keyProperty = {
-            kind: 'ObjectProperty',
-            key: {name: 'key', kind: 'string'},
-            type: 'property',
-            place: {...prop.place},
-          };
-        } else {
-          const attributeProperty: ObjectProperty = {
-            kind: 'ObjectProperty',
-            key: {name: prop.name, kind: 'string'},
-            type: 'property',
-            place: {...prop.place},
-          };
-          props.push(attributeProperty);
+        switch (prop.name) {
+          case 'key': {
+            keyProperty = {
+              kind: 'ObjectProperty',
+              key: {name: 'key', kind: 'string'},
+              type: 'property',
+              place: {...prop.place},
+            };
+            break;
+          }
+          case 'ref': {
+            /**
+             * In the current JSX implementation, ref is both
+             * a property on the element and a property on props.
+             */
+            refProperty = {
+              kind: 'ObjectProperty',
+              key: {name: 'ref', kind: 'string'},
+              type: 'property',
+              place: {...prop.place},
+            };
+            const refPropProperty: ObjectProperty = {
+              kind: 'ObjectProperty',
+              key: {name: 'ref', kind: 'string'},
+              type: 'property',
+              place: {...prop.place},
+            };
+            props.push(refPropProperty);
+            break;
+          }
+          default: {
+            const attributeProperty: ObjectProperty = {
+              kind: 'ObjectProperty',
+              key: {name: prop.name, kind: 'string'},
+              type: 'property',
+              place: {...prop.place},
+            };
+            props.push(attributeProperty);
+          }
         }
         break;
       }

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
@@ -91,7 +91,7 @@ function Parent(t0) {
         type: "div",
         ref: ref,
         key: null,
-        props: { children: children },
+        props: { ref: ref, children: children },
       };
     }
     $[0] = children;
@@ -180,7 +180,7 @@ function ParentAndRefAndKey(props) {
         type: Parent,
         ref: testRef,
         key: "testKey",
-        props: { a: "a", b: { b: "b" }, c: C },
+        props: { a: "a", b: { b: "b" }, c: C, ref: testRef },
       };
     }
     $[0] = t0;