chore: update template(sync official)

Build/skip files when debug

.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@v2
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+
+      - 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,29 @@
+# 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
+# Editor directories and files
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
 release
+.vscode/.debug.env
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+dist-electron

.simple-git-hooks.cjs

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

.vscode/.debug.script.mjs

@@ -2,13 +2,22 @@ import fs from 'fs'
 import path from 'path'
 import { fileURLToPath } from 'url'
 import { createRequire } from 'module'
+import { spawn } from '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"
@@ -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": "pwa-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,12 @@
 {
   "typescript.tsdk": "node_modules/typescript/lib",
   "typescript.enablePromptUseWorkspaceTsdk": true,
-}
+  "json.schemas": [
+    {
+      "fileMatch": [
+        "/*electron-builder.json5"
+      ],
+      "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

README.md

@@ -1,22 +1,21 @@
 # electron-vite-vue
 
+🥳 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?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)
+[![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)
 
-
-**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
@@ -27,48 +26,46 @@ 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-vue.gif](https://github.com/electron-vite/electron-vite-vue/blob/main/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/public/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/tree/main/packages/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)
+- [dependencies vs devDependencies](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#dependencies-vs-devdependencies)
+- [Using C/C++ native addons in Electron-Renderer](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#load-nodejs-cc-native-modules)
+- [Node.js ESM packages](https://github.com/electron-vite/vite-plugin-electron/tree/main/packages/electron-renderer#nodejs-esm-packages) (e.g. `execa` `node-fetch`)

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

@@ -8,6 +8,7 @@
     "output": "release/${version}"
   },
   "files": [
+    "dist-electron",
     "dist"
   ],
   "mac": {

electron/electron-env.d.ts

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

electron/main/index.ts

@@ -0,0 +1,115 @@
+// The built directory structure
+//
+// ├─┬ dist-electron
+// │ ├─┬ main
+// │ │ └── index.js    > Electron-Main
+// │ └─┬ preload
+// │   └── index.js    > Preload-Scripts
+// ├─┬ dist
+// │ └── index.html    > Electron-Renderer
+//
+process.env.DIST_ELECTRON = join(__dirname, '..')
+process.env.DIST = join(process.env.DIST_ELECTRON, '../dist')
+process.env.PUBLIC = app.isPackaged ? process.env.DIST : join(process.env.DIST_ELECTRON, '../public')
+
+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)
+}
+
+// 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.js')
+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.PUBLIC, 'favicon.ico'),
+    webPreferences: {
+      preload,
+      // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
+      // Consider using contextBridge.exposeInMainWorld
+      // Read more on https://www.electronjs.org/docs/latest/tutorial/context-isolation
+      nodeIntegration: true,
+      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' }
+  })
+}
+
+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,
+      nodeIntegration: true,
+      contextIsolation: false,
+    },
+  })
+
+  if (app.isPackaged) {
+    childWindow.loadFile(indexHtml, { hash: arg })
+  } else {
+    childWindow.loadURL(`${url}#${arg}`)
+    // childWindow.webContents.openDevTools({ mode: "undocked", activate: true })
+  }
+})

electron/preload/index.ts

@@ -1,10 +1,37 @@
+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
  */
-export function useLoading() {
+function useLoading() {
   const className = `loaders-css__square-spin`
   const styleContent = `
 @keyframes square-spin {
@@ -43,25 +70,23 @@ export function useLoading() {
 
   return {
     appendLoading() {
-      safe.append(document.head, oStyle)
-      safe.append(document.body, oDiv)
+      safeDOM.append(document.head, oStyle)
+      safeDOM.append(document.body, oDiv)
     },
     removeLoading() {
-      safe.remove(document.head, oStyle)
-      safe.remove(document.body, oDiv)
+      safeDOM.remove(document.head, oStyle)
+      safeDOM.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)
-    }
-  },
+// ----------------------------------------------------------------------
+
+const { appendLoading, removeLoading } = useLoading()
+domReady().then(appendLoading)
+
+window.onmessage = ev => {
+  ev.data.payload === 'removeLoading' && removeLoading()
 }
+
+setTimeout(removeLoading, 4999)

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,37 +1,33 @@
 {
   "name": "electron-vue-vite",
-  "version": "1.0.0",
-  "main": "dist/main/index.cjs",
+  "version": "2.1.0",
+  "main": "dist-electron/main/index.js",
+  "description": "Really simple Electron + Vue + Vite boilerplate.",
   "author": "草鞋没号 <308487730@qq.com>",
   "license": "MIT",
+  "private": true,
   "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"
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build && electron-builder"
   },
   "engines": {
-    "node": ">=14.17.0"
+    "node": "^14.18.0 || >=16.0.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"
+    "@vitejs/plugin-vue": "^3.1.2",
+    "electron": "^21.1.0",
+    "electron-builder": "^23.3.3",
+    "typescript": "^4.8.4",
+    "vite": "^3.2.2",
+    "vite-electron-plugin": "^0.5.0",
+    "vite-plugin-electron-renderer": "^0.10.2",
+    "vue": "^3.2.40",
+    "vue-tsc": "^1.0.9"
   },
-  "env": {
-    "VITE_DEV_SERVER_HOST": "127.0.0.1",
-    "VITE_DEV_SERVER_PORT": 3344
+  "debug": {
+    "env": {
+      "VITE_DEV_SERVER_URL": "http://127.0.0.1:3344"
+    }
   },
   "keywords": [
     "electron",
@@ -40,4 +36,4 @@
     "vue3",
     "vue"
   ]
-}
+}

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/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/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/global.d.ts

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

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;

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

@@ -1,21 +1,19 @@
 <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
+// Check out https://vuejs.org/api/sfc-script-setup.html#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" >
+    <img class="logo vite" src="./assets/vite.svg" >
+    <img class="logo electron" src="./assets/electron.svg" >
+    <img class="logo vue" src="./assets/vue.svg" >
   </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'" >
+    Place static files into the <code>/public</code> folder
+    <img style="width:77px;" :src="'./node.png'" >
   </div>
 </template>
 
@@ -35,10 +33,6 @@ import HelloWorld from './components/HelloWorld.vue'
   justify-content: center;
 }
 
-.logo-box span {
-  width: 74px;
-}
-
 .static-public {
   display: flex;
   align-items: center;
@@ -52,4 +46,23 @@ import HelloWorld from './components/HelloWorld.vue'
   border-radius: 4px;
   color: #304455;
 }
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: 0.75s;
+}
+
+.logo.vite:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+
+.logo.electron:hover {
+  filter: drop-shadow(0 0 2em #9FEAF9);
+}
+
+.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/env.d.ts

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

src/main.ts

@@ -4,4 +4,6 @@ import './samples/node-api'
 
 createApp(App)
   .mount('#app')
-  .$nextTick(window.removeLoading)
+  .$nextTick(() => {
+    postMessage({ payload: 'removeLoading' }, '*')
+  })

src/samples/node-api.ts

@@ -2,7 +2,6 @@ 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)
 })

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

@@ -13,5 +13,9 @@
     "paths": {},
     "allowSyntheticDefaultImports": true,
     "skipLibCheck": true
-  }
+  },
+  "include": ["src"],
+  "references": [
+    { "path": "./tsconfig.node.json" }
+  ]
 }

tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["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.ts

@@ -0,0 +1,55 @@
+import { rmSync } from 'fs'
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import electron from 'vite-electron-plugin'
+import { customStart, loadViteEnv } from 'vite-electron-plugin/plugin'
+import renderer from 'vite-plugin-electron-renderer'
+import pkg from './package.json'
+
+rmSync('dist-electron', { recursive: true, force: true })
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    electron({
+      include: ['electron'],
+      transformOptions: {
+        sourcemap: !!process.env.VSCODE_DEBUG,
+      },
+      plugins: [
+        ...(process.env.VSCODE_DEBUG
+          ? [
+            // Will start Electron via VSCode Debug
+            customStart(debounce(() => console.log(/* For `.vscode/.debug.script.mjs` */'[startup] Electron App'))),
+          ]
+          : []),
+          // Allow use `import.meta.env.VITE_SOME_KEY` in Electron-Main
+        loadViteEnv(),
+      ],
+    }),
+    // Use Node.js API in the Renderer-process
+    renderer({
+      nodeIntegration: true,
+    }),
+  ],
+  server: process.env.VSCODE_DEBUG ? (() => {
+    const url = new URL(pkg.debug.env.VITE_DEV_SERVER_URL)
+    return {
+      host: url.hostname,
+      port: +url.port,
+    }
+  })() : undefined,
+  clearScreen: false,
+  build: {
+    assetsDir: '', // #287
+  },
+})
+
+function debounce<Fn extends (...args: any[]) => void>(fn: Fn, delay = 299) {
+  let t: NodeJS.Timeout
+  return ((...args) => {
+    clearTimeout(t)
+    t = setTimeout(() => fn(...args), delay)
+  }) as Fn
+}