npm - weifuwu - Versions diffs - 0.16.6 → 0.17.0 - Mend

weifuwu 0.16.6 → 0.17.0

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

package/dist/index.js CHANGED Viewed

@@ -571,7 +571,7 @@ import { renderToReadableStream } from "react-dom/server";
 import * as esbuild from "esbuild";
 import { readdirSync, statSync, existsSync as existsSync2, mkdirSync, readFileSync as readFileSync2, writeFileSync } from "node:fs";
 import { join, relative, resolve as resolve2, sep, dirname, basename } from "node:path";
-import { pathToFileURL } from "node:url";
+import { pathToFileURL, fileURLToPath } from "node:url";
 import { createHash } from "node:crypto";
 import vm from "node:vm";
 import { createRequire } from "node:module";
@@ -580,11 +580,26 @@ import chokidar from "chokidar";
 // tsx-context.ts
 import { createContext, useContext } from "react";
 var TsxContext = createContext({ params: {}, query: {} });
-function useTsx() {
+function useCtx() {
+  if (typeof window !== "undefined") {
+    const wc = window.__WEIFUWU_CTX;
+    if (wc) {
+      const messages2 = window.__LOCALE_DATA__;
+      if (messages2 && !wc.t) {
+        wc.t = (key, params) => {
+          let msg = messages2[key] ?? key;
+          if (params) for (const [k, v] of Object.entries(params)) msg = msg.replace(`{${k}}`, v);
+          return msg;
+        };
+      }
+      return wc;
+    }
+  }
   return useContext(TsxContext);
 }
 // tsx-instance.ts
+var __dirname = dirname(fileURLToPath(import.meta.url));
 var liveReloadClients = /* @__PURE__ */ new Set();
 function broadcastReload() {
   for (const ws of liveReloadClients) {
@@ -638,26 +653,6 @@ function resolveAliases() {
   _alias = {};
   return {};
 }
-function concatUint8(chunks) {
-  const len = chunks.reduce((a, c) => a + c.length, 0);
-  const out = new Uint8Array(len);
-  let off = 0;
-  for (const c of chunks) {
-    out.set(c, off);
-    off += c.length;
-  }
-  return out;
-}
-async function readStream(stream) {
-  const chunks = [];
-  const reader = stream.getReader();
-  while (true) {
-    const { done, value } = await reader.read();
-    if (done) break;
-    chunks.push(value);
-  }
-  return new TextDecoder().decode(concatUint8(chunks));
-}
 function scanPages(dir) {
   const pages = [];
   function walk(current) {
@@ -887,7 +882,16 @@ var TsxInstance = class {
         if (!nfMod) return new Response("Not Found", { status: 404 });
         const NfComponent = nfMod.default;
         let element = createElement(TsxContext.Provider, {
-          value: { params: ctx.params, query: ctx.query, user: ctx.user, parsed: ctx.parsed }
+          value: {
+            params: ctx.params,
+            query: ctx.query,
+            user: ctx.user,
+            parsed: ctx.parsed,
+            prefs: ctx.prefs,
+            locale: ctx.locale,
+            theme: ctx.theme,
+            t: ctx.t
+          }
         }, createElement(NfComponent, { params: ctx.params, query: ctx.query }));
         for (let i = rootLayouts.length - 1; i >= 0; i--) {
           const LMod = this.layoutModules.get(rootLayouts[i]);
@@ -895,23 +899,12 @@ var TsxInstance = class {
           element = createElement(LMod.default, { children: element });
         }
         const stream = await renderToReadableStream(element);
-        const body = await readStream(stream);
-        let html = body.startsWith("<!DOCTYPE html>") ? body : `<!DOCTYPE html>
-${body}`;
-        if (this.compiledTailwindCss && html.includes("</head>")) {
-          html = html.replace(
-            "</head>",
-            `<link rel="stylesheet" href="${base}/__wfw/style.css" />
-</head>`
-          );
-        }
-        if (isDev) {
-          html += `
-<script>(function(){var ws=new WebSocket((location.protocol==='https:'?'wss:':'ws:')+'//'+location.host+'${base}/__weifuwu/livereload');ws.onmessage=function(e){if(e.data==='reload')location.reload()};ws.onclose=function(){setTimeout(function(){location.reload()},500)}})()</script>`;
-        }
-        return new Response(html, {
-          status: 404,
-          headers: { "content-type": "text/html; charset=utf-8" }
+        return streamResponse(stream, {
+          ctx,
+          base,
+          compiledTailwindCss: this.compiledTailwindCss,
+          isDev,
+          status: 404
         });
       };
       this.router.all("/*", handler);
@@ -972,16 +965,26 @@ ${src}`;
     }
   }
   // ── client bundle ─────────────────────────────────────────────────────────
-  async buildClientBundle(entryPath, _layoutPaths, pagesDir) {
+  async buildClientBundle(entryPath, layoutPaths, pagesDir) {
     try {
       const code = [
         `import{hydrateRoot}from'react-dom/client';`,
-        `import{createElement}from'react';`,
+        `import{createElement,useState,useEffect}from'react';`,
+        `import{TsxContext}from'weifuwu/react';`,
         `import P from${JSON.stringify(entryPath)};`,
-        `const p=window.__WEIFUWU_PROPS;`,
         `const c=document.getElementById('__weifuwu_root');`,
-        `const r=hydrateRoot(c,createElement(P,p));`,
-        `window.__WEIFUWU_ROOT=r;`
+        `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:{}};`,
+        `return createElement(TsxContext.Provider,{value:ctx},`,
+        `createElement(p.C,p.props))`,
+        `}`,
+        `window.__WFW_ROOT=hydrateRoot(c,createElement(App));`,
+        `}else{`,
+        `window.__WFW_SET_PAGE?.(P,window.__WEIFUWU_PROPS);`,
+        `}`
       ].join("");
       const publicEnv = {};
       for (const key of Object.keys(process.env)) {
@@ -989,13 +992,16 @@ ${src}`;
           publicEnv[`process.env.${key}`] = JSON.stringify(process.env[key]);
         }
       }
+      const weifuwuAlias = {
+        "weifuwu/react": resolve2(__dirname, "react.ts")
+      };
       const result = await esbuild.build({
         stdin: { contents: code, loader: "tsx", resolveDir: pagesDir },
         bundle: true,
         format: "esm",
         jsx: "automatic",
         jsxImportSource: "react",
-        alias: resolveAliases(),
+        alias: { ...resolveAliases(), ...weifuwuAlias },
         banner: { js: "self.process={env:{}};" },
         define: Object.keys(publicEnv).length > 0 ? publicEnv : void 0,
         loader: { ".node": "empty" },
@@ -1053,7 +1059,16 @@ ${src}`;
         "div",
         { id: "__weifuwu_root" },
         createElement(TsxContext.Provider, {
-          value: { params: ctx.params, query: ctx.query, user: ctx.user, parsed: ctx.parsed }
+          value: {
+            params: ctx.params,
+            query: ctx.query,
+            user: ctx.user,
+            parsed: ctx.parsed,
+            prefs: ctx.prefs,
+            locale: ctx.locale,
+            theme: ctx.theme,
+            t: ctx.t
+          }
         }, createElement(Component, allProps))
       );
       if (layoutPaths.length === 0) {
@@ -1082,35 +1097,15 @@ ${src}`;
           );
         }
       }
-      const stream = await renderToReadableStream(element);
-      const body = await readStream(stream);
-      if (layoutPaths.length > 0 && (body.match(/__weifuwu_root/g) || []).length > 1) {
-        console.warn(
-          '[weifuwu/tsx] <div id="__weifuwu_root"> is auto-injected by the framework. Remove the duplicate from your root layout to avoid hydration conflicts.'
-        );
-      }
-      const scripts = [];
-      scripts.push(`<script>window.__WEIFUWU_PROPS=${JSON.stringify(allProps)}</script>`);
       const bundle = await this.getOrBuildClientBundle(entryPath, layoutPaths, this.pagesDir);
-      if (bundle) {
-        scripts.push(`<script type="module" src="${base}${bundle.url}"></script>`);
-      }
-      let html = body.startsWith("<!DOCTYPE html>") ? body : `<!DOCTYPE html>
-${body}`;
-      html += "\n" + scripts.join("\n");
-      if (this.compiledTailwindCss && html.includes("</head>")) {
-        html = html.replace(
-          "</head>",
-          `<link rel="stylesheet" href="${base}/__wfw/style.css" />
-</head>`
-        );
-      }
-      if (isDev) {
-        html += `
-<script>(function(){var ws=new WebSocket((location.protocol==='https:'?'wss:':'ws:')+'//'+location.host+'${base}/__weifuwu/livereload');ws.onmessage=function(e){if(e.data==='reload')location.reload()};ws.onclose=function(){setTimeout(function(){location.reload()},500)}})()</script>`;
-      }
-      return new Response(html, {
-        headers: { "content-type": "text/html; charset=utf-8" }
+      const stream = await renderToReadableStream(element);
+      return streamResponse(stream, {
+        ctx,
+        base,
+        compiledTailwindCss: this.compiledTailwindCss,
+        isDev,
+        bundle,
+        allProps
       });
     };
   }
@@ -1276,6 +1271,101 @@ ${body}`;
     }
   }
 };
+function streamResponse(reactStream, opts) {
+  const decoder = new TextDecoder();
+  const encoder2 = new TextEncoder();
+  const headPayload = buildHeadPayload(opts);
+  let buffer = "";
+  let headFlushed = false;
+  let extractedHead = "";
+  const output = new ReadableStream({
+    async start(controller) {
+      const reader = reactStream.getReader();
+      async function push(chunk) {
+        buffer += decoder.decode(chunk, { stream: true });
+        if (!extractedHead) {
+          const m = buffer.match(/<template id="__wfw_head">([\s\S]*?)<\/template>/);
+          if (m) {
+            extractedHead = m[1];
+            buffer = buffer.replace(m[0], "");
+          }
+        }
+        if (!headFlushed) {
+          const idx = buffer.indexOf("</head>");
+          if (idx !== -1) {
+            const before = buffer.slice(0, idx);
+            let injection = "";
+            if (extractedHead) injection += "\n" + extractedHead;
+            injection += headPayload;
+            controller.enqueue(encoder2.encode(before + injection));
+            buffer = buffer.slice(idx);
+            headFlushed = true;
+          }
+          return;
+        }
+        controller.enqueue(encoder2.encode(buffer));
+        buffer = "";
+      }
+      while (true) {
+        const { done, value } = await reader.read();
+        if (done) break;
+        await push(value);
+      }
+      if (buffer) controller.enqueue(encoder2.encode(buffer));
+      const body = buildBodyScripts(opts);
+      if (body) controller.enqueue(encoder2.encode("\n" + body));
+      if (opts.isDev) {
+        controller.enqueue(encoder2.encode(
+          `
+<script>(function(){var ws=new WebSocket((location.protocol==='https:'?'wss:':'ws:')+'//'+location.host+'${opts.base}/__weifuwu/livereload');ws.onmessage=function(e){if(e.data==='reload')location.reload()};ws.onclose=function(){setTimeout(function(){location.reload()},500)}})()</script>`
+        ));
+      }
+      controller.close();
+    }
+  });
+  return new Response(output, {
+    status: opts.status ?? 200,
+    headers: { "content-type": "text/html; charset=utf-8" }
+  });
+}
+function buildHeadPayload(opts) {
+  const { ctx, base, compiledTailwindCss } = opts;
+  let result = "";
+  if (ctx.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>
+`;
+  }
+  if (compiledTailwindCss) {
+    result += `<link rel="stylesheet" href="${base}/__wfw/style.css" />
+`;
+  }
+  const localeData = globalThis.__LOCALE_DATA__;
+  if (localeData && Object.keys(localeData).length > 0) {
+    result += `<script>window.__LOCALE_DATA__=${JSON.stringify(localeData)}</script>
+`;
+  }
+  const ctxData = {
+    params: ctx.params,
+    query: ctx.query,
+    user: ctx.user,
+    parsed: ctx.parsed
+  };
+  if (ctx.prefs) ctxData.prefs = ctx.prefs;
+  if (ctx.locale) ctxData.locale = ctx.locale;
+  if (ctx.theme) ctxData.theme = ctx.theme;
+  result += `<script>window.__WEIFUWU_CTX=${JSON.stringify(ctxData)}</script>
+`;
+  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>`);
+  }
+  parts.push(`<script type="module" src="${opts.base}${opts.bundle.url}"></script>`);
+  return parts.join("\n");
+}
 // tsx.ts
 async function tsx(options) {
@@ -1777,7 +1867,7 @@ function upload(options) {
 // rate-limit.ts
 function rateLimit(options) {
   const max = options?.max ?? 100;
-  const window = options?.window ?? 6e4;
+  const window2 = options?.window ?? 6e4;
   const getKey = options?.key ?? ((req) => {
     const forwarded = req.headers.get("x-forwarded-for");
     if (forwarded) return forwarded.split(",")[0].trim();
@@ -1794,19 +1884,19 @@ function rateLimit(options) {
     for (const [key, entry] of hits) {
       if (entry.reset < now) hits.delete(key);
     }
-  }, window);
+  }, window2);
   if (interval.unref) interval.unref();
   const mw = async (req, ctx, next) => {
     const key = getKey(req);
     const now = Date.now();
     const entry = hits.get(key);
     if (!entry || entry.reset < now) {
-      hits.set(key, { count: 1, reset: now + window });
+      hits.set(key, { count: 1, reset: now + window2 });
       const res2 = await next(req, ctx);
       const headers2 = new Headers(res2.headers);
       headers2.set("X-RateLimit-Limit", String(max));
       headers2.set("X-RateLimit-Remaining", String(max - 1));
-      headers2.set("X-RateLimit-Reset", String(Math.ceil((now + window) / 1e3)));
+      headers2.set("X-RateLimit-Reset", String(Math.ceil((now + window2) / 1e3)));
       return new Response(res2.body, { status: res2.status, statusText: res2.statusText, headers: headers2 });
     }
     entry.count++;
@@ -6685,15 +6775,39 @@ function health(options) {
   return r;
 }
-// i18n.ts
+// preferences.ts
 import { readFile as readFile2 } from "node:fs/promises";
 import { existsSync as existsSync4 } from "node:fs";
 import { join as join4, resolve as resolve10 } from "node:path";
-function i18n(options) {
-  const dir = resolve10(options.dir);
-  const defaultLocale = options.defaultLocale ?? "en";
+var defaults = {
+  locale: { default: "en", cookie: "locale", fromAcceptLanguage: true },
+  theme: { default: "system", cookie: "theme" }
+};
+function translate(msgs, key, params) {
+  const msg = msgs[key] ?? key;
+  if (!params) return msg;
+  let result = msg;
+  for (const [k, v] of Object.entries(params)) {
+    result = result.replace(`{${k}}`, v);
+  }
+  return result;
+}
+function extractCookie(req, name) {
+  const cookie = req.headers.get("cookie");
+  if (!cookie) return null;
+  for (const part of cookie.split(";")) {
+    const [k, v] = part.trim().split("=");
+    if (k === name && v) return decodeURIComponent(v);
+  }
+  return null;
+}
+function preferences(options) {
+  const dir = options.dir ? resolve10(options.dir) : void 0;
+  const localeOpts = { ...defaults.locale, ...options.locale };
+  const themeOpts = { ...defaults.theme, ...options.theme };
   const cache = /* @__PURE__ */ new Map();
   async function load(locale) {
+    if (!dir) return {};
     const cached = cache.get(locale);
     if (cached) return cached;
     const filePath = join4(dir, `${locale}.json`);
@@ -6707,40 +6821,62 @@ function i18n(options) {
       return {};
     }
   }
-  function detect(req) {
-    const url = new URL(req.url);
-    const fromCookie = extractCookie(req, "locale");
+  return async (req, ctx, next) => {
+    const locale = detectLocale(req, localeOpts);
+    const theme = detectTheme(req, themeOpts);
+    ctx.prefs = { locale, theme };
+    ctx.locale = locale;
+    ctx.theme = theme;
+    if (dir) {
+      const msgs = await load(locale);
+      ctx.t = (key, params) => translate(msgs, key, params);
+      globalThis.__LOCALE_DATA__ = msgs;
+    }
+    ctx.setPref = (name, value) => {
+      const cookieOpts = [`${name}=${encodeURIComponent(value)}`, "Path=/", "SameSite=Lax"];
+      const referer = req.headers.get("referer") || "/";
+      return new Response(null, {
+        status: 302,
+        headers: {
+          Location: referer,
+          "Set-Cookie": cookieOpts.join("; ")
+        }
+      });
+    };
+    const flashVal = extractCookie(req, "flash");
+    if (flashVal) {
+      try {
+        ctx.prefs.flash = JSON.parse(flashVal);
+      } catch {
+        ctx.prefs.flash = flashVal;
+      }
+    }
+    const res = await next(req, ctx);
+    if (flashVal) {
+      const headers = new Headers(res.headers);
+      headers.append("Set-Cookie", "flash=; Path=/; Max-Age=0");
+      return new Response(res.body, { status: res.status, statusText: res.statusText, headers });
+    }
+    return res;
+  };
+}
+function detectLocale(req, opts) {
+  if (opts.cookie) {
+    const fromCookie = extractCookie(req, opts.cookie);
     if (fromCookie) return fromCookie;
+  }
+  if (opts.fromAcceptLanguage) {
     const fromHeader = req.headers.get("Accept-Language")?.split(",")[0]?.split("-")[0];
     if (fromHeader) return fromHeader;
-    return defaultLocale;
-  }
-  function t(localeMsgs, key, params) {
-    let msg = localeMsgs[key];
-    if (msg === void 0) msg = key;
-    if (params) {
-      for (const [k, v] of Object.entries(params)) {
-        msg = msg.replace(`{${k}}`, v);
-      }
-    }
-    return msg;
   }
-  return async (req, ctx, next) => {
-    const locale = detect(req);
-    const msgs = await load(locale);
-    ctx.locale = locale;
-    ctx.t = (key, params) => t(msgs, key, params);
-    return next(req, ctx);
-  };
+  return opts.default;
 }
-function extractCookie(req, name) {
-  const cookie = req.headers.get("cookie");
-  if (!cookie) return null;
-  for (const part of cookie.split(";")) {
-    const [k, v] = part.trim().split("=");
-    if (k === name && v) return decodeURIComponent(v);
+function detectTheme(req, opts) {
+  if (opts.cookie) {
+    const fromCookie = extractCookie(req, opts.cookie);
+    if (fromCookie) return fromCookie;
   }
-  return null;
+  return opts.default;
 }
 // seo.ts
@@ -8134,7 +8270,6 @@ export {
   graphql,
   health,
   helmet,
-  i18n,
   iii,
   loadEnv,
   logdb,
@@ -8144,6 +8279,7 @@ export {
   openai,
   opencode,
   postgres,
+  preferences,
   queue,
   rateLimit,
   redis,
@@ -8163,7 +8299,7 @@ export {
   tool2 as tool,
   tsx,
   upload,
-  useTsx,
+  useCtx,
   user,
   validate
 };

package/dist/preferences.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+import type { Middleware } from './types.ts';
+export interface PrefOptions {
+    dir?: string;
+    locale?: {
+        default?: string;
+        cookie?: string;
+        fromAcceptLanguage?: boolean;
+    };
+    theme?: {
+        default?: string;
+        cookie?: string;
+    };
+}
+export declare function preferences(options: PrefOptions): Middleware;

package/dist/react.d.ts CHANGED Viewed

@@ -2,5 +2,8 @@ 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 } from './client-router.ts';
-export { TsxContext, useTsx } from './tsx-context.ts';
+export { Link, useNavigate, navigate, useNavigating } from './client-router.ts';
+export { TsxContext, useCtx } from './tsx-context.ts';
+export { Head } from './head.tsx';
+export { createStore, useData, useQueryState } from './client-state.ts';
+export type { StoreApi } from './client-state.ts';