Update on "Optimize method calls w props receiver"

[ghstack-poisoned]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-child-stored-in-id.expect.md

@@ -3,7 +3,7 @@
 
 ```javascript
 // @enableJsxOutlining
-function Component(arr) {
+function Component({arr}) {
   const x = useX();
   return arr.map(i => {
     <>
@@ -49,12 +49,13 @@ export const FIXTURE_ENTRYPOINT = {
 
 ```javascript
 import { c as _c } from "react/compiler-runtime"; // @enableJsxOutlining
-function Component(arr) {
-  const $ = _c(6);
+function Component(t0) {
+  const $ = _c(3);
+  const { arr } = t0;
   const x = useX();
-  let t0;
+  let t1;
   if ($[0] !== arr || $[1] !== x) {
-    t0 = (i) => {
+    t1 = arr.map((i) => {
       arr.map((i_0, id) => {
         const T0 = _temp;
         const child = <T0 i={i_0} x={x} />;
@@ -62,21 +63,12 @@ function Component(arr) {
         const jsx = <div>{child}</div>;
         return jsx;
       });
-    };
+    });
     $[0] = arr;
     $[1] = x;
-    $[2] = t0;
+    $[2] = t1;
   } else {
-    t0 = $[2];
-  }
-  let t1;
-  if ($[3] !== arr.map || $[4] !== t0) {
-    t1 = arr.map(t0);
-    $[3] = arr.map;
-    $[4] = t0;
-    $[5] = t1;
-  } else {
-    t1 = $[5];
+    t1 = $[2];
   }
   return t1;
 }
@@ -149,4 +141,4 @@ export const FIXTURE_ENTRYPOINT = {
 ```
       
 ### Eval output
-(kind: exception) arr.map is not a function
+(kind: ok) [null,null]

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/jsx-outlining-child-stored-in-id.js

@@ -1,5 +1,5 @@
 // @enableJsxOutlining
-function Component(arr) {
+function Component({arr}) {
   const x = useX();
   return arr.map(i => {
     <>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/props-method-dependency.expect.md

@@ -2,40 +2,77 @@
 ## Input
 
 ```javascript
+// @compilationMode(infer)
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
 function Component(props) {
-  const x = props.x();
-  return <div>{x}</div>;
+  const x = useMemo(() => props.x(), [props.x]);
+  return <ValidateMemoization inputs={[props.x]} output={x} />;
 }
 
+const f = () => ['React'];
+const g = () => ['Compiler'];
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: () => ['React']}],
+  sequentialRenders: [{x: f}, {x: g}, {x: g}, {x: f}],
+};
+
 ```
 
 ## Code
 
 ```javascript
-import { c as _c } from "react/compiler-runtime";
+import { c as _c } from "react/compiler-runtime"; // @compilationMode(infer)
+import { useMemo } from "react";
+import { ValidateMemoization } from "shared-runtime";
+
 function Component(props) {
-  const $ = _c(4);
+  const $ = _c(7);
   let t0;
-  if ($[0] !== props.x) {
-    t0 = props.x();
-    $[0] = props.x;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  const x = t0;
   let t1;
-  if ($[2] !== x) {
-    t1 = <div>{x}</div>;
-    $[2] = x;
-    $[3] = t1;
+  if ($[0] !== props.x) {
+    t1 = props.x();
+    $[0] = props.x;
+    $[1] = t1;
   } else {
-    t1 = $[3];
+    t1 = $[1];
   }
-  return t1;
+  t0 = t1;
+  const x = t0;
+  let t2;
+  if ($[2] !== props.x) {
+    t2 = [props.x];
+    $[2] = props.x;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t2 || $[5] !== x) {
+    t3 = <ValidateMemoization inputs={t2} output={x} />;
+    $[4] = t2;
+    $[5] = x;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  return t3;
 }
 
+const f = () => ["React"];
+const g = () => ["Compiler"];
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: () => ["React"] }],
+  sequentialRenders: [{ x: f }, { x: g }, { x: g }, { x: f }],
+};
+
 ```
       
 ### Eval output
-(kind: exception) Fixture not implemented
+(kind: ok) <div>{"inputs":["[[ function params=0 ]]"],"output":["React"]}</div>
+<div>{"inputs":["[[ function params=0 ]]"],"output":["Compiler"]}</div>
+<div>{"inputs":["[[ function params=0 ]]"],"output":["Compiler"]}</div>
+<div>{"inputs":["[[ function params=0 ]]"],"output":["React"]}</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/props-method-dependency.js

@@ -1,4 +1,16 @@
+// @compilationMode(infer)
+import {useMemo} from 'react';
+import {ValidateMemoization} from 'shared-runtime';
+
 function Component(props) {
-  const x = props.x();
-  return <div>{x}</div>;
+  const x = useMemo(() => props.x(), [props.x]);
+  return <ValidateMemoization inputs={[props.x]} output={x} />;
 }
+
+const f = () => ['React'];
+const g = () => ['Compiler'];
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{x: () => ['React']}],
+  sequentialRenders: [{x: f}, {x: g}, {x: g}, {x: f}],
+};