fix(react-compiler): implement NumericLiteral as ObjectPropertyKey (#31791)

Author: dimaMachina

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({

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 = {

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);
+    }
   }
 }
 

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);
+    }
   }
 }
 

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 (
+    <div>
+      {obj[21]}
+      {myVar}
+    </div>
+  );
+}
+
+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 = (
+      <div>
+        {obj[21]}
+        {myVar}
+      </div>
+    );
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>dimaMachinadimaMachina</div>

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 (
+    <div>
+      {obj[21]}
+      {myVar}
+    </div>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};