weifuwu 0.19.0 → 0.19.1

package/cli/template/.weifuwu/ssr/96f5704e.js

@@ -0,0 +1,481 @@
+// ui/page.tsx
+import { useState as useState6 } from "react";
+
+// ../../use-websocket.ts
+import { useEffect, useRef, useCallback, useState } from "react";
+var RECONNECT_DELAY = 3e3;
+var MAX_RETRIES = 10;
+function resolveUrl(url) {
+  return typeof url === "function" ? url() : url;
+}
+function useWebsocket(url, options) {
+  const { onMessage, reconnect: reconnectOpt = true, protocols, enabled = true } = options ?? {};
+  const [lastMessage, setLastMessage] = useState(null);
+  const [readyState, setReadyState] = useState(WebSocket.CLOSED);
+  const wsRef = useRef(null);
+  const retryRef = useRef(0);
+  const timerRef = useRef(void 0);
+  const mountedRef = useRef(true);
+  const shouldReconnectRef = useRef(true);
+  const urlRef = useRef(url);
+  const optsRef = useRef({ onMessage, reconnectOpt, protocols });
+  urlRef.current = url;
+  optsRef.current = { onMessage, reconnectOpt, protocols };
+  const cleanup = useCallback(() => {
+    clearTimeout(timerRef.current);
+    wsRef.current?.close();
+    wsRef.current = null;
+  }, []);
+  const connect = useCallback(() => {
+    if (!mountedRef.current || !enabled) return;
+    const resolved = resolveUrl(urlRef.current);
+    if (!resolved) return;
+    wsRef.current?.close();
+    const ws = new WebSocket(resolved, optsRef.current.protocols);
+    wsRef.current = ws;
+    setReadyState(WebSocket.CONNECTING);
+    ws.addEventListener("open", () => {
+      if (!mountedRef.current) return;
+      retryRef.current = 0;
+      setReadyState(WebSocket.OPEN);
+    });
+    ws.addEventListener("message", (e) => {
+      if (!mountedRef.current) return;
+      const data = typeof e.data === "string" ? e.data : String(e.data);
+      setLastMessage(data);
+      optsRef.current.onMessage?.(data);
+    });
+    ws.addEventListener("close", () => {
+      if (!mountedRef.current) return;
+      setReadyState(WebSocket.CLOSED);
+      const ro = optsRef.current.reconnectOpt;
+      if (ro && shouldReconnectRef.current && mountedRef.current) {
+        const maxRetries = typeof ro === "object" ? ro.maxRetries ?? MAX_RETRIES : MAX_RETRIES;
+        const delay = typeof ro === "object" ? ro.delay ?? RECONNECT_DELAY : RECONNECT_DELAY;
+        if (retryRef.current < maxRetries) {
+          retryRef.current++;
+          timerRef.current = setTimeout(() => connect(), delay);
+        }
+      }
+    });
+  }, [enabled]);
+  useEffect(() => {
+    mountedRef.current = true;
+    shouldReconnectRef.current = true;
+    if (enabled) connect();
+    return () => {
+      mountedRef.current = false;
+      cleanup();
+    };
+  }, [enabled, connect, cleanup]);
+  const send = useCallback((data) => {
+    wsRef.current?.send(data);
+  }, []);
+  const close = useCallback(() => {
+    shouldReconnectRef.current = false;
+    cleanup();
+    setReadyState(WebSocket.CLOSED);
+  }, [cleanup]);
+  const reconnectFn = useCallback(() => {
+    retryRef.current = 0;
+    shouldReconnectRef.current = true;
+    cleanup();
+    connect();
+  }, [cleanup, connect]);
+  return { send, close, readyState, lastMessage, reconnect: reconnectFn };
+}
+
+// ../../use-action.ts
+import { useState as useState2, useCallback as useCallback2, useRef as useRef2 } from "react";
+
+// ../../client-router.ts
+import { createElement, useCallback as useCallback3, useState as useState3, useEffect as useEffect2 } from "react";
+
+// ../../client-pref.ts
+var interceptors = [];
+function addInterceptor(fn) {
+  interceptors.push(fn);
+}
+async function runInterceptors(url) {
+  for (const fn of interceptors) {
+    if (await fn(url)) return true;
+  }
+  return false;
+}
+
+// ../../client-router.ts
+var _navigating = false;
+var _listeners = [];
+function setNavigating(v) {
+  _navigating = v;
+  for (const fn of _listeners) fn(v);
+}
+async function navigate(href) {
+  if (typeof document === "undefined") return;
+  const url = new URL(href, location.origin);
+  if (url.origin !== location.origin) {
+    location.href = href;
+    return;
+  }
+  if (await runInterceptors(url)) return;
+  const scrollPos = [window.scrollX, window.scrollY];
+  setNavigating(true);
+  try {
+    const html = await fetch(url.pathname + url.search, {
+      headers: { accept: "text/html" }
+    }).then((r) => r.text());
+    const doc = new DOMParser().parseFromString(html, "text/html");
+    const rootEl = doc.getElementById("__weifuwu_root");
+    if (!rootEl) {
+      location.href = href;
+      return;
+    }
+    const newHtml = rootEl.innerHTML;
+    const propsMatch = html.match(/window\.__WEIFUWU_PROPS=(.+?)<\/script>/);
+    if (!propsMatch) {
+      location.href = href;
+      return;
+    }
+    const bundleMatch = html.match(/src="(\/__wfw\/client\/[^"]+\.js)"/);
+    const bundleUrl = bundleMatch ? bundleMatch[1] : null;
+    applyHead(html);
+    const currentRoot = document.getElementById("__weifuwu_root");
+    if (!currentRoot) {
+      location.href = href;
+      return;
+    }
+    ;
+    window.__WEIFUWU_PROPS = JSON.parse(propsMatch[1]);
+    history.pushState(null, "", url.pathname + url.search);
+    currentRoot.innerHTML = newHtml;
+    const ctxMatch = html.match(/window\.__WEIFUWU_CTX=(.+?)<\/script>/);
+    if (ctxMatch) {
+      try {
+        window.__WEIFUWU_CTX = JSON.parse(ctxMatch[1]);
+      } catch {
+      }
+    }
+    const localeMatch = html.match(/window\.__LOCALE_DATA__=(.+?)<\/script>/);
+    if (localeMatch) {
+      try {
+        window.__LOCALE_DATA__ = JSON.parse(localeMatch[1]);
+      } catch {
+      }
+    }
+    if (bundleUrl) {
+      try {
+        await import(
+          /* @vite-ignore */
+          `${bundleUrl}`
+        );
+      } catch (e) {
+        console.error("[weifuwu/router] hydration failed:", e);
+        location.href = href;
+      }
+    }
+    window.scrollTo(scrollPos[0], scrollPos[1]);
+  } finally {
+    setNavigating(false);
+  }
+}
+function applyHead(html) {
+  const match = html.match(/<template id="__wfw_head">([\s\S]*?)<\/template>/);
+  if (!match) return;
+  const headHtml = match[1];
+  const titleMatch = headHtml.match(/<title>([^<]*)<\/title>/);
+  if (titleMatch) document.title = titleMatch[1];
+  const doc = new DOMParser().parseFromString(headHtml, "text/html");
+  const newMeta = doc.querySelectorAll("meta");
+  const existing = document.querySelectorAll("head meta");
+  const newNames = new Set(Array.from(newMeta).map((m) => m.getAttribute("name") || m.getAttribute("property") || ""));
+  for (const el of existing) {
+    const key = el.getAttribute("name") || el.getAttribute("property") || "";
+    if (!newNames.has(key)) el.remove();
+  }
+  for (const el of newMeta) {
+    const key = el.getAttribute("name") || el.getAttribute("property") || "";
+    let existingEl = null;
+    if (key) {
+      for (const m of document.head.querySelectorAll("meta")) {
+        if (m.getAttribute("name") === key || m.getAttribute("property") === key) {
+          existingEl = m;
+          break;
+        }
+      }
+    }
+    if (existingEl) {
+      for (const attr of el.attributes) existingEl.setAttribute(attr.name, attr.value);
+    } else {
+      document.head.appendChild(el.cloneNode());
+    }
+  }
+  const newLink = doc.querySelector('link[rel="canonical"]');
+  const existingLink = document.querySelector('link[rel="canonical"]');
+  if (newLink) {
+    if (existingLink) existingLink.setAttribute("href", newLink.getAttribute("href") || "");
+    else document.head.appendChild(newLink.cloneNode());
+  } else if (existingLink) {
+    existingLink.remove();
+  }
+}
+
+// ../../tsx-context.ts
+import { useSyncExternalStore, createContext } from "react";
+var DEFAULT_CTX = { params: {}, query: {}, parsed: {}, prefs: {}, loaderData: {}, env: {}, user: {} };
+var KEY = "__WEIFUWU_CTX_STORE";
+function getStore() {
+  if (typeof globalThis !== "undefined" && globalThis[KEY]) {
+    return globalThis[KEY];
+  }
+  const s = {
+    _ctx: DEFAULT_CTX,
+    _snapshot: { params: DEFAULT_CTX.params, query: DEFAULT_CTX.query, user: DEFAULT_CTX.user, parsed: DEFAULT_CTX.parsed, prefs: DEFAULT_CTX.prefs, env: DEFAULT_CTX.env },
+    _listeners: /* @__PURE__ */ new Set(),
+    _alsGetStore: null
+  };
+  if (typeof globalThis !== "undefined") {
+    globalThis[KEY] = s;
+  }
+  return s;
+}
+var store = getStore();
+var subscribe = (cb) => {
+  store._listeners.add(cb);
+  return () => {
+    store._listeners.delete(cb);
+  };
+};
+var getSnapshot = () => store._snapshot;
+function setCtx(value) {
+  store._ctx = { ...store._ctx, ...value };
+  store._snapshot = { params: store._ctx.params, query: store._ctx.query, user: store._ctx.user, parsed: store._ctx.parsed, prefs: store._ctx.prefs, env: store._ctx.env };
+  store._listeners.forEach((fn) => fn());
+}
+function useCtx() {
+  if (typeof window !== "undefined") {
+    const snapshot = useSyncExternalStore(subscribe, getSnapshot);
+    return { ...snapshot, ...window.__WEIFUWU_CTX };
+  }
+  const alsStore = store._alsGetStore?.();
+  return alsStore ?? store._ctx;
+}
+function useLoaderData() {
+  const ctx = useCtx();
+  return ctx.loaderData;
+}
+var TsxContext = createContext(DEFAULT_CTX);
+
+// ../../head.tsx
+import { createElement as createElement2 } from "react";
+
+// ../../client-state.ts
+import { useSyncExternalStore as useSyncExternalStore2, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState4 } from "react";
+
+// ../../client-locale.ts
+function buildT() {
+  const messages = globalThis.__LOCALE_DATA__ || (typeof window !== "undefined" ? window.__LOCALE_DATA__ : null);
+  if (!messages) return (key, _p, fb) => fb ?? key;
+  return (key, params, fallback) => {
+    const msg = key.split(".").reduce((o, k) => o?.[k], messages);
+    if (msg === void 0 || msg === null) return fallback ?? key;
+    if (!params) return String(msg);
+    let result = String(msg);
+    for (const [k, v] of Object.entries(params)) result = result.replace(`{${k}}`, v);
+    return result;
+  };
+}
+addInterceptor(async (url) => {
+  const m = url.pathname.match(/^\/__lang\/([\w-]+)$/);
+  if (!m) return false;
+  try {
+    const res = await fetch(url.pathname, {
+      headers: { accept: "application/json" }
+    });
+    const data = await res.json();
+    const ctx = { ...window.__WEIFUWU_CTX || {}, params: {}, query: {} };
+    ctx.prefs = { ...ctx.prefs, locale: data.locale };
+    if (data.messages) window.__LOCALE_DATA__ = data.messages;
+    window.__WEIFUWU_CTX = ctx;
+    setCtx(ctx);
+  } catch {
+    location.href = url.href;
+  }
+  return true;
+});
+function useLocale() {
+  const ctx = useCtx();
+  return {
+    locale: ctx.prefs.locale,
+    setLocale: (locale) => navigate("/__lang/" + locale),
+    t: buildT()
+  };
+}
+
+// ../../client-theme.ts
+import { useEffect as useEffect4 } from "react";
+function resolveTheme(theme) {
+  if (theme === "system") {
+    if (typeof window === "undefined") return "light";
+    return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+  }
+  return theme;
+}
+var _mqListener = null;
+function applyTheme(theme) {
+  if (typeof document === "undefined") return;
+  const resolved = resolveTheme(theme);
+  document.documentElement.dataset.theme = resolved;
+  if (theme === "system") {
+    if (!_mqListener) {
+      const mq = window.matchMedia("(prefers-color-scheme: dark)");
+      mq.addEventListener("change", (e) => {
+        if (window.__WEIFUWU_CTX?.prefs?.theme === "system") {
+          document.documentElement.dataset.theme = e.matches ? "dark" : "light";
+        }
+      });
+      _mqListener = mq;
+    }
+  }
+}
+addInterceptor(async (url) => {
+  const m = url.pathname.match(/^\/__theme\/([\w-]+)$/);
+  if (!m) return false;
+  try {
+    const res = await fetch(url.pathname, {
+      headers: { accept: "application/json" }
+    });
+    const data = await res.json();
+    const ctx = { ...window.__WEIFUWU_CTX || {}, params: {}, query: {} };
+    ctx.prefs = { ...ctx.prefs, theme: data.theme };
+    window.__WEIFUWU_CTX = ctx;
+    applyTheme(data.theme);
+    setCtx(ctx);
+  } catch {
+    location.href = url.href;
+  }
+  return true;
+});
+function useTheme() {
+  const ctx = useCtx();
+  const theme = ctx.prefs.theme ?? "system";
+  useEffect4(() => {
+    applyTheme(theme);
+  }, [theme]);
+  return {
+    theme,
+    resolvedTheme: resolveTheme(theme),
+    setTheme: (t) => navigate("/__theme/" + t)
+  };
+}
+
+// ../../use-flash-message.ts
+import { useState as useState5 } from "react";
+
+// ui/components/Greeting.tsx
+import { jsxs } from "react/jsx-runtime";
+function Greeting({ name }) {
+  return /* @__PURE__ */ jsxs("span", { className: "text-red-500 font-bold", children: [
+    name,
+    "!"
+  ] });
+}
+
+// ui/page.tsx
+import { jsx, jsxs as jsxs2 } from "react/jsx-runtime";
+function Home() {
+  const [input, setInput] = useState6("");
+  const { send, lastMessage, readyState } = useWebsocket("/ws/echo");
+  const { locale, t, setLocale } = useLocale();
+  const { theme, resolvedTheme, setTheme } = useTheme();
+  const ld = useLoaderData();
+  return /* @__PURE__ */ jsxs2("div", { className: "min-h-screen bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100", children: [
+    /* @__PURE__ */ jsx("header", { className: "border-b dark:border-gray-800", children: /* @__PURE__ */ jsxs2("div", { className: "max-w-5xl mx-auto flex items-center justify-between h-14 px-4", children: [
+      /* @__PURE__ */ jsx("span", { className: "font-bold text-lg", children: "weifuwu" }),
+      /* @__PURE__ */ jsxs2("nav", { className: "hidden sm:flex gap-6 text-sm", children: [
+        /* @__PURE__ */ jsx("span", { className: "hover:text-blue-600 transition cursor-pointer", children: t("nav.home") }),
+        /* @__PURE__ */ jsx("span", { className: "hover:text-blue-600 transition cursor-pointer", children: t("nav.docs") }),
+        /* @__PURE__ */ jsx("span", { className: "hover:text-blue-600 transition cursor-pointer", children: t("nav.api") })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2 text-sm", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setLocale(locale === "en" ? "zh-CN" : "en"),
+            className: "px-2 py-1 rounded border dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition",
+            children: locale === "en" ? "\u4E2D\u6587" : "EN"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setTheme(resolvedTheme === "light" ? "dark" : "light"),
+            className: "px-2 py-1 rounded border dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition",
+            children: resolvedTheme === "light" ? "\u{1F319}" : "\u2600\uFE0F"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs2("section", { className: "text-center py-20 px-4", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-5xl font-bold mb-4", children: t("hero.title") }),
+      /* @__PURE__ */ jsx("p", { className: "text-xl text-gray-500 dark:text-gray-400 mb-8", children: t("hero.subtitle") }),
+      /* @__PURE__ */ jsx(Greeting, { name: "Weifuwu" }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex justify-center gap-4 mt-8", children: [
+        /* @__PURE__ */ jsx("a", { href: "#", className: "px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium", children: t("cta.start") }),
+        /* @__PURE__ */ jsx("a", { href: "#", className: "px-6 py-2.5 border dark:border-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition font-medium", children: t("cta.learn") })
+      ] })
+    ] }),
+    ld.features && /* @__PURE__ */ jsx("section", { className: "max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 px-4 pb-20", children: ld.features.map((f, i) => /* @__PURE__ */ jsxs2("div", { className: "p-6 rounded-xl border dark:border-gray-800 bg-gray-50 dark:bg-gray-900", children: [
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold mb-2", children: f.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: f.desc })
+    ] }, i)) }),
+    /* @__PURE__ */ jsx("section", { className: "max-w-xl mx-auto px-4 pb-20", children: /* @__PURE__ */ jsxs2("div", { className: "border dark:border-gray-800 rounded-xl p-6 bg-gray-50 dark:bg-gray-900 space-y-4", children: [
+      /* @__PURE__ */ jsx("h2", { className: "font-semibold", children: t("demo.title") }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-500 dark:text-gray-400", children: readyState === 1 ? t("ws.connected") : readyState === 0 ? t("ws.connecting") : t("ws.disconnected") }),
+      /* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            value: input,
+            onChange: (e) => setInput(e.target.value),
+            onKeyDown: (e) => {
+              if (e.key === "Enter") {
+                send(input);
+                setInput("");
+              }
+            },
+            placeholder: t("demo.placeholder"),
+            className: "flex-1 border dark:border-gray-700 rounded px-3 py-2 text-sm bg-white dark:bg-gray-950 outline-none focus:border-blue-500 transition"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              send(input);
+              setInput("");
+            },
+            className: "px-4 py-2 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 transition font-medium",
+            children: t("demo.send")
+          }
+        )
+      ] }),
+      lastMessage && /* @__PURE__ */ jsxs2("p", { className: "text-sm text-gray-600 dark:text-gray-400", children: [
+        /* @__PURE__ */ jsxs2("span", { className: "font-medium", children: [
+          t("demo.echo"),
+          ":"
+        ] }),
+        " ",
+        lastMessage
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs2("footer", { className: "border-t dark:border-gray-800 py-8 text-center text-sm text-gray-500", children: [
+      "\xA9 2026 MyApp \xB7 ",
+      t("footer.privacy"),
+      " \xB7 ",
+      t("footer.terms")
+    ] })
+  ] });
+}
+export {
+  Home as default
+};

package/cli/template/.weifuwu/ssr/fae6ecbe.js

@@ -0,0 +1,14 @@
+// ui/layout.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function RootLayout({ children }) {
+  return /* @__PURE__ */ jsxs("html", { lang: "en", children: [
+    /* @__PURE__ */ jsxs("head", { children: [
+      /* @__PURE__ */ jsx("meta", { charSet: "utf-8" }),
+      /* @__PURE__ */ jsx("meta", { name: "viewport", content: "width=device-width, initial-scale=1" })
+    ] }),
+    /* @__PURE__ */ jsx("body", { children: /* @__PURE__ */ jsx("main", { children }) })
+  ] });
+}
+export {
+  RootLayout as default
+};

package/cli/template/app.ts

@@ -0,0 +1,23 @@
+import { join } from 'node:path'
+import { Router, ssr, layout, tailwind, preferences } from '../../index.ts'
+
+const _ui = join(import.meta.dirname, 'ui')
+const _loc = join(import.meta.dirname, 'locales')
+
+export const app = new Router()
+app.use(tailwind(_ui))
+app.use(preferences({ dir: _loc, locale: { default: 'en' }, theme: { default: 'system' } }))
+app.use(async (req, ctx, next) => {
+  ctx.loaderData = {
+    features: [
+      { title: 'SSR + HMR', desc: 'State-preserving hot reload' },
+      { title: 'i18n', desc: 'Built-in internationalization' },
+      { title: 'Theme', desc: 'Light/dark mode toggle' },
+    ],
+  }
+  return next(req, ctx)
+})
+app.use(layout(join(_ui, 'layout.tsx')))
+app.get('/', ssr(join(_ui, 'page.tsx')))
+app.get('/api/ping', () => Response.json({ pong: true, time: new Date().toISOString() }))
+app.ws('/ws/echo', { message(ws, _ctx, data) { ws.send(`echo: ${data}`) } })

package/cli/template/index.ts

@@ -0,0 +1,12 @@
+import { join } from 'node:path'
+import { loadEnv, serve, liveReload } from '../../index.ts'
+import { app } from './app.ts'
+
+loadEnv()
+if (process.env.NODE_ENV !== 'production') {
+  app.use(liveReload({ dirs: [join(import.meta.dirname, 'ui')] }))
+}
+const port = Number(process.env.PORT) || 3000
+const server = serve(app.handler(), { port, websocket: app.websocketHandler() })
+await server.ready
+console.log(`Listening on http://localhost:${server.port}`)

package/cli/template/locales/en.json

@@ -0,0 +1,8 @@
+{
+  "nav": { "home": "Home", "docs": "Docs", "api": "API" },
+  "hero": { "title": "Build Faster", "subtitle": "A modern web framework for Node.js" },
+  "cta": { "start": "Get Started", "learn": "Learn More" },
+  "demo": { "title": "WebSocket Demo", "placeholder": "Type a message...", "send": "Send", "echo": "Echo" },
+  "ws": { "connected": "Connected", "connecting": "Connecting...", "disconnected": "Disconnected" },
+  "footer": { "privacy": "Privacy", "terms": "Terms" }
+}

package/cli/template/locales/zh-CN.json

@@ -0,0 +1,8 @@
+{
+  "nav": { "home": "首页", "docs": "文档", "api": "API" },
+  "hero": { "title": "更快地构建", "subtitle": "一个现代的 Node.js Web 框架" },
+  "cta": { "start": "开始使用", "learn": "了解更多" },
+  "demo": { "title": "WebSocket 演示", "placeholder": "输入消息...", "send": "发送", "echo": "回声" },
+  "ws": { "connected": "已连接", "connecting": "连接中...", "disconnected": "未连接" },
+  "footer": { "privacy": "隐私", "terms": "条款" }
+}

package/cli/template/locales/zh-TW.json

@@ -0,0 +1,8 @@
+{
+  "nav": { "home": "首頁", "docs": "文件", "api": "API" },
+  "hero": { "title": "更快構建", "subtitle": "一個現代的 Node.js Web 框架" },
+  "cta": { "start": "開始使用", "learn": "了解更多" },
+  "demo": { "title": "WebSocket 演示", "placeholder": "輸入訊息...", "send": "發送", "echo": "回聲" },
+  "ws": { "connected": "已連線", "connecting": "連線中...", "disconnected": "未連線" },
+  "footer": { "privacy": "隱私", "terms": "條款" }
+}

package/cli/template/locales/zh.json

@@ -0,0 +1,8 @@
+{
+  "nav": { "home": "首页", "docs": "文档", "api": "API" },
+  "hero": { "title": "更快地构建", "subtitle": "一个现代的 Node.js Web 框架" },
+  "cta": { "start": "开始使用", "learn": "了解更多" },
+  "demo": { "title": "WebSocket 演示", "placeholder": "输入消息...", "send": "发送", "echo": "回声" },
+  "ws": { "connected": "已连接", "connecting": "连接中...", "disconnected": "未连接" },
+  "footer": { "privacy": "隐私", "terms": "条款" }
+}

package/cli/template/ui/app.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@variant dark (&:where([data-theme="dark"] *));

package/cli/template/ui/components/Greeting.tsx

@@ -0,0 +1,3 @@
+export default function Greeting({ name }: { name: string }) {
+  return <span className="text-red-500 font-bold">{name}!</span>
+}

package/cli/template/ui/layout.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react'
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </head>
+      <body>
+        <main>{children}</main>
+      </body>
+    </html>
+  )
+}

package/cli/template/ui/page.tsx

@@ -0,0 +1,85 @@
+import { useState } from 'react'
+import { useWebsocket, useLoaderData, useLocale, useTheme } from '../../../react.ts'
+import Greeting from './components/Greeting.tsx'
+
+export default function Home() {
+  const [input, setInput] = useState('')
+  const { send, lastMessage, readyState } = useWebsocket('/ws/echo')
+  const { locale, t, setLocale } = useLocale()
+  const { theme, resolvedTheme, setTheme } = useTheme()
+  const ld = useLoaderData<{ features?: { title: string; desc: string }[] }>()
+
+  return (
+    <div className="min-h-screen bg-white dark:bg-gray-950 text-gray-900 dark:text-gray-100">
+
+      {/* Navbar */}
+      <header className="border-b dark:border-gray-800">
+        <div className="max-w-5xl mx-auto flex items-center justify-between h-14 px-4">
+          <span className="font-bold text-lg">weifuwu</span>
+          <nav className="hidden sm:flex gap-6 text-sm">
+            <span className="hover:text-blue-600 transition cursor-pointer">{t('nav.home')}</span>
+            <span className="hover:text-blue-600 transition cursor-pointer">{t('nav.docs')}</span>
+            <span className="hover:text-blue-600 transition cursor-pointer">{t('nav.api')}</span>
+          </nav>
+          <div className="flex items-center gap-2 text-sm">
+            <button onClick={() => setLocale(locale === 'en' ? 'zh-CN' : 'en')}
+              className="px-2 py-1 rounded border dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition">
+              {locale === 'en' ? '中文' : 'EN'}
+            </button>
+            <button onClick={() => setTheme(resolvedTheme === 'light' ? 'dark' : 'light')}
+              className="px-2 py-1 rounded border dark:border-gray-700 hover:bg-gray-100 dark:hover:bg-gray-800 transition">
+              {resolvedTheme === 'light' ? '🌙' : '☀️'}
+            </button>
+          </div>
+        </div>
+      </header>
+
+      {/* Hero */}
+      <section className="text-center py-20 px-4">
+        <h1 className="text-5xl font-bold mb-4">{t('hero.title')}</h1>
+        <p className="text-xl text-gray-500 dark:text-gray-400 mb-8">{t('hero.subtitle')}</p>
+        <Greeting name="Weifuwu" />
+        <div className="flex justify-center gap-4 mt-8">
+          <a href="#" className="px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition font-medium">{t('cta.start')}</a>
+          <a href="#" className="px-6 py-2.5 border dark:border-gray-700 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition font-medium">{t('cta.learn')}</a>
+        </div>
+      </section>
+
+      {/* Features */}
+      {ld.features && (
+        <section className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6 px-4 pb-20">
+          {ld.features.map((f, i) => (
+            <div key={i} className="p-6 rounded-xl border dark:border-gray-800 bg-gray-50 dark:bg-gray-900">
+              <h3 className="font-semibold mb-2">{f.title}</h3>
+              <p className="text-sm text-gray-500 dark:text-gray-400">{f.desc}</p>
+            </div>
+          ))}
+        </section>
+      )}
+
+      {/* WebSocket demo */}
+      <section className="max-w-xl mx-auto px-4 pb-20">
+        <div className="border dark:border-gray-800 rounded-xl p-6 bg-gray-50 dark:bg-gray-900 space-y-4">
+          <h2 className="font-semibold">{t('demo.title')}</h2>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            {readyState === 1 ? t('ws.connected') : readyState === 0 ? t('ws.connecting') : t('ws.disconnected')}
+          </p>
+          <div className="flex gap-2">
+            <input value={input} onChange={e => setInput(e.target.value)}
+              onKeyDown={e => { if (e.key === 'Enter') { send(input); setInput('') } }}
+              placeholder={t('demo.placeholder')}
+              className="flex-1 border dark:border-gray-700 rounded px-3 py-2 text-sm bg-white dark:bg-gray-950 outline-none focus:border-blue-500 transition" />
+            <button onClick={() => { send(input); setInput('') }}
+              className="px-4 py-2 bg-blue-600 text-white rounded text-sm hover:bg-blue-700 transition font-medium">{t('demo.send')}</button>
+          </div>
+          {lastMessage && <p className="text-sm text-gray-600 dark:text-gray-400"><span className="font-medium">{t('demo.echo')}:</span> {lastMessage}</p>}
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className="border-t dark:border-gray-800 py-8 text-center text-sm text-gray-500">
+        © 2026 MyApp · {t('footer.privacy')} · {t('footer.terms')}
+      </footer>
+    </div>
+  )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weifuwu",
-  "version": "0.19.0",
+  "version": "0.19.1",
   "description": "Web-standard HTTP framework for Node.js — (req, ctx) => Response",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -14,6 +14,7 @@
   "files": [
     "dist/",
     "cli.ts",
+    "cli/template/",
     "opencode/ui/",
     "README.md",
     "LICENSE"