@tomjs/create-app 1.7.0 → 2.0.1

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

@@ -0,0 +1,67 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "dev",
+      "label": "npm:dev",
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": "relative",
+        "pattern": {
+          "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": "^.*\\[tomjs:electron\\] startup electron*$"
+        }
+      },
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    },
+    {
+      "type": "npm",
+      "script": "debug",
+      "label": "npm:debug",
+      "problemMatcher": {
+        "owner": "typescript",
+        "fileLocation": "relative",
+        "pattern": {
+          "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": "^.*\\[tomjs:electron\\] startup electron*$"
+        }
+      },
+      "isBackground": true,
+      "presentation": {
+        "reveal": "never"
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

package/templates/electron-vue/README.md

@@ -1,3 +1,3 @@
-# electron-vue
+# vue
 
 vite + electron + vue

package/templates/electron-vue/_eslint.config.mjs

@@ -0,0 +1,8 @@
+import { defineConfig } from '@tomjs/eslint';
+
+export default defineConfig({
+  rules: {
+    'no-console': 'off',
+    'n/prefer-global/process': 'off',
+  },
+});

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

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

package/templates/electron-vue/electron/main/index.ts

@@ -1,14 +1,20 @@
-import '../polyfills';
-
 import { release } from 'node:os';
 import { join } from 'node:path';
+import { ELECTRON_EXIT } from '@tomjs/vite-plugin-electron/electron';
 import { app, BrowserWindow, ipcMain, shell } from 'electron';
 
+console.log('Electron Main Process!');
+
+const isDev = process.env.NODE_ENV === 'development';
+process.env.DIST = join(__dirname, '../renderer');
+
 // Disable GPU Acceleration for Windows 7
-if (release().startsWith('6.1')) app.disableHardwareAcceleration();
+if (release().startsWith('6.1'))
+  app.disableHardwareAcceleration();
 
 // Set application name for Windows 10+ notifications
-if (process.platform === 'win32') app.setAppUserModelId(app.getName());
+if (process.platform === 'win32')
+  app.setAppUserModelId(app.getName());
 
 if (!app.requestSingleInstanceLock()) {
   app.quit();
@@ -18,24 +24,19 @@ 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';
-
-const isDev = process.env.NODE_ENV === 'development';
+// process.env['ELECTRON_DISABLE_SECURITY_WARNINGS'] = 'true'
 
 let win: BrowserWindow | null = null;
-// package.json "type":"module", must use mjs extension
+// Here, you can also use other preload
 const preload = join(__dirname, '../preload/index.mjs');
-const serverUrl = process.env.VITE_DEV_SERVER_URL as string;
-const rendererDist = join(__dirname, '../renderer');
-const indexHtml = join(rendererDist, 'index.html');
-const publicPath = serverUrl ? join(__dirname, '../../public') : rendererDist;
+const url = process.env.VITE_DEV_SERVER_URL as string;
+const indexHtml = join(process.env.DIST, 'index.html');
 
-function createWindow() {
+async 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
@@ -47,12 +48,9 @@ function createWindow() {
   });
 
   if (isDev) {
-    win.loadURL(serverUrl);
-    // Open devTool if the app is not packaged
-    setTimeout(() => {
-      win?.webContents.openDevTools();
-    }, 500);
-  } else {
+    win.loadURL(url);
+  }
+  else {
     win.loadFile(indexHtml);
   }
 
@@ -63,10 +61,10 @@ function createWindow() {
 
   // Make all links open with the browser, not with the application
   win.webContents.setWindowOpenHandler(({ url }) => {
-    if (url.startsWith('https:')) shell.openExternal(url);
+    if (url.startsWith('https:'))
+      shell.openExternal(url);
     return { action: 'deny' };
   });
-  // win.webContents.on('will-navigate', (event, url) => { }) #344
 }
 
 app.whenReady().then(async () => {
@@ -76,10 +74,15 @@ app.whenReady().then(async () => {
     const { installExtension, VUEJS_DEVTOOLS } = await import('@tomjs/electron-devtools-installer');
 
     installExtension(VUEJS_DEVTOOLS)
-      .then(ext => {
+      .then((ext) => {
         console.log('Added Extension: ', ext.name);
+        // Open devTool if the app is not packaged
+        if (win) {
+          win.webContents.openDevTools();
+        }
       })
-      .catch(() => {
+      .catch((err) => {
+        console.error(err);
         console.log('Failed to install extensions');
       });
   }
@@ -87,13 +90,15 @@ app.whenReady().then(async () => {
 
 app.on('window-all-closed', () => {
   win = null;
-  if (process.platform !== 'darwin') app.quit();
+  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();
+    if (win.isMinimized())
+      win.restore();
     win.focus();
   }
 });
@@ -102,7 +107,8 @@ app.on('activate', () => {
   const allWindows = BrowserWindow.getAllWindows();
   if (allWindows.length) {
     allWindows[0].focus();
-  } else {
+  }
+  else {
     createWindow();
   }
 });
@@ -117,9 +123,19 @@ ipcMain.handle('open-win', (_, arg) => {
     },
   });
 
-  if (serverUrl) {
-    childWindow.loadURL(`${serverUrl}#${arg}`);
-  } else {
+  if (process.env.VITE_DEV_SERVER_URL) {
+    childWindow.loadURL(`${url}#${arg}`);
+  }
+  else {
     childWindow.loadFile(indexHtml, { hash: arg });
   }
 });
+
+process.on('message', (data) => {
+  // Reload Electron
+  if (data === ELECTRON_EXIT) {
+    if (isDev && win) {
+      win.webContents.closeDevTools();
+    }
+  }
+});

package/templates/electron-vue/electron/preload/index.ts

@@ -0,0 +1,4 @@
+import os from 'node:os';
+
+console.log('Electron Preload Process!');
+console.log(os.homedir());

package/templates/electron-vue/index.html

@@ -4,8 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
-    <title>Vite + Electron + Vue + TS</title>
+    <title>Vite + Electron + Vue</title>
   </head>
 
   <body>

package/templates/electron-vue/package.json

@@ -1,6 +1,35 @@
 {
-  "description": "vite + electron + vue",
+  "name": "template-vue",
+  "type": "module",
+  "version": "0.0.0",
+  "private": true,
+  "description": "vite + vue",
+  "main": "./dist/main/index.mjs",
+  "engines": {
+    "node": ">=20"
+  },
   "scripts": {
-    "lint:eslint": "eslint \"{src,electron}/**/*.{ts,tsx,vue}\" *.{js,cjs,mjs,ts} --fix --cache"
+    "dev": "vite",
+    "debug": "cross-env VITE_ELECTRON_DEBUG=1 vite",
+    "build": "vue-tsc --noEmit && vite build",
+    "build:pack": "cross-env VITE_ELECTRON_BUILDER=1 vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tomjs/electron-devtools-installer": "^4.0.1",
+    "vue": "^3.5.25"
+  },
+  "devDependencies": {
+    "@tomjs/vite-plugin-electron": "^2.0.2",
+    "@types/node": "^20.19.25",
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vue/tsconfig": "^0.8.1",
+    "cross-env": "^10.1.0",
+    "electron": "^39.2.4",
+    "electron-builder": "^26.0.12",
+    "typescript": "~5.9.3",
+    "vite": "^7.2.4",
+    "vite-plugin-electron-renderer": "^0.14.6",
+    "vue-tsc": "^3.1.5"
   }
 }

package/templates/electron-vue/pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+onlyBuiltDependencies:
+  - electron
+  - electron-winstaller
+  - esbuild
+  - simple-git-hooks

package/templates/electron-vue/src/App.vue

@@ -21,8 +21,8 @@ import HelloWorld from './components/HelloWorld.vue';
 .logo {
   height: 6em;
   padding: 1.5em;
-  will-change: filter;
   transition: filter 300ms;
+  will-change: filter;
 }
 
 .logo:hover {

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

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

package/templates/electron-vue/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "@tomjs/tsconfig/vue-dom.json",
+  "references": [{ "path": "./tsconfig.node.json" }],
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
+}

package/templates/electron-vue/tsconfig.node.json

@@ -0,0 +1,7 @@
+{
+  "extends": "@tomjs/tsconfig/node.json",
+  "compilerOptions": {
+    "composite": true
+  },
+  "include": ["electron", "vite.config.ts"]
+}

package/templates/electron-vue/vite.config.ts

@@ -1,26 +1,8 @@
-import path from 'node:path';
 import electron from '@tomjs/vite-plugin-electron';
-import renderer from '@tomjs/vite-plugin-electron-renderer';
 import vue from '@vitejs/plugin-vue';
 import { defineConfig } from 'vite';
-import pkg from './package.json';
+import renderer from 'vite-plugin-electron-renderer';
 
-// https://vitejs.dev/config/
-export default defineConfig(() => {
-  process.env.APP_BUILD_TIME = Date.now() + '';
-  process.env.APP_VERSION = pkg.version;
-
-  return {
-    resolve: {
-      alias: {
-        '@': path.join(__dirname, 'src'),
-      },
-    },
-    plugins: [
-      vue(),
-      electron(),
-      // Use Node.js API in the Renderer process
-      renderer(),
-    ],
-  };
+export default defineConfig({
+  plugins: [vue(), electron({ builder: true }), renderer()],
 });

package/templates/{node-cli-legacy → node-base}/.vscode/launch.json

@@ -5,18 +5,15 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Debug CLI",
+      "name": "Debug",
       "type": "node",
       "request": "launch",
       "skipFiles": [
         "<node_internals>/**"
       ],
       "runtimeExecutable": "tsx",
-      "program": "${workspaceFolder}\\src\\index.ts",
-      "args": [
-        "--config",
-        "${workspaceFolder}\\xxx.config.cjs"
-      ],
+      "runtimeArgs": [],
+      "program": "${workspaceFolder}/src/index.ts",
       "console": "integratedTerminal"
     }
   ]

package/templates/node-base/package.json

@@ -0,0 +1,15 @@
+{
+  "description": "node base template",
+  "files": [
+    "dist"
+  ],
+  "engines": {
+    "node": ">=20"
+  },
+  "scripts": {
+    "dev": "tsx ./src/index.ts"
+  },
+  "devDependencies": {
+    "chalk": "^5.6.2"
+  }
+}

package/templates/node-base/src/index.ts

@@ -0,0 +1,5 @@
+import chalk from 'chalk';
+
+const num = 1 + 1;
+console.log(`1 + 1 = ${num}`);
+console.log(chalk.green('Starting Node App...'));

package/templates/{node-cli-legacy → node-base}/tsconfig.json

@@ -1,4 +1,4 @@
 {
   "extends": "@tomjs/tsconfig/node.json",
-  "include": ["src", "test", "*.ts"]
+  "include": ["src", "*.ts"]
 }

package/templates/node-cli/.vscode/i18n-ally-custom-framework.yml

@@ -0,0 +1,35 @@
+# .vscode/i18n-ally-custom-framework.yml
+
+# An array of strings which contain Language Ids defined by VS Code
+# You can check available language ids here: https://code.visualstudio.com/docs/languages/identifiers
+languageIds:
+  - javascript
+  - typescript
+  - javascriptreact
+  - typescriptreact
+
+# An array of RegExes to find the key usage. **The key should be captured in the first match group**.
+# You should unescape RegEx strings in order to fit in the YAML file
+# To help with this, you can use https://www.freeformatter.com/json-escape.html
+usageMatchRegex:
+  # The following example shows how to detect `t("your.i18n.keys")`
+  # the `{key}` will be placed by a proper keypath matching regex,
+  # you can ignore it and use your own matching rules as well
+  - "[^\\w\\d]t\\(['\"`]({key})['\"`]"
+
+# A RegEx to set a custom scope range. This scope will be used as a prefix when detecting keys
+# and works like how the i18next framework identifies the namespace scope from the
+# useTranslation() hook.
+# You should unescape RegEx strings in order to fit in the YAML file
+# To help with this, you can use https://www.freeformatter.com/json-escape.html
+scopeRangeRegex: "useTranslation\\(\\s*\\[?\\s*['\"`](.*?)['\"`]"
+
+# An array of strings containing refactor templates.
+# The "$1" will be replaced by the keypath specified.
+# Optional: uncomment the following two lines to use
+
+# refactorTemplates:
+#  - i18n.get("$1")
+
+# If set to true, only enables this custom framework (will disable all built-in frameworks)
+monopoly: true

package/templates/node-cli/.vscode/launch.json

@@ -5,18 +5,15 @@
   "version": "0.2.0",
   "configurations": [
     {
-      "name": "Debug CLI",
+      "name": "Debug",
       "type": "node",
       "request": "launch",
       "skipFiles": [
         "<node_internals>/**"
       ],
       "runtimeExecutable": "tsx",
-      "program": "${workspaceFolder}\\src\\index.ts",
-      "args": [
-        "--config",
-        "${workspaceFolder}\\xxx.config.cjs"
-      ],
+      "runtimeArgs": [],
+      "program": "${workspaceFolder}/src/debug.ts",
       "console": "integratedTerminal"
     }
   ]

package/templates/node-cli/.vscode/settings.json

@@ -0,0 +1,56 @@
+{
+  // i18n Ally
+  "i18n-ally.disabled": false,
+  "i18n-ally.localesPaths": "./locales",
+  "i18n-ally.displayLanguage": "zh-Hans",
+  "i18n-ally.sourceLanguage": "zh-Hans",
+
+  // Disable the default formatter, use eslint instead
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in your IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "svelte",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
+  ]
+}

package/templates/node-cli/_.gitignore

@@ -0,0 +1,59 @@
+# logs
+*.log
+lerna-debug.log*
+logs
+npm-debug.log*
+pnpm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# runtime data
+*.pid
+*.pid.lock
+*.seed
+pids
+
+# dependency directory
+bower_components
+jspm_packages
+node_modules
+web_modules
+
+# cache
+.cache
+.npm
+.tmp
+.temp
+.eslintcache
+.stylelintcache
+tsconfig.tsbuildinfo
+
+# environment
+.env
+
+# macOS
+.DS_Store
+
+# package files
+*.7z
+*.gz
+*.gzip
+*.rar
+*.tar
+*.tar.*
+*.tgz
+*.zip
+
+# IDEA
+.idea
+
+# vscode
+.history
+.vscode/i18n-ally-reviews.yml
+
+# build output
+build
+dist