Optimization for scope merging when no deps

Addresses T168684688 (#2242). MergeReactiveScopesThatInvalidateTogether does not 
merge scopes if their output is not guaranteed to change when their inputs do. 
So for example a case such as `{session_id: bar(props.bar)}` will not merge the 
scopes for `t0 = bar(props.bar)` and `t1 = {session_id: t0}`, because t0 isn't 
guaranteed to change when `props.bar` does, and we want to avoid recreating the 
t1 object unless it semantically changes. 

But there's a special case: if a scope has no dependencies, then we'll never 
execute it again anyway. So it doesn't matter what kind of value it produces and 
it's safe to merge with subsequent scopes: 

```javascript 

return {session_id: bar()} 

``` 

Without the reactive input, `bar()` will always return the same value since 
we'll only ever call it once anyway. So it's safe to then merge with the scope 
for the outer object literal.

Author: josephsavona

compiler/packages/babel-plugin-react-forget/src/ReactiveScopes/MergeReactiveScopesThatInvalidateTogether.ts

@@ -232,7 +232,7 @@ class Transform extends ReactiveFunctionTransform<ReactiveScopeDependencies | nu
              */
             current.lvalues.clear();
 
-            if (!scopeAlwaysInvalidatesOnDependencyChanges(instr)) {
+            if (!scopeIsEligibleForMerging(instr)) {
               /*
                * The subsequent scope that we just merged isn't guaranteed to invalidate if its
                * inputs change, so it is not a candidate for future merging
@@ -252,7 +252,7 @@ class Transform extends ReactiveFunctionTransform<ReactiveScopeDependencies | nu
               reset();
             }
             // Only set a new merge candidate if the scope is guaranteed to invalidate on changes
-            if (scopeAlwaysInvalidatesOnDependencyChanges(instr)) {
+            if (scopeIsEligibleForMerging(instr)) {
               current = {
                 scope: instr,
                 from: i,
@@ -432,9 +432,24 @@ function areEqualPaths(a: Array<string>, b: Array<string>): boolean {
   return a.length === b.length && a.every((item, ix) => item === b[ix]);
 }
 
-function scopeAlwaysInvalidatesOnDependencyChanges(
-  scope: ReactiveScopeBlock
-): boolean {
+/**
+ * Is this scope eligible for merging with subsequent scopes? In general this
+ * is only true if the scope's output values are guaranteed to change when its
+ * input changes. When the output may not change, it's better to avoid merging
+ * with subsequent scopes so that they can compare the input and avoid updating
+ * when there are no changes.
+ *
+ * A special-case is if the scope has no dependencies, then its output will
+ * *never* change and it's also eligible for merging.
+ */
+function scopeIsEligibleForMerging(scope: ReactiveScopeBlock): boolean {
+  if (scope.scope.dependencies.size === 0) {
+    /*
+     * Regardless of the type of value produced, if the scope has no dependencies
+     * then its value will never change.
+     */
+    return true;
+  }
   const visitor = new DeclarationTypeVisitor(scope.scope);
   visitor.visitScope(scope, undefined);
   return visitor.alwaysInvalidatesOnInputChange;

compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver-and-mutate.expect.md

@@ -31,28 +31,19 @@ import { unstable_useMemoCache as useMemoCache } from "react";
 import { makeObject_Primitives, mutate } from "shared-runtime";
 
 function Component() {
-  const $ = useMemoCache(3);
-  let x;
-  let a;
+  const $ = useMemoCache(1);
+  let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    a = makeObject_Primitives();
+    const a = makeObject_Primitives();
 
-    x = [];
+    const x = [];
     x.push(a);
 
     mutate(x);
-    $[0] = x;
-    $[1] = a;
-  } else {
-    x = $[0];
-    a = $[1];
-  }
-  let t0;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = [x, a];
-    $[2] = t0;
+    $[0] = t0;
   } else {
-    t0 = $[2];
+    t0 = $[0];
   }
   return t0;
 }

compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/alias-capture-in-method-receiver.expect.md

@@ -20,7 +20,7 @@ function Component() {
 ```javascript
 import { unstable_useMemoCache as useMemoCache } from "react";
 function Component() {
-  const $ = useMemoCache(3);
+  const $ = useMemoCache(2);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = someObj();
@@ -29,20 +29,15 @@ function Component() {
     t0 = $[0];
   }
   const a = t0;
-  let x;
+  let t1;
   if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    x = [];
+    const x = [];
     x.push(a);
-    $[1] = x;
-  } else {
-    x = $[1];
-  }
-  let t1;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+
     t1 = [x, a];
-    $[2] = t1;
+    $[1] = t1;
   } else {
-    t1 = $[2];
+    t1 = $[1];
   }
   return t1;
 }

compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/alias-nested-member-path.expect.md

@@ -24,7 +24,7 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { unstable_useMemoCache as useMemoCache } from "react";
 function component() {
-  const $ = useMemoCache(3);
+  const $ = useMemoCache(2);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = [];
@@ -33,21 +33,15 @@ function component() {
     t0 = $[0];
   }
   const z = t0;
-  let y;
+  let x;
   if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    y = {};
+    const y = {};
     y.z = z;
-    $[1] = y;
-  } else {
-    y = $[1];
-  }
-  let x;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
     x = {};
     x.y = y;
-    $[2] = x;
+    $[1] = x;
   } else {
-    x = $[2];
+    x = $[1];
   }
   return x;
 }

compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/builtin-jsx-tag-lowered-between-mutations.expect.md

@@ -14,23 +14,16 @@ function Component(props) {
 ```javascript
 import { unstable_useMemoCache as useMemoCache } from "react";
 function Component(props) {
-  const $ = useMemoCache(2);
+  const $ = useMemoCache(1);
   let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     const maybeMutable = new MaybeMutable();
-    t0 = maybeMutate(maybeMutable);
+    t0 = <div>{maybeMutate(maybeMutable)}</div>;
     $[0] = t0;
   } else {
     t0 = $[0];
   }
-  let t1;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
-    t1 = <div>{t0}</div>;
-    $[1] = t1;
-  } else {
-    t1 = $[1];
-  }
-  return t1;
+  return t0;
 }
 
 ```

compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/call.expect.md

@@ -22,27 +22,18 @@ import { unstable_useMemoCache as useMemoCache } from "react";
 function foo() {}
 
 function Component(props) {
-  const $ = useMemoCache(3);
-  let a;
-  let b;
+  const $ = useMemoCache(1);
+  let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    a = [];
-    b = {};
+    const a = [];
+    const b = {};
     foo(a, b);
 
     foo(b);
-    $[0] = a;
-    $[1] = b;
-  } else {
-    a = $[0];
-    b = $[1];
-  }
-  let t0;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = <div a={a} b={b} />;
-    $[2] = t0;
+    $[0] = t0;
   } else {
-    t0 = $[2];
+    t0 = $[0];
   }
   return t0;
 }

compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/constructor.expect.md

@@ -22,26 +22,17 @@ import { unstable_useMemoCache as useMemoCache } from "react";
 function Foo() {}
 
 function Component(props) {
-  const $ = useMemoCache(3);
-  let a;
-  let b;
+  const $ = useMemoCache(1);
+  let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    a = [];
-    b = {};
+    const a = [];
+    const b = {};
     new Foo(a, b);
     new Foo(b);
-    $[0] = a;
-    $[1] = b;
-  } else {
-    a = $[0];
-    b = $[1];
-  }
-  let t0;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = <div a={a} b={b} />;
-    $[2] = t0;
+    $[0] = t0;
   } else {
-    t0 = $[2];
+    t0 = $[0];
   }
   return t0;
 }

compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/for-of-mutate.expect.md

@@ -28,24 +28,19 @@ import { unstable_useMemoCache as useMemoCache } from "react";
 import { makeObject_Primitives, mutate, Stringify } from "shared-runtime";
 
 function Component(_props) {
-  const $ = useMemoCache(2);
-  let results;
+  const $ = useMemoCache(1);
+  let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     const collection = [makeObject_Primitives()];
-    results = [];
+    const results = [];
     for (const item of collection) {
       results.push(<div key={Stringify(item)}>{Stringify(mutate(item))}</div>);
     }
-    $[0] = results;
-  } else {
-    results = $[0];
-  }
-  let t0;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
+
     t0 = <div>{results}</div>;
-    $[1] = t0;
+    $[0] = t0;
   } else {
-    t0 = $[1];
+    t0 = $[0];
   }
   return t0;
 }

compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/global-jsx-tag-lowered-between-mutations.expect.md

@@ -25,28 +25,17 @@ function Component(props) {
 ```javascript
 import { unstable_useMemoCache as useMemoCache } from "react";
 function Component(props) {
-  const $ = useMemoCache(3);
-  let T0;
-  let t1;
+  const $ = useMemoCache(1);
+  let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     const maybeMutable = new MaybeMutable();
 
-    T0 = View;
-    t1 = maybeMutate(maybeMutable);
-    $[0] = T0;
-    $[1] = t1;
+    t0 = <View>{maybeMutate(maybeMutable)}</View>;
+    $[0] = t0;
   } else {
-    T0 = $[0];
-    t1 = $[1];
+    t0 = $[0];
   }
-  let t2;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = <T0>{t1}</T0>;
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  return t2;
+  return t0;
 }
 
 ```

compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/hoisting-simple-const-declaration.expect.md

@@ -24,23 +24,17 @@ export const FIXTURE_ENTRYPOINT = {
 ```javascript
 import { unstable_useMemoCache as useMemoCache } from "react";
 function hoisting() {
-  const $ = useMemoCache(2);
-  let foo;
+  const $ = useMemoCache(1);
+  let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    foo = () => bar + baz;
+    const foo = () => bar + baz;
 
     const bar = 3;
     const baz = 2;
-    $[0] = foo;
-  } else {
-    foo = $[0];
-  }
-  let t0;
-  if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
     t0 = foo();
-    $[1] = t0;
+    $[0] = t0;
   } else {
-    t0 = $[1];
+    t0 = $[0];
   }
   return t0;
 }

compiler/packages/babel-plugin-react-forget/src/__tests__/fixtures/compiler/jsx-member-expression-tag-grouping.expect.md

@@ -14,27 +14,16 @@ function Component(props) {
 ```javascript
 import { unstable_useMemoCache as useMemoCache } from "react";
 function Component(props) {
-  const $ = useMemoCache(3);
-  let T0;
-  let t1;
+  const $ = useMemoCache(1);
+  let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     const maybeMutable = new MaybeMutable();
-    T0 = Foo.Bar;
-    t1 = maybeMutate(maybeMutable);
-    $[0] = T0;
-    $[1] = t1;
+    t0 = <Foo.Bar>{maybeMutate(maybeMutable)}</Foo.Bar>;
+    $[0] = t0;
   } else {
-    T0 = $[0];
-    t1 = $[1];
+    t0 = $[0];
   }
-  let t2;
-  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-    t2 = <T0>{t1}</T0>;
-    $[2] = t2;
-  } else {
-    t2 = $[2];
-  }
-  return t2;
+  return t0;
 }
 
 ```