chore: update comments

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 4.5.0 to 5.0.4.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/main/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v5.0.4/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,5 +1,6 @@
 ---
-name: Bug_Report
+
+name: 🐞 Bug report
 about: Create a report to help us improve
 title: "[Bug] the title of bug report"
 labels: bug
@@ -7,23 +8,4 @@ assignees: ''
 
 ---
 
-#### What did I do
-
-Something you have done.
-
-#### What happened
-
-Get an error.
-
-#### Expected
-
-What is the expected result.
-
-#### Environment
-
-- OS: OS version, e.g. macOS Big Sur 11.1
-- electron-vue-vite version (or commit hash), e.g. v1.0.0
-
-#### More detail
-
-More detail like screenshot
+#### Describe the bug

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,24 +0,0 @@
----
-name: Feature_Want
-about: Suggest an idea for electron-vue-vite
-title: "[Feature] the title of Feature_Want report"
-labels: feature
-assignees: ''
-
----
-
-#### Motivation
-
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-#### Detailed design
-
-Describe the solution you'd like, a clear and concise description of what you want to happen.
-
-#### Alternatives
-
-Describe alternatives you've considered, what other designs have been considered? What is the impact of not doing this?
-
-#### More detail (optional)
-
-Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/help_wanted.md

@@ -1,16 +1,10 @@
 ---
-name: Help_Wanted
+name: 🥺 Help wanted
 about: Confuse about the use of electron-vue-vite
-title: "[Help] the title of Help_Want report"
+title: "[Help] the title of help wanted report"
 labels: help wanted
 assignees: ''
 
 ---
 
-#### Describe the problem you Confuse
-
-A clear and concise description of what you are confusing about.
-
-#### More detail (optional)
-
-Add any other context or screenshots.
+#### Describe the problem you confuse

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,25 +1,12 @@
-### PR Checklist
+<!-- Thank you for contributing! -->
 
-#### What is the current behavior?
+### Description
 
-Please describe the current behavior and link to a relevant issue.
+<!-- Please insert your description here and provide especially info about the "what" this PR is solving -->
 
-#### Issue Number
+### What is the purpose of this pull request? <!-- (put an "X" next to an item) -->
 
-Example: \#123
-
-#### What is the new behavior?
-
-Please describe the new behavior or provide screenshots.
-
-#### Does this PR introduce a breaking change?
-<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. -->
-
-- [ ] Yes
-- [ ] No
-
-#### Specific Instructions
-
-Are there any specific instructions or things that should be known prior to review?
-
-#### Other information
+- [ ] Bug fix
+- [ ] New Feature
+- [ ] Documentation update
+- [ ] Other

.github/workflows/build.yml

@@ -0,0 +1,47 @@
+name: Build
+
+on:
+  push:
+    branches: [main]
+    paths-ignore:
+      - "**.md"
+      - "**.spec.js"
+      - ".idea"
+      - ".vscode"
+      - ".dockerignore"
+      - "Dockerfile"
+      - ".gitignore"
+      - ".github/**"
+      - "!.github/workflows/build.yml"
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+
+    strategy:
+      matrix:
+        os: [macos-latest, ubuntu-latest, windows-latest]
+
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build Release Files
+        run: npm run build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Upload Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: release_on_${{ matrix. os }}
+          path: release/
+          retention-days: 5

.github/workflows/ci.yml

@@ -0,0 +1,81 @@
+name: CI
+
+on:
+  pull_request_target:
+    branches:
+      - main
+
+permissions:
+  pull-requests: write
+
+jobs:
+  job1:
+    name: Check Not Allowed File Changes
+    runs-on: ubuntu-latest
+    outputs:
+      markdown_change: ${{ steps.filter_markdown.outputs.change }}
+      markdown_files: ${{ steps.filter_markdown.outputs.change_files }}
+    steps:
+
+      - name: Check Not Allowed File Changes
+        uses: dorny/paths-filter@v2
+        id: filter_not_allowed
+        with:
+          list-files: json
+          filters: |
+            change:
+              - 'package-lock.json'
+              - 'yarn.lock'
+              - 'pnpm-lock.yaml'
+
+      # ref: https://github.com/github/docs/blob/main/.github/workflows/triage-unallowed-contributions.yml
+      - name: Comment About Changes We Can't Accept
+        if: ${{ steps.filter_not_allowed.outputs.change == 'true' }}
+        uses: actions/github-script@v6
+        with:
+          script: |
+            let workflowFailMessage = "It looks like you've modified some files that we can't accept as contributions."
+            try {
+              const badFilesArr = [
+                'package-lock.json',
+                'yarn.lock',
+                'pnpm-lock.yaml',
+              ]
+              const badFiles = badFilesArr.join('\n- ')
+              const reviewMessage = `👋 Hey there spelunker. It looks like you've modified some files that we can't accept as contributions. The complete list of files we can't accept are:\n- ${badFiles}\n\nYou'll need to revert all of the files you changed in that list using [GitHub Desktop](https://docs.github.com/en/free-pro-team@latest/desktop/contributing-and-collaborating-using-github-desktop/managing-commits/reverting-a-commit) or \`git checkout origin/main <file name>\`. Once you get those files reverted, we can continue with the review process. :octocat:\n\nMore discussion:\n- https://github.com/electron-vite/electron-vite-vue/issues/192`
+              createdComment = await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.payload.number,
+                body: reviewMessage,
+              })
+              workflowFailMessage = `${workflowFailMessage} Please see ${createdComment.data.html_url} for details.`
+            } catch(err) {
+              console.log("Error creating comment.", err)
+            }
+            core.setFailed(workflowFailMessage)
+
+      - name: Check Not Linted Markdown
+        if: ${{ always() }}
+        uses: dorny/paths-filter@v2
+        id: filter_markdown
+        with:
+          list-files: shell
+          filters: |
+            change:
+              - added|modified: '*.md'
+
+
+  job2:
+    name: Lint Markdown
+    runs-on: ubuntu-latest
+    needs: job1
+    if: ${{ always() && needs.job1.outputs.markdown_change == 'true' }}
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+
+      - name: Lint markdown
+        run: npx markdownlint-cli ${{ needs.job1.outputs.markdown_files }} --ignore node_modules

.github/workflows/release.yml

@@ -1,77 +0,0 @@
-name: Release
-
-on:
-  push:
-  release:
-    branches: [main]
-    types:
-      - published
-    paths-ignore:
-      - "**.md"
-      - "**.spec.js"
-      - ".idea"
-      - ".vscode"
-      - ".dockerignore"
-      - "Dockerfile"
-      - ".gitignore"
-      - ".github/**"
-      - "!.github/workflows/release.yml"
-
-defaults:
-  run:
-    shell: "bash"
-
-jobs:
-  build:
-    # see more environment https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions#jobsjob_idruns-on
-    runs-on: [ubuntu-20.04]
-    # https://www.electron.build/multi-platform-build#provided-docker-images
-    container: electronuserland/builder:wine
-
-    env:
-      GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      ELECTRON_BUILDER_CACHE: "/root/.cache/electron-builder"
-      ELECTRON_CACHE: "/root/.cache/electron"
-
-    strategy:
-      matrix:
-        node: ["14"]
-
-    steps:
-      - uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
-
-      - name: Use Node.js ${{ matrix.node }}
-        uses: actions/setup-node@v2
-        with:
-          node-version: ${{ matrix.node }}
-
-      - name: Install dependencies
-        run: npm ci
-
-      # - name: Run tests
-      #   run: npm run test
-
-      # - name: Build dependencies
-      #   run: npm run build
-      #   env:
-      #     GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      # - uses: actions/upload-artifact@v2
-      #   with:
-      #     name: upload-artifact
-      #     path: |
-      #       release/electron-vue-vite*.exe
-      #       release/electron-vue-vite*.AppImage
-      #       release/electron-vue-vite*.snap
-
-      # https://github.com/marketplace/actions/electron-builder-action
-      - name: Compile & Release Electron app
-        uses: samuelmeuli/action-electron-builder@v1
-        with:
-          build_script_name: prebuild
-          args: --config electron-builder.json5
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          release: ${{ startsWith(github.ref, 'refs/tags/v') && github.event_name == 'push' && needs.get_metadata.outputs.branch == 'main'}}
-          max_attempts: 3

.gitignore

@@ -1,10 +1,30 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
-.DS_Store
 dist
 dist-ssr
-*.local
-.debug.env
-
-tmp
-**/.tmp
+dist-electron
 release
+*.local
+
+# Editor directories and files
+.vscode/.debug.env
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# lockfile
+package-lock.json
+pnpm-lock.yaml
+yarn.lock

.npmrc

@@ -0,0 +1,6 @@
+# For electron-builder
+# https://github.com/electron-userland/electron-builder/issues/6289#issuecomment-1042620422
+shamefully-hoist=true
+
+# For China 🇨🇳 developers
+# electron_mirror=https://npmmirror.com/mirrors/electron/

.simple-git-hooks.cjs

@@ -1,3 +0,0 @@
-module.exports = {
-  // "pre-commit": "npx nano-staged",
-};

.vscode/.debug.script.mjs

@@ -1,14 +1,23 @@
-import fs from 'fs'
-import path from 'path'
-import { fileURLToPath } from 'url'
-import { createRequire } from 'module'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { createRequire } from 'node:module'
+import { spawn } from 'node:child_process'
 
 const pkg = createRequire(import.meta.url)('../package.json')
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
 // write .debug.env
-const envContent = Object.entries(pkg.env).map(([key, val]) => `${key}=${val}`)
+const envContent = Object.entries(pkg.debug.env).map(([key, val]) => `${key}=${val}`)
 fs.writeFileSync(path.join(__dirname, '.debug.env'), envContent.join('\n'))
 
 // bootstrap
-import('../scripts/watch.mjs?debug=vscode')
+spawn(
+  // TODO: terminate `npm run dev` when Debug exits.
+  process.platform === 'win32' ? 'npm.cmd' : 'npm',
+  ['run', 'dev'],
+  {
+    stdio: 'inherit',
+    env: Object.assign(process.env, { VSCODE_DEBUG: 'true' }),
+  },
+)

.vscode/launch.json

@@ -6,7 +6,7 @@
   "compounds": [
     {
       "name": "Debug App",
-      "preLaunchTask": "start .debug.script.mjs",
+      "preLaunchTask": "Before Debug",
       "configurations": [
         "Debug Main Process",
         "Debug Renderer Process"
@@ -22,7 +22,7 @@
   "configurations": [
     {
       "name": "Debug Main Process",
-      "type": "pwa-node",
+      "type": "node",
       "request": "launch",
       "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
       "windows": {
@@ -30,15 +30,24 @@
       },
       "runtimeArgs": [
         "--remote-debugging-port=9229",
-        "${workspaceRoot}/dist/main/index.cjs"
+        "."
       ],
-      "envFile": "${workspaceFolder}/.vscode/.debug.env"
+      "envFile": "${workspaceFolder}/.vscode/.debug.env",
+      "console": "integratedTerminal"
     },
     {
       "name": "Debug Renderer Process",
       "port": 9229,
       "request": "attach",
-      "type": "pwa-chrome"
+      "type": "chrome",
+      "timeout": 60000,
+      "skipFiles": [
+        "<node_internals>/**",
+        "${workspaceRoot}/node_modules/**",
+        "${workspaceRoot}/dist-electron/**",
+        // Skip files in host(VITE_DEV_SERVER_URL)
+        "http://127.0.0.1:3344/**"
+      ]
     },
   ]
 }

.vscode/settings.json

@@ -1,4 +1,13 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
-  "typescript.enablePromptUseWorkspaceTsdk": true,
-}
+  "typescript.tsc.autoDetect": "off",
+  "json.schemas": [
+    {
+      "fileMatch": [
+        "/*electron-builder.json5",
+        "/*electron-builder.json"
+      ],
+      "url": "https://json.schemastore.org/electron-builder"
+    }
+  ]
+}

.vscode/tasks.json

@@ -4,11 +4,28 @@
   "version": "2.0.0",
   "tasks": [
     {
-      "label": "start .debug.script.mjs",
+      "label": "Before Debug",
       "type": "shell",
       "command": "node .vscode/.debug.script.mjs",
       "isBackground": true,
-      "problemMatcher": []
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": "relative",
+        "pattern": {
+          // TODO: correct "regexp"
+          "regexp": "^([a-zA-Z]\\:\/?([\\w\\-]\/?)+\\.\\w+):(\\d+):(\\d+): (ERROR|WARNING)\\: (.*)$",
+          "file": 1,
+          "line": 3,
+          "column": 4,
+          "code": 5,
+          "message": 6
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": "^.*VITE v.*  ready in \\d* ms.*$",
+          "endsPattern": "^.*\\[startup\\] Electron App.*$"
+        }
+      }
     }
   ]
 }

CHANGELOG.md

@@ -1,9 +1,29 @@
+## 2022-10-03
 
-## 22-01-27
+[v2.1.0](https://github.com/electron-vite/electron-vite-vue/pull/267)
+
+- `vite-electron-plugin` is Fast, and WYSIWYG. 🌱
+- last-commit: db2e830 v2.1.0: use `vite-electron-plugin` instead `vite-plugin-electron`
+
+## 2022-06-04
+
+[v2.0.0](https://github.com/electron-vite/electron-vite-vue/pull/156)
+
+- 🖖 Based on the `vue-ts` template created by `npm create vite`, integrate `vite-plugin-electron`
+- ⚡️ More simplify, is in line with Vite project structure
+- last-commit: a15028a (HEAD -> main) feat: hoist `process.env`
+
+## 2022-01-30
+
+[v1.0.0](https://github.com/electron-vite/electron-vite-vue/releases/tag/v1.0.0)
+
+- ⚡️ Main、Renderer、preload, all built with vite
+
+## 2022-01-27
 - Refactor the scripts part.
 - Remove `configs` directory.
 
-## 21-11-11
+## 2021-11-11
 - Refactor the project. Use vite.config.ts build `Main-process`, `Preload-script` and `Renderer-process` alternative rollup.
 - Scenic `Vue>=3.2.13`, `@vue/compiler-sfc` is no longer necessary.
 - If you prefer Rollup, Use rollup branch.

Dockerfile

@@ -1,24 +0,0 @@
-# use the version that corresponds to your electron version
-FROM node:14.16
-
-LABEL NAME="electron-wrapper"
-LABEL RUN="docker run --rm -it electron-wrapper bash"
-
-# install electron dependencies or more if your library has other dependencies
-RUN apt-get update && apt-get install \
-    git libx11-xcb1 libxcb-dri3-0 libxtst6 libnss3 libatk-bridge2.0-0 libgtk-3-0 libxss1 libasound2 \
-    -yq --no-install-suggests --no-install-recommends \
-    && apt-get clean && rm -rf /var/lib/apt/lists/*
-
-# copy the source into /app
-WORKDIR /app
-COPY . .
-RUN chown -R node /app
-
-# install node modules and perform an electron rebuild
-USER node
-RUN npm install
-RUN npm run build
-
-USER node
-CMD bash

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 草鞋没号
+Copyright (c) 2023 草鞋没号
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,74 +1,79 @@
 # electron-vite-vue
 
-[![awesome-vite](https://awesome.re/mentioned-badge.svg)](https://github.com/vitejs/awesome-vite)
-[![Netlify Status](https://api.netlify.com/api/v1/badges/ae3863e3-1aec-4eb1-8f9f-1890af56929d/deploy-status)](https://app.netlify.com/sites/electron-vite/deploys)
-![GitHub license](https://img.shields.io/github/license/caoxiemeihao/electron-vite-vue?style=flat)
-![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/electron-vite-vue?color=fa6470&style=flat)
-![GitHub forks](https://img.shields.io/github/forks/caoxiemeihao/electron-vite-vue?style=flat)
+🥳 Really simple `Electron` + `Vue` + `Vite` boilerplate.
 
+<!-- [![awesome-vite](https://awesome.re/mentioned-badge.svg)](https://github.com/vitejs/awesome-vite) -->
+<!-- [![Netlify Status](https://api.netlify.com/api/v1/badges/ae3863e3-1aec-4eb1-8f9f-1890af56929d/deploy-status)](https://app.netlify.com/sites/electron-vite/deploys) -->
+<!-- [![GitHub license](https://img.shields.io/github/license/caoxiemeihao/electron-vite-vue)](https://github.com/electron-vite/electron-vite-vue/blob/main/LICENSE) -->
+<!-- [![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/electron-vite-vue?color=fa6470)](https://github.com/electron-vite/electron-vite-vue) -->
+<!-- [![GitHub forks](https://img.shields.io/github/forks/caoxiemeihao/electron-vite-vue)](https://github.com/electron-vite/electron-vite-vue) -->
+[![GitHub Build](https://github.com/electron-vite/electron-vite-vue/actions/workflows/build.yml/badge.svg)](https://github.com/electron-vite/electron-vite-vue/actions/workflows/build.yml)
+[![GitHub Discord](https://img.shields.io/badge/chat-discord-blue?logo=discord)](https://discord.gg/sRqjYpEAUK)
 
-**English | [简体中文](README.zh-CN.md)**
-
-🥳 Real simple `Electron` + `Vue` + `Vite` boilerplate.
-
-## Overview
+## Features
 
 📦 Out of the box  
-💪 Support C/C++ addons  
-🔩 Support Use Electron、Node.js API in Renderer-process  
-🌱 Simple directory structure，real flexible  
+🎯 Based on the official [template-vue-ts](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-vue-ts), less invasive  
+🌱 Extensible, really simple directory structure  
+💪 Support using Node.js API in Electron-Renderer  
+🔩 Support C/C++ native addons  
 🖥 It's easy to implement multiple windows  
 
-## Quick Start
+## Quick Setup
 
 ```sh
-npm create electron-vite
+# clone the project
+git clone https://github.com/electron-vite/electron-vite-vue.git
+
+# enter the project directory
+cd electron-vite-vue
+
+# install dependency
+npm install
+
+# develop
+npm run dev
 ```
 
-<!-- [![quick-start](https://asciinema.org/a/483731.svg)](https://asciinema.org/a/483731) -->
-
-![electron-vite-vue.gif](https://github.com/electron-vite/electron-vite-vue/blob/main/packages/renderer/public/electron-vite-vue.gif?raw=true)
-
 ## Debug
 
-![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/packages/renderer/public/electron-vite-react-debug.gif?raw=true)
+![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/electron-vite-react-debug.gif?raw=true)
 
 ## Directory
 
-A `dist` folder will be generated everytime when `dev` or `build` command is executed. File structure of `dist` is identical to the `packages` directory to avoid any potential path calculation errors.
-
-```tree
-├── dist                      Will be generated following the structure of "packages" directory
-|   ├── main
-|   ├── preload
-|   └── renderer
-|
-├── scripts
-|   ├── build.mjs             Build script -> npm run build
-|   └── watch.mjs             Develop script -> npm run dev
-|
-├── packages
-|   ├── main                  Main-process source code
-|   |   └── vite.config.ts
-|   ├── preload               Preload-script source code
-|   |   └── vite.config.ts
-|   └── renderer              Renderer-process source code
-|       └── vite.config.ts
+```diff
++ ├─┬ electron
++ │ ├─┬ main
++ │ │ └── index.ts    entry of Electron-Main
++ │ └─┬ preload
++ │   └── index.ts    entry of Preload-Scripts
+  ├─┬ src
+  │ └── main.ts       entry of Electron-Renderer
+  ├── index.html
+  ├── package.json
+  └── vite.config.ts
 ```
 
-## List the modules you may use as far as possible
+<!--
+## Be aware
 
-Used in `Main-process` 👉 [electron-vite-boilerplate](https://github.com/caoxiemeihao/electron-vite-boilerplate)
+🚨 By default, this template integrates Node.js in the Renderer process. If you don't need it, you just remove the option below. [Because it will modify the default config of Vite](https://github.com/electron-vite/vite-plugin-electron-renderer#config-presets-opinionated).
 
-Used in `Renderer-process` 👉 [electron-vite-boilerplate/tree/nodeIntegration](https://github.com/caoxiemeihao/electron-vite-boilerplate/tree/nodeIntegration)
+```diff
+# vite.config.ts
 
-**ES Modules**
+export default {
+  plugins: [
+-   // Use Node.js API in the Renderer-process
+-   renderer({
+-     nodeIntegration: true,
+-   }),
+  ],
+}
+```
+-->
 
-- [execa](https://www.npmjs.com/package/execa)
-- [node-fetch](https://www.npmjs.com/package/node-fetch)
-- [file-type](https://www.npmjs.com/package/file-type)
+## FAQ
 
-**Native Addons(C/C++)**
-
-- [sqlite3](https://www.npmjs.com/package/sqlite3)
-- [serialport](https://www.npmjs.com/package/serialport)
+- [C/C++ addons, Node.js modules - Pre-Bundling](https://github.com/electron-vite/vite-plugin-electron-renderer#dependency-pre-bundling)
+- [dependencies vs devDependencies](https://github.com/electron-vite/vite-plugin-electron-renderer#dependencies-vs-devdependencies)

README.zh-CN.md

@@ -1,71 +0,0 @@
-# electron-vite-vue
-
-[![awesome-vite](https://awesome.re/mentioned-badge.svg)](https://github.com/vitejs/awesome-vite)
-![GitHub license](https://img.shields.io/github/license/caoxiemeihao/electron-vite-vue?style=flat)
-![GitHub stars](https://img.shields.io/github/stars/caoxiemeihao/electron-vite-vue?color=fa6470&style=flat)
-![GitHub forks](https://img.shields.io/github/forks/caoxiemeihao/electron-vite-vue?style=flat)
-
-
-**[English](README.md) | 简体中文**
-
-🥳 Electron + Vite + Vue 整合模板 -- **结构简单，容易上手！**
-
-## 概述
-
-📦 开箱即用  
-💪 支持 C/C++ 模块  
-🔩 支持在渲染进程中使用 Electron、Node.js API  
-🌱 结构清晰，可塑性强  
-🖥 很容易实现多窗口  
-
-## 快速开始
-
-```sh
-npm create electron-vite
-```
-
-<!-- [![quick-start](https://asciinema.org/a/483731.svg)](https://asciinema.org/a/483731) -->
-
-![electron-vite-vue.gif](https://github.com/electron-vite/electron-vite-vue/blob/main/packages/renderer/public/electron-vite-vue.gif?raw=true)
-
-## 调试
-
-![electron-vite-react-debug.gif](https://github.com/electron-vite/electron-vite-react/blob/main/packages/renderer/public/electron-vite-react-debug.gif?raw=true)
-
-## 目录结构
-
-```tree
-├── dist                      构建后，根据 packages 目录生成
-|   ├── main
-|   ├── preload
-|   └── renderer
-|
-├── scripts
-|   ├── build.mjs             项目开发脚本 npm run build
-|   └── watch.mjs             项目开发脚本 npm run dev
-|
-├── packages
-|   ├── main                  主进程源码
-|   |   └── vite.config.ts
-|   ├── preload               预加载脚本源码
-|   |   └── vite.config.ts
-|   └── renderer              渲染进程源码
-|       └── vite.config.ts
-```
-
-## 一些常见的案例
-
-在 Main-process 中使用 👉 [electron-vite-boilerplate](https://github.com/caoxiemeihao/electron-vite-boilerplate)
-
-在 Renderer-process 中使用 👉 [electron-vite-boilerplate/tree/nodeIntegration](https://github.com/caoxiemeihao/electron-vite-boilerplate/tree/nodeIntegration)
-
-**ES Modules**
-
-- [execa](https://www.npmjs.com/package/execa)
-- [node-fetch](https://www.npmjs.com/package/node-fetch)
-- [file-type](https://www.npmjs.com/package/file-type)
-
-**Native Addons(C/C++)**
-
-- [sqlite3](https://www.npmjs.com/package/sqlite3)
-- [serialport](https://www.npmjs.com/package/serialport)

electron-builder.json5

@@ -2,19 +2,22 @@
  * @see https://www.electron.build/configuration/configuration
  */
 {
+  "$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"
+    "dist",
+    "dist-electron"
   ],
   "mac": {
-    "artifactName": "${productName}_${version}.${ext}",
     "target": [
       "dmg"
-    ]
+    ],
+    "artifactName": "${productName}-Mac-${version}-Installer.${ext}"
   },
   "win": {
     "target": [
@@ -25,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

@@ -0,0 +1,11 @@
+/// <reference types="vite-plugin-electron/electron-env" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    VSCODE_DEBUG?: 'true'
+    DIST_ELECTRON: string
+    DIST: string
+    /** /dist/ or /public/ */
+    VITE_PUBLIC: string
+  }
+}

electron/main/index.ts

@@ -0,0 +1,122 @@
+import { app, BrowserWindow, shell, ipcMain } from 'electron'
+import { release } from 'node:os'
+import { join, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = dirname(__filename)
+
+// The built directory structure
+//
+// ├─┬ dist-electron
+// │ ├─┬ main
+// │ │ └── index.js    > Electron-Main
+// │ └─┬ preload
+// │   └── index.mjs    > Preload-Scripts
+// ├─┬ dist
+// │ └── index.html    > Electron-Renderer
+//
+process.env.DIST_ELECTRON = join(__dirname, '..')
+process.env.DIST = join(process.env.DIST_ELECTRON, '../dist')
+process.env.VITE_PUBLIC = process.env.VITE_DEV_SERVER_URL
+  ? join(process.env.DIST_ELECTRON, '../public')
+  : process.env.DIST
+
+// 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()) {
+  app.quit()
+  process.exit(0)
+}
+
+// Remove electron security warnings
+// This warning only shows in development mode
+// Read more on https://www.electronjs.org/docs/latest/tutorial/security
+// process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
+
+let win: BrowserWindow | null = null
+// Here, you can also use other preload
+const preload = join(__dirname, '../preload/index.mjs')
+const url = process.env.VITE_DEV_SERVER_URL
+const indexHtml = join(process.env.DIST, 'index.html')
+
+async function createWindow() {
+  win = new BrowserWindow({
+    title: 'Main window',
+    icon: join(process.env.VITE_PUBLIC, 'favicon.ico'),
+    webPreferences: {
+      preload,
+      // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
+      // nodeIntegration: true,
+
+      // Consider using contextBridge.exposeInMainWorld
+      // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
+      // contextIsolation: false,
+    },
+  })
+
+  if (process.env.VITE_DEV_SERVER_URL) { // electron-vite-vue#298
+    win.loadURL(url)
+    // Open devTool if the app is not packaged
+    win.webContents.openDevTools()
+  } else {
+    win.loadFile(indexHtml)
+  }
+
+  // Test actively push message to the Electron-Renderer
+  win.webContents.on('did-finish-load', () => {
+    win?.webContents.send('main-process-message', new Date().toLocaleString())
+  })
+
+  // Make all links open with the browser, not with the application
+  win.webContents.setWindowOpenHandler(({ url }) => {
+    if (url.startsWith('https:')) shell.openExternal(url)
+    return { action: 'deny' }
+  })
+  // win.webContents.on('will-navigate', (event, url) => { }) #344
+}
+
+app.whenReady().then(createWindow)
+
+app.on('window-all-closed', () => {
+  win = null
+  if (process.platform !== 'darwin') app.quit()
+})
+
+app.on('second-instance', () => {
+  if (win) {
+    // Focus on the main window if the user tried to open another
+    if (win.isMinimized()) win.restore()
+    win.focus()
+  }
+})
+
+app.on('activate', () => {
+  const allWindows = BrowserWindow.getAllWindows()
+  if (allWindows.length) {
+    allWindows[0].focus()
+  } else {
+    createWindow()
+  }
+})
+
+// New window example arg: new windows url
+ipcMain.handle('open-win', (_, arg) => {
+  const childWindow = new BrowserWindow({
+    webPreferences: {
+      preload,
+      nodeIntegration: true,
+      contextIsolation: false,
+    },
+  })
+
+  if (process.env.VITE_DEV_SERVER_URL) {
+    childWindow.loadURL(`${url}#${arg}`)
+  } else {
+    childWindow.loadFile(indexHtml, { hash: arg })
+  }
+})

electron/preload/index.ts

@@ -0,0 +1,117 @@
+import { ipcRenderer, contextBridge } 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)) {
+      resolve(true)
+    } else {
+      document.addEventListener('readystatechange', () => {
+        if (condition.includes(document.readyState)) {
+          resolve(true)
+        }
+      })
+    }
+  })
+}
+
+const safeDOM = {
+  append(parent: HTMLElement, child: HTMLElement) {
+    if (!Array.from(parent.children).find(e => e === child)) {
+      return parent.appendChild(child)
+    }
+  },
+  remove(parent: HTMLElement, child: HTMLElement) {
+    if (Array.from(parent.children).find(e => e === child)) {
+      return parent.removeChild(child)
+    }
+  },
+}
+
+/**
+ * https://tobiasahlin.com/spinkit
+ * https://connoratherton.com/loaders
+ * https://projects.lukehaas.me/css-loaders
+ * https://matejkustec.github.io/SpinThatShit
+ */
+function useLoading() {
+  const className = `loaders-css__square-spin`
+  const styleContent = `
+@keyframes square-spin {
+  25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
+  50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
+  75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
+  100% { transform: perspective(100px) rotateX(0) rotateY(0); }
+}
+.${className} > div {
+  animation-fill-mode: both;
+  width: 50px;
+  height: 50px;
+  background: #fff;
+  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
+}
+.app-loading-wrap {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #282c34;
+  z-index: 9;
+}
+    `
+  const oStyle = document.createElement('style')
+  const oDiv = document.createElement('div')
+
+  oStyle.id = 'app-loading-style'
+  oStyle.innerHTML = styleContent
+  oDiv.className = 'app-loading-wrap'
+  oDiv.innerHTML = `<div class="${className}"><div></div></div>`
+
+  return {
+    appendLoading() {
+      safeDOM.append(document.head, oStyle)
+      safeDOM.append(document.body, oDiv)
+    },
+    removeLoading() {
+      safeDOM.remove(document.head, oStyle)
+      safeDOM.remove(document.body, oDiv)
+    },
+  }
+}
+
+// ----------------------------------------------------------------------
+
+const { appendLoading, removeLoading } = useLoading()
+domReady().then(appendLoading)
+
+window.onmessage = (ev) => {
+  ev.data.payload === 'removeLoading' && removeLoading()
+}
+
+setTimeout(removeLoading, 4999)

index.html

@@ -2,10 +2,10 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
-    <title>Vite App</title>
+    <title>Electron + Vite + Vue</title>
   </head>
   <body>
     <div id="app"></div>

nano-staged.mjs

@@ -1,7 +0,0 @@
-export default {
-  // eslint
-  '*.{js,ts,tsx,vue}': 'eslint --cache --fix',
-  // typecheck
-  'packages/renderer/**/{*.ts,*.tsx,*.vue,tsconfig.json}': ({ filenames }) =>
-    'npm run typecheck',
-}

package.json

@@ -1,43 +1,39 @@
 {
   "name": "electron-vue-vite",
-  "version": "1.0.0",
-  "main": "dist/main/index.cjs",
+  "version": "28.0.0",
+  "main": "dist-electron/main/index.js",
+  "description": "Really simple Electron + Vue + Vite boilerplate.",
   "author": "草鞋没号 <308487730@qq.com>",
   "license": "MIT",
-  "scripts": {
-    "dev": "node scripts/watch.mjs",
-    "prebuild": "vue-tsc --noEmit --p packages/renderer/tsconfig.json && node scripts/build.mjs",
-    "build": "electron-builder",
-    "init": "git config core.hooksPath .git/hooks/ && rm -rf .git/hooks && npx simple-git-hooks",
-    "test:e2e": "npx playwright test",
-    "test:e2e:headless": "npx playwright test --headed"
-  },
-  "engines": {
-    "node": ">=14.17.0"
-  },
-  "devDependencies": {
-    "@playwright/test": "^1.22.2",
-    "@vitejs/plugin-vue": "^2.3.2",
-    "electron": "19.0.1",
-    "electron-builder": "^23.0.3",
-    "nano-staged": "^0.8.0",
-    "simple-git-hooks": "^2.8.0",
-    "typescript": "^4.7.2",
-    "vite": "^2.9.8",
-    "vite-plugin-electron": "^0.4.5",
-    "vite-plugin-resolve": "^2.1.2",
-    "vue": "^3.2.36",
-    "vue-tsc": "^0.35.2"
-  },
-  "env": {
-    "VITE_DEV_SERVER_HOST": "127.0.0.1",
-    "VITE_DEV_SERVER_PORT": 3344
-  },
+  "private": true,
   "keywords": [
     "electron",
     "rollup",
     "vite",
     "vue3",
     "vue"
-  ]
+  ],
+  "debug": {
+    "env": {
+      "VITE_DEV_SERVER_URL": "http://127.0.0.1:3344/"
+    }
+  },
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build && electron-builder",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.1",
+    "electron": "^28.1.0",
+    "electron-builder": "^24.9.1",
+    "tree-kill": "^1.2.2",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.10",
+    "vite-plugin-electron": "^0.28.0-beta.2",
+    "vite-plugin-electron-renderer": "^0.14.5",
+    "vue": "^3.4.1",
+    "vue-tsc": "^1.8.27"
+  }
 }

packages/main/index.ts

@@ -1,93 +0,0 @@
-import { app, BrowserWindow, shell,ipcMain } from 'electron'
-import { release } from 'os'
-import { join } from 'path'
-
-// 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()) {
-  app.quit()
-  process.exit(0)
-}
-process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
-
-let win: BrowserWindow | null = null
-
-async function createWindow() {
-  win = new BrowserWindow({
-    title: 'Main window',
-    webPreferences: {
-      preload: join(__dirname, '../preload/index.cjs'),
-      nodeIntegration: true,
-      contextIsolation: false,
-    },
-  })
-
-  if (app.isPackaged) {
-    win.loadFile(join(__dirname, '../renderer/index.html'))
-  } else {
-    // 🚧 Use ['ENV_NAME'] avoid vite:define plugin
-    const url = `http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV_SERVER_PORT']}`
-
-    win.loadURL(url)
-    // win.webContents.openDevTools()
-  }
-
-  // Test active push message to Renderer-process
-  win.webContents.on('did-finish-load', () => {
-    win?.webContents.send('main-process-message', new Date().toLocaleString())
-  })
-
-  // Make all links open with the browser, not with the application
-  win.webContents.setWindowOpenHandler(({ url }) => {
-    if (url.startsWith('https:')) shell.openExternal(url)
-    return { action: 'deny' }
-  })
-}
-
-app.whenReady().then(createWindow)
-
-app.on('window-all-closed', () => {
-  win = null
-  if (process.platform !== 'darwin') app.quit()
-})
-
-app.on('second-instance', () => {
-  if (win) {
-    // Focus on the main window if the user tried to open another
-    if (win.isMinimized()) win.restore()
-    win.focus()
-  }
-})
-
-app.on('activate', () => {
-  const allWindows = BrowserWindow.getAllWindows()
-  if (allWindows.length) {
-    allWindows[0].focus()
-  } else {
-    createWindow()
-  }
-})
-
-// new window example arg: new windows url
-ipcMain.handle("open-win", (event, arg) => {
-  const childWindow = new BrowserWindow({
-    webPreferences: {
-      preload: join(__dirname, "../preload/index.cjs"),
-    },
-  });
-
-  if (app.isPackaged) {
-    childWindow.loadFile(join(__dirname, `../renderer/index.html`), {
-      hash: `${arg}`,
-    })
-  } else {
-    // 🚧 Use ['ENV_NAME'] avoid vite:define plugin
-    const url = `http://${process.env["VITE_DEV_SERVER_HOST"]}:${process.env["VITE_DEV_SERVER_PORT"]}/#${arg}`
-    childWindow.loadURL(url);
-    // childWindow.webContents.openDevTools({ mode: "undocked", activate: true })
-  }
-});

packages/main/vite.config.ts

@@ -1,26 +0,0 @@
-import { builtinModules } from 'module'
-import { defineConfig } from 'vite'
-import pkg from '../../package.json'
-
-export default defineConfig({
-  root: __dirname,
-  build: {
-    outDir: '../../dist/main',
-    emptyOutDir: true,
-    minify: process.env./* from mode option */NODE_ENV === 'production',
-    sourcemap: true,
-    lib: {
-      entry: 'index.ts',
-      formats: ['cjs'],
-      fileName: () => '[name].cjs',
-    },
-    rollupOptions: {
-      external: [
-        'electron',
-        ...builtinModules,
-        // @ts-ignore
-        ...Object.keys(pkg.dependencies || {}),
-      ],
-    },
-  },
-})

packages/preload/index.ts

@@ -1,7 +0,0 @@
-import { domReady } from './utils'
-import { useLoading } from './loading'
-
-const { appendLoading, removeLoading } = useLoading()
-window.removeLoading = removeLoading
-
-domReady().then(appendLoading)

packages/preload/loading.ts

@@ -1,67 +0,0 @@
-/**
- * https://tobiasahlin.com/spinkit
- * https://connoratherton.com/loaders
- * https://projects.lukehaas.me/css-loaders
- * https://matejkustec.github.io/SpinThatShit
- */
-export function useLoading() {
-  const className = `loaders-css__square-spin`
-  const styleContent = `
-@keyframes square-spin {
-  25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
-  50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
-  75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
-  100% { transform: perspective(100px) rotateX(0) rotateY(0); }
-}
-.${className} > div {
-  animation-fill-mode: both;
-  width: 50px;
-  height: 50px;
-  background: #fff;
-  animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
-}
-.app-loading-wrap {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: #282c34;
-  z-index: 9;
-}
-    `
-  const oStyle = document.createElement('style')
-  const oDiv = document.createElement('div')
-
-  oStyle.id = 'app-loading-style'
-  oStyle.innerHTML = styleContent
-  oDiv.className = 'app-loading-wrap'
-  oDiv.innerHTML = `<div class="${className}"><div></div></div>`
-
-  return {
-    appendLoading() {
-      safe.append(document.head, oStyle)
-      safe.append(document.body, oDiv)
-    },
-    removeLoading() {
-      safe.remove(document.head, oStyle)
-      safe.remove(document.body, oDiv)
-    },
-  }
-}
-
-const safe = {
-  append(parent: HTMLElement, child: HTMLElement) {
-    if (!Array.from(parent.children).find(e => e === child)) {
-      return parent.appendChild(child)
-    }
-  },
-  remove(parent: HTMLElement, child: HTMLElement) {
-    if (Array.from(parent.children).find(e => e === child)) {
-      return parent.removeChild(child)
-    }
-  },
-}

packages/preload/utils.ts

@@ -1,15 +0,0 @@
-
-/** docoment ready */
-export function domReady(condition: DocumentReadyState[] = ['complete', 'interactive']) {
-  return new Promise(resolve => {
-    if (condition.includes(document.readyState)) {
-      resolve(true)
-    } else {
-      document.addEventListener('readystatechange', () => {
-        if (condition.includes(document.readyState)) {
-          resolve(true)
-        }
-      })
-    }
-  })
-}

packages/preload/vite.config.ts

@@ -1,32 +0,0 @@
-import { join } from 'path'
-import { builtinModules } from 'module'
-import { defineConfig } from 'vite'
-import pkg from '../../package.json'
-
-export default defineConfig({
-  root: __dirname,
-  build: {
-    outDir: '../../dist/preload',
-    emptyOutDir: true,
-    minify: process.env./* from mode option */NODE_ENV === 'production',
-    // https://github.com/caoxiemeihao/electron-vue-vite/issues/61
-    sourcemap: 'inline',
-    rollupOptions: {
-      input: {
-        // multiple entry
-        index: join(__dirname, 'index.ts'),
-      },
-      output: {
-        format: 'cjs',
-        entryFileNames: '[name].cjs',
-        manualChunks: {},
-      },
-      external: [
-        'electron',
-        ...builtinModules,
-        // @ts-ignore
-        ...Object.keys(pkg.dependencies || {}),
-      ],
-    },
-  },
-})

packages/renderer/src/App.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-// This starter template is using Vue 3 <script setup> SFCs
-// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-import HelloWorld from './components/HelloWorld.vue'
-</script>
-
-<template>
-  <div class="logo-box">
-    <img style="height:140px;" src="./assets/electron.png" >
-    <span/>
-    <img style="height:140px;" src="./assets/vite.svg" >
-    <span/>
-    <img style="height:140px;" src="./assets/vue.png" >
-  </div>
-  <HelloWorld msg="Hello Vue 3 + TypeScript + Vite" />
-  <div class="static-public">
-    Place static files into the <code>src/renderer/public</code> folder
-    <img style="width:90px;" :src="'./images/node.png'" >
-  </div>
-</template>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-
-.logo-box {
-  display: flex;
-  width: 100%;
-  justify-content: center;
-}
-
-.logo-box span {
-  width: 74px;
-}
-
-.static-public {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.static-public code {
-  background-color: #eee;
-  padding: 2px 4px;
-  margin: 0 4px;
-  border-radius: 4px;
-  color: #304455;
-}
-</style>

packages/renderer/src/assets/vite.svg

@@ -1,15 +0,0 @@
-<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
-<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
-<defs>
-<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
-<stop stop-color="#41D1FF"/>
-<stop offset="1" stop-color="#BD34FE"/>
-</linearGradient>
-<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFEA83"/>
-<stop offset="0.0833333" stop-color="#FFDD35"/>
-<stop offset="1" stop-color="#FFA800"/>
-</linearGradient>
-</defs>
-</svg>

packages/renderer/src/components/HelloWorld.vue

@@ -1,52 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-defineProps<{ msg: string }>()
-
-const count = ref(0)
-</script>
-
-<template>
-  <h1>{{ msg }}</h1>
-
-  <p>
-    Recommended IDE setup:
-    <a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
-    +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
-  </p>
-
-  <p>See <code>README.md</code> for more information.</p>
-
-  <p>
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">
-      Vite Docs
-    </a>
-    |
-    <a href="https://v3.vuejs.org/" target="_blank">Vue 3 Docs</a>
-  </p>
-
-  <button type="button" @click="count++">count is: {{ count }}</button>
-  <p>
-    Edit
-    <code>components/HelloWorld.vue</code> to test hot module replacement.
-  </p>
-</template>
-
-<style scoped>
-a {
-  color: #42b983;
-}
-
-label {
-  margin: 0 0.5em;
-  font-weight: bold;
-}
-
-code {
-  background-color: #eee;
-  padding: 2px 4px;
-  border-radius: 4px;
-  color: #304455;
-}
-</style>

packages/renderer/src/env.d.ts

@@ -1,8 +0,0 @@
-/// <reference types="vite/client" />
-
-declare module '*.vue' {
-  import { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
-  const component: DefineComponent<{}, {}, any>
-  export default component
-}

packages/renderer/src/global.d.ts

@@ -1,8 +0,0 @@
-
-export { }
-
-declare global {
-  interface Window {
-    removeLoading: () => void
-  }
-}

packages/renderer/src/main.ts

@@ -1,7 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import './samples/node-api'
-
-createApp(App)
-  .mount('#app')
-  .$nextTick(window.removeLoading)

packages/renderer/src/samples/node-api.ts

@@ -1,14 +0,0 @@
-import { lstat } from 'fs/promises'
-import { cwd } from 'process'
-import { ipcRenderer } from 'electron'
-
-// Usage of ipcRenderer.on
-ipcRenderer.on('main-process-message', (_event, ...args) => {
-  console.log('[Receive Main-process message]:', ...args)
-})
-
-lstat(cwd()).then(stats => {
-  console.log('[fs.lstat]', stats)
-}).catch(err => {
-  console.error(err)
-})

packages/renderer/tsconfig.json

@@ -1,16 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "target": "esnext",
-    "useDefineForClassFields": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "strict": true,
-    "jsx": "preserve",
-    "sourceMap": true,
-    "resolveJsonModule": true,
-    "esModuleInterop": true,
-    "lib": ["esnext", "dom"]
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
-}

packages/renderer/vite.config.ts

@@ -1,59 +0,0 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import resolve, { lib2esm } from 'vite-plugin-resolve'
-import electron from 'vite-plugin-electron/renderer'
-import pkg from '../../package.json'
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  mode: process.env.NODE_ENV,
-  root: __dirname,
-  plugins: [
-    vue(),
-    electron(),
-    resolve(
-      /**
-       * 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
-       */
-      {
-        // If you use the following modules, the following configuration will work
-        // What they have in common is that they will return - ESM format code snippets
-
-        // ESM format string
-        'electron-store': 'export default require("electron-store");',
-        // Use lib2esm() to easy to convert ESM
-        // Equivalent to
-        /**
-         * sqlite3: () => `
-         * const _M_ = require('sqlite3');
-         * const _D_ = _M_.default || _M_;
-         * export { _D_ as default }
-         * `
-         */
-        sqlite3: lib2esm('sqlite3', { format: 'cjs' }),
-        serialport: lib2esm(
-          // CJS lib name
-          'serialport',
-          // export memebers
-          [
-            'SerialPort',
-            'SerialPortMock',
-          ],
-          { format: 'cjs' },
-        ),
-      }
-    ),
-  ],
-  base: './',
-  build: {
-    outDir: '../../dist/renderer',
-    emptyOutDir: true,
-    sourcemap: true,
-  },
-  server: {
-    host: pkg.env.VITE_DEV_SERVER_HOST,
-    port: pkg.env.VITE_DEV_SERVER_PORT,
-  },
-})

playwright.config.ts

@@ -1,16 +0,0 @@
-import { PlaywrightTestConfig, devices } from '@playwright/test';
-
-const config: PlaywrightTestConfig = {
-  forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
-  use: {
-    trace: 'on-first-retry',
-  },
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-  ],
-};
-export default config;

public/logo.svg

@@ -0,0 +1,20 @@
+<svg width="534" height="534" viewBox="0 0 534 534" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M266.667 533.333C413.943 533.333 533.333 413.943 533.333 266.667C533.333 119.391 413.943 0 266.667 0C119.391 0 0 119.391 0 266.667C0 413.943 119.391 533.333 266.667 533.333Z" fill="url(#paint0_linear)"/>
+<path d="M408.012 291.99C443.487 250.081 455.873 207.931 438.835 178.423C426.3 156.708 399.798 145.244 364.575 144.785C363.115 144.788 361.715 145.364 360.677 146.39C359.639 147.417 359.046 148.81 359.027 150.27C359.008 151.729 359.565 153.138 360.576 154.191C361.587 155.243 362.972 155.856 364.431 155.896C396.108 156.308 418.942 166.185 429.215 183.979C443.365 208.49 432.319 246.077 399.531 284.81C399.05 285.366 398.684 286.011 398.454 286.709C398.224 287.408 398.135 288.144 398.192 288.877C398.249 289.61 398.45 290.324 398.785 290.978C399.12 291.632 399.581 292.214 400.142 292.689C400.703 293.163 401.352 293.522 402.053 293.744C402.753 293.966 403.491 294.047 404.223 293.982C404.955 293.917 405.667 293.708 406.317 293.366C406.968 293.023 407.544 292.556 408.012 291.99ZM316.844 149.958C284.769 156.831 250.627 170.269 217.84 189.198C136.71 236.037 83.7874 305.106 91.1374 355.187C91.2354 355.916 91.4771 356.618 91.8485 357.253C92.2198 357.888 92.7135 358.442 93.3008 358.885C93.8881 359.327 94.5574 359.649 95.2699 359.831C95.9824 360.013 96.7239 360.051 97.4515 359.944C98.179 359.837 98.8781 359.587 99.5082 359.208C100.138 358.829 100.687 358.329 101.122 357.736C101.558 357.144 101.871 356.47 102.044 355.756C102.217 355.041 102.247 354.299 102.131 353.573C95.6041 309.106 145.771 243.637 223.396 198.821C255.202 180.456 288.26 167.446 319.171 160.823C319.894 160.68 320.582 160.395 321.194 159.984C321.806 159.573 322.33 159.044 322.736 158.429C323.142 157.813 323.421 157.123 323.557 156.398C323.693 155.673 323.684 154.929 323.529 154.208C323.375 153.487 323.078 152.804 322.657 152.199C322.236 151.593 321.699 151.078 321.077 150.682C320.455 150.287 319.76 150.019 319.033 149.895C318.306 149.771 317.562 149.792 316.844 149.958V149.958Z" fill="#9feaf9"/>
+<path d="M211.933 148.108C157.756 138.242 114.919 148.569 97.8458 178.14C85.1062 200.206 88.7478 229.462 106.679 260.735C107.033 261.385 107.513 261.957 108.092 262.419C108.67 262.88 109.334 263.221 110.046 263.423C110.758 263.624 111.503 263.681 112.237 263.59C112.971 263.5 113.68 263.264 114.322 262.896C114.963 262.528 115.525 262.035 115.974 261.447C116.423 260.859 116.75 260.188 116.936 259.472C117.121 258.755 117.162 258.01 117.056 257.277C116.95 256.545 116.698 255.842 116.317 255.208C100.167 227.037 97.0228 201.79 107.469 183.696C121.652 159.131 159.86 149.919 209.942 159.04C211.381 159.279 212.856 158.943 214.05 158.104C215.243 157.265 216.059 155.99 216.32 154.555C216.582 153.119 216.268 151.639 215.448 150.433C214.627 149.227 213.364 148.392 211.933 148.108Z" fill="#9feaf9"/>
+<path d="M298.488 204.045L234.806 216.594C233.76 216.8 232.985 217.692 232.922 218.763L229.004 285.297C228.912 286.864 230.343 288.081 231.864 287.728L249.594 283.613C251.253 283.228 252.752 284.698 252.411 286.375L247.143 312.315C246.789 314.061 248.419 315.554 250.114 315.036L261.065 311.69C262.762 311.172 264.394 312.669 264.035 314.416L255.664 355.162C255.14 357.711 258.511 359.101 259.917 356.916L260.856 355.456L312.747 251.312C313.616 249.569 312.117 247.58 310.213 247.95L291.963 251.492C290.248 251.824 288.789 250.218 289.273 248.531L301.184 207.005C301.669 205.315 300.205 203.707 298.488 204.045Z" fill="url(#paint1_linear)"/>
+<path d="M217.677 364.14C185.219 345.402 156.758 322.821 134.852 298.748C134.358 298.209 133.975 297.577 133.725 296.89C133.475 296.202 133.363 295.472 133.396 294.742C133.429 294.011 133.606 293.294 133.917 292.632C134.228 291.97 134.666 291.375 135.207 290.883C135.748 290.391 136.381 290.01 137.07 289.763C137.758 289.516 138.489 289.407 139.219 289.443C139.95 289.479 140.666 289.658 141.327 289.972C141.988 290.285 142.581 290.726 143.071 291.269C164.185 314.473 191.746 336.34 223.233 354.519C298.527 397.99 378.002 409.51 414.906 384.348C415.508 383.922 416.189 383.619 416.91 383.459C417.63 383.299 418.375 383.284 419.101 383.414C419.827 383.545 420.52 383.819 421.139 384.22C421.758 384.622 422.291 385.142 422.707 385.752C423.123 386.362 423.413 387.048 423.56 387.771C423.708 388.494 423.71 389.239 423.567 389.963C423.424 390.686 423.137 391.374 422.725 391.986C422.313 392.598 421.783 393.122 421.167 393.527C379.933 421.642 296.267 409.515 217.677 364.14Z" fill="#9feaf9"/>
+<path d="M185.408 389.906C203.958 441.698 234.302 473.587 268.423 473.587C293.308 473.587 316.331 456.623 334.285 426.758C334.674 426.133 334.934 425.436 335.051 424.709C335.168 423.982 335.139 423.239 334.967 422.523C334.794 421.807 334.481 421.133 334.045 420.539C333.609 419.945 333.06 419.444 332.428 419.065C331.797 418.685 331.097 418.435 330.368 418.329C329.639 418.222 328.897 418.262 328.184 418.445C327.47 418.628 326.8 418.951 326.213 419.396C325.626 419.84 325.133 420.397 324.762 421.033C308.627 447.873 288.808 462.475 268.423 462.475C240.079 462.475 213.015 434.033 195.871 386.162C195.636 385.461 195.264 384.814 194.776 384.259C194.288 383.704 193.694 383.252 193.029 382.929C192.364 382.606 191.641 382.419 190.903 382.379C190.165 382.339 189.426 382.447 188.73 382.696C188.034 382.945 187.395 383.331 186.85 383.83C186.304 384.329 185.864 384.932 185.555 385.604C185.246 386.275 185.074 387.001 185.049 387.74C185.024 388.479 185.147 389.215 185.41 389.906H185.408ZM354.829 379.775C364.433 349.092 369.59 313.696 369.59 276.81C369.59 184.771 337.375 105.429 291.492 85.0562C290.151 84.4948 288.644 84.4809 287.294 85.0174C285.943 85.554 284.857 86.5983 284.267 87.9265C283.677 89.2546 283.631 90.761 284.139 92.1226C284.647 93.4842 285.668 94.5927 286.983 95.2104C327.906 113.383 358.477 188.681 358.477 276.81C358.477 312.596 353.483 346.873 344.227 376.456C343.997 377.156 343.908 377.894 343.966 378.628C344.024 379.362 344.227 380.077 344.564 380.732C344.901 381.387 345.364 381.968 345.928 382.442C346.491 382.917 347.143 383.274 347.846 383.494C348.549 383.714 349.288 383.792 350.021 383.724C350.754 383.655 351.467 383.442 352.117 383.096C352.767 382.75 353.341 382.278 353.807 381.708C354.273 381.138 354.621 380.481 354.831 379.775H354.829ZM459.462 374.333C459.462 359.648 447.558 347.744 432.873 347.744C418.187 347.744 406.283 359.648 406.283 374.333C406.283 389.019 418.187 400.923 432.873 400.923C447.558 400.923 459.462 389.019 459.462 374.333ZM448.352 374.333C448.352 376.366 447.952 378.379 447.174 380.257C446.396 382.135 445.256 383.841 443.818 385.279C442.381 386.716 440.674 387.856 438.796 388.634C436.918 389.412 434.906 389.812 432.873 389.812C430.84 389.812 428.827 389.412 426.949 388.634C425.071 387.856 423.365 386.716 421.927 385.279C420.49 383.841 419.35 382.135 418.572 380.257C417.794 378.379 417.394 376.366 417.394 374.333C417.394 370.228 419.025 366.291 421.927 363.388C424.83 360.485 428.768 358.854 432.873 358.854C436.978 358.854 440.915 360.485 443.818 363.388C446.721 366.291 448.352 370.228 448.352 374.333ZM103.59 400.923C118.277 400.923 130.181 389.019 130.181 374.333C130.181 359.648 118.275 347.744 103.59 347.744C88.9062 347.744 77 359.648 77 374.333C77 389.019 88.9062 400.923 103.59 400.923ZM103.59 389.812C99.4843 389.812 95.5471 388.182 92.6442 385.279C89.7413 382.376 88.1104 378.439 88.1104 374.333C88.1104 370.228 89.7413 366.291 92.6442 363.388C95.5471 360.485 99.4843 358.854 103.59 358.854C107.695 358.854 111.632 360.485 114.535 363.388C117.438 366.291 119.069 370.228 119.069 374.333C119.069 378.439 117.438 382.376 114.535 385.279C111.632 388.182 107.695 389.812 103.59 389.812Z" fill="#9feaf9"/>
+<path d="M268.423 112.179C283.108 112.179 295.013 100.275 295.013 85.5896C295.013 70.9042 283.108 59 268.423 59C253.738 59 241.833 70.9042 241.833 85.5896C241.833 100.275 253.738 112.179 268.423 112.179ZM268.423 101.069C264.318 101.069 260.38 99.4379 257.478 96.535C254.575 93.6321 252.944 89.6949 252.944 85.5896C252.944 81.4843 254.575 77.5471 257.478 74.6442C260.38 71.7413 264.318 70.1104 268.423 70.1104C272.528 70.1104 276.465 71.7413 279.368 74.6442C282.271 77.5471 283.902 81.4843 283.902 85.5896C283.902 89.6949 282.271 93.6321 279.368 96.535C276.465 99.4379 272.528 101.069 268.423 101.069Z" fill="#9feaf9"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>

scripts/build.mjs

@@ -1,5 +0,0 @@
-import { build } from 'vite'
-
-await build({ configFile: 'packages/main/vite.config.ts' })
-await build({ configFile: 'packages/preload/vite.config.ts' })
-await build({ configFile: 'packages/renderer/vite.config.ts' })

scripts/watch.mjs

@@ -1,98 +0,0 @@
-import { spawn } from 'child_process'
-import { createServer, build } from 'vite'
-import electron from 'electron'
-import readline from 'readline'
-
-const query = new URLSearchParams(import.meta.url.split('?')[1])
-const debug = query.has('debug')
-
-/** The log will display on the next screen */
-function clearConsole() {
-  const blank = '\n'.repeat(process.stdout.rows)
-  console.log(blank)
-  readline.cursorTo(process.stdout, 0, 0)
-  readline.clearScreenDown(process.stdout)
-}
-
-/**
- * @type {(server: import('vite').ViteDevServer) => Promise<import('rollup').RollupWatcher>}
- */
-function watchMain(server) {
-  /**
-   * @type {import('child_process').ChildProcessWithoutNullStreams | null}
-   */
-  let electronProcess = null
-  const address = server.httpServer.address()
-  const env = Object.assign(process.env, {
-    VITE_DEV_SERVER_HOST: address.address,
-    VITE_DEV_SERVER_PORT: address.port,
-  })
-
-  /**
-   * @type {import('vite').Plugin}
-   */
-  const startElectron = {
-    name: 'electron-main-watcher',
-    writeBundle() {
-      clearConsole()
-
-      if (electronProcess) {
-        electronProcess.removeAllListeners()
-        electronProcess.kill()
-      }
-
-      electronProcess = spawn(electron, ['.'], { env })
-      electronProcess.once('exit', process.exit)
-      // https://github.com/electron-vite/electron-vite-vue/pull/129
-      electronProcess.stdout.on('data', (data) => {
-        const str = data.toString().trim()
-        str && console.log(str)
-      })
-      electronProcess.stderr.on('data', (data) => {
-        const str = data.toString().trim()
-        str && console.error(str)
-      })
-    },
-  }
-
-  return build({
-    configFile: 'packages/main/vite.config.ts',
-    mode: 'development',
-    plugins: [!debug && startElectron].filter(Boolean),
-    build: {
-      watch: {},
-    },
-  })
-}
-
-/**
- * @type {(server: import('vite').ViteDevServer) => Promise<import('rollup').RollupWatcher>}
- */
-function watchPreload(server) {
-  return build({
-    configFile: 'packages/preload/vite.config.ts',
-    mode: 'development',
-    plugins: [{
-      name: 'electron-preload-watcher',
-      writeBundle() {
-        clearConsole()
-        server.ws.send({ type: 'full-reload' })
-      },
-    }],
-    build: {
-      watch: {},
-    },
-  })
-}
-
-// Block the CTRL + C shortcut on a Windows terminal and exit the application without displaying a query
-if (process.platform === 'win32') {
-  readline.createInterface({ input: process.stdin, output: process.stdout }).on('SIGINT', process.exit)
-}
-
-// bootstrap
-const server = await createServer({ configFile: 'packages/renderer/vite.config.ts' })
-
-await server.listen()
-await watchPreload(server)
-await watchMain(server)

src/App.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import HelloWorld from './components/HelloWorld.vue'
+</script>
+
+<template>
+  <div>
+    <a href="https://www.electronjs.org/" target="_blank">
+      <img src="./assets/electron.svg" class="logo electron" alt="Electron logo" />
+    </a>
+    <a href="https://vitejs.dev/" target="_blank">
+      <img src="./assets/vite.svg" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://vuejs.org/" target="_blank">
+      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
+    </a>
+  </div>
+  <HelloWorld msg="Electron + Vite + Vue" />
+  <div class="flex-center">
+    Place static files into the <code>/public</code> folder
+    <img style="width: 2.4em; margin-left: .4em;" src="/logo.svg" alt="Logo">
+  </div>
+</template>
+
+<style>
+.flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+
+.logo.electron:hover {
+  filter: drop-shadow(0 0 2em #9FEAF9);
+}
+
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.vue:hover {
+  filter: drop-shadow(0 0 2em #42b883aa);
+}
+</style>

src/assets/electron.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256"><g fill="none" fill-rule="evenodd"><circle fill="#2B2E3A" cx="128" cy="128" r="128"/><g fill="#9FEAF9" fill-rule="nonzero"><path d="M100.502 71.69c-26.005-4.736-46.567.221-54.762 14.415-6.115 10.592-4.367 24.635 4.24 39.646a2.667 2.667 0 1 0 4.626-2.653c-7.752-13.522-9.261-25.641-4.247-34.326 6.808-11.791 25.148-16.213 49.187-11.835a2.667 2.667 0 0 0 .956-5.247zm-36.999 72.307c10.515 11.555 24.176 22.394 39.756 31.388 37.723 21.78 77.883 27.601 97.675 14.106a2.667 2.667 0 1 0-3.005-4.406c-17.714 12.078-55.862 6.548-92.003-14.318-15.114-8.726-28.343-19.222-38.478-30.36a2.667 2.667 0 1 0-3.945 3.59z"/><path d="M194.62 140.753c17.028-20.116 22.973-40.348 14.795-54.512-6.017-10.423-18.738-15.926-35.645-16.146a2.667 2.667 0 0 0-.069 5.333c15.205.198 26.165 4.939 31.096 13.48 6.792 11.765 1.49 29.807-14.248 48.399a2.667 2.667 0 1 0 4.071 3.446zm-43.761-68.175c-15.396 3.299-31.784 9.749-47.522 18.835-38.942 22.483-64.345 55.636-60.817 79.675a2.667 2.667 0 1 0 5.277-.775c-3.133-21.344 20.947-52.769 58.207-74.281 15.267-8.815 31.135-15.06 45.972-18.239a2.667 2.667 0 1 0-1.117-5.215z"/><path d="M87.77 187.753c8.904 24.86 23.469 40.167 39.847 40.167 11.945 0 22.996-8.143 31.614-22.478a2.667 2.667 0 1 0-4.571-2.748c-7.745 12.883-17.258 19.892-27.043 19.892-13.605 0-26.596-13.652-34.825-36.63a2.667 2.667 0 1 0-5.021 1.797zm81.322-4.863c4.61-14.728 7.085-31.718 7.085-49.423 0-44.179-15.463-82.263-37.487-92.042a2.667 2.667 0 0 0-2.164 4.874c19.643 8.723 34.317 44.866 34.317 87.168 0 17.177-2.397 33.63-6.84 47.83a2.667 2.667 0 1 0 5.09 1.593zm50.224-2.612c0-7.049-5.714-12.763-12.763-12.763-7.049 0-12.763 5.714-12.763 12.763 0 7.049 5.714 12.763 12.763 12.763 7.049 0 12.763-5.714 12.763-12.763zm-5.333 0a7.43 7.43 0 1 1-14.86 0 7.43 7.43 0 0 1 14.86 0zM48.497 193.041c7.05 0 12.764-5.714 12.764-12.763 0-7.049-5.715-12.763-12.764-12.763-7.048 0-12.763 5.714-12.763 12.763 0 7.049 5.715 12.763 12.763 12.763zm0-5.333a7.43 7.43 0 1 1 0-14.86 7.43 7.43 0 0 1 0 14.86z"/><path d="M127.617 54.444c7.049 0 12.763-5.714 12.763-12.763 0-7.049-5.714-12.763-12.763-12.763-7.049 0-12.763 5.714-12.763 12.763 0 7.049 5.714 12.763 12.763 12.763zm0-5.333a7.43 7.43 0 1 1 0-14.86 7.43 7.43 0 0 1 0 14.86zm1.949 93.382c-4.985 1.077-9.896-2.091-10.975-7.076a9.236 9.236 0 0 1 7.076-10.976c4.985-1.077 9.896 2.091 10.976 7.076 1.077 4.985-2.091 9.897-7.077 10.976z"/></g></g></svg>

src/assets/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

src/assets/vue.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>

src/components/HelloWorld.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+defineProps<{ msg: string }>()
+
+const count = ref(0)
+</script>
+
+<template>
+  <h1>{{ msg }}</h1>
+
+  <div class="card">
+    <button type="button" @click="count++">count is {{ count }}</button>
+    <p>
+      Edit
+      <code>components/HelloWorld.vue</code> to test HMR
+    </p>
+  </div>
+
+  <p>
+    Check out
+    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
+      >create-vue</a
+    >, the official Vue + Vite starter
+  </p>
+  <p>
+    Install
+    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
+    in your IDE for a better DX
+  </p>
+  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
+</template>
+
+<style scoped>
+.read-the-docs {
+  color: #888;
+}
+</style>

src/demos/ipc.ts

@@ -0,0 +1,4 @@
+
+window.ipcRenderer.on('main-process-message', (_event, ...args) => {
+  console.log('[Receive Main-process message]:', ...args)
+})

src/demos/node.ts

@@ -0,0 +1,8 @@
+import { lstat } from 'node:fs/promises'
+import { cwd } from 'node:process'
+
+lstat(cwd()).then(stats => {
+  console.log('[fs.lstat]', stats)
+}).catch(err => {
+  console.error(err)
+})

src/main.ts

@@ -0,0 +1,14 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import './style.css'
+
+import './demos/ipc'
+// If you want use Node.js, the`nodeIntegration` needs to be enabled in the Main process.
+// import './demos/node'
+
+createApp(App)
+  .mount('#app')
+  .$nextTick(() => {
+    postMessage({ payload: 'removeLoading' }, '*')
+  })

src/style.css

@@ -0,0 +1,90 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+code {
+  background-color: #1a1a1a;
+  padding: 2px 4px;
+  margin: 0 4px;
+  border-radius: 4px;
+}
+
+.card {
+  padding: 2em;
+}
+
+#app {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+  code {
+    background-color: #f9f9f9;
+  }
+}

src/vite-env.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}
+
+interface Window {
+  // expose in the `electron/preload/index.ts`
+  ipcRenderer: import('electron').IpcRenderer
+}

test/example.spec.ts

@@ -1,16 +0,0 @@
-// example.spec.ts
-import { test, expect } from '@playwright/test'
-import { env } from '../package.json'
-const VITE_SERVER_ADDRESS = `http://127.0.0.1:${env.PORT || 3344}`
-
-test('example test case', async ({ page }) => {
-  await page.goto(VITE_SERVER_ADDRESS)
-
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Vite App/)
-
-  // Expect an attribute "Hello Vue 3 + TypeScript + Vite" to be visible on the page.
-  await expect(
-    page.locator('text=Hello Vue 3 + TypeScript + Vite').first(),
-  ).toBeVisible()
-})

tsconfig.json

@@ -1,17 +1,20 @@
 {
   "compilerOptions": {
     "target": "ESNext",
+    "useDefineForClassFields": true,
     "module": "ESNext",
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "jsx": "preserve",
-    "esModuleInterop": true,
-    "resolveJsonModule": true,
-    "sourceMap": true,
-    "baseUrl": "./",
+    "moduleResolution": "Node",
     "strict": true,
-    "paths": {},
-    "allowSyntheticDefaultImports": true,
-    "skipLibCheck": true
-  }
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true
+  },
+  "include": ["src"],
+  "references": [
+    { "path": "./tsconfig.node.json" }
+  ]
 }

tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts", "package.json", "electron"]
+}

types.d.ts

@@ -1,8 +0,0 @@
-
-declare namespace NodeJS {
-  interface ProcessEnv {
-    NODE_ENV: 'development' | 'production'
-    readonly VITE_DEV_SERVER_HOST: string
-    readonly VITE_DEV_SERVER_PORT: string
-  }
-}

vite.config.flat.txt

@@ -0,0 +1,76 @@
+import { rmSync } from 'node:fs'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import electron from 'vite-plugin-electron'
+import renderer from 'vite-plugin-electron-renderer'
+import pkg from './package.json'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ command }) => {
+  rmSync('dist-electron', { recursive: true, force: true })
+
+  const isServe = command === 'serve'
+  const isBuild = command === 'build'
+  const sourcemap = isServe || !!process.env.VSCODE_DEBUG
+
+  return {
+    plugins: [
+      vue(),
+      electron([
+        {
+          // Main process entry file of the Electron App.
+          entry: 'electron/main/index.ts',
+          onstart({ startup }) {
+            if (process.env.VSCODE_DEBUG) {
+              console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App')
+            } else {
+              startup()
+            }
+          },
+          vite: {
+            build: {
+              sourcemap,
+              minify: isBuild,
+              outDir: 'dist-electron/main',
+              rollupOptions: {
+                // Some third-party Node.js libraries may not be built correctly by Vite, especially `C/C++` addons, 
+                // we can use `external` to exclude them to ensure they work correctly.
+                // Others need to put them in `dependencies` to ensure they are collected into `app.asar` after the app is built.
+                // Of course, this is not absolute, just this way is relatively simple. :)
+                external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
+              },
+            },
+          },
+        },
+        {
+          entry: 'electron/preload/index.ts',
+          onstart({ reload }) {
+            // Notify the Renderer process to reload the page when the Preload scripts build is complete, 
+            // instead of restarting the entire Electron App.
+            reload()
+          },
+          vite: {
+            build: {
+              sourcemap: sourcemap ? 'inline' : undefined, // #332
+              minify: isBuild,
+              outDir: 'dist-electron/preload',
+              rollupOptions: {
+                external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
+              },
+            },
+          },
+        }
+      ]),
+      // Use Node.js API in the Renderer process
+      renderer(),
+    ],
+    server: process.env.VSCODE_DEBUG && (() => {
+      const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)
+      return {
+        host: url.hostname,
+        port: +url.port,
+      }
+    })(),
+    clearScreen: false,
+  }
+})

vite.config.ts

@@ -0,0 +1,74 @@
+import fs from 'node:fs'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import electron from 'vite-plugin-electron/simple'
+import pkg from './package.json'
+
+// https://vitejs.dev/config/
+export default defineConfig(({ command }) => {
+  fs.rmSync('dist-electron', { recursive: true, force: true })
+
+  const isServe = command === 'serve'
+  const isBuild = command === 'build'
+  const sourcemap = isServe || !!process.env.VSCODE_DEBUG
+
+  return {
+    plugins: [
+      vue(),
+      electron({
+        main: {
+          // Shortcut of `build.lib.entry`
+          entry: 'electron/main/index.ts',
+          onstart({ startup }) {
+            if (process.env.VSCODE_DEBUG) {
+              console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App')
+            } else {
+              startup()
+            }
+          },
+          vite: {
+            build: {
+              sourcemap,
+              minify: isBuild,
+              outDir: 'dist-electron/main',
+              rollupOptions: {
+                // Some third-party Node.js libraries may not be built correctly by Vite, especially `C/C++` addons, 
+                // we can use `external` to exclude them to ensure they work correctly.
+                // Others need to put them in `dependencies` to ensure they are collected into `app.asar` after the app is built.
+                // Of course, this is not absolute, just this way is relatively simple. :)
+                external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
+              },
+            },
+          },
+        },
+        preload: {
+          // Shortcut of `build.rollupOptions.input`.
+          // Preload scripts may contain Web assets, so use the `build.rollupOptions.input` instead `build.lib.entry`.
+          input: 'electron/preload/index.ts',
+          vite: {
+            build: {
+              sourcemap: sourcemap ? 'inline' : undefined, // #332
+              minify: isBuild,
+              outDir: 'dist-electron/preload',
+              rollupOptions: {
+                external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
+              },
+            },
+          },
+        },
+        // Ployfill the Electron and Node.js API for Renderer process.
+        // If you want use Node.js in Renderer process, the `nodeIntegration` needs to be enabled in the Main process.
+        // See 👉 https://github.com/electron-vite/vite-plugin-electron-renderer
+        renderer: {},
+      }),
+    ],
+    server: process.env.VSCODE_DEBUG && (() => {
+      const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)
+      return {
+        host: url.hostname,
+        port: +url.port,
+      }
+    })(),
+    clearScreen: false,
+  }
+})