chore: add react developer tools to electron (#1858)

Co-authored-by: NamH <NamNh0122@gmail.com>

electron/main.ts

@@ -28,6 +28,22 @@ import { setupCore } from './utils/setup'
 
 app
   .whenReady()
+  .then(async () => {
+    if (!app.isPackaged) {
+      // Which means you're running from source code
+      const { default: installExtension, REACT_DEVELOPER_TOOLS } = await import(
+        'electron-devtools-installer'
+      ) // Don't use import on top level, since the installer package is dev-only
+      try {
+        const name = installExtension(REACT_DEVELOPER_TOOLS)
+        console.log(`Added Extension: ${name}`)
+      } catch (err) {
+        console.log('An error occurred while installing devtools:')
+        console.error(err)
+        // Only log the error and don't throw it because it's not critical
+      }
+    }
+  })
   .then(setupCore)
   .then(createUserSpace)
   .then(migrateExtensions)

electron/package.json

@@ -99,6 +99,7 @@
     "@typescript-eslint/parser": "^6.7.3",
     "electron": "28.0.0",
     "electron-builder": "^24.9.1",
+    "electron-devtools-installer": "^3.2.0",
     "electron-playwright-helpers": "^1.6.0",
     "eslint-plugin-react": "^7.33.2",
     "run-script-os": "^1.1.6"