[compiler] Fix codegen for nested method calls with memoized properties

compiler/packages/babel-plugin-react-compiler/src/ReactiveScopes/CodegenReactiveFunction.ts

@@ -1810,41 +1810,70 @@ function codegenInstructionValue(
     case 'MethodCall': {
       const isHook =
         getHookKind(cx.env, instrValue.property.identifier) != null;
-      const memberExpr = codegenPlaceToExpression(cx, instrValue.property);
-      CompilerError.invariant(
-        t.isMemberExpression(memberExpr) ||
-          t.isOptionalMemberExpression(memberExpr),
-        {
-          reason:
-            '[Codegen] Internal error: MethodCall::property must be an unpromoted + unmemoized MemberExpression. ' +
-            `Got a \`${memberExpr.type}\``,
-          description: null,
-          loc: memberExpr.loc ?? null,
-          suggestions: null,
-        },
-      );
-      CompilerError.invariant(
-        t.isNodesEquivalent(
-          memberExpr.object,
-          codegenPlaceToExpression(cx, instrValue.receiver),
-        ),
-        {
-          reason:
-            '[Codegen] Internal error: Forget should always generate MethodCall::property ' +
-            'as a MemberExpression of MethodCall::receiver',
-          description: null,
-          loc: memberExpr.loc ?? null,
-          suggestions: null,
-        },
-      );
-      const args = instrValue.args.map(arg => codegenArgument(cx, arg));
-      value = createCallExpression(
-        cx.env,
-        memberExpr,
-        args,
-        instrValue.loc,
-        isHook,
-      );
+      /**
+       * We need to check if the property was memoized. If it has, we should reconstruct the
+       * MemberExpression.
+       */
+      let memberExpr: t.Expression;
+      const tmp = cx.temp.get(instrValue.property.identifier.declarationId);
+      if (tmp != null && tmp.type === 'Identifier') {
+        /**
+         * We can't reconstruct the MemberExpression from just the identifier, so we work around
+         * this by allowing an Identifier here.
+         */
+        memberExpr = tmp;
+      } else if (tmp != null) {
+        memberExpr = convertValueToExpression(tmp);
+      } else {
+        memberExpr = codegenPlaceToExpression(cx, instrValue.property);
+      }
+
+      // Reconstruct the MemberExpression if we previously saw an Identifier.
+      if (memberExpr.type === 'Identifier') {
+        const args = instrValue.args.map(arg => codegenArgument(cx, arg));
+        value = createCallExpression(
+          cx.env,
+          memberExpr,
+          args,
+          instrValue.loc,
+          isHook,
+        );
+      } else {
+        CompilerError.invariant(
+          t.isMemberExpression(memberExpr) ||
+            t.isOptionalMemberExpression(memberExpr),
+          {
+            reason:
+              '[Codegen] Internal error: MethodCall::property must be an unpromoted + unmemoized MemberExpression. ' +
+              `Got a \`${memberExpr.type}\``,
+            description: null,
+            loc: memberExpr.loc ?? null,
+            suggestions: null,
+          },
+        );
+        CompilerError.invariant(
+          t.isNodesEquivalent(
+            memberExpr.object,
+            codegenPlaceToExpression(cx, instrValue.receiver),
+          ),
+          {
+            reason:
+              '[Codegen] Internal error: Forget should always generate MethodCall::property ' +
+              'as a MemberExpression of MethodCall::receiver',
+            description: null,
+            loc: memberExpr.loc ?? null,
+            suggestions: null,
+          },
+        );
+        const args = instrValue.args.map(arg => codegenArgument(cx, arg));
+        value = createCallExpression(
+          cx.env,
+          memberExpr,
+          args,
+          instrValue.loc,
+          isHook,
+        );
+      }
       break;
     }
     case 'NewExpression': {

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-methodcall-readonly-receiver.expect.md

@@ -0,0 +1,69 @@
+
+## Input
+
+```javascript
+import {PrimitiveBox} from 'shared-runtime';
+
+function Component({value, realmax}) {
+  const box = new PrimitiveBox(value);
+  const maxValue = Math.max(box.get(), realmax);
+  //                        ^^^^^^^^^ should not be separated into static call
+  return <div>{maxValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42, realmax: 100}],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { PrimitiveBox } from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(6);
+  const { value, realmax } = t0;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== value) {
+    const box = new PrimitiveBox(value);
+    t1 = Math;
+    t2 = t1.max;
+    t3 = box.get();
+    $[0] = value;
+    $[1] = t1;
+    $[2] = t2;
+    $[3] = t3;
+  } else {
+    t1 = $[1];
+    t2 = $[2];
+    t3 = $[3];
+  }
+  const maxValue = t2(t3, realmax);
+  let t4;
+  if ($[4] !== maxValue) {
+    t4 = <div>{maxValue}</div>;
+    $[4] = maxValue;
+    $[5] = t4;
+  } else {
+    t4 = $[5];
+  }
+  return t4;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ value: 42, realmax: 100 }],
+  isComponent: true,
+};
+
+```
+
+### Eval output
+(kind: ok) <div>100</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-methodcall-readonly-receiver.js

@@ -0,0 +1,14 @@
+import {PrimitiveBox} from 'shared-runtime';
+
+function Component({value, realmax}) {
+  const box = new PrimitiveBox(value);
+  const maxValue = Math.max(box.get(), realmax);
+  //                        ^^^^^^^^^ should not be separated into static call
+  return <div>{maxValue}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{value: 42, realmax: 100}],
+  isComponent: true,
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-methodcall.expect.md

@@ -0,0 +1,85 @@
+
+## Input
+
+```javascript
+function foo() {
+  return {
+    bar() {
+      return 3.14;
+    },
+  };
+}
+
+const YearsAndMonthsSince = () => {
+  const diff = foo();
+  const months = Math.floor(diff.bar());
+  return <>{months}</>;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: YearsAndMonthsSince,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+function foo() {
+  const $ = _c(1);
+  let t0;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t0 = {
+      bar() {
+        return 3.14;
+      },
+    };
+    $[0] = t0;
+  } else {
+    t0 = $[0];
+  }
+  return t0;
+}
+
+const YearsAndMonthsSince = () => {
+  const $ = _c(4);
+  let t0;
+  let t1;
+  let t2;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    const diff = foo();
+    t0 = Math;
+    t1 = t0.floor;
+    t2 = diff.bar();
+    $[0] = t0;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t0 = $[0];
+    t1 = $[1];
+    t2 = $[2];
+  }
+  const months = t1(t2);
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = <>{months}</>;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  return t3;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: YearsAndMonthsSince,
+  params: [],
+  isComponent: true,
+};
+
+```
+
+### Eval output
+(kind: ok) 3

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/codegen-methodcall.js

@@ -0,0 +1,19 @@
+function foo() {
+  return {
+    bar() {
+      return 3.14;
+    },
+  };
+}
+
+const YearsAndMonthsSince = () => {
+  const diff = foo();
+  const months = Math.floor(diff.bar());
+  return <>{months}</>;
+};
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: YearsAndMonthsSince,
+  params: [],
+  isComponent: true,
+};