Support new "mode" flag for DepGraph

packages/shared/client/ReplayClient.ts

@@ -78,7 +78,13 @@ import throttle from "lodash/throttle";
 import uniqueId from "lodash/uniqueId";
 
 // eslint-disable-next-line no-restricted-imports
-import { addEventListener, client, initSocket, removeEventListener, sendMessage } from "protocol/socket";
+import {
+  addEventListener,
+  client,
+  initSocket,
+  removeEventListener,
+  sendMessage,
+} from "protocol/socket";
 import { assert, compareNumericStrings, defer, waitForTime } from "protocol/utils";
 import { initProtocolMessagesStore } from "replay-next/components/protocol/ProtocolMessagesStore";
 import { insert } from "replay-next/src/utils/array";
@@ -88,11 +94,12 @@ import { isPointInRegion, isRangeInRegions } from "shared/utils/time";
 
 import {
   AnnotationListener,
+  DependencyChainStep,
+  DependencyGraphMode,
   ReplayClientEvents,
   ReplayClientInterface,
   SourceLocationRange,
   TimeStampedPointWithPaintHash,
-  DependencyChainStep,
 } from "./types";
 
 export const MAX_POINTS_TO_FIND = 10_000;
@@ -1208,9 +1215,16 @@ export class ReplayClient implements ReplayClientInterface {
     return this.focusWindow;
   }
 
-  async getDependencies(point: ExecutionPoint): Promise<DependencyChainStep[]> {
+  async getDependencies(
+    point: ExecutionPoint,
+    mode?: DependencyGraphMode
+  ): Promise<DependencyChainStep[]> {
     const sessionId = await this.waitForSession();
-    const result = await sendMessage("Session.experimentalCommand", { name: "analyzeDependencies", params: { point } }, sessionId);
+    const result = await sendMessage(
+      "Session.experimentalCommand",
+      { name: "analyzeDependencies", params: { point, mode } },
+      sessionId
+    );
     return result.rval.dependencies;
   }
 

packages/shared/client/types.ts

@@ -267,6 +267,10 @@ export type DependencyChainStepInfo =
       // An application render function called setState().
       code: "ReactCallSetState";
     }
+  | {
+      // A React external store triggered a rerender.
+      code: "ReactExternalStoreRerender";
+    }
   | {
       // An application render function called useEffect().
       code: "ReactCallUseEffect";
@@ -290,6 +294,12 @@ export type DependencyChainStep = DependencyChainStepInfo & {
   point?: ExecutionPoint;
 };
 
+export enum DependencyGraphMode {
+  // Renders of a fiber depend on the last time the parent of that fiber was
+  // rendered, instead of whatever triggered the fiber's render.
+  ReactParentRenders = "ReactParentRenders",
+}
+
 export interface ReplayClientInterface {
   get loadedRegions(): LoadedRegions | null;
   addEventListener(type: ReplayClientEvents, handler: Function): void;
@@ -437,6 +447,9 @@ export interface ReplayClientInterface {
     }) => void,
     onSourceContentsChunk: ({ chunk, sourceId }: { chunk: string; sourceId: SourceId }) => void
   ): Promise<void>;
-  getDependencies(point: ExecutionPoint): Promise<DependencyChainStep[]>;
+  getDependencies(
+    point: ExecutionPoint,
+    mode?: DependencyGraphMode
+  ): Promise<DependencyChainStep[]>;
   waitForSession(): Promise<string>;
 }