Update base for rebase on "[compiler] Optimize emission in normal (non-value) blocks"

In #29863 I tried to find a clean way to share code for emitting instructions between value blocks and regular blocks. The catch is that value blocks have special meaning for their final instruction — that's the value of the block — so reordering can't change the last instruction. However, in finding a clean way to share code for these two categories of code, i also inadvertently reduced the effectiveness of the optimization.

This PR updates to use different strategies for these two kinds of blocks: value blocks use the code from #29863 where we first emit all non-reorderable instructions in their original order, _then_ try to emit reorderable values. The reason this is suboptimal, though, is that we want to move instructions closer to their dependencies so that they can invalidate (merge) together. Emitting the reorderable values last prevents this.

So for normal blocks, we now emit terminal operands first. This will invariably cause _some_ of the non-reorderable instructions to be emitted, but it will intersperse reoderable instructions in between, right after their dependencies. This maximizes our ability to merge scopes.

I think the complexity cost of two strategies is worth the benefit, though i still need to double-check all the output changes.

[ghstack-poisoned]

Author: josephsavona

.eslintrc.js

@@ -484,7 +484,11 @@ module.exports = {
       },
     },
     {
-      files: ['packages/react-devtools-extensions/**/*.js'],
+      files: [
+        'packages/react-devtools-extensions/**/*.js',
+        'packages/react-devtools-shared/src/hook.js',
+        'packages/react-devtools-shared/src/backend/console.js',
+      ],
       globals: {
         __IS_CHROME__: 'readonly',
         __IS_FIREFOX__: 'readonly',

.prettierignore

@@ -1,6 +1,5 @@
 build
 
-compiler
 packages/react-devtools-core/dist
 packages/react-devtools-extensions/chrome/build
 packages/react-devtools-extensions/firefox/build

compiler/apps/playground/components/Editor/Output.tsx

@@ -104,7 +104,7 @@ async function tabify(source: string, compilerOutput: CompilerOutput) {
       passName,
       <TextTabContent
         output={text}
-        diff={lastPassOutput ?? null}
+        diff={passName !== "HIR" ? lastPassOutput : null}
         showInfoPanel={true}
       ></TextTabContent>
     );
@@ -195,7 +195,7 @@ function Output({ store, compilerOutput }: Props) {
       if (result.kind === "hir" || result.kind === "reactive") {
         currResult += `function ${result.fnName}\n\n${result.value}`;
       }
-      if (currResult !== lastResult) {
+      if (passName !== "HIR" && currResult !== lastResult) {
         changedPasses.add(passName);
       }
       lastResult = currResult;

compiler/packages/babel-plugin-react-compiler/src/Entrypoint/Pipeline.ts

@@ -254,7 +254,7 @@ function* runWithEnvironment(
   memoizeFbtOperandsInSameScope(hir);
   yield log({
     kind: "hir",
-    name: "MemoizeFbtOperandsInSameScope",
+    name: "MemoizeFbtAndMacroOperandsInSameScope",
     value: hir,
   });
 

compiler/packages/babel-plugin-react-compiler/src/HIR/Environment.ts

@@ -407,6 +407,23 @@ const EnvironmentConfigSchema = z.object({
    * and identifiers have been changed.
    */
   hookPattern: z.string().nullable().default(null),
+
+  /**
+   * If enabled, this will treat objects named as `ref` or if their names end with the substring `Ref`,
+   * and contain a property named `current`, as React refs.
+   *
+   * ```
+   * const ref = useMyRef();
+   * const myRef = useMyRef2();
+   * useEffect(() => {
+   *   ref.current = ...;
+   *   myRef.current = ...;
+   * })
+   * ```
+   *
+   * Here the variables `ref` and `myRef` will be typed as Refs.
+   */
+  enableTreatRefLikeIdentifiersAsRefs: z.boolean().nullable().default(false),
 });
 
 export type EnvironmentConfig = z.infer<typeof EnvironmentConfigSchema>;

compiler/packages/babel-plugin-react-compiler/src/HIR/Globals.ts

@@ -9,6 +9,7 @@ import { Effect, ValueKind, ValueReason } from "./HIR";
 import {
   BUILTIN_SHAPES,
   BuiltInArrayId,
+  BuiltInUseActionStateId,
   BuiltInUseEffectHookId,
   BuiltInUseInsertionEffectHookId,
   BuiltInUseLayoutEffectHookId,
@@ -266,6 +267,18 @@ const REACT_APIS: Array<[string, BuiltInType]> = [
       returnValueReason: ValueReason.State,
     }),
   ],
+  [
+    "useActionState",
+    addHook(DEFAULT_SHAPES, {
+      positionalParams: [],
+      restParam: Effect.Freeze,
+      returnType: { kind: "Object", shapeId: BuiltInUseActionStateId },
+      calleeEffect: Effect.Read,
+      hookKind: "useActionState",
+      returnValueKind: ValueKind.Frozen,
+      returnValueReason: ValueReason.State,
+    }),
+  ],
   [
     "useReducer",
     addHook(DEFAULT_SHAPES, {

compiler/packages/babel-plugin-react-compiler/src/HIR/HIR.ts

@@ -1543,6 +1543,18 @@ export function isSetStateType(id: Identifier): boolean {
   return id.type.kind === "Function" && id.type.shapeId === "BuiltInSetState";
 }
 
+export function isUseActionStateType(id: Identifier): boolean {
+  return (
+    id.type.kind === "Object" && id.type.shapeId === "BuiltInUseActionState"
+  );
+}
+
+export function isSetActionStateType(id: Identifier): boolean {
+  return (
+    id.type.kind === "Function" && id.type.shapeId === "BuiltInSetActionState"
+  );
+}
+
 export function isUseReducerType(id: Identifier): boolean {
   return id.type.kind === "Function" && id.type.shapeId === "BuiltInUseReducer";
 }
@@ -1551,6 +1563,10 @@ export function isDispatcherType(id: Identifier): boolean {
   return id.type.kind === "Function" && id.type.shapeId === "BuiltInDispatch";
 }
 
+export function isStableType(id: Identifier): boolean {
+  return isSetStateType(id) || isSetActionStateType(id) || isDispatcherType(id);
+}
+
 export function isUseEffectHookType(id: Identifier): boolean {
   return (
     id.type.kind === "Function" && id.type.shapeId === "BuiltInUseEffectHook"

compiler/packages/babel-plugin-react-compiler/src/HIR/ObjectShape.ts

@@ -118,6 +118,7 @@ function addShape(
 export type HookKind =
   | "useContext"
   | "useState"
+  | "useActionState"
   | "useReducer"
   | "useRef"
   | "useEffect"
@@ -195,6 +196,8 @@ export const BuiltInJsxId = "BuiltInJsx";
 export const BuiltInObjectId = "BuiltInObject";
 export const BuiltInUseStateId = "BuiltInUseState";
 export const BuiltInSetStateId = "BuiltInSetState";
+export const BuiltInUseActionStateId = "BuiltInUseActionState";
+export const BuiltInSetActionStateId = "BuiltInSetActionState";
 export const BuiltInUseRefId = "BuiltInUseRefId";
 export const BuiltInRefValueId = "BuiltInRefValue";
 export const BuiltInMixedReadonlyId = "BuiltInMixedReadonly";
@@ -396,6 +399,25 @@ addObject(BUILTIN_SHAPES, BuiltInUseStateId, [
   ],
 ]);
 
+addObject(BUILTIN_SHAPES, BuiltInUseActionStateId, [
+  ["0", { kind: "Poly" }],
+  [
+    "1",
+    addFunction(
+      BUILTIN_SHAPES,
+      [],
+      {
+        positionalParams: [],
+        restParam: Effect.Freeze,
+        returnType: PRIMITIVE_TYPE,
+        calleeEffect: Effect.Read,
+        returnValueKind: ValueKind.Primitive,
+      },
+      BuiltInSetActionStateId
+    ),
+  ],
+]);
+
 addObject(BUILTIN_SHAPES, BuiltInUseReducerId, [
   ["0", { kind: "Poly" }],
   [

compiler/packages/babel-plugin-react-compiler/src/HIR/Types.ts

@@ -57,7 +57,8 @@ export type PhiType = {
 };
 export type PropType = {
   kind: "Property";
-  object: Type;
+  objectType: Type;
+  objectName: string;
   propertyName: string;
 };
 
@@ -124,7 +125,8 @@ export function duplicateType(type: Type): Type {
     case "Property": {
       return {
         kind: "Property",
-        object: duplicateType(type.object),
+        objectType: duplicateType(type.objectType),
+        objectName: type.objectName,
         propertyName: type.propertyName,
       };
     }
@@ -165,11 +167,13 @@ function objectMethodTypeEquals(tA: Type, tB: Type): boolean {
 
 function propTypeEquals(tA: Type, tB: Type): boolean {
   if (tA.kind === "Property" && tB.kind === "Property") {
-    if (!typeEquals(tA.object, tB.object)) {
+    if (!typeEquals(tA.objectType, tB.objectType)) {
       return false;
     }
 
-    return tA.propertyName === tB.propertyName;
+    return (
+      tA.propertyName === tB.propertyName && tA.objectName === tB.objectName
+    );
   }
 
   return false;

compiler/packages/babel-plugin-react-compiler/src/Inference/InferReactivePlaces.ts

@@ -15,8 +15,7 @@ import {
   Place,
   computePostDominatorTree,
   getHookKind,
-  isDispatcherType,
-  isSetStateType,
+  isStableType,
   isUseOperator,
 } from "../HIR";
 import { PostDominator } from "../HIR/Dominator";
@@ -220,10 +219,7 @@ export function inferReactivePlaces(fn: HIRFunction): void {
 
         if (hasReactiveInput) {
           for (const lvalue of eachInstructionLValue(instruction)) {
-            if (
-              isSetStateType(lvalue.identifier) ||
-              isDispatcherType(lvalue.identifier)
-            ) {
+            if (isStableType(lvalue.identifier)) {
               continue;
             }
             reactiveIdentifiers.markReactive(lvalue);

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

@@ -15,7 +15,6 @@ import {
 import { eachReactiveValueOperand } from "./visitors";
 
 /**
- * This pass supports the
  * This pass supports the `fbt` translation system (https://facebook.github.io/fbt/)
  * as well as similar user-configurable macro-like APIs where it's important that
  * the name of the function not be changed, and it's literal arguments not be turned
@@ -75,7 +74,7 @@ function visit(
     for (const instruction of block.instructions) {
       const { lvalue, value } = instruction;
       if (lvalue === null) {
-        return;
+        continue;
       }
       if (
         value.kind === "Primitive" &&
@@ -96,7 +95,7 @@ function visit(
       } else if (isFbtCallExpression(fbtValues, value)) {
         const fbtScope = lvalue.identifier.scope;
         if (fbtScope === null) {
-          return;
+          continue;
         }
 
         /*
@@ -122,7 +121,7 @@ function visit(
       ) {
         const fbtScope = lvalue.identifier.scope;
         if (fbtScope === null) {
-          return;
+          continue;
         }
 
         /*

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

@@ -10,8 +10,7 @@ import {
   ReactiveFunction,
   ReactiveInstruction,
   ReactiveScopeBlock,
-  isDispatcherType,
-  isSetStateType,
+  isStableType,
 } from "../HIR";
 import { eachPatternOperand } from "../HIR/visitors";
 import { collectReactiveIdentifiers } from "./CollectReactiveIdentifiers";
@@ -57,10 +56,7 @@ class Visitor extends ReactiveFunctionVisitor<ReactiveIdentifiers> {
       case "Destructure": {
         if (state.has(value.value.identifier.id)) {
           for (const lvalue of eachPatternOperand(value.lvalue.pattern)) {
-            if (
-              isSetStateType(lvalue.identifier) ||
-              isDispatcherType(lvalue.identifier)
-            ) {
+            if (isStableType(lvalue.identifier)) {
               continue;
             }
             state.add(lvalue.identifier.id);
@@ -75,7 +71,7 @@ class Visitor extends ReactiveFunctionVisitor<ReactiveIdentifiers> {
         if (
           lvalue !== null &&
           state.has(value.object.identifier.id) &&
-          !isSetStateType(lvalue.identifier)
+          !isStableType(lvalue.identifier)
         ) {
           state.add(lvalue.identifier.id);
         }