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 0ab7934a1a6..e4b8cd47f7c 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts @@ -2104,7 +2104,7 @@ function codegenInstructionValue( key, fn.params, fn.body, - false, + property.key.kind === 'computed', ); babelNode.async = fn.async; babelNode.generator = fn.generator; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-computed-key.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-computed-key.expect.md new file mode 100644 index 00000000000..701d4954adc --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-computed-key.expect.md @@ -0,0 +1,55 @@ + +## Input + +```javascript +const computedPropKey = 'foobar'; + +function Component(props) { + const obj = { + [computedPropKey]() { + return props.value; + }, + }; + return obj[computedPropKey](); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 42}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +const computedPropKey = "foobar"; + +function Component(props) { + const $ = _c(2); + let t0; + if ($[0] !== props) { + const obj = { + [computedPropKey]() { + return props.value; + }, + }; + t0 = obj[computedPropKey](); + $[0] = props; + $[1] = t0; + } else { + t0 = $[1]; + } + return t0; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{ value: 42 }], +}; + +``` + +### Eval output +(kind: ok) 42 \ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-computed-key.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-computed-key.js new file mode 100644 index 00000000000..75a0fa36a87 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-computed-key.js @@ -0,0 +1,15 @@ +const computedPropKey = 'foobar'; + +function Component(props) { + const obj = { + [computedPropKey]() { + return props.value; + }, + }; + return obj[computedPropKey](); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{value: 42}], +}; diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-computed-key.tsx b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-computed-key.tsx new file mode 100644 index 00000000000..a73f5e60823 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/object-method-shorthand-computed-key.tsx @@ -0,0 +1,24 @@ +const computedPropKey = 'foobar'; + +function Bar({obj}: {obj: any}) { + return
{obj[computedPropKey]()}
; +} + +function Component() { + return ( +
+ +
+ ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Component, + params: [{}], +};