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

2 files changed, 166 insertions, 130 deletions

diff --git a/scripts/build.js b/scripts/build.js
new file mode 100644
index 0000000..416530d
--- /dev/null
+++ b/scripts/build.js
@@ -0,0 +1,37 @@
+const esbuild = require('esbuild');
+const { join } = require('path');
+const vite = require('vite');
+
+/**
+ * @param {string} packageName
+ * @returns {Promise<import('esbuild').BuildResult>}
+ */
+function buildPackageEsbuild(packageName) {
+  const config = require(`../packages/${packageName}/esbuild.config.js`);
+  return esbuild.build(config);
+}
+
+function buildPackageVite(packageName) {
+  return vite.build({
+    configFile: join(__dirname, `../packages/${packageName}/vite.config.js`),
+  });
+}
+
+function buildAll() {
+  // Esbuild can natively load a typescript main file,
+  // so we don't need to bundle `service-shared`.
+  // We onyl bundle `shared` for vite.
+  const buildShared = buildPackageEsbuild('shared');
+  return Promise.all([
+    buildShared.then(() => buildPackageEsbuild('main')),
+    buildPackageEsbuild('service-inject'),
+    buildPackageEsbuild('service-preload'),
+    buildPackageEsbuild('preload'),
+    buildPackageVite('renderer'),
+  ]);
+}
+
+buildAll().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});
diff --git a/scripts/watch.js b/scripts/watch.js
index 82dc01e..367ab88 100644
--- a/scripts/watch.js
+++ b/scripts/watch.js
@@ -1,32 +1,23 @@
-#!/usr/bin/env node
-
 // @ts-check
 
+const esbuild = require('esbuild');
 const { spawn } = require('child_process');
+const chokidar = require('chokidar');
 const electronPath = require('electron');
-const { build, createLogger, createServer } = require('vite');
+const { join } = require('path');
+const { createServer } = require('vite');
 
-/** @type {string} */
-const mode = process.env.MODE = process.env.MODE || 'development';
+process.env.MODE = 'development';
+process.env.NODE_ENV = 'development';
 
-/** @type {import('vite').LogLevel} */
-const LOG_LEVEL = 'info';
+/** @type {string} */
+const sharedPackageSource = packageSource('shared');
 
-/** @type {import('vite').InlineConfig} */
-const sharedConfig = {
-  mode,
-  build: {
-    watch: {},
-  },
-  logLevel: LOG_LEVEL,
-};
+/** @type {string} */
+const serviceSharedPackageSource = packageSource('service-shared');
 
-/**
- * Messages on stderr that match any of the contained patterns will be stripped from output
- *
- * @type {RegExp[]}
- */
-const stderrFilterPatterns = [
+/** @type {RegExp[]} */
+const stderrIgnorePatterns = [
   // warning about devtools extension
   // https://github.com/cawa-93/vite-electron-builder/issues/492
   // https://github.com/MarshallOfSound/electron-devtools-installer/issues/143
@@ -37,27 +28,102 @@ const stderrFilterPatterns = [
 ];
 
 /**
- * @param {{name: string; configFile: string; writeBundle?: import('rollup').OutputPlugin['writeBundle'] }} config
- * @returns {Promise<unknown>}
+ * @param {string} packageName
+ * @returns {string}
+ */
+function packageSource(packageName) {
+  return join(__dirname, `../packages/${packageName}/src`);
+}
+
+/**
+ * @param {string} packageName
+ * @param {string[]} [extraPaths]
+ * @param {() => void} [callback]
+ * @return {Promise<void>}
+ */
+async function setupEsbuildWatcher(packageName, extraPaths, callback) {
+  const config = require(`../packages/${packageName}/esbuild.config.js`);
+  config.logLevel = 'info';
+  config.incremental = true;
+  const incrementalBuild = await esbuild.build(config);
+  const paths = [
+    packageSource(packageName),
+    ...(extraPaths || []),
+  ];
+  const watcher = chokidar.watch(paths, {
+    ignored: /(^|[\/\\])\.|__(tests|mocks)__|\.(spec|test)\.[jt]sx?$/,
+    ignoreInitial: true,
+    persistent: true,
+  });
+  if (callback) {
+    callback();
+  }
+  watcher.on('change', () => {
+    incrementalBuild.rebuild().then(() => {
+      console.log(`\u26a1 Reloading package ${packageName}`);
+      if (callback) {
+        callback();
+      }
+    }).catch((err) => {
+      const errCount = err.errors.length;
+      console.error(
+        '\ud83d\udd25',
+        errCount,
+        errCount > 1 ? 'errors' : 'error',
+        'while rebuilding package',
+        packageName
+      );
+    });
+  });
+}
+
+/**
+ * @param {string} packageName
+ * @return {Promise<import('vite').ViteDevServer>}
  */
-function getWatcher({ name, configFile, writeBundle }) {
-  return build({
-    ...sharedConfig,
-    configFile,
-    plugins: [
-      {
-        name,
-        writeBundle,
+async function setupDevServer(packageName) {
+  const viteDevServer = await createServer({
+    build: {
+      watch: {
+        skipWrite: true,
+        clearScreen: false,
       },
-    ],
+    },
+    configFile: join(__dirname, `../packages/${packageName}/vite.config.js`),
+  });
+  await viteDevServer.listen();
+  return viteDevServer;
+}
+
+/**
+ * @param {(event: import('vite').HMRPayload) => void} sendEvent
+ * @return {Promise<void>}
+ */
+function setupPreloadPackageWatcher(sendEvent) {
+  return setupEsbuildWatcher('preload', [sharedPackageSource], () => {
+    sendEvent({
+      type: 'full-reload',
+    });
+  });
+}
+
+/**
+ * @param {string} packageName
+ * @param {(event: import('vite').HMRPayload) => void} sendEvent
+ * @return {Promise<void>}
+ */
+function setupServicePackageWatcher(packageName, sendEvent) {
+  return setupEsbuildWatcher(packageName, [serviceSharedPackageSource], () => {
+    sendEvent({
+      type: 'custom',
+      event: 'sophie:reload-services',
+    });
   });
 }
 
 /**
- * Start or restart App when source files are changed.
- *
  * @param {import('vite').ViteDevServer} viteDevServer
- * @returns {Promise<unknown>}
+ * @return {Promise<void>}
  */
 function setupMainPackageWatcher(viteDevServer) {
   // Write a value to an environment variable to pass it to the main process.
@@ -67,122 +133,55 @@ function setupMainPackageWatcher(viteDevServer) {
   const path = '/';
   process.env.VITE_DEV_SERVER_URL = `${protocol}//${host}:${port}${path}`;
 
-  const logger = createLogger(
-    LOG_LEVEL,
-    {
-      prefix: '[main]',
-    },
-  );
-
   /** @type {import('child_process').ChildProcessWithoutNullStreams | null} */
   let spawnProcess = null;
 
-  return getWatcher({
-    name: 'reload-app-on-main-package-change',
-    configFile: 'packages/main/vite.config.js',
-    writeBundle() {
+  return setupEsbuildWatcher(
+    'main',
+    [
+      serviceSharedPackageSource,
+      sharedPackageSource
+    ],
+    () => {
       if (spawnProcess !== null) {
         spawnProcess.kill('SIGINT');
         spawnProcess = null;
       }
 
-      spawnProcess = spawn(String(electronPath), ['.']);
-
-      spawnProcess.stdout.on('data', (data) => {
-        if (data.toString().trim() !== '') {
-          logger.warn(data.toString(), {timestamp: true})
-        }
+      spawnProcess = spawn(String(electronPath), ['.'], {
+        stdio: ['inherit', 'inherit', 'pipe'],
       });
 
       spawnProcess.stderr.on('data', (data) => {
-        const trimmedData = data.toString().trim();
-        if (trimmedData === '') {
-          return;
+        const stderrString = data.toString('utf-8').trimRight();
+        if (!stderrIgnorePatterns.some((r) => r.test(stderrString))) {
+          console.error(stderrString);
         }
-        const mayIgnore = stderrFilterPatterns.some((r) => r.test(data));
-        if (mayIgnore) {
-          return;
-        }
-        logger.error(data, { timestamp: true });
-      });
-    },
-  });
-}
-
-/**
- * Reload App when source files are changed.
- *
- * @param {import('vite').ViteDevServer} viteDevServer
- * @returns {Promise<unknown>}
- */
-function setupPreloadPackageWatcher(viteDevServer) {
-  return getWatcher({
-    name: 'reload-page-on-preload-package-change',
-    configFile: 'packages/preload/vite.config.js',
-    writeBundle() {
-      viteDevServer.ws.send({
-        type: 'full-reload',
-      });
-    },
-  });
-}
-
-/**
- * Reload services when source files are changed.
- *
- * @param {import('vite').ViteDevServer} viteDevServer
- * @param {string} packageName The name of the package to watch.
- * @returns {Promise<unknown>}
- */
-function setupServicePreloadPackageWatcher(viteDevServer, packageName) {
-  return getWatcher({
-    name: `reload-services-on-${packageName}-package-change`,
-    configFile: `packages/${packageName}/vite.config.js`,
-    writeBundle() {
-      console.log('wrote');
-      viteDevServer.ws.send({
-        type: 'custom',
-        event: 'sophie:reload-services',
       });
     },
-  });
-}
-
-/**
- * Rebuild package when source files are changed.
- *
- * @param {string} packageName The name of the package to watch.
- * @returns {Promise<unknown>}
- */
-function setupSharedPackageWatcher(packageName) {
-  return getWatcher({
-    name: `rebuild-package-on-${packageName}-package-change`,
-    configFile: `packages/${packageName}/vite.config.js`,
-  });
+  );
 }
 
 /**
- * @returns {Promise<unknown>}
+ * @returns {Promise<void>}
  */
 async function setupDevEnvironment() {
-  const serviceSharedWatcher = setupSharedPackageWatcher('service-shared');
-
-  await setupSharedPackageWatcher('shared');
-
-  const viteDevServer = await createServer({
-    ...sharedConfig,
-    configFile: 'packages/renderer/vite.config.js',
-  });
-  await viteDevServer.listen();
-
+  /** @type {import('vite').ViteDevServer | null} */
+  let viteDevServer = null;
+  /** @type {(event: import('vite').HMRPayload) => void} */
+  const sendEvent = (event) => {
+    if (viteDevServer !== null) {
+      viteDevServer.ws.send(event);
+    }
+  };
   await Promise.all([
-    setupPreloadPackageWatcher(viteDevServer),
-    serviceSharedWatcher.then(() => Promise.all([
-      setupServicePreloadPackageWatcher(viteDevServer, 'service-inject'),
-      setupServicePreloadPackageWatcher(viteDevServer, 'service-preload'),
-    ])),
+    setupEsbuildWatcher('shared'),
+    setupPreloadPackageWatcher(sendEvent),
+    setupServicePackageWatcher('service-inject', sendEvent),
+    setupServicePackageWatcher('service-preload', sendEvent),
   ]);
-
+  viteDevServer = await setupDevServer('renderer');
+  console.log('\ud83c\udf80 Sophie is starting up')
   return setupMainPackageWatcher(viteDevServer);
 }