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

package.json

@@ -5,6 +5,7 @@
   "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",

setup-server.ts

@@ -25,7 +25,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.');

skip-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);

src/device.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/index.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';
@@ -22,10 +22,10 @@ import registerContextMenu = require('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');
 

src/preload.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

strip-preload-map.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);

tsconfig.json

@@ -15,6 +15,8 @@
         "noEmitHelpers": true,
         "module": "node20",
         "moduleResolution": "nodenext",
+        "rewriteRelativeImportExtensions": true,
+        "skipLibCheck": true,
         "types": ["node"],
         "pretty": true,
         "target": "ES2022",