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 486773d5eb91..115fd1195dc3 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts @@ -9,6 +9,7 @@ import * as t from '@babel/types'; import {createHmac} from 'crypto'; import { pruneHoistedContexts, + promoteUsedTemporaries, pruneUnusedLValues, pruneUnusedLabels, renameVariables, @@ -311,6 +312,7 @@ export function codegenFunction( const reactiveFunction = buildReactiveFunction(outlinedFunction); pruneUnusedLabels(reactiveFunction); pruneUnusedLValues(reactiveFunction); + promoteUsedTemporaries(reactiveFunction); pruneHoistedContexts(reactiveFunction); const identifiers = renameVariables(reactiveFunction); @@ -1665,11 +1667,16 @@ function codegenInstructionValue( const reactiveFunction = buildReactiveFunction(loweredFunc.func); pruneUnusedLabels(reactiveFunction); pruneUnusedLValues(reactiveFunction); + promoteUsedTemporaries(reactiveFunction); + const identifiers = new Set([ + ...cx.uniqueIdentifiers, + ...renameVariables(reactiveFunction), + ]); const fn = codegenReactiveFunction( new Context( cx.env, reactiveFunction.id ?? '[[ anonymous ]]', - cx.uniqueIdentifiers, + identifiers, cx.fbtOperands, cx.temp, ), @@ -1863,12 +1870,17 @@ function codegenInstructionValue( const reactiveFunction = buildReactiveFunction(loweredFunc); pruneUnusedLabels(reactiveFunction); pruneUnusedLValues(reactiveFunction); + promoteUsedTemporaries(reactiveFunction); pruneHoistedContexts(reactiveFunction); + const identifiers = new Set([ + ...cx.uniqueIdentifiers, + ...renameVariables(reactiveFunction), + ]); const fn = codegenReactiveFunction( new Context( cx.env, reactiveFunction.id ?? '[[ anonymous ]]', - cx.uniqueIdentifiers, + identifiers, cx.fbtOperands, cx.temp, ), diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-ref-prefix-postfix-operator.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-ref-prefix-postfix-operator.expect.md index ccfc45175000..d62efa4111e2 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-ref-prefix-postfix-operator.expect.md +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-ref-prefix-postfix-operator.expect.md @@ -77,8 +77,9 @@ function useFoo() { let t0; if ($[0] === Symbol.for("react.memo_cache_sentinel")) { t0 = () => { - count.current = count.current + 1; - const id = count.current; + const t0 = count.current; + count.current = t0 + 1; + const id = t0; return id; }; $[0] = t0; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/postfix-member-assignment-in-callback.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/postfix-member-assignment-in-callback.expect.md new file mode 100644 index 000000000000..85e319032e52 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/postfix-member-assignment-in-callback.expect.md @@ -0,0 +1,67 @@ + +## Input + +```javascript +function Component(props) { + const agg = {itemCounter: props.start}; + const next = () => { + const count = agg.itemCounter++; + return count; + }; + return [next(), agg.itemCounter]; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{start: 1}], + isComponent: false, +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +function Component(props) { + const $ = _c(6); + let agg; + let t0; + if ($[0] !== props.start) { + agg = { itemCounter: props.start }; + const next = () => { + const t0 = agg.itemCounter; + agg.itemCounter = t0 + 1; + const count = t0; + return count; + }; + t0 = next(); + $[0] = props.start; + $[1] = agg; + $[2] = t0; + } else { + agg = $[1]; + t0 = $[2]; + } + let t1; + if ($[3] !== agg.itemCounter || $[4] !== t0) { + t1 = [t0, agg.itemCounter]; + $[3] = agg.itemCounter; + $[4] = t0; + $[5] = t1; + } else { + t1 = $[5]; + } + return t1; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ start: 1 }], + isComponent: false, +}; + +``` + +### Eval output +(kind: ok) [1,2] \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/postfix-member-assignment-in-callback.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/postfix-member-assignment-in-callback.js new file mode 100644 index 000000000000..867645153520 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/postfix-member-assignment-in-callback.js @@ -0,0 +1,14 @@ +function Component(props) { + const agg = {itemCounter: props.start}; + const next = () => { + const count = agg.itemCounter++; + return count; + }; + return [next(), agg.itemCounter]; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{start: 1}], + isComponent: false, +};