@lazarv/react-server 0.0.0-experimental-43e79e6-20230928

package/react-server.d.ts

@@ -0,0 +1,209 @@
+declare module "@lazarv/react-server" {
+  import type { RequestContextExtensions } from "@hattip/compose";
+  import type { CookieSerializeOptions } from "@hattip/cookie";
+
+  export function server$<T extends (...args: any[]) => any>(action: T): T;
+  export function cache$<T extends React.FC>(
+    Component: T,
+    ttl?: number | true
+  ): T;
+  export function redirect(url: string, status?: number): void;
+
+  export function useRequest(): Request;
+  export function useResponse(): Response;
+  export function useUrl(): URL;
+  export function useFormData(): FormData;
+  export function rewrite(pathname: string): void;
+
+  export function revalidate(key?: string): void;
+  export function status(status?: number, statusText?: string): void;
+  export function headers(headers?: Record<string, string>): void;
+
+  export type Cookies = RequestContextExtensions["cookie"];
+  export function cookie(): Cookies;
+  export function setCookie(
+    name: string,
+    value: string,
+    options?: CookieSerializeOptions
+  ): void;
+  export function deleteCookie(
+    name: string,
+    options?: CookieSerializeOptions
+  ): void;
+}
+
+declare module "@lazarv/react-server/client" {
+  export type ReactServerClientContext = {
+    registerOutlet(outlet: string, url: string): void;
+    refresh(outlet?: string): Promise<void>;
+    prefetch(
+      url: string,
+      options?: { outlet?: string; ttl?: number }
+    ): Promise<void>;
+    navigate(
+      url: string,
+      options?: { outlet?: string; push?: boolean; rollback?: number }
+    ): Promise<void>;
+    replace(
+      url: string,
+      options?: { outlet?: string; rollback?: number }
+    ): Promise<void>;
+    subscribe(
+      url: string,
+      listener: (
+        to: string,
+        done?: (err: unknown | null, result: unknown) => void
+      ) => void
+    ): () => void;
+    getFlightResponse(): Promise<Response | null>;
+  };
+  export function useClient(): ReactServerClientContext;
+}
+
+declare module "@lazarv/react-server/config" {
+  export type ReactServerConfig = any;
+  export function loadConfig<T extends Record<string, unknown>>(
+    initialConfig: T
+  ): Promise<ReactServerConfig>;
+  export function defineConfig<T extends Record<string, unknown>>(
+    config: T
+  ): ReactServerConfig;
+
+  export function forRoot(config?: ReactServerConfig): ReactServerConfig;
+  export function forChild(config?: ReactServerConfig): ReactServerConfig;
+}
+
+declare module "@lazarv/react-server/error-boundary" {
+  import type { ErrorBoundaryProps } from "react-error-boundary";
+
+  export type ReactServerErrorBoundaryProps = React.PropsWithChildren<
+    Omit<ErrorBoundaryProps, "fallback"> & { fallback: React.ReactNode }
+  >;
+  const ErrorBoundary: React.FC<ReactServerErrorBoundaryProps>;
+  export default ErrorBoundary;
+}
+
+declare module "@lazarv/react-server/memory-cache" {
+  export interface ReactServerCache {
+    get<T = unknown>(keys: string[]): Promise<T | undefined>;
+    set<T = unknown>(keys: string[], value: T): Promise<void>;
+    has(keys: string[]): Promise<boolean>;
+    setExpiry(keys: string[], ttl: number): Promise<void>;
+    hasExpiry(keys: string[], ttl: number): Promise<boolean>;
+    delete(keys: string[]): Promise<void>;
+  }
+
+  export class MemoryCache implements ReactServerCache {
+    get<T = unknown>(keys: string[]): Promise<T | undefined>;
+    set<T = unknown>(keys: string[], value: T): Promise<void>;
+    has(keys: string[]): Promise<boolean>;
+    setExpiry(keys: string[], ttl: number): Promise<void>;
+    hasExpiry(keys: string[], ttl: number): Promise<boolean>;
+    delete(keys: string[]): Promise<void>;
+  }
+
+  export function useCache<T>(
+    keys: string[],
+    value: (() => Promise<T>) | T,
+    ttl?: number,
+    force?: boolean
+  ): Promise<T>;
+}
+
+declare module "@lazarv/react-server/navigation" {
+  import type { ReactServerRouting } from "@lazarv/react-server/router";
+
+  export const Link: React.FC<
+    React.PropsWithChildren<{
+      to: ReactServerRouting["path"];
+      target?: string;
+      transition?: boolean;
+      push?: boolean;
+      replace?: boolean;
+      prefetch?: boolean;
+      ttl?: number;
+      rollback?: number;
+      onNavigate?: () => void;
+      onError?: (error: unknown) => void;
+    }> &
+      React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLAnchorElement>,
+        HTMLAnchorElement
+      >
+  >;
+  export const Refresh: React.FC<
+    React.PropsWithChildren<{
+      url?: string;
+      outlet?: string;
+      transition?: boolean;
+      prefetch?: boolean;
+      ttl?: number;
+      onRefresh?: () => void;
+      onError?: (error: unknown) => void;
+    }> &
+      React.DetailedHTMLProps<
+        React.HTMLAttributes<HTMLAnchorElement>,
+        HTMLAnchorElement
+      >
+  >;
+}
+
+declare module "@lazarv/react-server/remote-component" {
+  const RemoteComponent: React.FC<{
+    url: string;
+    outlet?: string;
+    ttl?: number;
+    request?: RequestInit;
+  }>;
+  export default RemoteComponent;
+}
+
+declare module "@lazarv/react-server/router" {
+  interface ReactServerRouting {
+    path: string;
+  }
+
+  export type RouteParams = Record<string, string | string[]>;
+  export type RouteMatchers = Record<string, (value: string) => boolean>;
+
+  export const ClientOnly: React.FC<React.PropsWithChildren>;
+  export const Route: React.FC<
+    React.PropsWithChildren<{
+      path: string;
+      exact?: boolean;
+      matchers?: RouteMatchers;
+      element?: React.ReactElement;
+      render?: (
+        props: React.PropsWithChildren<RouteParams>
+      ) => React.ReactElement;
+      standalone?: boolean;
+      remote?: boolean;
+      fallback?: boolean;
+    }>
+  >;
+
+  export type ActionState<T, E> = {
+    formData: FormData | null;
+    data: T | null;
+    error: E | null;
+    actionId: string | null;
+  };
+  export function useActionState<
+    T extends (
+      ...args: any[]
+    ) => T extends (...args: any[]) => infer R ? R : any,
+    E = Error,
+  >(action: T): ActionState<ReturnType<T>, E>;
+
+  export type MatchOptions = {
+    exact?: boolean;
+    fallback?: boolean;
+    matchers?: RouteMatchers;
+  };
+  export function useMatch<T = RouteParams>(
+    path: string,
+    options?: MatchOptions
+  ): T | null;
+
+  export function useParams<T = RouteParams>(): T;
+}

package/server/ErrorBoundary.jsx

@@ -0,0 +1,14 @@
+import ErrorBoundary from "@lazarv/react-server/client/ErrorBoundary.jsx";
+import { Suspense } from "react";
+
+export default async function ReactServerErrorBoundary({
+  fallback = null,
+  children,
+  ...props
+}) {
+  return (
+    <Suspense fallback={fallback}>
+      <ErrorBoundary {...props}>{children}</ErrorBoundary>
+    </Suspense>
+  );
+}

package/server/RemoteComponent.jsx

@@ -0,0 +1,210 @@
+import { useCache } from "@lazarv/react-server/memory-cache";
+import { server$ } from "@lazarv/react-server/server/actions.mjs";
+import { context$, getContext } from "@lazarv/react-server/server/context.mjs";
+import { createFromFetch } from "react-server-dom-webpack/client.edge";
+
+import ReactServerComponent from "../client/ReactServerComponent.jsx";
+import { HTTP_CONTEXT } from "./symbols.mjs";
+
+export const REMOTE_CACHE = Symbol.for("REMOTE_CACHE");
+
+const streamOptions = ({ url, ttl, outlet, request }) => ({
+  async callServer(...args) {
+    const [id, [data]] = args;
+    const formData = new FormData();
+    Object.entries(data).forEach(([k, v]) => {
+      if (!k.startsWith("$ACTION_ID_")) {
+        formData.append(k, v);
+      }
+    });
+    formData.append(`$ACTION_ID_${id}`, "");
+    return useCache(
+      [url, REMOTE_CACHE],
+      () =>
+        getRemoteFlightResponse({
+          url,
+          ttl,
+          request: {
+            method: "POST",
+            body: formData,
+            headers: {
+              ...(request?.headers ?? {}),
+              accept: "text/x-component;standalone;remote",
+              outlet,
+            },
+          },
+        }),
+      ttl,
+      true
+    );
+  },
+});
+function proxyServerReference(parent, key, value, url, outlet) {
+  if (!value) return value;
+  else if (Array.isArray(value)) {
+    value.forEach((v, k) => proxyServerReference(value, k, v, url, outlet));
+  } else if (
+    value &&
+    typeof value === "object" &&
+    value.$$typeof?.toString() !== "Symbol(react.server_context)"
+  ) {
+    Object.entries(value).forEach(([k, v]) =>
+      proxyServerReference(value, k, v, url, outlet)
+    );
+  } else if (
+    typeof value === "function" &&
+    typeof value.$$FORM_ACTION === "function" &&
+    !value.$$remote_server_action
+  ) {
+    const proxy = server$((...args) => {
+      value(...args);
+    });
+    proxy.$$bound = [
+      {
+        __react_server_remote_component_url__: url,
+        __react_server_remote_component_outlet__: outlet,
+      },
+    ];
+    proxy.$$remote_server_action = true;
+    parent[key] = proxy;
+  }
+}
+async function getRemoteFlightResponse({ url, ttl, outlet, request = {} }) {
+  const Component = createFromFetch(
+    fetch(url, {
+      ...request,
+      headers: {
+        ...(request?.headers ?? {}),
+        accept: "text/x-component;standalone;remote",
+        outlet,
+      },
+    }),
+    streamOptions({ url, ttl, outlet, request })
+  );
+  const promise = new Promise((resolve, reject) => {
+    Component.then((value) => {
+      try {
+        proxyServerReference(null, null, value, url, outlet);
+      } catch (e) {
+        reject(e);
+      }
+      resolve(value);
+    });
+  });
+  promise._response = Component._response;
+  return Component;
+}
+
+function FlightComponent({ url, ttl = Infinity, outlet = null, request = {} }) {
+  const key = `__react_server_remote_component_outlet_${outlet}__`;
+  const accept = getContext(HTTP_CONTEXT).request.headers.get("accept");
+  const Component = useCache(
+    [url, accept, REMOTE_CACHE],
+    async () => {
+      const res = await fetch(url, {
+        ...request,
+        headers: {
+          ...(request?.headers ?? {}),
+          accept: `${accept};standalone;remote`,
+          outlet,
+        },
+      });
+
+      if (!res.ok) {
+        const [message, ...stack] = (await res.text()).split("\n");
+        const remoteError = new Error(
+          `Failed to load remote component: ${message.replace(
+            /^Error:\s*/,
+            ""
+          )}`
+        );
+        remoteError.stack = stack.map((l) => l.trim()).join("\n");
+        throw remoteError;
+      }
+
+      const reader = res.body.getReader();
+      const Component = { outlet, html: "", rsc: "" };
+
+      const decoder = new TextDecoder();
+      let done = false;
+      let value = "";
+      while (!done) {
+        const { value: chunk, done: _done } = await reader.read();
+        done = _done;
+        const str = decoder.decode(chunk);
+        value += str;
+        const lines = value.split("\n");
+        value = lines.pop();
+        for (const line of lines) {
+          if (/^[0-9a-f]+:/.test(line)) {
+            Component.rsc += line + "\n";
+            if (/^0:/.test(line)) {
+              if (!done) {
+                Component.stream = new ReadableStream({
+                  async start(controller) {
+                    let done = false;
+                    let value = "";
+                    let html = "";
+                    let rsc = "";
+
+                    while (!done) {
+                      const { value: chunk, done: _done } = await reader.read();
+                      done = _done;
+                      if (chunk) {
+                        const str = decoder.decode(chunk);
+                        value += str;
+                        const lines = value.split("\n");
+                        value = lines.pop();
+                        for (const line of lines) {
+                          if (/^[0-9a-f]+:/.test(line)) {
+                            rsc += line + "\n";
+                          } else {
+                            html += line;
+                          }
+                        }
+                        if (!value && html && rsc) {
+                          controller.enqueue({ outlet, html, rsc });
+                          html = "";
+                          rsc = "";
+                        }
+                      }
+                    }
+
+                    controller.enqueue({ outlet, html: html || value, rsc });
+                    controller.close();
+                  },
+                });
+              }
+              return Component;
+            }
+          } else {
+            Component.html += line;
+          }
+        }
+      }
+      if (/^[0-9a-f]+:/.test(value)) {
+        Component.rsc += value + "\n";
+      } else {
+        Component.html += value;
+      }
+      Component.outlet = outlet;
+      return Component;
+    },
+    ttl
+  );
+  context$(key, Component);
+  return <>{key}</>;
+}
+
+export default function RemoteComponent({
+  url,
+  outlet = null,
+  ttl = Infinity,
+  request = {},
+}) {
+  return (
+    <ReactServerComponent url={url} outlet={outlet} standalone remote>
+      <FlightComponent url={url} ttl={ttl} outlet={outlet} request={request} />
+    </ReactServerComponent>
+  );
+}

package/server/Route.jsx

@@ -0,0 +1,108 @@
+import { ParamsContext } from "@lazarv/react-server/client/Params.mjs";
+import { context$, getContext } from "@lazarv/react-server/server/context.mjs";
+import { useRequest, useUrl } from "@lazarv/react-server/server/request.mjs";
+import { ROUTE_MATCH } from "@lazarv/react-server/server/symbols.mjs";
+
+export function useMatch(path, options = {}) {
+  if (path === "*" || options.fallback) {
+    if (getContext(ROUTE_MATCH)) {
+      return null;
+    }
+    return {};
+  }
+
+  const paramToArray = new Set();
+  const paramMatch = new Set();
+  const { pathname: rawPathname } = useUrl();
+  const pathname = decodeURIComponent(rawPathname);
+  const regexp =
+    path instanceof RegExp
+      ? path
+      : new RegExp(
+          path === "/" && !options.exact
+            ? "^\\/(.*)$"
+            : `^${path
+                .replace(/\[u\+([^\]]+)\]/g, (_, code) => `\\u${code}`)
+                .replace(/\/?\[(\[?[^\]]+\]?)\]/g, (_, name) => {
+                  let optional = false;
+                  if (name[0] === "[" && name[name.length - 1] === "]") {
+                    name = name.slice(1, -1);
+                    optional = true;
+                  }
+                  if (name.startsWith("...")) {
+                    name = name.slice(3);
+                    paramToArray.add(name);
+                    return `(\\/${optional ? "?" : ""}(?<${name}>.*))${
+                      optional ? "*" : "+"
+                    }`;
+                  }
+                  if (name.includes("=")) {
+                    const [paramName, matcher] = name.split("=");
+                    name = paramName;
+                    paramMatch.add({ name, matcher });
+                  }
+                  return `\\/?(?<${name}>[^/]+)${optional ? "?" : ""}`;
+                })}${options.exact ? "$" : "(\\/([^/]+)?)*$"}`
+        );
+
+  const match = pathname.match(regexp);
+  if (!match) return null;
+
+  for (const { name, matcher } of paramMatch.values()) {
+    if (!options.matchers?.[matcher]?.(match.groups[name])) return null;
+  }
+
+  return {
+    ...match.groups,
+    ...Array.from(paramToArray.values()).reduce((obj, key) => {
+      obj[key] = match.groups[key]?.split("/") ?? [];
+      return obj;
+    }, {}),
+  };
+}
+
+export default function Route({
+  path,
+  exact,
+  matchers,
+  element,
+  render,
+  standalone,
+  remote,
+  fallback,
+  children,
+}) {
+  const { headers } = useRequest();
+  const params = useMatch(path, { exact, matchers, fallback });
+
+  if (!params) return null;
+
+  if (standalone !== false) {
+    context$(ROUTE_MATCH, params);
+  }
+
+  const accept = headers.get("accept");
+  const acceptStandalone = accept?.includes(";standalone");
+  const acceptRemote = accept?.includes(";remote");
+
+  if (acceptStandalone && standalone === false) return <>{children}</>;
+  if ((remote === false && acceptRemote) || (remote === true && !acceptRemote))
+    return null;
+
+  const hasParams = Reflect.ownKeys(params).length > 0;
+  if (render)
+    return hasParams ? (
+      <ParamsContext.Provider value={params}>
+        {render({ ...params, children })}
+      </ParamsContext.Provider>
+    ) : (
+      render({ ...params, children })
+    );
+  if (element)
+    return hasParams ? (
+      <ParamsContext.Provider value={params}>{element}</ParamsContext.Provider>
+    ) : (
+      element
+    );
+  return null;
+}

package/server/actions.mjs

@@ -0,0 +1,72 @@
+import { AsyncLocalStorage } from "node:async_hooks";
+import { createHash } from "node:crypto";
+
+export const asyncLocalStorage = (globalThis.__react_server_actions__ =
+  globalThis.__react_server_actions__ || new AsyncLocalStorage());
+
+export function ref$(type, map, fn) {
+  let id;
+  try {
+    throw new Error();
+  } catch (e) {
+    const hash = createHash("md5");
+    hash.update(e.stack.replaceAll(/\n\s*/g, " "));
+    id = hash.digest("hex");
+  }
+
+  const { actionId } = asyncLocalStorage.getStore() ?? {};
+  if (actionId === id && map.has(id)) {
+    throw Promise.reject();
+  }
+
+  if (map.has(id)) {
+    return map.get(id);
+  }
+
+  const proxy = new Proxy(fn, {
+    get(target, prop, receiver) {
+      if (prop === "bind") {
+        return (thisArg, ...args) => {
+          const bound = target.bind(thisArg, ...args);
+          bound.$$id = id;
+          bound.$$typeof = type;
+          bound.$$async = true;
+          bound.$$bound = thisArg;
+          bound.$$FORM_ACTION = (name) => {
+            const data = new FormData();
+            return {
+              name,
+              method: "POST",
+              encType: "multipart/form-data",
+              data,
+            };
+          };
+          map.set(bound.$$id, bound);
+          return bound;
+        };
+      }
+      return Reflect.get(target, prop, receiver);
+    },
+    apply(target, thisArg, args) {
+      return target.apply(thisArg, args);
+    },
+  });
+
+  const bound = proxy.bind(null);
+  if (actionId === id) {
+    throw Promise.reject();
+  }
+  return bound;
+}
+
+export const serverReferenceMap = new Map();
+export function server$(fn) {
+  if (typeof window !== "undefined") {
+    throw new Error("server$ can only be used on the server");
+  }
+  return ref$(Symbol.for("react.server.reference"), serverReferenceMap, fn);
+}
+export async function callServerReference(id, ...args) {
+  const proxy = serverReferenceMap.get(id);
+  return proxy.apply(proxy.$$bound, args);
+}

package/server/cache.mjs

@@ -0,0 +1,19 @@
+import { getContext } from "@lazarv/react-server/server/context.mjs";
+
+import { useRequest, useUrl } from "./request.mjs";
+import { CACHE_CONTEXT, FLIGHT_CACHE, HTML_CACHE } from "./symbols.mjs";
+
+export function cache$(Component, ttl = Infinity) {
+  return (props) => {
+    const url = useUrl()?.toString();
+    const accept = useRequest()?.headers?.get?.("accept");
+    const cache = getContext(CACHE_CONTEXT);
+    if (ttl === true) {
+      ttl = Infinity;
+    }
+    const expiry = Date.now() + ttl;
+    cache.setExpiry([url, accept, FLIGHT_CACHE], expiry);
+    cache.setExpiry([url, accept, HTML_CACHE], expiry);
+    return Component(props);
+  };
+}

package/server/client-component.mjs

@@ -0,0 +1,62 @@
+import { context$, getContext } from "@lazarv/react-server/server/context.mjs";
+import {
+  CLIENT_COMPONENTS,
+  HTTP_CONTEXT,
+  MANIFEST,
+} from "@lazarv/react-server/server/symbols.mjs";
+
+export const clientCache = (globalThis.__react_server_client_components__ =
+  globalThis.__react_server_client_components__ || new Map());
+
+export const clientReferenceMap = new Proxy(
+  {},
+  {
+    get(_, $$id) {
+      let def = clientCache.get($$id);
+      const [id, name = "default"] = $$id.split("::");
+      if (!clientCache.has($$id)) {
+        const manifest = getContext(MANIFEST);
+        if (!manifest) {
+          def = {
+            id,
+            chunks: [],
+            name,
+            async: true,
+          };
+        } else {
+          const { client, server } = manifest;
+          const filename = id.replace(`${process.cwd()}/.react-server/`, "");
+          const serverEntry = Object.values(server).find(
+            (entry) => entry.file === filename
+          );
+          const clientEntry = Object.values(client).find((entry) =>
+            serverEntry.src.endsWith(entry.src)
+          );
+
+          const httpContext = getContext(HTTP_CONTEXT);
+          const origin =
+            httpContext?.request?.headers?.get("x-forwarded-for") ||
+            new URL(httpContext?.url).origin;
+          def = {
+            id: `${origin}/${clientEntry.file}`,
+            chunks: [],
+            name,
+            async: true,
+          };
+        }
+        clientCache.set($$id, def);
+      }
+
+      let clientComponents = getContext(CLIENT_COMPONENTS);
+      if (!clientComponents) {
+        clientComponents = new Set();
+        context$(CLIENT_COMPONENTS, clientComponents);
+      }
+      if (!clientComponents.has(def.id)) {
+        clientComponents.add(def.id);
+      }
+
+      return def;
+    },
+  }
+);