Migrate to a fully-updated fork of react-devtools-inline with our own customizations

src/ui/components/SecondaryToolbox/ReactDevTools.tsx

@@ -1,4 +1,5 @@
 import { ExecutionPoint, NodeBounds, ObjectId, Object as ProtocolObject } from "@replayio/protocol";
+import type { SerializedElement, Store, Wall } from "@replayio/react-devtools-inline/frontend";
 import React, {
   useContext,
   useEffect,
@@ -8,7 +9,6 @@ import React, {
   useRef,
   useState,
 } from "react";
-import type { SerializedElement, Store, Wall } from "react-devtools-inline/frontend";
 import { useImperativeCacheValue } from "suspense";
 
 import { selectLocation } from "devtools/client/debugger/src/actions/sources";
@@ -52,7 +52,7 @@ import { sendTelemetryEvent, trackEvent } from "ui/utils/telemetry";
 import { injectReactDevtoolsBackend } from "./react-devtools/injectReactDevtoolsBackend";
 import { generateTreeResetOpsForPoint } from "./react-devtools/rdtProcessing";
 
-type ReactDevToolsInlineModule = typeof import("react-devtools-inline/frontend");
+type ReactDevToolsInlineModule = typeof import("@replayio/react-devtools-inline/frontend");
 
 type NodeOptsWithoutBounds = Omit<NodePickerOpts, "onCheckNodeBounds">;
 
@@ -453,10 +453,10 @@ async function loadReactDevToolsInlineModuleFromProtocol(
   // We should only load the DevTools module once we know which protocol version it requires.
   // If we don't have a version yet, it probably means we're too early in the Replay session.
   if (backendBridgeProtocolVersion >= 2) {
-    stateUpdaterCallback(await import("react-devtools-inline/frontend"));
-  } else if (backendBridgeProtocolVersion === 1) {
-    stateUpdaterCallback(await import("react-devtools-inline_4_18_0/frontend"));
+    stateUpdaterCallback(await import("@replayio/react-devtools-inline/frontend"));
   }
+  // We no longer support loading a version of `react-devtools-inline`
+  // that only knows about protocol version 1.
 }
 
 const nodePickerInstance = new NodePickerClass();

src/ui/components/SecondaryToolbox/react-devtools-inline.d.ts

@@ -2,6 +2,14 @@
 //   https://github.com/facebook/react/blob/main/packages/react-devtools-inline/
 //   https://github.com/facebook/react/blob/main/packages/react-devtools-shared/
 
-declare module "react-devtools-inline_4_18_0/frontend" {
+declare module "@replayio/react-devtools-inline" {
+  export * from "@types/react-devtools-inline";
+}
+
+declare module "@replayio/react-devtools-inline/frontend" {
   export * from "@types/react-devtools-inline/frontend";
 }
+
+declare module "@replayio/react-devtools-inline/backend" {
+  export * from "@types/react-devtools-inline/backend";
+}

src/ui/components/SecondaryToolbox/react-devtools/__tests__/rdtProcessing.test.tsx

@@ -1,5 +1,5 @@
+import type { Store } from "@replayio/react-devtools-inline";
 import type { Dispatch, ReactNode, SetStateAction } from "react";
-import type { Store } from "react-devtools-inline";
 import type { Root } from "react-dom/client";
 
 import {

src/ui/components/SecondaryToolbox/react-devtools/__tests__/utils.ts

@@ -1,5 +1,5 @@
+import type { Store } from "@replayio/react-devtools-inline";
 import { createElement } from "react";
-import type { Store } from "react-devtools-inline";
 import { createRoot } from "react-dom/client";
 
 import { deconstructOperationsArray, reconstructOperationsArray } from "../rdtProcessing";
@@ -47,6 +47,7 @@ export function reactDevToolsBeforeEach() {
 
   // Stub global APIs required by react-devtools-inline (or its dependencies)
   window.URL.createObjectURL = jest.fn();
+  window.URL.revokeObjectURL = jest.fn();
   window.Worker = class Worker {
     constructor() {}
     addEventListener() {}
@@ -66,12 +67,12 @@ export function reactDevToolsBeforeEach() {
     activate: activateBackend,
     createBridge: createBackendBridge,
     initialize: initializeBackend,
-  } = require("react-devtools-inline/backend");
+  } = require("@replayio/react-devtools-inline/backend");
   const {
     initialize: createDevTools,
     createBridge: createFrontendBridge,
     createStore,
-  } = require("react-devtools-inline/frontend");
+  } = require("@replayio/react-devtools-inline/frontend");
 
   const listeners: Set<Function> = new Set();
   const wall = {

src/ui/components/SecondaryToolbox/react-devtools/injectReactDevtoolsBackend.ts

@@ -1,4 +1,4 @@
-import type { RendererInterface } from "react-devtools-inline";
+import type { RendererInterface } from "@replayio/react-devtools-inline";
 
 import { pauseEvaluationsCache } from "replay-next/src/suspense/PauseCache";
 import { ReplayClientInterface } from "shared/client/types";

yarn.lock

@@ -3679,6 +3679,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@replayio/react-devtools-inline@npm:4.28.6":
+  version: 4.28.6
+  resolution: "@replayio/react-devtools-inline@npm:4.28.6"
+  dependencies:
+    source-map-js: ^0.6.2
+    sourcemap-codec: ^1.4.8
+  checksum: 1b7ebbfd0c309792a3680ef783912dafa6ea3b2aafa98ffe89265818614ec7aa872772c13102fde8d64e568344dbdb0b3052e5584e97b9cc06b9a1aa6007fd49
+  languageName: node
+  linkType: hard
+
 "@replayio/replay@npm:^0.12.4":
   version: 0.12.4
   resolution: "@replayio/replay@npm:0.12.4"
@@ -14706,33 +14716,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-devtools-inline@npm:4.24.7":
-  version: 4.24.7
-  resolution: "react-devtools-inline@npm:4.24.7"
-  dependencies:
-    source-map-js: ^0.6.2
-    sourcemap-codec: ^1.4.8
-  checksum: 94c60252d78f4ce3544cd067f1d9d50b75c1c948f37f95484e24e5229705d02113398ce43ac95d7baa3cd2f7a4f1fa5094bd97bb0c0e52f74e0f33b2d43314f7
-  languageName: node
-  linkType: hard
-
-"react-devtools-inline@patch:react-devtools-inline@npm:4.24.7#.yarn/patches/react-devtools-inline-npm-4.24.7-9582a0f8d6.patch::locator=recordreplay-devtools%40workspace%3A.":
-  version: 4.24.7
-  resolution: "react-devtools-inline@patch:react-devtools-inline@npm%3A4.24.7#.yarn/patches/react-devtools-inline-npm-4.24.7-9582a0f8d6.patch::version=4.24.7&hash=303352&locator=recordreplay-devtools%40workspace%3A."
-  dependencies:
-    source-map-js: ^0.6.2
-    sourcemap-codec: ^1.4.8
-  checksum: d773307f4970396747a41d58d19f1c75ad393fe182bf34eab4b0d27e001bb97ac1b452a1a91322f3e91e44763e015e975287277f7fff742dc8cbb573787531fc
-  languageName: node
-  linkType: hard
-
-"react-devtools-inline_4_18_0@npm:[email protected]":
-  version: 4.18.0
-  resolution: "react-devtools-inline@npm:4.18.0"
-  checksum: f7ce6ea90bb2bf3b554927fd34f36eb3f6d458ad4ba9b7c4c6070b4f9601e9765bcdc8348715f58e29157ffb6020d298f3d0b5bef77c930ed397ecda450168c2
-  languageName: node
-  linkType: hard
-
 "react-dom@npm:0.0.0-experimental-49f741046-20230305":
   version: 0.0.0-experimental-49f741046-20230305
   resolution: "react-dom@npm:0.0.0-experimental-49f741046-20230305"
@@ -15082,6 +15065,7 @@ __metadata:
     "@reduxjs/toolkit": ^1.8.4
     "@replayio/overboard": ^0.4.1
     "@replayio/protocol": ^0.59.0
+    "@replayio/react-devtools-inline": 4.28.6
     "@replayio/replay": ^0.12.4
     "@sentry/react": ^7.9.0
     "@sentry/tracing": ^7.9.0
@@ -15194,8 +15178,6 @@ __metadata:
     react: 0.0.0-experimental-49f741046-20230305
     react-canvas-confetti: ^1.3.0
     react-circular-progressbar: ^2.0.4
-    react-devtools-inline: 4.24.7
-    react-devtools-inline_4_18_0: "npm:[email protected]"
     react-dom: 0.0.0-experimental-49f741046-20230305
     react-is: ^18.2.0
     react-json-tree: ^0.18.0