chore: upgrade & fix react devtools (#270)

packages/raga-app/package.json

@@ -9,7 +9,9 @@
     "build": "electron-forge package",
     "check-lint": "eslint .",
     "check-types": "tsc --noEmit",
-    "dev": "cross-env NODE_ENV=development ROARR_LOG=true FLUENTFFMPEG_COV=0 electron-forge start",
+    "dev": "yarn dev:react-devtools & yarn dev:forge",
+    "dev:forge": "cross-env NODE_ENV=development ROARR_LOG=true FLUENTFFMPEG_COV=0 electron-forge start",
+    "dev:react-devtools": "react-devtools",
     "clean": "rm -rf .vite/* out/*",
     "dist": "electron-forge make",
     "lint-fix": "eslint --fix .",
@@ -44,6 +46,7 @@
     "sirv": "^3.0.0",
     "use-immer": "^0.10.0",
     "usehooks-ts": "3.1.0",
+    "vite-plugin-html-config": "^2.0.2",
     "wavesurfer.js": "^7.8.8",
     "web-audio-beat-detector": "^8.2.18",
     "zustand": "^5.0.1"
@@ -64,7 +67,7 @@
     "electron": "^33.2.0",
     "electron-extension-installer": "^1.2.0",
     "eslint": "^9.14.0",
-    "react-devtools": "^5.3.2",
+    "react-devtools": "^6.0.1",
     "sass": "^1.80.6",
     "typescript": "^5.6.3",
     "vite": "^5.4.10"

packages/raga-app/src/client/main.tsx

@@ -1,14 +1,12 @@
 import { BlueprintProvider, Classes, FocusStyleManager } from "@blueprintjs/core";
 import { createLogWriter } from "@roarr/browser-log-writer";
-import { call, main } from "effection";
 // import { StrictMode } from "react";
 import { createRoot } from "react-dom/client";
 
-import { INSTALL_REACT_DEVELOPER_TOOLS } from "../common/constants";
 import { ClientErrors } from "../common/errorMessages";
 import App from "./app";
 
-await main(function* () {
+function main() {
   // set up client logging
   localStorage.setItem("ROARR_LOG", "true");
   globalThis.ROARR.write = createLogWriter();
@@ -30,9 +28,6 @@ await main(function* () {
       {/* </StrictMode> */}
     </BlueprintProvider>,
   );
+}
 
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-  if (INSTALL_REACT_DEVELOPER_TOOLS) {
-    yield* call(import("react-devtools"));
-  }
-});
+main();

packages/raga-app/src/common/constants.ts

@@ -1,10 +1,5 @@
 export const DEBUG = process.env.NODE_ENV === "development";
 
-// HACKHACK: this is currently not working, tried various packages (electron-devtools-installer,
-// electron-devtools-vendor, and standalone react-devtools), and nothing seems to work with the current combination of
-// Chromium, Electron, React, and the devtools extension. Likely due to https://github.com/facebook/react/issues/25939.
-export const INSTALL_REACT_DEVELOPER_TOOLS = false;
-
 export const LOCAL_STORAGE_KEY = "raga-app";
 export const DEFAULT_AUDIO_FILES_SERVER_PORT = 8457;
 export const DEFAULT_ID3_TAG_USER_EMAIL = "[email protected]";

packages/raga-app/src/main.ts

@@ -21,7 +21,6 @@ import {
   type OpenFileLocationOptions,
 } from "./common/events";
 import { createScopedLogger } from "./common/logUtils";
-import { installReactDevTools } from "./server/devTools";
 
 // see https://www.electronforge.io/config/plugins/vite#hot-module-replacement-hmr
 declare const MAIN_WINDOW_VITE_DEV_SERVER_URL: string;
@@ -36,8 +35,6 @@ const MAX_INITIAL_WINDOW_WIDTH = 2000;
 const MAX_INITIAL_WINDOW_HEIGHT = 1200;
 
 const createWindow = async () => {
-  await installReactDevTools();
-
   const primaryDisplay = screen.getPrimaryDisplay();
 
   // N.B. Vite still makes assumptions about Electron not supporting ESM (which was true until v28),

packages/raga-app/vite.renderer.config.mjs

@@ -1,10 +1,18 @@
 import { sassNodeModulesLoadPaths } from "@blueprintjs/node-build-scripts";
 import react from "@vitejs/plugin-react";
 import { defineConfig } from "vite";
+import htmlPlugin from "vite-plugin-html-config";
 
 // https://vitejs.dev/config
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    htmlPlugin({
+      // Latest react devtools only work in Electron via script tag loaded before React on the page
+      // see https://github.com/electron/electron/issues/41613#issuecomment-2090365372
+      headScripts: process.env.NODE_ENV === "development" ? [{ src: "http://localhost:8097" }] : [],
+    }),
+    react(),
+  ],
   publicDir: "./src/client/assets",
   build: {
     target: "esnext",

yarn.lock

@@ -51,7 +51,7 @@ __metadata:
     node-taglib-sharp: "npm:^5.2.3"
     radash: "npm:^12.1.0"
     react: "npm:^18.3.1"
-    react-devtools: "npm:^5.3.2"
+    react-devtools: "npm:^6.0.1"
     react-dom: "npm:^18.3.1"
     react-dropzone: "npm:^14.3.5"
     react-resizable-panels: "npm:^2.1.6"
@@ -63,6 +63,7 @@ __metadata:
     use-immer: "npm:^0.10.0"
     usehooks-ts: "npm:3.1.0"
     vite: "npm:^5.4.10"
+    vite-plugin-html-config: "npm:^2.0.2"
     wavesurfer.js: "npm:^7.8.8"
     web-audio-beat-detector: "npm:^8.2.18"
     zustand: "npm:^5.0.1"
@@ -10633,29 +10634,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-devtools-core@npm:5.3.2":
-  version: 5.3.2
-  resolution: "react-devtools-core@npm:5.3.2"
+"react-devtools-core@npm:6.0.1":
+  version: 6.0.1
+  resolution: "react-devtools-core@npm:6.0.1"
   dependencies:
     shell-quote: "npm:^1.6.1"
     ws: "npm:^7"
-  checksum: 10/640123f775daeb2176ebc9caf85b1cb9dbb147cbb607f221254ac4967530ddf96332a582d5b169c840984220596a23780ed6f9b37c37461160e9b623f5f4caee
+  checksum: 10/c6c834d0dda4af2521473298788b2d9cbc49814d203b183f440a94051df26c1cba0ff2fdf7bbdbadafc79da5ef4c3376d20bf8a15a4c31649bc0aca4da51c556
   languageName: node
   linkType: hard
 
-"react-devtools@npm:^5.3.2":
-  version: 5.3.2
-  resolution: "react-devtools@npm:5.3.2"
+"react-devtools@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "react-devtools@npm:6.0.1"
   dependencies:
     cross-spawn: "npm:^5.0.1"
     electron: "npm:^23.1.2"
     internal-ip: "npm:^6.2.0"
     minimist: "npm:^1.2.3"
-    react-devtools-core: "npm:5.3.2"
+    react-devtools-core: "npm:6.0.1"
     update-notifier: "npm:^2.1.0"
   bin:
     react-devtools: bin.js
-  checksum: 10/70524f12040bc68c4afba369d7f01874fcaa70f8bdbdbc8f5ca1df8c1a2a2c50a4268d395b6334714acfb562e0930c3a0aa2af4e9f3b75b082077720d70fff19
+  checksum: 10/3346443989585ab9158feabb61aa21a909ded789b78914f4a8bd7af699f7c1a6247fb228364bc160c499d302945719347fad9d4f7055bfaeee6ed2e6cb0ddd26
   languageName: node
   linkType: hard
 
@@ -13017,6 +13018,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"vite-plugin-html-config@npm:^2.0.2":
+  version: 2.0.2
+  resolution: "vite-plugin-html-config@npm:2.0.2"
+  peerDependencies:
+    vite: ">=5.0.0"
+  checksum: 10/ac80a172f2ed00b72285d190ea32d113fb063d9839b938308ab669f5f0bc4ea19cb922b15da56749a7685ffe4dec0caf4a8c136536df74eef65c34984db954b4
+  languageName: node
+  linkType: hard
+
 "vite@npm:^5.4.10":
   version: 5.4.10
   resolution: "vite@npm:5.4.10"