From b308f0a205b78a3f232cdf1a7641adbd86706f9f Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Mon, 16 Dec 2024 04:25:14 +0800
Subject: [PATCH 1/8] fix(react-compiler): implement NumericLiteral as
 ObjectPropertyKey

---
 .../src/HIR/BuildHIR.ts                       |  5 +++
 ...c-literal-as-object-property-key.expect.md | 33 +++++++++++++++++++
 .../numeric-literal-as-object-property-key.js |  6 ++++
 3 files changed, 44 insertions(+)
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.expect.md
 create mode 100644 compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.js

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 4d9ce6becc17..487ae7c1b89a 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
@@ -1454,6 +1454,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/__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..f45a3c2c8969
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.expect.md
@@ -0,0 +1,33 @@
+
+## Input
+
+```javascript
+function Test() {
+  const obj = {
+    21: 'dimaMachina'
+  }
+  return <div />
+}
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function Test() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = <div />;
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+```
+      
+### Eval output
+(kind: exception) Fixture not implemented
\ 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..d3914f96848f
--- /dev/null
+++ b/compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/numeric-literal-as-object-property-key.js
@@ -0,0 +1,6 @@
+function Test() {
+  const obj = {
+    21: 'dimaMachina'
+  }
+  return <div />
+}

From 59f2dd157d55adf7fc6c85ce77a140f6939967d0 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Mon, 16 Dec 2024 04:37:38 +0800
Subject: [PATCH 2/8] update test to see object with numeric key in output

---
 .../numeric-literal-as-object-property-key.expect.md      | 8 +++++---
 .../compiler/numeric-literal-as-object-property-key.js    | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

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
index f45a3c2c8969..18b4bd99a6b1 100644
--- 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
@@ -6,7 +6,7 @@ function Test() {
   const obj = {
     21: 'dimaMachina'
   }
-  return <div />
+  return <div>{obj[21]}</div>
 }
 
 ```
@@ -19,7 +19,9 @@ function Test() {
   const $ = _c(1);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t0 = <div />;
+    const obj = { 21: "dimaMachina" };
+
+    t0 = <div>{obj[21]}</div>;
     $[0] = t0;
   } else {
     t0 = $[0];
@@ -30,4 +32,4 @@ function Test() {
 ```
       
 ### Eval output
-(kind: exception) Fixture not implemented
\ No newline at end of file
+(kind: exception) Fixture not implemented
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
index d3914f96848f..f6f44a36465e 100644
--- 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
@@ -2,5 +2,5 @@ function Test() {
   const obj = {
     21: 'dimaMachina'
   }
-  return <div />
+  return <div>{obj[21]}</div>
 }

From 52249bc1d39c1173ae9bb1d7eb2274dcee3a6d91 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Mon, 16 Dec 2024 04:38:54 +0800
Subject: [PATCH 3/8] update test

---
 .../compiler/numeric-literal-as-object-property-key.expect.md   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 18b4bd99a6b1..11e0366447fe 100644
--- 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
@@ -32,4 +32,4 @@ function Test() {
 ```
       
 ### Eval output
-(kind: exception) Fixture not implemented
+(kind: exception) Fixture not implemented
\ No newline at end of file

From 89226f8a1c93b562ed25b5e753a80e48573968a1 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Sat, 11 Jan 2025 00:53:24 +0800
Subject: [PATCH 4/8] add `export const FIXTURE_ENTRYPOINT`

---
 .../numeric-literal-as-object-property-key.expect.md | 12 +++++++++++-
 .../numeric-literal-as-object-property-key.js        |  5 +++++
 2 files changed, 16 insertions(+), 1 deletion(-)

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
index 11e0366447fe..b762ac3204be 100644
--- 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
@@ -9,6 +9,11 @@ function Test() {
   return <div>{obj[21]}</div>
 }
 
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};
+
 ```
 
 ## Code
@@ -29,7 +34,12 @@ function Test() {
   return t0;
 }
 
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};
+
 ```
       
 ### Eval output
-(kind: exception) Fixture not implemented
\ No newline at end of file
+(kind: ok) <div>dimaMachina</div>
\ 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
index f6f44a36465e..5496e57b27cb 100644
--- 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
@@ -4,3 +4,8 @@ function Test() {
   }
   return <div>{obj[21]}</div>
 }
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Test,
+  params: [{}],
+};

From d8c069b8ca5aa89380c9e5aefe7360e618bf4d30 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Thu, 27 Feb 2025 18:15:30 +0100
Subject: [PATCH 5/8] prettier

---
 .../babel-plugin-react-compiler/src/HIR/BuildHIR.ts         | 2 +-
 .../compiler/numeric-literal-as-object-property-key.js      | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

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 409a094e973c..43a23ade30dc 100644
--- a/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
+++ b/compiler/packages/babel-plugin-react-compiler/src/HIR/BuildHIR.ts
@@ -1459,7 +1459,7 @@ function lowerObjectPropertyKey(
     return {
       kind: 'identifier',
       name: String(key.node.value),
-    }
+    };
   }
 
   builder.errors.push({
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
index 5496e57b27cb..c1431c0f080b 100644
--- 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
@@ -1,8 +1,8 @@
 function Test() {
   const obj = {
-    21: 'dimaMachina'
-  }
-  return <div>{obj[21]}</div>
+    21: 'dimaMachina',
+  };
+  return <div>{obj[21]}</div>;
 }
 
 export const FIXTURE_ENTRYPOINT = {

From fcc2cba6f5db473a34267b40491af88d8e185456 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Mon, 17 Mar 2025 22:45:22 +0100
Subject: [PATCH 6/8] update snapshots

---
 .../numeric-literal-as-object-property-key.expect.md        | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

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
index b762ac3204be..d6a63a939943 100644
--- 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
@@ -4,9 +4,9 @@
 ```javascript
 function Test() {
   const obj = {
-    21: 'dimaMachina'
-  }
-  return <div>{obj[21]}</div>
+    21: 'dimaMachina',
+  };
+  return <div>{obj[21]}</div>;
 }
 
 export const FIXTURE_ENTRYPOINT = {

From 5499ae1c47a2293a32aa1cd184785f74e32934ea Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Mon, 17 Mar 2025 23:40:21 +0100
Subject: [PATCH 7/8] apply more review fixes

---
 .../src/HIR/HIR.ts                            |  4 +++
 .../src/HIR/PrintHIR.ts                       |  3 ++
 .../ReactiveScopes/CodegenReactiveFunction.ts |  3 ++
 ...c-literal-as-object-property-key.expect.md | 34 +++++++++++++++----
 .../numeric-literal-as-object-property-key.js |  9 ++++-
 5 files changed, 45 insertions(+), 8 deletions(-)

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
index d6a63a939943..40f0747ffcb4 100644
--- 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
@@ -6,7 +6,14 @@ function Test() {
   const obj = {
     21: 'dimaMachina',
   };
-  return <div>{obj[21]}</div>;
+  // Destructuring assignment
+  const {21: myVar} = obj;
+  return (
+    <div>
+      {obj[21]}
+      {myVar}
+    </div>
+  );
 }
 
 export const FIXTURE_ENTRYPOINT = {
@@ -21,17 +28,30 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { c as _c } from "react/compiler-runtime";
 function Test() {
-  const $ = _c(1);
+  const $ = _c(2);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    const obj = { 21: "dimaMachina" };
-
-    t0 = <div>{obj[21]}</div>;
+    t0 = { 21: "dimaMachina" };
     $[0] = t0;
   } else {
     t0 = $[0];
   }
-  return t0;
+  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 = {
@@ -42,4 +62,4 @@ export const FIXTURE_ENTRYPOINT = {
 ```
       
 ### Eval output
-(kind: ok) <div>dimaMachina</div>
\ No newline at end of file
+(kind: ok) <div>dimaMachinadimaMachina</div>
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
index c1431c0f080b..b385417bbdd3 100644
--- 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
@@ -2,7 +2,14 @@ function Test() {
   const obj = {
     21: 'dimaMachina',
   };
-  return <div>{obj[21]}</div>;
+  // Destructuring assignment
+  const {21: myVar} = obj;
+  return (
+    <div>
+      {obj[21]}
+      {myVar}
+    </div>
+  );
 }
 
 export const FIXTURE_ENTRYPOINT = {

From 1fb22ae0201d7d38ba75d91a77332b9c461a1f67 Mon Sep 17 00:00:00 2001
From: Dimitri POSTOLOV <dmytropostolov@gmail.com>
Date: Tue, 18 Mar 2025 00:11:32 +0100
Subject: [PATCH 8/8] whitespace issue

---
 .../compiler/numeric-literal-as-object-property-key.expect.md   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 40f0747ffcb4..32d2a5a259fd 100644
--- 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
@@ -62,4 +62,4 @@ export const FIXTURE_ENTRYPOINT = {
 ```
       
 ### Eval output
-(kind: ok) <div>dimaMachinadimaMachina</div>
+(kind: ok) <div>dimaMachinadimaMachina</div>
\ No newline at end of file