create-lve 0.6.30 → 0.6.31

package/README.md

@@ -0,0 +1,40 @@
+# create-lve
+
+THE ULTRA-FAST FRONTEND STACK
+
+```bash
+npx create-lve
+```
+
+## Options
+
+| Template | Description |
+| --- | --- |
+| React 19 | react-router + vite-plus |
+| React 19 | TanStack Router + Vite 8 |
+| Vue 3 | vue-router + vite-plus |
+
+All templates ship with **Tailwind CSS v4** out of the box.
+
+## Quick Start
+
+```bash
+# Interactive mode
+npx create-lve
+
+# Default (React 19 + react-router + Tailwind)
+npx create-lve my-app
+
+# Skip all prompts
+npx create-lve --default my-app
+```
+
+## What's Inside
+
+- React 19 / Vue 3
+- Tailwind CSS v4
+- TypeScript
+- [vite-plus](https://github.com/voidzero-dev/vite-plus) (React & Vue templates) or Vite 8 (TanStack Router template)
+- React Compiler (via `babel-plugin-react-compiler`)
+- oxfmt + oxlint
+- pnpm

package/config.js

@@ -7,88 +7,7 @@ import { execSync, spawn } from 'node:child_process'
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url))
 
-const BASE_STYLE = `@layer base {
-  /* Scrollbar */
-  * {
-    scrollbar-width: thin;
-    scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
-  }
-  ::-webkit-scrollbar {
-    width: 6px;
-    height: 6px;
-  }
-  ::-webkit-scrollbar-thumb {
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: 3px;
-  }
-  ::-webkit-scrollbar-track {
-    background: transparent;
-  }
-  .dark * {
-    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
-  }
-  .dark ::-webkit-scrollbar-thumb {
-    background: rgba(255, 255, 255, 0.15);
-  }
-
-  /* 文本渲染 */
-  html {
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
-  }
-
-  /* 选中色 */
-  ::selection {
-    background: rgba(59, 130, 246, 0.2);
-  }
-
-  /* 触摸优化 */
-  body {
-    -webkit-tap-highlight-color: transparent;
-  }
-}
-
-/* 链接和图片禁止拖拽 + 长按菜单 + 点击高亮 */
-a,
-img {
-  -webkit-user-drag: none;
-  -webkit-tap-highlight-color: transparent;
-  -webkit-touch-callout: none;
-}
-
-/* input number 去掉上下箭头 */
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* textarea 禁止拖拽调整大小 */
-textarea {
-  resize: none;
-}
-
-/* details/summary 去掉默认三角 */
-summary {
-  list-style: none;
-}
-summary::marker {
-  display: none;
-  content: '';
-}
-
-/* focus 焦点环 */
-a:focus-visible {
-  outline: 2px solid var(--color-primary, #3b82f6);
-  outline-offset: 2px;
-  border-radius: 2px;
-}
-`
-
-const vitePlusDeps = (isUno) => ({
-  dependencies: isUno ? { '@unocss/reset': 'latest' } : undefined,
-  devDependencies: isUno ? { unocss: 'latest' } : undefined,
+const vitePlusDeps = () => ({
   overrides: {
     vite: 'npm:@voidzero-dev/vite-plus-core@latest',
     vitest: 'npm:@voidzero-dev/vite-plus-test@latest',
@@ -97,97 +16,10 @@ const vitePlusDeps = (isUno) => ({
 
 const FRAMEWORK_CONFIG = {
   react: { deps: vitePlusDeps },
+  'react-tanstackrouter': { deps: () => ({}) },
   vue: { deps: vitePlusDeps },
 }
 
-const CSS_STRATEGIES = {
-  unocss: {
-    pluginImport: "import UnoCSS from 'unocss/vite'\n",
-    pluginCode: 'UnoCSS(), ',
-    entryImport: "import '@unocss/reset/tailwind.css'\nimport 'virtual:uno.css'\n",
-    async setup(ctx) {
-      const unoConfig = `
-import {
-  defineConfig,
-  presetWind3,
-  transformerCompileClass,
-  type SourceCodeTransformer,
-} from 'unocss'
-import { createHash } from 'node:crypto'
-
-declare const process: { env: { NODE_ENV: string } }
-const isBuild = process.env.NODE_ENV === 'production'
-
-export default defineConfig({
-  presets: [presetWind3()],
-  transformers: (isBuild
-    ? [
-        {
-          name: 'auto-uno-injector',
-          enforce: 'pre',
-          idFilter(id) {
-            return /\\.[tj]sx$|\\.vue$/.test(id)
-          },
-          async transform(code) {
-            const s = code as any
-            const classRegex = /(?:class|className)=["']([^"']+)["']/g
-            let match
-            while ((match = classRegex.exec(s.original))) {
-              const content = match[1]
-              if (content.trim() && !content.includes(':uno:')) {
-                const insertPos = match.index + match[0].indexOf(content)
-                s.appendLeft(insertPos, ':uno: ')
-              }
-            }
-          },
-        },
-        transformerCompileClass({
-          classPrefix: '',
-          hashFn: (str) => {
-            // return createHash('md5').update(str).digest('hex').slice(0, 8)
-            const hash = createHash('md5').update(str).digest('hex').slice(0, 8)
-            return /^\\d/.test(hash) ? 'v' + hash.slice(1, 8) : hash.slice(0, 8)
-          },
-          keepUnknown: true,
-        }),
-      ]
-    : []) as SourceCodeTransformer[],
-})
-
-`.trim()
-      await fs.writeFile(path.join(ctx.targetDir, 'uno.config.ts'), unoConfig + '\n')
-
-      const tsconfigPath = path.join(ctx.targetDir, 'tsconfig.node.json')
-      if (fs.existsSync(tsconfigPath)) {
-        try {
-          let content = await fs.readFile(tsconfigPath, 'utf-8')
-
-          if (content.includes('/* UNO_CONFIG */')) {
-            content = content.replace('/* UNO_CONFIG */', ', "uno.config.ts"')
-            await fs.writeFile(tsconfigPath, content)
-          }
-        } catch {}
-      }
-
-      const stylePath = path.join(ctx.targetDir, 'src/style.css')
-      if (fs.existsSync(stylePath)) await fs.remove(stylePath)
-    },
-  },
-  tailwind: {
-    pluginImport: "import tailwindcss from '@tailwindcss/vite'\n",
-    pluginCode: 'tailwindcss(), ',
-    entryImport: "import './style.css'\n",
-    async setup(ctx) {
-      // style.css 已由 applyProjectTransform 写入，此处仅兜底
-      const stylePath = path.join(ctx.targetDir, 'src/style.css')
-      if (!fs.existsSync(stylePath)) {
-        await fs.ensureDir(path.dirname(stylePath))
-        await fs.writeFile(stylePath, `@import "tailwindcss";`)
-      }
-    },
-  },
-}
-
 async function resolveLatestVersions(pkgPath) {
   const pkg = await fs.readJson(pkgPath)
   const sections = ['dependencies', 'devDependencies']
@@ -232,19 +64,15 @@ async function runTask(command, args, cwd) {
 }
 
 async function applyProjectTransform(ctx) {
-  const { targetDir, framework, css, isUno } = ctx
+  const { targetDir, framework } = ctx
 
   const pkgPath = path.join(targetDir, 'package.json')
   const pkg = await fs.readJson(pkgPath)
   const config = FRAMEWORK_CONFIG[framework]
   pkg.name = ctx.name
-  const extraConfig = config.deps(isUno)
-  pkg.dependencies = { ...pkg.dependencies, ...extraConfig.dependencies }
-  pkg.devDependencies = { ...pkg.devDependencies, ...extraConfig.devDependencies }
-  if (isUno) {
-    delete pkg.devDependencies?.['tailwindcss']
-    delete pkg.devDependencies?.['@tailwindcss/vite']
-  }
+  const extraConfig = config.deps()
+  if (extraConfig.dependencies) pkg.dependencies = { ...pkg.dependencies, ...extraConfig.dependencies }
+  if (extraConfig.devDependencies) pkg.devDependencies = { ...pkg.devDependencies, ...extraConfig.devDependencies }
   if (extraConfig.overrides) pkg.overrides = { ...pkg.overrides, ...extraConfig.overrides }
   try {
     const version = execSync('pnpm --version', { encoding: 'utf-8', timeout: 5000 }).trim()
@@ -260,28 +88,6 @@ async function applyProjectTransform(ctx) {
     indexContent = indexContent.replace(/<title>.*?<\/title>/, `<title>${ctx.name}</title>`)
     await fs.writeFile(indexPath, indexContent)
   }
-
-  const strategy = CSS_STRATEGIES[css]
-  const isVue = framework === 'vue'
-  const paths = {
-    main: path.join(targetDir, isVue ? 'src/main.ts' : 'src/main.tsx'),
-    vite: path.join(targetDir, 'vite.config.ts'),
-  }
-
-  let viteContent = await fs.readFile(paths.vite, 'utf-8')
-  if (!viteContent.includes(strategy.pluginImport.trim())) {
-    viteContent = strategy.pluginImport + viteContent
-  }
-  viteContent = viteContent.replace('/* VITE_PLUS_PLUGINS */', strategy.pluginCode)
-  await fs.writeFile(paths.vite, viteContent)
-
-  let mainContent = await fs.readFile(paths.main, 'utf-8')
-  if (!mainContent.includes(strategy.entryImport.trim())) {
-    mainContent = strategy.entryImport + mainContent
-  }
-  await fs.writeFile(paths.main, mainContent)
-
-  await strategy.setup(ctx)
 }
 
 async function cleanupTemplate(ctx) {

package/index.js

@@ -54,7 +54,7 @@ async function main() {
       shouldOverwrite = await p.confirm({ message: `目录已存在，是否清空？`, initialValue: false })
       if (p.isCancel(shouldOverwrite)) onCancel()
     }
-    project = { path: name, framework: 'react', cssEngine: 'tailwind', shouldOverwrite }
+    project = { path: name, framework: 'react', shouldOverwrite }
   } else {
     // 交互模式
     project = await p.group(
@@ -81,19 +81,15 @@ async function main() {
           p.select({
             message: '选择框架',
             options: [
-              { value: 'react', label: 'React 19', hint: '' },
+              { value: 'react', label: 'React+ RR+ VP', hint: 'react-router' },
+              {
+                value: 'react-tanstackrouter',
+                label: 'React+ Vite + TR',
+                hint: 'TanStack Router',
+              },
               { value: 'vue', label: 'Vue 3', hint: '' },
             ],
           }),
-
-        cssEngine: () =>
-          p.select({
-            message: '选择 CSS',
-            options: [
-              { value: 'tailwind', label: 'Tailwind v4' },
-              { value: 'unocss', label: 'UnoCSS' },
-            ],
-          }),
       },
       { onCancel },
     )
@@ -102,13 +98,11 @@ async function main() {
   const ctx = {
     name: project.path,
     framework: project.framework,
-    css: project.cssEngine,
     targetDir: path.resolve(process.cwd(), project.path),
     templateDir: path.resolve(__dirname, `template-${project.framework}`),
-    isUno: project.cssEngine === 'unocss',
     pkgManager: 'pnpm',
     devCmd: 'pnpm dev',
-    fmtCmd: 'vp fmt',
+    fmtCmd: project.framework === 'react-tanstackrouter' ? 'pnpm fmt' : 'vp fmt',
   }
 
   const s = p.spinner()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lve",
-  "version": "0.6.30",
+  "version": "0.6.31",
   "bin": {
     "create-lve": "index.js"
   },
@@ -8,6 +8,7 @@
     "index.js",
     "config.js",
     "template-react",
+    "template-react-tanstackrouter",
     "template-vue",
     "!**/node_modules"
   ],

package/template-react/src/main.tsx

@@ -1,5 +1,6 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+import './style.css'
 import { Providers } from './app/providers'
 import { getRouter } from './app/router'
 import { RouterProvider } from 'react-router'

package/template-react/tsconfig.node.json

@@ -24,6 +24,5 @@
   },
   "include": [
     "vite.config.ts"
-    /* UNO_CONFIG */
   ]
 }

package/template-react/vite.config.ts

@@ -1,5 +1,6 @@
 import { defineConfig, loadEnv, lazyPlugins, type Plugin } from 'vite-plus'
 import react, { reactCompilerPreset } from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 
 const mode = process.env.NODE_ENV || 'development'
 const env = loadEnv(mode, process.cwd(), '')
@@ -12,7 +13,7 @@ export default defineConfig({
     '*': 'vp check --fix',
   },
   plugins: [
-    /* VITE_PLUS_PLUGINS */
+    tailwindcss(),
     react(),
     // lazyPlugins 返回类型与 Vite plugins 字段类型不兼容
     // 上游 issue: vitejs/vite#22085，官方确认为已知问题

package/template-react-tanstackrouter/.oxfmtrc.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "./node_modules/oxfmt/configuration_schema.json",
+  "ignorePatterns": [],
+  "semi": false,
+  "singleQuote": true
+}

package/template-react-tanstackrouter/.oxlintrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "typescript", "oxc"],
+  "rules": {
+    "react/rules-of-hooks": "error",
+    "react/only-export-components": ["off", { "allowConstantExport": true }]
+  }
+}

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

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["TypeScriptTeam.native-preview"]
+}

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

@@ -0,0 +1,74 @@
+{
+  "files.watcherExclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "search.exclude": {
+    "**/routeTree.gen.ts": true
+  },
+  "files.readonlyInclude": {
+    "**/routeTree.gen.ts": true
+  },
+
+  // ==================== Formatter (OXC) ====================
+  "editor.defaultFormatter": "oxc.oxc-vscode",
+  "editor.formatOnSave": true,
+  "editor.formatOnSaveMode": "file",
+  "oxc.enable.oxfmt": true,
+
+  // 语言特定 Formatter
+  "[javascript]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[tailwindcss]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[json]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "oxc.oxc-vscode"
+  },
+
+  // ==================== Tailwind + shadcn/ui（强烈推荐）===================
+  "tailwindCSS.experimental.classRegex": [["cn\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]],
+  "tailwindCSS.includeLanguages": {
+    "typescript": "html",
+    "typescriptreact": "html"
+  },
+  "editor.quickSuggestions": {
+    "strings": "on"
+  },
+
+  // ==================== 其他项目通用 ====================
+  "git.openRepositoryInParentFolders": "always",
+  "js/ts.updateImportsOnFileMove.enabled": "always",
+  "diffEditor.ignoreTrimWhitespace": true,
+  "diffEditor.hideUnchangedRegions.enabled": true,
+  "editor.inlayHints.enabled": "on",
+
+  // ==================== TypeScript 7 (tsgo) ====================
+  "js/ts.experimental.useTsgo": true,
+
+  "js/ts.tsserver.watchOptions": {
+    "watchFile": "dynamicPriorityPolling",
+    "watchDirectory": "dynamicPriorityPolling"
+  }
+}

package/template-react-tanstackrouter/README.md

@@ -0,0 +1,13 @@
+# React Starter
+
+A modern React application starter.
+
+## Stack
+
+- React 19
+- Vite 8
+- TypeScript
+- TanStack Router
+- Tailwind CSS
+- oxlint
+- oxfmt

package/template-react-tanstackrouter/index.html

@@ -0,0 +1,14 @@
+<!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="react-root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/template-react-tanstackrouter/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "vite-project",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "imports": {
+    "#/*": "./src/*"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "fmt": "oxfmt",
+    "lint": "oxlint",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tanstack/react-router": "^1.170.17",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.29.7",
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@tailwindcss/vite": "^4.3.2",
+    "@tanstack/router-plugin": "^1.168.19",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^24.13.2",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.3",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "oxfmt": "^0.58.0",
+    "oxlint": "^1.71.0",
+    "tailwindcss": "^4.3.2",
+    "typescript": "~6.0.2",
+    "vite": "^8.1.1"
+  }
+}