react-bun-ssr 0.3.2 → 0.4.0

package/framework/runtime/tree.tsx

@@ -1,15 +1,23 @@
 import {
   createContext,
+  useCallback,
   useContext,
   type ComponentType,
   type Context,
   type ReactElement,
   type ReactNode,
 } from "react";
-import type { Params, RenderPayload, RouteErrorResponse, RouteModuleBundle } from "./types";
+import type {
+  ActionResponseEnvelope,
+  Params,
+  RenderPayload,
+  RouteErrorResponse,
+  RouteModuleBundle,
+} from "./types";
+import { markRouteActionStub, type RouteActionStateHandler } from "./action-stub";
 
 interface RuntimeState {
-  data: unknown;
+  loaderData: unknown;
   params: Params;
   url: URL;
   error?: unknown;
@@ -50,7 +58,115 @@ function useRuntimeState(): RuntimeState {
 }
 
 export function useLoaderData<T = unknown>(): T {
-  return useRuntimeState().data as T;
+  return useRuntimeState().loaderData as T;
+}
+
+function isActionResponseEnvelope(value: unknown): value is ActionResponseEnvelope {
+  if (!value || typeof value !== "object") {
+    return false;
+  }
+
+  const candidate = value as {
+    type?: unknown;
+    status?: unknown;
+  };
+  return typeof candidate.type === "string" && typeof candidate.status === "number";
+}
+
+async function handleActionRedirect(location: string): Promise<void> {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  const redirectUrl = new URL(location, window.location.href);
+  if (redirectUrl.origin !== window.location.origin) {
+    window.location.assign(redirectUrl.toString());
+    return;
+  }
+
+  try {
+    const runtime = await import("./client-runtime");
+    await runtime.navigateWithNavigationApiOrFallback(redirectUrl.toString(), {
+      replace: true,
+    });
+  } catch {
+    window.location.assign(redirectUrl.toString());
+  }
+}
+
+async function submitRouteAction<TState>(options: {
+  previousState: TState;
+  formData: FormData;
+  routeTarget: string;
+}): Promise<TState> {
+  if (typeof window === "undefined") {
+    return options.previousState;
+  }
+
+  const endpoint = new URL("/__rbssr/action", window.location.origin);
+  endpoint.searchParams.set("to", options.routeTarget);
+
+  const response = await fetch(endpoint.toString(), {
+    method: "POST",
+    body: options.formData,
+    credentials: "same-origin",
+    headers: {
+      accept: "application/json",
+    },
+  });
+
+  let payload: unknown;
+  try {
+    payload = await response.json();
+  } catch {
+    throw new Error("Action endpoint returned a non-JSON response.");
+  }
+
+  if (!isActionResponseEnvelope(payload)) {
+    throw new Error("Action endpoint returned an invalid envelope.");
+  }
+
+  if (payload.type === "data") {
+    return payload.data as TState;
+  }
+
+  if (payload.type === "redirect") {
+    await handleActionRedirect(payload.location);
+    return options.previousState;
+  }
+
+  if (payload.type === "catch") {
+    throw payload.error;
+  }
+
+  throw new Error(payload.message);
+}
+
+export function createRouteAction<TState = unknown>(): RouteActionStateHandler<TState> {
+  return markRouteActionStub(async (previousState: TState, formData: FormData) => {
+    const routeTarget = typeof window === "undefined"
+      ? "/"
+      : window.location.pathname + window.location.search + window.location.hash;
+
+    return submitRouteAction({
+      previousState,
+      formData,
+      routeTarget,
+    });
+  });
+}
+
+export function useRouteAction<TState = unknown>(): RouteActionStateHandler<TState> {
+  const requestUrl = useRequestUrl();
+  const routeTarget = requestUrl.pathname + requestUrl.search + requestUrl.hash;
+
+  return useCallback((previousState: TState, formData: FormData) => {
+    return submitRouteAction({
+      previousState,
+      formData,
+      routeTarget,
+    });
+  }, [routeTarget]);
 }
 
 export function useParams<T extends Params = Params>(): T {
@@ -83,7 +199,7 @@ export function createRouteTree(
   } = {},
 ): ReactElement {
   const runtimeState: RuntimeState = {
-    data: payload.data,
+    loaderData: payload.loaderData,
     params: payload.params,
     url: new URL(payload.url),
     error: options.error ?? payload.error,

package/framework/runtime/types.ts

@@ -2,17 +2,41 @@ import type { ComponentType, ReactNode } from "react";
 
 export type Params = Record<string, string>;
 
-export interface RequestContext {
+export interface AppRouteLocals extends Record<string, unknown> {}
+
+export interface ResponseCookieOptions {
+  path?: string;
+  domain?: string;
+  expires?: Date | string;
+  maxAge?: number;
+  secure?: boolean;
+  httpOnly?: boolean;
+  sameSite?: "Strict" | "Lax" | "None" | "strict" | "lax" | "none";
+}
+
+export interface ResponseCookies {
+  get(name: string): string | undefined;
+  set(name: string, value: string, options?: ResponseCookieOptions): void;
+  delete(name: string, options?: Omit<ResponseCookieOptions, "expires" | "maxAge">): void;
+}
+
+export interface ResponseContext {
+  headers: Pick<Headers, "set" | "append" | "delete" | "get" | "has">;
+  cookies: ResponseCookies;
+}
+
+export interface RequestContext<Locals extends Record<string, unknown> = AppRouteLocals> {
   request: Request;
   url: URL;
   params: Params;
   cookies: Map<string, string>;
-  locals: Record<string, unknown>;
+  locals: Locals;
+  response: ResponseContext;
 }
 
-export interface LoaderContext extends RequestContext {}
+export interface LoaderContext<Locals extends Record<string, unknown> = AppRouteLocals> extends RequestContext<Locals> {}
 
-export interface ActionContext extends RequestContext {
+export interface ActionContext<Locals extends Record<string, unknown> = AppRouteLocals> extends RequestContext<Locals> {
   formData?: FormData;
   json?: unknown;
 }
@@ -37,8 +61,12 @@ export type LoaderResult =
   | null;
 export type ActionResult = LoaderResult | RedirectResult;
 
-export type Loader = (ctx: LoaderContext) => Promise<LoaderResult> | LoaderResult;
-export type Action = (ctx: ActionContext) => Promise<ActionResult> | ActionResult;
+export type Loader<Locals extends Record<string, unknown> = AppRouteLocals> = (
+  ctx: LoaderContext<Locals>,
+) => Promise<LoaderResult> | LoaderResult;
+export type Action<Locals extends Record<string, unknown> = AppRouteLocals> = (
+  ctx: ActionContext<Locals>,
+) => Promise<ActionResult> | ActionResult;
 
 export interface RedirectResult {
   type: "redirect";
@@ -46,8 +74,8 @@ export interface RedirectResult {
   status?: 301 | 302 | 303 | 307 | 308;
 }
 
-export type Middleware = (
-  ctx: RequestContext,
+export type Middleware<Locals extends Record<string, unknown> = AppRouteLocals> = (
+  ctx: RequestContext<Locals>,
   next: () => Promise<Response>,
 ) => Promise<Response> | Response;
 
@@ -109,7 +137,9 @@ export interface RouteModule {
 
 export type LayoutModule = RouteModule;
 
-export type ApiHandler = (ctx: RequestContext) => Promise<Response | unknown> | Response | unknown;
+export type ApiHandler<Locals extends Record<string, unknown> = AppRouteLocals> = (
+  ctx: RequestContext<Locals>,
+) => Promise<Response | unknown> | Response | unknown;
 
 export interface ApiRouteModule {
   GET?: ApiHandler;
@@ -170,6 +200,7 @@ export interface PageRouteDefinition {
   type: "page";
   id: string;
   filePath: string;
+  serverFilePath?: string;
   routePath: string;
   segments: RouteSegment[];
   score: number;
@@ -212,12 +243,42 @@ export interface BuildManifest {
 
 export interface RenderPayload {
   routeId: string;
-  data: unknown;
+  loaderData: unknown;
   params: Params;
   url: string;
   error?: unknown;
 }
 
+export interface ActionDataEnvelope {
+  type: "data";
+  status: number;
+  data: unknown;
+}
+
+export interface ActionRedirectEnvelope {
+  type: "redirect";
+  status: number;
+  location: string;
+}
+
+export interface ActionCatchEnvelope {
+  type: "catch";
+  status: number;
+  error: RouteErrorResponse;
+}
+
+export interface ActionErrorEnvelope {
+  type: "error";
+  status: number;
+  message: string;
+}
+
+export type ActionResponseEnvelope =
+  | ActionDataEnvelope
+  | ActionRedirectEnvelope
+  | ActionCatchEnvelope
+  | ActionErrorEnvelope;
+
 export interface ClientRouteSnapshot {
   id: string;
   routePath: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-bun-ssr",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "private": false,
   "type": "module",
   "sideEffects": false,