Refactor to use native ESM in main and preload packages

Merge pull request #967 from cawa-93/ESM

.env

@@ -0,0 +1 @@
+VITE_APP_VERSION=$npm_package_version

.github/workflows/release.yml

@@ -55,7 +55,7 @@ jobs:
           shell: 'bash'
           # Due to this issue https://github.com/electron-userland/electron-builder/issues/6411 the build with npx when rebuilding native dependencies hangs forever
           # see https://github.com/cawa-93/vite-electron-builder/pull/953
-          command: ./node_modules/.bin/electron-builder --config .electron-builder.config.js --publish ${{ inputs.dry-run && 'never' || 'always' }}
+          command: ./node_modules/.bin/electron-builder --config electron-builder.yml --publish ${{ inputs.dry-run && 'never' || 'always' }}
         env:
           # Code Signing params
           # See https://www.electron.build/code-signing

.vscode/launch.json

@@ -6,7 +6,7 @@
       "request": "launch",
       "name": "Debug Main Process",
       "skipFiles": ["<node_internals>/**"],
-      "program": "${workspaceFolder}\\scripts\\watch.mjs",
+      "program": "${workspaceFolder}\\scripts\\watch.js",
       "autoAttachChildProcesses": true
     }
   ]

electron-builder.yml

@@ -0,0 +1,9 @@
+directories:
+  output: dist
+  buildResources: buildResources
+
+files:
+  - packages/**/dist/**
+
+linux:
+  target: deb

package.json

@@ -1,32 +1,33 @@
 {
   "name": "vite-electron-builder",
   "description": "Secure boilerplate for Electron app based on Vite",
-  "version": "1.0.2",
+  "version": "2.0.0",
   "private": true,
+  "type": "module",
   "author": {
     "email": "[email protected]",
     "name": "Alex Kozack",
     "url": "https://kozack.me"
   },
-  "main": "packages/main/dist/index.cjs",
+  "main": "packages/main/dist/index.js",
   "scripts": {
     "build": "npm run build:main && npm run build:preload && npm run build:renderer",
     "build:main": "cd ./packages/main && vite build",
     "build:preload": "cd ./packages/preload && vite build",
     "build:renderer": "cd ./packages/renderer && vite build",
-    "compile": "cross-env MODE=production npm run build && electron-builder build --config .electron-builder.config.js --dir --config.asar=false",
+    "compile": "cross-env MODE=production npm run build && electron-builder build --config electron-builder.yml --dir --config.asar=false",
     "test": "npm run test:main && npm run test:preload && npm run test:renderer && npm run test:e2e",
     "test:e2e": "npm run build && vitest run",
     "test:main": "vitest run -r packages/main --passWithNoTests",
     "test:preload": "vitest run -r packages/preload --passWithNoTests",
     "test:renderer": "vitest run -r packages/renderer --passWithNoTests",
-    "watch": "node scripts/watch.mjs",
+    "watch": "node scripts/watch.js",
     "lint": "eslint . --ext js,mjs,cjs,ts,mts,cts,vue",
     "typecheck:main": "tsc --noEmit -p packages/main/tsconfig.json",
     "typecheck:preload": "tsc --noEmit -p packages/preload/tsconfig.json",
     "typecheck:renderer": "vue-tsc --noEmit -p packages/renderer/tsconfig.json",
     "typecheck": "npm run typecheck:main && npm run typecheck:preload && npm run typecheck:renderer",
-    "postinstall": "cross-env ELECTRON_RUN_AS_NODE=1 electron scripts/update-electron-vendors.mjs",
+    "postinstall": "cross-env ELECTRON_RUN_AS_NODE=1 electron scripts/update-electron-vendors.js",
     "format": "npx prettier --write \"**/*.{js,mjs,cjs,ts,mts,cts,vue,json}\""
   },
   "devDependencies": {
@@ -44,7 +45,7 @@
     "playwright": "1.41.1",
     "simple-git-hooks": "2.9.0",
     "typescript": "5.3.3",
-    "unplugin-auto-expose": "0.2.2",
+    "unplugin-auto-expose": "0.3.0",
     "vite": "5.0.12",
     "vitest": "1.2.1",
     "vue": "3.3.4",

packages/main/src/index.ts

@@ -2,6 +2,7 @@ import {app} from 'electron';
 import './security-restrictions';
 import {restoreOrCreateWindow} from '/@/mainWindow';
 import {platform} from 'node:process';
+import updater from 'electron-updater';
 
 /**
  * Prevent electron from running multiple instances.
@@ -74,13 +75,6 @@ app
 if (import.meta.env.PROD) {
   app
     .whenReady()
-    .then(() =>
-      /**
-       * Here we forced to use `require` since electron doesn't fully support dynamic import in asar archives
-       * @see https://github.com/electron/electron/issues/38829
-       * Potentially it may be fixed by this https://github.com/electron/electron/pull/37535
-       */
-      require('electron-updater').autoUpdater.checkForUpdatesAndNotify(),
-    )
+    .then(() => updater.autoUpdater.checkForUpdatesAndNotify())
     .catch(e => console.error('Failed check and install updates:', e));
 }

packages/main/src/mainWindow.ts

@@ -1,5 +1,6 @@
 import {app, BrowserWindow} from 'electron';
-import {join, resolve} from 'node:path';
+import {join} from 'node:path';
+import {fileURLToPath} from 'node:url';
 
 async function createWindow() {
   const browserWindow = new BrowserWindow({
@@ -9,7 +10,7 @@ async function createWindow() {
       contextIsolation: true,
       sandbox: false, // Sandbox disabled because the demo of preload script depend on the Node.js api
       webviewTag: false, // The webview tag is not recommended. Consider alternatives like an iframe or Electron's BrowserView. @see https://www.electronjs.org/docs/latest/api/webview-tag#warning
-      preload: join(app.getAppPath(), 'packages/preload/dist/index.cjs'),
+      preload: join(app.getAppPath(), 'packages/preload/dist/index.mjs'),
     },
   });
 
@@ -47,7 +48,9 @@ async function createWindow() {
      * @see https://github.com/nodejs/node/issues/12682
      * @see https://github.com/electron/electron/issues/6869
      */
-    await browserWindow.loadFile(resolve(__dirname, '../../renderer/dist/index.html'));
+    await browserWindow.loadFile(
+      fileURLToPath(new URL('./../../renderer/dist/index.html', import.meta.url)),
+    );
   }
 
   return browserWindow;

packages/main/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
     "module": "esnext",
     "target": "esnext",
     "sourceMap": false,

packages/main/vite.config.js

@@ -1,6 +1,5 @@
 import {node} from '../../.electron-vendors.cache.json';
 import {join} from 'node:path';
-import {injectAppVersion} from '../../version/inject-app-version-plugin.mjs';
 
 const PACKAGE_ROOT = __dirname;
 const PROJECT_ROOT = join(PACKAGE_ROOT, '../..');
@@ -27,17 +26,16 @@ const config = {
     minify: process.env.MODE !== 'development',
     lib: {
       entry: 'src/index.ts',
-      formats: ['cjs'],
+      formats: ['es'],
     },
     rollupOptions: {
       output: {
-        entryFileNames: '[name].cjs',
+        entryFileNames: '[name].js',
       },
     },
     emptyOutDir: true,
     reportCompressedSize: false,
   },
-  plugins: [injectAppVersion()],
 };
 
 export default config;

packages/preload/src/index.ts

@@ -2,5 +2,6 @@
  * @module preload
  */
 
-export {sha256sum} from './nodeCrypto';
-export {versions} from './versions';
+import {sha256sum} from './nodeCrypto';
+import {versions} from './versions';
+export {sha256sum, versions};

packages/preload/tests/unit.spec.ts

@@ -1,7 +1,14 @@
 import {createHash} from 'crypto';
-import {expect, test} from 'vitest';
+import {expect, test, vi} from 'vitest';
 import {sha256sum, versions} from '../src';
 
+// TODO: Remove this workaround after unplugin-auto-expose will be fixed for ESM support
+vi.mock('electron', () => ({
+  contextBridge: {
+    exposeInMainWorld: () => {},
+  },
+}));
+
 test('versions', async () => {
   expect(versions).toBe(process.versions);
 });

packages/preload/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
     "module": "esnext",
     "target": "esnext",
     "sourceMap": false,