weifuwu 0.30.2 → 0.31.1

package/dist/react/index.js

@@ -0,0 +1,342 @@
+// src/react/index.ts
+import { Fragment as Fragment2 } from "react";
+
+// src/react/render.ts
+import {
+  createElement,
+  Fragment
+} from "react";
+import { renderToString, renderToReadableStream } from "react-dom/server";
+
+// src/react/context.ts
+import { createContext } from "react";
+var CTX_KEY = /* @__PURE__ */ Symbol.for("weifuwu.react.ServerDataContext");
+function getServerDataContext() {
+  const globalStore = globalThis;
+  if (globalStore[CTX_KEY]) return globalStore[CTX_KEY];
+  const ctx = createContext({});
+  ctx.displayName = "ServerData";
+  globalStore[CTX_KEY] = ctx;
+  return ctx;
+}
+var ServerDataContext = getServerDataContext();
+
+// src/react/render.ts
+var encoder = new TextEncoder();
+var decoder = new TextDecoder();
+function escapeAttr(s) {
+  return s.replace(/&/g, "&").replace(/"/g, """);
+}
+function buildHeadTags(head) {
+  if (!head) return "";
+  const tags = [];
+  if (head.title) tags.push(`<title>${escapeAttr(head.title)}</title>`);
+  if (head.meta) {
+    for (const [name, content] of Object.entries(head.meta)) {
+      tags.push(`<meta name="${escapeAttr(name)}" content="${escapeAttr(content)}">`);
+    }
+  }
+  if (head.links) {
+    for (const link of head.links) {
+      const attrs = Object.entries(link).map(([k, v]) => `${k}="${escapeAttr(v)}"`).join(" ");
+      tags.push(`<link ${attrs}>`);
+    }
+  }
+  if (head.scripts) {
+    for (const script of head.scripts) {
+      const entries = Object.entries(script).filter(([, v]) => v !== void 0);
+      const attrs = entries.map(([k, v]) => `${k}="${escapeAttr(v)}"`).join(" ");
+      tags.push(`<script ${attrs}></script>`);
+    }
+  }
+  return tags.join("");
+}
+function injectHeadIntoHtml(html, headTags) {
+  if (!headTags) return html;
+  let result = html;
+  if (headTags.includes("<title>")) {
+    const titleMatch = headTags.match(/<title>[^<]*<\/title>/);
+    if (titleMatch) {
+      result = result.replace(/<title>[^<]*<\/title>/, titleMatch[0]);
+      headTags = headTags.replace(titleMatch[0], "");
+    }
+  }
+  if (headTags) {
+    result = result.replace("</head>", headTags + "</head>");
+  }
+  return result;
+}
+function injectHeadIntoStream(sourceStream, headTags) {
+  if (!headTags) return sourceStream;
+  let titleTag = "";
+  let rest = headTags;
+  const titleMatch = headTags.match(/<title>[^<]*<\/title>/);
+  if (titleMatch) {
+    titleTag = titleMatch[0];
+    rest = headTags.replace(titleMatch[0], "");
+  }
+  let titleInjected = !titleTag;
+  let headInjected = !rest;
+  return new ReadableStream({
+    async start(controller) {
+      const reader = sourceStream.getReader();
+      let buffer = "";
+      try {
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) break;
+          buffer += decoder.decode(value, { stream: true });
+          if (!titleInjected) {
+            const idx = buffer.indexOf("<title>");
+            const endIdx = buffer.indexOf("</title>", idx);
+            if (idx !== -1 && endIdx !== -1) {
+              controller.enqueue(
+                encoder.encode(buffer.slice(0, idx) + titleTag + buffer.slice(endIdx + 8))
+              );
+              buffer = "";
+              titleInjected = true;
+              continue;
+            }
+          }
+          if (!headInjected) {
+            const idx = buffer.indexOf("</head>");
+            if (idx !== -1) {
+              controller.enqueue(
+                encoder.encode(buffer.slice(0, idx) + rest + buffer.slice(idx))
+              );
+              buffer = "";
+              headInjected = true;
+              continue;
+            }
+          }
+          if (titleInjected && headInjected && buffer) {
+            controller.enqueue(encoder.encode(buffer));
+            buffer = "";
+          }
+        }
+        if (buffer) controller.enqueue(encoder.encode(buffer));
+        controller.close();
+      } catch (err) {
+        controller.error(err);
+      }
+    }
+  });
+}
+function wrapElement(element, layouts, data) {
+  let wrapped = element;
+  for (let i = layouts.length - 1; i >= 0; i--) {
+    wrapped = createElement(layouts[i], null, wrapped);
+  }
+  const json = JSON.stringify(data).replace(/</g, "\\u003c");
+  const dataScript = createElement("script", {
+    id: "__WEIFUWU_DATA__",
+    type: "application/json",
+    dangerouslySetInnerHTML: { __html: json }
+  });
+  return createElement(
+    ServerDataContext.Provider,
+    { value: data },
+    createElement(Fragment, null, wrapped, dataScript)
+  );
+}
+function render(element, layouts, options = {}) {
+  const data = options.data ?? {};
+  const wrapped = wrapElement(element, layouts, data);
+  let html = renderToString(wrapped);
+  const headTags = buildHeadTags(options.head);
+  html = injectHeadIntoHtml(html, headTags);
+  return new Response("<!DOCTYPE html>\n" + html, {
+    status: options.status ?? 200,
+    headers: {
+      "content-type": "text/html; charset=utf-8",
+      ...options.headers
+    }
+  });
+}
+async function renderStream(element, layouts, options = {}) {
+  const data = options.data ?? {};
+  const wrapped = wrapElement(element, layouts, data);
+  const headTags = buildHeadTags(options.head);
+  let stream = await renderToReadableStream(wrapped);
+  stream = injectHeadIntoStream(stream, headTags);
+  const doctype = encoder.encode("<!DOCTYPE html>\n");
+  const combined = new ReadableStream({
+    async start(controller) {
+      controller.enqueue(doctype);
+      try {
+        const reader = stream.getReader();
+        while (true) {
+          const { done, value } = await reader.read();
+          if (done) {
+            controller.close();
+            break;
+          }
+          controller.enqueue(value);
+        }
+      } catch (err) {
+        controller.error(err);
+      }
+    }
+  });
+  return new Response(combined, {
+    status: options.status ?? 200,
+    headers: {
+      "content-type": "text/html; charset=utf-8",
+      "transfer-encoding": "chunked",
+      ...options.headers
+    }
+  });
+}
+
+// src/react/hooks.ts
+import { useContext } from "react";
+function useServerData() {
+  return useContext(ServerDataContext);
+}
+
+// src/react/navigation.ts
+import {
+  createElement as createElement2,
+  createContext as createContext2,
+  useContext as useContext2
+} from "react";
+
+// src/react/error-boundary.ts
+import { Component } from "react";
+var ErrorBoundary = class extends Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    this.props.onError?.(error, info);
+  }
+  render() {
+    if (this.state.error) {
+      return this.props.fallback;
+    }
+    return this.props.children;
+  }
+};
+
+// src/react/navigation.ts
+var RouterContext = createContext2(null);
+RouterContext.displayName = "ClientRouter";
+function useParams() {
+  return useContext2(RouterContext)?.params ?? {};
+}
+function useNavigate() {
+  const ctx = useContext2(RouterContext);
+  if (!ctx) throw new Error("useNavigate() must be used within a client router");
+  return ctx.navigate;
+}
+function useNavigation() {
+  const ctx = useContext2(RouterContext);
+  return { state: ctx?.state ?? "idle" };
+}
+function Link({ href, children, ...props }) {
+  const router = useContext2(RouterContext);
+  const isExternal = href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//") || href.startsWith("mailto:") || href.startsWith("tel:");
+  if (!router || isExternal || props.target !== void 0) {
+    return createElement2("a", { href, ...props }, children);
+  }
+  const handleClick = (e) => {
+    if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
+    if (e.button !== 0) return;
+    e.preventDefault();
+    router.navigate(href);
+  };
+  return createElement2("a", { href, onClick: handleClick, ...props }, children);
+}
+function useRevalidate() {
+  const ctx = useContext2(RouterContext);
+  if (!ctx) throw new Error("useRevalidate() must be used within a client router");
+  return ctx.revalidate;
+}
+function Form({ method = "post", action, children, ...props }) {
+  const router = useContext2(RouterContext);
+  if (!router) {
+    return createElement2("form", { method, action, ...props }, children);
+  }
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const formData = new FormData(form);
+    const url = action || window.location.pathname;
+    const fetchMethod = method === "get" ? "GET" : method.toUpperCase();
+    try {
+      const res = await fetch(url, {
+        method: fetchMethod,
+        body: fetchMethod === "GET" ? void 0 : formData,
+        redirect: "manual"
+      });
+      if (res.status >= 300 && res.status < 400) {
+        const loc = res.headers.get("Location");
+        if (loc) {
+          router.navigate(loc);
+          return;
+        }
+      }
+      await router.revalidate();
+    } catch (err) {
+      console.error("[weifuwu/react] Form submit failed:", err);
+    }
+  };
+  return createElement2(
+    "form",
+    { method, action, ...props, onSubmit: handleSubmit },
+    children
+  );
+}
+
+// src/react/index.ts
+var LAYOUTS_KEY = /* @__PURE__ */ Symbol.for("weifuwu:react:layouts");
+var SETUP_KEY = /* @__PURE__ */ Symbol.for("weifuwu:react:setup");
+function bag(ctx) {
+  return ctx;
+}
+function isDataRequest(req) {
+  try {
+    return new URL(req.url).searchParams.has("_data");
+  } catch {
+    return false;
+  }
+}
+function react(opts = {}) {
+  const layout = opts.layout ?? Fragment2;
+  const mw = (req, ctx, next) => {
+    const b = bag(ctx);
+    const layouts = b[LAYOUTS_KEY] ?? [];
+    b[LAYOUTS_KEY] = layouts;
+    layouts.push(layout);
+    if (!b[SETUP_KEY]) {
+      b[SETUP_KEY] = true;
+      ctx.render = (element, renderOpts) => {
+        if (renderOpts?.data && isDataRequest(req)) {
+          return Promise.resolve(Response.json(renderOpts.data));
+        }
+        return Promise.resolve(render(element, layouts, renderOpts));
+      };
+      ctx.renderStream = (element, renderOpts) => {
+        if (renderOpts?.data && isDataRequest(req)) {
+          return Promise.resolve(Response.json(renderOpts.data));
+        }
+        return renderStream(element, layouts, renderOpts);
+      };
+    }
+    return next(req, ctx);
+  };
+  return mw;
+}
+export {
+  ErrorBoundary,
+  Form,
+  Link,
+  ServerDataContext,
+  react,
+  useNavigate,
+  useNavigation,
+  useParams,
+  useRevalidate,
+  useServerData
+};

package/dist/react/navigation.d.ts

@@ -0,0 +1,63 @@
+/**
+ * Shared navigation primitives — usable on both server and client.
+ *
+ * - Link: renders <a> on server (no RouterContext), SPA <a> on client
+ * - useParams / useNavigate: client hooks (throw friendly error on server)
+ */
+import { type ReactNode, type ReactElement } from 'react';
+export type NavigationState = 'idle' | 'loading';
+export interface RouterContextValue {
+    params: Record<string, string>;
+    navigate: (url: string) => Promise<void>;
+    revalidate: () => Promise<void>;
+    state: NavigationState;
+}
+export declare const RouterContext: import("react").Context<RouterContextValue | null>;
+/** Get current route params. Returns {} when no router context (SSR / outside router). */
+export declare function useParams(): Record<string, string>;
+/** Programmatic navigation. Throws if used outside a client router. */
+export declare function useNavigate(): (url: string) => Promise<void>;
+/** Navigation state — 'idle' or 'loading'. Use for progress bars / disabled states. */
+export declare function useNavigation(): {
+    state: NavigationState;
+};
+export interface LinkProps {
+    href: string;
+    children: ReactNode;
+    [key: string]: unknown;
+}
+/**
+ * Navigation link.
+ *
+ * When inside a client router context: intercepts clicks for SPA navigation.
+ * When outside (SSR / plain React): renders a plain <a> tag.
+ *
+ * Both cases produce identical DOM output — safe for hydration.
+ */
+export declare function Link({ href, children, ...props }: LinkProps): ReactElement;
+export interface FormProps {
+    method?: 'get' | 'post' | 'put' | 'delete' | 'patch';
+    action?: string;
+    children: ReactNode;
+    [key: string]: unknown;
+}
+/** Revalidate the current route's data. */
+export declare function useRevalidate(): () => Promise<void>;
+/**
+ * SPA form — submits via fetch instead of full page reload.
+ *
+ * On submit:
+ * 1. Serializes form data via FormData
+ * 2. fetch(action, { method, body })
+ * 3. On redirect (3xx): SPA-navigates to the Location header
+ * 4. On success: revalidates the current route's loader
+ *
+ * On the server (no RouterContext): renders a plain <form>.
+ */
+export declare function Form({ method, action, children, ...props }: FormProps): ReactElement;
+export declare function matchPath(pathname: string, pattern: string): Record<string, string> | null;
+export { useServerData } from './hooks.ts';
+export { ServerDataContext } from './context.ts';
+export { ErrorBoundary } from './error-boundary.ts';
+export type { ErrorBoundaryProps } from './error-boundary.ts';
+export { defineRoute } from './route-utils.ts';

package/dist/react/navigation.js

@@ -0,0 +1,154 @@
+// src/react/navigation.ts
+import {
+  createElement,
+  createContext as createContext2,
+  useContext as useContext2
+} from "react";
+
+// src/react/hooks.ts
+import { useContext } from "react";
+
+// src/react/context.ts
+import { createContext } from "react";
+var CTX_KEY = /* @__PURE__ */ Symbol.for("weifuwu.react.ServerDataContext");
+function getServerDataContext() {
+  const globalStore = globalThis;
+  if (globalStore[CTX_KEY]) return globalStore[CTX_KEY];
+  const ctx = createContext({});
+  ctx.displayName = "ServerData";
+  globalStore[CTX_KEY] = ctx;
+  return ctx;
+}
+var ServerDataContext = getServerDataContext();
+
+// src/react/hooks.ts
+function useServerData() {
+  return useContext(ServerDataContext);
+}
+
+// src/react/error-boundary.ts
+import { Component } from "react";
+var ErrorBoundary = class extends Component {
+  state = { error: null };
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    this.props.onError?.(error, info);
+  }
+  render() {
+    if (this.state.error) {
+      return this.props.fallback;
+    }
+    return this.props.children;
+  }
+};
+
+// src/react/route-utils.ts
+function defineRoute(config) {
+  return config;
+}
+
+// src/react/navigation.ts
+var RouterContext = createContext2(null);
+RouterContext.displayName = "ClientRouter";
+function useParams() {
+  return useContext2(RouterContext)?.params ?? {};
+}
+function useNavigate() {
+  const ctx = useContext2(RouterContext);
+  if (!ctx) throw new Error("useNavigate() must be used within a client router");
+  return ctx.navigate;
+}
+function useNavigation() {
+  const ctx = useContext2(RouterContext);
+  return { state: ctx?.state ?? "idle" };
+}
+function Link({ href, children, ...props }) {
+  const router = useContext2(RouterContext);
+  const isExternal = href.startsWith("http://") || href.startsWith("https://") || href.startsWith("//") || href.startsWith("mailto:") || href.startsWith("tel:");
+  if (!router || isExternal || props.target !== void 0) {
+    return createElement("a", { href, ...props }, children);
+  }
+  const handleClick = (e) => {
+    if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) return;
+    if (e.button !== 0) return;
+    e.preventDefault();
+    router.navigate(href);
+  };
+  return createElement("a", { href, onClick: handleClick, ...props }, children);
+}
+function useRevalidate() {
+  const ctx = useContext2(RouterContext);
+  if (!ctx) throw new Error("useRevalidate() must be used within a client router");
+  return ctx.revalidate;
+}
+function Form({ method = "post", action, children, ...props }) {
+  const router = useContext2(RouterContext);
+  if (!router) {
+    return createElement("form", { method, action, ...props }, children);
+  }
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const formData = new FormData(form);
+    const url = action || window.location.pathname;
+    const fetchMethod = method === "get" ? "GET" : method.toUpperCase();
+    try {
+      const res = await fetch(url, {
+        method: fetchMethod,
+        body: fetchMethod === "GET" ? void 0 : formData,
+        redirect: "manual"
+      });
+      if (res.status >= 300 && res.status < 400) {
+        const loc = res.headers.get("Location");
+        if (loc) {
+          router.navigate(loc);
+          return;
+        }
+      }
+      await router.revalidate();
+    } catch (err) {
+      console.error("[weifuwu/react] Form submit failed:", err);
+    }
+  };
+  return createElement(
+    "form",
+    { method, action, ...props, onSubmit: handleSubmit },
+    children
+  );
+}
+function matchPath(pathname, pattern) {
+  const patParts = pattern.split("/").filter(Boolean);
+  const pathParts = pathname.split("/").filter(Boolean);
+  const hasWildcard = patParts[patParts.length - 1] === "*";
+  if (!hasWildcard && patParts.length !== pathParts.length) return null;
+  if (hasWildcard && pathParts.length < patParts.length - 1) return null;
+  const params = {};
+  for (let i = 0; i < patParts.length; i++) {
+    if (patParts[i] === "*") {
+      params["*"] = pathParts.slice(i).join("/");
+      break;
+    }
+    if (patParts[i].startsWith(":")) {
+      params[patParts[i].slice(1)] = decodeURIComponent(pathParts[i]);
+    } else if (patParts[i] !== pathParts[i]) {
+      return null;
+    }
+  }
+  return params;
+}
+export {
+  ErrorBoundary,
+  Form,
+  Link,
+  RouterContext,
+  ServerDataContext,
+  defineRoute,
+  matchPath,
+  useNavigate,
+  useNavigation,
+  useParams,
+  useRevalidate,
+  useServerData
+};

package/dist/react/render.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement, type ComponentType, type ReactNode } from 'react';
+import type { RenderOptions } from './types.ts';
+export declare function render(element: ReactElement, layouts: ComponentType<{
+    children: ReactNode;
+}>[], options?: RenderOptions): Response;
+export declare function renderStream(element: ReactElement, layouts: ComponentType<{
+    children: ReactNode;
+}>[], options?: RenderOptions): Promise<Response>;

package/dist/react/route-utils.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentType } from 'react';
+/**
+ * Type-safe route definition.
+ *
+ * Captures the loader return type as a phantom `$data` field.
+ * Use with `useServerData<typeof route.$data>()` for auto-complete.
+ *
+ * @example
+ * ```ts
+ * const userRoute = defineRoute({
+ *   path: '/users/:id',
+ *   component: UserPage,
+ *   loader: (params) => fetch(`/users/${params.id}?_data`).then(r => r.json()),
+ * })
+ * // userRoute.$data = { user: { id: number; name: string; ... } }
+ *
+ * // In the component:
+ * const { user } = useServerData<typeof userRoute.$data>()
+ * ```
+ */
+export declare function defineRoute<T extends Record<string, unknown> = Record<string, unknown>>(config: {
+    path: string;
+    component: ComponentType;
+    loader: (params: Record<string, string>) => Promise<T>;
+}): {
+    path: string;
+    component: ComponentType;
+    loader: (params: Record<string, string>) => Promise<T>;
+    /** Phantom type — use with `typeof route.$data` for `useServerData`. */
+    $data: T;
+};

package/dist/react/types.d.ts

@@ -0,0 +1,46 @@
+import type { ReactElement, ComponentType, ReactNode } from 'react';
+import type { Context, Middleware } from '../types.ts';
+declare module '../types.ts' {
+    interface Context {
+        /** Server-render a React element to HTML (renderToString). */
+        render(element: ReactElement, opts?: RenderOptions): Promise<Response>;
+        /** Streaming server-render a React element to HTML (renderToReadableStream). */
+        renderStream(element: ReactElement, opts?: RenderOptions): Promise<Response>;
+    }
+}
+export interface HeadOptions {
+    /** Page title — injected as <title>. */
+    title?: string;
+    /** Meta tags: name → content. */
+    meta?: Record<string, string>;
+    /** Link tags (stylesheet, canonical, etc). */
+    links?: Array<{
+        rel: string;
+        href: string;
+        [key: string]: string;
+    }>;
+    /** Additional <script> tags in <head>. */
+    scripts?: Array<{
+        src?: string;
+        [key: string]: string | undefined;
+    }>;
+}
+export interface RenderOptions {
+    /** Data serialized to client — available via useServerData(). */
+    data?: Record<string, unknown>;
+    /** Head tags to inject into <head>. Supported in render() and renderStream(). */
+    head?: HeadOptions;
+    status?: number;
+    headers?: Record<string, string>;
+}
+export interface ReactOptions {
+    /** Layout component wrapping rendered content. Multiple react() calls via mount accumulate layouts from inner → outer. */
+    layout?: ComponentType<{
+        children: ReactNode;
+    }>;
+}
+export interface ReactInjected {
+    render: (element: ReactElement, opts?: RenderOptions) => Promise<Response>;
+    renderStream: (element: ReactElement, opts?: RenderOptions) => Promise<Response>;
+}
+export type ReactMiddleware = Middleware<Context, Context & ReactInjected>;

package/package.json

@@ -1,12 +1,24 @@
 {
   "name": "weifuwu",
   "type": "module",
-  "version": "0.30.2",
+  "version": "0.31.1",
   "description": "Web-standard HTTP microframework for Node.js — (req, ctx) => Response",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./dist/react/index.d.ts",
+      "default": "./dist/react/index.js"
+    },
+    "./react/client": {
+      "types": "./dist/react/client.d.ts",
+      "default": "./dist/react/client.js"
+    },
+    "./react/navigation": {
+      "types": "./dist/react/navigation.d.ts",
+      "default": "./dist/react/navigation.js"
     }
   },
   "files": [
@@ -29,11 +41,28 @@
     "postgres": "^3.4.9",
     "ws": "^8"
   },
+  "peerDependencies": {
+    "react": "19",
+    "react-dom": "19"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "react-dom": {
+      "optional": true
+    }
+  },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
     "@types/node": "^25",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "@types/ws": "^8",
-    "@eslint/js": "^10.0.1",
+    "esbuild": "^0.28.1",
     "globals": "^17.7.0",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "typescript-eslint": "^8.62.1"
   },
   "sideEffects": false