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

package/generator/template/src/App.vue

@@ -1,125 +0,0 @@
-<template>
-  <div id="app">
-    <header class="app-header">
-      <img src="./assets/logo.svg" alt="Vue + Electron" class="logo" />
-      <h1>Vue 3 + Vite + Electron</h1>
-    </header>
-
-    <main class="app-main">
-      <p class="tagline">
-        Edit <code>src/App.vue</code> and save to see hot-reload in action.
-      </p>
-
-      <div class="info-cards">
-        <div class="card">
-          <h2>⚡ Vite</h2>
-          <p>Lightning-fast HMR during development.</p>
-        </div>
-        <div class="card">
-          <h2>🖥 Electron</h2>
-          <p>Cross-platform desktop apps with web tech.</p>
-        </div>
-        <div class="card">
-          <h2>💚 Vue 3</h2>
-          <p>Composition API, TypeScript, and more.</p>
-        </div>
-      </div>
-
-      <p class="version">Electron API available: {{ hasElectronAPI ? '✅' : '❌' }}</p>
-    </main>
-  </div>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-
-const hasElectronAPI = ref(false)
-
-onMounted(() => {
-  hasElectronAPI.value = typeof window.electronAPI !== 'undefined'
-})
-</script>
-
-<style>
-* { box-sizing: border-box; margin: 0; padding: 0; }
-
-body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: #0d1117;
-  color: #c9d1d9;
-  min-height: 100vh;
-}
-
-#app {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 40px 20px;
-  gap: 32px;
-}
-
-.app-header {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 16px;
-}
-
-.logo { width: 80px; height: 80px; }
-
-h1 {
-  font-size: 2rem;
-  font-weight: 700;
-  background: linear-gradient(135deg, #42b883, #35495e);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-
-.tagline {
-  font-size: 1.1rem;
-  color: #8b949e;
-  text-align: center;
-  margin-bottom: 24px;
-}
-
-.tagline code {
-  background: #161b22;
-  padding: 2px 8px;
-  border-radius: 4px;
-  font-family: monospace;
-  color: #58a6ff;
-}
-
-.info-cards {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-  gap: 20px;
-  width: 100%;
-  max-width: 700px;
-}
-
-.card {
-  background: #161b22;
-  border: 1px solid #30363d;
-  border-radius: 12px;
-  padding: 24px;
-  text-align: center;
-}
-
-.card h2 { font-size: 1.3rem; margin-bottom: 8px; }
-.card p { color: #8b949e; font-size: 0.95rem; }
-
-.version {
-  margin-top: 16px;
-  font-size: 0.9rem;
-  color: #8b949e;
-}
-
-.app-main {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  max-width: 800px;
-}
-</style>

package/generator/template/src/background.js

@@ -1,88 +0,0 @@
-'use strict'
-
-import { app, protocol, BrowserWindow } from 'electron'
-import { createProtocol } from 'vite-plugin-electron-builder/lib/protocol'
-import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
-import path from 'path'
-
-const isDevelopment = process.env.NODE_ENV !== 'production'
-
-// Register the custom protocol before app is ready (required for security)
-protocol.registerSchemesAsPrivileged([
-  {
-    scheme: 'app',
-    privileges: {
-      secure: true,
-      standard: true
-    }
-  }
-])
-
-let win
-
-async function createWindow() {
-  win = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      // NOTE: Do NOT enable nodeIntegration in production for security
-      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION === 'true',
-      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
-      preload: path.join(__dirname, 'preload.js') // optional
-    }
-  })
-
-  if (isDevelopment) {
-    // Load from Vite dev server
-    await win.loadURL(process.env.VITE_DEV_SERVER_URL || 'http://localhost:8080')
-    win.webContents.openDevTools()
-  } else {
-    // Use custom protocol for production
-    createProtocol('app')
-    await win.loadURL('app://./index.html')
-  }
-
-  win.on('closed', () => {
-    win = null
-  })
-}
-
-// Install Vue Devtools in development
-app.whenReady().then(async () => {
-  if (isDevelopment && !process.env.IS_TEST) {
-    try {
-      await installExtension(VUEJS_DEVTOOLS)
-    } catch (e) {
-      console.error('Vue Devtools failed to install:', e.toString())
-    }
-  }
-  await createWindow()
-})
-
-// Quit when all windows are closed (except on macOS)
-app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
-})
-
-app.on('activate', () => {
-  if (win === null) {
-    createWindow()
-  }
-})
-
-// Exit cleanly in development mode
-if (isDevelopment) {
-  if (process.platform === 'win32') {
-    process.on('message', (data) => {
-      if (data === 'graceful-exit') {
-        app.quit()
-      }
-    })
-  } else {
-    process.on('SIGTERM', () => {
-      app.quit()
-    })
-  }
-}

package/generator/template/src/main.js

@@ -1,4 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-
-createApp(App).mount('#app')

package/generator/template/src/preload.js

@@ -1,31 +0,0 @@
-'use strict'
-
-/**
- * Preload script - runs in a privileged context before the renderer.
- * Use contextBridge to safely expose APIs to the renderer.
- *
- * Docs: https://www.electronjs.org/docs/latest/tutorial/context-isolation
- */
-const { contextBridge, ipcRenderer } = require('electron')
-
-// Expose a safe API to the renderer process via window.electronAPI
-contextBridge.exposeInMainWorld('electronAPI', {
-  // Example: send a message to the main process
-  sendMessage: (channel, data) => {
-    const allowedChannels = ['app:minimize', 'app:maximize', 'app:close', 'app:ready']
-    if (allowedChannels.includes(channel)) {
-      ipcRenderer.send(channel, data)
-    }
-  },
-
-  // Example: receive a message from the main process
-  onMessage: (channel, callback) => {
-    const allowedChannels = ['app:update-available', 'app:update-downloaded']
-    if (allowedChannels.includes(channel)) {
-      ipcRenderer.on(channel, (_event, ...args) => callback(...args))
-    }
-  },
-
-  // Expose app version
-  getVersion: () => ipcRenderer.invoke('app:get-version'),
-})

package/generator/template/vite.config.js

@@ -1,36 +0,0 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import { createElectronPlugin } from 'vite-plugin-electron-builder'
-import path from 'path'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue(),
-    createElectronPlugin({
-      // Path to Electron main process entry
-      mainProcessFile: 'src/background.js',
-
-      // Output directory for compiled main process
-      outputDir: 'dist_electron',
-
-      // Optional: path to preload script
-      preload: 'src/preload.js',
-
-      // Optional: electron-builder overrides
-      builderOptions: {
-        appId: 'com.example.myapp',
-        productName: 'My Vue Electron App',
-        linux: { target: ['AppImage', 'deb'] },
-        win: { target: ['nsis'] },
-        mac: { target: ['dmg'] },
-      },
-    }),
-  ],
-
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src'),
-    },
-  },
-})

package/index.d.ts

@@ -1,180 +0,0 @@
-import type { Plugin, UserConfig } from 'vite'
-
-// ─── Option Types ─────────────────────────────────────────────────────────────
-
-export interface ElectronBuilderOptions {
-  /**
-   * Relative path to the Electron main process entry file.
-   * @default 'src/background.js'
-   */
-  mainProcessFile?: string
-
-  /**
-   * Output directory for the compiled main process and packaged app.
-   * @default 'dist_electron'
-   */
-  outputDir?: string
-
-  /**
-   * Output directory for the Vite renderer build.
-   * @default 'dist'
-   */
-  rendererOutputDir?: string
-
-  /**
-   * Path to the preload script (relative to project root).
-   * When set, it is compiled alongside the main process.
-   */
-  preload?: string
-
-  /**
-   * Additional glob patterns to watch for main-process hot-reload.
-   * Defaults to watching src/background.{js,ts} and src/preload/**
-   */
-  mainProcessWatch?: string[]
-
-  /**
-   * Enable Node integration in the renderer process.
-   * ⚠ Keep this false in production for security.
-   * @default false
-   */
-  nodeIntegration?: boolean
-
-  /**
-   * Enable context isolation between main and renderer processes.
-   * @default true
-   */
-  contextIsolation?: boolean
-
-  /**
-   * Custom Electron protocol scheme used in production (e.g. 'app').
-   * @default 'app'
-   */
-  customFileProtocol?: string
-
-  /**
-   * Extra Electron CLI flags appended during `electron:serve`.
-   * @example ['--inspect=5858', '--remote-debugging-port=9222']
-   */
-  electronCliArgs?: string[]
-
-  /**
-   * Native (C++ addon) module names to externalize from the esbuild bundle.
-   * These will be loaded at runtime from node_modules instead.
-   * @default []
-   */
-  externals?: string[]
-
-  /**
-   * electron-builder configuration overrides applied during packaging.
-   */
-  builderOptions?: ElectronBuilderConfig
-
-  /**
-   * Additional Vite config applied to the main-process compilation step.
-   */
-  mainProcessViteConfig?: Partial<UserConfig>
-
-  /**
-   * Set to true if you want to skip TypeScript compilation for the main process.
-   * @default false
-   */
-  disableMainProcessTypescript?: boolean
-}
-
-// ─── Result Types ─────────────────────────────────────────────────────────────
-
-export interface ServeResult {
-  /** Gracefully stop Electron and the file watcher. */
-  stop: () => Promise<void>
-}
-
-// ─── Primary API ──────────────────────────────────────────────────────────────
-
-/**
- * The main Vite plugin. Add this to your vite.config.js plugins array.
- *
- * @example
- * // vite.config.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' })
- *   ]
- * })
- */
-export function createElectronPlugin(options?: ElectronBuilderOptions): Plugin
-
-// ─── Lower-level Plugin Hooks ─────────────────────────────────────────────────
-
-/**
- * Vite plugin that handles the development serve phase only.
- * Use `createElectronPlugin` instead unless you need fine-grained control.
- */
-export function electronServePlugin(options?: ElectronBuilderOptions): Plugin
-
-/**
- * Vite plugin that handles the production build phase only.
- * Use `createElectronPlugin` instead unless you need fine-grained control.
- */
-export function electronBuildPlugin(options?: ElectronBuilderOptions): Plugin
-
-// ─── Build Utilities ─────────────────────────────────────────────────────────
-
-/**
- * Compile the Electron main process (and optional preload) using esbuild.
- * Called automatically during build; exposed for custom pipelines.
- */
-export function buildMain(options?: ElectronBuilderOptions): Promise<void>
-
-/**
- * Package the app with electron-builder after the renderer has been built.
- * Called automatically during build; exposed for custom pipelines.
- */
-export function buildRenderer(options?: ElectronBuilderOptions): Promise<void>
-
-/**
- * Start the Electron development server with hot-reload.
- * Compiles the main process, launches Electron, and watches source files.
- */
-export function serve(options?: ElectronBuilderOptions): Promise<void>
-
-// ─── Helpers ─────────────────────────────────────────────────────────────────
-
-/**
- * Register a secure custom file protocol in the Electron main process.
- * Prevents path traversal and falls back to index.html for SPA routing.
- *
- * @param scheme   Protocol name, e.g. 'app'
- * @param basePath Override the directory from which files are served.
- *
- * @example
- * // src/background.js
- * import { createProtocol } from 'vite-plugin-electron-builder/lib/protocol'
- *
- * app.whenReady().then(() => {
- *   createProtocol('app')
- *   win.loadURL('app://./index.html')
- * })
- */
-export function createProtocol(scheme: string, basePath?: string): void
-
-/**
- * Scan node_modules for packages that contain native (.node) binaries.
- * Useful for automatically populating the `externals` option.
- *
- * @param projectRoot Absolute path to the project root (default: cwd)
- */
-export function getNativeDeps(projectRoot?: string): Promise<string[]>
-
-/**
- * Normalise plugin options, applying all defaults.
- * Useful for tooling that needs to introspect resolved config.
- */
-export function getConfig(
-  options?: ElectronBuilderOptions
-): Required<ElectronBuilderOptions>

package/lib/build.js

@@ -1,128 +0,0 @@
-'use strict'
-
-const path = require('path')
-const fs = require('fs-extra')
-const chalk = require('chalk')
-const { build: electronBuilderBuild } = require('electron-builder')
-
-/**
- * Build the Electron main process using esbuild.
- * @param {object} options
- * @param {string} [options.mainProcessFile]  - entry point
- * @param {string} [options.outputDir]        - output dir (default: dist-electron)
- * @param {'development'|'production'} [options.mode]
- */
-async function buildMain(options = {}) {
-  const outputDir = options.outputDir || 'dist_electron'
-  const mode = options.mode || 'production'
-  const cwd = process.cwd()
-
-  const possibleEntries = [
-    options.mainProcessFile,
-    path.join(cwd, 'src/background.ts'),
-    path.join(cwd, 'src/background.js'),
-    path.join(cwd, 'src/main/index.ts'),
-    path.join(cwd, 'src/main/index.js'),
-    path.join(cwd, 'electron/main.ts'),
-    path.join(cwd, 'electron/main.js'),
-  ].filter(Boolean)
-
-  const entry = possibleEntries.find((p) => fs.existsSync(p))
-  if (!entry) {
-    console.warn(chalk.yellow('[electron-builder] No main process entry found.'))
-    return
-  }
-
-  await fs.ensureDir(path.join(cwd, outputDir))
-
-  const esbuild = requireEsbuild()
-  if (!esbuild) {
-    throw new Error('[electron-builder] esbuild is required. Run: npm install -D esbuild')
-  }
-
-  await esbuild.build({
-    entryPoints: [entry],
-    bundle: true,
-    platform: 'node',
-    target: `node${process.versions.node.split('.')[0]}`,
-    outfile: path.join(cwd, outputDir, 'main.js'),
-    external: ['electron', ...getExternalModules(cwd)],
-    define: { 'process.env.NODE_ENV': JSON.stringify(mode) },
-    sourcemap: mode === 'development',
-    minify: mode === 'production',
-  })
-
-  const preloadEntry = findPreload(cwd)
-  if (preloadEntry) {
-    await esbuild.build({
-      entryPoints: [preloadEntry],
-      bundle: true,
-      platform: 'node',
-      target: `node${process.versions.node.split('.')[0]}`,
-      outfile: path.join(cwd, outputDir, 'preload.js'),
-      external: ['electron'],
-      sourcemap: mode === 'development',
-      minify: mode === 'production',
-    })
-    console.log(chalk.green('[electron-builder] Preload script compiled'))
-  }
-
-  console.log(chalk.green('[electron-builder] Main process compiled'))
-}
-
-/**
- * Package the app using electron-builder
- * @param {object} options
- * @param {string} [options.rendererOutputDir]   - Vite build output (default: 'dist')
- * @param {string} [options.electronOutputDir]   - compiled main output (default: 'dist_electron')
- * @param {object} [options.builderOptions]      - electron-builder config overrides
- */
-async function buildRenderer(options = {}) {
-  const cwd = process.cwd()
-  const rendererOutput = options.rendererOutputDir || 'dist'
-  const electronOutput = options.electronOutputDir || 'dist_electron'
-
-  console.log(chalk.blue('[electron-builder] Packaging with electron-builder...'))
-
-  const builderConfig = {
-    directories: {
-      output: path.join(cwd, electronOutput, 'release'),
-      app: cwd,
-    },
-    files: [
-      `${rendererOutput}/**/*`,
-      `${electronOutput}/main.js`,
-      `${electronOutput}/preload.js`,
-      'package.json',
-    ],
-    ...(options.builderOptions || {}),
-  }
-
-  const result = await electronBuilderBuild({ config: builderConfig })
-  console.log(chalk.green('[electron-builder] Packaging complete:'), result)
-}
-
-function requireEsbuild() {
-  try { return require('esbuild') } catch { return null }
-}
-
-function findPreload(cwd) {
-  const candidates = [
-    path.join(cwd, 'src/preload.ts'),
-    path.join(cwd, 'src/preload.js'),
-    path.join(cwd, 'src/preload/index.ts'),
-    path.join(cwd, 'src/preload/index.js'),
-    path.join(cwd, 'electron/preload.ts'),
-    path.join(cwd, 'electron/preload.js'),
-  ]
-  return candidates.find((p) => fs.existsSync(p)) || null
-}
-
-function getExternalModules(cwd) {
-  try {
-    const pkg = require(path.join(cwd, 'package.json'))
-    return Object.keys(pkg.dependencies || {})
-  } catch { return [] }
-}
-
-module.exports = { buildMain, buildRenderer }

package/lib/config.js

@@ -1,25 +0,0 @@
-'use strict'
-
-/**
- * Normalize and apply defaults to plugin options.
- * @param {import('..').ElectronBuilderOptions} options
- * @returns {Required<import('..').ElectronBuilderOptions>}
- */
-function getConfig(options = {}) {
-  return {
-    mainProcessFile: options.mainProcessFile || 'src/background.js',
-    outputDir: options.outputDir || 'dist_electron',
-    mainProcessViteConfig: options.mainProcessViteConfig || {},
-    rendererViteConfig: options.rendererViteConfig || {},
-    builderOptions: options.builderOptions || {},
-    externals: options.externals || [],
-    nodeIntegration: options.nodeIntegration === true,
-    contextIsolation: options.contextIsolation !== false,
-    preload: options.preload || null,
-    customFileProtocol: options.customFileProtocol || 'app',
-    disableMainProcessTypescript: options.disableMainProcessTypescript === true,
-    electronCliArgs: options.electronCliArgs || []
-  }
-}
-
-module.exports = { getConfig }

package/lib/nativeDeps.js

@@ -1,85 +0,0 @@
-'use strict'
-
-const path = require('path')
-const fs = require('fs-extra')
-
-/**
- * Detect native (C++ addon) dependencies in the project's node_modules.
- * Returns a list of package names that contain .node binaries.
- *
- * @param {string} projectRoot
- * @returns {Promise<string[]>}
- */
-async function getNativeDeps(projectRoot) {
-  const pkgJsonPath = path.join(projectRoot, 'package.json')
-
-  if (!fs.existsSync(pkgJsonPath)) {
-    return []
-  }
-
-  const pkg = await fs.readJson(pkgJsonPath)
-  const allDeps = {
-    ...pkg.dependencies,
-    ...pkg.optionalDependencies
-  }
-
-  const nativeDeps = []
-
-  for (const depName of Object.keys(allDeps)) {
-    const depDir = path.join(projectRoot, 'node_modules', depName)
-
-    if (await isNativeDep(depDir)) {
-      nativeDeps.push(depName)
-    }
-  }
-
-  return nativeDeps
-}
-
-/**
- * Check if a package directory contains native bindings.
- * @param {string} depDir
- * @returns {Promise<boolean>}
- */
-async function isNativeDep(depDir) {
-  if (!fs.existsSync(depDir)) return false
-
-  try {
-    // Check for .node files (compiled native addons)
-    const files = await walkDir(depDir)
-    return files.some(f => f.endsWith('.node'))
-  } catch {
-    return false
-  }
-}
-
-/**
- * Recursively list files in a directory.
- * Skips node_modules sub-directories.
- * @param {string} dir
- * @returns {Promise<string[]>}
- */
-async function walkDir(dir) {
-  const results = []
-
-  if (!fs.existsSync(dir)) return results
-
-  const entries = await fs.readdir(dir, { withFileTypes: true })
-
-  for (const entry of entries) {
-    if (entry.name === 'node_modules') continue
-
-    const fullPath = path.join(dir, entry.name)
-
-    if (entry.isDirectory()) {
-      const sub = await walkDir(fullPath)
-      results.push(...sub)
-    } else {
-      results.push(fullPath)
-    }
-  }
-
-  return results
-}
-
-module.exports = { getNativeDeps, isNativeDep }