[compiler] Tests for different orders of createfrom/capture w/wo function expressions

compiler/packages/babel-plugin-react-compiler/src/Inference/MUTABILITY_ALIASING_MODEL.md

@@ -271,9 +271,9 @@ a.property = value // a _is_ b, this mutates b
 
 ```
 CreateFrom a <- b
-Mutate A
+Mutate a
 =>
-MutateTransitive b
+Mutate b
 ```
 
 Example:
@@ -301,6 +301,26 @@ a.b = b;
 a.property = value; // mutates a, not b
 ```
 
+### Mutation of Source Affects Alias, Assignment, CreateFrom, and Capture
+
+```
+Alias a <- b OR Assign a <- b OR CreateFrom a <- b OR Capture a <- b
+Mutate b
+=>
+Mutate a
+```
+
+A derived value changes when it's source value is mutated.
+
+Example:
+
+```js
+const x = {};
+const y = [x];
+x.y = true; // this changes the value within `y` ie mutates y
+```
+
+
 ### TransitiveMutation of Alias, Assignment, CreateFrom, or Capture Mutates the Source
 
 ```

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.expect.md

@@ -0,0 +1,166 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import {
+  mutate,
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b, c}: {a: number; b: number; c: number}) {
+  const x = useMemo(() => [{value: a}], [a, b, c]);
+  if (b === 0) {
+    // This object should only depend on c, it cannot be affected by the later mutation
+    x.push({value: c});
+  } else {
+    // This mutation shouldn't affect the object in the consequent
+    mutate(x);
+  }
+
+  return (
+    <>
+      <ValidateMemoization inputs={[a, b, c]} output={x} alwaysCheck={true} />;
+      {/* TODO: should only depend on c */}
+      <ValidateMemoization
+        inputs={[a, b, c]}
+        output={x[0]}
+        alwaysCheck={true}
+      />
+      ;
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0, c: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0, c: 0},
+    {a: 0, b: 1, c: 0},
+    {a: 1, b: 1, c: 0},
+    {a: 1, b: 1, c: 1},
+    {a: 1, b: 1, c: 0},
+    {a: 1, b: 0, c: 0},
+    {a: 0, b: 0, c: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import {
+  mutate,
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(22);
+  const { a, b, c } = t0;
+  let t1;
+  let x;
+  if ($[0] !== a || $[1] !== b || $[2] !== c) {
+    t1 = [{ value: a }];
+    x = t1;
+    if (b === 0) {
+      x.push({ value: c });
+    } else {
+      mutate(x);
+    }
+    $[0] = a;
+    $[1] = b;
+    $[2] = c;
+    $[3] = x;
+    $[4] = t1;
+  } else {
+    x = $[3];
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== a || $[6] !== b || $[7] !== c) {
+    t2 = [a, b, c];
+    $[5] = a;
+    $[6] = b;
+    $[7] = c;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== t2 || $[10] !== x) {
+    t3 = <ValidateMemoization inputs={t2} output={x} alwaysCheck={true} />;
+    $[9] = t2;
+    $[10] = x;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  let t4;
+  if ($[12] !== a || $[13] !== b || $[14] !== c) {
+    t4 = [a, b, c];
+    $[12] = a;
+    $[13] = b;
+    $[14] = c;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  let t5;
+  if ($[16] !== t4 || $[17] !== x[0]) {
+    t5 = <ValidateMemoization inputs={t4} output={x[0]} alwaysCheck={true} />;
+    $[16] = t4;
+    $[17] = x[0];
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  let t6;
+  if ($[19] !== t3 || $[20] !== t5) {
+    t6 = (
+      <>
+        {t3};{t5};
+      </>
+    );
+    $[19] = t3;
+    $[20] = t5;
+    $[21] = t6;
+  } else {
+    t6 = $[21];
+  }
+  return t6;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0, c: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0, c: 0 },
+    { a: 0, b: 1, c: 0 },
+    { a: 1, b: 1, c: 0 },
+    { a: 1, b: 1, c: 1 },
+    { a: 1, b: 1, c: 0 },
+    { a: 1, b: 0, c: 0 },
+    { a: 0, b: 0, c: 0 },
+  ],
+};
+
+```
+
+### Eval output
+(kind: ok) <div>{"inputs":[0,0,0],"output":[{"value":0},{"value":0}]}</div>;<div>{"inputs":[0,0,0],"output":{"value":0}}</div>;
+<div>{"inputs":[0,1,0],"output":[{"value":0},"joe"]}</div>;<div>{"inputs":[0,1,0],"output":{"value":0}}</div>;
+<div>{"inputs":[1,1,0],"output":[{"value":1},"joe"]}</div>;<div>{"inputs":[1,1,0],"output":{"value":1}}</div>;
+<div>{"inputs":[1,1,1],"output":[{"value":1},"joe"]}</div>;<div>{"inputs":[1,1,1],"output":{"value":1}}</div>;
+<div>{"inputs":[1,1,0],"output":[{"value":1},"joe"]}</div>;<div>{"inputs":[1,1,0],"output":{"value":1}}</div>;
+<div>{"inputs":[1,0,0],"output":[{"value":1},{"value":0}]}</div>;<div>{"inputs":[1,0,0],"output":{"value":1}}</div>;
+<div>{"inputs":[0,0,0],"output":[{"value":0},{"value":0}]}</div>;<div>{"inputs":[0,0,0],"output":{"value":0}}</div>;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-control-flow-sensitive-mutation.tsx

@@ -0,0 +1,46 @@
+import {useMemo} from 'react';
+import {
+  mutate,
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b, c}: {a: number; b: number; c: number}) {
+  const x = useMemo(() => [{value: a}], [a, b, c]);
+  if (b === 0) {
+    // This object should only depend on c, it cannot be affected by the later mutation
+    x.push({value: c});
+  } else {
+    // This mutation shouldn't affect the object in the consequent
+    mutate(x);
+  }
+
+  return (
+    <>
+      <ValidateMemoization inputs={[a, b, c]} output={x} alwaysCheck={true} />;
+      {/* TODO: should only depend on c */}
+      <ValidateMemoization
+        inputs={[a, b, c]}
+        output={x[0]}
+        alwaysCheck={true}
+      />
+      ;
+    </>
+  );
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0, c: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0, c: 0},
+    {a: 0, b: 1, c: 0},
+    {a: 1, b: 1, c: 0},
+    {a: 1, b: 1, c: 1},
+    {a: 1, b: 1, c: 0},
+    {a: 1, b: 0, c: 0},
+    {a: 0, b: 0, c: 0},
+  ],
+};

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/new-mutability/todo-transitivity-createfrom-capture-lambda.expect.md

@@ -0,0 +1,116 @@
+
+## Input
+
+```javascript
+import {useMemo} from 'react';
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from 'shared-runtime';
+
+function Component({a, b}) {
+  const x = useMemo(() => [{a}], [a]);
+  const f = () => {
+    const y = typedCreateFrom(x);
+    const z = typedCapture(y);
+    return z;
+  };
+  const z = f();
+  // does not mutate x, so x should not depend on b
+  typedMutate(z, b);
+
+  // TODO: this *should* only depend on `a`
+  return <ValidateMemoization inputs={[a, b]} output={x} alwaysCheck={true} />;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{a: 0, b: 0}],
+  sequentialRenders: [
+    {a: 0, b: 0},
+    {a: 0, b: 1},
+    {a: 1, b: 1},
+    {a: 0, b: 0},
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime";
+import { useMemo } from "react";
+import {
+  typedCapture,
+  typedCreateFrom,
+  typedMutate,
+  ValidateMemoization,
+} from "shared-runtime";
+
+function Component(t0) {
+  const $ = _c(10);
+  const { a, b } = t0;
+  let t1;
+  let x;
+  if ($[0] !== a || $[1] !== b) {
+    t1 = [{ a }];
+    x = t1;
+    const f = () => {
+      const y = typedCreateFrom(x);
+      const z = typedCapture(y);
+      return z;
+    };
+
+    const z_0 = f();
+
+    typedMutate(z_0, b);
+    $[0] = a;
+    $[1] = b;
+    $[2] = x;
+    $[3] = t1;
+  } else {
+    x = $[2];
+    t1 = $[3];
+  }
+  let t2;
+  if ($[4] !== a || $[5] !== b) {
+    t2 = [a, b];
+    $[4] = a;
+    $[5] = b;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== t2 || $[8] !== x) {
+    t3 = <ValidateMemoization inputs={t2} output={x} alwaysCheck={true} />;
+    $[7] = t2;
+    $[8] = x;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  return t3;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ a: 0, b: 0 }],
+  sequentialRenders: [
+    { a: 0, b: 0 },
+    { a: 0, b: 1 },
+    { a: 1, b: 1 },
+    { a: 0, b: 0 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>{"inputs":[0,0],"output":[{"a":0}]}</div>
+<div>{"inputs":[0,1],"output":[{"a":0}]}</div>
+<div>{"inputs":[1,1],"output":[{"a":1}]}</div>
+<div>{"inputs":[0,0],"output":[{"a":0}]}</div>