amirho/react
1
0
Fork 0
mirror of https://github.com/facebook/react.git synced 2026-02-22 03:42:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Jack Pope
2024-11-18 10:51:16 -05:00
committed by GitHub
parent 047d95e85f
commit 4beb1fd8ba
2 changed files with 41 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts
View File

@@ -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;
}

4
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.expect.md
View File

@@ -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;