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 8a7dd10c245a..6f93ef2f3a3d 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts @@ -1455,6 +1455,11 @@ function lowerObjectPropertyKey( kind: 'identifier', name: key.node.name, }; + } else if (key.isNumericLiteral()) { + return { + kind: 'identifier', + name: String(key.node.value), + }; } builder.errors.push({ diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts index 1ca00ef5877c..5de4d9ba0c9e 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts @@ -703,6 +703,10 @@ export type ObjectPropertyKey = | { kind: 'computed'; name: Place; + } + | { + kind: 'number'; + name: number; }; export type ObjectProperty = { diff --git a/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts b/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts index 19d3f707b919..c8182c9e72a7 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/PrintHIR.ts @@ -330,6 +330,9 @@ function printObjectPropertyKey(key: ObjectPropertyKey): string { case 'computed': { return `[${printPlace(key.name)}]`; } + case 'number': { + return String(key.name); + } } } 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 6c89aea45ea4..f8a2bc4989c1 100644 --- a/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts +++ b/compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts @@ -2429,6 +2429,9 @@ function codegenObjectPropertyKey( }); return expr; } + case 'number': { + return t.numericLiteral(key.name); + } } } diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.expect.md b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.expect.md new file mode 100644 index 000000000000..32d2a5a259fd --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.expect.md @@ -0,0 +1,65 @@ + +## Input + +```javascript +function Test() { + const obj = { + 21: 'dimaMachina', + }; + // Destructuring assignment + const {21: myVar} = obj; + return ( +
+ {obj[21]} + {myVar} +
+ ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Test, + params: [{}], +}; + +``` + +## Code + +```javascript +import { c as _c } from "react/compiler-runtime"; +function Test() { + const $ = _c(2); + let t0; + if ($[0] === Symbol.for("react.memo_cache_sentinel")) { + t0 = { 21: "dimaMachina" }; + $[0] = t0; + } else { + t0 = $[0]; + } + const obj = t0; + + const { 21: myVar } = obj; + let t1; + if ($[1] === Symbol.for("react.memo_cache_sentinel")) { + t1 = ( +
+ {obj[21]} + {myVar} +
+ ); + $[1] = t1; + } else { + t1 = $[1]; + } + return t1; +} + +export const FIXTURE_ENTRYPOINT = { + fn: Test, + params: [{}], +}; + +``` + +### Eval output +(kind: ok)
dimaMachinadimaMachina
\ No newline at end of file diff --git a/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.js b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.js new file mode 100644 index 000000000000..b385417bbdd3 --- /dev/null +++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.js @@ -0,0 +1,18 @@ +function Test() { + const obj = { + 21: 'dimaMachina', + }; + // Destructuring assignment + const {21: myVar} = obj; + return ( +
+ {obj[21]} + {myVar} +
+ ); +} + +export const FIXTURE_ENTRYPOINT = { + fn: Test, + params: [{}], +};