diff --git a/src/main/index.ts b/src/main/index.ts index 7852f75..7207ffc 100644 --- a/src/main/index.ts +++ b/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() } diff --git a/src/main/samples/electron-store.ts b/src/main/samples/electron-store.ts index 7ab0dd6..71d052e 100644 --- a/src/main/samples/electron-store.ts +++ b/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] - }) - \ No newline at end of file +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] + } +) diff --git a/src/preload/index.ts b/src/preload/index.ts index 324e2f9..c3ef1ba 100644 --- a/src/preload/index.ts +++ b/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) { const protos = Object.getPrototypeOf(obj) @@ -25,7 +24,7 @@ function withPrototype(obj: Record) { 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) } diff --git a/src/preload/loading.ts b/src/preload/loading.ts index a73a630..e4babed 100644 --- a/src/preload/loading.ts +++ b/src/preload/loading.ts @@ -1,5 +1,3 @@ - - /** * https://tobiasahlin.com/spinkit * https://connoratherton.com/loaders diff --git a/src/preload/utils.ts b/src/preload/utils.ts index 7dd3280..2f68893 100644 --- a/src/preload/utils.ts +++ b/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 { diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx index d00f704..51d8cec 100644 --- a/src/renderer/src/main.tsx +++ b/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) }) diff --git a/src/renderer/src/samples/electron-store.ts b/src/renderer/src/samples/electron-store.ts index 255b942..ba323fa 100644 --- a/src/renderer/src/samples/electron-store.ts +++ b/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 diff --git a/src/renderer/vite.config.ts b/src/renderer/vite.config.ts index 82b125c..c51dc32 100644 --- a/src/renderer/vite.config.ts +++ b/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[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[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[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), {}) } }