[compiler] Outline jsx with duplicate attributes

Previously, we would skip outlining jsx expressions that had duplicate
jsx attributes as we would not rename them causing incorrect
compilation.

In thir PR, we add outlining support for duplicate jsx attributes by
renaming them.

ghstack-source-id: bfcf94bd02ad11945fc18b787f22c06c1f11dea1
Pull Request resolved: #31378

compiler/packages/babel-plugin-react-compiler/src/Optimization/OutlineJsx.ts

@@ -222,6 +222,8 @@ function collectProps(
   const attributes: Array<OutlinedJsxAttribute> = [];
   const jsxIds = new Set(instructions.map(i => i.lvalue.identifier.id));
   const seen: Set<string> = new Set();
+  let id = 1;
+
   for (const instr of instructions) {
     const {value} = instr;
 
@@ -230,21 +232,13 @@ function collectProps(
         return null;
       }
 
-      /*
-       * TODO(gsn): Handle attributes that have same value across
-       * the outlined jsx instructions.
-       */
-      if (seen.has(at.name)) {
-        return null;
-      }
-
       if (at.kind === 'JsxAttribute') {
-        seen.add(at.name);
         attributes.push({
           originalName: at.name,
-          newName: at.name,
+          newName: seen.has(at.name) ? `${at.name}${id++}` : at.name,
           place: at.place,
         });
+        seen.add(at.name);
       }
     }
 

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo.jsx-outlining-duplicate-prop.expect.md → compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-duplicate-prop.expect.md

@@ -58,12 +58,10 @@ function Component(t0) {
   if ($[0] !== x || $[1] !== arr) {
     let t2;
     if ($[3] !== x) {
-      t2 = (i, id) => (
-        <Bar key={id} x={x}>
-          <Baz i={i} />
-          <Foo i={i} />
-        </Bar>
-      );
+      t2 = (i, id) => {
+        const T0 = _temp;
+        return <T0 i={i} i1={i} key={id} x={x} />;
+      };
       $[3] = x;
       $[4] = t2;
     } else {
@@ -86,6 +84,42 @@ function Component(t0) {
   }
   return t2;
 }
+function _temp(t0) {
+  const $ = _c(8);
+  const { i: i, i1: i1, x: x } = t0;
+  let t1;
+  if ($[0] !== i) {
+    t1 = <Baz i={i} />;
+    $[0] = i;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== i1) {
+    t2 = <Foo i={i1} />;
+    $[2] = i1;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== x || $[5] !== t1 || $[6] !== t2) {
+    t3 = (
+      <Bar x={x}>
+        {t1}
+        {t2}
+      </Bar>
+    );
+    $[4] = x;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  return t3;
+}
 
 function Bar(t0) {
   const $ = _c(3);