create-lve 0.4.21 → 0.4.22

package/config.js

@@ -7,40 +7,6 @@ import { execSync, spawn } from 'node:child_process'
 
 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>
-      </div>
-    </div>
-  )
-}
-`.trim()
-}
-
 const FRAMEWORK_CONFIG = {
   next: {
     deps: (isUno) => ({
@@ -64,11 +30,9 @@ const FRAMEWORK_CONFIG = {
           : { tailwindcss: 'latest', '@tailwindcss/vite': 'latest' }),
       },
 
-      pnpm: {
-        overrides: {
-          vite: 'npm:@voidzero-dev/vite-plus-core@latest',
-          vitest: 'npm:@voidzero-dev/vite-plus-test@latest',
-        },
+      overrides: {
+        vite: 'npm:@voidzero-dev/vite-plus-core@latest',
+        vitest: 'npm:@voidzero-dev/vite-plus-test@latest',
       },
     }),
   },
@@ -199,7 +163,9 @@ async function runTask(command, args, cwd) {
       reject(err)
     })
 
-    child.on('close', (code) => (code === 0 ? resolve() : reject()))
+    child.on('close', (code) =>
+      code === 0 ? resolve() : reject(new Error(`${command} exited with code ${code}`)),
+    )
   })
 }
 
@@ -213,7 +179,11 @@ async function applyProjectTransform(ctx) {
   const extraConfig = config.deps(isUno)
   pkg.dependencies = { ...pkg.dependencies, ...extraConfig.dependencies }
   pkg.devDependencies = { ...pkg.devDependencies, ...extraConfig.devDependencies }
-  if (extraConfig.pnpm) pkg.pnpm = { ...pkg.pnpm, ...extraConfig.pnpm }
+  if (extraConfig.overrides) pkg.overrides = { ...pkg.overrides, ...extraConfig.overrides }
+  try {
+    const version = execSync('pnpm --version', { encoding: 'utf-8', timeout: 5000 }).trim()
+    pkg.packageManager = `pnpm@${version}`
+  } catch {}
   await fs.writeJson(pkgPath, pkg, { spaces: 2 })
 
   await resolveLatestVersions(pkgPath)
@@ -225,11 +195,6 @@ async function applyProjectTransform(ctx) {
   const paths = {
     main: path.join(targetDir, isVue ? 'src/main.ts' : 'src/main.tsx'),
     vite: path.join(targetDir, 'vite.config.ts'),
-    app: path.join(targetDir, isVue ? 'src/App.vue' : 'src/App.tsx'),
-  }
-
-  if (framework === 'react') {
-    await fs.writeFile(paths.app, getReactAppTemplate(isUno))
   }
 
   let viteContent = await fs.readFile(paths.vite, 'utf-8')

package/index.js

@@ -7,6 +7,11 @@ import path from 'node:path'
 import { execSync } from 'node:child_process'
 import { __dirname, applyProjectTransform, cleanupTemplate, installDependencies } from './config.js'
 
+function randomName() {
+  const hash = Math.random().toString(36).slice(2, 6)
+  return `vite-app-${hash}`
+}
+
 async function main() {
   process.stdout.write('\u001b[3J\u001b[2J\u001b[1J')
   console.clear()
@@ -23,8 +28,8 @@ async function main() {
       path: () =>
         p.text({
           message: '项目名称',
-          placeholder: 'react-app',
-          defaultValue: 'react-app',
+          placeholder: 'your-project-name',
+          defaultValue: randomName(),
           validate: (value) => {
             if (!value || value.length === 0) return
             if (value.match(/[<>:"|?*]/)) return '路径包含非法字符'
@@ -106,7 +111,7 @@ async function main() {
     s.start('Installing dependencies')
     await installDependencies(ctx)
     s.stop()
-    console.log(pc.green(`→ Next: cd ${ctx.name} && ${ctx.devCmd.replace(' ', ' run ')}`))
+    console.log(pc.green(`→ Next: cd ${ctx.name} && ${ctx.devCmd}`))
   } catch (err) {
     s.stop(pc.red('Failed'))
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lve",
-  "version": "0.4.21",
+  "version": "0.4.22",
   "bin": {
     "create-lve": "index.js"
   },

package/template-react/package.json

@@ -10,24 +10,23 @@
     "prepare": "vp config"
   },
   "dependencies": {
+    "@tanstack/react-query": "latest",
+    "jotai": "latest",
     "react": "latest",
-    "react-dom": "latest"
+    "react-dom": "latest",
+    "react-router": "latest",
+    "zustand": "latest"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "latest",
     "@types/node": "latest",
     "@types/react": "latest",
     "@types/react-dom": "latest",
     "@vitejs/plugin-react": "latest",
     "babel-plugin-react-compiler": "latest",
+    "tailwindcss": "latest",
     "typescript": "latest",
     "vite": "latest",
     "vite-plus": "latest"
-  },
-  "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/layouts/root.tsx

@@ -0,0 +1,9 @@
+import { Outlet } from 'react-router'
+
+export default function RootLayout() {
+  return (
+    <div className="min-h-dvh">
+      <Outlet />
+    </div>
+  )
+}

package/template-react/src/app/providers.tsx

@@ -0,0 +1,19 @@
+import { StrictMode } from 'react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000,
+      retry: 1,
+    },
+  },
+})
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return (
+    <StrictMode>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </StrictMode>
+  )
+}

package/template-react/src/app/router.tsx

@@ -0,0 +1,11 @@
+import { createBrowserRouter } from 'react-router'
+import RootLayout from './layouts/root'
+import HomePage from '@/features/home/pages'
+
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <RootLayout />,
+    children: [{ index: true, element: <HomePage /> }],
+  },
+])

package/template-react/src/features/home/pages/index.tsx

@@ -0,0 +1,7 @@
+export default function HomePage() {
+  return (
+    <div className="flex min-h-dvh items-center justify-center">
+      <h1 className="text-4xl font-bold">Welcome</h1>
+    </div>
+  )
+}

package/template-react/src/main.tsx

@@ -1,9 +1,11 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
-import { App } from './App.tsx'
+import { Providers } from './app/providers'
+import { router } from './app/router'
+import { RouterProvider } from 'react-router'
+import './style.css'
 
 createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>,
+  <Providers>
+    <RouterProvider router={router} />
+  </Providers>,
 )

package/template-react/src/style.css

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

package/template-react/vite.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig, loadEnv, lazyPlugins } from 'vite-plus'
 import react, { reactCompilerPreset } from '@vitejs/plugin-react'
-// import { fileURLToPath, URL } from 'node:url'
 
 const mode = process.env.NODE_ENV || 'development'
 const env = loadEnv(mode, process.cwd(), '')
@@ -25,11 +24,24 @@ export default defineConfig({
     }),
   ],
   resolve: {
-    // alias: {
-    //   '@': fileURLToPath(new URL('./src', import.meta.url)),
-    // },
     tsconfigPaths: true,
   },
+  build: {
+    rolldownOptions: {
+      output: {
+        manualChunks(id) {
+          if (!id.includes('node_modules')) return
+          if (id.includes('react') && !id.includes('react-router')) return 'vendor-react'
+          if (id.includes('react-dom')) return 'vendor-react-dom'
+          if (id.includes('react-router')) return 'vendor-router'
+          if (id.includes('@tanstack')) return 'vendor-query'
+          if (id.includes('zustand')) return 'vendor-state'
+          if (id.includes('jotai')) return 'vendor-atom'
+          return 'vendor'
+        },
+      },
+    },
+  },
   server: {
     proxy: {
       '/api': {

package/template-vue/package.json

@@ -10,22 +10,20 @@
     "prepare": "vp config"
   },
   "dependencies": {
-    "vue": "latest"
+    "@vueuse/core": "latest",
+    "pinia": "latest",
+    "vue": "latest",
+    "vue-router": "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",
+    "@tailwindcss/vite": "latest",
+    "@types/node": "latest",
+    "@vitejs/plugin-vue": "latest",
+    "@vue/tsconfig": "latest",
+    "tailwindcss": "latest",
+    "typescript": "latest",
+    "vite": "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"
-    }
+    "vue-tsc": "latest"
   }
 }

package/template-vue/src/App.vue

@@ -1,61 +1,5 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-
-const count = ref(0)
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <div
-    class="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"
-  >
-    <div class="flex justify-center gap-12 mb-12">
-      <a
-        href="https://viteplus.dev"
-        target="_blank"
-        class="transition-filter duration-300 hover:drop-shadow-[0_0_2em_#646cffaa]"
-      >
-        <img src="/favicon.svg" class="h-24 p-6" alt="VitePlus logo" />
-      </a>
-      <a
-        href="https://vuejs.org/"
-        target="_blank"
-        class="transition-filter duration-300 hover:drop-shadow-[0_0_2em_#42b883aa]"
-      >
-        <img src="./assets/vue.svg" class="h-24 p-6" alt="Vue logo" />
-      </a>
-    </div>
-
-    <h1 class="text-5xl font-bold leading-[1.1] mb-8">VitePlus + Vue</h1>
-
-    <div class="p-8 space-y-4">
-      <button
-        type="button"
-        @click="count++"
-        class="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 class="text-zinc-500">
-        Edit
-        <code class="bg-[#f1f1f1] dark:bg-zinc-800 px-1.5 py-0.5 rounded font-mono"
-          >src/App.vue</code
-        >
-        to test HMR
-      </p>
-    </div>
-
-    <p class="text-[#888] mt-8">
-      Check out
-      <a
-        href="https://github.com/voidzero-dev/vite-plus"
-        target="_blank"
-        class="font-medium text-[#646cff] hover:text-[#535bf2]"
-        >VitePlus</a
-      >, the unified toolchain for the web.
-    </p>
-
-    <p class="text-[#888] mt-4 text-sm">Click on the VitePlus and Vue logos to learn more</p>
-  </div>
+  <RouterView />
 </template>
-
-<style scoped></style>

package/template-vue/src/main.ts

@@ -1,4 +1,12 @@
 import { createApp } from 'vue'
+import { createPinia } from 'pinia'
 import App from './App.vue'
+import router from './router'
+import './style.css'
 
-createApp(App).mount('#app')
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

package/template-vue/src/router/index.ts

@@ -0,0 +1,16 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import RootLayout from '@/views/RootLayout.vue'
+import HomeView from '@/views/HomeView.vue'
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/',
+      component: RootLayout,
+      children: [{ path: '', name: 'home', component: HomeView }],
+    },
+  ],
+})
+
+export default router

package/template-vue/src/style.css

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

package/template-vue/src/views/HomeView.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="flex min-h-dvh items-center justify-center">
+    <h1 class="text-4xl font-bold">Welcome</h1>
+  </div>
+</template>

package/template-vue/src/views/RootLayout.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="min-h-dvh">
+    <RouterView />
+  </div>
+</template>

package/template-vue/tsconfig.json

@@ -1,4 +1,9 @@
 {
   "files": [],
-  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }],
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  }
 }

package/template-vue/vite.config.ts

@@ -1,6 +1,5 @@
 import { defineConfig, loadEnv } from 'vite-plus'
 import vue from '@vitejs/plugin-vue'
-import { fileURLToPath, URL } from 'node:url'
 
 const mode = process.env.NODE_ENV || 'development'
 const env = loadEnv(mode, process.cwd(), '')
@@ -17,8 +16,21 @@ export default defineConfig({
     vue(),
   ],
   resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    tsconfigPaths: true,
+  },
+  build: {
+    rolldownOptions: {
+      output: {
+        manualChunks(id) {
+          if (!id.includes('node_modules')) return
+          if (id.includes('vue') && !id.includes('vue-router'))
+            return 'vendor-vue'
+          if (id.includes('vue-router')) return 'vendor-router'
+          if (id.includes('pinia')) return 'vendor-pinia'
+          if (id.includes('@vueuse')) return 'vendor-vueuse'
+          return 'vendor'
+        },
+      },
     },
   },
   server: {

package/template-react/src/App.tsx

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