weifuwu 0.17.7 → 0.17.8

package/README.md

@@ -58,7 +58,7 @@ app.use('/', await tsx({ dir: './ui' }))
 serve(app.handler(), { port: 3000 })
 ```
 
-Your tsx pages can use it directly:
+Your tsx pages can use it directly, and locale/theme switching routes (`/__lang/zh`, `/__theme/dark`) work automatically without extra routes:
 
 ```tsx
 import { Head, useCtx, useData, createStore } from 'weifuwu/react'
@@ -556,6 +556,8 @@ function Nav() {
 
 `navigate(href)` fetches the target via SSR, extracts `__weifuwu_root` content and `__WEIFUWU_PROPS`, replaces in-place, then imports the new hydration bundle. `load.ts` runs on the server for every navigation. Initial load is full SSR; subsequent navigations are client-side.
 
+Language and theme switching URLs (`/__lang/:locale`, `/__theme/:theme`) are handled by `navigate()` without page reload — the preference cookie is set via a JSON request and the context is updated via `setCtx()` (see [Preferences](#preferences)).
+
 - `<Link prefetch>` — pre-fetches page data on hover / when entering viewport (200px margin)
 - `useNavigating()` — reactive boolean, `true` while navigation is in-flight
 - `isNavigating()` / `onNavigate(fn)` — non-hook alternatives
@@ -1242,6 +1244,56 @@ Flash messages: set via `ctx.setPref('flash', ...)` → auto-read from cookie
 `ctx.t()` supports dot-path nested keys: `t('tools.uppercase.title')` traverses the JSON structure.
 `ctx.env` exposes `WEIFUWU_PUBLIC_*` environment variables on both server and client (via `useCtx().env`).
 
+### Language / Theme switching
+
+The middleware automatically handles `/__lang/:locale` and `/__theme/:theme` without needing extra routes:
+
+```ts
+app.use(preferences({ dir: './locales' }))
+//  ✓  /__lang/zh, /__lang/en, /__theme/dark, /__theme/light  automatically work
+```
+
+**Server behavior:**
+
+| Mode | Request | Response |
+|------|---------|----------|
+| Redirect | `GET /__lang/zh` (browser) | 302 with `Set-Cookie: locale=zh` back to referer |
+| JSON | `GET /__lang/zh` + `Accept: application/json` | `{ ok: true, locale: 'zh', messages: { ... } }` + `Set-Cookie` |
+
+**Client-side no-refresh switching:**
+
+```tsx
+import { Link } from 'weifuwu/react'
+
+<Link href="/__lang/zh">中文</Link>    // Instant switch — no page reload
+<Link href="/__lang/en">English</Link> // Instant switch — no page reload
+<Link href="/__theme/dark">🌙</Link>   // Instant switch — no page reload
+```
+
+When using `<Link>` (or `navigate()`), the router intercepts `__lang`/`__theme` URLs:
+1. Fetches the endpoint with `Accept: application/json`
+2. Updates `window.__WEIFUWU_CTX` (locale, theme, messages)
+3. Calls `setCtx()` — React re-renders via `useSyncExternalStore`
+4. Page content stays intact, only translations/theme update
+
+Plain `<a href="/__lang/zh">` still works via traditional 302 redirect for full backward compatibility.
+
+### Options
+
+```ts
+app.use(preferences({
+  dir: './locales',           // translation JSON directory
+  locale: {
+    default: 'en',            // fallback when no cookie or Accept-Language
+    cookie: 'locale',         // cookie name (default: 'locale')
+    fromAcceptLanguage: true, // detect from Accept-Language header
+  },
+  theme: {
+    default: 'system',        // 'light' | 'dark' | 'system'
+    cookie: 'theme',          // cookie name (default: 'theme')
+  },
+}))
+
 ---
 
 ## Email
@@ -1290,6 +1342,7 @@ app.get('/stream', (req, ctx) => createSSEStream(events()))
 | Hook / Component | Description |
 |-----------------|-------------|
 | `useCtx()` | Unified context — `{ prefs, locale, theme, t, params, query, env }` (requires `preferences` middleware) |
+| `setCtx(value)` | Update context — triggers re-render in all `useCtx()` consumers |
 | `createStore(initial)` | Zustand-compatible shared state — `getState`, `setState`, `subscribe` |
 | `useData(url, opts?)` | SWR-style data fetching — cache, dedup, mutate, fallback |
 | `useQueryState(key, default)` | URL query param sync — `?page=1` via `useSyncExternalStore` |

package/dist/analytics.d.ts

@@ -1,11 +1,16 @@
-import type { Handler, Middleware } from './types.ts';
+import type { Middleware } from './types.ts';
+import { Router } from './router.ts';
 export interface AnalyticsOptions {
     excluded?: string[];
     pg?: {
         sql: (strings: TemplateStringsArray, ...values: any[]) => Promise<any[]>;
+        table: (name: string, cols: any) => any;
     };
 }
-export declare function analytics(options?: AnalyticsOptions): {
-    middleware: Middleware;
-    handler: Handler;
-};
+export interface AnalyticsModule {
+    middleware: () => Middleware;
+    router: () => Router;
+    migrate: () => Promise<void>;
+    close: () => Promise<void>;
+}
+export declare function analytics(options?: AnalyticsOptions): AnalyticsModule;

package/dist/client-router.d.ts

@@ -9,6 +9,7 @@ interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>,
     prefetch?: boolean;
 }
 export declare function Link({ href, children, onClick, prefetch, ...props }: LinkProps): import("react").DetailedReactHTMLElement<{
+    id?: string | undefined | undefined;
     slot?: string | undefined | undefined;
     style?: import("react").CSSProperties | undefined;
     title?: string | undefined | undefined;
@@ -34,7 +35,6 @@ export declare function Link({ href, children, onClick, prefetch, ...props }: Li
     draggable?: (boolean | "true" | "false") | undefined;
     enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
     hidden?: boolean | undefined | undefined;
-    id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
     nonce?: string | undefined | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;

package/dist/index.d.ts

@@ -55,7 +55,7 @@ export type { OpencodeOptions, OpencodeModule, SkillDef, OpencodePermissions, Se
 export { health } from './health.ts';
 export type { HealthOptions } from './health.ts';
 export { analytics } from './analytics.ts';
-export type { AnalyticsOptions } from './analytics.ts';
+export type { AnalyticsOptions, AnalyticsModule } from './analytics.ts';
 export { preferences } from './preferences.ts';
 export type { PrefOptions } from './preferences.ts';
 export { seo, seoMiddleware, seoTags } from './seo.ts';

package/dist/index.js

@@ -6812,11 +6812,8 @@ var MemStore = class {
     }
     day.pv++;
     day.uv.add(path2);
-    if (mobile) {
-      day.mobile++;
-    } else {
-      day.desktop++;
-    }
+    if (mobile) day.mobile++;
+    else day.desktop++;
     let page = this.pages.get(path2);
     if (!page) {
       page = { count: 0 };
@@ -6837,11 +6834,8 @@ var MemStore = class {
     since.setDate(since.getDate() - days);
     const sinceStr = since.toISOString().slice(0, 10);
     const daily = [];
-    let totalPv = 0;
-    let totalMobile = 0;
-    let totalDesktop = 0;
-    const pageMap = /* @__PURE__ */ new Map();
-    const allUv = /* @__PURE__ */ new Set();
+    let totalPv = 0, totalMobile = 0, totalDesktop = 0;
+    const allUv = /* @__PURE__ */ new Set(), pageMap = /* @__PURE__ */ new Map();
     for (const [date, day] of this.days) {
       if (date < sinceStr) continue;
       daily.push({ date, pv: day.pv, uv: day.uv.size });
@@ -6850,64 +6844,80 @@ var MemStore = class {
       totalDesktop += day.desktop;
       for (const p of day.uv) allUv.add(p);
     }
-    for (const [path2, page] of this.pages) {
-      pageMap.set(path2, page.count);
-    }
+    for (const [path2, page] of this.pages) pageMap.set(path2, page.count);
     const topPages = [...pageMap.entries()].sort((a, b) => b[1] - a[1]).slice(0, 20).map(([path2, count]) => ({ path: path2, pv: count }));
     const refMap = /* @__PURE__ */ new Map();
     for (const [date, refs] of this.refs) {
       if (date < sinceStr) continue;
       for (const [domain, count] of refs) refMap.set(domain, (refMap.get(domain) || 0) + count);
     }
-    const referrers = [...refMap.entries()].sort((a, b) => b[1] - a[1]).slice(0, 10).map(([domain, count]) => ({ domain, count }));
     const total = totalMobile + totalDesktop || 1;
     return {
       total_pv: totalPv,
       total_uv: allUv.size,
       daily,
       top_pages: topPages,
-      referrers,
+      referrers: [...refMap.entries()].sort((a, b) => b[1] - a[1]).slice(0, 10).map(([domain, count]) => ({ domain, count })),
       devices: { mobile: Math.round(totalMobile / total * 1e3) / 10, desktop: Math.round(totalDesktop / total * 1e3) / 10 }
     };
   }
 };
+async function migratePg(sql2, table) {
+  const analytics2 = table("__analytics", {
+    date: text("date").notNull(),
+    path: text("path").notNull(),
+    count: integer("count").default(0),
+    mobile: integer("mobile").default(0),
+    desktop: integer("desktop").default(0)
+  });
+  await analytics2.create();
+  await analytics2.createIndex(["date", "path"], { unique: true });
+  return analytics2;
+}
+async function recordPg(sql2, path2, date, mobile) {
+  await sql2`
+    INSERT INTO __analytics (date, path, count, mobile, desktop)
+    VALUES (${date}, ${path2}, 1, ${mobile ? 1 : 0}, ${mobile ? 0 : 1})
+    ON CONFLICT (date, path) DO UPDATE SET
+      count = __analytics.count + 1,
+      mobile = __analytics.mobile + ${mobile ? 1 : 0},
+      desktop = __analytics.desktop + ${mobile ? 0 : 1}
+  `;
+}
 async function queryPg(sql2, days) {
   const since = /* @__PURE__ */ new Date();
   since.setDate(since.getDate() - days);
+  const sinceStr = since.toISOString().slice(0, 10);
   const daily = await sql2`
-    SELECT date, SUM(count) as pv, COUNT(DISTINCT path) as uv
-    FROM __analytics WHERE date >= ${since.toISOString().slice(0, 10)}
-    GROUP BY date ORDER BY date
+    SELECT date, SUM(count)::int as pv, COUNT(DISTINCT path)::int as uv
+    FROM __analytics WHERE date >= ${sinceStr} GROUP BY date ORDER BY date
   `;
   const pageRows = await sql2`
-    SELECT path, SUM(count) as pv
-    FROM __analytics WHERE date >= ${since.toISOString().slice(0, 10)}
+    SELECT path, SUM(count)::int as pv
+    FROM __analytics WHERE date >= ${sinceStr}
     GROUP BY path ORDER BY pv DESC LIMIT 20
   `;
   const totalRes = await sql2`
-    SELECT COALESCE(SUM(count), 0) as total_pv,
-           COALESCE(SUM(mobile), 0) as total_mobile,
-           COALESCE(SUM(desktop), 0) as total_desktop
-    FROM __analytics WHERE date >= ${since.toISOString().slice(0, 10)}
+    SELECT COALESCE(SUM(count), 0)::int as total_pv,
+           COALESCE(SUM(mobile), 0)::int as total_mobile,
+           COALESCE(SUM(desktop), 0)::int as total_desktop
+    FROM __analytics WHERE date >= ${sinceStr}
   `;
-  const total = totalRes[0];
-  const totalMobileDesktop = total.total_mobile + total.total_desktop || 1;
+  const t = totalRes[0];
+  const denom = t.total_mobile + t.total_desktop || 1;
   return {
-    total_pv: total.total_pv,
+    total_pv: t.total_pv,
     total_uv: pageRows.length,
-    daily: daily.map((d) => ({ date: d.date, pv: Number(d.pv), uv: Number(d.uv) })),
-    top_pages: pageRows.map((p) => ({ path: p.path, pv: Number(p.pv) })),
+    daily: daily.map((d) => ({ date: d.date, pv: d.pv, uv: d.uv })),
+    top_pages: pageRows.map((p) => ({ path: p.path, pv: p.pv })),
     referrers: [],
-    devices: {
-      mobile: Math.round(total.total_mobile / totalMobileDesktop * 1e3) / 10,
-      desktop: Math.round(total.total_desktop / totalMobileDesktop * 1e3) / 10
-    }
+    devices: { mobile: Math.round(t.total_mobile / denom * 1e3) / 10, desktop: Math.round(t.total_desktop / denom * 1e3) / 10 }
   };
 }
 function renderDashboard(days, data) {
-  const { total_pv, total_uv, daily, top_pages, referrers } = data;
-  const maxPv = Math.max(...daily.map((d) => d.pv), 1);
-  const bars = daily.map(
+  const { total_pv, total_uv, top_pages, referrers } = data;
+  const maxPv = Math.max(...data.daily.map((d) => d.pv), 1);
+  const bars = data.daily.map(
     (d) => `<div class="bar-wrap"><div class="bar" style="height:${d.pv / maxPv * 100}%"></div><span class="bar-label">${d.date.slice(5)}</span></div>`
   ).join("");
   const rows = top_pages.map(
@@ -6916,11 +6926,9 @@ function renderDashboard(days, data) {
   const refRows = referrers.map(
     (r) => `<tr><td>${r.domain}</td><td class="num">${r.count}</td></tr>`
   ).join("");
-  return `<!DOCTYPE html>
-<html lang="en">
+  return `<!DOCTYPE html><html lang="en">
 <head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/><title>Analytics - weifuwu</title>
-<style>
-*,:before,:after{box-sizing:border-box;margin:0;padding:0}
+<style>*,:before,:after{box-sizing:border-box;margin:0;padding:0}
 body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#f8f9fa;color:#333;padding:24px;max-width:960px;margin:0 auto}
 h1{font-size:24px;font-weight:700;margin-bottom:24px}
 .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-bottom:24px}
@@ -6958,28 +6966,23 @@ function analytics(options) {
   const excluded = options?.excluded ?? DEFAULT_EXCLUDED;
   const pg = options?.pg;
   const store = pg ? null : new MemStore();
-  const middleware = async (req, ctx, next) => {
-    const url = new URL(req.url);
-    const path2 = url.pathname;
-    if (excluded.some((e) => path2.startsWith(e))) return next(req, ctx);
-    const date = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
-    const ref = req.headers.get("referer") || "";
-    const ua = req.headers.get("user-agent") || "";
-    const mobile = /mobile|android|iphone|ipad/i.test(ua);
-    if (pg) {
-      await pg.sql`
-        INSERT INTO __analytics (date, path, count, mobile, desktop)
-        VALUES (${date}, ${path2}, 1, ${mobile ? 1 : 0}, ${mobile ? 0 : 1})
-        ON CONFLICT (date, path) DO UPDATE SET
-          count = __analytics.count + 1,
-          mobile = __analytics.mobile + ${mobile ? 1 : 0},
-          desktop = __analytics.desktop + ${mobile ? 0 : 1}
-      `;
-    } else {
-      const refDomain = ref ? new URL(ref).hostname.replace(/^www\./, "") : "";
-      store.record(path2, date, refDomain, mobile);
-    }
-    return next(req, ctx);
+  const middleware = () => {
+    const m = async (req, ctx, next) => {
+      const path2 = new URL(req.url).pathname;
+      if (excluded.some((e) => path2.startsWith(e))) return next(req, ctx);
+      const date = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+      const ua = req.headers.get("user-agent") || "";
+      const mobile = /mobile|android|iphone|ipad/i.test(ua);
+      if (pg) {
+        await recordPg(pg.sql, path2, date, mobile);
+      } else {
+        const ref = req.headers.get("referer") || "";
+        const refDomain = ref ? new URL(ref).hostname.replace(/^www\./, "") : "";
+        store.record(path2, date, refDomain, mobile);
+      }
+      return next(req, ctx);
+    };
+    return m;
   };
   const handler = async (req) => {
     const url = new URL(req.url);
@@ -6990,7 +6993,18 @@ function analytics(options) {
       headers: { "content-type": "text/html; charset=utf-8" }
     });
   };
-  return { middleware, handler };
+  const router = () => {
+    const r = new Router();
+    r.get("/__analytics/data", handler);
+    r.get("/analytics", handler);
+    return r;
+  };
+  const migrate = async () => {
+    if (pg) await migratePg(pg.sql, pg.table);
+  };
+  const close = async () => {
+  };
+  return { middleware, router, migrate, close };
 }
 
 // preferences.ts
@@ -7020,6 +7034,30 @@ function extractCookie(req, name) {
   }
   return null;
 }
+function prefCookie(name, value) {
+  return `${name}=${encodeURIComponent(value)}; Path=/; SameSite=Lax`;
+}
+async function handlePrefSwitch(req, value, cookieName, load) {
+  const isJson = req.headers.get("accept")?.includes("application/json");
+  if (isJson) {
+    const result = { ok: true };
+    if (cookieName === "locale" || cookieName === "lang") {
+      result.locale = value;
+      const messages2 = await load(value);
+      if (Object.keys(messages2).length > 0) result.messages = messages2;
+    } else {
+      result.theme = value;
+    }
+    return Response.json(result, {
+      headers: { "Set-Cookie": prefCookie(cookieName, value) }
+    });
+  }
+  const referer = req.headers.get("referer") || "/";
+  return new Response(null, {
+    status: 302,
+    headers: { Location: referer, "Set-Cookie": prefCookie(cookieName, value) }
+  });
+}
 function preferences(options) {
   const dir = options.dir ? resolve10(options.dir) : void 0;
   const localeOpts = { ...defaults.locale, ...options.locale };
@@ -7041,6 +7079,15 @@ function preferences(options) {
     }
   }
   return async (req, ctx, next) => {
+    const url = new URL(req.url);
+    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+)$/);
+    if (themeMatch && req.method === "GET") {
+      return handlePrefSwitch(req, themeMatch[1], themeOpts.cookie, load);
+    }
     const locale = detectLocale(req, localeOpts);
     const theme = detectTheme(req, themeOpts);
     ctx.prefs = { locale, theme };

package/dist/react.js

@@ -140,17 +140,58 @@ function useAction(url, options) {
 
 // client-router.ts
 import { createElement, useCallback as useCallback3, useState as useState3, useEffect as useEffect2 } from "react";
+
+// tsx-context.ts
+import { useSyncExternalStore, createContext } from "react";
+var _ctx = { params: {}, query: {} };
+var _listeners = /* @__PURE__ */ new Set();
+function setCtx(value) {
+  _ctx = { ..._ctx, ...value };
+  _listeners.forEach((fn) => fn());
+}
+function _buildT() {
+  const messages = typeof window !== "undefined" ? window.__LOCALE_DATA__ : globalThis.__LOCALE_DATA__;
+  if (!messages) return void 0;
+  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;
+  };
+}
+function useCtx() {
+  useSyncExternalStore(
+    (cb) => {
+      _listeners.add(cb);
+      return () => {
+        _listeners.delete(cb);
+      };
+    },
+    () => _ctx,
+    () => _ctx
+  );
+  const data = typeof window !== "undefined" ? window.__WEIFUWU_CTX : null;
+  const t = data?.t ?? _ctx.t ?? _buildT();
+  const result = { ..._ctx, ...data };
+  if (t) result.t = t;
+  return result;
+}
+var TsxContext = createContext({ params: {}, query: {} });
+
+// client-router.ts
 var _navigating = false;
-var _listeners = [];
+var _listeners2 = [];
 function onNavigate(fn) {
-  _listeners.push(fn);
+  _listeners2.push(fn);
   return () => {
-    _listeners = _listeners.filter((l) => l !== fn);
+    _listeners2 = _listeners2.filter((l) => l !== fn);
   };
 }
 function setNavigating(v) {
   _navigating = v;
-  for (const fn of _listeners) fn(v);
+  for (const fn of _listeners2) fn(v);
 }
 async function navigate(href) {
   if (typeof document === "undefined") return;
@@ -159,6 +200,32 @@ async function navigate(href) {
     location.href = href;
     return;
   }
+  const langMatch = url.pathname.match(/^\/__lang\/(\w+)$/);
+  const themeMatch = url.pathname.match(/^\/__theme\/(\w+)$/);
+  if (langMatch || themeMatch) {
+    try {
+      const res = await fetch(url.pathname, {
+        headers: { accept: "application/json" }
+      });
+      const data = await res.json();
+      const ctx = { ...window.__WEIFUWU_CTX || {}, params: {}, query: {} };
+      if (data.locale) {
+        ctx.locale = data.locale;
+        ctx.prefs = { ...ctx.prefs, locale: data.locale };
+        if (data.messages) window.__LOCALE_DATA__ = data.messages;
+      }
+      if (data.theme) {
+        ctx.theme = data.theme;
+        ctx.prefs = { ...ctx.prefs, theme: data.theme };
+      }
+      ;
+      window.__WEIFUWU_CTX = ctx;
+      setCtx(ctx);
+    } catch {
+      location.href = href;
+    }
+    return;
+  }
   const scrollPos = [window.scrollX, window.scrollY];
   setNavigating(true);
   try {
@@ -315,45 +382,6 @@ async function prefetchPage(href) {
   }
 }
 
-// tsx-context.ts
-import { useSyncExternalStore, createContext } from "react";
-var _ctx = { params: {}, query: {} };
-var _listeners2 = /* @__PURE__ */ new Set();
-function setCtx(value) {
-  _ctx = { ..._ctx, ...value };
-  _listeners2.forEach((fn) => fn());
-}
-function _buildT() {
-  const messages = typeof window !== "undefined" ? window.__LOCALE_DATA__ : globalThis.__LOCALE_DATA__;
-  if (!messages) return void 0;
-  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;
-  };
-}
-function useCtx() {
-  useSyncExternalStore(
-    (cb) => {
-      _listeners2.add(cb);
-      return () => {
-        _listeners2.delete(cb);
-      };
-    },
-    () => _ctx,
-    () => _ctx
-  );
-  const data = typeof window !== "undefined" ? window.__WEIFUWU_CTX : null;
-  const t = data?.t ?? _ctx.t ?? _buildT();
-  const result = { ..._ctx, ...data };
-  if (t) result.t = t;
-  return result;
-}
-var TsxContext = createContext({ params: {}, query: {} });
-
 // head.tsx
 import { createElement as createElement2 } from "react";
 function Head({ children }) {

package/package.json

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