From b76ecd1fb540f4cba8a4816f05523647b17ba4f0 Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Fri, 15 Nov 2024 16:56:32 -0500 Subject: [PATCH 1/3] [compiler] Support enableRefAsProp in jsx transform --- .../src/Optimization/InlineJsxTransform.ts | 53 +++++++++++-------- .../compiler/inline-jsx-transform.expect.md | 4 +- 2 files changed, 33 insertions(+), 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 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; From c3a8d6e31c607e76af51f04be02c37b0fe25f284 Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Mon, 18 Nov 2024 10:28:28 -0500 Subject: [PATCH 2/3] Use new place for ref prop --- .../src/Optimization/InlineJsxTransform.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 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 index 1bd6707743d0a..68922be371789 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts @@ -569,17 +569,23 @@ function createPropsProperties( }; 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': { + // 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 = { From 66854cbaf1f6a4195f912329528658357055e544 Mon Sep 17 00:00:00 2001 From: Jack Pope Date: Mon, 18 Nov 2024 10:36:41 -0500 Subject: [PATCH 3/3] lint --- .../src/Optimization/InlineJsxTransform.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 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 index 68922be371789..2851ed7ee39a1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts @@ -570,8 +570,10 @@ function createPropsProperties( break; } case 'ref': { - // In the current JSX implementation, ref is both - // a property on the element and a property on props. + /** + * 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'},