create-lve 0.2.3 → 0.2.5

package/index.js

@@ -1,161 +1,322 @@
 #!/usr/bin/env node
 
-import * as p from "@clack/prompts";
-import pc from "picocolors";
-import fs from "fs-extra";
-import path from "node:path";
-import { fileURLToPath } from "node:url";
+import * as p from '@clack/prompts'
+import pc from 'picocolors'
+import fs from 'fs-extra'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { execSync, spawn } from 'node:child_process'
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const getReactAppTemplate = (isUno) => {
+  const logoClass = isUno
+    ? 'animate-spin animate-duration-20s animate-linear animate-infinite'
+    : 'animate-[spin_20s_linear_infinite]'
+
+  return `
+import { useState } from 'react'
+import reactLogo from './assets/react.svg'
+
+export function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div className="max-w-7xl mx-auto p-8 text-center font-sans antialiased text-[#213547] dark:text-zinc-200 min-h-dvh flex flex-col justify-center items-center">
+      <div className="flex justify-center gap-12 mb-12">
+        <a
+          href="https://viteplus.dev"
+          target="_blank"
+          rel="noreferrer"
+          className="transition-all duration-300 hover:drop-shadow-[0_0_2em_#646cffaa]"
+        >
+          <img src="/favicon.svg" className="h-24 p-6" alt="VitePlus logo" />
+        </a>
+        <a
+          href="https://react.dev"
+          target="_blank"
+          rel="noreferrer"
+          className="transition-all duration-300 hover:drop-shadow-[0_0_2em_#61dafbaa]"
+        >
+          <img
+            src={reactLogo}
+            className="h-24 p-6 ${logoClass}"
+            alt="React logo"
+          />
+        </a>
+      </div>
+
+      <h1 className="text-5xl font-bold leading-[1.1] mb-8">VitePlus + React</h1>
+
+      <div className="p-8 space-y-4 flex flex-col items-center">
+        <button
+          onClick={() => setCount((count) => count + 1)}
+          className="rounded-lg border border-transparent px-5 py-2.5 text-base font-medium bg-[#f9f9f9] dark:bg-zinc-800 cursor-pointer transition-colors hover:border-[#646cff] outline-none"
+        >
+          count is {count}
+        </button>
+        <p className="text-zinc-500">
+          Edit{' '}
+          <code className="bg-[#f1f1f1] dark:bg-zinc-800 px-1.5 py-0.5 rounded font-mono">
+            src/App.tsx
+          </code>{' '}
+          to test HMR
+        </p>
+      </div>
+
+      <p className="text-[#888] mt-8">
+        Check out{' '}
+        <a
+          href="https://github.com/voidzero-dev/vite-plus"
+          target="_blank"
+          rel="noreferrer"
+          className="font-medium text-[#646cff] hover:text-[#535bf2]"
+        >
+          VitePlus
+        </a>
+        , the unified toolchain for the web.
+      </p>
+
+      <p className="text-[#888] mt-4 text-sm">
+        Click on the VitePlus and React logos to learn more
+      </p>
+    </div>
+  )
+}
+`.trim()
+}
 
 async function main() {
-  console.clear();
+  console.clear()
   const logo = `
- ${pc.cyan("█    █  █ █▀▀▀")}
- ${pc.cyan("█    █  █ █▀▀ ")} 
- ${pc.cyan("█▄▄▄  ▀▄▀ █▄▄▄")}  ${pc.gray("THE ULTRA-FAST STACK")}
-  `;
-
-  console.log(logo);
-  p.intro(
-    `${pc.bgCyan(pc.black(" LVE-CLI "))} ` +
-      pc.gray("The Ultra-Fast Frontend Stack (") +
-      pc.blue("Vite") +
-      pc.gray(" + ") +
-      pc.yellow("Oxc") +
-      pc.gray(" + ") +
-      pc.cyan("Tailwind") +
-      pc.gray(")"),
-  );
+    ${pc.cyan('█    █  █ █▀▀▀')}
+    ${pc.cyan('█    █  █ █▀▀ ')} 
+    ${pc.cyan('█▄▄▄  ▀▄▀ █▄▄▄')}  ${pc.gray('THE ULTRA-FAST FRONTEND STACK')}
+  `
+
+  console.log(logo)
+  p.intro(`${pc.bgCyan(pc.black(' LVE-CLI '))}`)
 
   const project = await p.group(
     {
       path: () =>
         p.text({
-          message: "你的项目叫什么名字？",
-          placeholder: "react-app",
-          defaultValue: "react-app",
+          message: '项目名称',
+          placeholder: 'react-app',
+          defaultValue: 'react-app',
           validate: (value) => {
-            if (!value || value.length === 0) return;
-            if (value.match(/[<>:"|?*]/)) return "路径包含非法字符";
+            if (!value || value.length === 0) return
+            if (value.match(/[<>:"|?*]/)) return '路径包含非法字符'
           },
         }),
       shouldOverwrite: ({ results }) => {
-        const targetDir = path.resolve(process.cwd(), results.path);
+        const targetDir = path.resolve(process.cwd(), results.path)
         if (fs.existsSync(targetDir) && fs.readdirSync(targetDir).length > 0) {
-          return p.confirm({
-            message: `⚠️  目录 ${pc.yellow(results.path)} 已存在且不为空，是否清空？`,
-            initialValue: false,
-          });
+          return p.confirm({ message: `目录已存在，是否清空？`, initialValue: false })
         }
       },
       framework: () =>
         p.select({
-          message: "选择一个你喜欢的工具",
+          message: '选择框架',
           options: [
-            { value: "react", label: "React 19", hint: "VitePlus + Compiler" },
-            { value: "vue", label: "Vue 3", hint: "VitePlus + Optimized" },
+            { value: 'react', label: 'React 19', hint: 'VitePlus + Compiler' },
+            { value: 'vue', label: 'Vue 3', hint: 'VitePlus + Optimized' },
           ],
         }),
+      cssEngine: () =>
+        p.select({
+          message: '选择 CSS 引擎',
+          options: [
+            {
+              value: 'unocss',
+              label: 'UnoCSS',
+              hint: '⚡️ 战机级性能：动态代码注入，实现源码级‘无感’混淆',
+            },
+            {
+              value: 'tailwind',
+              label: 'Tailwind v4',
+              hint: '🛡️ 装甲级稳定：v4 引擎重构，完美适配所有主流 UI 库',
+            },
+          ],
+        }),
+      install: () =>
+        p.confirm({
+          message: '是否现在自动安装依赖？',
+          initialValue: true,
+        }),
     },
     {
       onCancel: () => {
-        p.cancel("已取消操作");
-        process.exit(0);
+        p.cancel('操作取消')
+        process.exit(0)
       },
     },
-  );
+  )
+
+  if (!project) process.exit(0)
 
-  if (project.shouldOverwrite === false) {
-    p.cancel("操作终止：请更换目录名后再试");
-    process.exit(0);
+  const targetDir = path.resolve(process.cwd(), project.path)
+  const templateDir = path.resolve(__dirname, `template-${project.framework}`)
+  const isUno = project.cssEngine === 'unocss'
+  const s = p.spinner()
+
+  try {
+    execSync('vp --version', { stdio: 'ignore' })
+  } catch {
+    p.log.error(pc.red('未检测到 VitePlus (vp) 环境'))
+    p.note(
+      pc.white(
+        `请先安装 vp 工具链:\n${pc.cyan('npm install -g @voidzero-dev/vite-plus')}\n\n详情请参考: ${pc.underline('https://viteplus.dev/guide/')}`,
+      ),
+      '环境缺失',
+    )
+    process.exit(1)
   }
 
-  const targetDir = path.resolve(process.cwd(), project.path);
-  const templateDir = path.resolve(__dirname, `template-${project.framework}`);
-  const frameworkName = project.framework === "react" ? "React" : "Vue 3";
-  const s = p.spinner();
-  s.start("🚀 正在搬运模板...");
+  s.start('🛠️  正在按需装配架构...')
 
   try {
-    if (project.shouldOverwrite) {
-      await fs.emptyDir(targetDir);
+    if (project.shouldOverwrite) await fs.emptyDir(targetDir)
+    else await fs.ensureDir(targetDir)
+
+    await fs.copy(templateDir, targetDir)
+
+    try {
+      execSync('git init', { cwd: targetDir, stdio: 'ignore' })
+    } catch {}
+
+    const oldGit = path.join(targetDir, '_gitignore')
+    if (fs.existsSync(oldGit)) await fs.move(oldGit, path.join(targetDir, '.gitignore'))
+
+    const pkgPath = path.join(targetDir, 'package.json')
+    const pkg = await fs.readJson(pkgPath)
+    pkg.name = path.basename(targetDir)
+
+    if (isUno) {
+      pkg.devDependencies['unocss'] = 'latest'
     } else {
-      await fs.ensureDir(targetDir);
+      pkg.devDependencies['tailwindcss'] = 'latest'
+      pkg.devDependencies['@tailwindcss/vite'] = 'latest'
+    }
+
+    pkg.pnpm = {
+      ...pkg.pnpm,
+      overrides: {
+        ...pkg.pnpm?.overrides,
+        vite: 'npm:@voidzero-dev/vite-plus-core@latest',
+        vitest: 'npm:@voidzero-dev/vite-plus-test@latest',
+      },
     }
+    await fs.writeJson(pkgPath, pkg, { spaces: 2 })
+
+    const mainFile = project.framework === 'vue' ? 'src/main.ts' : 'src/main.tsx'
+    const mainPath = path.join(targetDir, mainFile)
+    const viteConfigPath = path.join(targetDir, 'vite.config.ts')
+    const stylePath = path.join(targetDir, 'src/style.css')
 
-    await fs.copy(templateDir, targetDir);
+    let mainContent = await fs.readFile(mainPath, 'utf-8')
+    let viteContent = await fs.readFile(viteConfigPath, 'utf-8')
 
-    const renameMap = {
-      _gitignore: ".gitignore",
-    };
+    const appFile = project.framework === 'vue' ? 'src/App.vue' : 'src/App.tsx'
+    const appPath = path.join(targetDir, appFile)
 
-    for (const [oldFile, newFile] of Object.entries(renameMap)) {
-      const oldPath = path.join(targetDir, oldFile);
-      if (fs.existsSync(oldPath)) {
-        await fs.move(oldPath, path.join(targetDir, newFile), { overwrite: true });
-      }
+    if (project.framework === 'react') {
+      await fs.writeFile(appPath, getReactAppTemplate(isUno))
     }
 
-    const pkgPath = path.join(targetDir, "package.json");
-    if (fs.existsSync(pkgPath)) {
-      const pkg = await fs.readJson(pkgPath);
-      pkg.name = path.basename(targetDir);
-      if (project.framework === "react") {
-        pkg.dependencies = {
-          ...pkg.dependencies,
-          react: "latest",
-          "react-dom": "latest",
-        };
-
-        pkg.devDependencies = {
-          ...pkg.devDependencies,
-          "vite-plus": "latest",
-          tailwindcss: "latest",
-          "@tailwindcss/vite": "latest",
-          "babel-plugin-react-compiler": "latest",
-        };
-      } else {
-        pkg.dependencies = {
-          ...pkg.dependencies,
-          vue: "latest",
-        };
-
-        pkg.devDependencies = {
-          ...pkg.devDependencies,
-          "vite-plus": "latest",
-          tailwindcss: "latest",
-          "@tailwindcss/vite": "latest",
-        };
-      }
-      pkg.pnpm = pkg.pnpm || {};
-      pkg.pnpm.overrides = {
-        ...pkg.pnpm.overrides,
-        vite: "npm:@voidzero-dev/vite-plus-core@latest",
-        vitest: "npm:@voidzero-dev/vite-plus-test@latest",
-      };
-      await fs.writeJson(pkgPath, pkg, { spaces: 2 });
+    const pluginCode = isUno ? 'UnoCSS()' : 'tailwindcss()'
+    const pluginImport = isUno
+      ? "import UnoCSS from 'unocss/vite'\n"
+      : "import tailwindcss from '@tailwindcss/vite'\n"
+
+    viteContent = pluginImport + viteContent
+    viteContent = viteContent.replace('/* VITE_PLUS_PLUGINS */', `${pluginCode}, `)
+
+    if (isUno) {
+      const unoConfig = `import { defineConfig, presetWind3, transformerCompileClass } from 'unocss'
+
+export default defineConfig({
+  presets: [presetWind3()],
+  transformers: [
+    {
+      name: 'auto-uno-injector',
+      enforce: 'pre',
+      idFilter(id) { return /\\.[tj]sx$|\\.vue$/.test(id) },
+      async transform(code) {
+        const classRegex = /(?:class|className)=["']([^"']+)["']/g
+        let match
+        while ((match = classRegex.exec(code.original))) {
+          const content = match[1]
+          if (content.trim() && !content.includes(':uno:')) {
+            const insertPos = match.index + match[0].indexOf(content)
+            code.appendLeft(insertPos, ':uno: ')
+          }
+        }
+      },
+    },
+    transformerCompileClass({
+      classPrefix: 'kfc-',
+    }),
+  ],
+})\n`
+      await fs.writeFile(path.join(targetDir, 'uno.config.ts'), unoConfig)
+
+      mainContent = `import 'virtual:uno.css'\n` + mainContent
+      if (fs.existsSync(stylePath)) await fs.remove(stylePath)
+    } else {
+      await fs.writeFile(stylePath, `@import "tailwindcss";`)
+      mainContent = `import './style.css'\n` + mainContent
     }
 
-    const toRemove = ["pnpm-lock.yaml", "node_modules", "dist"];
-    await Promise.all(toRemove.map((file) => fs.remove(path.join(targetDir, file))));
+    await fs.writeFile(mainPath, mainContent)
+    await fs.writeFile(viteConfigPath, viteContent)
+
+    const toRemove = ['pnpm-lock.yaml', 'node_modules', 'dist']
+    await Promise.all(toRemove.map((file) => fs.remove(path.join(targetDir, file))))
 
-    s.stop(pc.green("项目准备就绪！"));
+    s.message(pc.green('架构装配完成，正在执行 vp install'))
 
-    const relativePath = path.relative(process.cwd(), targetDir);
-    const cdCmd = relativePath === "" ? "" : `cd ${relativePath}\n`;
+    try {
+      await new Promise((resolve, reject) => {
+        const child = spawn('vp', ['install'], {
+          cwd: targetDir,
+          stdio: 'pipe',
+          shell: process.platform === 'win32',
+        })
+
+        child.on('close', (code) => {
+          if (code === 0) resolve()
+          else reject(new Error(`Exit code: ${code}`))
+        })
+      })
+
+      s.message(pc.green('正在执行 vp fmt 优化代码结构'))
+      await new Promise((resolve) => setTimeout(resolve, 500))
+
+      try {
+        execSync('vp fmt', { cwd: targetDir, stdio: 'ignore' })
+      } catch {}
+
+      s.stop(pc.green('全套环境装配就绪'))
+    } catch {
+      s.stop(pc.red('自动安装失败'))
+      p.log.warn('请进入目录后手动尝试执行 vp install')
+    }
 
-    p.note(pc.cyan(`${cdCmd}vp install\nvp dev`), "快速开始指南");
+    const nextSteps = project.install
+      ? `cd ${project.path}\nvp dev`
+      : `cd ${project.path}\nvp install\nvp dev`
 
+    p.note(pc.cyan(nextSteps), '快速开始')
     p.outro(
-      `${pc.magenta("✨ Happy Coding!")}\n` +
-        `${pc.gray(` ==== VitePlus + OXC + ${frameworkName} ====`)}`,
-    );
+      `${pc.magenta('✨ 已经为你准备好了极致的开发环境!')}\n` +
+        `${pc.gray(`==== ${project.framework} + ${project.cssEngine} ====`)}`,
+    )
   } catch (err) {
-    s.stop("失败");
-    console.error(pc.red(err));
-    process.exit(1);
+    s.stop(pc.red('手术失败'))
+    console.error(err)
+    process.exit(1)
   }
 }
 
-main();
+main()

package/package.json

@@ -1,7 +1,6 @@
 {
   "name": "create-lve",
-  "version": "0.2.3",
-  "type": "module",
+  "version": "0.2.5",
   "bin": {
     "create-lve": "index.js"
   },
@@ -10,9 +9,29 @@
     "template-react",
     "template-vue"
   ],
+  "type": "module",
+  "scripts": {
+    "fmt": "oxfmt",
+    "fmt:check": "oxfmt --check",
+    "lint": "oxlint",
+    "lint:fix": "oxlint --fix"
+  },
   "dependencies": {
     "@clack/prompts": "^1.1.0",
-    "picocolors": "^1.1.1",
-    "fs-extra": "^11.2.0"
+    "fs-extra": "^11.2.0",
+    "picocolors": "^1.1.1"
+  },
+  "devDependencies": {
+    "husky": "^9.1.7",
+    "lint-staged": "^16.4.0",
+    "oxfmt": "^0.46.0",
+    "oxlint": "^1.61.0"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,mjs,cjs}": [
+      "oxfmt --write",
+      "oxlint --fix"
+    ],
+    "*.json": "oxfmt --write"
   }
 }

package/template-react/package.json

@@ -1,20 +1,17 @@
 {
-  "name": "react-project",
+  "name": "react-app",
   "version": "0.0.0",
   "private": true,
   "type": "module",
   "scripts": {
     "dev": "vp dev",
     "build": "tsc -b && vp build",
-    "lint": "eslint .",
     "preview": "vp preview",
     "prepare": "vp config"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.2.1",
     "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "tailwindcss": "^4.2.1"
+    "react-dom": "^19.2.4"
   },
   "devDependencies": {
     "@types/node": "^24.10.1",
@@ -26,8 +23,8 @@
     "vite": "npm:@voidzero-dev/vite-plus-core@latest",
     "vite-plus": "latest"
   },
-    "packageManager": "pnpm@10.32.1",
-    "pnpm": {
+  "packageManager": "pnpm@10.32.1",
+  "pnpm": {
     "overrides": {
       "vite": "npm:@voidzero-dev/vite-plus-core@latest",
       "vitest": "npm:@voidzero-dev/vite-plus-test@latest"

package/template-react/src/App.tsx

@@ -7,45 +7,62 @@ export function App() {
   return (
     <div className="max-w-7xl mx-auto p-8 text-center font-sans antialiased text-[#213547] dark:text-zinc-200 min-h-dvh flex flex-col justify-center items-center">
       <div className="flex justify-center gap-12 mb-12">
-        <a 
-          href="https://viteplus.dev" 
-          target="_blank" 
+        <a
+          href="https://viteplus.dev"
+          target="_blank"
           rel="noreferrer"
           className="transition-all duration-300 hover:drop-shadow-[0_0_2em_#646cffaa]"
         >
           <img src="/favicon.svg" className="h-24 p-6" alt="VitePlus logo" />
         </a>
-        <a 
-          href="https://react.dev" 
-          target="_blank" 
+        <a
+          href="https://react.dev"
+          target="_blank"
           rel="noreferrer"
           className="transition-all duration-300 hover:drop-shadow-[0_0_2em_#61dafbaa]"
         >
-          <img src={reactLogo} className="h-24 p-6 animate-[spin_20s_linear_infinite]" alt="React logo" />
+          <img
+            src={reactLogo}
+            className="h-24 p-6 animate-[spin_20s_linear_infinite]"
+            alt="React logo"
+          />
         </a>
       </div>
 
       <h1 className="text-5xl font-bold leading-[1.1] mb-8">VitePlus + React</h1>
 
       <div className="p-8 space-y-4 flex flex-col items-center">
-        <button 
+        <button
           onClick={() => setCount((count) => count + 1)}
           className="rounded-lg border border-transparent px-5 py-2.5 text-base font-medium bg-[#f9f9f9] dark:bg-zinc-800 cursor-pointer transition-colors hover:border-[#646cff] outline-none"
         >
           count is {count}
         </button>
         <p className="text-zinc-500">
-          Edit <code className="bg-[#f1f1f1] dark:bg-zinc-800 px-1.5 py-0.5 rounded font-mono">src/App.tsx</code> to test HMR
+          Edit{' '}
+          <code className="bg-[#f1f1f1] dark:bg-zinc-800 px-1.5 py-0.5 rounded font-mono">
+            src/App.tsx
+          </code>{' '}
+          to test HMR
         </p>
       </div>
 
       <p className="text-[#888] mt-8">
-        Check out <a href="https://github.com/voidzero-dev/vite-plus" target="_blank" rel="noreferrer" className="font-medium text-[#646cff] hover:text-[#535bf2]">VitePlus</a>, the unified toolchain for the web.
+        Check out{' '}
+        <a
+          href="https://github.com/voidzero-dev/vite-plus"
+          target="_blank"
+          rel="noreferrer"
+          className="font-medium text-[#646cff] hover:text-[#535bf2]"
+        >
+          VitePlus
+        </a>
+        , the unified toolchain for the web.
       </p>
-      
+
       <p className="text-[#888] mt-4 text-sm">
         Click on the VitePlus and React logos to learn more
       </p>
     </div>
   )
-}
+}

package/template-react/src/main.tsx

@@ -1,6 +1,5 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import './index.css'
 import { App } from './App.tsx'
 
 createRoot(document.getElementById('root')!).render(

package/template-react/vite.config.ts

@@ -1,22 +1,19 @@
-import { defineConfig } from "vite-plus"
-import react from "@vitejs/plugin-react"
-import tailwindcss from '@tailwindcss/vite'
+import { defineConfig } from 'vite-plus'
+import react from '@vitejs/plugin-react'
 
 // https://vite.dev/config/
 export default defineConfig({
-  fmt: { semi: false, singleQuote: true},
+  fmt: { semi: false, singleQuote: true },
   staged: {
-    "*": "vp check --fix",
+    '*': 'vp check --fix',
   },
   lint: { options: { typeAware: true, typeCheck: true } },
   plugins: [
     react({
       babel: {
-        plugins: [
-          ["babel-plugin-react-compiler", { target: "19" }]
-        ],
+        plugins: [['babel-plugin-react-compiler', { target: '19' }]],
       },
-    } as any), 
-    tailwindcss()
+    }),
+    /* VITE_PLUS_PLUGINS */
   ],
-});
+})

package/template-vue/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-app",
+  "name": "vue-app",
   "version": "0.0.0",
   "private": true,
   "type": "module",
@@ -10,16 +10,12 @@
     "prepare": "vp config"
   },
   "dependencies": {
-    "@tailwindcss/vite": "^4.2.1",
-    "tailwindcss": "^4.2.1",
     "vue": "latest"
   },
   "devDependencies": {
-    "@tailwindcss/vite": "latest",
     "@types/node": "^24.12.2",
     "@vitejs/plugin-vue": "^6.0.5",
     "@vue/tsconfig": "^0.9.1",
-    "tailwindcss": "latest",
     "typescript": "~6.0.2",
     "vite": "npm:@voidzero-dev/vite-plus-core@latest",
     "vite-plus": "latest",

package/template-vue/src/main.ts

@@ -1,5 +1,4 @@
 import { createApp } from 'vue'
-import './style.css'
 import App from './App.vue'
 
 createApp(App).mount('#app')

package/template-vue/src/style.css

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

package/template-vue/vite.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from 'vite-plus'
 import vue from '@vitejs/plugin-vue'
-import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -9,5 +8,8 @@ export default defineConfig({
     '*': 'vp check --fix',
   },
   lint: { options: { typeAware: true, typeCheck: true } },
-  plugins: [vue(), tailwindcss()],
+  plugins: [
+    vue(),
+    /* VITE_PLUS_PLUGINS */
+  ],
 })

package/template-react/src/index.css

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