Function reactive

  • reactive<T>(fn, options?): ((arg0: any[][]) => Promise<T>)

  • Universal reactive wrapper that handles SSR, hydration, and async operations.

    This function wraps handler functions to provide automatic SSR data injection, fetch interception, client-side hydration, and async operation management. The same wrapped function runs on both server and client with different behavior.

    Server Behavior:

    • Intercepts fetch calls and caches responses
    • Injects SSR data into HTML output automatically
    • Tracks async operations for completion

    Client Behavior:

    • Uses cached SSR data for initial hydration
    • Falls back to normal fetch after hydration
    • Manages reactive state updates

    Isomorphic: Same code runs everywhere with environment-specific optimizations. Automatic: No manual SSR/hydration setup required. Performance: Eliminates server round-trips during hydration.

    Type Parameters

    • T

    Parameters

    • fn: ((arg0: any[][]) => T | Promise<T>)

      Handler function to make reactive

        • (arg0): T | Promise<T>

        • Parameters

          • arg0: any[][]

          Returns T | Promise<T>

    • Optionaloptions: {
          maxSettleAttempts: number;
          timeout: number;
      } = {}

      Configuration options

      • maxSettleAttempts: number

        Maximum attempts to settle all async operations

      • timeout: number

        Maximum time to wait for async operations (ms)

    Returns ((arg0: any[][]) => Promise<T>)

    Wrapped function that handles SSR/hydration

      • (arg0): Promise<T>

      • Parameters

        • arg0: any[][]

        Returns Promise<T>

    Example

    // Express/Wings route handler
    import { Router } from "@raven-js/wings";
    import { html } from "@raven-js/beak";
    import { reactive, signal } from "@raven-js/reflex";

    const router = new Router();

    router.get("/todos", reactive(async (ctx) => {
      const todos = signal([]);

      // This fetch works on server AND client
      const response = await fetch("/api/todos");
      const data = await response.json();
      todos.set(data);

      return ctx.html(html`
        <html>
          <head><title>Todos</title></head>
          <body>
            <h1>Todo List</h1>
            <ul>
              ${todos().map(todo => html`<li>${todo.title}</li>`)}
            </ul>
            <script src="/client.js"></script>
          </body>
        </html>
      `);
    }));

    Example

    // Pure Node.js usage
    import { createServer } from "http";
    import { reactive, signal, effect } from "@raven-js/reflex";

    const handler = reactive(async () => {
      const data = signal("loading...");

      // Automatic fetch interception and caching
      const result = await fetch("https://api.example.com/data");
      data.set(await result.text());

      return \`<html><body><h1>\${data()}</h1></body></html>\`;
    });

    createServer((req, res) => {
      handler().then(html => {
        res.writeHead(200, { "Content-Type": "text/html" });
        res.end(html);
      });
    }).listen(3000);

Settings

Member Visibility