create-rue 0.0.7 → 0.0.11

package/bundle.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-/*! create-rue v0.0.7 | MIT */
+/*! create-rue v0.0.11 | MIT */
 import { createRequire } from "node:module";
 import * as fs from "node:fs";
 import "node:fs";
@@ -1815,7 +1815,7 @@ var require_ejs = /* @__PURE__ */ __commonJSMin(((exports) => {
 var import_picocolors = require_picocolors();
 var import_ejs = /* @__PURE__ */ __toESM(require_ejs(), 1);
 const defaultBanner = "Rue.js - The Wasm Framework For Vapor Native DOM";
-const gradientBanner = "\x1B[38;2;66;211;146mV\x1B[39m\x1B[38;2;66;211;146mu\x1B[39m\x1B[38;2;66;211;146me\x1B[39m\x1B[38;2;66;211;146m.\x1B[39m\x1B[38;2;66;211;146mj\x1B[39m\x1B[38;2;67;209;149ms\x1B[39m \x1B[38;2;68;206;152m-\x1B[39m \x1B[38;2;69;204;155mT\x1B[39m\x1B[38;2;70;201;158mh\x1B[39m\x1B[38;2;71;199;162me\x1B[39m \x1B[38;2;72;196;165mP\x1B[39m\x1B[38;2;73;194;168mr\x1B[39m\x1B[38;2;74;192;171mo\x1B[39m\x1B[38;2;75;189;174mg\x1B[39m\x1B[38;2;76;187;177mr\x1B[39m\x1B[38;2;77;184;180me\x1B[39m\x1B[38;2;78;182;183ms\x1B[39m\x1B[38;2;79;179;186ms\x1B[39m\x1B[38;2;80;177;190mi\x1B[39m\x1B[38;2;81;175;193mv\x1B[39m\x1B[38;2;82;172;196me\x1B[39m \x1B[38;2;83;170;199mJ\x1B[39m\x1B[38;2;83;167;202ma\x1B[39m\x1B[38;2;84;165;205mv\x1B[39m\x1B[38;2;85;162;208ma\x1B[39m\x1B[38;2;86;160;211mS\x1B[39m\x1B[38;2;87;158;215mc\x1B[39m\x1B[38;2;88;155;218mr\x1B[39m\x1B[38;2;89;153;221mi\x1B[39m\x1B[38;2;90;150;224mp\x1B[39m\x1B[38;2;91;148;227mt\x1B[39m \x1B[38;2;92;145;230mF\x1B[39m\x1B[38;2;93;143;233mr\x1B[39m\x1B[38;2;94;141;236ma\x1B[39m\x1B[38;2;95;138;239mm\x1B[39m\x1B[38;2;96;136;243me\x1B[39m\x1B[38;2;97;133;246mw\x1B[39m\x1B[38;2;98;131;249mo\x1B[39m\x1B[38;2;99;128;252mr\x1B[39m\x1B[38;2;100;126;255mk\x1B[39m";
+const gradientBanner = "\x1B[38;2;66;211;146mR\x1B[39m\x1B[38;2;66;211;146mu\x1B[39m\x1B[38;2;66;211;146me\x1B[39m\x1B[38;2;66;211;146m.\x1B[39m\x1B[38;2;66;211;146mj\x1B[39m\x1B[38;2;66;210;147ms\x1B[39m \x1B[38;2;68;206;152m-\x1B[39m \x1B[38;2;69;202;157mT\x1B[39m\x1B[38;2;70;200;160mh\x1B[39m\x1B[38;2;71;198;162me\x1B[39m \x1B[38;2;73;194;167mW\x1B[39m\x1B[38;2;73;192;170ma\x1B[39m\x1B[38;2;74;190;173ms\x1B[39m\x1B[38;2;75;188;175mm\x1B[39m \x1B[38;2;77;184;180mF\x1B[39m\x1B[38;2;77;182;183mr\x1B[39m\x1B[38;2;78;180;185ma\x1B[39m\x1B[38;2;79;178;188mm\x1B[39m\x1B[38;2;80;176;191me\x1B[39m\x1B[38;2;81;174;193mw\x1B[39m\x1B[38;2;82;172;196mo\x1B[39m\x1B[38;2;82;170;198mr\x1B[39m\x1B[38;2;83;168;201mk\x1B[39m \x1B[38;2;85;164;206mF\x1B[39m\x1B[38;2;86;162;209mo\x1B[39m\x1B[38;2;86;160;211mr\x1B[39m \x1B[38;2;88;156;216mV\x1B[39m\x1B[38;2;89;154;219ma\x1B[39m\x1B[38;2;90;152;222mp\x1B[39m\x1B[38;2;90;150;224mo\x1B[39m\x1B[38;2;91;148;227mr\x1B[39m \x1B[38;2;93;144;232mN\x1B[39m\x1B[38;2;94;142;234ma\x1B[39m\x1B[38;2;94;140;237mt\x1B[39m\x1B[38;2;95;138;240mi\x1B[39m\x1B[38;2;96;136;242mv\x1B[39m\x1B[38;2;97;134;245me\x1B[39m \x1B[38;2;98;130;250mD\x1B[39m\x1B[38;2;99;128;252mO\x1B[39m\x1B[38;2;100;126;255mM\x1B[39m";
 //#endregion
 //#region utils/deepMerge.ts
 const isObject = (val) => val && typeof val === "object";
@@ -2052,7 +2052,7 @@ function inferPackageManager() {
 //#endregion
 //#region package.json
 var name = "create-rue";
-var version = "0.0.7";
+var version = "0.0.11";
 //#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.7",
+  "version": "0.0.11",
   "description": "🛠️ The recommended way to start a Vite-powered Rue project",
   "keywords": [],
   "homepage": "https://github.com/hunzhiwange/create-rue#readme",
@@ -27,18 +27,6 @@
     "access": "public",
     "provenance": false
   },
-  "scripts": {
-    "prepare": "vp config",
-    "format": "vp fmt",
-    "format-check": "vp fmt --check",
-    "lint": "vp lint . --fix",
-    "build": "rolldown -c rolldown.config.ts",
-    "test": "pnpm run build && pnpm run test:unit",
-    "test:unit": "vp test",
-    "preversion": "git fetch && git status -uno | grep -q 'Your branch is up to date'",
-    "postversion": "zx ./scripts/postversion.mjs",
-    "prepublishOnly": "pnpm run build"
-  },
   "devDependencies": {
     "@clack/prompts": "^1.2.0",
     "@tsconfig/node24": "^24.0.4",
@@ -47,12 +35,21 @@
     "picocolors": "^1.1.1",
     "rolldown": "1.0.0-rc.16",
     "rollup-plugin-license": "^3.7.1",
-    "vite-plus": "catalog:",
-    "vitest": "catalog:",
+    "vite-plus": "latest",
+    "vitest": "npm:@voidzero-dev/vite-plus-test@latest",
     "zx": "^8.8.5"
   },
   "engines": {
     "node": "^20.19.0 || >=22.12.0"
   },
-  "packageManager": "pnpm@10.33.0"
-}
+  "scripts": {
+    "format": "vp fmt",
+    "format-check": "vp fmt --check",
+    "lint": "vp lint . --fix",
+    "build": "rolldown -c rolldown.config.ts",
+    "test": "pnpm run build && pnpm run test:unit",
+    "test:unit": "vp test",
+    "preversion": "git fetch && git status -uno | grep -q 'Your branch is up to date'",
+    "postversion": "zx ./scripts/postversion.mjs"
+  }
+}

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

@@ -3,80 +3,161 @@ import { RouterLink } from '@rue-js/router'
 
 const highlights = [
   {
-    title: '原生 TSX 开发',
-    desc: '直接用发布到 npm 的 Rue 包构建应用，不依赖本地 workspace 或开发态别名。',
+    title: 'Vapor Native DOM',
+    desc: '延续 Rue 的细粒度更新模型，直接面向原生 DOM，适合构建响应迅速的前端界面。',
   },
   {
-    title: 'Vapor Native DOM',
-    desc: '保留 Rue 的细粒度更新模型，适合做展示站、文档站与交互型官网。',
+    title: '原生 JSX / TSX',
+    desc: '以 JSX 和 TSX 作为一等公民，组件、路由和交互逻辑可以在同一套 TypeScript 工作流内完成。',
   },
   {
-    title: '最小接入面',
-    desc: '官网项目只保留 Vite、Rue、Router 与官方插件，部署更直接。',
+    title: '官方脚手架启动',
+    desc: '使用 create-rue 即可生成基于 Vite 的 Rue 应用，适合快速起项目和沉淀模板。',
   },
 ]
 
-const packages = [
-  '@rue-js/rue',
-  '@rue-js/router',
-  '@rue-js/vite-plugin-rue',
+const quickStartCommands = [
+  'npm create rue@latest',
+  'pnpm create rue@latest',
+  'yarn create rue@latest',
+  'bun create rue@latest',
+]
+
+const nextSteps = [
+  '阅读介绍与快速开始，先熟悉 Rue 应用的基本结构。',
+  '使用脚手架创建项目后，安装依赖并启动开发服务器。',
+  '继续查看路由、状态管理和组件能力，再扩展到你的业务页面。',
 ]
 
 const Home: FC = () => (
-  <div className="page-stack">
-    <section className="hero-card">
-      <div className="hero-copy">
-        <p className="eyebrow">已迁移为独立官网应用</p>
-        <h1>Rue.js 官网入口已改为直接消费 npm 发布包</h1>
-        <p className="hero-text">
-          当前站点不再依赖 monorepo 内部开发版本，而是按真实用户使用方式接入 Rue，适合直接部署与对外展示。
-        </p>
-        <div className="hero-actions">
-          <RouterLink to="/guide" className="button primary">
-            查看接入方式
-          </RouterLink>
-          <RouterLink to="/packages" className="button secondary">
-            查看包清单
-          </RouterLink>
+  <div className="space-y-6 pb-4">
+    <section className="hero border border-base-300 bg-base-100/90 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">
+          <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>
+          <p className="max-w-2xl text-base leading-7 text-base-content/70">
+            Rue.js 采用原生 JSX / TSX 开发方式，结合细粒度响应式与面向原生 DOM 的渲染模型，适合构建轻量、直接且可维护的前端应用。
+          </p>
+          <div className="flex flex-wrap gap-3">
+            <RouterLink to="/report" className="btn btn-primary">
+              查看报表页面
+            </RouterLink>
+            <RouterLink to="/todo" className="btn btn-outline">
+              查看 Todo 示例
+            </RouterLink>
+          </div>
+        </div>
+
+        <div className="stats stats-vertical w-full bg-base-200 shadow sm:stats-horizontal lg:w-auto">
+          <div className="stat">
+            <div className="stat-title">Node.js</div>
+            <div className="stat-value text-primary">&gt;= 22.12</div>
+          </div>
+          <div className="stat">
+            <div className="stat-title">启动方式</div>
+            <div className="stat-value text-secondary">create-rue</div>
+          </div>
         </div>
-      </div>
-      <div className="hero-panel">
-        <div className="panel-title">入口结构</div>
-        <pre className="code-block">{`app/
-├─ main.ts
-├─ app.tsx
-├─ router.ts
-└─ pages/
-
-useApp(RootApp)
-  .use(router)
-  .mount('#app')`}</pre>
       </div>
     </section>
 
-    <section className="grid-cards">
+    <section className="grid gap-4 md:grid-cols-3">
       {highlights.map(item => (
-        <article key={item.title} className="info-card">
-          <h2>{item.title}</h2>
-          <p>{item.desc}</p>
+        <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>
+            <p className="text-sm leading-7 text-base-content/70">{item.desc}</p>
+          </div>
         </article>
       ))}
     </section>
 
-    <section className="split-card">
-      <div>
-        <p className="section-tag">官网目标</p>
-        <h2>把原来的应用入口整理成一个可独立构建的官方站点</h2>
-        <p>
-          这里保留了 Rue 应用的基础结构：应用入口、路由、布局与页面拆分；同时移除了依赖本地源码映射与开发期工作区包的部分。
-        </p>
-      </div>
-      <div className="package-list">
-        {packages.map(name => (
-          <span key={name} className="package-pill">
-            {name}
-          </span>
-        ))}
+    <section className="grid gap-6 xl:grid-cols-[1.35fr_0.85fr]">
+      <article className="card border border-base-300 bg-base-100 shadow-sm">
+        <div className="card-body gap-5">
+          <div>
+            <div className="badge badge-outline">快速开始</div>
+            <h2 className="mt-3 text-2xl font-semibold">创建第一个 Rue 应用</h2>
+          </div>
+
+          <div className="mockup-code text-sm">
+            {quickStartCommands.map(command => (
+              <pre key={command} data-prefix="$">
+                <code>{command}</code>
+              </pre>
+            ))}
+            <pre data-prefix="$">
+              <code>cd &lt;your-project-name&gt;</code>
+            </pre>
+            <pre data-prefix="$">
+              <code>npm install</code>
+            </pre>
+            <pre data-prefix="$">
+              <code>npm run dev</code>
+            </pre>
+          </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 目录。
+          </div>
+        </div>
+      </article>
+
+      <article className="card border border-base-300 bg-base-100 shadow-sm">
+        <div className="card-body gap-5">
+          <div>
+            <div className="badge badge-outline">下一步</div>
+            <h2 className="mt-3 text-2xl font-semibold">继续阅读路线</h2>
+          </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">
+                {step}
+              </div>
+            ))}
+          </div>
+
+          <div className="divider my-0"></div>
+
+          <div className="flex flex-col gap-3">
+            <RouterLink to="/report" className="btn btn-outline w-full justify-between">
+              打开报表页
+              <span>→</span>
+            </RouterLink>
+            <RouterLink to="/todo" className="btn btn-outline w-full justify-between">
+              打开 Todo 示例
+              <span>→</span>
+            </RouterLink>
+          </div>
+        </div>
+      </article>
+    </section>
+
+    <section className="card border border-base-300 bg-base-100 shadow-sm">
+      <div className="card-body gap-4">
+        <div className="flex items-start justify-between gap-4">
+          <div>
+            <div className="badge badge-outline">文档入口</div>
+            <h2 className="mt-3 text-2xl font-semibold">首页建议保留的核心信息</h2>
+          </div>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-3">
+          <div className="rounded-2xl bg-base-200 p-5">
+            <div className="text-sm text-base-content/60">介绍</div>
+            <div className="mt-2 text-lg font-semibold">框架定位与渲染模型</div>
+          </div>
+          <div className="rounded-2xl bg-base-200 p-5">
+            <div className="text-sm text-base-content/60">快速开始</div>
+            <div className="mt-2 text-lg font-semibold">脚手架、安装依赖与启动开发环境</div>
+          </div>
+          <div className="rounded-2xl bg-base-200 p-5">
+            <div className="text-sm text-base-content/60">扩展阅读</div>
+            <div className="mt-2 text-lg font-semibold">路由、状态管理、组件与工具链</div>
+          </div>
+        </div>
       </div>
     </section>
   </div>

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

@@ -0,0 +1,192 @@
+import { type FC } from '@rue-js/rue'
+import { RouterLink } from '@rue-js/router'
+
+type ReportRow = {
+  day: string
+  orders: number
+  revenue: number
+  conversion: number
+  note: string
+}
+
+const rows: ReportRow[] = [
+  { day: '04-21', orders: 42, revenue: 18600, conversion: 7.2, note: '新品投放启动' },
+  { day: '04-22', orders: 55, revenue: 24180, conversion: 8.4, note: '自然流量增长' },
+  { day: '04-23', orders: 61, revenue: 28640, conversion: 9.1, note: '渠道折扣带动' },
+  { day: '04-24', orders: 48, revenue: 20520, conversion: 7.8, note: '高客单回落' },
+  { day: '04-25', orders: 74, revenue: 36440, conversion: 10.6, note: '私域活动峰值' },
+  { day: '04-26', orders: 66, revenue: 30900, conversion: 9.7, note: '成交保持稳定' },
+]
+
+const moneyFormatter = new Intl.NumberFormat('zh-CN', {
+  style: 'currency',
+  currency: 'CNY',
+  maximumFractionDigits: 0,
+})
+
+const integerFormatter = new Intl.NumberFormat('zh-CN')
+
+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 summaryCards = [
+  {
+    label: '累计成交额',
+    value: moneyFormatter.format(totalRevenue),
+    detail: '过去 6 天整体表现',
+    tone: 'bg-primary text-primary-content',
+  },
+  {
+    label: '累计订单数',
+    value: integerFormatter.format(totalOrders),
+    detail: '订单总量',
+    tone: 'bg-secondary text-secondary-content',
+  },
+  {
+    label: '平均转化率',
+    value: `${avgConversion.toFixed(1)}%`,
+    detail: '按日均值计算',
+    tone: 'bg-accent text-accent-content',
+  },
+  {
+    label: '峰值日期',
+    value: peakRow.day,
+    detail: `${moneyFormatter.format(peakRow.revenue)} / ${peakRow.orders} 单`,
+    tone: 'bg-neutral text-neutral-content',
+  },
+]
+
+const Report: FC = () => (
+  <div className="space-y-6 pb-4">
+    <section className="hero border border-base-300 bg-base-100/90 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">报表页面</h1>
+          <div className="flex flex-wrap gap-3">
+            <RouterLink to="/" className="btn btn-outline">
+              返回首页
+            </RouterLink>
+            <RouterLink to="/todo" className="btn btn-primary">
+              查看 Todo 示例
+            </RouterLink>
+          </div>
+        </div>
+
+        <div className="stats stats-vertical w-full bg-base-200 shadow sm:stats-horizontal lg:w-auto">
+          <div className="stat">
+            <div className="stat-title">最近窗口</div>
+            <div className="stat-value text-primary">6 天</div>
+          </div>
+          <div className="stat">
+            <div className="stat-title">可切换主题</div>
+            <div className="stat-value text-secondary">全部</div>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <section className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
+      {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>
+            <h2 className="text-3xl font-semibold">{card.value}</h2>
+            <p className="text-sm opacity-80">{card.detail}</p>
+          </div>
+        </article>
+      ))}
+    </section>
+
+    <section className="grid gap-6 xl:grid-cols-[1.35fr_0.85fr]">
+      <article className="card border border-base-300 bg-base-100 shadow-sm">
+        <div className="card-body gap-5">
+          <div className="flex items-start justify-between gap-4">
+            <div>
+              <div className="badge badge-outline">营收走势</div>
+              <h2 className="mt-3 text-2xl font-semibold">最近 6 天成交波动</h2>
+            </div>
+            <div className="text-right text-sm text-base-content/60">
+              <div>峰值 {peakRow.day}</div>
+              <div>{moneyFormatter.format(peakRow.revenue)}</div>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            {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>
+                <div className="flex items-center justify-between gap-4 text-xs text-base-content/60">
+                  <span>{row.orders} 单</span>
+                  <span>转化率 {row.conversion}%</span>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </article>
+
+      <article className="card border border-base-300 bg-base-100 shadow-sm">
+        <div className="card-body gap-5">
+          <div>
+            <h2 className="text-2xl font-semibold">报表概览</h2>
+          </div>
+
+          <div className="divider my-0"></div>
+
+          <div className="space-y-3">
+            <div className="rounded-2xl bg-base-200 p-4">
+              <div className="font-medium">左上角按钮可隐藏顶部</div>
+            </div>
+            <RouterLink to="/todo" className="btn btn-outline w-full justify-between">
+              切到 Todo 示例
+              <span>→</span>
+            </RouterLink>
+          </div>
+        </div>
+      </article>
+    </section>
+
+    <section className="card border border-base-300 bg-base-100 shadow-sm">
+      <div className="card-body gap-4 overflow-x-auto">
+        <div className="flex items-end justify-between gap-4">
+          <div>
+            <div className="badge badge-outline">明细预览</div>
+            <h2 className="mt-3 text-2xl font-semibold">日报明细表</h2>
+          </div>
+        </div>
+
+        <table className="table table-zebra">
+          <thead>
+            <tr>
+              <th>日期</th>
+              <th>订单数</th>
+              <th>成交额</th>
+              <th>转化率</th>
+              <th>备注</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map(row => (
+              <tr key={row.day}>
+                <td className="font-medium">{row.day}</td>
+                <td>{row.orders}</td>
+                <td>{moneyFormatter.format(row.revenue)}</td>
+                <td>{row.conversion}%</td>
+                <td>{row.note}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </section>
+  </div>
+)
+
+export default Report