weifuwu 0.30.2 → 0.31.1

package/dist/react/client.js

@@ -0,0 +1,300 @@
+// src/react/client.ts
+import {
+  createElement as createElement2,
+  useEffect,
+  useCallback,
+  useSyncExternalStore
+} from "react";
+import { hydrateRoot } from "react-dom/client";
+
+// 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/navigation.ts
+import {
+  createElement,
+  createContext as createContext2,
+  useContext as useContext2
+} from "react";
+
+// src/react/hooks.ts
+import { useContext } from "react";
+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;
+}
+
+// src/react/client.ts
+function readInitialData() {
+  if (typeof document === "undefined") return {};
+  const el = document.getElementById("__WEIFUWU_DATA__");
+  if (el?.textContent) {
+    try {
+      return JSON.parse(el.textContent);
+    } catch {
+    }
+  }
+  return {};
+}
+function createClientRouter(routes) {
+  function findRoute(pathname) {
+    for (const route of routes) {
+      const params = matchPath(pathname, route.path);
+      if (params) return { route, params };
+    }
+    return null;
+  }
+  let state = {
+    location: typeof window !== "undefined" ? window.location.pathname : "/",
+    data: readInitialData(),
+    navId: 0,
+    state: "idle"
+  };
+  const listeners = /* @__PURE__ */ new Set();
+  function getSnapshot() {
+    return state;
+  }
+  function subscribe(fn) {
+    listeners.add(fn);
+    return () => {
+      listeners.delete(fn);
+    };
+  }
+  function emit() {
+    listeners.forEach((fn) => fn());
+  }
+  async function navigate(url, { push = true } = {}) {
+    const match = findRoute(url);
+    if (!match) {
+      window.location.href = url;
+      return;
+    }
+    const id = state.navId + 1;
+    state = { ...state, navId: id, state: match.route.loader ? "loading" : "idle" };
+    emit();
+    if (match.route.loader) {
+      try {
+        const newData = await match.route.loader(match.params);
+        if (id < state.navId) return;
+        state = { ...state, data: newData, state: "idle" };
+      } catch (err) {
+        console.error("[weifuwu/react] loader failed:", err);
+        state = { ...state, state: "idle" };
+        emit();
+        return;
+      }
+    }
+    if (push) history.pushState({ weifuwu: true }, "", url);
+    state = { ...state, location: url, state: "idle" };
+    emit();
+  }
+  function RouterApp() {
+    const { location, data, state: navState } = useSyncExternalStore(
+      subscribe,
+      getSnapshot
+    );
+    const match = findRoute(location);
+    useEffect(() => {
+      const handler = () => navigate(window.location.pathname, { push: false });
+      window.addEventListener("popstate", handler);
+      return () => window.removeEventListener("popstate", handler);
+    }, []);
+    const ctxNavigate = useCallback(
+      (url) => navigate(url, { push: true }),
+      []
+    );
+    const ctxRevalidate = useCallback(async () => {
+      const currentMatch = findRoute(window.location.pathname);
+      if (currentMatch?.route.loader) {
+        state = { ...state, state: "loading" };
+        emit();
+        try {
+          const newData = await currentMatch.route.loader(currentMatch.params);
+          state = { ...state, data: newData, state: "idle" };
+          emit();
+        } catch (err) {
+          console.error("[weifuwu/react] revalidate failed:", err);
+          state = { ...state, state: "idle" };
+          emit();
+        }
+      }
+    }, []);
+    const ctxValue = {
+      params: match?.params ?? {},
+      navigate: ctxNavigate,
+      revalidate: ctxRevalidate,
+      state: navState
+    };
+    const content = match ? createElement2(match.route.component) : createElement2("div", null, "Page not found");
+    return createElement2(
+      RouterContext.Provider,
+      { value: ctxValue },
+      createElement2(
+        ServerDataContext.Provider,
+        { value: data },
+        content
+      )
+    );
+  }
+  function RouterLink(props) {
+    return createElement2(Link, props);
+  }
+  return {
+    App: RouterApp,
+    Link: RouterLink,
+    useParams,
+    navigate: (url) => navigate(url, { push: true })
+  };
+}
+function hydrate(App, opts) {
+  const container = opts?.container ?? document.getElementById("root");
+  if (!container) {
+    throw new Error(
+      "weifuwu/react: hydrate() \u2014 no container element found."
+    );
+  }
+  const serverData = readInitialData();
+  hydrateRoot(
+    container,
+    createElement2(
+      ServerDataContext.Provider,
+      { value: serverData },
+      createElement2(App)
+    )
+  );
+}
+export {
+  ErrorBoundary,
+  Form,
+  Link,
+  createClientRouter,
+  defineRoute,
+  hydrate,
+  useNavigate,
+  useNavigation,
+  useParams,
+  useRevalidate,
+  useServerData
+};

package/dist/react/context.d.ts

@@ -0,0 +1,2 @@
+import { type Context } from 'react';
+export declare const ServerDataContext: Context<Record<string, unknown>>;

package/dist/react/error-boundary.d.ts

@@ -0,0 +1,31 @@
+/**
+ * SSR-safe error boundary.
+ *
+ * Catches React render errors on both server and client:
+ * - Server (SSR): renders fallback HTML instead of crashing
+ * - Client (hydration): catches errors, shows fallback
+ *
+ * Usage:
+ * ```tsx
+ * <ErrorBoundary fallback={<div>Something went wrong</div>}>
+ *   <UserProfile />
+ * </ErrorBoundary>
+ * ```
+ */
+import { Component, type ReactNode, type ErrorInfo } from 'react';
+export interface ErrorBoundaryProps {
+    fallback: ReactNode;
+    children: ReactNode;
+    /** Called when an error is caught (both SSR and client). */
+    onError?: (error: Error, info: ErrorInfo) => void;
+}
+interface ErrorBoundaryState {
+    error: Error | null;
+}
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    state: ErrorBoundaryState;
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    render(): ReactNode;
+}
+export {};

package/dist/react/hooks.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Access server-loaded data in any component.
+ * On the server, reads from the request-scoped ServerDataContext.
+ * On the client (after hydration), reads from the same context populated by hydrate().
+ */
+export declare function useServerData<T extends Record<string, unknown> = Record<string, unknown>>(): T;

package/dist/react/index.d.ts

@@ -0,0 +1,28 @@
+import type { ReactOptions, ReactMiddleware } from './types.ts';
+/**
+ * React SSR middleware.
+ *
+ * Injects ctx.render() and ctx.renderStream() for server-side rendering
+ * React components to HTML. Supports layout composition via mount nesting.
+ *
+ * @example
+ * ```ts
+ * app.use(react({
+ *   layout: ({ children }) => (
+ *     <html><body><div id="root">{children}</div></body></html>
+ *   ),
+ * }))
+ *
+ * app.get('/', async (req, ctx) => {
+ *   return ctx.render(<Home />, { data: { title: 'Home' } })
+ * })
+ * ```
+ */
+export declare function react(opts?: ReactOptions): ReactMiddleware;
+export { useServerData } from './hooks.ts';
+export { ServerDataContext } from './context.ts';
+export { Link, useParams, useNavigate, useRevalidate, Form, useNavigation } from './navigation.ts';
+export type { LinkProps, FormProps, NavigationState } from './navigation.ts';
+export { ErrorBoundary } from './error-boundary.ts';
+export type { ErrorBoundaryProps } from './error-boundary.ts';
+export type { ReactOptions, RenderOptions, ReactInjected } from './types.ts';