Skip to content

Commit af913a2

Browse files
committed
[compiler] Fix computed property keys in object method shorthand
Fixes #35203 The compiler was incorrectly discarding computed property key notation when used with method shorthand syntax, transforming `[key]() {}` into `key() {}`. Changed the hardcoded `false` parameter to `property.key.kind === 'computed'` in CodegenReactiveFunction.ts to preserve computed keys, matching the pattern already used for regular object properties.
1 parent 1721e73 commit af913a2

4 files changed

Lines changed: 95 additions & 1 deletion

File tree

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2104,7 +2104,7 @@ function codegenInstructionValue(
21042104
key,
21052105
fn.params,
21062106
fn.body,
2107-
false,
2107+
property.key.kind === 'computed',
21082108
);
21092109
babelNode.async = fn.async;
21102110
babelNode.generator = fn.generator;
Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
2+
## Input
3+
4+
```javascript
5+
const computedPropKey = 'foobar';
6+
7+
function Component(props) {
8+
const obj = {
9+
[computedPropKey]() {
10+
return props.value;
11+
},
12+
};
13+
return obj[computedPropKey]();
14+
}
15+
16+
export const FIXTURE_ENTRYPOINT = {
17+
fn: Component,
18+
params: [{value: 42}],
19+
};
20+
21+
```
22+
23+
## Code
24+
25+
```javascript
26+
import { c as _c } from "react/compiler-runtime";
27+
const computedPropKey = "foobar";
28+
29+
function Component(props) {
30+
const $ = _c(2);
31+
let t0;
32+
if ($[0] !== props) {
33+
const obj = {
34+
[computedPropKey]() {
35+
return props.value;
36+
},
37+
};
38+
t0 = obj[computedPropKey]();
39+
$[0] = props;
40+
$[1] = t0;
41+
} else {
42+
t0 = $[1];
43+
}
44+
return t0;
45+
}
46+
47+
export const FIXTURE_ENTRYPOINT = {
48+
fn: Component,
49+
params: [{ value: 42 }],
50+
};
51+
52+
```
53+
54+
### Eval output
55+
(kind: ok) 42
Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const computedPropKey = 'foobar';
2+
3+
function Component(props) {
4+
const obj = {
5+
[computedPropKey]() {
6+
return props.value;
7+
},
8+
};
9+
return obj[computedPropKey]();
10+
}
11+
12+
export const FIXTURE_ENTRYPOINT = {
13+
fn: Component,
14+
params: [{value: 42}],
15+
};
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const computedPropKey = 'foobar';
2+
3+
function Bar({obj}: {obj: any}) {
4+
return <div>{obj[computedPropKey]()}</div>;
5+
}
6+
7+
function Component() {
8+
return (
9+
<div>
10+
<Bar
11+
obj={{
12+
[computedPropKey]() {
13+
return 'Hello';
14+
},
15+
}}
16+
/>
17+
</div>
18+
);
19+
}
20+
21+
export const FIXTURE_ENTRYPOINT = {
22+
fn: Component,
23+
params: [{}],
24+
};

0 commit comments

Comments
 (0)