weifuwu 0.18.18 → 0.19.1

package/README.md

@@ -15,8 +15,7 @@ serve((req, ctx) => new Response('Hello, World!'), { port: 3000 })
 ```
 
 ```ts
-import { serve, Router, preferences } from 'weifuwu'
-import { ssr, layout, liveReload } from 'weifuwu/ssr'
+import { serve, Router, preferences, ssr, layout, liveReload } from 'weifuwu'
 const app = new Router()
 app.use(preferences({ dir: './locales' }))
 app.use(layout('./layouts/root.tsx'))
@@ -568,12 +567,12 @@ app.use(requestId({ header: 'X-Request-Id', generator: () => crypto.randomUUID()
 
 ---
 
-## React SSR (weifuwu/ssr)
+## React SSR (weifuwu)
 
-Import from `'weifuwu/ssr'`:
+Import from `'weifuwu'` (no separate ssr entry):
 
 ```ts
-import { ssr, layout, liveReload, errorBoundary, notFound, tailwind } from 'weifuwu/ssr'
+import { ssr, layout, liveReload, errorBoundary, notFound, tailwind } from 'weifuwu'
 ```
 
 ### ssr(path) [β]
@@ -588,7 +587,8 @@ app.get('/about', ssr('./pages/about.tsx'))
 - Reads `ctx.layoutStack` (set by `layout()` middleware) and wraps the component from outer to inner
 - Injects hydration script pointing to the auto-generated client bundle at `/__ssr/[hash].js`
 - Serializes middleware-injected `ctx` data to `window.__WEIFUWU_CTX` for client-side hydration
-- Dev mode: injects live reload WebSocket script
+- **Dev mode:** uses `createRoot` instead of `hydrateRoot` — all hooks (`useState`, `useEffect`) work correctly; SSR content is still streamed for fast first paint
+- **Prod mode:** uses `hydrateRoot` for full SSR hydration
 
 ### layout(path) [β]
 
@@ -610,7 +610,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
 
 ### liveReload(opts) [β]
 
-Returns a `Router` that registers a WebSocket endpoint at `/__weifuwu/livereload` and starts a file watcher on the given directories. When a `.tsx` file changes, it clears the compile cache and broadcasts a reload to all connected browsers.
+Returns a `Router` that registers a WebSocket endpoint at `/__weifuwu/livereload` and starts a file watcher on the given directories. When a `.tsx` file changes, it compiles a hot-update bundle and broadcasts it to all connected browsers.
 
 ```ts
 if (process.env.NODE_ENV !== 'production') {
@@ -618,6 +618,21 @@ if (process.env.NODE_ENV !== 'production') {
 }
 ```
 
+**How HMR works:**
+
+1. File change detected → compiles the entry `page.tsx` (bundles all dependencies) with esbuild
+2. Browser receives WS message → `import()` the hot bundle
+3. Hot bundle calls `window.__WFW_REFRESH(newComponent)` → updates a stable proxy component
+4. Proxy reference unchanged → React reuses fiber tree → `useState` values preserved
+5. Sets `ctx.tick` to trigger re-render without page navigation
+
+**Key properties:**
+
+- **State preservation** — input fields, scroll position, and other `useState`-driven state survive edits
+- **Entry hash isolation** — each `ssr()` route has its own entry hash; WS messages carry the hash so only matching tabs update
+- **Lazy hydration cache** — hydration bundle is only rebuilt on actual page load, not on every file change
+- **Compilation fallback** — if esbuild encounters a syntax error, `location.reload()` is called to show the error
+
 Mount without a path — the internal `/__weifuwu/livereload` route is invisible to the user. The `ssr()` function automatically injects the client-side WS script in dev mode.
 
 | Option | Type | Default | Description |
@@ -652,15 +667,15 @@ Returns a catch-all handler for 404 pages. Typically registered last:
 app.all('/*', notFound('./not-found.tsx'))
 ```
 
-### tailwind(path) [α]
+### tailwind(cssPath) [α]
 
-Compiles Tailwind CSS v4 via `@tailwindcss/postcss` and serves it at `/__wfw/style.css`. In dev mode, watches the CSS file for changes.
+Compiles Tailwind CSS v4 via `@tailwindcss/postcss` and serves it at `/__wfw/style.css`. The file is compiled once and cached; on `app.css` changes in dev mode, the style is pushed to connected browsers via liveReload's WebSocket.
 
 ```ts
-app.use(tailwind('./app.css'))
+app.use(tailwind('./ui'))
 ```
 
-When `tailwind()` middleware is detected, `ssr()` automatically injects `<link rel="stylesheet" href="/__wfw/style.css" />` into the HTML `<head>`.
+The `dir` argument is the directory containing `app.css`. When `tailwind()` middleware is detected, `ssr()` automatically injects `<link rel="stylesheet" href="/__wfw/style.css" />` into the HTML `<head>`.
 
 ### seo [β] + seoMiddleware [α]
 
@@ -893,14 +908,14 @@ function Toast() {
 Auto-detected when `NODE_ENV !== 'production'`. File watching + live reload via `liveReload()`:
 
 ```ts
-import { liveReload } from 'weifuwu/ssr'
+import { liveReload } from 'weifuwu'
 
 if (process.env.NODE_ENV !== 'production') {
   app.use(liveReload({ dirs: ['./pages', './layouts'] }))
 }
 ```
 
-When a `.tsx` file changes, `ssr()` clears its compile cache and the browser auto-refreshes. No process restart needed.
+When a `.tsx` file changes, the browser hot-updates without refreshing — `useState` values are preserved. See `liveReload` section for details.
 
 Tailwind v4 auto-compile via `tailwind()` middleware:
 

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": "条款" }
+}