npm - weifuwu - Versions diffs - 0.17.19 → 0.17.22 - Mend

weifuwu 0.17.19 → 0.17.22

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/README.md CHANGED Viewed

@@ -322,8 +322,13 @@ app.use(preferences({ dir: './locales', locale: { default: 'en' }, theme: { defa
 | `theme.cookie` | `'theme'` | Cookie name |
 ```tsx
-// Client-side no-refresh switching with <Link>
-<Link href="/__lang/zh">中文</Link>
+// Client-side no-refresh switching — import enables it automatically
+import { useLocale, useTheme } from 'weifuwu/react'
+<Link href="/__lang/zh">中文</Link>         // <Link> handles it via interceptor
+<button onClick={() => setLocale('en')}>EN</button>  // or programmatic
+const { theme, resolvedTheme, setTheme } = useTheme()
+// resolvedTheme resolves 'system' → 'dark'|'light' based on prefers-color-scheme
 ```
 ### queue [B]
@@ -467,12 +472,15 @@ const navigate = useNavigate()               // programmatic: navigate('/contact
 const loading = useNavigating()              // reactive loading state
 ```
-`navigate()` fetches SSR, extracts `__weifuwu_root`, replaces in-place. `load.ts` runs on server each nav. `/__lang/:locale` and `/__theme/:theme` intercepted for no-refresh switching.
+`navigate()` fetches SSR, extracts `__weifuwu_root`, replaces in-place. `load.ts` runs on server each nav.
+**Preference URLs** (`/__lang/`, `/__theme/`) are intercepted by modular interceptors registered via `addInterceptor()` — no page reload needed. Importing `useLocale` or `useTheme` registers the interceptor automatically.
 ### Client-side hooks
 ```tsx
 import { useWebsocket, useAction, useData, useQueryState, createStore, Head, setCtx } from 'weifuwu/react'
+import { useLocale, useTheme, applyTheme, addInterceptor } from 'weifuwu/react'
 // WebSocket — auto-reconnecting
 const { send, lastMessage, readyState } = useWebsocket('/ws/chat', { onMessage: (d) => console.log(d), reconnect: { maxRetries: 10, delay: 3000 } })
@@ -499,6 +507,58 @@ const count = useStore(s => s.count)
 setCtx({ locale: 'en', prefs: { locale: 'en' } })
 ```
+### Locale & Theme
+```tsx
+import { useLocale } from 'weifuwu/react'
+function LangSwitch() {
+  const { locale, setLocale, t } = useLocale()
+  return <button onClick={() => setLocale('zh-CN')}>{t('switch_lang')}</button>
+}
+```
+| Return | Description |
+|--------|-------------|
+| `locale` | Current locale string (from `ctx.prefs.locale`) |
+| `setLocale(locale)` | Switch locale (calls `navigate('/__lang/' + locale)`) |
+| `t` | Translation function (same as `useCtx().t`) |
+```tsx
+import { useTheme } from 'weifuwu/react'
+function ThemeToggle() {
+  const { theme, resolvedTheme, setTheme } = useTheme()
+  return (
+    <>
+      <span>Current: {resolvedTheme}</span>  {/* 'dark' | 'light' — never 'system' */}
+      <select value={theme} onChange={e => setTheme(e.target.value)}>
+        <option value="light">☀ Light</option>
+        <option value="dark">🌙 Dark</option>
+        <option value="system">💻 System</option>
+      </select>
+    </>
+  )
+}
+```
+| Return | Description |
+|--------|-------------|
+| `theme` | Raw preference (`'light'` \| `'dark'` \| `'system'`) |
+| `resolvedTheme` | Resolved value (`'light'` \| `'dark'`) — `'system'` → matchMedia |
+| `setTheme(theme)` | Switch theme (calls `navigate('/__theme/' + theme)`) |
+**`applyTheme(theme)`** — DOM-only theme application. Sets `data-theme` on `<html>`, registers `matchMedia` listener for `'system'`. Used by the interceptor; exported for custom scenarios.
+**`addInterceptor(fn)`** — Register a URL interceptor. Interceptors run before SPA navigation; if one returns `true`, `navigate()` skips the fetch-and-swap.
+```ts
+import { addInterceptor } from 'weifuwu/react'
+addInterceptor(async (url) => {
+  if (!url.pathname.startsWith('/__custom/')) return false
+  // handle without page reload
+  return true
+})
+```
 ### Flash messages
 ```ts

package/dist/client-locale.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare function useLocale(): {
+    locale: string;
+    setLocale: (locale: string) => Promise<void>;
+    t: (key: string, params?: Record<string, string>, fallback?: string) => string;
+};

package/dist/client-pref.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export type UrlInterceptor = (url: URL) => boolean | Promise<boolean>;
+export declare function addInterceptor(fn: UrlInterceptor): void;
+export declare function runInterceptors(url: URL): Promise<boolean>;

package/dist/client-router.d.ts CHANGED Viewed

@@ -1,3 +1,4 @@
+export { addInterceptor } from './client-pref.ts';
 export declare function isNavigating(): boolean;
 export declare function onNavigate(fn: (v: boolean) => void): () => void;
 export declare function navigate(href: string): Promise<void>;
@@ -297,4 +298,3 @@ export declare function Link({ href, children, onClick, prefetch, ...props }: Li
     href: string;
     onClick: (e: React.MouseEvent<HTMLAnchorElement>) => void;
 }, HTMLElement>;
-export {};

package/dist/client-theme.d.ts ADDED Viewed

@@ -0,0 +1,7 @@
+declare function applyTheme(theme: string): void;
+export declare function useTheme(): {
+    theme: string;
+    resolvedTheme: string;
+    setTheme: (t: string) => Promise<void>;
+};
+export { applyTheme };

package/dist/react.d.ts CHANGED Viewed

@@ -2,8 +2,10 @@ export { useWebsocket } from './use-websocket.ts';
 export type { UseWebsocketOptions, UseWebsocketReturn } from './use-websocket.ts';
 export { useAction } from './use-action.ts';
 export type { UseActionOptions, UseActionReturn } from './use-action.ts';
-export { Link, useNavigate, navigate, useNavigating } from './client-router.ts';
+export { Link, useNavigate, navigate, useNavigating, addInterceptor } from './client-router.ts';
 export { TsxContext, useCtx, setCtx } from './tsx-context.ts';
 export { Head } from './head.tsx';
 export { createStore, useData, useQueryState } from './client-state.ts';
 export type { StoreApi } from './client-state.ts';
+export { useLocale } from './client-locale.ts';
+export { useTheme, applyTheme } from './client-theme.ts';

package/dist/react.js CHANGED Viewed

@@ -141,63 +141,30 @@ 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 fallbackT = (key, _params, fallback) => fallback ?? key;
-var DEFAULT_CTX = { params: {}, query: {}, parsed: {}, prefs: {}, env: {}, t: fallbackT, user: {} };
-var _ctx = DEFAULT_CTX;
-var _snapshot = { params: _ctx.params, query: _ctx.query, user: _ctx.user, parsed: _ctx.parsed, prefs: _ctx.prefs, env: _ctx.env };
-var _listeners = /* @__PURE__ */ new Set();
-var subscribe = (cb) => {
-  _listeners.add(cb);
-  return () => {
-    _listeners.delete(cb);
-  };
-};
-var getSnapshot = () => _snapshot;
-var getServerSnapshot = getSnapshot;
-var _alsGetStore = null;
-function setCtx(value) {
-  _ctx = { ..._ctx, ...value };
-  _snapshot = { params: _ctx.params, query: _ctx.query, user: _ctx.user, parsed: _ctx.parsed, prefs: _ctx.prefs, env: _ctx.env };
-  _listeners.forEach((fn) => fn());
-}
-function _buildT() {
-  const messages = typeof window !== "undefined" ? window.__LOCALE_DATA__ : globalThis.__LOCALE_DATA__;
-  if (!messages) return fallbackT;
-  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;
-  };
+// client-pref.ts
+var interceptors = [];
+function addInterceptor(fn) {
+  interceptors.push(fn);
 }
-function _readCtx() {
-  const alsStore = _alsGetStore?.();
-  const base = alsStore ?? _ctx;
-  const data = typeof window !== "undefined" ? window.__WEIFUWU_CTX : null;
-  return { ...base, ...data, t: _buildT() };
-}
-function useCtx() {
-  useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-  return _readCtx();
+async function runInterceptors(url) {
+  for (const fn of interceptors) {
+    if (await fn(url)) return true;
+  }
+  return false;
 }
-var TsxContext = createContext(DEFAULT_CTX);
 // client-router.ts
 var _navigating = false;
-var _listeners2 = [];
+var _listeners = [];
 function onNavigate(fn) {
-  _listeners2.push(fn);
+  _listeners.push(fn);
   return () => {
-    _listeners2 = _listeners2.filter((l) => l !== fn);
+    _listeners = _listeners.filter((l) => l !== fn);
   };
 }
 function setNavigating(v) {
   _navigating = v;
-  for (const fn of _listeners2) fn(v);
+  for (const fn of _listeners) fn(v);
 }
 async function navigate(href) {
   if (typeof document === "undefined") return;
@@ -206,30 +173,7 @@ 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.prefs = { ...ctx.prefs, locale: data.locale };
-        if (data.messages) window.__LOCALE_DATA__ = data.messages;
-      }
-      if (data.theme) {
-        ctx.prefs = { ...ctx.prefs, theme: data.theme };
-      }
-      ;
-      window.__WEIFUWU_CTX = ctx;
-      setCtx(ctx);
-    } catch {
-      location.href = href;
-    }
-    return;
-  }
+  if (await runInterceptors(url)) return;
   const scrollPos = [window.scrollX, window.scrollY];
   setNavigating(true);
   try {
@@ -386,6 +330,51 @@ async function prefetchPage(href) {
   }
 }
+// tsx-context.ts
+import { useSyncExternalStore, createContext } from "react";
+var fallbackT = (key, _params, fallback) => fallback ?? key;
+var DEFAULT_CTX = { params: {}, query: {}, parsed: {}, prefs: {}, env: {}, t: fallbackT, user: {} };
+var _ctx = DEFAULT_CTX;
+var _snapshot = { params: _ctx.params, query: _ctx.query, user: _ctx.user, parsed: _ctx.parsed, prefs: _ctx.prefs, env: _ctx.env };
+var _listeners2 = /* @__PURE__ */ new Set();
+var subscribe = (cb) => {
+  _listeners2.add(cb);
+  return () => {
+    _listeners2.delete(cb);
+  };
+};
+var getSnapshot = () => _snapshot;
+var getServerSnapshot = getSnapshot;
+var _alsGetStore = null;
+function setCtx(value) {
+  _ctx = { ..._ctx, ...value };
+  _snapshot = { params: _ctx.params, query: _ctx.query, user: _ctx.user, parsed: _ctx.parsed, prefs: _ctx.prefs, env: _ctx.env };
+  _listeners2.forEach((fn) => fn());
+}
+function _buildT() {
+  const messages = typeof window !== "undefined" ? window.__LOCALE_DATA__ : globalThis.__LOCALE_DATA__;
+  if (!messages) return fallbackT;
+  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 _readCtx() {
+  const alsStore = _alsGetStore?.();
+  const base = alsStore ?? _ctx;
+  const data = typeof window !== "undefined" ? window.__WEIFUWU_CTX : null;
+  return { ...base, ...data, t: _buildT() };
+}
+function useCtx() {
+  useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  return _readCtx();
+}
+var TsxContext = createContext(DEFAULT_CTX);
 // head.tsx
 import { createElement as createElement2 } from "react";
 function Head({ children }) {
@@ -524,18 +513,102 @@ function useQueryState(key, defaultValue = "") {
   }, [key, defaultValue]);
   return [value, setValue];
 }
+// client-locale.ts
+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: ctx.t
+  };
+}
+// client-theme.ts
+function resolveTheme(theme) {
+  if (theme === "system" && typeof window !== "undefined") {
+    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";
+  return {
+    theme,
+    resolvedTheme: resolveTheme(theme),
+    setTheme: (t) => navigate("/__theme/" + t)
+  };
+}
 export {
   Head,
   Link,
   TsxContext,
+  addInterceptor,
+  applyTheme,
   createStore,
   navigate,
   setCtx,
   useAction,
   useCtx,
   useData,
+  useLocale,
   useNavigate,
   useNavigating,
   useQueryState,
+  useTheme,
   useWebsocket
 };

package/package.json CHANGED Viewed

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