Electron ESM! 🔥

Wow, can't believe this day has finally come! You can essentially write most of your Electron code in pure ESM now! The only holdup is that preload scripts must be CommonJS still. But you can just add the `.cjs/.cts` extension for that one module, so that works out really well.

This was what made me come back to work on this project a little bit again. Rather than starting fresh with a new Electron project, I thought it would be a better idea to update this one to use my more recent tooling (TS, ESM in this case), and I want to try some Electron-specific things out too, like Accelerators, things like that. Ooh, I want to get Vite/live reload working with this too, I didn't end up getting that set up when I started this, Node projects were still above my head at that time.

electron/electron#21457
electron/electron#37535
https://github.com/electron/electron/blob/main/docs/tutorial/esm.md

This was a placeholder I set up for the reference to resolve the preload script, since `__dirname` isn't an available global from within ESM.
https://blog.logrocket.com/alternatives-dirname-node-js-es-modules/

Sevendust Next is definitely one of my favorite albums of theirs for me, looking back on it more recently the last year or so.

index.html

@@ -37,7 +37,7 @@
   <iframe id="preview" class="preview" src="about:blank"></iframe>
 </main>
 
-<script src="./dist-ts/script.js"></script>
+<script type="module" src="./dist-ts/script.js"></script>
 
 </body>
 

main.ts

@@ -1,5 +1,8 @@
 import { app, BrowserWindow, ipcMain } from "electron";
-import path = require("path");
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = fileURLToPath(new URL(".",import.meta.url));
 
 app.whenReady().then(createWindow);
 
@@ -23,7 +26,7 @@ function createWindow(){
     webPreferences: {
       contextIsolation: true,
       sandbox: true,
-      preload: path.join(__dirname,"preload.js")
+      preload: path.join(__dirname,"preload.cjs")
     },
     frame: false,
     titleBarStyle: "hidden",

package.json

@@ -2,6 +2,7 @@
   "name": "electron-text-editor",
   "version": "0.4.0",
   "description": "A native text editor built using Electron!",
+  "type": "module",
   "main": "./dist-ts/main.js",
   "scripts": {
     "start": "electron .",
@@ -33,8 +34,8 @@
   },
   "devDependencies": {
     "@types/node": "^20.6.4",
-    "electron": "^26.2.2",
     "electron-builder": "^24.6.4",
+    "electron-nightly": "^28.0.0-nightly.20230921",
     "typescript": "^5.2.2"
   }
 }

tsconfig.json

@@ -1,11 +1,12 @@
 {
   "compilerOptions": {
     "outDir": "./dist-ts",
-    "module": "CommonJS",
+    "module": "NodeNext",
     "target": "ESNext",
     "isolatedModules": true,
     "types": [
-      "@stedit/num-text"
+      "@stedit/num-text",
+      "electron-nightly"
     ],
     // "strict": true,
     "noImplicitOverride": true,