create-rue 0.0.1

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "create-rue",
+  "version": "0.0.1",
+  "description": "🛠️ The recommended way to start a Vite-powered Rue project",
+  "keywords": [],
+  "homepage": "https://github.com/hunzhiwange/create-rue#readme",
+  "bugs": {
+    "url": "https://github.com/hunzhiwange/create-rue/issues"
+  },
+  "license": "MIT",
+  "author": "XiangminLiu <xiangminliu1990@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hunzhiwange/create-rue.git"
+  },
+  "bin": {
+    "create-rue": "bundle.js"
+  },
+  "files": [
+    "bundle.js",
+    "template",
+    "!template/**/node_modules/.bin/*"
+  ],
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepare": "vp config",
+    "format": "vp fmt",
+    "format-check": "vp fmt --check",
+    "lint": "vp lint . --fix",
+    "build": "rolldown -c rolldown.config.ts",
+    "snapshot": "zx ./scripts/snapshot.mjs",
+    "pretest": "pnpm run build && pnpm run snapshot",
+    "test": "zx ./scripts/test.mjs",
+    "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",
+    "@types/node": "^24.12.2",
+    "ejs": "^3.1.10",
+    "picocolors": "^1.1.1",
+    "rolldown": "1.0.0-rc.16",
+    "rollup-plugin-license": "^3.7.1",
+    "vite-plus": "catalog:",
+    "vitest": "catalog:",
+    "zx": "^8.8.5"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  },
+  "packageManager": "pnpm@10.33.0"
+}

package/template/base/.editorconfig

@@ -0,0 +1,6 @@
+[*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,rue}]
+charset = utf-8
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true

package/template/base/.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

package/template/base/.oxfmtrc.json

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid"
+}

package/template/base/.oxlintrc.json

@@ -0,0 +1,11 @@
+{
+  "ignorePatterns": [
+    "**/.doc/**",
+    "**/dist/**",
+    "**/temp/**",
+    "**/coverage/**",
+    "packages/**/pkg/**",
+    "packages/**/pkg-node/**",
+    "packages/swc-plugin-rue/target/**"
+  ]
+}

package/template/base/app/app.tsx

@@ -0,0 +1,12 @@
+import { type FC, useApp } from '@rue-js/rue'
+import { RouterView } from '@rue-js/router'
+import router from './router'
+import SiteLayout from './pages/components/Layout'
+
+const RootApp: FC = () => (
+  <SiteLayout>
+    <RouterView />
+  </SiteLayout>
+)
+
+useApp(RootApp).use(router).mount('#app')

package/template/base/app/main.ts

@@ -0,0 +1,2 @@
+import '../style.css'
+import './app'

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

@@ -0,0 +1,47 @@
+import { type FC } from '@rue-js/rue'
+
+const ecosystemItems = [
+  {
+    title: '官网入口',
+    desc: '用最小 Rue 应用结构承载内容页面，便于继续往文档站或产品站扩展。',
+  },
+  {
+    title: '路由层',
+    desc: '通过 hash history 直接适配静态站点部署，不要求服务端额外做重写配置。',
+  },
+  {
+    title: '构建层',
+    desc: '依赖 Vite 与官方插件完成编译，生产构建方式和外部用户保持一致。',
+  },
+]
+
+const Ecosystem: FC = () => (
+  <div className="page-stack">
+    <section className="content-card">
+      <p className="section-tag">生态能力</p>
+      <h1>从应用迁移到官网的结构拆分</h1>
+      <p>迁移后的站点把入口、路由、布局和内容页解耦，后续扩展成完整官网时会更容易维护。</p>
+    </section>
+
+    <section className="grid-cards">
+      {ecosystemItems.map(item => (
+        <article key={item.title} className="info-card">
+          <h2>{item.title}</h2>
+          <p>{item.desc}</p>
+        </article>
+      ))}
+    </section>
+
+    <section className="content-card">
+      <h2>适合继续扩展的方向</h2>
+      <ul className="bullet-list">
+        <li>补充文档页与 API 页</li>
+        <li>接入组件示例与代码演示</li>
+        <li>增加下载、版本、生态导航</li>
+        <li>对接真实官网视觉资源</li>
+      </ul>
+    </section>
+  </div>
+)
+
+export default Ecosystem

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

@@ -0,0 +1,49 @@
+import { type FC } from '@rue-js/rue'
+
+const steps = [
+  '安装 @rue-js/rue、@rue-js/router 与 @rue-js/vite-plugin-rue。',
+  '在 vite.config.ts 中注册 rue() 插件。',
+  '在 tsconfig.json 中设置 jsx 为 preserve，jsxImportSource 为 @rue-js/rue。',
+  '在 app/app.tsx 中创建根组件并通过 useApp 挂载到 #app。',
+]
+
+const Guide: FC = () => (
+  <div className="page-stack">
+    <section className="content-card">
+      <p className="section-tag">快速上手</p>
+      <h1>独立官网项目的最小接入方式</h1>
+      <p>
+        这个迁移版本采用真实发布包依赖，避免继续引用 monorepo 中的本地开发路径，能更准确反映外部用户的接入体验。
+      </p>
+    </section>
+
+    <section className="content-card">
+      <h2>接入步骤</h2>
+      <div className="step-list">
+        {steps.map((step, index) => (
+          <div key={step} className="step-item">
+            <span className="step-index">0{index + 1}</span>
+            <p>{step}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+
+    <section className="content-card">
+      <h2>配置示例</h2>
+      <pre className="code-block">{`import { defineConfig } from 'vite'
+import VitePluginRue from '@rue-js/vite-plugin-rue'
+
+export default defineConfig({
+  plugins: [
+    VitePluginRue({
+      include: ['/app/'],
+      debug: true,
+    }),
+  ],
+})`}</pre>
+    </section>
+  </div>
+)
+
+export default Guide

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

@@ -0,0 +1,85 @@
+import { type FC } from '@rue-js/rue'
+import { RouterLink } from '@rue-js/router'
+
+const highlights = [
+  {
+    title: '原生 TSX 开发',
+    desc: '直接用发布到 npm 的 Rue 包构建应用，不依赖本地 workspace 或开发态别名。',
+  },
+  {
+    title: 'Vapor Native DOM',
+    desc: '保留 Rue 的细粒度更新模型，适合做展示站、文档站与交互型官网。',
+  },
+  {
+    title: '最小接入面',
+    desc: '官网项目只保留 Vite、Rue、Router 与官方插件，部署更直接。',
+  },
+]
+
+const packages = [
+  '@rue-js/rue',
+  '@rue-js/router',
+  '@rue-js/vite-plugin-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>
+      </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">
+      {highlights.map(item => (
+        <article key={item.title} className="info-card">
+          <h2>{item.title}</h2>
+          <p>{item.desc}</p>
+        </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>
+        ))}
+      </div>
+    </section>
+  </div>
+)
+
+export default Home

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

@@ -0,0 +1,52 @@
+import { type FC } from '@rue-js/rue'
+
+const packageRows = [
+  {
+    name: '@rue-js/rue',
+    role: '核心运行时与 TSX API',
+    detail: '提供 FC、useApp 以及响应式能力，是官网应用的主入口依赖。',
+  },
+  {
+    name: '@rue-js/router',
+    role: '前端路由',
+    detail: '提供 RouterView、RouterLink 与 createRouter，用于承载官网页面切换。',
+  },
+  {
+    name: '@rue-js/vite-plugin-rue',
+    role: 'Vite 集成插件',
+    detail: '处理 Rue 的编译接入，让 TSX 在独立 Vite 项目中正常工作。',
+  },
+]
+
+const Packages: FC = () => (
+  <div className="page-stack">
+    <section className="content-card">
+      <p className="section-tag">Packages</p>
+      <h1>当前官网使用的 npm 包</h1>
+      <p>现在的站点只保留正式发布包依赖，便于版本管理、构建复现与生产部署。</p>
+    </section>
+
+    <section className="table-card">
+      <div className="table-head">
+        <span>包名</span>
+        <span>职责</span>
+        <span>说明</span>
+      </div>
+      {packageRows.map(row => (
+        <div key={row.name} className="table-row">
+          <span className="cell-name">{row.name}</span>
+          <span>{row.role}</span>
+          <span>{row.detail}</span>
+        </div>
+      ))}
+    </section>
+
+    <section className="content-card">
+      <h2>安装命令</h2>
+      <pre className="code-block">{`npm install @rue-js/rue @rue-js/router
+npm install -D vite typescript @rue-js/vite-plugin-rue`}</pre>
+    </section>
+  </div>
+)
+
+export default Packages

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

@@ -0,0 +1,67 @@
+import { type FC } from '@rue-js/rue'
+import { RouterLink, useRoute } from '@rue-js/router'
+
+const navItems = [
+  { to: '/', label: '首页' },
+  { to: '/guide', label: '快速上手' },
+  { to: '/packages', label: '包与集成' },
+  { to: '/ecosystem', label: '生态能力' },
+]
+
+const Header: FC = () => {
+  const route = useRoute()
+  const currentPath = route.get()?.path || '/'
+
+  return (
+    <header className="site-header">
+      <div className="shell header-inner">
+        <RouterLink to="/" className="brand">
+          <span className="brand-mark">R</span>
+          <span className="brand-copy">
+            <span className="brand-title">Rue.js</span>
+            <span className="brand-subtitle">The Vapor Native DOM Framework</span>
+          </span>
+        </RouterLink>
+        <nav className="main-nav">
+          {navItems.map(item => (
+            <RouterLink
+              key={item.to}
+              to={item.to}
+              className={`nav-link ${currentPath === item.to ? 'is-active' : ''}`}
+            >
+              {item.label}
+            </RouterLink>
+          ))}
+        </nav>
+      </div>
+    </header>
+  )
+}
+
+const Footer: FC = () => (
+  <footer className="site-footer">
+    <div className="shell footer-inner">
+      <div>
+        <div className="footer-title">Rue.js</div>
+        <p className="footer-copy">已切换为基于 npm 已发布包的官网入口，可直接部署静态站点。</p>
+      </div>
+      <div className="footer-meta">
+        <span>@rue-js/rue</span>
+        <span>@rue-js/router</span>
+        <span>@rue-js/vite-plugin-rue</span>
+      </div>
+    </div>
+  </footer>
+)
+
+const SiteLayout: FC = props => (
+  <div className="site-frame">
+    <Header />
+    <main className="site-main">
+      <div className="shell">{props.children}</div>
+    </main>
+    <Footer />
+  </div>
+)
+
+export default SiteLayout

package/template/base/app/router.ts

@@ -0,0 +1,14 @@
+import { useComponent } from '@rue-js/rue'
+import { createRouter, createWebHashHistory } from '@rue-js/router'
+
+const routes = [
+  { path: '/', component: useComponent(() => import('./pages/Home')) },
+  { path: '/guide', component: useComponent(() => import('./pages/Guide')) },
+  { path: '/packages', component: useComponent(() => import('./pages/Packages')) },
+  { path: '/ecosystem', component: useComponent(() => import('./pages/Ecosystem')) },
+]
+
+export default createRouter({
+  history: createWebHashHistory(),
+  routes,
+})

package/template/base/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="description"
+      content="Rue.js 官网，使用已发布的 npm 包构建，提供框架介绍、接入方式与生态概览。"
+    />
+    <title>Rue.js 官网</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/app/main.ts"></script>
+  </body>
+</html>