weifuwu 0.18.18 → 0.19.0

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.ts

@@ -35,6 +35,24 @@ async function cmdInit(name: string) {
   const templateDir = join(pkgRoot, 'cli', 'template')
   await cp(templateDir, targetDir, { recursive: true })
 
+  // Rewrite local imports → package imports for the copied project
+  for (const file of ['app.ts', 'index.ts', 'ui/page.tsx']) {
+    const fp = join(targetDir, file)
+    let content = await readFile(fp, 'utf-8')
+    content = content
+      .replace(/from '\.\.\/\.\.\/index\.ts'/g, "from 'weifuwu'")
+      .replace(/from '\.\.\/\.\.\/\.\.\/react\.ts'/g, "from 'weifuwu/react'")
+      .replace(/import \{ join \} from 'node:path'\n/gm, '')
+      .replace(/const _ui = join\(import\.meta\.dirname, 'ui'\)\n/gm, '')
+      .replace(/const _loc = join\(import\.meta\.dirname, 'locales'\)\n\n/, '')
+      .replace(/preferences\(\{ dir: _loc, locale: \{ default: 'en' \}, theme: \{ default: 'system' \} \}\)/g, "preferences({ dir: './locales' })")
+      .replace(/tailwind\(_ui\)/g, "tailwind('./ui')")
+      .replace(/layout\(join\(_ui, 'layout\.tsx'\)\)/g, "layout('./ui/layout.tsx')")
+      .replace(/ssr\(join\(_ui, 'page\.tsx'\)\)/g, "ssr('./ui/page.tsx')")
+      .replace(/join\(import\.meta\.dirname, 'ui'\)/g, "'./ui'")
+    await writeFile(fp, content)
+  }
+
   // Write config files
   await writeFile(join(targetDir, 'package.json'), JSON.stringify({
     name,

package/dist/cli.js

@@ -28,6 +28,12 @@ async function cmdInit(name) {
   await mkdir(targetDir, { recursive: true });
   const templateDir = join(pkgRoot, "cli", "template");
   await cp(templateDir, targetDir, { recursive: true });
+  for (const file of ["app.ts", "index.ts", "ui/page.tsx"]) {
+    const fp = join(targetDir, file);
+    let content = await readFile(fp, "utf-8");
+    content = content.replace(/from '\.\.\/\.\.\/index\.ts'/g, "from 'weifuwu'").replace(/from '\.\.\/\.\.\/\.\.\/react\.ts'/g, "from 'weifuwu/react'").replace(/import \{ join \} from 'node:path'\n/gm, "").replace(/const _ui = join\(import\.meta\.dirname, 'ui'\)\n/gm, "").replace(/const _loc = join\(import\.meta\.dirname, 'locales'\)\n\n/, "").replace(/preferences\(\{ dir: _loc, locale: \{ default: 'en' \}, theme: \{ default: 'system' \} \}\)/g, "preferences({ dir: './locales' })").replace(/tailwind\(_ui\)/g, "tailwind('./ui')").replace(/layout\(join\(_ui, 'layout\.tsx'\)\)/g, "layout('./ui/layout.tsx')").replace(/ssr\(join\(_ui, 'page\.tsx'\)\)/g, "ssr('./ui/page.tsx')").replace(/join\(import\.meta\.dirname, 'ui'\)/g, "'./ui'");
+    await writeFile(fp, content);
+  }
   await writeFile(join(targetDir, "package.json"), JSON.stringify({
     name,
     type: "module",

package/dist/compile.d.ts

@@ -1,4 +1,12 @@
+export declare function id(s: string): string;
 export declare function clearCompileCache(): void;
 export declare function compileTsx(path: string): Promise<any>;
 /** Dev hot-reload: CJS + in-memory + vm (faster than ESM + disk + import) */
 export declare function compileTsxDev(path: string): Promise<any>;
+/** Build a single vendor bundle containing all needed vendor modules */
+export declare function compileVendorBundle(): Promise<string>;
+/** Hot-reload: ESM bundle, calls __WFW_REFRESH on import */
+export declare function compileHotComponent(path: string): Promise<{
+    hash: string;
+    code: string;
+}>;

package/dist/index.js

@@ -376,13 +376,13 @@ var Router = class _Router {
             const mw = match.middlewares[index++];
             return mw(innerReq, ctx2, dispatch);
           }
-          return await new Promise((resolve13) => {
+          return await new Promise((resolve14) => {
             try {
               upgradeSocket(router.wss, req, socket, head, match.handler, ctx2);
-              resolve13(new Response(null, { status: 101 }));
+              resolve14(new Response(null, { status: 101 }));
             } catch {
               socket.destroy();
-              resolve13(new Response("WebSocket upgrade failed", { status: 500 }));
+              resolve14(new Response("WebSocket upgrade failed", { status: 500 }));
             }
           });
         };
@@ -572,7 +572,7 @@ function sendHttpResponseOnSocket(socket, response) {
 }
 
 // tsx-context.ts
-import { createContext } from "react";
+import { useSyncExternalStore, createContext } from "react";
 var DEFAULT_CTX = { params: {}, query: {}, parsed: {}, prefs: {}, loaderData: {}, env: {}, user: {} };
 var KEY = "__WEIFUWU_CTX_STORE";
 function getStore() {
@@ -2845,7 +2845,7 @@ function createHub(opts) {
       }
     });
   }
-  function join7(key, ws) {
+  function join8(key, ws) {
     if (!channels.has(key)) {
       channels.set(key, /* @__PURE__ */ new Set());
       redisSub?.subscribe(`${prefix}${key}`);
@@ -2886,7 +2886,7 @@ function createHub(opts) {
       await redisSub.quit();
     }
   }
-  return { join: join7, leave, broadcast, close };
+  return { join: join8, leave, broadcast, close };
 }
 
 // queue/index.ts
@@ -4696,14 +4696,14 @@ function forkApp(opts) {
   return { child, port: opts.port };
 }
 function stopProcess(mp, timeout = 1e4) {
-  return new Promise((resolve13) => {
+  return new Promise((resolve14) => {
     const timer = setTimeout(() => {
       mp.child.kill("SIGKILL");
-      resolve13();
+      resolve14();
     }, timeout);
     mp.child.on("exit", () => {
       clearTimeout(timer);
-      resolve13();
+      resolve14();
     });
     mp.child.kill("SIGTERM");
   });
@@ -5150,6 +5150,7 @@ import { createHash as createHash2 } from "node:crypto";
 import vm from "node:vm";
 import { createRequire } from "node:module";
 var _cjsRequire = createRequire(import.meta.url);
+var _userRequire = null;
 var OUT_DIR = ".weifuwu/ssr";
 var cache = /* @__PURE__ */ new Map();
 var externals = [
@@ -5247,6 +5248,62 @@ async function compileTsxDev(path2) {
   cache.set(absPath, mod);
   return mod;
 }
+var vendorBundle = null;
+async function compileVendorBundle() {
+  if (vendorBundle) return vendorBundle;
+  if (!_userRequire) _userRequire = createRequire(join2(process.cwd(), "package.json"));
+  const modules = {
+    "react": [],
+    "react-dom": ["react"],
+    "react-dom/client": ["react"],
+    "react/jsx-runtime": ["react"]
+  };
+  for (const request of Object.keys(modules)) {
+    const mod = _userRequire(request);
+    const keys = Object.keys(mod).filter((k) => !k.startsWith("_") && k !== "default");
+    modules[request] = keys;
+  }
+  const wfwMod = _userRequire("weifuwu/react");
+  const wfwKeys = Object.keys(wfwMod).filter((k) => !k.startsWith("_") && k !== "default");
+  const used = /* @__PURE__ */ new Set();
+  const stmts = [""];
+  for (const [request, keys] of Object.entries(modules)) {
+    const unique = keys.filter((k) => !used.has(k) && used.add(k));
+    if (unique.length > 0) stmts.push(`export { ${unique.join(", ")} } from ${JSON.stringify(request)};`);
+  }
+  const uidWfw = wfwKeys.filter((k) => !used.has(k) && used.add(k));
+  if (uidWfw.length > 0) stmts.push(`export { ${uidWfw.join(", ")} } from 'weifuwu/react';`);
+  const result = await esbuild.build({
+    stdin: { contents: stmts.join("\n"), resolveDir: process.cwd() },
+    format: "esm",
+    bundle: true,
+    write: false
+  });
+  vendorBundle = new TextDecoder().decode(result.outputFiles[0].contents);
+  return vendorBundle;
+}
+async function compileHotComponent(path2) {
+  const absPath = resolve3(path2);
+  const h = id(absPath);
+  const stdin = `import C from ${JSON.stringify(absPath)};
+(window.__WFW_REFRESH||function(){})(C)`;
+  const result = await esbuild.build({
+    stdin: { contents: stdin, loader: "tsx", resolveDir: dirname(absPath) },
+    format: "esm",
+    platform: "browser",
+    jsx: "automatic",
+    jsxImportSource: "react",
+    bundle: true,
+    external: ["react", "react-dom", "react-dom/client", "react/jsx-runtime", "weifuwu/react"],
+    write: false
+  });
+  let code = new TextDecoder().decode(result.outputFiles[0].contents);
+  if (code.includes("__require") && (code.includes('"react"') || code.includes("'react'"))) {
+    code = `import __r from '/__wfw/v/bundle';
+` + code.replace(/__require\(["']react["']\)/g, "__r");
+  }
+  return { hash: h, code };
+}
 
 // stream.ts
 import { TextDecoder as TextDecoder2, TextEncoder as TextEncoder2 } from "node:util";
@@ -5262,8 +5319,20 @@ function getPublicEnv() {
   return _publicEnv;
 }
 function buildHeadPayload(opts) {
-  const { ctx, base, compiledTailwindCss } = opts;
+  const { ctx, base, compiledTailwindCss, isDev: isDev2 } = opts;
   let result = "";
+  if (isDev2) {
+    result += `<script type="importmap">{
+  "imports": {
+    "react": "/__wfw/v/bundle",
+    "react-dom": "/__wfw/v/bundle",
+    "react-dom/client": "/__wfw/v/bundle",
+    "react/jsx-runtime": "/__wfw/v/bundle",
+    "weifuwu/react": "/__wfw/v/bundle"
+  }
+}</script>
+`;
+  }
   if (ctx.prefs?.theme) {
     result += `<script>!function(){var t=(document.cookie.match(/(?:^|;\\s*)theme=([^;]+)/)||[])[1]||'system';if(t==='system'){t=window.matchMedia('(prefers-color-scheme:dark)').matches?'dark':'light'}document.documentElement.setAttribute('data-theme',t)}()</script>
 `;
@@ -5352,7 +5421,7 @@ function streamResponse(reactStream, opts) {
         if (opts.isDev) {
           controller.enqueue(encoder2.encode(
             `
-<script>(function(){var ws=new WebSocket((location.protocol==='https:'?'wss:':'ws:')+'//'+location.host+'/__weifuwu/livereload');ws.onmessage=function(e){if(e.data==='reload')location.reload()};ws.onclose=function(){setTimeout(function(){location.reload()},500)}})()</script>`
+<script>(function(){var ws=new WebSocket((location.protocol==='https:'?'wss:':'ws:')+'//'+location.host+'/__weifuwu/livereload');var t=0;ws.onmessage=function(e){try{var m=JSON.parse(e.data);if(m.type==='component'){if(m.entry&&m.entry!==window.__WFW_ENTRY)return;import('/__wfw/h/'+m.hash+'?'+Date.now()).catch(function(){location.reload()});if(m.css){var s=document.querySelector('style[data-lr]')||function(){var x=document.createElement('style');x.setAttribute('data-lr','');document.head.appendChild(x);return x}();s.textContent=m.css}return}if(m.type==='css'){var s=document.querySelector('style[data-lr]')||function(){var x=document.createElement('style');x.setAttribute('data-lr','');document.head.appendChild(x);return x}();s.textContent=m.css;return}}catch(_){}if(e.data==='reload'&&Date.now()-t>1e3){t=Date.now();location.reload()}};ws.onclose=function(){if(Date.now()-t>1e3){t=Date.now();setTimeout(function(){location.reload()},500)}}})()</script>`
           ));
         }
       } catch {
@@ -5374,17 +5443,30 @@ var als = new AsyncLocalStorage();
 __registerAls(() => als.getStore());
 var isDev = process.env.NODE_ENV !== "production";
 var bundleCache = /* @__PURE__ */ new Map();
+var _bundleDirty = false;
+function markClientBundleDirty() {
+  _bundleDirty = true;
+}
+function getBundle(key) {
+  if (_bundleDirty) {
+    bundleCache.clear();
+    _bundleDirty = false;
+  }
+  return bundleCache.get(key);
+}
+function setBundle(key, buf) {
+  if (_bundleDirty) {
+    bundleCache.clear();
+    _bundleDirty = false;
+  }
+  bundleCache.set(key, buf);
+}
 function id2(s) {
   return createHash3("md5").update(s).digest("hex").slice(0, 8);
 }
 function serializeLoaderData(ctx) {
-  const data = {};
-  for (const key of Object.keys(ctx)) {
-    if (!["params", "query", "mountPath", "layoutStack"].includes(key)) {
-      data[key] = ctx[key];
-    }
-  }
-  return data;
+  const ld = ctx.loaderData;
+  return ld && typeof ld === "object" ? ld : {};
 }
 async function buildClientBundle(entryPath, layoutPaths) {
   try {
@@ -5394,26 +5476,24 @@ async function buildClientBundle(entryPath, layoutPaths) {
     const _sc = `(function(){var k='__WEIFUWU_CTX_STORE';var s=typeof globalThis!='undefined'&&globalThis[k];if(!s)return function(){};return function(v){s._ctx={...s._ctx,...v};s._snapshot={params:s._ctx.params,query:s._ctx.query,user:s._ctx.user,parsed:s._ctx.parsed,prefs:s._ctx.prefs,env:s._ctx.env};s._listeners.forEach(function(fn){fn()})}})()`;
     const code = [
       layoutImports,
-      `import{hydrateRoot}from'react-dom/client';`,
-      `import{createElement,useState,useEffect}from'react';`,
+      `${isDev ? "import{createRoot}from'react-dom/client';" : "import{hydrateRoot}from'react-dom/client';"}`,
+      `import{createElement}from'react';`,
       `import{TsxContext}from'weifuwu/react';`,
       `import P from${JSON.stringify(absEntry)};`,
       `var setCtx=${_sc};`,
       `const c=document.getElementById('__weifuwu_root');`,
       `if(window.__WEIFUWU_PROPS)setCtx({loaderData:window.__WEIFUWU_PROPS});`,
-      `if(!window.__WFW_ROOT){`,
+      // Dev: stable proxy chain — _P → _W (stable) → actual component
+      isDev ? `const _W=function(props){return(_W._fn||P)(props)};_W._fn=P;const _P=function(props){return createElement(_W,props)};` : "",
+      // Dev: HMR handler — updates proxy + re-renders root
+      isDev ? `window.__WFW_ENTRY=${JSON.stringify(id2(absEntry))};window.__WFW_REFRESH=function(n){_W._fn=n;window.__WFW_ROOT.render(createElement(App))};` : "",
       `function App(){`,
-      `const[p,setP]=useState({C:P});`,
-      `useEffect(()=>{window.__WFW_SET_PAGE=(C)=>{setCtx({loaderData:window.__WEIFUWU_PROPS});setP({C})}},[]);`,
       `const ctx=window.__WEIFUWU_CTX||{};`,
       `return createElement(TsxContext.Provider,{value:ctx},`,
-      `createElement(p.C,null))`,
+      isDev ? `createElement(_P,null))` : `createElement(P,null))`,
       `}`,
-      `window.__WFW_ROOT=hydrateRoot(c,createElement(App));`,
-      `}else{`,
-      `window.__WFW_SET_PAGE?.(P);`,
-      `}`
-    ].join("");
+      isDev ? `window.__WFW_ROOT=createRoot(c);window.__WFW_ROOT.render(createElement(App));` : `hydrateRoot(c,createElement(App));`
+    ].filter(Boolean).join("");
     const { default: esbuild2 } = await import("esbuild");
     const result = await esbuild2.build({
       stdin: { contents: code, loader: "tsx", resolveDir: dirname2(absEntry) },
@@ -5423,8 +5503,9 @@ async function buildClientBundle(entryPath, layoutPaths) {
       jsxImportSource: "react",
       banner: { js: "self.process={env:{}};" },
       loader: { ".node": "empty" },
+      external: isDev ? ["react", "react-dom", "react-dom/client", "react/jsx-runtime", "weifuwu/react"] : void 0,
       write: false,
-      minify: true
+      minify: !isDev
     });
     return result.outputFiles[0].contents;
   } catch (err) {
@@ -5437,7 +5518,7 @@ function ssr(path2) {
   const bundleKey = `/__ssr/${entryId}.js`;
   const r = new Router();
   r.get("/__ssr/:path", (req, ctx) => {
-    const buf = bundleCache.get("/__ssr/" + ctx.params.path);
+    const buf = getBundle("/__ssr/" + ctx.params.path);
     return buf ? new Response(buf, {
       headers: { "content-type": "application/javascript; charset=utf-8" }
     }) : new Response("", { status: 404 });
@@ -5462,12 +5543,16 @@ function ssr(path2) {
     };
     return als.run(ctxValue, async () => {
       setCtx(ctxValue);
+      if (ctxValue.parsed?.__localeData) {
+        ;
+        globalThis.__LOCALE_DATA__ = ctxValue.parsed.__localeData;
+      }
       let element = createElement(
-        TsxContext.Provider,
-        { value: ctxValue },
+        "div",
+        { id: "__weifuwu_root" },
         createElement(
-          "div",
-          { id: "__weifuwu_root" },
+          TsxContext.Provider,
+          { value: ctxValue },
           createElement(Component, null)
         )
       );
@@ -5490,11 +5575,11 @@ function ssr(path2) {
         }
       }
       let bundle = null;
-      if (!bundleCache.has(bundleKey)) {
+      if (!getBundle(bundleKey)) {
         const buf = await buildClientBundle(path2, layoutPaths);
-        if (buf) bundleCache.set(bundleKey, buf);
+        if (buf) setBundle(bundleKey, buf);
       }
-      if (bundleCache.has(bundleKey)) {
+      if (getBundle(bundleKey)) {
         bundle = { url: bundleKey };
       }
       const { renderToReadableStream } = await import("react-dom/server");
@@ -5515,78 +5600,30 @@ function ssr(path2) {
 // tailwind.ts
 import { existsSync as existsSync3, mkdirSync as mkdirSync2, readFileSync as readFileSync3, writeFileSync } from "node:fs";
 import { join as join3, relative, resolve as resolve5 } from "node:path";
-
-// live.ts
-import chokidar from "chokidar";
-var clients = /* @__PURE__ */ new Set();
-function broadcastReload() {
-  for (const ws of clients) {
-    try {
-      ws.send("reload");
-    } catch {
-      clients.delete(ws);
-    }
-  }
-}
-function liveReload(opts) {
-  const r = new Router();
-  r.ws("/__weifuwu/livereload", {
-    open(ws) {
-      clients.add(ws);
-      ws.on("close", () => clients.delete(ws));
-      ws.on("error", () => clients.delete(ws));
-    }
-  });
-  const watcher = chokidar.watch(opts.dirs, {
-    ignored: /(^|[/\\])\.|node_modules|[/\\]\.weifuwu[/\\]/,
-    ignoreInitial: true
-  });
-  watcher.on("change", async (filePath) => {
-    if (!/\.tsx?$/.test(filePath)) return;
-    clearCompileCache();
-    try {
-      await compileTsxDev(filePath);
-    } catch (e) {
-      console.error("live reload compile failed:", e);
-    }
-    broadcastReload();
-  });
-  r.close = () => {
-    watcher.close();
-    clients.clear();
-  };
-  return r;
-}
-
-// tailwind.ts
-var isDev2 = process.env.NODE_ENV !== "production";
 var extraSources = /* @__PURE__ */ new Set();
+var cssCache = /* @__PURE__ */ new Map();
 function tailwind(dir) {
   const cssDir = resolve5(dir);
   const cssPath = join3(cssDir, "app.css");
-  let compiledCss = "";
-  let twWatcher = null;
   const r = new Router();
   r.use(async (req, ctx, next) => {
-    if (!compiledCss) compiledCss = await compile(cssPath, cssDir);
-    ctx.compiledTailwindCss = compiledCss;
-    if (isDev2 && !twWatcher) {
-      twWatcher = watchFile(cssPath, () => {
-        compiledCss = "";
-        broadcastReload();
-      });
+    if (!cssCache.has(cssPath)) {
+      cssCache.set(cssPath, await compileTailwindCss(cssPath, cssDir));
     }
+    ctx.compiledTailwindCss = cssCache.get(cssPath);
     return next(req, ctx);
   });
   r.get("/__wfw/style.css", async (req, ctx) => {
-    if (!compiledCss) compiledCss = await compile(cssPath, cssDir);
-    return new Response(compiledCss || "", {
+    if (!cssCache.has(cssPath)) {
+      cssCache.set(cssPath, await compileTailwindCss(cssPath, cssDir));
+    }
+    return new Response(cssCache.get(cssPath) || "", {
       headers: { "content-type": "text/css; charset=utf-8" }
     });
   });
   return r;
 }
-async function compile(cssPath, cssDir) {
+async function compileTailwindCss(cssPath, cssDir) {
   try {
     if (!existsSync3(cssPath)) {
       mkdirSync2(cssDir, { recursive: true });
@@ -5603,20 +5640,13 @@ ${src}`;
 ${src}`;
     }
     const result = await postcss([tailwindPlugin()]).process(src, { from: cssPath });
+    cssCache.set(cssPath, result.css);
     return result.css;
   } catch (err) {
     console.warn("Tailwind CSS processing failed:", err.message);
     return "";
   }
 }
-function watchFile(path2, onChange) {
-  let watcher = null;
-  import("chokidar").then((chokidar2) => {
-    watcher = chokidar2.default.watch(resolve5(path2), { persistent: false });
-    watcher.on("change", onChange);
-  });
-  return watcher;
-}
 
 // layout.ts
 function layout(path2) {
@@ -5865,10 +5895,10 @@ function createBashTool(ctx) {
         return { stdout: "", stderr: "Command denied: potentially dangerous command", exitCode: 1 };
       }
       const cwd = workdir ? `${ctx.workspace}/${workdir}` : ctx.workspace;
-      return new Promise((resolve13) => {
+      return new Promise((resolve14) => {
         const child = exec(command, { cwd, timeout: timeout * 1e3, maxBuffer: 1024 * 1024 }, (error, stdout, stderr) => {
           const truncated = stdout.length > 1e6 || stderr.length > 1e6;
-          resolve13({
+          resolve14({
             stdout: stdout.slice(0, 1e6),
             stderr: stderr.slice(0, 1e6),
             exitCode: error?.code ?? 0,
@@ -6109,7 +6139,7 @@ function createQuestionTool(ctx) {
       options: z12.array(z12.string()).optional().describe("Optional multiple choice options")
     }),
     execute: async ({ question, options }, { toolCallId }) => {
-      return new Promise((resolve13, reject) => {
+      return new Promise((resolve14, reject) => {
         const timeout = setTimeout(() => {
           ctx.pendingQuestions.delete(toolCallId);
           reject(new Error("Question timed out"));
@@ -6117,7 +6147,7 @@ function createQuestionTool(ctx) {
         ctx.pendingQuestions.set(toolCallId, {
           resolve: (answer) => {
             clearTimeout(timeout);
-            resolve13(answer);
+            resolve14(answer);
           },
           reject: (err) => {
             clearTimeout(timeout);
@@ -6274,17 +6304,17 @@ async function buildRouter4(deps) {
 }
 
 // opencode/ws.ts
-var clients2 = /* @__PURE__ */ new WeakMap();
+var clients = /* @__PURE__ */ new WeakMap();
 function createWSHandler2(deps) {
   const { sql: sql2, model, workspace, systemPrompt, skills, skillsRegistry, permissions, pendingQuestions } = deps;
   return {
     open(ws, ctx) {
       const userId = ctx.user?.id ?? 0;
       const mountPath = ctx.mountPath ?? "";
-      clients2.set(ws, { userId, mountPath });
+      clients.set(ws, { userId, mountPath });
     },
     async message(ws, ctx, data) {
-      const client = clients2.get(ws);
+      const client = clients.get(ws);
       if (!client) return;
       let msg;
       try {
@@ -6381,17 +6411,17 @@ function createWSHandler2(deps) {
       }
     },
     close(ws) {
-      const client = clients2.get(ws);
+      const client = clients.get(ws);
       if (client) {
         client.abortController?.abort();
-        clients2.delete(ws);
+        clients.delete(ws);
       }
     },
     error(ws, _ctx, _err) {
-      const client = clients2.get(ws);
+      const client = clients.get(ws);
       if (client) {
         client.abortController?.abort();
-        clients2.delete(ws);
+        clients.delete(ws);
       }
     }
   };
@@ -6837,23 +6867,33 @@ function preferences(options) {
     const cached = cache2.get(locale);
     if (cached) return cached;
     const filePath = join6(dir, `${locale}.json`);
-    if (!existsSync5(filePath)) return {};
-    try {
-      const content = await readFile2(filePath, "utf-8");
-      const data = JSON.parse(content);
-      cache2.set(locale, data);
-      return data;
-    } catch {
-      return {};
+    if (existsSync5(filePath)) {
+      try {
+        const content = await readFile2(filePath, "utf-8");
+        const data = JSON.parse(content);
+        cache2.set(locale, data);
+        return data;
+      } catch {
+        return {};
+      }
+    }
+    const short = locale.split("-")[0];
+    if (short !== locale) {
+      const fallback = cache2.get(short) || await load(short);
+      if (fallback && Object.keys(fallback).length > 0) {
+        cache2.set(locale, fallback);
+        return fallback;
+      }
     }
+    return {};
   }
   return async (req, ctx, next) => {
     const url = new URL(req.url);
-    const langMatch = url.pathname.match(/^\/__lang\/(\w+)$/);
+    const langMatch = url.pathname.match(/^\/__lang\/([\w-]+)$/);
     if (langMatch && req.method === "GET") {
       return handlePrefSwitch(req, langMatch[1], localeOpts.cookie, load);
     }
-    const themeMatch = url.pathname.match(/^\/__theme\/(\w+)$/);
+    const themeMatch = url.pathname.match(/^\/__theme\/([\w-]+)$/);
     if (themeMatch && req.method === "GET") {
       return handlePrefSwitch(req, themeMatch[1], themeOpts.cookie, load);
     }
@@ -6900,7 +6940,7 @@ function detectLocale(req, opts) {
     if (fromCookie) return fromCookie;
   }
   if (opts.fromAcceptLanguage) {
-    const fromHeader = req.headers.get("Accept-Language")?.split(",")[0]?.split("-")[0];
+    const fromHeader = req.headers.get("Accept-Language")?.split(",")[0]?.trim();
     if (fromHeader) return fromHeader;
   }
   return opts.default;
@@ -7863,12 +7903,12 @@ function iii(opts = {}) {
     const handler = async (payload) => {
       if (!worker.ws) throw new Error(`Worker "${worker.name}" disconnected`);
       const invocationId = crypto6.randomUUID();
-      return new Promise((resolve13, reject) => {
+      return new Promise((resolve14, reject) => {
         const timer = setTimeout(() => {
           pending.delete(invocationId);
           reject(new Error(`Invocation timed out for "${id3}"`));
         }, 3e4);
-        pending.set(invocationId, { resolve: resolve13, reject, timer });
+        pending.set(invocationId, { resolve: resolve14, reject, timer });
         worker.ws.send(JSON.stringify({
           type: "invoke",
           invocation_id: invocationId,
@@ -8109,8 +8149,8 @@ function registerWorker(url) {
   function connect() {
     if (intentionalClose) return;
     ws = new WebSocket(url);
-    ready = new Promise((resolve13) => {
-      resolveReady = resolve13;
+    ready = new Promise((resolve14) => {
+      resolveReady = resolve14;
     });
     ws.onopen = () => {
       reconnectAttempt = 0;
@@ -8230,13 +8270,13 @@ function registerWorker(url) {
         }
         return Promise.resolve(fn(request.payload, ctx));
       }
-      return new Promise((resolve13, reject) => {
+      return new Promise((resolve14, reject) => {
         const invocationId = genId();
         const timer = setTimeout(() => {
           pendingInvocations.delete(invocationId);
           reject(new Error(`Invocation timed out for "${request.function_id}"`));
         }, request.timeout_ms || 3e4);
-        pendingInvocations.set(invocationId, { resolve: resolve13, reject, timer });
+        pendingInvocations.set(invocationId, { resolve: resolve14, reject, timer });
         send({
           type: "invoke",
           invocation_id: invocationId,
@@ -8257,6 +8297,125 @@ function registerWorker(url) {
   };
 }
 
+// live.ts
+import chokidar from "chokidar";
+import { existsSync as existsSync6 } from "node:fs";
+import { join as join7, resolve as resolve13 } from "node:path";
+var clients2 = /* @__PURE__ */ new Set();
+var hotBundleCache = /* @__PURE__ */ new Map();
+var hotKeys = [];
+var MAX_HOT = 10;
+function setHot(hash, code) {
+  if (!hotBundleCache.has(hash)) {
+    hotKeys.push(hash);
+    if (hotKeys.length > MAX_HOT) {
+      const old = hotKeys.shift();
+      hotBundleCache.delete(old);
+    }
+  }
+  hotBundleCache.set(hash, code);
+}
+function broadcastReload() {
+  for (const ws of clients2) {
+    try {
+      ws.send("reload");
+    } catch {
+      clients2.delete(ws);
+    }
+  }
+}
+function broadcastCss(css) {
+  const msg = JSON.stringify({ type: "css", css });
+  for (const ws of clients2) {
+    try {
+      ws.send(msg);
+    } catch {
+      clients2.delete(ws);
+    }
+  }
+}
+function liveReload(opts) {
+  const r = new Router();
+  const entryPath = (() => {
+    for (const dir of opts.dirs) {
+      const p = join7(resolve13(dir), "page.tsx");
+      if (existsSync6(p)) return p;
+    }
+    return "";
+  })();
+  r.get("/__wfw/v/bundle", async (req, ctx) => {
+    const code = await compileVendorBundle();
+    return new Response(code, {
+      headers: { "content-type": "application/javascript; charset=utf-8" }
+    });
+  });
+  r.get("/__wfw/h/:hash", async (req, ctx) => {
+    const hash = ctx.params.hash.replace(/\.js$/i, "");
+    const code = hotBundleCache.get(hash);
+    if (!code) return new Response("", { status: 404 });
+    return new Response(code, {
+      headers: { "content-type": "application/javascript; charset=utf-8" }
+    });
+  });
+  r.ws("/__weifuwu/livereload", {
+    open(ws) {
+      clients2.add(ws);
+      ws.on("close", () => clients2.delete(ws));
+      ws.on("error", () => clients2.delete(ws));
+    }
+  });
+  const watcher = chokidar.watch(opts.dirs, {
+    ignored: /(^|[/\\])\.|node_modules|[/\\]\.weifuwu[/\\]/,
+    ignoreInitial: true
+  });
+  watcher.on("change", async (filePath) => {
+    if (/\.tsx?$/i.test(filePath)) {
+      clearCompileCache();
+      markClientBundleDirty();
+      try {
+        const target = entryPath || filePath;
+        await compileTsxDev(target);
+        const { hash, code } = await compileHotComponent(target);
+        setHot(hash, code);
+        let css;
+        for (const dir of opts.dirs) {
+          const cssPath = join7(resolve13(dir), "app.css");
+          if (existsSync6(cssPath)) {
+            css = await compileTailwindCss(cssPath, resolve13(dir));
+          }
+        }
+        const entry = entryPath ? id(entryPath) : "";
+        const msg = { type: "component", hash, entry };
+        if (css) msg.css = css;
+        const str = JSON.stringify(msg);
+        for (const ws of clients2) {
+          try {
+            ws.send(str);
+          } catch {
+            clients2.delete(ws);
+          }
+        }
+      } catch (e) {
+        console.error("live reload failed, fallback to full reload:", e);
+        broadcastReload();
+      }
+    } else if (/\.css$/i.test(filePath)) {
+      for (const dir of opts.dirs) {
+        const cssPath = join7(resolve13(dir), "app.css");
+        if (existsSync6(cssPath)) {
+          const css = await compileTailwindCss(cssPath, resolve13(dir));
+          if (css) broadcastCss(css);
+        }
+      }
+    }
+  });
+  r.close = () => {
+    watcher.close();
+    clients2.clear();
+  };
+  return r;
+}
+
 // not-found.ts
 function notFound(path2) {
   return async (req, ctx) => {

package/dist/react.js

@@ -331,7 +331,7 @@ async function prefetchPage(href) {
 }
 
 // tsx-context.ts
-import { createContext } from "react";
+import { useSyncExternalStore, createContext } from "react";
 var DEFAULT_CTX = { params: {}, query: {}, parsed: {}, prefs: {}, loaderData: {}, env: {}, user: {} };
 var KEY = "__WEIFUWU_CTX_STORE";
 function getStore() {
@@ -350,22 +350,29 @@ function getStore() {
   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?.();
-  const base = alsStore ?? store._ctx;
-  const data = typeof window !== "undefined" ? window.__WEIFUWU_CTX : null;
-  return { ...base, ...data };
+  return alsStore ?? store._ctx;
 }
 function useLoaderData() {
-  const alsStore = store._alsGetStore?.();
-  const base = alsStore ?? store._ctx;
-  const data = typeof window !== "undefined" ? window.__WEIFUWU_CTX : null;
-  return { ...base, ...data }.loaderData;
+  const ctx = useCtx();
+  return ctx.loaderData;
 }
 var TsxContext = createContext(DEFAULT_CTX);
 
@@ -386,19 +393,19 @@ function createStore(initial) {
     state = { ...state, ...next };
     listeners.forEach((fn) => fn());
   };
-  const subscribe = (listener) => {
+  const subscribe2 = (listener) => {
     listeners.add(listener);
     return () => {
       listeners.delete(listener);
     };
   };
   const useStore = ((selector) => useSyncExternalStore2(
-    subscribe,
+    subscribe2,
     () => selector ? selector(state) : state
   ));
   useStore.getState = getState;
   useStore.setState = setState;
-  useStore.subscribe = subscribe;
+  useStore.subscribe = subscribe2;
   return useStore;
 }
 var dataCache = /* @__PURE__ */ new Map();
@@ -478,7 +485,7 @@ function notifyQueryListeners() {
   window.dispatchEvent(new PopStateEvent("popstate"));
 }
 function useQueryState(key, defaultValue = "") {
-  function getSnapshot() {
+  function getSnapshot2() {
     if (typeof window === "undefined") return defaultValue;
     const params = new URLSearchParams(window.location.search);
     return params.get(key) ?? defaultValue;
@@ -490,12 +497,12 @@ function useQueryState(key, defaultValue = "") {
       window.addEventListener("popstate", cb);
       return () => window.removeEventListener("popstate", cb);
     },
-    getSnapshot,
+    getSnapshot2,
     () => defaultValue
   );
   const setValue = useCallback4((val) => {
     if (typeof window === "undefined") return;
-    const resolved = typeof val === "function" ? val(getSnapshot()) : val;
+    const resolved = typeof val === "function" ? val(getSnapshot2()) : val;
     const url = new URL(window.location.href);
     if (resolved === defaultValue || resolved === "") {
       url.searchParams.delete(key);
@@ -510,7 +517,7 @@ function useQueryState(key, defaultValue = "") {
 
 // client-locale.ts
 function buildT() {
-  const messages = typeof window !== "undefined" ? window.__LOCALE_DATA__ : globalThis.__LOCALE_DATA__;
+  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);
@@ -522,7 +529,7 @@ function buildT() {
   };
 }
 addInterceptor(async (url) => {
-  const m = url.pathname.match(/^\/__lang\/(\w+)$/);
+  const m = url.pathname.match(/^\/__lang\/([\w-]+)$/);
   if (!m) return false;
   try {
     const res = await fetch(url.pathname, {
@@ -575,7 +582,7 @@ function applyTheme(theme) {
   }
 }
 addInterceptor(async (url) => {
-  const m = url.pathname.match(/^\/__theme\/(\w+)$/);
+  const m = url.pathname.match(/^\/__theme\/([\w-]+)$/);
   if (!m) return false;
   try {
     const res = await fetch(url.pathname, {

package/dist/ssr.d.ts

@@ -1,2 +1,3 @@
 import { Router } from './router.ts';
+export declare function markClientBundleDirty(): void;
 export declare function ssr(path: string): Router;

package/dist/tailwind.d.ts

@@ -1,3 +1,4 @@
 import { Router } from './router.ts';
 export declare function addTailwindSource(dir: string): void;
 export declare function tailwind(dir: string): Router;
+export declare function compileTailwindCss(cssPath: string, cssDir: string): Promise<string>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "weifuwu",
-  "version": "0.18.18",
+  "version": "0.19.0",
   "description": "Web-standard HTTP framework for Node.js — (req, ctx) => Response",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",