feat: auto install react devtools

CONTRIBUTING.md

@@ -35,6 +35,11 @@ Start development mode (includes GraphQL codegen and hot module reload):
   pnpm dev
   ```
 
+> [!NOTE]
+> This will also install React Developer Tools extension automatically so you can inspect the renderer process.
+> Make sure you force a reload when first opening the `Developer Tools`.
+
+
 ### Tests
 
 There are two main checks:

package.json

@@ -110,6 +110,7 @@
     "dotenv": "17.3.1",
     "electron": "40.6.0",
     "electron-builder": "26.8.1",
+    "electron-devtools-installer": "4.0.0",
     "final-form": "5.0.0",
     "graphql": "16.12.0",
     "happy-dom": "20.6.2",
@@ -134,6 +135,7 @@
       "@swc/core",
       "@tailwindcss/oxide",
       "electron",
+      "electron-winstaller",
       "esbuild",
       "unrs-resolver"
     ]
@@ -142,4 +144,4 @@
     "*": "biome check --no-errors-on-unmatched",
     "*.{js,ts,tsx}": "pnpm test --changed --passWithNoTests --update"
   }
-}
+}

src/main/devtools.ts

@@ -0,0 +1,62 @@
+import { session } from 'electron';
+import installExtension, {
+  REACT_DEVELOPER_TOOLS,
+} from 'electron-devtools-installer';
+
+import { logInfo, logWarn } from '../shared/logger';
+
+import { isDevMode } from './utils';
+
+let installTask: Promise<void> | null = null;
+
+export async function installReactDevtools() {
+  if (!isDevMode) {
+    return;
+  }
+
+  if (installTask) {
+    await installTask;
+    return;
+  }
+
+  installTask = (async () => {
+    try {
+      const result = await installExtension(REACT_DEVELOPER_TOOLS, {
+        loadExtensionOptions: {
+          allowFileAccess: true,
+        },
+        forceDownload: false,
+      });
+
+      logInfo('devtools', `Installed ${result.name} v${result.version}`);
+
+      // Verify the extension is loaded
+      const extensions = session.defaultSession.extensions.getAllExtensions();
+      const installedReactDevTools = extensions.find((ext) =>
+        ext.name.includes('React Developer Tools'),
+      );
+
+      if (installedReactDevTools) {
+        logInfo(
+          'devtools',
+          `React Developer Tools verified: ${installedReactDevTools.name} v${installedReactDevTools.version}`,
+        );
+      } else {
+        logWarn(
+          'devtools',
+          'React Developer Tools not found after installation',
+        );
+      }
+    } catch (error) {
+      logWarn(
+        'devtools',
+        'Failed to install React DevTools via installer',
+        error,
+      );
+    } finally {
+      installTask = null;
+    }
+  })();
+
+  await installTask;
+}

src/main/first-run.ts

@@ -7,6 +7,8 @@ import { APPLICATION } from '../shared/constants';
 import { logError } from '../shared/logger';
 import { isMacOS } from '../shared/platform';
 
+import { isDevMode } from './utils';
+
 export async function onFirstRunMaybe() {
   if (isFirstRun()) {
     await promptMoveToApplicationsFolder();
@@ -21,7 +23,6 @@ async function promptMoveToApplicationsFolder() {
     return;
   }
 
-  const isDevMode = !!process.defaultApp;
   if (isDevMode || app.isInApplicationsFolder()) {
     return;
   }

src/main/index.ts

@@ -21,6 +21,7 @@ import {
 } from '../shared/events';
 import { logInfo, logWarn } from '../shared/logger';
 
+import { installReactDevtools } from './devtools';
 import { handleMainEvent, onMainEvent, sendRendererEvent } from './events';
 import { onFirstRunMaybe } from './first-run';
 import { TrayIcons } from './icons';
@@ -89,6 +90,7 @@ let shouldUseUnreadActiveIcon = true;
 app.whenReady().then(async () => {
   preventSecondInstance();
 
+  await installReactDevtools();
   await onFirstRunMaybe();
 
   appUpdater.start();