[compiler] Fix mode for generating scopes for reassignments

We have an experimental mode where we generate scopes for simple phi values, even if they aren't subsequently mutated. This mode was incorrectly generating scope ranges, leaving the start at 0 which is invalid. The fix is to allow non-zero identifier ranges to overwrite the scope start (rather than taking the min) if the scope start is still zero.

ghstack-source-id: ecbb04c96ed4de62f781e48cda46309c42aa07e0
Pull Request resolved: #30321

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

@@ -114,9 +114,13 @@ export function inferReactiveScopeVariables(fn: HIRFunction): void {
       };
       scopes.set(groupIdentifier, scope);
     } else {
-      scope.range.start = makeInstructionId(
-        Math.min(scope.range.start, identifier.mutableRange.start)
-      );
+      if (scope.range.start === 0) {
+        scope.range.start = identifier.mutableRange.start;
+      } else if (identifier.mutableRange.start !== 0) {
+        scope.range.start = makeInstructionId(
+          Math.min(scope.range.start, identifier.mutableRange.start)
+        );
+      }
       scope.range.end = makeInstructionId(
         Math.max(scope.range.end, identifier.mutableRange.end)
       );

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-reassigned-loop-force-scopes-enabled.expect.md

@@ -0,0 +1,68 @@
+
+## Input
+
+```javascript
+// @enableForest
+function Component({ base, start, increment, test }) {
+  let value = base;
+  for (let i = start; i < test; i += increment) {
+    value += i;
+  }
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ base: 0, start: 0, test: 10, increment: 1 }],
+  sequentialRenders: [
+    { base: 0, start: 1, test: 10, increment: 1 },
+    { base: 0, start: 0, test: 10, increment: 2 },
+    { base: 2, start: 0, test: 10, increment: 2 },
+    { base: 0, start: 0, test: 11, increment: 2 },
+  ],
+};
+
+```
+
+## Code
+
+```javascript
+import { c as _c } from "react/compiler-runtime"; // @enableForest
+function Component(t0) {
+  const $ = _c(5);
+  const { base, start, increment, test } = t0;
+  let value;
+  if ($[0] !== base || $[1] !== start || $[2] !== test || $[3] !== increment) {
+    value = base;
+    for (let i = start; i < test; i = i + increment, i) {
+      value = value + i;
+    }
+    $[0] = base;
+    $[1] = start;
+    $[2] = test;
+    $[3] = increment;
+    $[4] = value;
+  } else {
+    value = $[4];
+  }
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ base: 0, start: 0, test: 10, increment: 1 }],
+  sequentialRenders: [
+    { base: 0, start: 1, test: 10, increment: 1 },
+    { base: 0, start: 0, test: 10, increment: 2 },
+    { base: 2, start: 0, test: 10, increment: 2 },
+    { base: 0, start: 0, test: 11, increment: 2 },
+  ],
+};
+
+```
+      
+### Eval output
+(kind: ok) <div>45</div>
+<div>20</div>
+<div>22</div>
+<div>30</div>

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/primitive-reassigned-loop-force-scopes-enabled.js

@@ -0,0 +1,19 @@
+// @enableForest
+function Component({ base, start, increment, test }) {
+  let value = base;
+  for (let i = start; i < test; i += increment) {
+    value += i;
+  }
+  return <div>{value}</div>;
+}
+
+export const FIXTURE_ENTRYPOINT = {
+  fn: Component,
+  params: [{ base: 0, start: 0, test: 10, increment: 1 }],
+  sequentialRenders: [
+    { base: 0, start: 1, test: 10, increment: 1 },
+    { base: 0, start: 0, test: 10, increment: 2 },
+    { base: 2, start: 0, test: 10, increment: 2 },
+    { base: 0, start: 0, test: 11, increment: 2 },
+  ],
+};