fix(react-compiler): implement NumericLiteral as ObjectPropertyKey (#31791)
Dimitri POSTOLOV committed
Mar 18, 2025 at 00:30 UTC
90b511ec7a9f2f3fd2b7f0039d8fc52c23f573a1
6 files changed
+98
compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
+5
@@ -1455,6 +1455,11 @@ function lowerObjectPropertyKey(
1455
kind: 'identifier',
1456
name: key.node.name,
1457
};
1458
+ } else if (key.isNumericLiteral()) {
1459
+ return {
1460
+ kind: 'identifier',
1461
+ name: String(key.node.value),
1462
+ };
1463
}
1464
1465
builder.errors.push({
compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts
+4
@@ -703,6 +703,10 @@ export type ObjectPropertyKey =
703
| {
704
kind: 'computed';
705
name: Place;
706
+ }
707
+ | {
708
+ kind: 'number';
709
+ name: number;
710
};
711
712
export type ObjectProperty = {
compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts
+3
@@ -330,6 +330,9 @@ function printObjectPropertyKey(key: ObjectPropertyKey): string {
330
case 'computed': {
331
return `[${printPlace(key.name)}]`;
332
}
333
+ case 'number': {
334
+ return String(key.name);
335
+ }
336
}
337
}
338
compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts
+3
@@ -2429,6 +2429,9 @@ function codegenObjectPropertyKey(
2429
});
2430
return expr;
2431
}
2432
+ case 'number': {
2433
+ return t.numericLiteral(key.name);
2434
+ }
2435
}
2436
}
2437
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.expect.md
new
+65
@@ -0,0 +1,65 @@
1
+
2
+## Input
3
+
4
+```javascript
5
+function Test() {
6
+ const obj = {
7
+ 21: 'dimaMachina',
8
+ };
9
+ // Destructuring assignment
10
+ const {21: myVar} = obj;
11
+ return (
12
+ <div>
13
+ {obj[21]}
14
+ {myVar}
15
+ </div>
16
+ );
17
+}
18
+
19
+export const FIXTURE_ENTRYPOINT = {
20
+ fn: Test,
21
+ params: [{}],
22
+};
23
+
24
+```
25
+
26
+## Code
27
+
28
+```javascript
29
+import { c as _c } from "react/compiler-runtime";
30
+function Test() {
31
+ const $ = _c(2);
32
+ let t0;
33
+ if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
34
+ t0 = { 21: "dimaMachina" };
35
+ $[0] = t0;
36
+ } else {
37
+ t0 = $[0];
38
+ }
39
+ const obj = t0;
40
+
41
+ const { 21: myVar } = obj;
42
+ let t1;
43
+ if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
44
+ t1 = (
45
+ <div>
46
+ {obj[21]}
47
+ {myVar}
48
+ </div>
49
+ );
50
+ $[1] = t1;
51
+ } else {
52
+ t1 = $[1];
53
+ }
54
+ return t1;
55
+}
56
+
57
+export const FIXTURE_ENTRYPOINT = {
58
+ fn: Test,
59
+ params: [{}],
60
+};
61
+
62
+```
63
+
64
+### Eval output
65
+(kind: ok) <div>dimaMachinadimaMachina</div>
\ No newline at end of file
compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.js
new
+18
@@ -0,0 +1,18 @@
1
+function Test() {
2
+ const obj = {
3
+ 21: 'dimaMachina',
4
+ };
5
+ // Destructuring assignment
6
+ const {21: myVar} = obj;
7
+ return (
8
+ <div>
9
+ {obj[21]}
10
+ {myVar}
11
+ </div>
12
+ );
13
+}
14
+
15
+export const FIXTURE_ENTRYPOINT = {
16
+ fn: Test,
17
+ params: [{}],
18
+};