refactor(app-shell, app-shell-odd): update electron-devtools-installer (#20176)

* refactor(app-shell, app-shell-odd): update electron-devtools-installer

Author: koji

app-shell-odd/package.json

@@ -42,7 +42,7 @@
     "@types/uuid": "^3.4.7",
     "ajv": "6.12.3",
     "dateformat": "3.0.3",
-    "electron-devtools-installer": "3.2.0",
+    "electron-devtools-installer": "4.0.0",
     "electron-store": "5.1.1",
     "electron-updater": "6.3.9",
     "execa": "4.0.0",

app-shell-odd/src/main.ts

@@ -193,7 +193,7 @@ function installDevtools(): void {
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   const devtools = require('electron-devtools-installer')
   const extensions = [devtools.REACT_DEVELOPER_TOOLS, devtools.REDUX_DEVTOOLS]
-  const install = devtools.default
+  const install = devtools.installExtensions
   const forceReinstall = config.reinstallDevtools
 
   log.debug('Installing devtools')

app-shell/package.json

@@ -51,7 +51,7 @@
     "electron-debug": "3.2.0",
     "electron-is-dev": "1.2.0",
     "electron-localshortcut": "3.2.1",
-    "electron-devtools-installer": "3.2.0",
+    "electron-devtools-installer": "4.0.0",
     "electron-store": "5.1.1",
     "electron-updater": "6.3.9",
     "execa": "4.0.0",

app-shell/src/main.ts

@@ -3,7 +3,11 @@ import dns from 'dns'
 import { app, BrowserWindow, ipcMain } from 'electron'
 import contextMenu from 'electron-context-menu'
 import electronDebug from 'electron-debug'
-import * as electronDevtoolsInstaller from 'electron-devtools-installer'
+import {
+  installExtension,
+  REACT_DEVELOPER_TOOLS,
+  REDUX_DEVTOOLS,
+} from 'electron-devtools-installer'
 
 import { getConfig, getOverrides, getStore, registerConfig } from './config'
 import {
@@ -63,11 +67,20 @@ interface HandlerSet {
 // Handler caching using window ID as key
 const handlerSets = new Map<string, HandlerSet>()
 
-// prepended listener is important here to work around Electron issue
-// https://github.com/electron/electron/issues/19468#issuecomment-623529556
-app.prependOnceListener('ready', startUp)
-// eslint-disable-next-line @typescript-eslint/no-misused-promises
-if (config.devtools) app.once('ready', installDevtools)
+app
+  .whenReady()
+  .then(async () => {
+    startUp()
+
+    if (config.devtools) {
+      await installDevtools()
+
+      if (mainWindow && !mainWindow.isDestroyed()) {
+        mainWindow.webContents.openDevTools({ mode: 'detach' })
+      }
+    }
+  })
+  .catch(err => log.error('Startup failed', { err }))
 
 app.once('window-all-closed', () => {
   log.debug('all windows closed, quitting the app')
@@ -203,36 +216,23 @@ function createRendererLogger(): Logger {
   return logger
 }
 
-function installDevtools(): Promise<Logger> {
-  const extensions = [
-    electronDevtoolsInstaller.REACT_DEVELOPER_TOOLS,
-    electronDevtoolsInstaller.REDUX_DEVTOOLS,
-  ]
-  // @ts-expect-error the types for electron-devtools-installer are not correct
-  // when importing the default export via commmon JS. the installer is actually nested in
-  // another default object
-  const install = electronDevtoolsInstaller.default?.default
-  const forceReinstall = config.reinstallDevtools
-
-  log.debug('Installing devtools')
-
-  if (typeof install === 'function') {
-    return install(extensions, {
+async function installDevtools(): Promise<void> {
+  const extensions = [REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS]
+
+  log.debug('Installing devtools with v4 API')
+
+  try {
+    await installExtension(extensions, {
       loadExtensionOptions: { allowFileAccess: true },
-      forceDownload: forceReinstall,
+      forceDownload: config.reinstallDevtools,
+    })
+
+    log.debug('Devtools extensions installed')
+  } catch (error) {
+    log.warn('Failed to install devtools extensions', {
+      forceReinstall: config.reinstallDevtools,
+      error,
     })
-      .then(() => log.debug('Devtools extensions installed'))
-      .catch((error: unknown) => {
-        log.warn('Failed to install devtools extensions', {
-          forceReinstall,
-          error,
-        })
-      })
-  } else {
-    log.warn('could not resolve electron dev tools installer')
-    return Promise.reject(
-      new Error('could not resolve electron dev tools installer')
-    )
   }
 }
 

yarn.lock

@@ -10813,14 +10813,11 @@ [email protected]:
     electron-is-dev "^1.1.0"
     electron-localshortcut "^3.1.0"
 
-electron-devtools-installer@3.2.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/electron-devtools-installer/-/electron-devtools-installer-3.2.0.tgz#acc48d24eb7033fe5af284a19667e73b78d406d0"
-  integrity sha512-t3UczsYugm4OAbqvdImMCImIMVdFzJAHgbwHpkl5jmfu1izVgUcP/mnrPqJIpEeCK1uZGpt+yHgWEN+9EwoYhQ==
+electron-devtools-installer@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/electron-devtools-installer/-/electron-devtools-installer-4.0.0.tgz#6556a6a326cddea18194cb6d97d85c8ae329dedf"
+  integrity sha512-9Tntu/jtfSn0n6N/ZI6IdvRqXpDyLQiDuuIbsBI+dL+1Ef7C8J2JwByw58P3TJiNeuqyV3ZkphpNWuZK5iSY2w==
   dependencies:
-    rimraf "^3.0.2"
-    semver "^7.2.1"
-    tslib "^2.1.0"
     unzip-crx-3 "^0.2.0"
 
 electron-dl@^3.2.1:
@@ -20480,7 +20477,7 @@ semver@^6.0.0, semver@^6.2.0, semver@^6.3.0, semver@^6.3.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
-semver@^7.0.0, semver@^7.2.1, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.3, semver@^7.5.4:
+semver@^7.0.0, semver@^7.3.2, semver@^7.3.4, semver@^7.3.5, semver@^7.3.7, semver@^7.3.8, semver@^7.5.3, semver@^7.5.4:
   version "7.6.0"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
   integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
@@ -21209,7 +21206,7 @@ string-ts@^2.2.1:
   resolved "https://registry.yarnpkg.com/string-ts/-/string-ts-2.2.1.tgz#9cf9a93d210f778080a9db86ca37cba37f55e44c"
   integrity sha512-Q2u0gko67PLLhbte5HmPfdOjNvUKbKQM+mCNQae6jE91DmoFHY6HH9GcdqCeNx87DZ2KKjiFxmA0R/42OneGWw==
 
-"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -21227,6 +21224,15 @@ string-width@^3.0.0, string-width@^3.1.0:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^5.1.0"
 
+string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
 string-width@^5.0.1, string-width@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-5.1.2.tgz#14f8daec6d81e7221d2a357e668cab73bdbca794"
@@ -21339,7 +21345,7 @@ stringify-object@^3.2.1:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -21360,6 +21366,13 @@ strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
 strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -23656,7 +23669,7 @@ worker-plugin@^5.0.0:
   dependencies:
     loader-utils "^1.1.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -23683,6 +23696,15 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
+wrap-ansi@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"