@tomjs/create-app 0.3.2 → 0.4.1

package/README.md

@@ -1,51 +1,37 @@
 # @tomjs/create-app
 
-![npm](https://img.shields.io/npm/v/%40tomjs/create-app) ![node-current (scoped)](https://img.shields.io/node/v/%40tomjs/create-app) ![NPM](https://img.shields.io/npm/l/%40tomjs%2Fcreate-app)
-
-Create a web application based on [vite](https://github.com/vitejs/vite) + [tomjs](https://github.com/tomgao365/tomjs).
+![npm](https://img.shields.io/npm/v/@tomjs/create-app) ![node-current (scoped)](https://img.shields.io/node/v/@tomjs/create-app) ![NPM](https://img.shields.io/npm/l/@tomjs/create-app)
 
 **English** | [中文](./README.zh_CN.md)
 
-## Creating a Project
+> Create a web application based on [vite](https://github.com/vitejs/vite) + [tomjs](https://github.com/tomgao365/tomjs).
 
-- Using `npm`
+## Creating a Project
 
 ```bash
-npm create @tomjs/app@latest
-```
-
-- Using `yarn`
+# pnpm
+pnpm create @tomjs/app
 
-```bash
+# yarn
 yarn create @tomjs/app
-```
 
-- Using `pnpm`
-
-```bash
-pnpm create @tomjs/app
+# npm
+npm create @tomjs/app@latest
 ```
 
 Then generate the project based on the prompts.
 
-You can also directly specify the project name, template, and module type.
-
-- Using `npm`
+You can also directly specify the project name, template.
 
 ```bash
-npm create @tomjs/app@latest my-app -- --template vue
-```
-
-- Using `yarn`
+# pnpm
+pnpm create @tomjs/app my-app --template vue
 
-```bash
+# yarn
 yarn create @tomjs/app my-app --template vue
-```
-
-- Using `pnpm`
 
-```bash
-pnpm create @tomjs/app --template vue
+# npm 7+, extra double-dash is needed:
+npm create @tomjs/app@latest my-app -- --template vue
 ```
 
 Parameters:

package/README.zh_CN.md

@@ -1,52 +1,37 @@
 # @tomjs/create-app
 
-![npm](https://img.shields.io/npm/v/%40tomjs/create-app) ![node-current (scoped)](https://img.shields.io/node/v/%40tomjs/create-app) ![NPM](https://img.shields.io/npm/l/%40tomjs%2Fcreate-app)
+[English](./README.md) | **中文**
 
-创建基于 [vite](https://github.com/vitejs/vite) + [tomjs](https://github.com/tomgao365/tomjs) 的 web 应用。
+![npm](https://img.shields.io/npm/v/@tomjs/create-app) ![node-current (scoped)](https://img.shields.io/node/v/@tomjs/create-app) ![NPM](https://img.shields.io/npm/l/@tomjs/create-app)
 
-[English](./README.md) | **中文**
+> 创建基于 [vite](https://github.com/vitejs/vite) + [tomjs](https://github.com/tomgao365/tomjs) 的 web 应用。
 
 ## 创建项目
 
-- 使用 `npm`
-
 ```bash
-npm create @tomjs/app@latest
-```
-
-- 使用 `yarn`
+# pnpm
+pnpm create @tomjs/app
 
-```bash
+# yarn
 yarn create @tomjs/app
-```
-
-- 使用 `pnpm`
 
-```bash
-pnpm create @tomjs/app
+# npm
+npm create @tomjs/app@latest
 ```
 
 然后根据提示生成项目。
 
-你也可以直接指定项目名、模板、module类型
-
-- 使用 `npm`
+你也可以直接指定项目名、模板。
 
 ```bash
-npm create @tomjs/app@latest
-npm create @tomjs/app@latest my-app -- --template vue
-```
-
-- 使用 `yarn`
+# pnpm
+pnpm create @tomjs/app my-app --template vue
 
-```bash
+# yarn
 yarn create @tomjs/app my-app --template vue
-```
-
-- 使用 `pnpm`
 
-```bash
-pnpm create @tomjs/app my-app --template vue
+# npm 7+，需要额外的双破折号：
+npm create @tomjs/app@latest my-app -- --template vue
 ```
 
 参数说明:

package/dist/index.mjs

@@ -4,5 +4,5 @@ import a,{renameSync as Ce}from"fs";import Oe from"os";import i from"path";impor
 Scaffolding project in ${s}...`);let T=g||P?.name||n||"",G=t=>i.join(Fe(import.meta.url),"../..",`template-${t}`),we=G(T),U=T.includes("node");[we,G("config")].forEach(t=>{let o=a.readdirSync(t);for(let r of o){let l=r.startsWith("_")?r.replace("_","."):r;if(U&&!f.includes("examples")&&r.includes("stylelint"))continue;let m=i.join(s,l);z(i.join(t,r),m)}});let d=D||h(),Se=`template-${T}`,j={name:"UserName",email:"name@github.com"};function ee(){let t=d.startsWith("@")?d.split("/")[0].substring(1):Ge(j.name);return`${xe||`https://github.com/${t}`}/${d.substring(d.indexOf("/")+1)}.git`}ke(),U&&(je(),Ee(),be());let te=se(process.env.npm_config_user_agent),_=te?te.name:"npm";b.which("git")&&(b.exec(`cd ${s} && git init`),f.includes("publish")&&b.exec(`cd ${s} && git remote add origin ${ee()}`));let I=i.relative(Q,s);switch(console.log(`
 Done. Now run:
 `),s!==Q&&console.log(`  cd ${I.includes(" ")?`"${I}"`:I}`),_){case"yarn":console.log("  yarn"),console.log("  yarn dev");break;default:console.log(`  ${_} install`),console.log(`  ${_} run dev`);break}function je(){["LICENSE","README.md","README.zh_CN.md"].forEach(t=>{let o=i.join(s,t);if(!f.includes("publish")&&a.existsSync(o)){a.rmSync(o),t==="README.md"&&a.writeFileSync(o,`# ${d}
-`,{encoding:"utf-8"});return}if(!a.existsSync(o))return;let r=a.readFileSync(o,"utf-8").replace(new RegExp(Se,"g"),d).replace(new RegExp("{{user.name}}","g"),j.name).replace(new RegExp("{{user.email}}","g"),j.email);if(t.startsWith("README")){let l=d.replace("@","%40"),m=d.replace("@","%40").replace(new RegExp("/","g"),"%2F");r=r.replace("{{badges}}",[`![npm](https://img.shields.io/npm/v/${l})`,`![node-current (scoped)](https://img.shields.io/node/v/${l})`,`![NPM](https://img.shields.io/npm/l/${m})`].join(" "))}a.writeFileSync(o,r)})}function k(t,...o){["dependencies","devDependencies"].forEach(r=>{Object.keys(t[r]||{}).forEach(l=>{o.find(m=>l.includes(m))&&delete t[r][l]})})}function ke(){let t=v(i.join(s,"package.json"));t.name=d,f.includes("publish")?(b.which("git")&&(j.name=ye("user.name")||Oe.userInfo().username,j.email=ye("user.email")||"",t.author=Object.assign(t.author,j)),t.repository.url=`git+${ee()}`):(delete t.author,delete t.publishConfig,delete t.repository,delete t.scripts.prepublishOnly,delete t.devDependencies.np),f.includes("electron")||(k(t,"electron"),t.scripts["lint:eslint"]=t.scripts["lint:eslint"].replace(",electron","")),U&&!f.includes("vite")&&k(t,"vite"),x(i.join(s,"package.json"),t)}function W(t,o){let r=t.lastIndexOf("."),l=t.substring(0,r)+"."+o+t.substring(r),m=i.join(s,t),y=i.join(s,l);f.includes(o)?($(m),a.existsSync(y)&&Ce(y,m)):$(y)}function Ee(){if(W("tsconfig.json","test"),W("jest.config.cjs","electron"),f.includes("test"))return;a.readdirSync(s).filter(r=>r.startsWith("jest.config")||["test"].includes(r)).forEach(r=>{$(i.join(s,r))});let t=i.join(s,"package.json"),o=v(t);delete o.scripts.test,o.scripts["lint:eslint"]=o.scripts["lint:eslint"].replace(",test",""),k(o,"jest"),x(t,o)}function be(){if(W(".lintstagedrc.cjs","examples"),!f.includes("examples")){let r=v(i.join(s,"package.json"));r.scripts.lint=r.scripts.lint.replace(" lint:stylelint",""),r.scripts["lint:eslint"]=r.scripts["lint:eslint"].replace(",examples",""),delete r.scripts["lint:stylelint"],k(r,"stylelint"),x(i.join(s,"package.json"),r);return}let t=i.join(s,"examples");a.mkdirSync(t);let o=f.includes("electron");["vue","react"].forEach(r=>{let l=G(o?`electron-${r}`:r),m=i.join(t,r);if(!a.existsSync(l)){console.log(`${Z(l)} template is not exist`);return}a.cpSync(l,m,{recursive:!0});let y=v(i.join(m,"package.json"));Object.keys(y.scripts).forEach(E=>{(E.startsWith("lint")||["prepare"].includes(E))&&delete y.scripts[E]}),k(y,"eslint","prettier","stylelint","commitlint","husky","lint-staged","tsconfig","lint-staged"),x(i.join(m,"package.json"),y),["_lintstagedrc.cjs"].forEach(E=>{let ne=i.join(m,E);a.existsSync(ne)&&a.rmSync(ne,{recursive:!0})})}),a.writeFileSync(i.join(s,"pnpm-workspace.yaml"),`packages:
+`,{encoding:"utf-8"});return}if(!a.existsSync(o))return;let r=a.readFileSync(o,"utf-8").replace(new RegExp(Se,"g"),d).replace(new RegExp("{{user.name}}","g"),j.name).replace(new RegExp("{{user.email}}","g"),j.email);if(t.startsWith("README")){let l=d.replace("@","%40"),m=d.replace("@","%40").replace(new RegExp("/","g"),"%2F");r=r.replace("{{badges}}",[`![npm](https://img.shields.io/npm/v/${l})`,`![node-current (scoped)](https://img.shields.io/node/v/${l})`,`![NPM](https://img.shields.io/npm/l/${m})`].join(" "))}a.writeFileSync(o,r)})}function k(t,...o){["dependencies","devDependencies"].forEach(r=>{Object.keys(t[r]||{}).forEach(l=>{o.find(m=>l.includes(m))&&delete t[r][l]})})}function ke(){let t=v(i.join(s,"package.json"));t.name=d,f.includes("publish")?(b.which("git")&&(j.name=ye("user.name")||Oe.userInfo().username,j.email=ye("user.email")||"",t.author=Object.assign(t.author,j)),t.repository.url=`git+${ee()}`):(delete t.author,delete t.publishConfig,delete t.repository,delete t.scripts.prepublishOnly,delete t.devDependencies.np),U&&(f.includes("electron")||(k(t,"electron"),t.scripts["lint:eslint"]=t.scripts["lint:eslint"].replace(",electron","")),f.includes("vite")&&k(t,"vite")),x(i.join(s,"package.json"),t)}function W(t,o){let r=t.lastIndexOf("."),l=t.substring(0,r)+"."+o+t.substring(r),m=i.join(s,t),y=i.join(s,l);f.includes(o)?($(m),a.existsSync(y)&&Ce(y,m)):$(y)}function Ee(){if(W("tsconfig.json","test"),W("jest.config.cjs","electron"),f.includes("test"))return;a.readdirSync(s).filter(r=>r.startsWith("jest.config")||["test"].includes(r)).forEach(r=>{$(i.join(s,r))});let t=i.join(s,"package.json"),o=v(t);delete o.scripts.test,o.scripts["lint:eslint"]=o.scripts["lint:eslint"].replace(",test",""),k(o,"jest"),x(t,o)}function be(){if(W(".lintstagedrc.cjs","examples"),!f.includes("examples")){let r=v(i.join(s,"package.json"));r.scripts.lint=r.scripts.lint.replace(" lint:stylelint",""),r.scripts["lint:eslint"]=r.scripts["lint:eslint"].replace(",examples",""),delete r.scripts["lint:stylelint"],k(r,"stylelint"),x(i.join(s,"package.json"),r);return}let t=i.join(s,"examples");a.mkdirSync(t);let o=f.includes("electron");["vue","react"].forEach(r=>{let l=G(o?`electron-${r}`:r),m=i.join(t,r);if(!a.existsSync(l)){console.log(`${Z(l)} template is not exist`);return}a.cpSync(l,m,{recursive:!0});let y=v(i.join(m,"package.json"));Object.keys(y.scripts).forEach(E=>{(E.startsWith("lint")||["prepare"].includes(E))&&delete y.scripts[E]}),k(y,"eslint","prettier","stylelint","commitlint","husky","lint-staged","tsconfig","lint-staged","npm-run-all"),x(i.join(m,"package.json"),y),["_lintstagedrc.cjs"].forEach(E=>{let ne=i.join(m,E);a.existsSync(ne)&&a.rmSync(ne,{recursive:!0})})}),a.writeFileSync(i.join(s,"pnpm-workspace.yaml"),`packages:
   - 'examples/*'`,{encoding:"utf-8"})}}q().then(async()=>Ie().catch(e=>{e.message&&console.error(e)})).catch(e=>{e.message&&console.error(e)});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tomjs/create-app",
-  "version": "0.3.2",
+  "version": "0.4.1",
   "description": "create tomjs web app",
   "keywords": [
     "tomjs",
@@ -54,8 +54,8 @@
     "@tomjs/commitlint": "^2.0.5",
     "@tomjs/eslint": "^1.1.1",
     "@tomjs/prettier": "^1.0.6",
-    "@tomjs/stylelint": "^1.1.0",
-    "@tomjs/tsconfig": "^1.0.8",
+    "@tomjs/stylelint": "^1.1.1",
+    "@tomjs/tsconfig": "^1.0.9",
     "@types/lodash-es": "^4.17.12",
     "@types/minimist": "^1.2.5",
     "@types/node": "^18.19.3",

package/template-electron-react/README.md

@@ -4,23 +4,31 @@ vite + electron + react
 
 ## Description
 
-- source code
+- Recommended `electron` front-end code directory structure
 
 ```
-├── electron
-│   ├── main          > Electron-Main
-│   ├── payload       > Preload-Scripts
-├── src               > Electron-Renderer
+|--electron
+|  |--main
+|  |  |--index.ts
+|  |--preload
+|  |  |--index.ts
+|--src
+|  |--App.tsx
+|  |--main.tsx
 ```
 
-- output
+- Use the default dist output directory of the plugin
 
 ```
-├─┬ dist
-│ ├── main.js        > Electron-Main
-│ ├── preload.js     > Preload-Scripts
-│ ├─┬ render         > Electron-Renderer
-│ │ └── index.html
+|--dist
+|  |--main
+|  |  |--index.js
+|  |  |--index.js.map
+|  |--preload
+|  |  |--index.js
+|  |  |--index.js.map
+|  |--renderer
+|  |  |--index.html
 ```
 
 ## Reference project

package/template-electron-react/electron/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@tomjs/vite-plugin-electron/env" />

package/template-electron-react/electron/main/index.ts

@@ -3,20 +3,8 @@ import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { app, BrowserWindow, ipcMain, shell } from 'electron';
 
-// The built directory structure
-//
-// ├─┬ dist
-// │ ├── main.js        > Electron-Main
-// │ ├── preload.js     > Preload-Scripts
-// │ ├─┬ render         > Electron-Renderer
-// │ │ └── index.html
-//
 const __dirname = dirname(fileURLToPath(import.meta.url));
-process.env.DIST_ELECTRON = __dirname;
-process.env.DIST = join(process.env.DIST_ELECTRON, 'render');
-process.env.VITE_PUBLIC = process.env.VITE_DEV_SERVER_URL
-  ? join(process.env.DIST_ELECTRON, '../public')
-  : process.env.DIST;
+const isDev = process.env.NODE_ENV === 'development';
 
 // Disable GPU Acceleration for Windows 7
 if (release().startsWith('6.1')) app.disableHardwareAcceleration();
@@ -32,19 +20,22 @@ if (!app.requestSingleInstanceLock()) {
 // 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'
+process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true';
 
 let win: BrowserWindow | null = null;
-// Here, you can also use other preload
-const preload = join(__dirname, './preload.js');
-const url = process.env.VITE_DEV_SERVER_URL as string;
-const indexHtml = join(process.env.DIST, 'index.html');
-
-async function createWindow() {
+// package.json "type":"module", must use mjs extension
+const preload = join(__dirname, '../preload/index.mjs');
+const serverUrl = process.env.APP_DEV_SERVER_URL as string;
+const rendererDist = join(__dirname, '../renderer');
+const indexHtml = join(rendererDist, 'index.html');
+const publicPath = serverUrl ? join(__dirname, '../../public') : rendererDist;
+
+function createWindow() {
   win = new BrowserWindow({
     title: 'Main window',
     width: 800,
     height: 700,
+    icon: join(publicPath, 'img/icon.png'),
     webPreferences: {
       preload,
       // Warning: Enable nodeIntegration and disable contextIsolation is not secure in production
@@ -55,11 +46,10 @@ async function createWindow() {
     },
   });
 
-  if (process.env.VITE_DEV_SERVER_URL) {
-    // electron-vite-vue#298
-    win.loadURL(url);
+  if (isDev) {
+    win.loadURL(serverUrl);
     // Open devTool if the app is not packaged
-    // win.webContents.openDevTools();
+    win.webContents.openDevTools();
   } else {
     win.loadFile(indexHtml);
   }
@@ -77,7 +67,26 @@ async function createWindow() {
   // win.webContents.on('will-navigate', (event, url) => { }) #344
 }
 
-app.whenReady().then(createWindow);
+app.whenReady().then(async () => {
+  createWindow();
+
+  if (isDev) {
+    const { installExtension, REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS } = await import(
+      '@tomjs/electron-devtools-installer'
+    );
+
+    installExtension([REACT_DEVELOPER_TOOLS, REDUX_DEVTOOLS])
+      .then(exts => {
+        console.log(
+          'Added Extension: ',
+          exts.map(s => s.name),
+        );
+      })
+      .catch(() => {
+        console.log('Failed to install extensions');
+      });
+  }
+});
 
 app.on('window-all-closed', () => {
   win = null;
@@ -111,8 +120,8 @@ ipcMain.handle('open-win', (_, arg) => {
     },
   });
 
-  if (process.env.VITE_DEV_SERVER_URL) {
-    childWindow.loadURL(`${url}#${arg}`);
+  if (serverUrl) {
+    childWindow.loadURL(`${serverUrl}#${arg}`);
   } else {
     childWindow.loadFile(indexHtml, { hash: arg });
   }

package/template-electron-react/electron/preload/index.ts

@@ -0,0 +1 @@
+console.log('Electron Preload Process!');

package/template-electron-react/package.json

@@ -1,16 +1,12 @@
 {
   "name": "electron-app",
   "version": "0.0.0",
+  "type": "module",
   "description": "vite + electron + vue",
   "engines": {
     "node": ">=18"
   },
-  "debug": {
-    "env": {
-      "VITE_DEV_SERVER_URL": "http://127.0.0.1:6888/"
-    }
-  },
-  "main": "dist/main.js",
+  "main": "dist/main/index.mjs",
   "scripts": {
     "dev": "vite",
     "build": "npm run clean && vite build && npm run release",
@@ -29,10 +25,12 @@
   "devDependencies": {
     "@commitlint/cli": "^18.4.3",
     "@tomjs/commitlint": "^2.0.5",
+    "@tomjs/electron-devtools-installer": "^2.0.3",
     "@tomjs/eslint": "^1.1.1",
     "@tomjs/prettier": "^1.0.6",
-    "@tomjs/stylelint": "^1.1.0",
-    "@tomjs/tsconfig": "^1.0.8",
+    "@tomjs/stylelint": "^1.1.1",
+    "@tomjs/tsconfig": "^1.0.9",
+    "@tomjs/vite-plugin-electron": "^1.1.2",
     "@types/node": "^18.19.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
@@ -48,11 +46,9 @@
     "rimraf": "^5.0.5",
     "shelljs": "^0.8.5",
     "stylelint": "^15.11.0",
-    "tree-kill": "^1.2.2",
     "tsx": "^4.6.2",
     "typescript": "~5.2.2",
-    "vite": "^5.0.6",
-    "vite-plugin-electron": "^0.15.4",
+    "vite": "^5.0.7",
     "vite-plugin-electron-renderer": "^0.14.5"
   }
 }

package/template-electron-react/scripts/builder.ts

@@ -11,7 +11,7 @@ export default {
     output: `build/${pkg.version}`,
     app: 'dist',
   },
-  files: ['main.js', 'preload.js', 'render'],
+  files: ['main/index.mjs', 'preload/index.mjs', 'renderer'],
   icon: 'public/img/icon.png',
   artifactName: '${productName}-${version}-${os}-${arch}.${ext}',
   electronLanguages: ['zh-CN', 'en-US'],

package/template-electron-react/scripts/release.ts

@@ -13,7 +13,7 @@ function genPkgJson() {
     version: pkg.version,
     author: os.userInfo().username,
     description: pkg.description,
-    main: './main.js',
+    main: 'main/index.mjs',
     dependencies: Object.entries(Object.assign({}, pkg.dependencies, pkg.devDependencies))
       .filter(([name]) => ELECTRON_DEPENDENCIES.includes(name))
       .reduce((object, entry) => ({ ...object, [entry[0]]: entry[1] }), {}),

package/template-electron-react/src/App.tsx

@@ -9,7 +9,9 @@ import './App.css';
 function App() {
   const [count, setCount] = useState(0);
 
-  const info = os.platform() + ' ' + os.arch();
+  const versions = ['chrome', 'node', 'electron']
+    .map(s => `${s}: ${process.versions[s]}`)
+    .concat(['platform: ' + os.platform() + ' ' + os.arch()]);
 
   return (
     <>
@@ -25,8 +27,8 @@ function App() {
         </a>
       </div>
       <h1>Vite + Electron + React</h1>
-      <div>{info}</div>
       <div className="card">
+        <div style={{ marginBottom: '1em' }}>{versions.join(', ')}</div>
         <button onClick={() => setCount(count => count + 1)}>count is {count}</button>
         <p>
           Edit <code>src/App.tsx</code> and save to test HMR

package/template-electron-react/vite.config.ts

@@ -1,22 +1,12 @@
-import { rmSync } from 'node:fs';
 import path from 'node:path';
 import { defineConfig } from 'vite';
-import electron from 'vite-plugin-electron';
-import { notBundle } from 'vite-plugin-electron/plugin';
 import renderer from 'vite-plugin-electron-renderer';
+import electron from '@tomjs/vite-plugin-electron';
 import react from '@vitejs/plugin-react-swc';
 import pkg from './package.json';
 
 // https://vitejs.dev/config/
-export default defineConfig(({ command }) => {
-  ['main.js', 'main.js.map', 'preload.js'].forEach(s => {
-    rmSync(`dist/${s}`, { recursive: true, force: true });
-  });
-
-  const isServe = command === 'serve';
-  const isBuild = command === 'build';
-  const sourcemap = isServe || !!process.env.VSCODE_DEBUG;
-
+export default defineConfig(() => {
   process.env.APP_BUILD_TIME = Date.now() + '';
   process.env.APP_VERSION = pkg.version;
 
@@ -28,84 +18,22 @@ export default defineConfig(({ command }) => {
       },
     },
     build: {
-      outDir: 'dist/render',
       emptyOutDir: true,
     },
     plugins: [
       react(),
-      electron([
-        {
-          // Main process entry file of the Electron App.
-          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',
-              emptyOutDir: false,
-              lib: {
-                entry: 'electron/main/index.ts',
-                formats: ['cjs'],
-                fileName: () => 'main.js',
-              },
-              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 : {}),
-              },
-            },
-            plugins: [
-              // This is just an option to improve build performance, it's non-deterministic!
-              // e.g. `import log from 'electron-log'` -> `const log = require('electron-log')`
-              isServe && notBundle(),
-            ],
-          },
+      electron({
+        main: {
+          entry: 'electron/main/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',
-              emptyOutDir: false,
-              lib: {
-                entry: 'electron/preload/index.ts',
-                formats: ['cjs'],
-                fileName: () => 'preload.js',
-              },
-              rollupOptions: {
-                external: Object.keys('dependencies' in pkg ? pkg.dependencies : {}),
-              },
-            },
-            plugins: [isServe && notBundle()],
-          },
+        preload: {
+          entry: 'electron/preload/index.ts',
         },
-      ]),
+      }),
       // 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,
-          };
-        })()
-      : {},
+    server: {},
     clearScreen: false,
   };
 });

package/template-electron-vue/README.md

@@ -4,23 +4,31 @@ vite + electron + vue
 
 ## Description
 
-- source code
+- Recommended `electron` front-end code directory structure
 
 ```
-├── electron
-│   ├── main          > Electron-Main
-│   ├── payload       > Preload-Scripts
-├── src               > Electron-Renderer
+|--electron
+|  |--main
+|  |  |--index.ts
+|  |--preload
+|  |  |--index.ts
+|--src
+|  |--App.vue
+|  |--main.ts
 ```
 
-- output
+- Use the default dist output directory of the plugin
 
 ```
-├─┬ dist
-│ ├── main.js        > Electron-Main
-│ ├── preload.js     > Preload-Scripts
-│ ├─┬ render         > Electron-Renderer
-│ │ └── index.html
+|--dist
+|  |--main
+|  |  |--index.js
+|  |  |--index.js.map
+|  |--preload
+|  |  |--index.js
+|  |  |--index.js.map
+|  |--renderer
+|  |  |--index.html
 ```
 
 ## Reference project

package/template-electron-vue/electron/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@tomjs/vite-plugin-electron/env" />