Move electron import to a preload script

Author: garrettmflynn

package-lock.json

@@ -2,15 +2,11 @@
   "name": "nwb-guide",
   "productName": "NWB GUIDE",
   "version": "0.0.10",
-  "private": true,
   "description": "",
   "main": "./build/main/main.js",
   "engine": {
     "node": ">=18"
   },
-  "workspaces": [
-    "src/renderer"
-  ],
   "scripts": {
     "start": "electron-vite dev --outDir build",
     "postinstall": "electron-builder install-app-deps",

package.json

@@ -19,6 +19,7 @@ import './application-menu.js';
 
 import icon from '../renderer/assets/img/logo-guide-draft.png?asset'
 import splashHTML from './splash-screen.html?asset'
+import preloadUrl from './../preload/preload.js?asset'
 
 // autoUpdater.channel = "latest";
 
@@ -242,7 +243,7 @@ function initialize() {
         enableRemoteModule: true,
         contextIsolation: false,
         sandbox: false,
-        // preload: path.join(__dirname, "preload.js"),
+        preload: path.join(preloadUrl),
       },
     };
 

src/main/main.ts

@@ -0,0 +1,13 @@
+
+const electron = require('electron')
+
+// Expose ipcRenderer
+if (process.contextIsolated) {
+    try {
+      electron.contextBridge.exposeInMainWorld('electron', electron)
+    } catch (error) {
+      console.error(error)
+    }
+  } else {
+    globalThis.electron = electron
+  }

src/preload/preload.js

@@ -1,4 +1,3 @@
 var userAgent = navigator.userAgent.toLowerCase();
 export const isElectron = userAgent.indexOf(" electron/") > -1;
-
 export default isElectron;

src/preload/preload.ts

@@ -4,7 +4,7 @@ import isElectron from "./check.js";
 export { isElectron };
 
 export let port = 4242;
-export let electron = {};
+export const electron = globalThis.electron ?? {}; // ipcRenderer, remote, shell, etc.
 export let fs = null;
 export let os = null;
 export let remote = {};
@@ -15,13 +15,9 @@ export let crypto = null;
 
 if (isElectron) {
     try {
-        // Import Electron API
-        electron = require("electron"); // ipcRenderer, remote, shell, etc.
         fs = require("fs-extra"); // File System
         os = require("os");
-
         crypto = require("crypto");
-
         remote = require("@electron/remote");
         app = remote.app;
 

src/renderer/package.json

@@ -25,7 +25,7 @@ const appVersion = app?.getVersion();
 
 const statusBar = new StatusBar({
   items: [
-    { label: unsafeSVG(webAssetSVG), value: appVersion ?? 'Web' },
+    { label: unsafeSVG(webAssetSVG), value: isElectron ? appVersion ?? 'ERROR' : 'Web' },
     { label: unsafeSVG(wifiSVG) },
     { label: unsafeSVG(serverSVG) }
   ]