create-yoya-ui 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,20 @@
+# create-yoya-ui
+
+快速搭建 [yoya-ui](https://github.com/yoyaflow/yoya-ui) 项目的脚手架。
+
+## 用法
+
+```bash
+npx create-yoya-ui@latest my-app                 # basic 模板（SPA）
+npx create-yoya-ui@latest my-app --template ssr  # SSR 模板
+cd my-app
+npm install
+```
+
+- **basic**：默认模板，`npm run dev` 启动 Vite 开发服务器
+- **ssr**：服务端渲染模板，`npm run build && npm start`（renderPage 整页渲染 + hydrateOrMount 客户端接入）
+
+## 模板内容
+
+- `templates/basic`：页面壳、按钮事件、表单收集校验、主题切换
+- `templates/ssr`：home-page.js（页面组件 + 词典）、server.mjs（node:http + renderPage）、client.js（hydrateOrMount）

package/bin/create-yoya-ui.js

@@ -4,10 +4,18 @@ import { cpSync, existsSync, mkdirSync, readFileSync, readdirSync, writeFileSync
 import { join, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
-const templateDir = resolve(fileURLToPath(new URL('../templates/basic', import.meta.url)));
 const args = process.argv.slice(2);
 const targetName = args[0] || 'yoya-ui-app';
 const targetDir = resolve(process.cwd(), targetName);
+const templateArgIndex = args.indexOf('--template');
+const templateName =
+  templateArgIndex !== -1 && args[templateArgIndex + 1] ? args[templateArgIndex + 1] : 'basic';
+const templateRoot = resolve(fileURLToPath(new URL(`../templates/${templateName}`, import.meta.url)));
+
+if (!existsSync(templateRoot)) {
+  console.error(`未知模板：${templateName}（可用：basic、ssr）`);
+  process.exit(1);
+}
 
 if (existsSync(targetDir) && readdirSafe(targetDir).length > 0) {
   console.error(`目标目录已存在且非空：${targetDir}`);
@@ -15,7 +23,7 @@ if (existsSync(targetDir) && readdirSafe(targetDir).length > 0) {
 }
 
 mkdirSync(targetDir, { recursive: true });
-cpSync(templateDir, targetDir, { recursive: true });
+cpSync(templateRoot, targetDir, { recursive: true });
 
 // 把模板 package.json 的 name 改为目标目录名
 const packagePath = join(targetDir, 'package.json');
@@ -26,8 +34,14 @@ writeFileSync(packagePath, `${JSON.stringify(pkg, null, 2)}\n`);
 console.log(`\n已创建 yoya-ui 项目：${targetName}\n`);
 console.log(`  cd ${targetName}`);
 console.log('  npm install');
-console.log('  npm run dev');
-console.log('\n更多：npm run build 构建，npm run preview 预览产物。\n');
+if (templateName === 'ssr') {
+  console.log('  npm run build');
+  console.log('  npm start');
+  console.log('\nSSR 模板：renderPage 整页渲染 + hydrateOrMount 客户端接入。\n');
+} else {
+  console.log('  npm run dev');
+  console.log('\n更多：npm run build 构建，npm run preview 预览产物。\n');
+}
 
 function sanitizeName(name) {
   return name

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-yoya-ui",
-  "version": "0.1.0",
-  "description": "Scaffold a new yoya-ui project with Vite: quick start template with example page, form and theme switching.",
+  "version": "0.1.1",
+  "description": "Scaffold a new yoya-ui project with Vite: basic template (SPA) or SSR template (renderPage + hydrateOrMount).",
   "type": "module",
   "bin": {
     "create-yoya-ui": "bin/create-yoya-ui.js"

package/templates/basic/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@yoyaflow/yoya-ui": "^0.1.0"
+    "@yoyaflow/yoya-ui": "^0.2.0"
   },
   "devDependencies": {
     "vite": "^8.2.0"

package/templates/ssr/README.md

@@ -0,0 +1,32 @@
+# yoya-ui SSR 示例项目
+
+基于 [yoya-ui](https://github.com/yoyaflow/yoya-ui) 的服务端渲染模板：
+
+- 页面即组件：`HomePage(state)` 服务端与客户端共用
+- 整页渲染：`renderPage({ page }, state, { messages })` 一行输出完整 HTML
+- 客户端一行接入：`hydrateOrMount(HomePage, { messages })`
+- 每请求 i18n：`messages` 按 `state.lang` 建实例，`.s()` 自动作用域
+
+## 启动
+
+```bash
+npm install
+npm run build   # 生成 dist/client.js 与 dist/assets/yoya.ui.css
+npm start       # http://localhost:3000
+```
+
+## 结构
+
+```text
+src/
+  home-page.js   页面组件 + 词典（两端共用）
+  server.mjs     node:http 服务端（renderPage 整页渲染 + 静态资源）
+  client.js      浏览器入口（hydrateOrMount）
+```
+
+语言标识：切换语言时写 cookie（如 `document.cookie = 'yoya-lang=en; path=/'`），服务端从 cookie 解析 `lang` 传入 `renderPage`。
+
+## 学习资源
+
+- SSR 集成与底层原语（renderToString / hydrate / mount）见 [docs/ssr.md](https://github.com/yoyaflow/yoya-ui/blob/main/docs/ssr.md)
+- 完整 API 见包内类型声明（`types/*.d.ts`）

package/templates/ssr/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "yoya-ui-ssr-app",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "start": "node src/server.mjs",
+    "preview": "npm run build && npm start"
+  },
+  "dependencies": {
+    "@yoyaflow/yoya-ui": "^0.2.0"
+  },
+  "devDependencies": {
+    "vite": "^8.2.0"
+  }
+}

package/templates/ssr/src/client.js

@@ -0,0 +1,6 @@
+import '@yoyaflow/yoya-ui/ui.css';
+import { hydrateOrMount } from '@yoyaflow/yoya-ui/ssr';
+import { HomePage, messages } from './home-page.js';
+
+// 自动读 __YOYA_DATA__ → #app 有服务端 HTML 走 hydrate，否则 mount
+hydrateOrMount(HomePage, { messages });

package/templates/ssr/src/home-page.js

@@ -0,0 +1,21 @@
+import { createRouter, div } from '@yoyaflow/yoya-ui/ssr';
+
+export const messages = {
+  'zh-CN': { title: 'SSR 示例', home: '首页' },
+  'en-US': { title: 'SSR Demo', home: 'Home' }
+};
+
+// 页面即形态 A 组件：服务端与客户端共用同一份定义
+export function HomePage(state) {
+  const router = createRouter();
+  router.mode(state.mode || 'history');
+  router.route('/home', '首页'.s('home'));
+  router.notFound('未找到');
+  router.renderPath(state.path || '/home');
+
+  return div((root) => {
+    root.h1('SSR 示例'.s('title'));
+    root.child(router);
+    root.p('服务端渲染完成，事件由 hydrate 在浏览器端绑定。');
+  });
+}

package/templates/ssr/src/server.mjs

@@ -0,0 +1,49 @@
+import { createServer } from 'node:http';
+import { existsSync, readFileSync } from 'node:fs';
+import { extname, join } from 'node:path';
+import { renderPage } from '@yoyaflow/yoya-ui/ssr';
+import { HomePage, messages } from './home-page.js';
+
+const DIST = join(import.meta.dirname, '..', 'dist');
+const MIME = { '.css': 'text/css', '.js': 'text/javascript' };
+const PORT = Number(process.env.PORT || 3000);
+
+createServer((req, res) => {
+  const path = new URL(req.url, 'http://localhost').pathname;
+
+  // 静态资源：client.js 与 assets/yoya.ui.css 由 npm run build 产出
+  if (path !== '/') {
+    const file = join(DIST, path.slice(1));
+    if (existsSync(file)) {
+      res.writeHead(200, { 'Content-Type': MIME[extname(file)] || 'application/octet-stream' });
+      res.end(readFileSync(file));
+      return;
+    }
+  }
+
+  // lang 由你的服务端解析（cookie / query / 登录态都行）
+  const lang = req.headers.cookie?.includes('yoya-lang=en') ? 'en' : 'zh-CN';
+
+  const html = renderPage(
+    {
+      page: (page, state) => {
+        page.head((head) => {
+          head.title('SSR 示例'.s('title'));
+          head.meta({ charset: 'utf-8' });
+          head.link({ rel: 'stylesheet', href: '/assets/yoya.ui.css' });
+        });
+        page.body((body) => {
+          body.vBody((shell) => {
+            shell.h1('SSR 示例'.s('title'));
+            shell.child(HomePage(state)); // state = { lang, path, mode }
+          });
+        });
+      }
+    },
+    { lang, mode: 'history', path },
+    { messages } // 按 state.lang 建每请求 i18n，.s() 自动作用域
+  );
+
+  res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
+  res.end(html);
+}).listen(PORT, () => console.log(`SSR server: http://localhost:${PORT}`));

package/templates/ssr/vite.config.js

@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    emptyOutDir: true,
+    outDir: 'dist',
+    rollupOptions: {
+      input: 'src/client.js',
+      output: {
+        assetFileNames: (assetInfo) =>
+          assetInfo.name?.endsWith('.css') ? 'assets/yoya.ui.css' : 'assets/[name][extname]',
+        entryFileNames: 'client.js'
+      }
+    }
+  }
+});