Added more comments and changed existing ones

src/main/index.ts

@@ -3,7 +3,10 @@ import { release } from 'os'
 import { join } from 'path'
 import './samples/electron-store'
 
+// Disable GPU Acceleration for Windows 7
 if (release().startsWith('6.1')) app.disableHardwareAcceleration()
+
+// Set application name for Windows 10+ notifications
 if (process.platform === 'win32') app.setAppUserModelId(app.getName())
 
 if (!app.requestSingleInstanceLock()) {
@@ -47,14 +50,12 @@ app.whenReady().then(createWindow)
 
 app.on('window-all-closed', () => {
   win = null
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
+  if (process.platform !== 'darwin') app.quit()
 })
 
 app.on('second-instance', () => {
   if (win) {
-    // Someone tried to run a second instance, we should focus our window.
+    // Focus on the main window if the user tried to open another
     if (win.isMinimized()) win.restore()
     win.focus()
   }

src/main/samples/electron-store.ts

@@ -1,5 +1,5 @@
 /**
- * Use 'electron-store' sample code.
+ * Example of 'electron-store' usage.
  */
 import { ipcMain } from 'electron'
 import Store from 'electron-store'
@@ -7,11 +7,13 @@ import Store from 'electron-store'
 /**
  * Expose 'electron-store' to Renderer-process through 'ipcMain.handle'
  */
- const store = new Store
- ipcMain.handle('electron-store', async (_evnet, methodSign: string, ...args: any[]) => {
-   if (typeof (store as any)[methodSign] === 'function') {
-     return (store as any)[methodSign](...args)
-   }
-   return (store as any)[methodSign]
- })
- 
+const store = new Store()
+ipcMain.handle(
+  'electron-store',
+  async (_evnet, methodSign: string, ...args: any[]) => {
+    if (typeof (store as any)[methodSign] === 'function') {
+      return (store as any)[methodSign](...args)
+    }
+    return (store as any)[methodSign]
+  }
+)

src/preload/index.ts

@@ -3,21 +3,20 @@ import { contextBridge, ipcRenderer } from 'electron'
 import { domReady } from './utils'
 import { useLoading } from './loading'
 
-const isDev = process.env.NODE_ENV === 'development'
 const { appendLoading, removeLoading } = useLoading()
 
-; (async () => {
+;(async () => {
   await domReady()
 
   appendLoading()
-})();
+})()
 
-// --------- Expose some API to Renderer process. ---------
+// --------- Expose some API to the Renderer process. ---------
 contextBridge.exposeInMainWorld('fs', fs)
 contextBridge.exposeInMainWorld('removeLoading', removeLoading)
 contextBridge.exposeInMainWorld('ipcRenderer', withPrototype(ipcRenderer))
 
-// `exposeInMainWorld` can not detect `prototype` attribute and methods, manually patch it.
+// `exposeInMainWorld` can't detect attributes and methods of `prototype`, manually patching it.
 function withPrototype(obj: Record<string, any>) {
   const protos = Object.getPrototypeOf(obj)
 
@@ -25,7 +24,7 @@ function withPrototype(obj: Record<string, any>) {
     if (Object.prototype.hasOwnProperty.call(obj, key)) continue
 
     if (typeof value === 'function') {
-      // Some native API not work in Renderer-process, like `NodeJS.EventEmitter['on']`. Wrap a function patch it.
+      // Some native APIs, like `NodeJS.EventEmitter['on']`, don't work in the Renderer process. Wrapping them into a function.
       obj[key] = function (...args: any) {
         return value.call(obj, ...args)
       }

src/preload/loading.ts

@@ -1,5 +1,3 @@
-
-
 /**
  * https://tobiasahlin.com/spinkit
  * https://connoratherton.com/loaders

src/preload/utils.ts

@@ -1,7 +1,8 @@
-
-/** docoment ready */
-export function domReady(condition: DocumentReadyState[] = ['complete', 'interactive']) {
-  return new Promise(resolve => {
+/** Document ready */
+export const domReady = (
+  condition: DocumentReadyState[] = ['complete', 'interactive']
+) => {
+  return new Promise((resolve) => {
     if (condition.includes(document.readyState)) {
       resolve(true)
     } else {

src/renderer/src/main.tsx

@@ -15,7 +15,7 @@ render(
 console.log('fs', window.fs)
 console.log('ipcRenderer', window.ipcRenderer)
 
-// Use ipcRenderer.on
+// Usage of ipcRenderer.on
 window.ipcRenderer.on('main-process-message', (_event, ...args) => {
   console.log('[Receive Main-process message]:', ...args)
 })

src/renderer/src/samples/electron-store.ts

@@ -1,4 +1,4 @@
-// Use 'electron-store'
+// Usage of 'electron-store'
 const store = {
   async get(key: string) {
     const { invoke } = window.ipcRenderer

src/renderer/vite.config.ts

@@ -5,21 +5,24 @@ import react from '@vitejs/plugin-react'
 import resolve from 'vite-plugin-resolve'
 import pkg from '../../package.json'
 
-// https://vitejs.dev/config/
+/**
+ * @see https://vitejs.dev/config/
+ */
 export default defineConfig({
   mode: process.env.NODE_ENV,
   root: __dirname,
   plugins: [
     react(),
     resolveElectron(
-      /**
-       * you can custom other module in here
-       * 🚧 need to make sure custom-resolve-module in `dependencies`, that will ensure that the electron-builder can package them correctly
-       * @example
-       * {
-       *   'electron-store': 'const Store = require("electron-store"); export defalut Store;',
-       * }
-       */
+    /**
+     * Here you can specify other modules
+     * 🚧 You have to make sure that your module is in `dependencies` and not in the` devDependencies`,
+     *    which will ensure that the electron-builder can package it correctly
+     * @example
+     * {
+     *   'electron-store': 'const Store = require("electron-store"); export default Store;',
+     * }
+     */
     ),
   ],
   base: './',
@@ -30,7 +33,7 @@ export default defineConfig({
   resolve: {
     alias: {
       '@': join(__dirname, 'src'),
-      'src': join(__dirname, '../../src'),
+      src: join(__dirname, '../../src'),
     },
   },
   server: {
@@ -39,12 +42,18 @@ export default defineConfig({
   },
 })
 
-// ------- For use Electron, NodeJs in Renderer-process -------
-// https://github.com/caoxiemeihao/electron-vue-vite/issues/52
-export function resolveElectron(resolves: Parameters<typeof resolve>[0] = {}): Plugin {
-  const builtins = builtinModules.filter(t => !t.startsWith('_'))
+/**
+ * For usage of Electron and NodeJS APIs in the Renderer process
+ * @see https://github.com/caoxiemeihao/electron-vue-vite/issues/52
+ */
+export function resolveElectron(
+  resolves: Parameters<typeof resolve>[0] = {}
+): Plugin {
+  const builtins = builtinModules.filter((t) => !t.startsWith('_'))
 
-  // https://github.com/caoxiemeihao/vite-plugins/tree/main/packages/resolve#readme
+  /**
+   * @see https://github.com/caoxiemeihao/vite-plugins/tree/main/packages/resolve#readme
+   */
   return resolve({
     electron: electronExport(),
     ...builtinModulesExport(builtins),
@@ -53,52 +62,57 @@ export function resolveElectron(resolves: Parameters<typeof resolve>[0] = {}): P
 
   function electronExport() {
     return `
-  /**
-   * All exports module see https://www.electronjs.org -> API -> Renderer Process Modules
-   */
-  const electron = require("electron");
-  const {
-    clipboard,
-    nativeImage,
-    shell,
-    contextBridge,
-    crashReporter,
-    ipcRenderer,
-    webFrame,
-    desktopCapturer,
-    deprecate,
-  } = electron;
-  
-  export {
-    electron as default,
-    clipboard,
-    nativeImage,
-    shell,
-    contextBridge,
-    crashReporter,
-    ipcRenderer,
-    webFrame,
-    desktopCapturer,
-    deprecate,
-  }
-  `
+      /**
+       * For all exported modules see https://www.electronjs.org/docs/latest/api/clipboard -> Renderer Process Modules
+       */
+      const electron = require("electron");
+      const {
+        clipboard,
+        nativeImage,
+        shell,
+        contextBridge,
+        crashReporter,
+        ipcRenderer,
+        webFrame,
+        desktopCapturer,
+        deprecate,
+      } = electron;
+
+      export {
+        electron as default,
+        clipboard,
+        nativeImage,
+        shell,
+        contextBridge,
+        crashReporter,
+        ipcRenderer,
+        webFrame,
+        desktopCapturer,
+        deprecate,
+      }
+    `
   }
 
   function builtinModulesExport(modules: string[]) {
-    return modules.map((moduleId) => {
-      const nodeModule = require(moduleId)
-      const requireModule = `const M = require("${moduleId}");`
-      const exportDefault = `export default M;`
-      const exportMembers = Object.keys(nodeModule).map(attr => `export const ${attr} = M.${attr}`).join(';\n') + ';'
-      const nodeModuleCode = `
-${requireModule}
+    return modules
+      .map((moduleId) => {
+        const nodeModule = require(moduleId)
+        const requireModule = `const M = require("${moduleId}");`
+        const exportDefault = `export default M;`
+        const exportMembers =
+          Object.keys(nodeModule)
+            .map((attr) => `export const ${attr} = M.${attr}`)
+            .join(';\n') + ';'
+        const nodeModuleCode = `
+          ${requireModule}
 
-${exportDefault}
+          ${exportDefault}
 
-${exportMembers}
-  `
+          ${exportMembers}
+        `
 
-      return { [moduleId]: nodeModuleCode }
-    }).reduce((memo, item) => Object.assign(memo, item), {})
+        return { [moduleId]: nodeModuleCode }
+      })
+      .reduce((memo, item) => Object.assign(memo, item), {})
   }
 }