build: Switch to esbuild

We will build all packages except the frontend (where vite remains in
use) with esbuild.

For some reason, the @yarnpkg/esbuild-plugin-pnp doesn't allow esbuild
to load esm modules and we fall back to commonjs for dependencies.
Hence we had to switch back to node_modules (but still rely on yarn
hardlinking for a more efficient install).

8 files changed, 70 insertions, 90 deletions

diff --git a/packages/main/esbuild.config.js b/packages/main/esbuild.config.js
new file mode 100644
index 0000000..7653078
--- /dev/null
+++ b/packages/main/esbuild.config.js
@@ -0,0 +1,24 @@
+// @ts-check
+
+const { node } = require('../../config/build-common');
+const { getConfig } = require('../../config/esbuild-config');
+
+const externalPackages = ['electron'];
+
+if (process.env.MODE !== 'development') {
+  externalPackages.push('electron-devtools-installer');
+}
+
+module.exports = getConfig({
+  absWorkingDir: __dirname,
+  entryPoints: [
+    'src/index.ts',
+  ],
+  outfile: 'dist/index.cjs',
+  format: 'cjs',
+  platform: 'node',
+  target: node,
+  external: externalPackages,
+}, {
+  VITE_DEV_SERVER_URL: process.env.VITE_DEV_SERVER_URL || null,
+});
diff --git a/packages/main/package.json b/packages/main/package.json
index c4670a8..76eff8e 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -6,7 +6,6 @@
   "types": "dist-types/index.d.ts",
   "scripts": {
     "clean": "rimraf dist",
-    "build": "vite build",
     "typecheck": "tsc"
   },
   "dependencies": {
@@ -14,7 +13,7 @@
     "@sophie/shared": "workspace:*",
     "electron": "16.0.5",
     "json5": "^2.2.0",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "loglevel": "^1.8.0",
     "loglevel-plugin-prefix": "^0.8.4",
     "mobx": "^6.3.10",
@@ -22,14 +21,13 @@
     "ms": "^2.1.3"
   },
   "devDependencies": {
-    "@types/debug": "^4",
     "@types/electron-devtools-installer": "^2.2.1",
-    "@types/lodash": "^4.14.178",
+    "@types/lodash-es": "^4.17.5",
     "@types/ms": "^0.7.31",
     "@types/node": "^17.0.5",
     "electron-devtools-installer": "^3.2.0",
+    "esbuild": "^0.14.9",
     "rimraf": "^3.0.2",
-    "typescript": "^4.5.4",
-    "vite": "^2.7.7"
+    "typescript": "^4.5.4"
   }
 }
diff --git a/packages/main/src/controllers/config.ts b/packages/main/src/controllers/config.ts
index 7187ab4..f2467c7 100644
--- a/packages/main/src/controllers/config.ts
+++ b/packages/main/src/controllers/config.ts
@@ -18,7 +18,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { debounce } from 'lodash';
+import debounce from 'lodash-es/debounce';
 import ms from 'ms';
 import { applySnapshot, getSnapshot, onSnapshot } from 'mobx-state-tree';
 
diff --git a/packages/main/src/devTools.ts b/packages/main/src/devTools.ts
index b98974a..6c25b3e 100644
--- a/packages/main/src/devTools.ts
+++ b/packages/main/src/devTools.ts
@@ -18,38 +18,35 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import type { App, BrowserWindow } from 'electron';
+import type { BrowserWindow } from 'electron';
 
 /**
  * Installs the react and redux developer tools extensions.
  *
  * We use the redux devtools and connect the mobx store to it with `mst-middlewares`,
  * because the mobx-state-tree devtools are currently unmaintained.
- *
- * @param app The electron application instance.
  */
-export function installDevToolsExtensions(app: App): void {
-  app.whenReady().then(async () => {
-    const {
-      default: installExtension,
+export async function installDevToolsExtensions(): Promise<void> {
+  const installerPackage = await import('electron-devtools-installer');
+  const {
+    default: installExtension,
+    REACT_DEVELOPER_TOOLS,
+    REDUX_DEVTOOLS,
+  } = installerPackage.default instanceof Function
+      ? installerPackage
+      : installerPackage.default as unknown as typeof import('electron-devtools-installer');
+  await installExtension(
+    [
       REACT_DEVELOPER_TOOLS,
       REDUX_DEVTOOLS,
-    } = await import('electron-devtools-installer');
-    installExtension(
-      [
-        REACT_DEVELOPER_TOOLS,
-        REDUX_DEVTOOLS,
-      ],
-      {
-        forceDownload: false,
-        loadExtensionOptions: {
-          allowFileAccess: true,
-        },
+    ],
+    {
+      forceDownload: false,
+      loadExtensionOptions: {
+        allowFileAccess: true,
       },
-    );
-  }).catch((err) => {
-    console.error('Failed to install devtools extension', err);
-  });
+    },
+  );
 }
 
 /**
diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index 7c7be35..f8b6787 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -50,6 +50,9 @@ import { createMainStore } from './stores/MainStore';
 
 const isDevelopment = import.meta.env.MODE === 'development';
 
+// Alwayse enable sandboxing.
+app.enableSandbox();
+
 // Use alternative directory when debugging to avoid clobbering the main installation.
 if (isDevelopment) {
   app.setPath('userData', `${app.getPath('userData')}-dev`);
@@ -62,9 +65,6 @@ if (!isSingleInstance) {
   process.exit(0);
 }
 
-// Alwayse enable sandboxing.
-app.enableSandbox();
-
 // Disable chromium's MPRIS integration, which is usually more annoying
 // (triggered by random sounds played by websites) than useful.
 app.commandLine.appendSwitch(
@@ -90,17 +90,13 @@ function getResourceUrl(relativePath: string): string {
   return new URL(relativePath, baseUrl).toString();
 }
 
-let serviceInjectRelativePath = '../../service-inject/dist/index.cjs';
+let serviceInjectRelativePath = '../../service-inject/dist/index.js';
 let serviceInjectPath = getResourcePath(serviceInjectRelativePath);
 let serviceInject: WebSource = {
   code: readFileSync(serviceInjectPath, 'utf8'),
   url: getResourceUrl(serviceInjectRelativePath),
 };
 
-if (isDevelopment) {
-  installDevToolsExtensions(app);
-}
-
 let mainWindow: BrowserWindow | null = null;
 
 const store = createMainStore();
@@ -134,13 +130,13 @@ function shouldCancelMainWindowRequest(url: string, method: string): boolean {
   return !normalizedUrl.startsWith(getResourceUrl(rendererBaseUrl));
 }
 
-function createWindow(): Promise<unknown> {
+async function createWindow(): Promise<unknown> {
   mainWindow = new BrowserWindow({
     show: false,
     autoHideMenuBar: true,
     webPreferences: {
-      devTools: isDevelopment,
       sandbox: true,
+      devTools: isDevelopment,
       preload: getResourcePath('../../preload/dist/index.cjs'),
     },
   });
@@ -159,8 +155,14 @@ function createWindow(): Promise<unknown> {
     })
   });
 
-  webContents.on('will-navigate', (event) => {
-    event.preventDefault();
+  const pageUrl = (isDevelopment && import.meta.env.VITE_DEV_SERVER_URL !== undefined)
+    ? import.meta.env.VITE_DEV_SERVER_URL
+    : getResourceUrl('../renderer/dist/index.html');
+
+  webContents.on('will-navigate', (event, url) => {
+    if (url !== pageUrl) {
+      event.preventDefault();
+    }
   });
 
   webContents.setWindowOpenHandler(() => ({ action: 'deny' }));
@@ -279,10 +281,6 @@ function createWindow(): Promise<unknown> {
     callback({ requestHeaders });
   });
 
-  const pageUrl = (isDevelopment && import.meta.env.VITE_DEV_SERVER_URL !== undefined)
-    ? import.meta.env.VITE_DEV_SERVER_URL
-    : getResourceUrl('../renderer/dist/index.html');
-
   return Promise.all([
     mainWindow.loadURL(pageUrl),
     browserView.webContents.loadURL('https://git.marussy.com/sophie/about'),
@@ -307,7 +305,13 @@ app.on('window-all-closed', () => {
   }
 });
 
-app.whenReady().then(createWindow).catch((err) => {
+app.whenReady().then(async () => {
+  if (isDevelopment) {
+    await installDevToolsExtensions();
+  }
+
+  return createWindow();
+}).catch((err) => {
   console.error('Failed to create window', err);
   process.exit(1);
 });
diff --git a/packages/main/src/services/ConfigPersistenceService.ts b/packages/main/src/services/ConfigPersistenceService.ts
index 1c0315f..ee5eb9f 100644
--- a/packages/main/src/services/ConfigPersistenceService.ts
+++ b/packages/main/src/services/ConfigPersistenceService.ts
@@ -20,7 +20,7 @@
 import { watch } from 'fs';
 import { readFile, stat, writeFile } from 'fs/promises';
 import JSON5 from 'json5';
-import { throttle } from 'lodash';
+import throttle from 'lodash-es/throttle';
 import { join } from 'path';
 
 import type { ConfigSnapshotOut } from  '../stores/Config';
diff --git a/packages/main/src/utils/logging.ts b/packages/main/src/utils/logging.ts
index 9f1133f..5cb5d21 100644
--- a/packages/main/src/utils/logging.ts
+++ b/packages/main/src/utils/logging.ts
@@ -36,10 +36,6 @@ prefix.apply(loglevel, {
       const lastSegment = nameSegments.pop();
       shortName = [...nameSegments.map((segment) => segment[0]), lastSegment].join(':');
     }
-    if (isDevelopment) {
-      // `watch.js` already appends timestamps.
-      return `${level} (${shortName})`;
-    }
     return `[${timestamp}] ${level} (${shortName})`;
   },
 });
diff --git a/packages/main/vite.config.js b/packages/main/vite.config.js
deleted file mode 100644
index bdb0ca1..0000000
--- a/packages/main/vite.config.js
+++ /dev/null
@@ -1,39 +0,0 @@
-// @ts-check
-
-import { builtinModules } from 'module';
-
-import { makeConfig, node } from '../../config/vite-common';
-
-/** @type {string} */
-const PACKAGE_ROOT = __dirname;
-
-/**
- * @type {import('vite').UserConfig}
- * @see https://vitejs.dev/config/
- */
-const config = makeConfig({
-  root: PACKAGE_ROOT,
-  define: {
-    // Allow access to process.env in imported packages.
-    // https://github.com/vitejs/vite/issues/3176#issuecomment-876610206
-    'process.env': 'process["env"]',
-    'global.process.env': 'global.process["env"]',
-    'globalThis.process.env': 'globalThis.process["env"]',
-  },
-  build: {
-    target: node,
-    lib: {
-      entry: 'src/index.ts',
-      formats: ['cjs'],
-    },
-    rollupOptions: {
-      external: [
-        'electron',
-        'electron-devtools-installer',
-        ...builtinModules,
-      ],
-    },
-  },
-});
-
-export default config;