[compiler][be] Stabilize compiler output: sort deps and decls by name

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

@@ -34,6 +34,7 @@ import {
   ReactiveInstruction,
   ReactiveScope,
   ReactiveScopeBlock,
+  ReactiveScopeDeclaration,
   ReactiveScopeDependency,
   ReactiveTerminal,
   ReactiveValue,
@@ -572,7 +573,8 @@ function codegenReactiveScope(
   const changeExpressions: Array<t.Expression> = [];
   const changeExpressionComments: Array<string> = [];
   const outputComments: Array<string> = [];
-  for (const dep of scope.dependencies) {
+
+  for (const dep of [...scope.dependencies].sort(compareScopeDependency)) {
     const index = cx.nextCacheIndex;
     changeExpressionComments.push(printDependencyComment(dep));
     const comparison = t.binaryExpression(
@@ -615,7 +617,10 @@ function codegenReactiveScope(
     );
   }
   let firstOutputIndex: number | null = null;
-  for (const [, {identifier}] of scope.declarations) {
+
+  for (const [, {identifier}] of [...scope.declarations].sort(([, a], [, b]) =>
+    compareScopeDeclaration(a, b),
+  )) {
     const index = cx.nextCacheIndex;
     if (firstOutputIndex === null) {
       firstOutputIndex = index;
@@ -2566,3 +2571,45 @@ function convertIdentifier(identifier: Identifier): t.Identifier {
   );
   return t.identifier(identifier.name.value);
 }
+
+function compareScopeDependency(
+  a: ReactiveScopeDependency,
+  b: ReactiveScopeDependency,
+): number {
+  CompilerError.invariant(
+    a.identifier.name?.kind === 'named' && b.identifier.name?.kind === 'named',
+    {
+      reason: '[Codegen] Expected named identifier for dependency',
+      loc: a.identifier.loc,
+    },
+  );
+  const aName = [
+    a.identifier.name.value,
+    ...a.path.map(entry => `${entry.optional ? '?' : ''}${entry.property}`),
+  ].join('.');
+  const bName = [
+    b.identifier.name.value,
+    ...b.path.map(entry => `${entry.optional ? '?' : ''}${entry.property}`),
+  ].join('.');
+  if (aName < bName) return -1;
+  else if (aName > bName) return 1;
+  else return 0;
+}
+
+function compareScopeDeclaration(
+  a: ReactiveScopeDeclaration,
+  b: ReactiveScopeDeclaration,
+): number {
+  CompilerError.invariant(
+    a.identifier.name?.kind === 'named' && b.identifier.name?.kind === 'named',
+    {
+      reason: '[Codegen] Expected named identifier for declaration',
+      loc: a.identifier.loc,
+    },
+  );
+  const aName = a.identifier.name.value;
+  const bName = b.identifier.name.value;
+  if (aName < bName) return -1;
+  else if (aName > bName) return 1;
+  else return 0;
+}

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/allocating-primitive-as-dep-nested-scope.expect.md

@@ -47,7 +47,7 @@ import { identity, mutate, setProperty } from "shared-runtime";
 function AllocatingPrimitiveAsDepNested(props) {
   const $ = _c(5);
   let t0;
-  if ($[0] !== props.b || $[1] !== props.a) {
+  if ($[0] !== props.a || $[1] !== props.b) {
     const x = {};
     mutate(x);
     const t1 = identity(props.b) + 1;
@@ -62,8 +62,8 @@ function AllocatingPrimitiveAsDepNested(props) {
     const y = t2;
     setProperty(x, props.a);
     t0 = [x, y];
-    $[0] = props.b;
-    $[1] = props.a;
+    $[0] = props.a;
+    $[1] = props.b;
     $[2] = t0;
   } else {
     t0 = $[2];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-at-effect.expect.md

@@ -41,7 +41,7 @@ function ArrayAtTest(props) {
   }
   const arr = t1;
   let t2;
-  if ($[4] !== props.y || $[5] !== arr) {
+  if ($[4] !== arr || $[5] !== props.y) {
     let t3;
     if ($[7] !== props.y) {
       t3 = bar(props.y);
@@ -51,8 +51,8 @@ function ArrayAtTest(props) {
       t3 = $[8];
     }
     t2 = arr.at(t3);
-    $[4] = props.y;
-    $[5] = arr;
+    $[4] = arr;
+    $[5] = props.y;
     $[6] = t2;
   } else {
     t2 = $[6];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/array-expression-spread.expect.md

@@ -22,10 +22,10 @@ import { c as _c } from "react/compiler-runtime";
 function Component(props) {
   const $ = _c(3);
   let t0;
-  if ($[0] !== props.foo || $[1] !== props.bar) {
+  if ($[0] !== props.bar || $[1] !== props.foo) {
     t0 = [0, ...props.foo, null, ...props.bar, "z"];
-    $[0] = props.foo;
-    $[1] = props.bar;
+    $[0] = props.bar;
+    $[1] = props.foo;
     $[2] = t0;
   } else {
     t0 = $[2];

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

@@ -24,18 +24,18 @@ export const FIXTURE_ENTRYPOINT = {
 import { c as _c } from "react/compiler-runtime";
 function Component(props) {
   const $ = _c(11);
-  let t0;
   let a;
+  let t0;
   if ($[0] !== props.a || $[1] !== props.b) {
     a = [props.a, props.b, "hello"];
     t0 = a.push(42);
     $[0] = props.a;
     $[1] = props.b;
-    $[2] = t0;
-    $[3] = a;
+    $[2] = a;
+    $[3] = t0;
   } else {
-    t0 = $[2];
-    a = $[3];
+    a = $[2];
+    t0 = $[3];
   }
   const x = t0;
   let t1;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-invalid-phi-as-dependency.expect.md

@@ -70,10 +70,10 @@ function Component() {
     throw new Error("invariant broken");
   }
   let t1;
-  if ($[1] !== obj || $[2] !== boxedInner) {
+  if ($[1] !== boxedInner || $[2] !== obj) {
     t1 = <Stringify obj={obj} inner={boxedInner} />;
-    $[1] = obj;
-    $[2] = boxedInner;
+    $[1] = boxedInner;
+    $[2] = obj;
     $[3] = t1;
   } else {
     t1 = $[3];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/bug-object-expression-computed-key-modified-during-after-construction-hoisted-sequence-expr.expect.md

@@ -57,16 +57,16 @@ import { identity, mutate } from "shared-runtime";
  */
 function Component(props) {
   const $ = _c(8);
-  let t0;
   let key;
+  let t0;
   if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
     key = {};
     t0 = (mutate(key), key);
-    $[0] = t0;
-    $[1] = key;
+    $[0] = key;
+    $[1] = t0;
   } else {
-    t0 = $[0];
-    key = $[1];
+    key = $[0];
+    t0 = $[1];
   }
   const tmp = t0;
   let t1;

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2-iife.expect.md

@@ -32,7 +32,7 @@ import { mutate } from "shared-runtime";
 function component(foo, bar) {
   const $ = _c(3);
   let x;
-  if ($[0] !== foo || $[1] !== bar) {
+  if ($[0] !== bar || $[1] !== foo) {
     x = { foo };
     const y = { bar };
 
@@ -41,8 +41,8 @@ function component(foo, bar) {
     a.x = b;
 
     mutate(y);
-    $[0] = foo;
-    $[1] = bar;
+    $[0] = bar;
+    $[1] = foo;
     $[2] = x;
   } else {
     x = $[2];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-2.expect.md

@@ -24,7 +24,7 @@ import { c as _c } from "react/compiler-runtime";
 function component(foo, bar) {
   const $ = _c(3);
   let x;
-  if ($[0] !== foo || $[1] !== bar) {
+  if ($[0] !== bar || $[1] !== foo) {
     x = { foo };
     const y = { bar };
     const f0 = function () {
@@ -35,8 +35,8 @@ function component(foo, bar) {
 
     f0();
     mutate(y);
-    $[0] = foo;
-    $[1] = bar;
+    $[0] = bar;
+    $[1] = foo;
     $[2] = x;
   } else {
     x = $[2];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2-iife.expect.md

@@ -32,7 +32,7 @@ const { mutate } = require("shared-runtime");
 function component(foo, bar) {
   const $ = _c(3);
   let x;
-  if ($[0] !== foo || $[1] !== bar) {
+  if ($[0] !== bar || $[1] !== foo) {
     x = { foo };
     const y = { bar };
 
@@ -41,8 +41,8 @@ function component(foo, bar) {
     a.x = b;
 
     mutate(y);
-    $[0] = foo;
-    $[1] = bar;
+    $[0] = bar;
+    $[1] = foo;
     $[2] = x;
   } else {
     x = $[2];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-fun-alias-captured-mutate-arr-2.expect.md

@@ -24,7 +24,7 @@ import { c as _c } from "react/compiler-runtime";
 function component(foo, bar) {
   const $ = _c(3);
   let x;
-  if ($[0] !== foo || $[1] !== bar) {
+  if ($[0] !== bar || $[1] !== foo) {
     x = { foo };
     const y = { bar };
     const f0 = function () {
@@ -35,8 +35,8 @@ function component(foo, bar) {
 
     f0();
     mutate(y);
-    $[0] = foo;
-    $[1] = bar;
+    $[0] = bar;
+    $[1] = foo;
     $[2] = x;
   } else {
     x = $[2];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr-iife.expect.md

@@ -32,7 +32,7 @@ const { mutate } = require("shared-runtime");
 function component(foo, bar) {
   const $ = _c(3);
   let y;
-  if ($[0] !== foo || $[1] !== bar) {
+  if ($[0] !== bar || $[1] !== foo) {
     const x = { foo };
     y = { bar };
 
@@ -41,8 +41,8 @@ function component(foo, bar) {
     a.x = b;
 
     mutate(y);
-    $[0] = foo;
-    $[1] = bar;
+    $[0] = bar;
+    $[1] = foo;
     $[2] = y;
   } else {
     y = $[2];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-arr.expect.md

@@ -24,7 +24,7 @@ import { c as _c } from "react/compiler-runtime";
 function component(foo, bar) {
   const $ = _c(3);
   let y;
-  if ($[0] !== foo || $[1] !== bar) {
+  if ($[0] !== bar || $[1] !== foo) {
     const x = { foo };
     y = { bar };
     const f0 = function () {
@@ -35,8 +35,8 @@ function component(foo, bar) {
 
     f0();
     mutate(y);
-    $[0] = foo;
-    $[1] = bar;
+    $[0] = bar;
+    $[1] = foo;
     $[2] = y;
   } else {
     y = $[2];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate-iife.expect.md

@@ -32,7 +32,7 @@ const { mutate } = require("shared-runtime");
 function component(foo, bar) {
   const $ = _c(3);
   let y;
-  if ($[0] !== foo || $[1] !== bar) {
+  if ($[0] !== bar || $[1] !== foo) {
     const x = { foo };
     y = { bar };
 
@@ -41,8 +41,8 @@ function component(foo, bar) {
     a.x = b;
 
     mutate(y);
-    $[0] = foo;
-    $[1] = bar;
+    $[0] = bar;
+    $[1] = foo;
     $[2] = y;
   } else {
     y = $[2];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-func-alias-captured-mutate.expect.md

@@ -24,7 +24,7 @@ import { c as _c } from "react/compiler-runtime";
 function component(foo, bar) {
   const $ = _c(3);
   let y;
-  if ($[0] !== foo || $[1] !== bar) {
+  if ($[0] !== bar || $[1] !== foo) {
     const x = { foo };
     y = { bar };
     const f0 = function () {
@@ -35,8 +35,8 @@ function component(foo, bar) {
 
     f0();
     mutate(y);
-    $[0] = foo;
-    $[1] = bar;
+    $[0] = bar;
+    $[1] = foo;
     $[2] = y;
   } else {
     y = $[2];

compiler/packages/babel-plugin-react-compiler/src/__tests__/fixtures/compiler/capturing-function-member-expr-call.expect.md

@@ -46,10 +46,10 @@ function component(t0) {
   }
   const hide = t2;
   let t3;
-  if ($[4] !== poke || $[5] !== hide) {
+  if ($[4] !== hide || $[5] !== poke) {
     t3 = <Foo poke={poke} hide={hide} />;
-    $[4] = poke;
-    $[5] = hide;
+    $[4] = hide;
+    $[5] = poke;
     $[6] = t3;
   } else {
     t3 = $[6];