@tomjs/create-app 0.3.2 → 0.4.0

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.0",
   "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" />

package/template-electron-vue/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-vue/electron/preload/index.ts

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

package/template-electron-vue/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 && vue-tsc --noEmit && vite build && npm run release",
@@ -22,18 +18,20 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "vue": "^3.3.10"
+    "vue": "^3.3.11"
   },
   "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/shelljs": "^0.8.15",
-    "@vitejs/plugin-vue": "^4.5.1",
+    "@vitejs/plugin-vue": "^4.5.2",
     "electron": "^28.0.0",
     "electron-builder": "^24.9.1",
     "eslint": "^8.55.0",
@@ -44,11 +42,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",
     "vue-tsc": "^1.8.25"
   }

package/template-electron-vue/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-vue/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-vue/src/App.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import os from 'node:os';
 import HelloWorld from './components/HelloWorld.vue';
-
-const info = os.platform() + ' ' + os.arch();
 </script>
 
 <template>
@@ -17,7 +14,6 @@ const info = os.platform() + ' ' + os.arch();
       <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
     </a>
   </div>
-  <div>{{ info }}</div>
   <HelloWorld msg="Vite + Electron + Vue" />
 </template>
 
@@ -40,4 +36,20 @@ const info = os.platform() + ' ' + os.arch();
 .logo.vue:hover {
   filter: drop-shadow(0 0 2em #42b883aa);
 }
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
 </style>

package/template-electron-vue/src/components/HelloWorld.vue

@@ -1,15 +1,21 @@
 <script setup lang="ts">
+import os from 'node:os';
 import { ref } from 'vue';
 
 defineProps<{ msg: string }>();
 
 const count = ref(0);
+
+const versions = ['chrome', 'node', 'electron']
+  .map(s => `${s}: ${process.versions[s]}`)
+  .concat(['platform: ' + os.platform() + ' ' + os.arch()]);
 </script>
 
 <template>
   <h1>{{ msg }}</h1>
 
   <div class="card">
+    <div style="margin-bottom: 1em">{{ versions.join(', ') }}</div>
     <button type="button" @click="count++">count is {{ count }}</button>
     <p>
       Edit

package/template-electron-vue/src/style.css

@@ -55,9 +55,9 @@ button:focus-visible {
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-.card {
-  padding: 2em;
-}
+/* .card {
+  padding: 1em;
+} */
 
 #app {
   max-width: 1280px;

package/template-electron-vue/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 vue from '@vitejs/plugin-vue';
 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;
 
@@ -33,79 +23,18 @@ export default defineConfig(({ command }) => {
     },
     plugins: [
       vue(),
-      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-node/package.json

@@ -57,8 +57,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/jest": "^29.5.11",
     "@types/node": "^18.19.3",
     "electron": "^28.0.0",
@@ -75,6 +75,6 @@
     "tsup": "^8.0.1",
     "tsx": "^4.6.2",
     "typescript": "~5.2.2",
-    "vite": "^5.0.6"
+    "vite": "^5.0.7"
   }
 }

package/template-react/package.json

@@ -25,8 +25,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/node": "^18.19.3",
     "@types/react": "^18.2.42",
     "@types/react-dom": "^18.2.17",
@@ -38,6 +38,6 @@
     "prettier": "^3.1.0",
     "stylelint": "^15.11.0",
     "typescript": "~5.2.2",
-    "vite": "^5.0.6"
+    "vite": "^5.0.7"
   }
 }

package/template-vue/package.json

@@ -17,17 +17,17 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "vue": "^3.3.10"
+    "vue": "^3.3.11"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.3",
     "@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/node": "^18.19.3",
-    "@vitejs/plugin-vue": "^4.5.1",
+    "@vitejs/plugin-vue": "^4.5.2",
     "eslint": "^8.55.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
@@ -35,7 +35,7 @@
     "prettier": "^3.1.0",
     "stylelint": "^15.11.0",
     "typescript": "~5.2.2",
-    "vite": "^5.0.6",
+    "vite": "^5.0.7",
     "vue-tsc": "^1.8.25"
   }
 }

package/template-electron-react/.vscode/.debug.env

@@ -1 +0,0 @@
-VITE_DEV_SERVER_URL=http://127.0.0.1:6888/

package/template-electron-react/.vscode/.debug.script.mjs

@@ -1,23 +0,0 @@
-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.debug.env).map(([key, val]) => `${key}=${val}`)
-fs.writeFileSync(path.join(__dirname, '.debug.env'), envContent.join('\n'))
-
-// bootstrap
-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' }),
-  },
-)

package/template-electron-react/.vscode/extensions.json

@@ -1,6 +0,0 @@
-{
-	"recommendations": [
-		"Vue.volar",
-		"Vue.vscode-typescript-vue-plugin"
-	]
-}

package/template-electron-react/.vscode/launch.json

@@ -1,53 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "compounds": [
-    {
-      "name": "Debug App",
-      "preLaunchTask": "Before Debug",
-      "configurations": [
-        "Debug Main Process",
-        "Debug Renderer Process"
-      ],
-      "presentation": {
-        "hidden": false,
-        "group": "",
-        "order": 1
-      },
-      "stopAll": true
-    }
-  ],
-  "configurations": [
-    {
-      "name": "Debug Main Process",
-      "type": "node",
-      "request": "launch",
-      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
-      "windows": {
-        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
-      },
-      "runtimeArgs": [
-        "--remote-debugging-port=9229",
-        "."
-      ],
-      "envFile": "${workspaceFolder}/.vscode/.debug.env",
-      "console": "integratedTerminal"
-    },
-    {
-      "name": "Debug Renderer Process",
-      "port": 9229,
-      "request": "attach",
-      "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:6888/**"
-      ]
-    },
-  ]
-}

package/template-electron-react/.vscode/settings.json

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

package/template-electron-react/.vscode/tasks.json

@@ -1,31 +0,0 @@
-{
-  // See https://go.microsoft.com/fwlink/?LinkId=733558 
-  // for the documentation about the tasks.json format
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "label": "Before Debug",
-      "type": "shell",
-      "command": "node .vscode/.debug.script.mjs",
-      "isBackground": true,
-      "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.*$"
-        }
-      }
-    }
-  ]
-}

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

@@ -1,11 +0,0 @@
-/// <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;
-  }
-}

package/template-electron-vue/.vscode/.debug.env

@@ -1 +0,0 @@
-VITE_DEV_SERVER_URL=http://127.0.0.1:6888/

package/template-electron-vue/.vscode/.debug.script.mjs

@@ -1,23 +0,0 @@
-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.debug.env).map(([key, val]) => `${key}=${val}`)
-fs.writeFileSync(path.join(__dirname, '.debug.env'), envContent.join('\n'))
-
-// bootstrap
-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' }),
-  },
-)

package/template-electron-vue/.vscode/extensions.json

@@ -1,6 +0,0 @@
-{
-	"recommendations": [
-		"Vue.volar",
-		"Vue.vscode-typescript-vue-plugin"
-	]
-}

package/template-electron-vue/.vscode/launch.json

@@ -1,53 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "compounds": [
-    {
-      "name": "Debug App",
-      "preLaunchTask": "Before Debug",
-      "configurations": [
-        "Debug Main Process",
-        "Debug Renderer Process"
-      ],
-      "presentation": {
-        "hidden": false,
-        "group": "",
-        "order": 1
-      },
-      "stopAll": true
-    }
-  ],
-  "configurations": [
-    {
-      "name": "Debug Main Process",
-      "type": "node",
-      "request": "launch",
-      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
-      "windows": {
-        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
-      },
-      "runtimeArgs": [
-        "--remote-debugging-port=9229",
-        "."
-      ],
-      "envFile": "${workspaceFolder}/.vscode/.debug.env",
-      "console": "integratedTerminal"
-    },
-    {
-      "name": "Debug Renderer Process",
-      "port": 9229,
-      "request": "attach",
-      "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:6888/**"
-      ]
-    },
-  ]
-}

package/template-electron-vue/.vscode/settings.json

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

package/template-electron-vue/.vscode/tasks.json

@@ -1,31 +0,0 @@
-{
-  // See https://go.microsoft.com/fwlink/?LinkId=733558 
-  // for the documentation about the tasks.json format
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "label": "Before Debug",
-      "type": "shell",
-      "command": "node .vscode/.debug.script.mjs",
-      "isBackground": true,
-      "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.*$"
-        }
-      }
-    }
-  ]
-}

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

@@ -1,11 +0,0 @@
-/// <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;
-  }
-}