@zhiwu215/code-template 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 知兀
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/index.js

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+import * as p from '@clack/prompts'
+import color from 'picocolors'
+import fs from 'fs'
+import path from 'path'
+import { createElectronVite } from './src/frameworks/electron-vite.js'
+
+async function main() {
+  console.clear()
+  p.intro(color.bgCyan(color.black(' 专属脚手架开发工具 ')))
+
+  // 1. 收集全局通用参数：项目名称与项目类型
+  const globalConfig = await p.group(
+    {
+      projectName: () =>
+        p.text({
+          message: '请输入项目名称:',
+          placeholder: 'my-app',
+          defaultValue: 'my-app',
+          validate: (val) => {
+            const name = val.trim()
+            if (!name) return '项目名称不能为空'
+            if (fs.existsSync(path.resolve(process.cwd(), name))) {
+              return `目录 "${name}" 已存在，请换一个名称`
+            }
+          }
+        }),
+
+      toolchain: () =>
+        p.select({
+          message: '请选择项目生态体系:',
+          options: [
+            { value: 'electron-vite', label: 'Electron 桌面应用 (基于 electron-vite)' }
+          ]
+        })
+    },
+    {
+      onCancel: () => {
+        p.cancel('已取消创建。')
+        process.exit(0)
+      }
+    }
+  )
+
+  const projectName = globalConfig.projectName.trim()
+  const targetDir = path.resolve(process.cwd(), projectName)
+
+  // 2. 路由分发给对应的具体框架模块处理
+  switch (globalConfig.toolchain) {
+    case 'electron-vite':
+      await createElectronVite(projectName, targetDir)
+      break
+    default:
+      p.cancel('未知的项目类型')
+      process.exit(1)
+  }
+}
+
+main()

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@zhiwu215/code-template",
+  "version": "1.0.0",
+  "description": "专属脚手架与项目模板开发工具",
+  "type": "module",
+  "main": "index.js",
+  "bin": {
+    "code-template": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "src",
+    "templates"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/zhiwu215/code-template.git"
+  },
+  "keywords": [
+    "scaffold",
+    "template",
+    "electron-vite",
+    "react",
+    "tailwind",
+    "shadcn",
+    "zustand"
+  ],
+  "author": "zhiwu215",
+  "license": "MIT",
+  "dependencies": {
+    "@clack/prompts": "^0.9.0",
+    "picocolors": "^1.1.1"
+  }
+}
+

package/src/frameworks/electron-vite.js

@@ -0,0 +1,107 @@
+import * as p from '@clack/prompts'
+import color from 'picocolors'
+import fs from 'fs'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { renderTemplate } from '../utils/renderTemplate.js'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const ROOT_DIR = path.resolve(__dirname, '..', '..')
+const TEMPLATES_DIR = path.resolve(ROOT_DIR, 'templates', 'electron-vite')
+const REACT_BASE_DIR = path.resolve(TEMPLATES_DIR, 'react')
+const PLUGINS_DIR = path.resolve(TEMPLATES_DIR, 'plugins')
+
+/**
+ * 负责 electron-vite 项目的创建与组装
+ * @param {string} projectName 项目名称
+ * @param {string} targetDir 目标创建路径
+ */
+export async function createElectronVite(projectName, targetDir) {
+  const options = await p.group(
+    {
+      framework: () =>
+        p.select({
+          message: '请选择前端框架:',
+          options: [
+            { value: 'react', label: 'React + TypeScript' }
+          ]
+        }),
+
+      css: () =>
+        p.select({
+          message: '请选择 CSS 样式方案:',
+          options: [
+            { value: 'tailwind', label: 'Tailwind CSS (v4)' },
+            { value: 'none', label: '无 (原生 CSS)' }
+          ]
+        }),
+
+      ui: () =>
+        p.select({
+          message: '请选择 UI 组件库:',
+          options: [
+            { value: 'shadcn', label: 'shadcn/ui' },
+            { value: 'none', label: '无 (不添加 UI 库)' }
+          ]
+        }),
+
+      stateManagement: () =>
+        p.select({
+          message: '请选择状态管理方案:',
+          options: [
+            { value: 'zustand', label: 'Zustand (轻量响应式状态管理)' },
+            { value: 'none', label: '无 (不添加状态管理库)' }
+          ]
+        })
+    },
+    {
+      onCancel: () => {
+        p.cancel('已取消创建。')
+        process.exit(0)
+      }
+    }
+  )
+
+  const s = p.spinner()
+
+  // 1. 渲染基础底座
+  s.start(`正在初始化项目底座: ${color.cyan(projectName)}...`)
+  renderTemplate(REACT_BASE_DIR, targetDir)
+
+  // 更新目标 package.json 项目名称
+  const pkgPath = path.join(targetDir, 'package.json')
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf-8'))
+  pkg.name = projectName
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n', 'utf-8')
+  s.stop('项目底座初始化完毕')
+
+  // 2. 智能依赖计算：如果选了 shadcn/ui，自动补齐前置依赖 Tailwind CSS
+  const needsTailwind = options.css === 'tailwind' || options.ui === 'shadcn'
+
+  if (needsTailwind) {
+    s.start('正在配置 Tailwind CSS...')
+    renderTemplate(path.join(PLUGINS_DIR, 'tailwind'), targetDir)
+    s.stop('Tailwind CSS 配置完成')
+  }
+
+  // 3. 叠加 shadcn/ui
+  if (options.ui === 'shadcn') {
+    s.start('正在配置 shadcn/ui...')
+    renderTemplate(path.join(PLUGINS_DIR, 'shadcn'), targetDir)
+    s.stop('shadcn/ui 配置完成')
+  }
+
+  // 4. 叠加 Zustand 状态管理
+  if (options.stateManagement === 'zustand') {
+    s.start('正在配置 Zustand 状态管理...')
+    renderTemplate(path.join(PLUGINS_DIR, 'zustand'), targetDir)
+    s.stop('Zustand 配置完成')
+  }
+
+  // 5. 交付提示（秒级完成，由用户自行按需安装依赖）
+  p.outro(color.green('项目创建成功！'))
+  console.log('\n接下来请运行以下命令启动项目：')
+  console.log(color.cyan(`  cd ${projectName}`))
+  console.log(color.cyan('  pnpm install  (或 npm install / yarn install)'))
+  console.log(color.cyan('  pnpm dev      (或 npm run dev / yarn dev)\n'))
+}

package/src/utils/renderTemplate.js

@@ -0,0 +1,58 @@
+import fs from 'fs'
+import path from 'path'
+
+/**
+ * 递归模板渲染与覆盖引擎
+ * @param {string} src 源目录
+ * @param {string} dest 目标目录
+ */
+export function renderTemplate(src, dest) {
+  const stats = fs.statSync(src)
+
+  if (stats.isDirectory()) {
+    if (['node_modules', 'pnpm-lock.yaml', 'package-lock.json', 'yarn.lock'].includes(path.basename(src))) return
+    fs.mkdirSync(dest, { recursive: true })
+    for (const file of fs.readdirSync(src)) {
+      renderTemplate(path.resolve(src, file), path.resolve(dest, file))
+    }
+    return
+  }
+
+  const filename = path.basename(src)
+
+  // 遇到 package.json 执行智能深度合并
+  if (filename === 'package.json' && fs.existsSync(dest)) {
+    const existingPkg = JSON.parse(fs.readFileSync(dest, 'utf-8'))
+    const newPkg = JSON.parse(fs.readFileSync(src, 'utf-8'))
+    const merged = deepMerge(existingPkg, newPkg)
+    fs.writeFileSync(dest, JSON.stringify(merged, null, 2) + '\n', 'utf-8')
+    return
+  }
+
+  // 普通文件直接覆盖
+  fs.copyFileSync(src, dest)
+}
+
+/**
+ * 递归合并两个 JavaScript 对象（专用于 package.json）
+ */
+export function deepMerge(target, source) {
+  const result = { ...target }
+  for (const key of Object.keys(source)) {
+    const oldVal = result[key]
+    const newVal = source[key]
+
+    if (Array.isArray(oldVal) && Array.isArray(newVal)) {
+      result[key] = Array.from(new Set([...oldVal, ...newVal]))
+    } else if (
+      oldVal && typeof oldVal === 'object' &&
+      newVal && typeof newVal === 'object' &&
+      !Array.isArray(oldVal) && !Array.isArray(newVal)
+    ) {
+      result[key] = deepMerge(oldVal, newVal)
+    } else {
+      result[key] = newVal
+    }
+  }
+  return result
+}

package/templates/electron-vite/plugins/shadcn/components.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "@renderer/assets/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@renderer/components",
+    "utils": "@renderer/lib/utils",
+    "ui": "@renderer/components/ui",
+    "lib": "@renderer/lib",
+    "hooks": "@renderer/hooks"
+  },
+  "iconLibrary": "lucide"
+}

package/templates/electron-vite/plugins/shadcn/package.json

@@ -0,0 +1,13 @@
+{
+  "dependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "tailwindcss": "^4.3.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.6.0",
+    "cn": "^0.2.6",
+    "lucide-react": "^1.45.0",
+    "shadcn": "^4.21.0",
+    "tw-animate-css": "^1.4.0"
+  }
+}

package/templates/electron-vite/plugins/shadcn/src/renderer/src/assets/globals.css

@@ -0,0 +1,125 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/templates/electron-vite/plugins/shadcn/src/renderer/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/templates/electron-vite/plugins/tailwind/electron.vite.config.ts

@@ -0,0 +1,21 @@
+import { resolve } from 'path'
+import { defineConfig } from 'electron-vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  main: {},
+  preload: {},
+  renderer: {
+    resolve: {
+      alias: {
+        '@renderer': resolve('src/renderer/src')
+      }
+    },
+    plugins: [
+      react(),
+      // @ts-expect-error
+      tailwindcss()
+    ]
+  }
+})

package/templates/electron-vite/plugins/tailwind/package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "@tailwindcss/vite": "^4.3.3",
+    "tailwindcss": "^4.3.3"
+  }
+}

package/templates/electron-vite/plugins/tailwind/src/renderer/src/assets/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/electron-vite/plugins/tailwind/src/renderer/src/main.tsx

@@ -0,0 +1,11 @@
+import './assets/globals.css'
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)

package/templates/electron-vite/plugins/zustand/package.json

@@ -0,0 +1,5 @@
+{
+  "dependencies": {
+    "zustand": "^5.0.15"
+  }
+}

package/templates/electron-vite/plugins/zustand/src/renderer/src/store/index.ts

@@ -0,0 +1 @@
+export * from './useAppStore'

package/templates/electron-vite/plugins/zustand/src/renderer/src/store/useAppStore.ts

@@ -0,0 +1,18 @@
+import { create } from 'zustand'
+
+interface AppState {
+  count: number
+  increment: () => void
+  decrement: () => void
+  reset: () => void
+}
+
+/**
+ * 应用全局状态 Store 示例
+ */
+export const useAppStore = create<AppState>((set) => ({
+  count: 0,
+  increment: () => set((state) => ({ count: state.count + 1 })),
+  decrement: () => set((state) => ({ count: state.count - 1 })),
+  reset: () => set({ count: 0 })
+}))

package/templates/electron-vite/react/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

package/templates/electron-vite/react/.prettierignore

@@ -0,0 +1,6 @@
+out
+dist
+pnpm-lock.yaml
+LICENSE.md
+tsconfig.json
+tsconfig.*.json

package/templates/electron-vite/react/.prettierrc.yaml

@@ -0,0 +1,4 @@
+singleQuote: true
+semi: false
+printWidth: 100
+trailingComma: none

package/templates/electron-vite/react/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint"]
+}

package/templates/electron-vite/react/.vscode/launch.json

@@ -0,0 +1,39 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Debug Main Process",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceRoot}",
+      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite",
+      "windows": {
+        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
+      },
+      "runtimeArgs": ["--sourcemap"],
+      "env": {
+        "REMOTE_DEBUGGING_PORT": "9222"
+      }
+    },
+    {
+      "name": "Debug Renderer Process",
+      "port": 9222,
+      "request": "attach",
+      "type": "chrome",
+      "webRoot": "${workspaceFolder}/src/renderer",
+      "timeout": 60000,
+      "presentation": {
+        "hidden": true
+      }
+    }
+  ],
+  "compounds": [
+    {
+      "name": "Debug All",
+      "configurations": ["Debug Main Process", "Debug Renderer Process"],
+      "presentation": {
+        "order": 1
+      }
+    }
+  ]
+}

package/templates/electron-vite/react/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

package/templates/electron-vite/react/README.md

@@ -0,0 +1,34 @@
+# electron-vite-react
+
+An Electron application with React and TypeScript
+
+## Recommended IDE Setup
+
+- [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+
+## Project Setup
+
+### Install
+
+```bash
+$ pnpm install
+```
+
+### Development
+
+```bash
+$ pnpm dev
+```
+
+### Build
+
+```bash
+# For windows
+$ pnpm build:win
+
+# For macOS
+$ pnpm build:mac
+
+# For Linux
+$ pnpm build:linux
+```

package/templates/electron-vite/react/build/entitlements.mac.plist

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.cs.allow-jit</key>
+    <true/>
+    <key>com.apple.security.cs.allow-unsigned-executable-memory</key>
+    <true/>
+    <key>com.apple.security.cs.allow-dyld-environment-variables</key>
+    <true/>
+  </dict>
+</plist>

package/templates/electron-vite/react/dev-app-update.yml

@@ -0,0 +1,3 @@
+provider: generic
+url: https://example.com/auto-updates
+updaterCacheDirName: electron-vite-react-updater

package/templates/electron-vite/react/electron-builder.yml

@@ -0,0 +1,43 @@
+appId: com.electron.app
+productName: electron-vite-react
+directories:
+  buildResources: build
+files:
+  - '!**/.vscode/*'
+  - '!src/*'
+  - '!electron.vite.config.{js,ts,mjs,cjs}'
+  - '!{.eslintcache,eslint.config.mjs,.prettierignore,.prettierrc.yaml,dev-app-update.yml,CHANGELOG.md,README.md}'
+  - '!{.env,.env.*,.npmrc,pnpm-lock.yaml}'
+  - '!{tsconfig.json,tsconfig.node.json,tsconfig.web.json}'
+asarUnpack:
+  - resources/**
+win:
+  executableName: electron-vite-react
+nsis:
+  artifactName: ${name}-${version}-setup.${ext}
+  shortcutName: ${productName}
+  uninstallDisplayName: ${productName}
+  createDesktopShortcut: always
+mac:
+  entitlementsInherit: build/entitlements.mac.plist
+  extendInfo:
+    - NSCameraUsageDescription: Application requests access to the device's camera.
+    - NSMicrophoneUsageDescription: Application requests access to the device's microphone.
+    - NSDocumentsFolderUsageDescription: Application requests access to the user's Documents folder.
+    - NSDownloadsFolderUsageDescription: Application requests access to the user's Downloads folder.
+  notarize: false
+dmg:
+  artifactName: ${name}-${version}.${ext}
+linux:
+  target:
+    - AppImage
+    - snap
+    - deb
+  maintainer: electronjs.org
+  category: Utility
+appImage:
+  artifactName: ${name}-${version}.${ext}
+npmRebuild: false
+publish:
+  provider: generic
+  url: https://example.com/auto-updates

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

@@ -0,0 +1,16 @@
+import { resolve } from 'path'
+import { defineConfig } from 'electron-vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  main: {},
+  preload: {},
+  renderer: {
+    resolve: {
+      alias: {
+        '@renderer': resolve('src/renderer/src')
+      }
+    },
+    plugins: [react()]
+  }
+})

package/templates/electron-vite/react/eslint.config.mjs

@@ -0,0 +1,32 @@
+import { defineConfig } from 'eslint/config'
+import tseslint from '@electron-toolkit/eslint-config-ts'
+import eslintConfigPrettier from '@electron-toolkit/eslint-config-prettier'
+import eslintPluginReact from 'eslint-plugin-react'
+import eslintPluginReactHooks from 'eslint-plugin-react-hooks'
+import eslintPluginReactRefresh from 'eslint-plugin-react-refresh'
+
+export default defineConfig(
+  { ignores: ['**/node_modules', '**/dist', '**/out'] },
+  tseslint.configs.recommended,
+  eslintPluginReact.configs.flat.recommended,
+  eslintPluginReact.configs.flat['jsx-runtime'],
+  {
+    settings: {
+      react: {
+        version: 'detect'
+      }
+    }
+  },
+  {
+    files: ['**/*.{ts,tsx}'],
+    plugins: {
+      'react-hooks': eslintPluginReactHooks,
+      'react-refresh': eslintPluginReactRefresh
+    },
+    rules: {
+      ...eslintPluginReactHooks.configs.recommended.rules,
+      ...eslintPluginReactRefresh.configs.vite.rules
+    }
+  },
+  eslintConfigPrettier
+)

package/templates/electron-vite/react/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "electron-vite-react",
+  "version": "1.0.0",
+  "description": "An Electron application with React and TypeScript",
+  "main": "./out/main/index.js",
+  "author": "example.com",
+  "homepage": "https://electron-vite.org",
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "eslint --cache .",
+    "typecheck:node": "tsc --noEmit -p tsconfig.node.json --composite false",
+    "typecheck:web": "tsc --noEmit -p tsconfig.web.json --composite false",
+    "typecheck": "npm run typecheck:node && npm run typecheck:web",
+    "start": "electron-vite preview",
+    "dev": "electron-vite dev",
+    "build": "npm run typecheck && electron-vite build",
+    "postinstall": "electron-builder install-app-deps",
+    "build:unpack": "npm run build && electron-builder --dir",
+    "build:win": "npm run build && electron-builder --win",
+    "build:mac": "electron-vite build && electron-builder --mac",
+    "build:linux": "electron-vite build && electron-builder --linux"
+  },
+  "dependencies": {
+    "@electron-toolkit/preload": "^3.0.2",
+    "@electron-toolkit/utils": "^4.0.0",
+    "electron-updater": "^6.3.9"
+  },
+  "devDependencies": {
+    "@electron-toolkit/eslint-config-prettier": "^3.0.0",
+    "@electron-toolkit/eslint-config-ts": "^3.1.0",
+    "@electron-toolkit/tsconfig": "^2.0.0",
+    "@types/node": "^22.19.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "electron": "^39.2.6",
+    "electron-builder": "^26.0.12",
+    "electron-vite": "^5.0.0",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "prettier": "^3.7.4",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "typescript": "^5.9.3",
+    "vite": "^7.2.6"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "electron",
+      "esbuild",
+      "electron-winstaller"
+    ]
+  }
+}

package/templates/electron-vite/react/pnpm-workspace.yaml

@@ -0,0 +1,4 @@
+allowBuilds:
+  electron: true
+  electron-winstaller: true
+  esbuild: true

package/templates/electron-vite/react/src/main/index.ts

@@ -0,0 +1,72 @@
+import { app, shell, BrowserWindow, ipcMain } from 'electron'
+import { join } from 'path'
+import { electronApp, optimizer, is } from '@electron-toolkit/utils'
+import icon from '../../resources/icon.png?asset'
+
+function createWindow(): void {
+  // Create the browser window.
+  const mainWindow = new BrowserWindow({
+    width: 900,
+    height: 670,
+    show: false,
+    autoHideMenuBar: true,
+    ...(process.platform === 'linux' ? { icon } : {}),
+    webPreferences: {
+      preload: join(__dirname, '../preload/index.js'),
+      sandbox: false
+    }
+  })
+
+  mainWindow.on('ready-to-show', () => {
+    mainWindow.show()
+  })
+
+  mainWindow.webContents.setWindowOpenHandler((details) => {
+    shell.openExternal(details.url)
+    return { action: 'deny' }
+  })
+
+  // HMR for renderer base on electron-vite cli.
+  // Load the remote URL for development or the local html file for production.
+  if (is.dev && process.env['ELECTRON_RENDERER_URL']) {
+    mainWindow.loadURL(process.env['ELECTRON_RENDERER_URL'])
+  } else {
+    mainWindow.loadFile(join(__dirname, '../renderer/index.html'))
+  }
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.whenReady().then(() => {
+  // Set app user model id for windows
+  electronApp.setAppUserModelId('com.electron')
+
+  // Default open or close DevTools by F12 in development
+  // and ignore CommandOrControl + R in production.
+  // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
+  app.on('browser-window-created', (_, window) => {
+    optimizer.watchWindowShortcuts(window)
+  })
+
+  createWindow()
+
+  app.on('activate', function () {
+    // On macOS it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
+  })
+})
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on('window-all-closed', () => {
+  if (process.platform !== 'darwin') {
+    app.quit()
+  }
+})
+
+// In this file you can include the rest of your app's specific main process
+// code. You can also put them in separate files and require them here.
+

package/templates/electron-vite/react/src/preload/index.d.ts

@@ -0,0 +1,8 @@
+import { ElectronAPI } from '@electron-toolkit/preload'
+
+declare global {
+  interface Window {
+    electron: ElectronAPI
+    api: unknown
+  }
+}

package/templates/electron-vite/react/src/preload/index.ts

@@ -0,0 +1,22 @@
+import { contextBridge } from 'electron'
+import { electronAPI } from '@electron-toolkit/preload'
+
+// Custom APIs for renderer
+const api = {}
+
+// Use `contextBridge` APIs to expose Electron APIs to
+// renderer only if context isolation is enabled, otherwise
+// just add to the DOM global.
+if (process.contextIsolated) {
+  try {
+    contextBridge.exposeInMainWorld('electron', electronAPI)
+    contextBridge.exposeInMainWorld('api', api)
+  } catch (error) {
+    console.error(error)
+  }
+} else {
+  // @ts-ignore (define in dts)
+  window.electron = electronAPI
+  // @ts-ignore (define in dts)
+  window.api = api
+}

package/templates/electron-vite/react/src/renderer/index.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Electron</title>
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
+    />
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/electron-vite/react/src/renderer/src/App.tsx

@@ -0,0 +1,5 @@
+function App(): React.JSX.Element {
+  return <div></div>
+}
+
+export default App

package/templates/electron-vite/react/src/renderer/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/templates/electron-vite/react/src/renderer/src/main.tsx

@@ -0,0 +1,9 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+)

package/templates/electron-vite/react/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.web.json" }]
+}

package/templates/electron-vite/react/tsconfig.node.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
+  "include": ["electron.vite.config.*", "src/main/**/*", "src/preload/**/*"],
+  "compilerOptions": {
+    "composite": true,
+    "types": ["electron-vite/node"]
+  }
+}

package/templates/electron-vite/react/tsconfig.web.json

@@ -0,0 +1,19 @@
+{
+  "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
+  "include": [
+    "src/renderer/src/env.d.ts",
+    "src/renderer/src/**/*",
+    "src/renderer/src/**/*.tsx",
+    "src/preload/*.d.ts"
+  ],
+  "compilerOptions": {
+    "composite": true,
+    "jsx": "react-jsx",
+    "baseUrl": ".",
+    "paths": {
+      "@renderer/*": [
+        "src/renderer/src/*"
+      ]
+    }
+  }
+}