Merge pull request #24 from electron-vite/v0.4.0

V0.4.0

Author: caoxiemeihao

CHANGELOG.md

@@ -1,3 +1,43 @@
+## 0.4.0 (2023-09-06)
+
+- 38af79d chore: test v0.4.0
+- f5dafdf chore: update template
+- 7114cac chore: site use `https://electron-vite.github.io`
+- 394686c refactor: use `vite-plugin-electron` simple API
+
+#### Main Changed
+
+**0.4.0** use the simple API of `vite-plugin-electron`
+
+```ts
+import electron from 'vite-plugin-electron/simple'
+
+electron({
+  main: {
+    entry: 'electron/main.ts',
+  },
+  preload: {
+    input: __dirname + '/electron/preload.ts',
+  },
+  renderer: {},
+})
+```
+
+**0.3.0**
+
+```ts
+import electron from 'vite-plugin-electron'
+
+electron([
+  {
+    entry: 'electron/main.ts',
+  },
+  {
+    entry: 'electron/preload.ts',
+  },
+])
+```
+
 ## 0.3.0 (2023-05-27)
 
 42dc950 refactor: use Vite instead unbuild

__tests__/cli.spec.ts

@@ -1,13 +1,13 @@
-import { join } from 'node:path'
+import fs from 'node:fs'
+import path from 'node:path'
 import type { ExecaSyncReturnValue, SyncOptions } from 'execa'
 import { execaCommandSync } from 'execa'
-import fs from 'fs-extra'
 import { afterEach, beforeAll, expect, test } from 'vitest'
 
-const CLI_PATH = join(__dirname, '..')
+const CLI_PATH = path.join(__dirname, '..')
 
 const projectName = 'electron-vite-app'
-const genPath = join(__dirname, projectName)
+const generatePath = path.join(__dirname, projectName)
 
 const run = (
   args: string[],
@@ -18,24 +18,24 @@ const run = (
 
 const createNonEmptyDir = () => {
   // Create the temporary directory
-  fs.mkdirpSync(genPath)
+  fs.mkdirSync(generatePath, { recursive: true })
 
   // Create a package.json file
-  const pkgJson = join(genPath, 'package.json')
+  const pkgJson = path.join(generatePath, 'package.json')
   fs.writeFileSync(pkgJson, '{ "foo": "bar" }')
 }
 
-beforeAll(() => fs.remove(genPath))
-afterEach(() => fs.remove(genPath))
+beforeAll(() => fs.rmSync(generatePath, { recursive: true, force: true }))
+afterEach(() => fs.rmSync(generatePath, { recursive: true, force: true }))
 
 test('prompts for the project name if none supplied', () => {
   const { stdout } = run([])
   expect(stdout).toContain('Project name:')
 })
 
 test('prompts for the framework if none supplied when target dir is current directory', () => {
-  fs.mkdirpSync(genPath)
-  const { stdout } = run(['.'], { cwd: genPath })
+  fs.mkdirSync(generatePath, { recursive: true })
+  const { stdout } = run(['.'], { cwd: generatePath })
   expect(stdout).toContain('Project template:')
 })
 
@@ -52,6 +52,6 @@ test('asks to overwrite non-empty target directory', () => {
 
 test('asks to overwrite non-empty current directory', () => {
   createNonEmptyDir()
-  const { stdout } = run(['.'], { cwd: genPath })
+  const { stdout } = run(['.'], { cwd: generatePath })
   expect(stdout).toContain(`Current directory is not empty.`)
 })

electron/electron-builder.json5

@@ -5,18 +5,19 @@
   "$schema": "https://raw.githubusercontent.com/electron-userland/electron-builder/master/packages/app-builder-lib/scheme.json",
   "appId": "YourAppID",
   "asar": true,
+  "productName": "YourAppName",
   "directories": {
     "output": "release/${version}"
   },
   "files": [
-    "dist-electron",
-    "dist"
+    "dist",
+    "dist-electron"
   ],
   "mac": {
-    "artifactName": "${productName}_${version}.${ext}",
     "target": [
       "dmg"
-    ]
+    ],
+    "artifactName": "${productName}-Mac-${version}-Installer.${ext}"
   },
   "win": {
     "target": [
@@ -27,12 +28,18 @@
         ]
       }
     ],
-    "artifactName": "${productName}_${version}.${ext}"
+    "artifactName": "${productName}-Windows-${version}-Setup.${ext}"
   },
   "nsis": {
     "oneClick": false,
     "perMachine": false,
     "allowToChangeInstallationDirectory": true,
     "deleteAppDataOnUninstall": false
+  },
+  "linux": {
+    "target": [
+      "AppImage"
+    ],
+    "artifactName": "${productName}-Linux-${version}.${ext}"
   }
 }

electron/electron-env.d.ts

@@ -17,6 +17,11 @@ declare namespace NodeJS {
      */
     DIST: string
     /** /dist/ or /public/ */
-    PUBLIC: string
+    VITE_PUBLIC: string
   }
 }
+
+// Used in Renderer process, expose in `preload.ts`
+interface Window {
+  ipcRenderer: import('electron').IpcRenderer
+}

electron/main.ts

@@ -11,7 +11,7 @@ import path from 'node:path'
 // │ │ └── preload.js
 // │
 process.env.DIST = path.join(__dirname, '../dist')
-process.env.PUBLIC = app.isPackaged ? process.env.DIST : path.join(process.env.DIST, '../public')
+process.env.VITE_PUBLIC = app.isPackaged ? process.env.DIST : path.join(process.env.DIST, '../public')
 
 
 let win: BrowserWindow | null
@@ -20,7 +20,7 @@ const VITE_DEV_SERVER_URL = process.env['VITE_DEV_SERVER_URL']
 
 function createWindow() {
   win = new BrowserWindow({
-    icon: path.join(process.env.PUBLIC, 'electron-vite.svg'),
+    icon: path.join(process.env.VITE_PUBLIC, 'electron-vite.svg'),
     webPreferences: {
       preload: path.join(__dirname, 'preload.js'),
     },
@@ -39,9 +39,22 @@ function createWindow() {
   }
 }
 
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
 app.on('window-all-closed', () => {
-  win = null
-  if (process.platform !== 'darwin') app.quit()
+  if (process.platform !== 'darwin') {
+    app.quit()
+    win = null
+  }
+})
+
+app.on('activate', () => {
+  // On OS X it's common to re-create a window in the app when the
+  // dock icon is clicked and there are no other windows open.
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow()
+  }
 })
 
 app.whenReady().then(createWindow)

electron/package.json

@@ -1,8 +1,8 @@
 {
   "devDependencies": {
-    "electron": "^24.4.0",
-    "electron-builder": "^23.6.0",
-    "vite-plugin-electron": "^0.11.2",
+    "electron": "^26.1.0",
+    "electron-builder": "^24.6.4",
+    "vite-plugin-electron": "^0.14.0",
     "vite-plugin-electron-renderer": "^0.14.5"
   }
 }

electron/preload.ts

@@ -1,3 +1,28 @@
+import { contextBridge, ipcRenderer } from 'electron'
+
+// --------- Expose some API to the Renderer process ---------
+contextBridge.exposeInMainWorld('ipcRenderer', withPrototype(ipcRenderer))
+
+// `exposeInMainWorld` can't detect attributes and methods of `prototype`, manually patching it.
+function withPrototype(obj: Record<string, any>) {
+  const protos = Object.getPrototypeOf(obj)
+
+  for (const [key, value] of Object.entries(protos)) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) continue
+
+    if (typeof value === 'function') {
+      // 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)
+      }
+    } else {
+      obj[key] = value
+    }
+  }
+  return obj
+}
+
+// --------- Preload scripts loading ---------
 function domReady(condition: DocumentReadyState[] = ['complete', 'interactive']) {
   return new Promise(resolve => {
     if (condition.includes(document.readyState)) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-electron-vite",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "type": "module",
   "description": "Scaffolding Your Electron + Vite Project",
   "license": "MIT",
@@ -34,24 +34,23 @@
     "preinstall": "npx only-allow pnpm",
     "watch": "vite build --watch",
     "build": "vite build",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "npm run build && npm run test",
+    "lint": "eslint .",
     "test": "vitest run"
   },
   "dependencies": {
     "prompts": "^2.4.2"
   },
   "devDependencies": {
-    "@types/fs-extra": "^11.0.1",
     "@types/node": "^18.11.18",
     "@types/prompts": "^2.4.2",
     "execa": "^7.1.1",
-    "fs-extra": "^11.1.1",
     "typescript": "^4.9.4",
     "vite": "^4.3.9",
     "vitest": "^0.29.3"
   },
   "engines": {
     "node": "^14.18.0 || >=16.0.0"
   },
-  "packageManager": "pnpm@8.6.0"
+  "packageManager": "pnpm@8.0.0"
 }