@tomjs/create-app 0.3.2 → 0.4.1

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"
-	]
-}