[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.
Jack Pope committed
Nov 18, 2024 at 10:51 UTC
4beb1fd8bacacd3f4faeb180bca00ea0edcf27e4
2 files changed
+41
-24
compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts
+39
-22
@@ -559,28 +559,45 @@ function createPropsProperties(
559
propAttributes.forEach(prop => {
560
switch (prop.kind) {
561
case 'JsxAttribute': {
562
- if (prop.name === 'ref') {
563
- refProperty = {
564
- kind: 'ObjectProperty',
565
- key: {name: 'ref', kind: 'string'},
566
- type: 'property',
567
- place: {...prop.place},
568
- };
569
- } else if (prop.name === 'key') {
570
- keyProperty = {
571
- kind: 'ObjectProperty',
572
- key: {name: 'key', kind: 'string'},
573
- type: 'property',
574
- place: {...prop.place},
575
- };
576
- } else {
577
- const attributeProperty: ObjectProperty = {
578
- kind: 'ObjectProperty',
579
- key: {name: prop.name, kind: 'string'},
580
- type: 'property',
581
- place: {...prop.place},
582
- };
583
- props.push(attributeProperty);
562
+ switch (prop.name) {
563
+ case 'key': {
564
+ keyProperty = {
565
+ kind: 'ObjectProperty',
566
+ key: {name: 'key', kind: 'string'},
567
+ type: 'property',
568
+ place: {...prop.place},
569
+ };
570
+ break;
571
+ }
572
+ case 'ref': {
573
+ /**
574
+ * In the current JSX implementation, ref is both
575
+ * a property on the element and a property on props.
576
+ */
577
+ refProperty = {
578
+ kind: 'ObjectProperty',
579
+ key: {name: 'ref', kind: 'string'},
580
+ type: 'property',
581
+ place: {...prop.place},
582
+ };
583
+ const refPropProperty: ObjectProperty = {
584
+ kind: 'ObjectProperty',
585
+ key: {name: 'ref', kind: 'string'},
586
+ type: 'property',
587
+ place: {...prop.place},
588
+ };
589
+ props.push(refPropProperty);
590
+ break;
591
+ }
592
+ default: {
593
+ const attributeProperty: ObjectProperty = {
594
+ kind: 'ObjectProperty',
595
+ key: {name: prop.name, kind: 'string'},
596
+ type: 'property',
597
+ place: {...prop.place},
598
+ };
599
+ props.push(attributeProperty);
600
+ }
601
}
602
break;
603
}
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md
+2
-2
@@ -91,7 +91,7 @@ function Parent(t0) {
91
type: "div",
92
ref: ref,
93
key: null,
94
- props: { children: children },
94
+ props: { ref: ref, children: children },
95
};
96
}
97
$[0] = children;
@@ -180,7 +180,7 @@ function ParentAndRefAndKey(props) {
180
type: Parent,
181
ref: testRef,
182
key: "testKey",
183
- props: { a: "a", b: { b: "b" }, c: C },
183
+ props: { a: "a", b: { b: "b" }, c: C, ref: testRef },
184
};
185
}
186
$[0] = t0;