create-rue 0.0.11 → 0.0.14

package/bundle.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/*! create-rue v0.0.11 | MIT */
+/*! create-rue v0.0.14 | MIT */
 import { createRequire } from "node:module";
 import * as fs from "node:fs";
 import "node:fs";
@@ -2052,7 +2052,7 @@ function inferPackageManager() {
 //#endregion
 //#region package.json
 var name = "create-rue";
-var version = "0.0.11";
+var version = "0.0.14";
 //#endregion
 //#region index.ts
 const language = await getLanguage(fileURLToPath(new URL("./locales", import.meta.url)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-rue",
-  "version": "0.0.11",
+  "version": "0.0.14",
   "description": "🛠️ The recommended way to start a Vite-powered Rue project",
   "keywords": [],
   "homepage": "https://github.com/hunzhiwange/create-rue#readme",
@@ -40,7 +40,7 @@
     "zx": "^8.8.5"
   },
   "engines": {
-    "node": "^20.19.0 || >=22.12.0"
+    "node": ">=22.12.0"
   },
   "scripts": {
     "format": "vp fmt",

package/template/base/app/pages/Home.tsx

@@ -35,9 +35,12 @@ const Home: FC = () => (
       <div className="hero-content flex-col items-start gap-8 px-6 py-8 lg:flex-row lg:items-end lg:justify-between">
         <div className="max-w-3xl space-y-4">
           <div className="badge badge-primary badge-outline">Rue.js</div>
-          <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">The Wasm Framework For Vapor Native DOM</h1>
+          <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">
+            The Wasm Framework For Vapor Native DOM
+          </h1>
           <p className="max-w-2xl text-base leading-7 text-base-content/70">
-            Rue.js 采用原生 JSX / TSX 开发方式，结合细粒度响应式与面向原生 DOM 的渲染模型，适合构建轻量、直接且可维护的前端应用。
+            Rue.js 采用原生 JSX / TSX 开发方式，结合细粒度响应式与面向原生 DOM
+            的渲染模型，适合构建轻量、直接且可维护的前端应用。
           </p>
           <div className="flex flex-wrap gap-3">
             <RouterLink to="/report" className="btn btn-primary">
@@ -63,7 +66,7 @@ const Home: FC = () => (
     </section>
 
     <section className="grid gap-4 md:grid-cols-3">
-      {highlights.map(item => (
+      {highlights.map((item) => (
         <article key={item.title} className="card border border-base-300 bg-base-100 shadow-sm">
           <div className="card-body gap-3">
             <h2 className="text-2xl font-semibold">{item.title}</h2>
@@ -82,7 +85,7 @@ const Home: FC = () => (
           </div>
 
           <div className="mockup-code text-sm">
-            {quickStartCommands.map(command => (
+            {quickStartCommands.map((command) => (
               <pre key={command} data-prefix="$">
                 <code>{command}</code>
               </pre>
@@ -99,7 +102,8 @@ const Home: FC = () => (
           </div>
 
           <div className="rounded-2xl bg-base-200 p-4 text-sm leading-7 text-base-content/70">
-            生成的项目基于 Vite，默认支持 JSX / TSX 组件开发；生产构建使用 npm run build，产物输出到 dist 目录。
+            生成的项目基于 Vite，默认支持 JSX / TSX 组件开发；生产构建使用 npm run build，产物输出到
+            dist 目录。
           </div>
         </div>
       </article>
@@ -112,8 +116,11 @@ const Home: FC = () => (
           </div>
 
           <div className="space-y-3">
-            {nextSteps.map(step => (
-              <div key={step} className="rounded-2xl bg-base-200 p-4 text-sm leading-7 text-base-content/75">
+            {nextSteps.map((step) => (
+              <div
+                key={step}
+                className="rounded-2xl bg-base-200 p-4 text-sm leading-7 text-base-content/75"
+              >
                 {step}
               </div>
             ))}

package/template/base/app/pages/Report.tsx

@@ -30,7 +30,7 @@ const totalRevenue = rows.reduce((sum, row) => sum + row.revenue, 0)
 const totalOrders = rows.reduce((sum, row) => sum + row.orders, 0)
 const avgConversion = rows.reduce((sum, row) => sum + row.conversion, 0) / rows.length
 const peakRow = rows.reduce((max, row) => (row.revenue > max.revenue ? row : max), rows[0])
-const maxRevenue = Math.max(...rows.map(row => row.revenue))
+const maxRevenue = Math.max(...rows.map((row) => row.revenue))
 
 const summaryCards = [
   {
@@ -89,7 +89,7 @@ const Report: FC = () => (
     </section>
 
     <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
-      {summaryCards.map(card => (
+      {summaryCards.map((card) => (
         <article key={card.label} className={`card shadow-lg ${card.tone}`}>
           <div className="card-body gap-2">
             <p className="text-sm opacity-80">{card.label}</p>
@@ -115,13 +115,17 @@ const Report: FC = () => (
           </div>
 
           <div className="space-y-4">
-            {rows.map(row => (
+            {rows.map((row) => (
               <div key={row.day} className="grid gap-2">
                 <div className="flex items-center justify-between gap-4 text-sm">
                   <div className="font-medium">{row.day}</div>
                   <div className="text-base-content/60">{moneyFormatter.format(row.revenue)}</div>
                 </div>
-                <progress className="progress progress-primary w-full" value={row.revenue} max={maxRevenue}></progress>
+                <progress
+                  className="progress progress-primary w-full"
+                  value={row.revenue}
+                  max={maxRevenue}
+                ></progress>
                 <div className="flex items-center justify-between gap-4 text-xs text-base-content/60">
                   <span>{row.orders} 单</span>
                   <span>转化率 {row.conversion}%</span>
@@ -173,7 +177,7 @@ const Report: FC = () => (
             </tr>
           </thead>
           <tbody>
-            {rows.map(row => (
+            {rows.map((row) => (
               <tr key={row.day}>
                 <td className="font-medium">{row.day}</td>
                 <td>{row.orders}</td>
@@ -189,4 +193,4 @@ const Report: FC = () => (
   </div>
 )
 
-export default Report
+export default Report

package/template/base/app/pages/TodoApp.tsx

@@ -72,7 +72,7 @@ const getStoredTodos = (): TodoItem[] => {
     }
 
     return parsed.filter(
-      item =>
+      (item) =>
         item &&
         typeof item.id === 'number' &&
         typeof item.title === 'string' &&
@@ -121,7 +121,7 @@ const EditingTitleInput: FC<{
   initialTitle: string
   onSave: (title: string) => void
   onCancel: () => void
-}> = props => {
+}> = (props) => {
   const [title, setTitle] = useState(props.initialTitle)
 
   return (
@@ -170,17 +170,17 @@ const TodoApp: FC = () => {
   )
 
   const counts = computed(() => ({
-    total: todos.value.filter(item => !item.archived).length,
-    todo: todos.value.filter(item => !item.archived && item.status === 'todo').length,
-    doing: todos.value.filter(item => !item.archived && item.status === 'doing').length,
-    done: todos.value.filter(item => !item.archived && item.status === 'done').length,
-    archived: todos.value.filter(item => item.archived).length,
+    total: todos.value.filter((item) => !item.archived).length,
+    todo: todos.value.filter((item) => !item.archived && item.status === 'todo').length,
+    doing: todos.value.filter((item) => !item.archived && item.status === 'doing').length,
+    done: todos.value.filter((item) => !item.archived && item.status === 'done').length,
+    archived: todos.value.filter((item) => item.archived).length,
   }))
 
   const visibleTodos = computed(() => {
     const keyword = search.value.trim().toLowerCase()
 
-    return todos.value.filter(item => {
+    return todos.value.filter((item) => {
       const matchesKeyword = !keyword || item.title.toLowerCase().includes(keyword)
       if (!matchesKeyword) {
         return false
@@ -222,20 +222,20 @@ const TodoApp: FC = () => {
   }
 
   const removeTodo = (id: number) => {
-    todos.value = todos.value.filter(item => item.id !== id)
+    todos.value = todos.value.filter((item) => item.id !== id)
     if (editingId.value === id) {
       editingId.value = null
     }
   }
 
   const updateStatus = (id: number, status: TodoStatus) => {
-    todos.value = todos.value.map(item =>
+    todos.value = todos.value.map((item) =>
       item.id === id ? { ...item, status, archived: false } : item,
     )
   }
 
   const toggleArchived = (id: number) => {
-    todos.value = todos.value.map(item =>
+    todos.value = todos.value.map((item) =>
       item.id === id ? { ...item, archived: !item.archived } : item,
     )
   }
@@ -253,7 +253,7 @@ const TodoApp: FC = () => {
       return
     }
 
-    todos.value = todos.value.map(item => (item.id === id ? { ...item, title } : item))
+    todos.value = todos.value.map((item) => (item.id === id ? { ...item, title } : item))
     cancelEditing()
   }
 
@@ -262,7 +262,9 @@ const TodoApp: FC = () => {
       <section className="hero border border-base-300 bg-base-100 shadow-xl">
         <div className="hero-content flex-col items-start gap-8 px-6 py-8 lg:flex-row lg:items-end lg:justify-between">
           <div className="max-w-3xl space-y-4">
-            <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">Todo App 已作为 base 模板内置页面</h1>
+            <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">
+              Todo App 已作为 base 模板内置页面
+            </h1>
             <div className="flex flex-wrap gap-3">
               <RouterLink to="/" className="btn btn-outline">
                 返回默认简报
@@ -330,7 +332,7 @@ const TodoApp: FC = () => {
           </div>
 
           <div className="flex flex-wrap gap-2">
-            {filterOptions.map(filter => (
+            {filterOptions.map((filter) => (
               <button
                 key={filter.key}
                 className={`btn btn-sm ${
@@ -366,7 +368,7 @@ const TodoApp: FC = () => {
 
       <section className="grid gap-4">
         {visibleTodos.get().length ? (
-          visibleTodos.get().map(item => {
+          visibleTodos.get().map((item) => {
             const meta = statusMeta[item.status]
             const isEditing = editingId.value === item.id
 
@@ -381,10 +383,16 @@ const TodoApp: FC = () => {
                   <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
                     <div className="flex-1 space-y-3">
                       <div className="flex flex-wrap items-center gap-2">
-                        <span className={`inline-block h-2.5 w-2.5 rounded-full ${meta.dotClass}`}></span>
+                        <span
+                          className={`inline-block h-2.5 w-2.5 rounded-full ${meta.dotClass}`}
+                        ></span>
                         <span className={meta.badgeClass}>{meta.label}</span>
-                        {item.archived && <span className="badge badge-secondary badge-outline">已归档</span>}
-                        <span className="text-xs text-base-content/50">创建于 {item.createdAt}</span>
+                        {item.archived && (
+                          <span className="badge badge-secondary badge-outline">已归档</span>
+                        )}
+                        <span className="text-xs text-base-content/50">
+                          创建于 {item.createdAt}
+                        </span>
                       </div>
 
                       {!isEditing && (
@@ -403,13 +411,13 @@ const TodoApp: FC = () => {
                         <EditingTitleInput
                           key={item.id}
                           initialTitle={item.title}
-                          onSave={title => saveEditing(item.id, title)}
+                          onSave={(title) => saveEditing(item.id, title)}
                           onCancel={cancelEditing}
                         />
                       )}
 
                       <div className="flex flex-wrap gap-2">
-                        {statusOptions.map(option => (
+                        {statusOptions.map((option) => (
                           <button
                             key={option.key}
                             className={`btn btn-xs ${
@@ -427,7 +435,10 @@ const TodoApp: FC = () => {
 
                     <div className="flex flex-wrap gap-2 lg:justify-end">
                       {!isEditing && (
-                        <button className="btn btn-sm btn-outline" onClick={() => startEditing(item)}>
+                        <button
+                          className="btn btn-sm btn-outline"
+                          onClick={() => startEditing(item)}
+                        >
                           改名
                         </button>
                       )}
@@ -437,7 +448,10 @@ const TodoApp: FC = () => {
                       >
                         {item.archived ? '恢复' : '归档'}
                       </button>
-                      <button className="btn btn-sm btn-outline btn-error" onClick={() => removeTodo(item.id)}>
+                      <button
+                        className="btn btn-sm btn-outline btn-error"
+                        onClick={() => removeTodo(item.id)}
+                      >
                         删除
                       </button>
                     </div>
@@ -461,4 +475,4 @@ const TodoApp: FC = () => {
   )
 }
 
-export default TodoApp
+export default TodoApp

package/template/base/app/pages/components/Layout.tsx

@@ -111,7 +111,7 @@ const ThemePicker: FC = () => {
         theme.value = (event.currentTarget as HTMLSelectElement).value
       }}
     >
-      {themes.map(name => (
+      {themes.map((name) => (
         <option key={name} value={name} selected={theme.value === name}>
           {themeLabels[name] || name}
         </option>
@@ -138,7 +138,7 @@ const Header: FC = () => {
           </RouterLink>
         </div>
         <nav className="navbar-center hidden flex-1 justify-center gap-2 md:flex">
-          {navItems.map(item => (
+          {navItems.map((item) => (
             <RouterLink
               key={item.to}
               to={item.to}
@@ -171,7 +171,7 @@ const Footer: FC = () => (
   </footer>
 )
 
-const HeaderToggleButton: FC<{ hidden: boolean; onToggle: () => void }> = props => (
+const HeaderToggleButton: FC<{ hidden: boolean; onToggle: () => void }> = (props) => (
   <button
     type="button"
     className="btn btn-circle btn-sm fixed left-3 top-3 z-50 border-base-300 bg-base-100/90 shadow-lg backdrop-blur"
@@ -183,7 +183,7 @@ const HeaderToggleButton: FC<{ hidden: boolean; onToggle: () => void }> = props
   </button>
 )
 
-const SiteLayout: FC = props => {
+const SiteLayout: FC = (props) => {
   const route = useRoute()
   const reportHeaderHidden = ref(getStoredHeaderHidden())
   const currentPath = computed(() => route.get()?.path || '/')
@@ -209,7 +209,9 @@ const SiteLayout: FC = props => {
             }}
           />
         )}
-        <main className={`content-width pb-10 ${hideHeader.get() ? 'pt-6 sm:pt-8' : 'pt-6 sm:pt-8'}`}>
+        <main
+          className={`content-width pb-10 ${hideHeader.get() ? 'pt-6 sm:pt-8' : 'pt-6 sm:pt-8'}`}
+        >
           {props.children}
         </main>
         <Footer />

package/template/base/package.json

@@ -14,24 +14,24 @@
   },
   "dependencies": {
     "@rue-js/jsx-runtime": "^0.0.33",
-    "@rue-js/runtime": "^0.0.33",
     "@rue-js/router": "^0.0.33",
     "@rue-js/rue": "^0.0.33",
+    "@rue-js/runtime": "^0.0.33",
     "@rue-js/runtime-vapor": "^0.0.33",
+    "daisyui": "^5.5.11",
     "oxfmt": "^0.42.0",
-    "oxlint": "^1.57.0",
-    "daisyui": "^5.5.11"
+    "oxlint": "^1.57.0"
   },
   "devDependencies": {
-    "@swc/core": "^1.15.3",
     "@rue-js/jsx-dev-runtime": "^0.0.33",
     "@rue-js/vite-plugin-rue": "^0.0.33",
-    "typescript": "^5.9.3",
-    "vite": "^8.0.3",
+    "@swc/core": "^1.15.3",
     "@tailwindcss/typography": "^0.5.19",
     "@tailwindcss/vite": "^4.1.17",
-    "vite-plugin-wasm": "^3.5.0",
-    "@types/node": "^24.10.1"
+    "@types/node": "^24.10.1",
+    "typescript": "^5.9.3",
+    "vite": "^8.0.3",
+    "vite-plugin-wasm": "^3.5.0"
   },
   "packageManager": "pnpm@10.33.0+sha512.10568bb4a6afb58c9eb3630da90cc9516417abebd3fabbe6739f0ae795728da1491e9db5a544c76ad8eb7570f5c4bb3d6c637b2cb41bfdcdb47fa823c8649319"
 }

package/template/base/style.css

@@ -16,8 +16,16 @@
   body {
     @apply bg-base-200 text-base-content antialiased;
     background-image:
-      radial-gradient(circle at top, color-mix(in oklch, var(--color-primary) 14%, transparent), transparent 28%),
-      radial-gradient(circle at bottom right, color-mix(in oklch, var(--color-accent) 10%, transparent), transparent 24%);
+      radial-gradient(
+        circle at top,
+        color-mix(in oklch, var(--color-primary) 14%, transparent),
+        transparent 28%
+      ),
+      radial-gradient(
+        circle at bottom right,
+        color-mix(in oklch, var(--color-accent) 10%, transparent),
+        transparent 24%
+      );
   }
 
   * {

package/template/base/tsconfig.json

@@ -16,7 +16,7 @@
     "jsxImportSource": "@rue-js",
     "declaration": true,
     "outDir": "./dist",
-    "baseUrl": ".",
+    "baseUrl": "."
   },
   "include": ["app/**/*.ts", "app/**/*.tsx", "app/**/*.d.ts", "vite.config.ts"]
 }