create-lve 0.2.4 → 0.2.5

package/index.js

@@ -1,166 +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 FRONTEND STACK")}
-  `;
+    ${pc.cyan('█    █  █ █▀▀▀')}
+    ${pc.cyan('█    █  █ █▀▀ ')} 
+    ${pc.cyan('█▄▄▄  ▀▄▀ █▄▄▄')}  ${pc.gray('THE ULTRA-FAST FRONTEND STACK')}
+  `
 
-  console.log(logo);
-  p.intro(`${pc.bgCyan(pc.black(" LVE-CLI "))}`);
+  console.log(logo)
+  p.intro(`${pc.bgCyan(pc.black(' LVE-CLI '))}`)
 
   const project = await p.group(
     {
-      path: () => p.text({
-        message: "项目名称",
-        placeholder: "my-app",
-        defaultValue: "my-app",
-        validate: (value) => {
-          if (!value || value.length === 0) return;
-          if (value.match(/[<>:"|?*]/)) return "路径包含非法字符";
-        },
-      }),
+      path: () =>
+        p.text({
+          message: '项目名称',
+          placeholder: 'react-app',
+          defaultValue: 'react-app',
+          validate: (value) => {
+            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: `目录已存在，是否清空？`, initialValue: false });
+          return p.confirm({ message: `目录已存在，是否清空？`, initialValue: false })
         }
       },
-      framework: () => p.select({
-        message: "选择框架",
-        options: [
-          { 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 库" },
-        ],
-      }),
+      framework: () =>
+        p.select({
+          message: '选择框架',
+          options: [
+            { 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)
+      },
     },
-    { onCancel: () => { 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();
+  if (!project) process.exit(0)
 
-  s.start("🛠️  正在按需装配架构...");
+  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 {
-    if (project.shouldOverwrite) await fs.emptyDir(targetDir);
-    else await fs.ensureDir(targetDir);
+    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)
+  }
+
+  s.start('🛠️  正在按需装配架构...')
+
+  try {
+    if (project.shouldOverwrite) await fs.emptyDir(targetDir)
+    else await fs.ensureDir(targetDir)
+
+    await fs.copy(templateDir, 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 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);
+    const pkgPath = path.join(targetDir, 'package.json')
+    const pkg = await fs.readJson(pkgPath)
+    pkg.name = path.basename(targetDir)
 
     if (isUno) {
-      pkg.devDependencies["unocss"] = "latest";
+      pkg.devDependencies['unocss'] = 'latest'
     } else {
-      pkg.devDependencies["tailwindcss"] = "latest";
-      pkg.devDependencies["@tailwindcss/vite"] = "latest";
+      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 });
+        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')
 
-    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");
+    let mainContent = await fs.readFile(mainPath, 'utf-8')
+    let viteContent = await fs.readFile(viteConfigPath, 'utf-8')
+
+    const appFile = project.framework === 'vue' ? 'src/App.vue' : 'src/App.tsx'
+    const appPath = path.join(targetDir, appFile)
+
+    if (project.framework === 'react') {
+      await fs.writeFile(appPath, getReactAppTemplate(isUno))
+    }
 
-    let mainContent = await fs.readFile(mainPath, "utf-8");
-    let viteContent = await fs.readFile(viteConfigPath, "utf-8");
+    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 id.match(/\\.[tj]sx$|\\.vue$/)
-            },
-            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
-      `;
+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
+    }
 
-      await fs.writeFile(path.join(targetDir, "uno.config.ts"), unoConfig);
+    await fs.writeFile(mainPath, mainContent)
+    await fs.writeFile(viteConfigPath, viteContent)
 
-      mainContent = `import 'virtual:uno.css'\n` + mainContent;
-      viteContent = `import UnoCSS from 'unocss/vite'\n` + viteContent;
-      viteContent = viteContent.replace(/plugins:\s*\[/, "plugins: [UnoCSS(), ");
+    const toRemove = ['pnpm-lock.yaml', 'node_modules', 'dist']
+    await Promise.all(toRemove.map((file) => fs.remove(path.join(targetDir, file))))
 
-      if (fs.existsSync(stylePath)) await fs.remove(stylePath);
-    } else {
-      await fs.writeFile(stylePath, `@import "tailwindcss";`);
+    s.message(pc.green('架构装配完成，正在执行 vp install'))
 
-      mainContent = `import './style.css'\n` + mainContent;
-      viteContent = `import tailwindcss from '@tailwindcss/vite'\n` + viteContent;
-      viteContent = viteContent.replace(/plugins:\s*\[/, "plugins: [tailwindcss(), ");
-    }
+    try {
+      await new Promise((resolve, reject) => {
+        const child = spawn('vp', ['install'], {
+          cwd: targetDir,
+          stdio: 'pipe',
+          shell: process.platform === 'win32',
+        })
 
-    await fs.writeFile(mainPath, mainContent);
-    await fs.writeFile(viteConfigPath, viteContent);
+        child.on('close', (code) => {
+          if (code === 0) resolve()
+          else reject(new Error(`Exit code: ${code}`))
+        })
+      })
 
-    const toRemove = ["pnpm-lock.yaml", "node_modules", "dist"];
-    await Promise.all(toRemove.map((file) => fs.remove(path.join(targetDir, file))));
+      s.message(pc.green('正在执行 vp fmt 优化代码结构'))
+      await new Promise((resolve) => setTimeout(resolve, 500))
 
-    s.stop(pc.green("装配完成！"));
+      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(`cd ${project.path}\nvp install\nvp dev`), "快速开始");
-    p.outro(`${pc.magenta("✨ 已经为你准备好了极致的开发环境!")}\n${pc.gray(`==== ${project.framework} + ${project.cssEngine} ====`)}`);
+    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('✨ 已经为你准备好了极致的开发环境!')}\n` +
+        `${pc.gray(`==== ${project.framework} + ${project.cssEngine} ====`)}`,
+    )
   } catch (err) {
-    s.stop(pc.red("手术失败"));
-    console.error(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.4",
-  "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,12 +1,11 @@
 {
-  "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"
   },
@@ -24,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/vite.config.ts

@@ -1,20 +1,19 @@
-import { defineConfig } from "vite-plus"
-import react from "@vitejs/plugin-react"
+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),
+    }),
+    /* 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",

package/template-vue/vite.config.ts

@@ -8,5 +8,8 @@ export default defineConfig({
     '*': 'vp check --fix',
   },
   lint: { options: { typeAware: true, typeCheck: true } },
-  plugins: [vue()],
+  plugins: [
+    vue(),
+    /* VITE_PLUS_PLUGINS */
+  ],
 })