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 1e41803b53118..3d183d30d1808 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/Optimization/InlineJsxTransform.ts @@ -14,6 +14,7 @@ import { makeInstructionId, ObjectProperty, Place, + SpreadPattern, } from '../HIR'; import { createTemporaryPlace, @@ -146,7 +147,7 @@ function createPropsProperties( } { let refProperty: ObjectProperty | undefined; let keyProperty: ObjectProperty | undefined; - const props: Array = []; + const props: Array = []; propAttributes.forEach(prop => { switch (prop.kind) { case 'JsxAttribute': @@ -175,7 +176,12 @@ function createPropsProperties( } break; case 'JsxSpreadAttribute': - // TODO + // TODO: Optimize spreads to pass object directly + // if none of its properties are mutated + props.push({ + kind: 'Spread', + place: {...prop.argument}, + }); break; } }); @@ -363,7 +369,6 @@ export function inlineJsxTransform(fn: HIRFunction): void { } } /** - * Step 4: * Fixup the HIR to restore RPO, ensure correct predecessors, and * renumber instructions. Note that the renumbering instructions * invalidates scope and identifier ranges, so we fix them in the @@ -374,7 +379,6 @@ export function inlineJsxTransform(fn: HIRFunction): void { markInstructionIds(fn.body); /** - * Step 5: * Fix scope and identifier ranges to account for renumbered instructions */ for (const [, block] of fn.body.blocks) { 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 1fb65ccff0a0c..52a5497d981a6 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 @@ -34,6 +34,11 @@ function ParentAndChildren(props) { ) } +const propsToSpread = {a: 'a', b: 'b', c: 'c'}; +function PropsSpread() { + return +} + export const FIXTURE_ENTRYPOINT = { fn: ParentAndChildren, params: [{foo: 'abc'}], @@ -192,6 +197,25 @@ function ParentAndChildren(props) { return t2; } +const propsToSpread = { a: "a", b: "b", c: "c" }; +function PropsSpread() { + const $ = _c2(1); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 = { + $$typeof: Symbol.for("react.transitional.element"), + type: Test, + ref: null, + key: null, + props: { ...propsToSpread }, + }; + $[0] = t0; + } else { + t0 = $[0]; + } + return t0; +} + export const FIXTURE_ENTRYPOINT = { fn: ParentAndChildren, params: [{ foo: "abc" }], diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.js index a79d055e5d7b7..1508214b8f713 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.js +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/inline-jsx-transform.js @@ -30,6 +30,11 @@ function ParentAndChildren(props) { ) } +const propsToSpread = {a: 'a', b: 'b', c: 'c'}; +function PropsSpread() { + return +} + export const FIXTURE_ENTRYPOINT = { fn: ParentAndChildren, params: [{foo: 'abc'}],