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.

19 files changed, 54 insertions, 88 deletions

diff --git a/packages/main/esbuild.config.js b/packages/main/esbuild.config.js
index 7653078..a39534d 100644
--- a/packages/main/esbuild.config.js
+++ b/packages/main/esbuild.config.js
@@ -1,7 +1,5 @@
-// @ts-check
-
-const { node } = require('../../config/build-common');
-const { getConfig } = require('../../config/esbuild-config');
+import { node, fileURLToDirname } from '../../config/build-common.js';
+import { getConfig } from '../../config/esbuild-config.js';
 
 const externalPackages = ['electron'];
 
@@ -9,8 +7,8 @@ if (process.env.MODE !== 'development') {
   externalPackages.push('electron-devtools-installer');
 }
 
-module.exports = getConfig({
-  absWorkingDir: __dirname,
+export default getConfig({
+  absWorkingDir: fileURLToDirname(import.meta.url),
   entryPoints: [
     'src/index.ts',
   ],
diff --git a/packages/main/package.json b/packages/main/package.json
index c118d2b..99451bd 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -2,7 +2,7 @@
   "name": "@sophie/main",
   "version": "0.1.0",
   "private": true,
-  "main": "dist/index.cjs",
+  "type": "module",
   "types": "dist-types/index.d.ts",
   "scripts": {
     "typecheck": "tsc"
diff --git a/packages/main/src/devTools.ts b/packages/main/src/devTools.ts
index 6c25b3e..7c7c86a 100644
--- a/packages/main/src/devTools.ts
+++ b/packages/main/src/devTools.ts
@@ -27,14 +27,12 @@ import type { BrowserWindow } from 'electron';
  * because the mobx-state-tree devtools are currently unmaintained.
  */
 export async function installDevToolsExtensions(): Promise<void> {
-  const installerPackage = await import('electron-devtools-installer');
+  // Hack to lazily require a CJS module from an ES module transpiled into a CJS module.
   const {
     default: installExtension,
     REACT_DEVELOPER_TOOLS,
     REDUX_DEVTOOLS,
-  } = installerPackage.default instanceof Function
-      ? installerPackage
-      : installerPackage.default as unknown as typeof import('electron-devtools-installer');
+  } = require('electron-devtools-installer');
   await installExtension(
     [
       REACT_DEVELOPER_TOOLS,
diff --git a/packages/preload/esbuild.config.js b/packages/preload/esbuild.config.js
index 76ac33f..de51fc5 100644
--- a/packages/preload/esbuild.config.js
+++ b/packages/preload/esbuild.config.js
@@ -1,10 +1,8 @@
-// @ts-check
+import { chrome, fileURLToDirname } from '../../config/build-common.js';
+import { getConfig } from '../../config/esbuild-config.js';
 
-const { chrome } = require('../../config/build-common');
-const { getConfig } = require('../../config/esbuild-config');
-
-module.exports = getConfig({
-  absWorkingDir: __dirname,
+export default getConfig({
+  absWorkingDir: fileURLToDirname(import.meta.url),
   entryPoints: [
     'src/index.ts',
   ],
diff --git a/packages/preload/jest.config.js b/packages/preload/jest.config.js
index 5334b14..faecf9a 100644
--- a/packages/preload/jest.config.js
+++ b/packages/preload/jest.config.js
@@ -1,9 +1,7 @@
-// @ts-check
-
-const rootConfig = require('../../jest.config.js');
+import rootConfig from '../../jest.config.js';
 
 /** @type {import('ts-jest').InitialOptionsTsJest} */
-module.exports = {
+export default {
   ...rootConfig,
   testEnvironment: 'jsdom',
 };
diff --git a/packages/preload/package.json b/packages/preload/package.json
index ac21618..e6dd0ee 100644
--- a/packages/preload/package.json
+++ b/packages/preload/package.json
@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "sideEffects": false,
-  "main": "dist/index.cjs",
+  "type": "module",
   "types": "dist-types/index.d.ts",
   "scripts": {
-    "test": "jest",
+    "test": "node --experimental-vm-modules ../../node_modules/jest/bin/jest.js",
     "typecheck": "tsc"
   },
   "dependencies": {
diff --git a/packages/preload/src/__mocks__/electron.ts b/packages/preload/src/__mocks__/electron.ts
deleted file mode 100644
index 52cddf9..0000000
--- a/packages/preload/src/__mocks__/electron.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-/*
- * Copyright (C)  2021-2022 Kristóf Marussy <kristof@marussy.com>
- *
- * This file is part of Sophie.
- *
- * Sophie is free software: you can redistribute it and/or modify
- * it under the terms of the GNU Affero General Public License as
- * published by the Free Software Foundation, version 3.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU Affero General Public License for more details.
- *
- * You should have received a copy of the GNU Affero General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- *
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-export const ipcRenderer = {
-  invoke: jest.fn(),
-  on: jest.fn(),
-  send: jest.fn(),
-};
diff --git a/packages/preload/src/contextBridge/__tests__/SophieRendererImpl.spec.ts b/packages/preload/src/contextBridge/__tests__/SophieRendererImpl.spec.ts
index 71ac2a1..e40dcf5 100644
--- a/packages/preload/src/contextBridge/__tests__/SophieRendererImpl.spec.ts
+++ b/packages/preload/src/contextBridge/__tests__/SophieRendererImpl.spec.ts
@@ -18,8 +18,8 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import { describe, it, jest } from '@jest/globals';
 import { mocked } from 'jest-mock';
-import { ipcRenderer } from 'electron';
 import type { IJsonPatch } from 'mobx-state-tree';
 import {
   Action,
@@ -29,9 +29,17 @@ import {
   SophieRenderer,
 } from '@sophie/shared';
 
-import { createSophieRenderer } from '../SophieRendererImpl';
+jest.unstable_mockModule('electron', () => ({
+  ipcRenderer: {
+    invoke: jest.fn(),
+    on: jest.fn(),
+    send: jest.fn(),
+  },
+}));
 
-jest.mock('electron');
+const { ipcRenderer } = await import('electron');
+
+const { createSophieRenderer } = await import('../SophieRendererImpl');
 
 const event: Electron.IpcRendererEvent = null as unknown as Electron.IpcRendererEvent;
 
diff --git a/packages/preload/tsconfig.json b/packages/preload/tsconfig.json
index 741d435..0f27305 100644
--- a/packages/preload/tsconfig.json
+++ b/packages/preload/tsconfig.json
@@ -6,9 +6,6 @@
       "dom",
       "dom.iterable",
       "esnext"
-    ],
-    "types": [
-      "@types/jest"
     ]
   },
   "references": [
diff --git a/packages/renderer/package.json b/packages/renderer/package.json
index fb13129..2a26b2b 100644
--- a/packages/renderer/package.json
+++ b/packages/renderer/package.json
@@ -2,7 +2,7 @@
   "name": "@sophie/renderer",
   "version": "0.1.0",
   "private": true,
-  "main": "dist/index.html",
+  "type": "module",
   "types": "dist-types/index.d.ts",
   "scripts": {
     "typecheck": "tsc"
diff --git a/packages/renderer/vite.config.js b/packages/renderer/vite.config.js
index 30729c0..6f3d351 100644
--- a/packages/renderer/vite.config.js
+++ b/packages/renderer/vite.config.js
@@ -1,12 +1,12 @@
-// @ts-check
-
 /* eslint-env node */
 
 import { builtinModules } from 'module';
 import { join } from 'path';
 import react from '@vitejs/plugin-react';
 
-import { banner, chrome } from '../../config/build-common';
+import { banner, chrome, fileURLToDirname } from '../../config/build-common.js';
+
+const thisDir = fileURLToDirname(import.meta.url);
 
 const mode = process.env.MODE || 'development';
 
@@ -20,8 +20,8 @@ export default {
   /** @type {import('vite').LogLevel} */
   logLevel: 'info',
   mode,
-  root: __dirname,
-  cacheDir: join(__dirname, '../../.vite'),
+  root: thisDir,
+  cacheDir: join(thisDir, '../../.vite'),
   plugins: [
     react({
       babel: {
diff --git a/packages/service-inject/esbuild.config.js b/packages/service-inject/esbuild.config.js
index 38e5b7d..3f1d6d0 100644
--- a/packages/service-inject/esbuild.config.js
+++ b/packages/service-inject/esbuild.config.js
@@ -1,10 +1,8 @@
-// @ts-check
+import { chrome, fileURLToDirname } from '../../config/build-common.js';
+import { getConfig } from '../../config/esbuild-config.js';
 
-const { chrome } = require('../../config/build-common');
-const { getConfig } = require('../../config/esbuild-config');
-
-module.exports = getConfig({
-  absWorkingDir: __dirname,
+export default getConfig({
+  absWorkingDir: fileURLToDirname(import.meta.url),
   entryPoints: [
     'src/index.ts',
   ],
diff --git a/packages/service-inject/package.json b/packages/service-inject/package.json
index 825de24..7c496fd 100644
--- a/packages/service-inject/package.json
+++ b/packages/service-inject/package.json
@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "sideEffects": false,
-  "main": "dist/index.cjs",
+  "type": "module",
   "types": "dist-types/index.d.ts",
   "scripts": {
     "typecheck": "tsc"
diff --git a/packages/service-preload/esbuild.config.js b/packages/service-preload/esbuild.config.js
index 76ac33f..3c67b31 100644
--- a/packages/service-preload/esbuild.config.js
+++ b/packages/service-preload/esbuild.config.js
@@ -1,10 +1,8 @@
-// @ts-check
+import { chrome, fileURLToDirname } from "../../config/build-common.js";
+import { getConfig } from '../../config/esbuild-config.js';
 
-const { chrome } = require('../../config/build-common');
-const { getConfig } = require('../../config/esbuild-config');
-
-module.exports = getConfig({
-  absWorkingDir: __dirname,
+export default getConfig({
+  absWorkingDir: fileURLToDirname(import.meta.url),
   entryPoints: [
     'src/index.ts',
   ],
diff --git a/packages/service-preload/package.json b/packages/service-preload/package.json
index 7cbdfc8..8da5eb7 100644
--- a/packages/service-preload/package.json
+++ b/packages/service-preload/package.json
@@ -2,7 +2,7 @@
   "name": "@sophie/service-preload",
   "version": "0.1.0",
   "private": true,
-  "main": "dist/index.js",
+  "type": "module",
   "types": "dist-types/index.d.ts",
   "scripts": {
     "typecheck": "tsc"
diff --git a/packages/service-shared/esbuild.config.js b/packages/service-shared/esbuild.config.js
index ce57cd7..8df2edf 100644
--- a/packages/service-shared/esbuild.config.js
+++ b/packages/service-shared/esbuild.config.js
@@ -1,10 +1,8 @@
-// @ts-check
+import { chrome, fileURLToDirname } from '../../config/build-common.js';
+import { getConfig } from '../../config/esbuild-config.js';
 
-const { chrome } = require('../../config/build-common');
-const { getConfig } = require('../../config/esbuild-config');
-
-module.exports = getConfig({
-  absWorkingDir: __dirname,
+export default getConfig({
+  absWorkingDir: fileURLToDirname(import.meta.url),
   entryPoints: [
     'src/index.ts',
   ],
diff --git a/packages/service-shared/package.json b/packages/service-shared/package.json
index e812e4a..5c8ea79 100644
--- a/packages/service-shared/package.json
+++ b/packages/service-shared/package.json
@@ -3,7 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "sideEffects": false,
-  "module": "dist/index.mjs",
+  "type": "module",
+  "main": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "scripts": {
     "typecheck": "tsc"
diff --git a/packages/shared/esbuild.config.js b/packages/shared/esbuild.config.js
index f58d776..fbaa6f1 100644
--- a/packages/shared/esbuild.config.js
+++ b/packages/shared/esbuild.config.js
@@ -1,10 +1,8 @@
-// @ts-check
+import { chrome, fileURLToDirname } from '../../config/build-common.js';
+import { getConfig } from '../../config/esbuild-config.js';
 
-const { chrome } = require('../../config/build-common');
-const { getConfig } = require('../../config/esbuild-config');
-
-module.exports = getConfig({
-  absWorkingDir: __dirname,
+export default getConfig({
+  absWorkingDir: fileURLToDirname(import.meta.url),
   entryPoints: [
     'src/index.ts',
   ],
diff --git a/packages/shared/package.json b/packages/shared/package.json
index e4b57b0..428bff3 100644
--- a/packages/shared/package.json
+++ b/packages/shared/package.json
@@ -3,7 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "sideEffects": false,
-  "module": "dist/index.mjs",
+  "type": "module",
+  "main": "dist/index.mjs",
   "types": "dist/index.d.ts",
   "scripts": {
     "typecheck": "tsc"