[compiler] Support enableRefAsProp in jsx transform

jackpope · Nov 15, 2024 · b76ecd1 · b76ecd1
1 parent 0480cdb
commit b76ecd1
Show file tree

Hide file tree

Showing 2 changed files with 33 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,37 @@ 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;
+          }
+          // In the current JSX implementation, ref is both
+          // a property on the element and a property on props.
+          // Intentional fallthrough to push into props.
+          // @ts-expect-error
+          case 'ref': {
+            refProperty = {
+              kind: 'ObjectProperty',
+              key: {name: 'ref', kind: 'string'},
+              type: 'property',
+              place: {...prop.place},
+            };
+          }
+          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;