build: Fully switch over to ESM

Now we can run with ESM at build and test time and transpile into
commonjs for electron. This greatly simplifies testing, since we treat
everything as ESM during build with esbuild anyways. Now the test
environment and the build scripts match the apparent (but not the actual
for the main, preload, and inject modules) runtime environment.

Caveats:

- We may use top-level async expressions in tests and script, but not in
  code that gets transpiled into commonjs or scripts that get imported
  by vite. The limitation w.r.t. commonjs seems fundamental.
- Jest only experimentally supports ESM and there are some limitations
  with mocking. Most limitations (except the lack of automatic mocks)
  can be worked around by async importing code that uses mocks.
- There are packages marked as modules (so that node reads any scripts
  in them as ESM) that nevertheless get transpiled into commonjs
  modules. However, these should be clearly marked by using a .cjs
  extension as their bundle. The worst offender is the root package,
  which has a .cjs as its main entry point that gets read by electron,
  but is in fact marked as a module. This doesn't seem to bother electron
  at all. The service-inject package is an IIFE with a .js extension,
  but it outputs a fully self-contained bundle, so the choice of module
  format should be irrelevant.

3 files changed, 51 insertions, 34 deletions

diff --git a/scripts/build.js b/scripts/build.js
index 5abcdab..9b9b26e 100644
--- a/scripts/build.js
+++ b/scripts/build.js
@@ -1,19 +1,28 @@
-const esbuild = require('esbuild');
-const { join } = require('path');
-const vite = require('vite');
+import { build as esbuildBuild } from 'esbuild';
+import { join } from 'path';
+import { build as viteBuild } from 'vite';
+
+import { fileURLToDirname } from '../config/build-common.js';
+
+const thisDir = fileURLToDirname(import.meta.url);
 
 /**
  * @param {string} packageName
  * @returns {Promise<import('esbuild').BuildResult>}
  */
-function buildPackageEsbuild(packageName) {
-  const config = require(`../packages/${packageName}/esbuild.config.js`);
-  return esbuild.build(config);
+async function buildPackageEsbuild(packageName) {
+  /** @type {{ default: import('esbuild').BuildOptions }} */
+  const { default: config } = await import(`../packages/${packageName}/esbuild.config.js`);
+  return esbuildBuild(config);
 }
 
+/**
+ * @param {string} packageName
+ * @returns {Promise<unknown>}
+ */
 function buildPackageVite(packageName) {
-  return vite.build({
-    configFile: join(__dirname, `../packages/${packageName}/vite.config.js`),
+  return viteBuild({
+    configFile: join(thisDir, `../packages/${packageName}/vite.config.js`),
   });
 }
 
diff --git a/scripts/update-electron-vendors.js b/scripts/update-electron-vendors.js
index 650d394..fea8b9d 100644
--- a/scripts/update-electron-vendors.js
+++ b/scripts/update-electron-vendors.js
@@ -1,11 +1,9 @@
-#!/usr/bin/env node
+import { execSync } from 'child_process';
+import electronPath from 'electron';
+import { writeFile } from 'fs/promises';
+import { join, resolve } from 'path';
 
-// @ts-check
-
-const { execSync } = require('child_process');
-const electronPath = require('electron');
-const { writeFile } = require('fs/promises');
-const path = require('path');
+import { fileURLToDirname } from '../config/build-common.js';
 
 /**
  * Returns versions of electron vendors
@@ -34,11 +32,11 @@ function updateVendors() {
   const nodeMajorVersion = electronRelease.node.split('.')[0];
   const chromeMajorVersion = electronRelease.v8.split('.')[0] + electronRelease.v8.split('.')[1];
 
-  const browserslistrcPath = path.resolve(process.cwd(), '.browserslistrc');
+  const browserslistrcPath = resolve(process.cwd(), '.browserslistrc');
 
   return Promise.all([
     writeFile(
-      './.electron-vendors.cache.json',
+      join(fileURLToDirname(import.meta.url), '../.electron-vendors.cache.json'),
       JSON.stringify({
         chrome: chromeMajorVersion,
         node: nodeMajorVersion,
diff --git a/scripts/watch.js b/scripts/watch.js
index d4229e9..82a8feb 100644
--- a/scripts/watch.js
+++ b/scripts/watch.js
@@ -1,20 +1,20 @@
-// @ts-check
+import { build as esbuildBuild } from 'esbuild';
+import { spawn } from 'child_process';
+import { watch } from 'chokidar';
+import electronPath from 'electron';
+import { join } from 'path';
+import { createServer } from 'vite';
 
-const esbuild = require('esbuild');
-const { spawn } = require('child_process');
-const chokidar = require('chokidar');
-const electronPath = require('electron');
-const { join } = require('path');
-const { createServer } = require('vite');
+import { fileURLToDirname } from '../config/build-common.js';
 
-process.env.MODE = 'development';
-process.env.NODE_ENV = 'development';
+/** @type {string} */
+const thisDir = fileURLToDirname(import.meta.url);
 
 /** @type {string} */
-const sharedModule = join(__dirname, '../packages/shared/dist/index.mjs');
+const sharedModule = join(thisDir, '../packages/shared/dist/index.mjs');
 
 /** @type {string} */
-const serviceSharedModule = join(__dirname, '../packages/service-shared/dist/index.mjs');
+const serviceSharedModule = join(thisDir, '../packages/service-shared/dist/index.mjs');
 
 /** @type {RegExp[]} */
 const stderrIgnorePatterns = [
@@ -34,15 +34,17 @@ const stderrIgnorePatterns = [
  * @return {Promise<void>}
  */
 async function setupEsbuildWatcher(packageName, extraPaths, callback) {
-  const config = require(`../packages/${packageName}/esbuild.config.js`);
+  /** @type {{ default: import('esbuild').BuildOptions }} */
+  const { default: config } = await import(`../packages/${packageName}/esbuild.config.js`);
   config.logLevel = 'info';
   config.incremental = true;
-  const incrementalBuild = await esbuild.build(config);
+
+  const incrementalBuild = await esbuildBuild(config);
   const paths = [
-    join(__dirname, `../packages/${packageName}/src`),
+    join(thisDir, `../packages/${packageName}/src`),
     ...(extraPaths || []),
   ];
-  const watcher = chokidar.watch(paths, {
+  const watcher = watch(paths, {
     ignored: /(^|[\/\\])\.|__(tests|mocks)__|\.(spec|test)\.[jt]sx?$/,
     ignoreInitial: true,
     persistent: true,
@@ -51,7 +53,7 @@ async function setupEsbuildWatcher(packageName, extraPaths, callback) {
     callback();
   }
   watcher.on('change', () => {
-    incrementalBuild.rebuild().then(() => {
+    incrementalBuild.rebuild?.().then(() => {
       if (callback) {
         console.log(`\u26a1 Reloading package ${packageName}`);
         callback();
@@ -81,7 +83,7 @@ async function setupDevServer(packageName) {
         clearScreen: false,
       },
     },
-    configFile: join(__dirname, `../packages/${packageName}/vite.config.js`),
+    configFile: join(thisDir, `../packages/${packageName}/vite.config.js`),
   });
   await viteDevServer.listen();
   return viteDevServer;
@@ -158,6 +160,9 @@ function setupMainPackageWatcher(viteDevServer) {
  * @returns {Promise<void>}
  */
 async function setupDevEnvironment() {
+  process.env.MODE = 'development';
+  process.env.NODE_ENV = 'development';
+
   /** @type {import('vite').ViteDevServer | null} */
   let viteDevServer = null;
   /** @type {(event: import('vite').HMRPayload) => void} */
@@ -182,6 +187,11 @@ async function setupDevEnvironment() {
     ])),
   ]);
 
+  if (viteDevServer === null) {
+    console.error('Failed to create vite dev server');
+    return;
+  }
+
   console.log('\ud83c\udf80 Sophie is starting up')
   return setupMainPackageWatcher(viteDevServer);
 }