From 50d98f67b324a5aabf80e716e7f85a20e616d5fa Mon Sep 17 00:00:00 2001
From: Offroaders123 <65947371+Offroaders123@users.noreply.github.com>
Date: Sun, 24 Sep 2023 02:01:43 -0700
Subject: [PATCH] =?UTF-8?q?Electron=20ESM!=20=F0=9F=94=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
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.
https://github.com/electron/electron/issues/21457
https://github.com/electron/electron/pull/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 | 2 +-
main.ts | 7 ++++--
package-lock.json | 50 +++++++++++++++++++--------------------
package.json | 3 ++-
preload.ts => preload.cts | 0
tsconfig.json | 5 ++--
6 files changed, 36 insertions(+), 31 deletions(-)
rename preload.ts => preload.cts (100%)
diff --git a/index.html b/index.html
index 5e05141..54b21da 100644
--- a/index.html
+++ b/index.html
@@ -37,7 +37,7 @@
-
+
diff --git a/main.ts b/main.ts
index 9a798fb..d0ba252 100644
--- a/main.ts
+++ b/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",
diff --git a/package-lock.json b/package-lock.json
index 5e9b184..d53cb50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,8 +13,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"
}
},
@@ -1368,24 +1368,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/electron": {
- "version": "26.2.2",
- "resolved": "https://registry.npmjs.org/electron/-/electron-26.2.2.tgz",
- "integrity": "sha512-Ihb3Zt4XYnHF52DYSq17ySkgFqJV4OT0VnfhUYZASAql7Vembz3VsAq7mB3OALBHXltAW34P8BxTIwTqZaMS3g==",
- "dev": true,
- "hasInstallScript": true,
- "dependencies": {
- "@electron/get": "^2.0.0",
- "@types/node": "^18.11.18",
- "extract-zip": "^2.0.1"
- },
- "bin": {
- "electron": "cli.js"
- },
- "engines": {
- "node": ">= 12.20.55"
- }
- },
"node_modules/electron-builder": {
"version": "24.6.4",
"resolved": "https://registry.npmjs.org/electron-builder/-/electron-builder-24.6.4.tgz",
@@ -1447,6 +1429,30 @@
"node": ">= 10.0.0"
}
},
+ "node_modules/electron-nightly": {
+ "version": "28.0.0-nightly.20230921",
+ "resolved": "https://registry.npmjs.org/electron-nightly/-/electron-nightly-28.0.0-nightly.20230921.tgz",
+ "integrity": "sha512-fSESPMEm5UEadhBhyR8IGQuNOT8jhDux0psgJwbU1t3oX8olrCSu7ZG8sFHD84FngKa+OIllTus++XIRC90YNQ==",
+ "dev": true,
+ "hasInstallScript": true,
+ "dependencies": {
+ "@electron/get": "^2.0.0",
+ "@types/node": "^18.11.18",
+ "extract-zip": "^2.0.1"
+ },
+ "bin": {
+ "electron": "cli.js"
+ },
+ "engines": {
+ "node": ">= 12.20.55"
+ }
+ },
+ "node_modules/electron-nightly/node_modules/@types/node": {
+ "version": "18.17.19",
+ "resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.19.tgz",
+ "integrity": "sha512-+pMhShR3Or5GR0/sp4Da7FnhVmTalWm81M6MkEldbwjETSaPalw138Z4KdpQaistvqQxLB7Cy4xwYdxpbSOs9Q==",
+ "dev": true
+ },
"node_modules/electron-publish": {
"version": "24.5.0",
"resolved": "https://registry.npmjs.org/electron-publish/-/electron-publish-24.5.0.tgz",
@@ -1497,12 +1503,6 @@
"node": ">= 10.0.0"
}
},
- "node_modules/electron/node_modules/@types/node": {
- "version": "18.17.19",
- "resolved": "https://registry.npmjs.org/@types/node/-/node-18.17.19.tgz",
- "integrity": "sha512-+pMhShR3Or5GR0/sp4Da7FnhVmTalWm81M6MkEldbwjETSaPalw138Z4KdpQaistvqQxLB7Cy4xwYdxpbSOs9Q==",
- "dev": true
- },
"node_modules/emoji-regex": {
"version": "8.0.0",
"resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
diff --git a/package.json b/package.json
index 8cd1326..7111e1a 100644
--- a/package.json
+++ b/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"
}
}
\ No newline at end of file
diff --git a/preload.ts b/preload.cts
similarity index 100%
rename from preload.ts
rename to preload.cts
diff --git a/tsconfig.json b/tsconfig.json
index a610136..58872e2 100644
--- a/tsconfig.json
+++ b/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,