{"id":13417148,"url":"https://github.com/caoxiemeihao/vite-electron-plugin","last_synced_at":"2025-03-16T18:32:24.473Z","repository":{"id":60230716,"uuid":"540774574","full_name":"caoxiemeihao/vite-electron-plugin","owner":"caoxiemeihao","description":"High-performance, esbuild-based Vite Electron plugin","archived":false,"fork":false,"pushed_at":"2023-12-03T12:08:53.000Z","size":324,"stargazers_count":54,"open_issues_count":5,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-29T16:58:50.219Z","etag":null,"topics":["electron","esbuild","plugin","vite"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/caoxiemeihao.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2022-09-24T09:24:28.000Z","updated_at":"2024-10-24T06:15:17.000Z","dependencies_parsed_at":"2023-12-03T13:25:08.132Z","dependency_job_id":"c78551b7-6b2f-4143-ac7c-7728d6bdf622","html_url":"https://github.com/caoxiemeihao/vite-electron-plugin","commit_stats":null,"previous_names":["electron-vite/vite-electron-plugin"],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caoxiemeihao%2Fvite-electron-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caoxiemeihao%2Fvite-electron-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caoxiemeihao%2Fvite-electron-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/caoxiemeihao%2Fvite-electron-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/caoxiemeihao","download_url":"https://codeload.github.com/caoxiemeihao/vite-electron-plugin/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243558477,"owners_count":20310573,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","esbuild","plugin","vite"],"created_at":"2024-07-30T22:00:33.090Z","updated_at":"2025-03-16T18:32:19.455Z","avatar_url":"https://github.com/caoxiemeihao.png","language":"TypeScript","funding_links":[],"categories":["Get Started"],"sub_categories":["Templates"],"readme":"# vite-electron-plugin\n\nHigh-performance, esbuild-based Vite Electron plugin\n\n[![NPM version](https://img.shields.io/npm/v/vite-electron-plugin.svg)](https://npmjs.com/package/vite-electron-plugin)\n[![NPM Downloads](https://img.shields.io/npm/dm/vite-electron-plugin.svg)](https://npmjs.com/package/vite-electron-plugin)\n\n- 🚀 High-performance \u003csub\u003e\u003csup\u003e(Not Bundle, based on esbuild)\u003c/sup\u003e\u003c/sub\u003e\n- 🎯 Support Plugin \u003csub\u003e\u003csup\u003e(Like Vite's plugin)\u003c/sup\u003e\u003c/sub\u003e\n- 🌱 What you see is what you get\n- 🔥 Hot restart\n\n## Quick Setup\n\n1. Add dependency to project\n\n```sh\nnpm i -D vite-electron-plugin\n```\n\n2. Add `vite-electron-plugin` into `vite.config.ts`\n\n```js\nimport electron from 'vite-electron-plugin'\n\nexport default {\n  plugins: [\n    electron({\n      include: [\n        // The Electron source codes directory\n        'electron',\n      ],\n    }),\n  ],\n}\n```\n\n3. Create `electron/main.ts` and type the following code\n\n```js\nimport { app, BrowserWindow } from 'electron'\n\napp.whenReady().then(() =\u003e {\n  const win = new BrowserWindow()\n\n  if (process.env.VITE_DEV_SERVER_URL) {\n    win.loadURL(process.env.VITE_DEV_SERVER_URL)\n  } else {\n    win.loadFile('dist/index.html')\n  }\n})\n```\n\n4. Add entry into `package.json`\n\n```diff\n{\n+ \"main\": \"dist-electron/main.js\"\n}\n```\n\n## [Examples](https://github.com/electron-vite/vite-electron-plugin/tree/main/examples)\n\n- [quick-start](https://github.com/electron-vite/vite-electron-plugin/tree/main/examples/quick-start)\n\n## Recommend Structure\n\nLet's use the official [template-vanilla-ts](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vanilla-ts) created based on `create vite` as an example\n\n```diff\n+ ├─┬ electron\n+ │ └── main.ts\n  ├─┬ src\n  │ ├── main.ts\n  │ ├── style.css\n  │ └── vite-env.d.ts\n  ├── .gitignore\n  ├── favicon.svg\n  ├── index.html\n  ├── package.json\n  ├── tsconfig.json\n+ └── vite.config.ts\n```\n## Conventions\n\n- Any file ending with `reload.ext` *(e.g. `foo.reload.js`, `preload.ts`)* after an update,  \n  will trigger a reload of the Electron-Renderer process, instead of an entire Electron App restart.  \n  **Which is useful when updating Preload-Scripts.**\n\n## Configuration\n\n###### `electron(config: Configuration)`\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003cth\u003eKey\u003c/th\u003e\n    \u003cth\u003eType\u003c/th\u003e\n    \u003cth\u003eDescription\u003c/th\u003e\n    \u003cth\u003eRequired\u003c/th\u003e\n    \u003cth\u003eDefault\u003c/th\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003einclude\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eArray\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\n        \u003ccode\u003edirectory\u003c/code\u003e or \u003ccode\u003efilename\u003c/code\u003e or \u003ccode\u003eglob\u003c/code\u003e Array.\u003cbr/\u003e\n        Must be a relative path, which will be calculated based on the \u003ccode\u003eroot\u003c/code\u003e.\u003cbr/\u003e\n        If it is an absolute path, it can only be a subpath of root.\u003cbr/\u003e\n        Otherwise it will cause the output file path to be calculated incorrectly.\u003cbr/\u003e\n      \u003c/td\u003e\n      \u003ctd\u003e✅\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eroot\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eprocess.cwd()\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eoutDir\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003estring\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eOutput Directory.\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003edist-electron\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eapi\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eRecord\u0026lt;string, any\u0026gt;\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eUseful if you want to pass some payload to the plugin.\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eplugins\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003ePlugin[]\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eSee the Plugin API.\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003elogger\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e{ [type: string], (...message: string[]) =\u003e void }\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCustom log. If \u003ccode\u003elogger\u003c/code\u003e is passed, all logs will be input this option\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003etransformOptions\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eimport('esbuild').TransformOptions\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eOptions of \u003ccode\u003eesbuild.transform()\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003ewatch\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003eimport('chokidar').WatchOptions\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eOptions of \u003ccode\u003echokidar.watch()\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Plugin API\n\n\u003e The design of plugin is similar to [Vite's plugin](https://vitejs.dev/guide/api-plugin.html). But simpler, only 4 hooks in total.\n\n#### `configResolved`\n\n- **Type**: `(config: ResolvedConfig) =\u003e void | Promise\u003cvoid\u003e`\n- **Kind**: `async`, `sequential`\n\nYou can freely modify the `config` argument in ths hooks or use.\n\n#### `onwatch` \u003csub\u003e\u003csup\u003eserve only\u003c/sup\u003e\u003c/sub\u003e\n\n- **Type**: `(envet: 'add' | 'change' | 'addDir' | 'unlink' | 'unlinkDir', path: string) =\u003e void`\n- **Kind**: `async`, `parallel`\n\nTriggered by `include` file changes. You can emit some files in this hooks. Even restart the Electron App.\n\n#### `transform`\n\n- **Type**: `(args: { filename: string, code: string, done: () =\u003e void }) =\u003e string | import('esbuild').TransformResult | void | Promise\u003cstring | import('esbuild').TransformResult | void\u003e`\n- **Kind**: `async`, `sequential`\n\nTriggered by changes in `extensions` files in include.\n\n#### `ondone`\n\n- **Type**: `(args: { filename: string, distname: string }) =\u003e void`\n- **Kind**: `async`, `parallel`\n\nTriggered when `transform()` ends or a file in `extensions` is removed.\n\n## Builtin Plugin\n\n```ts\nimport path from 'node:path'\nimport electron from 'vite-electron-plugin'\nimport {\n  alias,\n  copy,\n  dest,\n  esmodule,\n  customStart,\n  loadViteEnv,\n} from 'vite-electron-plugin/plugin'\n\nexport default {\n  plugins: [\n    electron({\n      plugins: [\n        alias([\n          // `replacement` is recommented to use absolute path, \n          // it will be automatically calculated as relative path.\n          { find: '@', replacement: path.join(__dirname, 'src') },\n        ]),\n\n        copy([\n          // filename, glob\n          { from: 'foo/*.ext', to: 'dest' },\n        ]),\n\n        // Dynamic change the build dist path.\n        dest((_from, to) =\u003e to?.replace('dist-electron', 'dist-other')),\n\n        customStart(({ startup }) =\u003e {\n          // If you want to control the launch of Electron App yourself.\n          startup()\n        }),\n\n        // Support use ESM npm-package in Electron-Main.  \n        esmodule({\n          // e.g. `execa`, `node-fetch`, `got`, etc.\n          include: ['execa', 'node-fetch', 'got'],\n        }),\n\n        // https://vitejs.dev/guide/env-and-mode.html#env-files\n        // Support use `import.meta.env.VITE_SOME_KEY` in Electron-Main\n        loadViteEnv(),\n      ],\n    }),\n  ],\n}\n```\n\n## JavaScript API\n\n```ts\nimport {\n  type Configuration,\n  type ResolvedConfig,\n  type Plugin,\n  build,\n  watch,\n  startup,\n  defineConfig,\n  default as electron,\n} from 'vite-electron-plugin'\n```\n\n**Example**\n\n```js\n// dev\nwatch({\n  include: [\n    // The Electron source codes directory\n    'electron',\n  ],\n  plugins: [\n    {\n      name: 'plugin-electron-startup',\n      ondone() {\n        // Startup Electron App\n        startup()\n      },\n    },\n  ],\n})\n\n// build\nbuild({\n  include: ['electron'],\n})\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaoxiemeihao%2Fvite-electron-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcaoxiemeihao%2Fvite-electron-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcaoxiemeihao%2Fvite-electron-plugin/lists"}