feat(electron): devtools

packages/electron/package.json

@@ -17,7 +17,8 @@
   ],
   "dependencies": {
     "@flecks/core": "^1.4.1",
-    "electron": "^18.0.1"
+    "electron": "^18.0.1",
+    "electron-devtools-installer": "^3.2.0"
   },
   "devDependencies": {
     "@flecks/fleck": "^1.4.1"

packages/electron/src/server/index.js

@@ -10,6 +10,7 @@ import {
 
 const {
   FLECKS_CORE_ROOT = process.cwd(),
+  NODE_ENV,
 } = process.env;
 
 let win;
@@ -29,6 +30,16 @@ export default {
        * See: https://www.electronjs.org/docs/latest/api/browser-window
        */
       browserWindowOptions: {},
+      /**
+       * Install devtools extensions (by default).
+       *
+       * If `true`, will install some devtools extensions based on which flecks are enabled.
+       *
+       * You can pass an array of Chrome store IDs to install a list of custom extensions.
+       *
+       * Extensions will not be installed if `'production' === process.env.NODE_ENV`
+       */
+      installExtensions: true,
       /**
        * Quit the app when all windows are closed.
        */
@@ -88,7 +99,28 @@ export default {
     },
     '@flecks/electron/server.window': async (win, flecks) => {
       const {public: $$public} = flecks.get('@flecks/web/server');
-      const {url = `http://${$$public}`} = flecks.get('@flecks/electron/server');
+      const {
+        installExtensions,
+        url = `http://${$$public}`,
+      } = flecks.get('@flecks/electron/server');
+      if (installExtensions && 'production' !== NODE_ENV) {
+        const {
+          default: installExtension,
+          REDUX_DEVTOOLS,
+          REACT_DEVELOPER_TOOLS,
+        } = __non_webpack_require__('electron-devtools-installer');
+        let extensions = installExtensions;
+        if (!Array.isArray(extensions)) {
+          extensions = [];
+          if (flecks.fleck('@flecks/react')) {
+            extensions.push(REACT_DEVELOPER_TOOLS);
+          }
+          if (flecks.fleck('@flecks/redux')) {
+            extensions.push(REDUX_DEVTOOLS);
+          }
+        }
+        await installExtension(extensions);
+      }
       await win.loadURL(url);
     },
     '@flecks/repl.context': (flecks) => ({