[compiler][ez] Patch Array.concat object shape to capture callee

ghstack-source-id: 503fbf8
Pull Request resolved: #30074

Author: mofeiZ

compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts

@@ -237,7 +237,7 @@ addObject(BUILTIN_SHAPES, BuiltInArrayId, [
         kind: "Object",
         shapeId: BuiltInArrayId,
       },
-      calleeEffect: Effect.Read,
+      calleeEffect: Effect.Capture,
       returnValueKind: ValueKind.Mutable,
     }),
   ],

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-array-concat-should-capture.expect.md renamed to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-concat-should-capture.expect.md

@@ -40,24 +40,17 @@ import { mutate } from "shared-runtime";
  *    itself.
  */
 function Foo(t0) {
-  const $ = _c(3);
+  const $ = _c(2);
   const { inputNum } = t0;
-  let t1;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = [{ a: 1 }, {}];
-    $[0] = t1;
-  } else {
-    t1 = $[0];
-  }
-  const arr1 = t1;
   let arr2;
-  if ($[1] !== inputNum) {
+  if ($[0] !== inputNum) {
+    const arr1 = [{ a: 1 }, {}];
     arr2 = arr1.concat([1, inputNum]);
     mutate(arr2[0]);
-    $[1] = inputNum;
-    $[2] = arr2;
+    $[0] = inputNum;
+    $[1] = arr2;
   } else {
-    arr2 = $[2];
+    arr2 = $[1];
   }
   return arr2;
 }
@@ -69,4 +62,7 @@ export const FIXTURE_ENTRYPOINT = {
 };
 
 ```
-      
+      
+### Eval output
+(kind: ok) [{"a":1,"wat0":"joe"},{},1,2]
+[{"a":1,"wat0":"joe"},{},1,3]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-array-concat-should-capture.ts renamed to compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-concat-should-capture.ts

@@ -40,53 +40,46 @@ import { useCallback } from "react";
 import { Stringify } from "shared-runtime";
 
 function Foo(t0) {
-  const $ = _c(11);
+  const $ = _c(9);
   const { arr1, arr2, foo } = t0;
   let t1;
-  if ($[0] !== arr1) {
-    t1 = [arr1];
-    $[0] = arr1;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  const x = t1;
-  let t2;
   let getVal1;
-  if ($[2] !== foo || $[3] !== x || $[4] !== arr2) {
+  if ($[0] !== arr1 || $[1] !== foo || $[2] !== arr2) {
+    const x = [arr1];
+
     let y;
     y = [];
-    let t3;
-    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-      t3 = () => ({ x: 2 });
-      $[7] = t3;
+    let t2;
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = () => ({ x: 2 });
+      $[5] = t2;
     } else {
-      t3 = $[7];
+      t2 = $[5];
     }
-    getVal1 = t3;
+    getVal1 = t2;
 
-    t2 = () => [y];
+    t1 = () => [y];
     foo ? (y = x.concat(arr2)) : y;
-    $[2] = foo;
-    $[3] = x;
-    $[4] = arr2;
-    $[5] = t2;
-    $[6] = getVal1;
+    $[0] = arr1;
+    $[1] = foo;
+    $[2] = arr2;
+    $[3] = t1;
+    $[4] = getVal1;
   } else {
-    t2 = $[5];
-    getVal1 = $[6];
+    t1 = $[3];
+    getVal1 = $[4];
   }
-  const getVal2 = t2;
-  let t3;
-  if ($[8] !== getVal1 || $[9] !== getVal2) {
-    t3 = <Stringify val1={getVal1} val2={getVal2} shouldInvokeFns={true} />;
-    $[8] = getVal1;
-    $[9] = getVal2;
-    $[10] = t3;
+  const getVal2 = t1;
+  let t2;
+  if ($[6] !== getVal1 || $[7] !== getVal2) {
+    t2 = <Stringify val1={getVal1} val2={getVal2} shouldInvokeFns={true} />;
+    $[6] = getVal1;
+    $[7] = getVal2;
+    $[8] = t2;
   } else {
-    t3 = $[10];
+    t2 = $[8];
   }
-  return t3;
+  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-deplist-controlflow.expect.md

@@ -36,38 +36,31 @@ import { Stringify } from "shared-runtime";
 
 // We currently produce invalid output (incorrect scoping for `y` declaration)
 function useFoo(arr1, arr2) {
-  const $ = _c(7);
+  const $ = _c(5);
   let t0;
-  if ($[0] !== arr1) {
-    t0 = [arr1];
+  if ($[0] !== arr1 || $[1] !== arr2) {
+    const x = [arr1];
+
+    let y;
+    t0 = () => ({ y });
+
+    (y = x.concat(arr2)), y;
     $[0] = arr1;
-    $[1] = t0;
+    $[1] = arr2;
+    $[2] = t0;
   } else {
-    t0 = $[1];
+    t0 = $[2];
   }
-  const x = t0;
+  const getVal = t0;
   let t1;
-  if ($[2] !== x || $[3] !== arr2) {
-    let y;
-    t1 = () => ({ y });
-
-    (y = x.concat(arr2)), y;
-    $[2] = x;
-    $[3] = arr2;
+  if ($[3] !== getVal) {
+    t1 = <Stringify getVal={getVal} shouldInvokeFns={true} />;
+    $[3] = getVal;
     $[4] = t1;
   } else {
     t1 = $[4];
   }
-  const getVal = t1;
-  let t2;
-  if ($[5] !== getVal) {
-    t2 = <Stringify getVal={getVal} shouldInvokeFns={true} />;
-    $[5] = getVal;
-    $[6] = t2;
-  } else {
-    t2 = $[6];
-  }
-  return t2;
+  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useCallback-reordering-depslist-assignment.expect.md

@@ -30,38 +30,31 @@ import { c as _c } from "react/compiler-runtime";
 import { useMemo } from "react";
 
 function useFoo(arr1, arr2) {
-  const $ = _c(7);
-  let t0;
-  if ($[0] !== arr1) {
-    t0 = [arr1];
-    $[0] = arr1;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  const x = t0;
+  const $ = _c(5);
   let y;
-  if ($[2] !== x || $[3] !== arr2) {
+  if ($[0] !== arr1 || $[1] !== arr2) {
+    const x = [arr1];
+
     y;
     (y = x.concat(arr2)), y;
-    $[2] = x;
-    $[3] = arr2;
-    $[4] = y;
+    $[0] = arr1;
+    $[1] = arr2;
+    $[2] = y;
   } else {
-    y = $[4];
+    y = $[2];
   }
-  let t1;
-  const t2 = y;
-  let t3;
-  if ($[5] !== t2) {
-    t3 = { y: t2 };
-    $[5] = t2;
-    $[6] = t3;
+  let t0;
+  const t1 = y;
+  let t2;
+  if ($[3] !== t1) {
+    t2 = { y: t1 };
+    $[3] = t1;
+    $[4] = t2;
   } else {
-    t3 = $[6];
+    t2 = $[4];
   }
-  t1 = t3;
-  return t1;
+  t0 = t2;
+  return t0;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-assignment.expect.md

@@ -40,55 +40,48 @@ import { useMemo } from "react";
 import { Stringify } from "shared-runtime";
 
 function Foo(t0) {
-  const $ = _c(11);
+  const $ = _c(9);
   const { arr1, arr2, foo } = t0;
   let t1;
-  if ($[0] !== arr1) {
-    t1 = [arr1];
-    $[0] = arr1;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  const x = t1;
-  let t2;
   let val1;
-  if ($[2] !== foo || $[3] !== x || $[4] !== arr2) {
+  if ($[0] !== arr1 || $[1] !== foo || $[2] !== arr2) {
+    const x = [arr1];
+
     let y;
     y = [];
+    let t2;
     let t3;
-    let t4;
-    if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-      t4 = { x: 2 };
-      $[7] = t4;
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = { x: 2 };
+      $[5] = t3;
     } else {
-      t4 = $[7];
+      t3 = $[5];
     }
-    t3 = t4;
-    val1 = t3;
+    t2 = t3;
+    val1 = t2;
 
     foo ? (y = x.concat(arr2)) : y;
-    t2 = (() => [y])();
-    $[2] = foo;
-    $[3] = x;
-    $[4] = arr2;
-    $[5] = t2;
-    $[6] = val1;
+    t1 = (() => [y])();
+    $[0] = arr1;
+    $[1] = foo;
+    $[2] = arr2;
+    $[3] = t1;
+    $[4] = val1;
   } else {
-    t2 = $[5];
-    val1 = $[6];
+    t1 = $[3];
+    val1 = $[4];
   }
-  const val2 = t2;
-  let t3;
-  if ($[8] !== val1 || $[9] !== val2) {
-    t3 = <Stringify val1={val1} val2={val2} />;
-    $[8] = val1;
-    $[9] = val2;
-    $[10] = t3;
+  const val2 = t1;
+  let t2;
+  if ($[6] !== val1 || $[7] !== val2) {
+    t2 = <Stringify val1={val1} val2={val2} />;
+    $[6] = val1;
+    $[7] = val2;
+    $[8] = t2;
   } else {
-    t3 = $[10];
+    t2 = $[8];
   }
-  return t3;
+  return t2;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/preserve-memo-validation/useMemo-reordering-depslist-controlflow.expect.md

@@ -488,7 +488,6 @@ const skipFilter = new Set([
   "original-reactive-scopes-fork/bug-nonmutating-capture-in-unsplittable-memo-block",
   "original-reactive-scopes-fork/bug-hoisted-declaration-with-scope",
   "bug-codegen-inline-iife",
-  "bug-array-concat-should-capture",
 
   // 'react-compiler-runtime' not yet supported
   "flag-enable-emit-hook-guards",