diff --git a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts index d97a4da1eccc4..1bd6707743d0a 100644 --- 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/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md index f622b3a6fd667..91bd0ad0b750e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md +++ b/compiler/packages/babel-plugin-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;