create-lve 0.2.2 → 0.2.4

package/index.js

@@ -1,140 +1,164 @@
 #!/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";
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 async function main() {
   console.clear();
   const logo = `
- ${pc.cyan('█    █  █ █▀▀▀')}
- ${pc.cyan('█    █  █ █▀▀ ')} 
- ${pc.cyan('█▄▄▄  ▀▄▀ █▄▄▄')}  ${pc.gray('THE ULTRA-FAST 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 '))} ` +
-    pc.gray('The Ultra-Fast React Stack (') +
-    pc.blue('Vite') + pc.gray(' + ') +
-    pc.yellow('Oxc') + pc.gray(' + ') +
-    pc.cyan('Tailwind') + pc.gray(')')
-  );
+  p.intro(`${pc.bgCyan(pc.black(" LVE-CLI "))}`);
 
   const project = await p.group(
     {
-      path: () =>
-        p.text({
-          message: '你的项目叫什么名字？',
-          placeholder: 'react-app',
-          defaultValue: 'react-app',
-          validate: (value) => {
-            if (!value || value.length === 0) return;
-            if (value.match(/[<>:"|?*]/)) return '路径包含非法字符';
-          }
-        }),
+      path: () => p.text({
+        message: "项目名称",
+        placeholder: "my-app",
+        defaultValue: "my-app",
+        validate: (value) => {
+          if (!value || value.length === 0) return;
+          if (value.match(/[<>:"|?*]/)) return "路径包含非法字符";
+        },
+      }),
       shouldOverwrite: ({ results }) => {
         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: "选择框架",
+        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 库" },
+        ],
+      }),
     },
-    {
-      onCancel: () => {
-        p.cancel('已取消操作');
-        process.exit(0);
-      },
-    }
+    { onCancel: () => { p.cancel("操作取消"); 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');
-
+  const templateDir = path.resolve(__dirname, `template-${project.framework}`);
+  const isUno = project.cssEngine === "unocss";
   const s = p.spinner();
-  s.start('🚀 正在搬运模板...');
+
+  s.start("🛠️  正在按需装配架构...");
 
   try {
-    if (project.shouldOverwrite) {
-      await fs.emptyDir(targetDir);
-    } else {
-      await fs.ensureDir(targetDir);
-    }
+    if (project.shouldOverwrite) await fs.emptyDir(targetDir);
+    else await fs.ensureDir(targetDir);
 
     await fs.copy(templateDir, targetDir);
 
-    const renameMap = {
-      '_package.json': 'package.json',
-      '_gitignore': '.gitignore',
-      '_vscode': '.vscode',
-    };
+    const oldGit = path.join(targetDir, "_gitignore");
+    if (fs.existsSync(oldGit)) await fs.move(oldGit, path.join(targetDir, ".gitignore"));
 
-    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 });
-      }
+    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 {
+      pkg.devDependencies["tailwindcss"] = "latest";
+      pkg.devDependencies["@tailwindcss/vite"] = "latest";
     }
 
-    const pkgPath = path.join(targetDir, 'package.json');
-    if (fs.existsSync(pkgPath)) {
-      const pkg = await fs.readJson(pkgPath);
-      pkg.name = path.basename(targetDir);
-
-      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"
-      };
-      
-      if (pkg.pnpm && pkg.pnpm.overrides) {
-        pkg.pnpm.overrides.vite = "npm:@voidzero-dev/vite-plus-core@latest";
-        pkg.pnpm.overrides.vitest = "npm:@voidzero-dev/vite-plus-test@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 });
-    }
+    };
+    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");
+
+    let mainContent = await fs.readFile(mainPath, "utf-8");
+    let viteContent = await fs.readFile(viteConfigPath, "utf-8");
+
+    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
+      `;
+
+      await fs.writeFile(path.join(targetDir, "uno.config.ts"), unoConfig);
+
+      mainContent = `import 'virtual:uno.css'\n` + mainContent;
+      viteContent = `import UnoCSS from 'unocss/vite'\n` + viteContent;
+      viteContent = viteContent.replace(/plugins:\s*\[/, "plugins: [UnoCSS(), ");
+
+      if (fs.existsSync(stylePath)) await fs.remove(stylePath);
+    } else {
+      await fs.writeFile(stylePath, `@import "tailwindcss";`);
 
-    const toRemove = ['pnpm-lock.yaml', 'node_modules', 'dist'];
-    await Promise.all(toRemove.map(file => fs.remove(path.join(targetDir, file))));
+      mainContent = `import './style.css'\n` + mainContent;
+      viteContent = `import tailwindcss from '@tailwindcss/vite'\n` + viteContent;
+      viteContent = viteContent.replace(/plugins:\s*\[/, "plugins: [tailwindcss(), ");
+    }
 
-    s.stop(pc.green('项目准备就绪！'));
+    await fs.writeFile(mainPath, mainContent);
+    await fs.writeFile(viteConfigPath, viteContent);
 
-    const relativePath = path.relative(process.cwd(), targetDir);
-    const cdCmd = relativePath === '' ? '' : `cd ${relativePath}\n`;
+    const toRemove = ["pnpm-lock.yaml", "node_modules", "dist"];
+    await Promise.all(toRemove.map((file) => fs.remove(path.join(targetDir, file))));
 
-    p.note(
-      pc.cyan(`${cdCmd}vp install\nvp dev`),
-      '快速开始指南'
-    );
+    s.stop(pc.green("装配完成！"));
 
-    p.outro(
-      `${pc.magenta('✨ Happy Coding!')}\n` +
-      `${pc.gray(' ==== VitePlus + OXC + React ====')}`
-    );
+    p.note(pc.cyan(`cd ${project.path}\nvp install\nvp dev`), "快速开始");
+    p.outro(`${pc.magenta("✨ 已经为你准备好了极致的开发环境!")}\n${pc.gray(`==== ${project.framework} + ${project.cssEngine} ====`)}`);
 
   } catch (err) {
-    s.stop('失败');
-    console.error(pc.red(err));
+    s.stop(pc.red("手术失败"));
+    console.error(err);
     process.exit(1);
   }
 }

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "create-lve",
-  "version": "0.2.2",
+  "version": "0.2.4",
   "type": "module",
   "bin": {
     "create-lve": "index.js"
   },
   "files": [
     "index.js",
-    "template"
+    "template-react",
+    "template-vue"
   ],
   "dependencies": {
     "@clack/prompts": "^1.1.0",

package/template-react/.vite-hooks/pre-commit

@@ -0,0 +1 @@
+vp staged

package/template-react/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "VoidZero.vite-plus-extension-pack"]
+}

package/template-react/.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.oxc": "explicit"
+  }
+}

package/{template → template-react}/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>react-project</title>
   </head>

package/{template/_package.json → template-react/package.json}

@@ -11,10 +11,8 @@
     "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",

package/template-react/public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>

package/template-react/src/App.tsx

@@ -0,0 +1,51 @@
+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 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 
+          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>
+  )
+}

package/{template → template-react}/src/main.tsx

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

package/{template → template-react}/vite.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig } from "vite-plus"
 import react from "@vitejs/plugin-react"
-import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
@@ -16,7 +15,6 @@ export default defineConfig({
           ["babel-plugin-react-compiler", { target: "19" }]
         ],
       },
-    } as any), 
-    tailwindcss()
+    } as any),
   ],
 });

package/template-vue/.vite-hooks/pre-commit

@@ -0,0 +1 @@
+vp staged

package/template-vue/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "VoidZero.vite-plus-extension-pack"]
+}

package/template-vue/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>vite-project</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/template-vue/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "react-app",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vp dev",
+    "build": "vue-tsc -b && vp build",
+    "preview": "vp preview",
+    "prepare": "vp config"
+  },
+  "dependencies": {
+    "vue": "latest"
+  },
+  "devDependencies": {
+    "@types/node": "^24.12.2",
+    "@vitejs/plugin-vue": "^6.0.5",
+    "@vue/tsconfig": "^0.9.1",
+    "typescript": "~6.0.2",
+    "vite": "npm:@voidzero-dev/vite-plus-core@latest",
+    "vite-plus": "latest",
+    "vue-tsc": "^3.2.6"
+  },
+  "packageManager": "pnpm@10.33.0",
+  "pnpm": {
+    "overrides": {
+      "vite": "npm:@voidzero-dev/vite-plus-core@latest",
+      "vitest": "npm:@voidzero-dev/vite-plus-test@latest"
+    }
+  }
+}