[compiler][optim] Add shape for Array.from

(see title)

Author: mofeiZ

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

@@ -119,15 +119,29 @@ const TYPED_GLOBALS: Array<[string, BuiltInType]> = [
       ],
       /*
        * https://tc39.es/ecma262/multipage/indexed-collections.html#sec-array.from
-       * Array.from(arrayLike, optionalFn, optionalThis) not added because
-       * the Effect of `arrayLike` is polymorphic i.e.
+       * Array.from(arrayLike, optionalFn, optionalThis)
+       * Note that the Effect of `arrayLike` is polymorphic i.e.
        *  - Effect.read if
        *     - it does not have an @iterator property and is array-like
        *       (i.e. has a length property)
        *    - it is an iterable object whose iterator does not mutate itself
        *  - Effect.mutate if it is a self-mutative iterator (e.g. a generator
        *    function)
        */
+      [
+        'from',
+        addFunction(DEFAULT_SHAPES, [], {
+          positionalParams: [
+            Effect.ConditionallyMutate,
+            Effect.ConditionallyMutate,
+            Effect.ConditionallyMutate,
+          ],
+          restParam: Effect.Read,
+          returnType: {kind: 'Object', shapeId: BuiltInArrayId},
+          calleeEffect: Effect.Read,
+          returnValueKind: ValueKind.Mutable,
+        }),
+      ],
       [
         'of',
         // Array.of(element0, ..., elementN)

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-granular-iterator-semantics.expect.md

@@ -68,21 +68,29 @@ function Validate({ x, input }) {
 }
 function useFoo(input) {
   "use memo";
-  const $ = _c(3);
+  const $ = _c(5);
 
   const x = Array.from([{}]);
   useIdentity();
-  x.push([input]);
   let t0;
-  if ($[0] !== input || $[1] !== x) {
-    t0 = <Validate x={x} input={input} />;
+  if ($[0] !== input) {
+    t0 = [input];
     $[0] = input;
-    $[1] = x;
-    $[2] = t0;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  x.push(t0);
+  let t1;
+  if ($[2] !== input || $[3] !== x) {
+    t1 = <Validate x={x} input={input} />;
+    $[2] = input;
+    $[3] = x;
+    $[4] = t1;
   } else {
-    t0 = $[2];
+    t1 = $[4];
   }
-  return t0;
+  return t1;
 }
 
 export const FIXTURE_ENTRYPOINT = {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-type-inference-array-from.expect.md compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-inference-array-from.expect.md

@@ -37,6 +37,12 @@ function useFoo({val1, val2}) {
 export const FIXTURE_ENTRYPOINT = {
   fn: useFoo,
   params: [{val1: 1, val2: 2}],
+  params: [
+    {val1: 1, val2: 2},
+    {val1: 1, val2: 2},
+    {val1: 1, val2: 3},
+    {val1: 4, val2: 2},
+  ],
 };
 
 ```
@@ -71,29 +77,51 @@ function Validate({ x, val1, val2 }) {
 }
 function useFoo(t0) {
   "use memo";
-  const $ = _c(4);
+  const $ = _c(8);
   const { val1, val2 } = t0;
 
   const x = Array.from([]);
   useIdentity();
-  x.push([val1]);
-  x.push([val2]);
   let t1;
-  if ($[0] !== val1 || $[1] !== val2 || $[2] !== x) {
-    t1 = <Validate x={x} val1={val1} val2={val2} />;
+  if ($[0] !== val1) {
+    t1 = [val1];
     $[0] = val1;
-    $[1] = val2;
-    $[2] = x;
-    $[3] = t1;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  x.push(t1);
+  let t2;
+  if ($[2] !== val2) {
+    t2 = [val2];
+    $[2] = val2;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  x.push(t2);
+  let t3;
+  if ($[4] !== val1 || $[5] !== val2 || $[6] !== x) {
+    t3 = <Validate x={x} val1={val1} val2={val2} />;
+    $[4] = val1;
+    $[5] = val2;
+    $[6] = x;
+    $[7] = t3;
   } else {
-    t1 = $[3];
+    t3 = $[7];
   }
-  return t1;
+  return t3;
 }
 
 export const FIXTURE_ENTRYPOINT = {
   fn: useFoo,
   params: [{ val1: 1, val2: 2 }],
+  params: [
+    { val1: 1, val2: 2 },
+    { val1: 1, val2: 2 },
+    { val1: 1, val2: 3 },
+    { val1: 4, val2: 2 },
+  ],
 };
 
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/todo-type-inference-array-from.js compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/type-inference-array-from.js

@@ -33,4 +33,10 @@ function useFoo({val1, val2}) {
 export const FIXTURE_ENTRYPOINT = {
   fn: useFoo,
   params: [{val1: 1, val2: 2}],
+  params: [
+    {val1: 1, val2: 2},
+    {val1: 1, val2: 2},
+    {val1: 1, val2: 3},
+    {val1: 4, val2: 2},
+  ],
 };