diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts index 233a5e4b32fc6..a75c7d9f4c667 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts @@ -129,6 +129,7 @@ export function lower( reactive: false, loc: param.node.loc ?? GeneratedSource, }; + promoteTemporary(place.identifier); params.push(place); lowerAssignment( builder, diff --git a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts index 37f596514b819..43e2b7c4bb31b 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts @@ -41,7 +41,6 @@ import { ValidIdentifierName, getHookKind, makeIdentifierName, - promoteTemporary, } from "../HIR/HIR"; import { printIdentifier, printPlace } from "../HIR/PrintHIR"; import { eachPatternOperand } from "../HIR/visitors"; @@ -278,16 +277,6 @@ export function codegenFunction( pruneUnusedLValues(reactiveFunction); pruneHoistedContexts(reactiveFunction); - /* - * TODO: temporary function params (due to destructuring) should always be - * promoted so that they can be renamed - */ - for (const param of reactiveFunction.params) { - const place = param.kind === "Identifier" ? param : param.place; - if (place.identifier.name === null) { - promoteTemporary(place.identifier); - } - } const identifiers = renameVariables(reactiveFunction); logReactiveFunction("Outline", reactiveFunction); const codegen = codegenReactiveFunction( diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-destructured-params.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-destructured-params.expect.md new file mode 100644 index 0000000000000..842188931244d --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-destructured-params.expect.md @@ -0,0 +1,65 @@ + +## Input + +```javascript +import { Stringify } from "shared-runtime"; + +function Component(props) { + // test outlined functions with destructured parameters - the + // temporary for the destructured param must be promoted + return ( + <> + {props.items.map(({ id, name }) => ( + + ))} + + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ items: [{ id: 1, name: "one" }] }], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +import { Stringify } from "shared-runtime"; + +function Component(props) { + const $ = _c(4); + let t0; + if ($[0] !== props.items) { + t0 = props.items.map(_temp); + $[0] = props.items; + $[1] = t0; + } else { + t0 = $[1]; + } + let t1; + if ($[2] !== t0) { + t1 = <>{t0}; + $[2] = t0; + $[3] = t1; + } else { + t1 = $[3]; + } + return t1; +} +function _temp(t0) { + const { id, name } = t0; + return ; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ items: [{ id: 1, name: "one" }] }], +}; + +``` + +### Eval output +(kind: ok)
{"name":"one"}
\ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-destructured-params.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-destructured-params.js new file mode 100644 index 0000000000000..2942502425767 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/outlined-destructured-params.js @@ -0,0 +1,18 @@ +import { Stringify } from "shared-runtime"; + +function Component(props) { + // test outlined functions with destructured parameters - the + // temporary for the destructured param must be promoted + return ( + <> + {props.items.map(({ id, name }) => ( + + ))} + + ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ items: [{ id: 1, name: "one" }] }], +};