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).

5 files changed, 42 insertions, 45 deletions

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})`;
   },
 });