npm - weifuwu - Versions diffs - 0.17.24 → 0.17.26 - Mend

weifuwu 0.17.24 → 0.17.26

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 (11) hide show

package/README.md CHANGED Viewed

@@ -439,15 +439,16 @@ ui/
 ```tsx
 // page.tsx
-export default function Page({ params, query }: { params: { slug: string }; query: Record<string, string> }) {
-  const { t } = useCtx()
-  return <h1>{t('title')}</h1>
+export default function Page() {
+  const { t } = useLocale()
+  const data = useLoaderData()
+  return <h1>{t('title') ?? data.title}</h1>
 }
 ```
 ```tsx
 // layout.tsx
-export default function RootLayout({ children, req }: { children: React.ReactNode; req: Request }) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return <html><head/><body><main>{children}</main></body></html>
 }
 ```
@@ -479,8 +480,8 @@ const loading = useNavigating()              // reactive loading state
 ### Client-side hooks
 ```tsx
-import { useWebsocket, useAction, useData, useQueryState, createStore, Head, setCtx } from 'weifuwu/react'
-import { useLocale, useTheme, applyTheme, addInterceptor } from 'weifuwu/react'
+import { useWebsocket, useAction, useFetch, useQueryState, createStore, Head } from 'weifuwu/react'
+import { useLocale, useTheme, applyTheme, addInterceptor, useLoaderData } from 'weifuwu/react'
 // WebSocket — auto-reconnecting
 const { send, lastMessage, readyState } = useWebsocket('/ws/chat', { onMessage: (d) => console.log(d), reconnect: { maxRetries: 10, delay: 3000 } })
@@ -490,7 +491,7 @@ const { submit, data, error, pending } = useAction('/api/feedback', { method: 'P
 // Auto-reads _csrf cookie, sends as X-CSRF-Token
 // Data fetching — cache + dedup + mutate
-const { data, error, loading, mutate } = useData('/api/posts', { fallback: loadData })
+const { data, error, loading, mutate } = useFetch('/api/posts', { fallback: loadData })
 // URL query state
 const [q, setQ] = useQueryState('q', '')
@@ -503,8 +504,6 @@ const count = useStore(s => s.count)
 // Per-page meta tags
 <Head><title>Page Title</title><meta name="description" content="..." /></Head>
-// Update context (locale switch etc.)
-setCtx({ locale: 'en', prefs: { locale: 'en' } })
 ```
 ### Locale & Theme
@@ -548,6 +547,16 @@ function ThemeToggle() {
 **`applyTheme(theme)`** — DOM-only theme application. Sets `data-theme` on `<html>`, registers `matchMedia` listener for `'system'`. Used by the interceptor; exported for custom scenarios.
+**`useLoaderData()`** — Returns the data returned by `load.ts`. Update-triggered; re-renders on SPA navigation.
+```tsx
+import { useLoaderData } from 'weifuwu/react'
+function Page() {
+  const data = useLoaderData<{ post: { title: string } }>()
+  return <h1>{data.post.title}</h1>
+}
+```
 **`addInterceptor(fn)`** — Register a URL interceptor. Interceptors run before SPA navigation; if one returns `true`, `navigate()` skips the fetch-and-swap.
 ```ts

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

@@ -7,16 +7,16 @@ export interface StoreApi<T> {
     subscribe: (listener: () => void) => () => void;
 }
 export declare function createStore<T extends Record<string, unknown>>(initial: T): StoreApi<T>;
-interface UseDataResult<T> {
+interface UseFetchResult<T> {
     data: T | undefined;
     error: Error | undefined;
     loading: boolean;
     mutate: (data?: T) => Promise<void>;
 }
-interface UseDataOptions<T> {
+interface UseFetchOptions<T> {
     fallback?: T;
     ttl?: number;
 }
-export declare function useData<T = unknown>(url: string | null, options?: UseDataOptions<T>): UseDataResult<T>;
+export declare function useFetch<T = unknown>(url: string | null, options?: UseFetchOptions<T>): UseFetchResult<T>;
 export declare function useQueryState(key: string, defaultValue?: string): [string, (val: string | ((prev: string) => string)) => void];
 export {};

package/dist/index.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ export { serve, createTestServer } from './serve.ts';
 export type { ServeOptions, Server } from './serve.ts';
 export { Router } from './router.ts';
 export type { WebSocketHandler } from './router.ts';
-export { tsx, TsxContext, useCtx, setCtx } from './tsx.ts';
+export { tsx, TsxContext } from './tsx.ts';
 export type { TsxOptions } from './tsx.ts';
 export { auth, cors, logger } from './middleware.ts';
 export type { AuthOptions, CORSOptions, LoggerOptions } from './middleware.ts';

package/dist/index.js CHANGED Viewed

@@ -575,10 +575,9 @@ import { AsyncLocalStorage } from "node:async_hooks";
 import chokidar from "chokidar";
 // 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 KEY = "__WEIFUWU_CTX";
+import { 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];
@@ -595,14 +594,6 @@ function getStore() {
   return s;
 }
 var store = getStore();
-var subscribe = (cb) => {
-  store._listeners.add(cb);
-  return () => {
-    store._listeners.delete(cb);
-  };
-};
-var getSnapshot = () => store._snapshot;
-var getServerSnapshot = getSnapshot;
 function __registerAls(getStore2) {
   store._alsGetStore = getStore2;
 }
@@ -611,28 +602,6 @@ function setCtx(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 _buildT() {
-  const messages2 = typeof window !== "undefined" ? window.__LOCALE_DATA__ : globalThis.__LOCALE_DATA__;
-  if (!messages2) return fallbackT;
-  return (key, params, fallback) => {
-    const msg = key.split(".").reduce((o, k) => o?.[k], messages2);
-    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 = store._alsGetStore?.();
-  const base = alsStore ?? store._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);
 // tsx-instance.ts
@@ -929,7 +898,7 @@ var TsxInstance = class {
           user: ctx.user ?? {},
           parsed: ctx.parsed ?? {},
           prefs: ctx.prefs ?? {},
-          t: ctx.t ?? ((key) => key),
+          loaderData: {},
           env: ctx.env ?? {}
         };
         return als.run(ctxValue, async () => {
@@ -1032,24 +1001,27 @@ ${src}`;
   async buildClientBundle(entryPath, layoutPaths, pagesDir) {
     try {
       const layoutImports = layoutPaths.map((p) => `import${JSON.stringify(p)};`).join("");
+      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';`,
         `import{TsxContext}from'weifuwu/react';`,
         `import P from${JSON.stringify(entryPath)};`,
+        `var setCtx=${_sc};`,
         `const c=document.getElementById('__weifuwu_root');`,
+        `if(window.__WEIFUWU_PROPS)setCtx({loaderData:window.__WEIFUWU_PROPS});`,
         `if(!window.__WFW_ROOT){`,
         `function App(){`,
-        `const[p,setP]=useState({C:P,props:window.__WEIFUWU_PROPS});`,
-        `useEffect(()=>{window.__WFW_SET_PAGE=(C,props)=>setP({C,props})},[]);`,
-        `const ctx=window.__WEIFUWU_CTX||{params:{},query:{}};`,
+        `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,p.props))`,
+        `createElement(p.C,null))`,
         `}`,
         `window.__WFW_ROOT=hydrateRoot(c,createElement(App));`,
         `}else{`,
-        `window.__WFW_SET_PAGE?.(P,window.__WEIFUWU_PROPS);`,
+        `window.__WFW_SET_PAGE?.(P);`,
         `}`
       ].join("");
       const publicEnv = {};
@@ -1119,28 +1091,27 @@ ${src}`;
       const pageMod = this.pageModules.get(entryPath);
       if (!pageMod) return new Response("", { status: 500 });
       const Component = pageMod.default;
+      const loadMod = loadPath ? this.loadModules.get(loadPath) : void 0;
+      const loadFn = loadMod?.default;
+      const loadProps = loadFn ? await loadFn({ params: ctx.params, query: ctx.query }) : {};
       const ctxValue = {
         params: ctx.params,
         query: ctx.query,
         user: ctx.user ?? {},
         parsed: ctx.parsed ?? {},
         prefs: ctx.prefs ?? {},
-        t: ctx.t ?? ((key) => key),
+        loaderData: loadProps,
         env: ctx.env ?? {}
       };
       return als.run(ctxValue, async () => {
         setCtx(ctxValue);
-        const loadMod = loadPath ? this.loadModules.get(loadPath) : void 0;
-        const loadFn = loadMod?.default;
-        const loadProps = loadFn ? await loadFn({ params: ctx.params, query: ctx.query }) : {};
-        const allProps = { ...loadProps, params: ctx.params, query: ctx.query };
         let element = createElement(
           TsxContext.Provider,
           { value: ctxValue },
           createElement(
             "div",
             { id: "__weifuwu_root" },
-            createElement(Component, allProps)
+            createElement(Component, null)
           )
         );
         if (layoutPaths.length === 0) {
@@ -1165,7 +1136,7 @@ ${src}`;
             const isRoot = i === 0;
             element = createElement(
               Layout,
-              isRoot ? { children: element, req } : { children: element }
+              { children: element }
             );
           }
         }
@@ -1177,7 +1148,7 @@ ${src}`;
           compiledTailwindCss: this.compiledTailwindCss,
           isDev,
           bundle,
-          allProps
+          loaderData: loadProps
         });
       });
     };
@@ -1456,12 +1427,13 @@ function buildHeadPayload(opts) {
   return result;
 }
 function buildBodyScripts(opts) {
-  if (!opts.bundle) return "";
   const parts = [];
-  if (opts.allProps) {
-    parts.push(`<script>window.__WEIFUWU_PROPS=${JSON.stringify(opts.allProps)}</script>`);
+  if (opts.loaderData && Object.keys(opts.loaderData).length > 0) {
+    parts.push(`<script>window.__WEIFUWU_PROPS=${JSON.stringify(opts.loaderData)}</script>`);
+  }
+  if (opts.bundle) {
+    parts.push(`<script type="module" src="${opts.base}${opts.bundle.url}"></script>`);
   }
-  parts.push(`<script type="module" src="${opts.base}${opts.bundle.url}"></script>`);
   return parts.join("\n");
 }
@@ -7235,6 +7207,7 @@ function preferences(options) {
       globalThis.__LOCALE_DATA__ = msgs;
       ctx.parsed = { ...ctx.parsed, __localeData: msgs };
     }
+    ;
     ctx.setPref = (name, value) => {
       const cookieOpts = [`${name}=${encodeURIComponent(value)}`, "Path=/", "SameSite=Lax"];
       const referer = req.headers.get("referer") || "/";
@@ -8665,7 +8638,6 @@ export {
   serve,
   serveStatic,
   setCookie,
-  setCtx,
   smoothStream,
   streamObject,
   streamText,
@@ -8673,7 +8645,6 @@ export {
   tool2 as tool,
   tsx,
   upload,
-  useCtx,
   user,
   validate
 };

package/dist/react.d.ts CHANGED Viewed

@@ -3,9 +3,9 @@ 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, addInterceptor } from './client-router.ts';
-export { TsxContext, useCtx, setCtx } from './tsx-context.ts';
+export { TsxContext, useLoaderData } from './tsx-context.ts';
 export { Head } from './head.tsx';
-export { createStore, useData, useQueryState } from './client-state.ts';
+export { createStore, useFetch, 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

@@ -331,10 +331,9 @@ 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 KEY = "__WEIFUWU_CTX";
+import { 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];
@@ -351,40 +350,22 @@ function getStore() {
   return s;
 }
 var store = getStore();
-var subscribe = (cb) => {
-  store._listeners.add(cb);
-  return () => {
-    store._listeners.delete(cb);
-  };
-};
-var getSnapshot = () => store._snapshot;
-var getServerSnapshot = getSnapshot;
 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 _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() {
+function useCtx() {
   const alsStore = store._alsGetStore?.();
   const base = alsStore ?? store._ctx;
   const data = typeof window !== "undefined" ? window.__WEIFUWU_CTX : null;
-  return { ...base, ...data, t: _buildT() };
+  return { ...base, ...data };
 }
-function useCtx() {
-  useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-  return _readCtx();
+function useLoaderData() {
+  const alsStore = store._alsGetStore?.();
+  const base = alsStore ?? store._ctx;
+  const data = typeof window !== "undefined" ? window.__WEIFUWU_CTX : null;
+  return { ...base, ...data }.loaderData;
 }
 var TsxContext = createContext(DEFAULT_CTX);
@@ -405,25 +386,25 @@ function createStore(initial) {
     state = { ...state, ...next };
     listeners.forEach((fn) => fn());
   };
-  const subscribe2 = (listener) => {
+  const subscribe = (listener) => {
     listeners.add(listener);
     return () => {
       listeners.delete(listener);
     };
   };
   const useStore = ((selector) => useSyncExternalStore2(
-    subscribe2,
+    subscribe,
     () => selector ? selector(state) : state
   ));
   useStore.getState = getState;
   useStore.setState = setState;
-  useStore.subscribe = subscribe2;
+  useStore.subscribe = subscribe;
   return useStore;
 }
 var dataCache = /* @__PURE__ */ new Map();
 var inflight = /* @__PURE__ */ new Map();
 var CACHE_TTL = 6e4;
-function useData(url, options) {
+function useFetch(url, options) {
   const ttl = options?.ttl ?? CACHE_TTL;
   const [state, setState] = useState4({
     data: options?.fallback,
@@ -497,7 +478,7 @@ function notifyQueryListeners() {
   window.dispatchEvent(new PopStateEvent("popstate"));
 }
 function useQueryState(key, defaultValue = "") {
-  function getSnapshot2() {
+  function getSnapshot() {
     if (typeof window === "undefined") return defaultValue;
     const params = new URLSearchParams(window.location.search);
     return params.get(key) ?? defaultValue;
@@ -509,12 +490,12 @@ function useQueryState(key, defaultValue = "") {
       window.addEventListener("popstate", cb);
       return () => window.removeEventListener("popstate", cb);
     },
-    getSnapshot2,
+    getSnapshot,
     () => defaultValue
   );
   const setValue = useCallback4((val) => {
     if (typeof window === "undefined") return;
-    const resolved = typeof val === "function" ? val(getSnapshot2()) : val;
+    const resolved = typeof val === "function" ? val(getSnapshot()) : val;
     const url = new URL(window.location.href);
     if (resolved === defaultValue || resolved === "") {
       url.searchParams.delete(key);
@@ -528,6 +509,18 @@ function useQueryState(key, defaultValue = "") {
 }
 // client-locale.ts
+function buildT() {
+  const messages = typeof window !== "undefined" ? window.__LOCALE_DATA__ : globalThis.__LOCALE_DATA__;
+  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;
@@ -551,11 +544,12 @@ function useLocale() {
   return {
     locale: ctx.prefs.locale,
     setLocale: (locale) => navigate("/__lang/" + locale),
-    t: ctx.t
+    t: buildT()
   };
 }
 // client-theme.ts
+import { useEffect as useEffect4 } from "react";
 function resolveTheme(theme) {
   if (theme === "system") {
     if (typeof window === "undefined") return "light";
@@ -601,6 +595,9 @@ addInterceptor(async (url) => {
 function useTheme() {
   const ctx = useCtx();
   const theme = ctx.prefs.theme ?? "system";
+  useEffect4(() => {
+    applyTheme(theme);
+  }, [theme]);
   return {
     theme,
     resolvedTheme: resolveTheme(theme),
@@ -615,10 +612,9 @@ export {
   applyTheme,
   createStore,
   navigate,
-  setCtx,
   useAction,
-  useCtx,
-  useData,
+  useFetch,
+  useLoaderData,
   useLocale,
   useNavigate,
   useNavigating,

package/dist/tsx-context.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-export interface CtxValue {
+export interface PageContext {
     params: Record<string, string>;
     query: Record<string, string>;
     user: {
@@ -6,11 +6,13 @@ export interface CtxValue {
     };
     parsed: Record<string, unknown>;
     prefs: Record<string, string>;
-    t: (key: string, params?: Record<string, string>, fallback?: string) => string;
+    loaderData: Record<string, unknown>;
     env: Record<string, string>;
 }
 /** @internal Injected by tsx-instance.ts for async-safe context isolation */
-export declare function __registerAls(getStore: () => CtxValue | undefined): void;
-export declare function setCtx(value: Partial<CtxValue>): void;
-export declare function useCtx(): CtxValue;
-export declare const TsxContext: import("react").Context<CtxValue>;
+export declare function __registerAls(getStore: () => PageContext | undefined): void;
+declare function setCtx(value: Partial<PageContext>): void;
+declare function useCtx(): PageContext;
+export declare function useLoaderData<T = Record<string, unknown>>(): T;
+export declare const TsxContext: import("react").Context<PageContext>;
+export { useCtx, setCtx };

package/dist/tsx-instance.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Router } from './router.ts';
-import { TsxContext, useCtx, setCtx } from './tsx-context.ts';
-export { TsxContext, useCtx, setCtx };
+import { TsxContext } from './tsx-context.ts';
+export { TsxContext };
 export interface TsxOptions {
     dir: string;
 }

package/dist/tsx.d.ts CHANGED Viewed

@@ -1,7 +1,7 @@
-import { TsxContext, useCtx, setCtx } from './tsx-instance.ts';
+import { TsxContext } from './tsx-instance.ts';
 import type { TsxOptions } from './tsx-instance.ts';
 import type { Router } from './router.ts';
-export { TsxContext, useCtx, setCtx };
+export { TsxContext };
 export type { TsxOptions };
 export declare function tsx(options: TsxOptions): Promise<Router & {
     stop: () => void;

package/dist/types.d.ts CHANGED Viewed

@@ -4,12 +4,8 @@ export interface Context {
     user?: unknown;
     parsed?: Record<string, unknown>;
     mountPath?: string;
-    locale?: string;
     t?: (key: string, params?: Record<string, string>, fallback?: string) => string;
-    requestId?: string;
     prefs?: Record<string, string>;
-    theme?: string;
-    setPref?: (name: string, value: string) => Response;
     env?: Record<string, string>;
 }
 export type Handler = (req: Request, ctx: Context) => Response | Promise<Response>;

package/package.json CHANGED Viewed

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