vue-cli-plugin-electron-haunv 1.0.2 → 1.0.3

package/bin/dev-runner.js

@@ -0,0 +1,71 @@
+const { spawn } = require("child_process")
+const waitOn = require("wait-on")
+const getPort = require("get-port").default
+const chokidar = require("chokidar")
+const kill = require("tree-kill")
+const electron = require("electron")
+
+let electronProcess
+let port
+let reloadTimeout
+
+function startElectron() {
+
+    electronProcess = spawn(
+        electron,
+        ["."],
+        {
+            stdio: "inherit",
+            env: {
+                ...process.env,
+                VITE_DEV_SERVER_URL: `http://localhost:${port}`
+            }
+        }
+    )
+
+}
+
+function restartElectron() {
+
+    clearTimeout(reloadTimeout)
+
+    reloadTimeout = setTimeout(() => {
+        if (electronProcess) {
+            electronProcess.kill()
+            startElectron()
+        }
+    }, 300)
+
+}
+
+async function run() {
+
+    port = await getPort({
+        port: [8080, 8081, 8082, 8083]
+    })
+
+    spawn(
+        "npm",
+        ["run", "serve", "--", "--port", port],
+        {
+            stdio: "inherit",
+            shell: true
+        }
+    )
+
+    await waitOn({
+        resources: [`http://localhost:${port}`]
+    })
+
+    startElectron()
+
+    chokidar
+        .watch(["electron"], {
+            ignored: /node_modules/,
+            ignoreInitial: true
+        })
+        .on("all", restartElectron)
+
+}
+
+run()

package/bin/hot-reload.js

@@ -0,0 +1 @@
+// custom reload

package/generator/index.js

@@ -0,0 +1,29 @@
+module.exports = (api) => {
+
+    api.render('./template')
+
+    api.extendPackage({
+
+        main: "electron/main.js",
+
+        build: {
+            appId: "com.haunv.app",
+            productName: "MyApp",
+            directories: {
+                output: "dist_electron"
+            },
+            files: [
+                "dist/**/*",
+                "electron/**/*"
+            ],
+            win: {
+                target: [
+                    "nsis",
+                    "portable"
+                ]
+            }
+        }
+
+    })
+
+}

package/generator/template/electron/main.js

@@ -0,0 +1,30 @@
+const { app, BrowserWindow } = require("electron")
+
+let mainWindow
+
+function createWindow() {
+
+    mainWindow = new BrowserWindow({
+        width: 1200,
+        height: 800,
+        webPreferences: {
+            preload: require("path").join(__dirname, "preload.js"),
+            contextIsolation: true,
+            nodeIntegration: false
+        }
+    })
+
+    if (process.env.VITE_DEV_SERVER_URL) {
+        mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL)
+        mainWindow.webContents.openDevTools()
+    } else {
+        mainWindow.loadFile("dist/index.html")
+    }
+
+}
+
+app.whenReady().then(createWindow)
+
+app.on("window-all-closed", () => {
+    if (process.platform !== "darwin") app.quit()
+})

package/generator/template/electron/preload.js

@@ -0,0 +1,5 @@
+const { contextBridge } = require("electron")
+
+contextBridge.exposeInMainWorld("api", {
+    ping: () => "pong"
+})

package/index.js

@@ -1,41 +1,8 @@
-'use strict'
-
-/**
- * vite-plugin-electron-builder
- * Easily Build Your Vue 3 + Vite App For Desktop With Electron
- *
- * Usage in vite.config.js:
- *
- *   import { createElectronPlugin } from 'vite-plugin-electron-builder'
- *
- *   export default defineConfig({
- *     plugins: [vue(), createElectronPlugin({ mainProcessFile: 'src/background.js' })]
- *   })
- */
-
-const { createElectronPlugin } = require('./lib/vitePlugin')
-const { electronServePlugin, electronBuildPlugin } = require('./lib/plugin')
-const { buildRenderer, buildMain } = require('./lib/build')
-const { serve } = require('./lib/serve')
-const { createProtocol } = require('./lib/protocol')
-const { getNativeDeps } = require('./lib/nativeDeps')
-const { getConfig } = require('./lib/config')
-
-module.exports = {
-  // Primary API — use this in vite.config.js
-  createElectronPlugin,
-
-  // Lower-level Vite plugin hooks (serve / build separately)
-  electronServePlugin,
-  electronBuildPlugin,
-
-  // Build utilities
-  buildRenderer,
-  buildMain,
-  serve,
-
-  // Helpers (importable directly too via their lib path)
-  createProtocol,
-  getNativeDeps,
-  getConfig,
-}
+module.exports = (api) => {
+    api.extendPackage({
+        scripts: {
+            "electron:dev": "node node_modules/vue-cli-plugin-electron-haunv/bin/dev-runner.js",
+            "electron:build": "electron-builder"
+        }
+    })
+}

package/package.json

@@ -1,64 +1,24 @@
 {
   "name": "vue-cli-plugin-electron-haunv",
-  "version": "1.0.2",
-  "description": "Easily Build Your Vue 3 + Vite App For Desktop With Electron",
+  "version": "1.0.3",
   "main": "index.js",
-  "types": "index.d.ts",
-  "bin": {
-    "vite-electron": "./bin/cli.js",
-    "create-electron-vue": "./bin/cli.js"
-  },
-  "keywords": [
-    "vue",
-    "vue3",
-    "vite",
-    "electron",
-    "electron-builder",
-    "desktop",
-    "plugin",
-    "boilerplate"
-  ],
-  "author": "",
   "license": "MIT",
-  "engines": {
-    "node": ">=18.0.0"
-  },
+
   "files": [
-    "index.js",
-    "index.d.ts",
-    "lib/",
-    "bin/",
-    "generator/"
+    "generator",
+    "bin",
+    "index.js"
   ],
-  "peerDependencies": {
-    "electron": ">=30.0.0",
-    "vite": ">=5.0.0"
-  },
-  "peerDependenciesMeta": {
-    "electron": {
-      "optional": false
-    },
-    "vite": {
-      "optional": false
-    }
-  },
-  "dependencies": {
-    "chalk": "^4.1.2",
-    "chokidar": "^3.6.0",
-    "commander": "^14.0.3",
-    "electron-builder": "^26.8.1",
-    "esbuild": "^0.27.4",
-    "execa": "^5.1.1",
-    "fs-extra": "^11.3.4",
-    "semver": "^7.7.4"
-  },
+
+  "dependencies": {},
+
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.5",
-    "concurrently": "^9.2.1",
-    "cross-env": "^10.1.0",
-    "electron": "^41.0.2",
-    "electron-devtools-installer": "^4.0.0",
-    "vite": "^8.0.0",
-    "wait-on": "^9.0.4"
+    "electron": "latest",
+    "electron-builder": "latest",
+    "concurrently": "latest",
+    "wait-on": "latest",
+    "chokidar": "latest",
+    "tree-kill": "latest",
+    "get-port": "latest"
   }
-}
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,250 +0,0 @@
-# vite-plugin-electron-builder
-
-> Easily Build Your Vue 3 + Vite App For Desktop With Electron
-
-[![Node CI](https://github.com/your-username/vite-plugin-electron-builder/actions/workflows/nodeCI.yml/badge.svg)](https://github.com/your-username/vite-plugin-electron-builder/actions/workflows/nodeCI.yml)
-[![npm version](https://img.shields.io/npm/v/vite-plugin-electron-builder.svg)](https://www.npmjs.com/package/vite-plugin-electron-builder)
-[![License: MIT](https://img.shields.io/badge/License-MIT-green.svg)](./LICENSE)
-
-A modern replacement for `vue-cli-plugin-electron-builder`, built on top of **Vite 8**, **Electron 41**, and **electron-builder 26**. All dependencies are kept at their latest versions.
-
----
-
-## ✨ Features
-
-- ⚡ **Vite-native** — instant HMR for the renderer process
-- 🔄 **Auto-restart** — watches your main process files and restarts Electron on change
-- 🔒 **Secure by default** — custom `app://` protocol with path traversal protection, context isolation enabled
-- 🛠 **esbuild** — fast TypeScript/ESM compilation for the main process
-- 🎭 **Playwright** — built-in E2E test helper for Electron windows
-- 📦 **electron-builder** — full packaging for Linux, macOS, and Windows
-- 🖥 **CLI** — scaffold a new project with one command
-
----
-
-## Quick Start
-
-### Scaffold a new project
-
-```bash
-npx vite-plugin-electron-builder my-app
-cd my-app
-npm run electron:serve
-```
-
-### Add to an existing Vite + Vue project
-
-```bash
-npm install -D vite-plugin-electron-builder electron electron-builder esbuild
-```
-
-Then update your `vite.config.js`:
-
-```js
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { createElectronPlugin } from 'vite-plugin-electron-builder'
-
-export default defineConfig({
-  plugins: [
-    vue(),
-    createElectronPlugin({
-      mainProcessFile: 'src/background.js',
-      outputDir: 'dist_electron',
-    }),
-  ],
-})
-```
-
-Add scripts to your `package.json`:
-
-```json
-{
-  "scripts": {
-    "electron:serve": "vite-electron serve",
-    "electron:build": "vite build && vite-electron build"
-  }
-}
-```
-
----
-
-## Project Structure
-
-After scaffolding, your project will look like this:
-
-```
-my-app/
-├── src/
-│   ├── App.vue          # Vue renderer component
-│   ├── main.js          # Renderer entry point
-│   ├── background.js    # Electron main process ← edit this
-│   └── preload.js       # Preload script (contextBridge)
-├── tests/
-│   └── e2e/
-│       └── app.spec.js  # Playwright E2E tests
-├── index.html
-├── vite.config.js
-└── package.json
-```
-
----
-
-## Plugin Options
-
-```ts
-interface ElectronBuilderOptions {
-  /** Electron main process entry file. Default: 'src/background.js' */
-  mainProcessFile?: string
-
-  /** Output dir for compiled main process. Default: 'dist_electron' */
-  outputDir?: string
-
-  /** Preload script path. Optional. */
-  preload?: string
-
-  /** Enable Node integration in renderer. Default: false */
-  nodeIntegration?: boolean
-
-  /** Enable context isolation. Default: true */
-  contextIsolation?: boolean
-
-  /** Custom protocol scheme name. Default: 'app' */
-  customFileProtocol?: string
-
-  /** Extra Electron CLI flags for development. */
-  electronCliArgs?: string[]
-
-  /** electron-builder config overrides. */
-  builderOptions?: import('electron-builder').Configuration
-
-  /** Native modules to externalize from the bundle. */
-  externals?: string[]
-}
-```
-
----
-
-## Development
-
-### Commands
-
-| Command | Description |
-|---|---|
-| `npm run electron:serve` | Start Vite dev server + Electron |
-| `npm run electron:build` | Build renderer + package with electron-builder |
-| `npm test` | Run Jest unit tests |
-| `npm run test:e2e` | Run Playwright E2E tests |
-| `npm run lint` | ESLint |
-
-### How it works
-
-**Development (`electron:serve`)**
-
-1. Vite starts its dev server (default `:8080`)
-2. The plugin compiles `src/background.js` with esbuild → `dist_electron/main.js`
-3. Electron is launched pointing at the Vite dev server URL
-4. chokidar watches `src/background.js` (and preload) — on change, recompiles and restarts Electron
-
-**Production (`electron:build`)**
-
-1. Vite builds the renderer to `dist/`
-2. esbuild compiles and bundles the main process to `dist_electron/main.js`
-3. electron-builder packages everything into a distributable (`.dmg`, `.exe`, `.AppImage`, etc.)
-
----
-
-## Security
-
-This plugin follows Electron security best practices:
-
-- **Context isolation** is enabled by default (`contextIsolation: true`)
-- **Node integration** is disabled by default in the renderer
-- The custom `app://` protocol prevents path traversal attacks
-- The preload template uses `contextBridge` to expose only whitelisted APIs
-
----
-
-## API Reference
-
-### `createElectronPlugin(options?)`
-
-Returns a Vite plugin. Add it to the `plugins` array in `vite.config.js`.
-
-### `createProtocol(scheme, basePath?)`
-
-Registers a secure Electron file protocol. Import in your main process:
-
-```js
-import { createProtocol } from 'vite-plugin-electron-builder/lib/protocol'
-
-app.whenReady().then(() => {
-  createProtocol('app')
-  win.loadURL('app://./index.html')
-})
-```
-
-### `testWithPlaywright(options?)`
-
-Launches Electron with Playwright for E2E tests:
-
-```js
-import { testWithPlaywright } from 'vite-plugin-electron-builder'
-
-let app, page, stop
-
-beforeAll(async () => {
-  ;({ app, page, stop } = await testWithPlaywright({
-    appPath: 'dist_electron/main.js',
-  }))
-})
-
-afterAll(() => stop())
-
-test('renders app', async () => {
-  const el = await page.$('#app')
-  expect(el).not.toBeNull()
-})
-```
-
----
-
-## Package Versions
-
-All dependencies are pinned to their latest major versions:
-
-| Package | Version |
-|---|---|
-| `electron` | ^41.0.2 |
-| `electron-builder` | ^26.8.1 |
-| `vite` | ^8.0.0 |
-| `@vitejs/plugin-vue` | ^6.0.5 |
-| `esbuild` | ^0.27.4 |
-| `@playwright/test` | ^1.58.2 |
-| `chalk` | ^5.6.2 |
-| `chokidar` | ^5.0.0 |
-| `commander` | ^14.0.3 |
-| `execa` | ^9.6.1 |
-| `fs-extra` | ^11.3.4 |
-| `semver` | ^7.7.4 |
-| `concurrently` | ^9.2.1 |
-| `wait-on` | ^9.0.4 |
-
----
-
-## Migrating from vue-cli-plugin-electron-builder
-
-| vue-cli-plugin | vite-plugin-electron-builder |
-|---|---|
-| `vue add electron-builder` | `npx vite-plugin-electron-builder my-app` |
-| `vue-cli-service electron:serve` | `vite-electron serve` |
-| `vue-cli-service electron:build` | `vite-electron build` |
-| `vue.config.js` plugin options | `vite.config.js` `createElectronPlugin({})` |
-| `background.js` | `src/background.js` (unchanged) |
-| `createProtocol` | `import { createProtocol } from 'vite-plugin-electron-builder/lib/protocol'` |
-
----
-
-## License
-
-MIT

package/bin/cli.js

@@ -1,87 +0,0 @@
-#!/usr/bin/env node
-
-'use strict'
-
-const { program } = require('commander')
-const path = require('path')
-const chalk = require('chalk')
-const pkg = require('../package.json')
-
-program
-  .name('vite-electron')
-  .description('Vite Plugin Electron Builder CLI')
-  .version(pkg.version)
-
-program
-  .command('serve')
-  .description('Start the Electron development server')
-  .option('--main <file>', 'Path to main process file', 'src/background.js')
-  .option('--out <dir>', 'Output directory', 'dist_electron')
-  .action(async (opts) => {
-    const { createServer } = require('vite')
-    const { serveElectron } = require('../lib/build')
-
-    console.log(chalk.cyan('\n🚀 Starting Vite + Electron dev server...\n'))
-
-    try {
-      // Start Vite dev server
-      const viteServer = await createServer({
-        base: './',
-        server: { port: 8080 }
-      })
-      await viteServer.listen()
-      viteServer.printUrls()
-
-      // Start Electron in watch mode
-      const { stop } = await serveElectron({
-        mainProcessFile: opts.main,
-        outputDir: opts.out
-      })
-
-      // Handle graceful shutdown
-      const shutdown = async () => {
-        console.log(chalk.yellow('\n[electron-builder] Shutting down...'))
-        await stop()
-        await viteServer.close()
-        process.exit(0)
-      }
-
-      process.on('SIGINT', shutdown)
-      process.on('SIGTERM', shutdown)
-    } catch (err) {
-      console.error(chalk.red('[electron-builder] Serve failed:'), err)
-      process.exit(1)
-    }
-  })
-
-program
-  .command('build')
-  .description('Build the app for production')
-  .option('--main <file>', 'Path to main process file', 'src/background.js')
-  .option('--out <dir>', 'Output directory', 'dist_electron')
-  .option('--platform <platform>', 'Target platform (linux|mac|win)')
-  .action(async (opts) => {
-    const { buildElectron } = require('../lib/build')
-
-    console.log(chalk.cyan('\n📦 Building for production...\n'))
-
-    try {
-      await buildElectron({
-        mainProcessFile: opts.main,
-        outputDir: opts.out,
-        builderOptions: opts.platform
-          ? { [opts.platform]: {} }
-          : {}
-      })
-    } catch (err) {
-      console.error(chalk.red('[electron-builder] Build failed:'), err)
-      process.exit(1)
-    }
-  })
-
-program.parse(process.argv)
-
-// Show help if no command given
-if (!process.argv.slice(2).length) {
-  program.outputHelp()
-}

package/generator/template/index.html

@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <!-- Required for Electron security -->
-    <meta http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline';" />
-    <title>Vue 3 + Vite + Electron</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.js"></script>
-  </body>
-</html>

package/generator/template/package.json

@@ -1,28 +0,0 @@
-{
-  "name": "my-electron-vue-app",
-  "version": "0.1.0",
-  "description": "A Vue 3 + Vite + Electron desktop application",
-  "main": "dist_electron/main.js",
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "electron:serve": "vite-electron serve",
-    "electron:build": "vite build && vite-electron build"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "MIT",
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "dependencies": {
-    "vue": "^3.5.13"
-  },
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.5",
-    "electron": "^41.0.2",
-    "electron-devtools-installer": "^4.0.0",
-    "vite": "^8.0.0",
-    "vite-plugin-electron-builder": "^1.0.0"
-  }
-}