Migrate to ESM

Honestly this is the simplest of all my projects and the one where it's
most awkward having mismatched source/runtime output, and where I
completely control the runtime, so this is a no-brainer. Not sure why
I didn't do it years ago.

Author: pimterry

electron-builder.config.js renamed to electron-builder.config.cjs

@@ -5,14 +5,15 @@
   "homepage": "https://httptoolkit.com",
   "private": true,
   "description": "HTTP(S) debugging, development & testing tool",
+  "type": "module",
   "main": "build/index.js",
   "scripts": {
     "postinstall": "electron-builder install-app-deps",
     "server:setup": "tsx ./setup-server.ts",
     "build": "npm run build:src && npm run build:electron",
     "build:src": "tsc",
     "postbuild:src": "tsx ./strip-preload-map.ts",
-    "build:electron": "npm run server:setup && electron-builder build --config electron-builder.config.js",
+    "build:electron": "npm run server:setup && electron-builder build --config electron-builder.config.cjs",
     "build:dir-only": "npm run server:setup && electron-builder --dir",
     "start": "npm run server:setup && npm run start:app",
     "start:dev": "tsx ./skip-server.ts && cross-env HTK_DEV=true APP_URL='http://localhost:8080' npm run start:app",

package.json

@@ -3,18 +3,19 @@ import * as os from 'os';
 import { promises as fs, createWriteStream } from 'fs'
 import { promisify } from 'util';
 
-import * as _ from 'lodash';
+import _ from 'lodash';
 import * as semver from 'semver';
 import fetch from 'node-fetch';
-import * as targz from 'targz';
+import targz from 'targz';
 import { execSync } from 'child_process';
 
+import packageJson from './package.json' with { type: 'json' };
+
 const extractTarGz = promisify(targz.decompress);
 
 const canAccess = (path: string) => fs.access(path).then(() => true).catch(() => false);
 const deleteDir = (p: string) => fs.rm(p, { recursive: true, force: true });
 
-const packageJson = require('./package.json');
 const requiredServerVersion = 'v' + packageJson.config['httptoolkit-server-version'];
 
 // For local testing of the desktop app, we need to pull the latest server and unpack it.
@@ -25,7 +26,7 @@ async function setUpLocalEnv() {
 
     if (!serverVersion || semver.neq(serverVersion, requiredServerVersion)) {
         if (serverExists) await deleteDir('./httptoolkit-server');
-        await insertServer(__dirname, os.platform(), os.arch());
+        await insertServer(import.meta.dirname, os.platform(), os.arch());
         console.log('Server setup completed.');
     } else {
         console.log('Correct server already downloaded.');

setup-server.ts

@@ -8,7 +8,7 @@ const deleteDir = (p: string) => fs.rm(p, { recursive: true, force: true });
 // This lets us edit both and the desktop together. We do this by creating a fake server,
 // which doesn't exit, but otherwise does nothing.
 async function setUpDevEnv() {
-    const serverFolder = path.join(__dirname, 'httptoolkit-server');
+    const serverFolder = path.join(import.meta.dirname, 'httptoolkit-server');
     const serverExists = await canAccess(serverFolder);
 
     if (serverExists) await deleteDir(serverFolder);

skip-server.ts

@@ -4,7 +4,7 @@ import { promisify } from 'util';
 import { exec } from 'child_process';
 const execAsync = promisify(exec);
 
-import { logError } from './errors';
+import { logError } from './errors.ts';
 
 export async function getDeviceDetails(): Promise<{
     platform: string;

src/device.ts

@@ -14,10 +14,10 @@ if (!DEV_MODE) {
                 // errors unnecessarily distinct, especially on Windows.
                 root: process.platform === 'win32'
                     // Root must always be POSIX format, so we transform it on Windows:
-                    ? __dirname
+                    ? import.meta.dirname
                         .replace(/^[A-Z]:/, '') // remove Windows-style prefix
                         .replace(/\\/g, '/') // replace all `\\` instances with `/`
-                    :  __dirname
+                    : import.meta.dirname
             })
         ]
     });

src/errors.ts

@@ -1,7 +1,7 @@
 const DEV_MODE = process.env.HTK_DEV === 'true';
 
 // Set up error handling before everything else:
-import { logError, addBreadcrumb } from './errors';
+import { logError, addBreadcrumb } from './errors.ts';
 
 import { spawn, ChildProcess } from 'child_process';
 import * as os from 'os';
@@ -12,22 +12,22 @@ import * as crypto from 'crypto';
 import * as querystring from 'querystring';
 import { URL } from 'url';
 import { app, BrowserWindow, shell, Menu, dialog, session, ipcMain } from 'electron';
-import * as yargs from 'yargs';
+import yargs from 'yargs';
 import * as semver from 'semver';
 const rmRF = (p: string) => fs.rm(p, { recursive: true, force: true });
 
 import windowStateKeeper from 'electron-window-state';
 import { getSystemProxy } from 'os-proxy-config';
-import registerContextMenu = require('electron-context-menu');
+import registerContextMenu from 'electron-context-menu';
 import * as sudoPrompt from '@expo/sudo-prompt';
 import { getDeferred, delay, ErrorLike } from '@httptoolkit/util';
 
-import { getMenu, shouldAutoHideMenu } from './menu';
-import { ContextMenuDefinition, openContextMenu } from './context-menu';
-import { stopServer } from './stop-server';
-import { getDeviceDetails } from './device';
+import { getMenu, shouldAutoHideMenu } from './menu.ts';
+import { ContextMenuDefinition, openContextMenu } from './context-menu.ts';
+import { stopServer } from './stop-server.ts';
+import { getDeviceDetails } from './device.ts';
 
-const packageJson = require('../package.json');
+import packageJson from '../package.json' with { type: 'json' };
 
 const isWindows = os.platform() === 'win32';
 
@@ -81,7 +81,7 @@ const createWindow = (logStream: WriteStream) => {
         height: windowState.height,
 
         webPreferences: {
-            preload: path.join(__dirname, 'preload.js'),
+            preload: path.join(import.meta.dirname, 'preload.js'),
             contextIsolation: true,
             nodeIntegration: false
         },

src/index.ts

@@ -1,6 +1,6 @@
 import { contextBridge, ipcRenderer } from 'electron';
 
-import type { ContextMenuDefinition } from './context-menu';
+import type { ContextMenuDefinition } from './context-menu.ts';
 
 // These are technically asynchronous, but they're so fast that
 // they're effectively sychronously available - this seems to

src/preload.ts

@@ -20,5 +20,5 @@ function removeSourceMapAnnotation(filePath: string): void {
 // We have to strip the source map comment from here, otherwise when it loads
 // in Chrome, it tries to get preload.js.map from the real server, leaving
 // us with an annoying error because that's never going to work.
-const filePath = path.join(__dirname, 'build', 'preload.js');
+const filePath = path.join(import.meta.dirname, 'build', 'preload.js');
 removeSourceMapAnnotation(filePath);

strip-preload-map.ts

@@ -1,5 +1,6 @@
 {
     "compilerOptions": {
+        "rootDir": "./src",
         "outDir": "./build",
         "removeComments": false,
         "preserveConstEnums": true,
@@ -15,6 +16,8 @@
         "noEmitHelpers": true,
         "module": "node20",
         "moduleResolution": "nodenext",
+        "rewriteRelativeImportExtensions": true,
+        "skipLibCheck": true,
         "types": ["node"],
         "pretty": true,
         "target": "ES2022",