Update base for Update on "[compiler] Add wrapper functions to wrap change-detection storage and loading from the memo cache"

Summary: We may wish to perform some additional computation on values when they enter or exit the memo cache in change detection mode (e.g. make a deep copy, restore the original value). This builds support for doing so.

In addition, it drops the "ForDebugging" part of the flag name and makes it compatible with "disableMemoization": if memoization is disabled, we implement that by not restoring the old version of the value unless we're in a source-level memo block.

[ghstack-poisoned]

.github/workflows/runtime_build_and_test.yml

@@ -285,7 +285,7 @@ jobs:
       - name: Archive build artifacts
         uses: actions/upload-artifact@v4
         with:
-          name: combined_artifacts_${{ github.sha }}
+          name: artifacts_combined
           path: |
             ./build.tgz
             ./build2.tgz

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/change-detect.expect.md

@@ -13,12 +13,18 @@ function Component(props) {
     <div>
       {a}
       {b}
-      {c}
+      {c.c}
       {d}
     </div>
   );
 }
 
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: 1, y: { b: 2, c: 3, d: 4 } }],
+  isComponent: true,
+};
+
 ```
 
 ## Code
@@ -29,7 +35,7 @@ import { c as _c } from "react/compiler-runtime"; // @enableChangeDetectionForDe
 let glob = 1;
 
 function Component(props) {
-  const $ = _c(11);
+  const $ = _c(13);
   let t0;
   {
     t0 = props.x;
@@ -47,80 +53,102 @@ function Component(props) {
     }
   }
   const a = t0;
-  let b;
   let c;
+  let b;
   {
     ({ b, ...c } = props.y);
     let condition = $[2] !== props.y;
     if (!condition) {
-      let old$b = $[3];
-      let old$c = $[4];
-      $structuralCheck(old$b, b, "b", "Component", "cached", "(6:6)");
+      let old$c = $[3];
+      let old$b = $[4];
       $structuralCheck(old$c, c, "c", "Component", "cached", "(6:6)");
+      $structuralCheck(old$b, b, "b", "Component", "cached", "(6:6)");
     }
     $[2] = props.y;
-    $[3] = b;
-    $[4] = c;
+    $[3] = c;
+    $[4] = b;
     if (condition) {
       ({ b, ...c } = props.y);
-      $structuralCheck($[3], b, "b", "Component", "recomputed", "(6:6)");
-      b = $[3];
-      $structuralCheck($[4], c, "c", "Component", "recomputed", "(6:6)");
-      c = $[4];
+      $structuralCheck($[3], c, "c", "Component", "recomputed", "(6:6)");
+      c = $[3];
+      $structuralCheck($[4], b, "b", "Component", "recomputed", "(6:6)");
+      b = $[4];
     }
   }
   let t1;
   {
-    t1 = glob;
-    let condition = $[5] === Symbol.for("react.memo_cache_sentinel");
+    t1 = c.c;
+    let condition = $[5] !== c.c;
     if (!condition) {
-      let old$t1 = $[5];
-      $structuralCheck(old$t1, t1, "t1", "Component", "cached", "(13:13)");
+      let old$t1 = $[6];
+      $structuralCheck(old$t1, t1, "t1", "Component", "cached", "(12:12)");
     }
-    $[5] = t1;
+    $[5] = c.c;
+    $[6] = t1;
     if (condition) {
-      t1 = glob;
-      $structuralCheck($[5], t1, "t1", "Component", "recomputed", "(13:13)");
-      t1 = $[5];
+      t1 = c.c;
+      $structuralCheck($[6], t1, "t1", "Component", "recomputed", "(12:12)");
+      t1 = $[6];
     }
   }
   let t2;
   {
-    t2 = (
+    t2 = glob;
+    let condition = $[7] === Symbol.for("react.memo_cache_sentinel");
+    if (!condition) {
+      let old$t2 = $[7];
+      $structuralCheck(old$t2, t2, "t2", "Component", "cached", "(13:13)");
+    }
+    $[7] = t2;
+    if (condition) {
+      t2 = glob;
+      $structuralCheck($[7], t2, "t2", "Component", "recomputed", "(13:13)");
+      t2 = $[7];
+    }
+  }
+  let t3;
+  {
+    t3 = (
       <div>
         {a}
         {b}
-        {c}
         {t1}
+        {t2}
       </div>
     );
-    let condition = $[6] !== a || $[7] !== b || $[8] !== c || $[9] !== t1;
+    let condition = $[8] !== a || $[9] !== b || $[10] !== t1 || $[11] !== t2;
     if (!condition) {
-      let old$t2 = $[10];
-      $structuralCheck(old$t2, t2, "t2", "Component", "cached", "(9:14)");
+      let old$t3 = $[12];
+      $structuralCheck(old$t3, t3, "t3", "Component", "cached", "(9:14)");
     }
-    $[6] = a;
-    $[7] = b;
-    $[8] = c;
-    $[9] = t1;
-    $[10] = t2;
+    $[8] = a;
+    $[9] = b;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
     if (condition) {
-      t2 = (
+      t3 = (
         <div>
           {a}
           {b}
-          {c}
           {t1}
+          {t2}
         </div>
       );
-      $structuralCheck($[10], t2, "t2", "Component", "recomputed", "(9:14)");
-      t2 = $[10];
+      $structuralCheck($[12], t3, "t3", "Component", "recomputed", "(9:14)");
+      t3 = $[12];
     }
   }
-  return t2;
+  return t3;
 }
 
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: 1, y: { b: 2, c: 3, d: 4 } }],
+  isComponent: true,
+};
+
 ```
       
 ### Eval output
-(kind: exception) Fixture not implemented
+(kind: ok) <div>1231</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/change-detect.js

@@ -9,8 +9,14 @@ function Component(props) {
     <div>
       {a}
       {b}
-      {c}
+      {c.c}
       {d}
     </div>
   );
 }
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ x: 1, y: { b: 2, c: 3, d: 4 } }],
+  isComponent: true,
+};