react-router-effect 2.1.0 → 2.3.0

package/src/server.ts

@@ -1,5 +1,5 @@
 /**
- * Serves a React Router framework-mode build from Effect's Node HTTP server.
+ * Serves a React Router framework-mode build from Effect's HTTP server.
  *
  * The adapter converts each `HttpServerRequest` into a Web `Request`, calls
  * React Router's own request handler, and streams the `Response` back. React
@@ -20,28 +20,33 @@
  * through unchanged, so existing promise loaders and `makeLoader` wrappers keep
  * working.
  *
+ * The adapter's API is unstable: a minor version can change it.
+ *
+ * @stability unstable
  * @since 2.1.0
  */
 import {
+  Array as Arr,
   Cause,
   Context,
-  Data,
   Effect,
   Exit,
-  FileSystem,
+  Layer,
   Option,
-  Path,
+  Predicate,
+  Record,
   Scope,
   Stream,
+  Struct,
   Tracer,
 } from "effect";
 import {
   Cookies,
-  type HttpPlatform,
+  HttpMethod,
+  HttpRouter,
   HttpServerError,
   HttpServerRequest,
   HttpServerResponse,
-  HttpStaticServer,
 } from "effect/http";
 import {
   createContext,
@@ -49,50 +54,14 @@ import {
   RouterContextProvider,
   type RouterContext,
   type ServerBuild,
+  type ServerInstrumentation,
   type MiddlewareFunction,
 } from "react-router";
 
 import type { RouteHandlers } from "./factory.ts";
 
-// ---------------------------------------------------------------------------
-// Options.
-// ---------------------------------------------------------------------------
-
 /** A React Router server build, or a function that loads it, as in `createRequestHandler`. */
-export type BuildSource = ServerBuild | (() => ServerBuild | Promise<ServerBuild>);
-
-/** The options of {@link make}. */
-export interface Options {
-  /** The server build: `() => import("virtual:react-router/server-build")`. */
-  readonly build: BuildSource;
-  /** The route factory whose runner, runtime and error model route Effects use. */
-  readonly factory: { readonly handlers: RouteHandlers };
-  /** React Router's server mode. Defaults to `process.env.NODE_ENV`. */
-  readonly mode?: string | undefined;
-  /**
-   * Serves the client build before React Router: the files of the build's
-   * `assetsBuildDirectory`, under its `publicPath`. Files under `assets/` have
-   * hashed names and are cached for a year as immutable, other files for an
-   * hour. It serves like `express.static`: a directory serves its index file,
-   * such as a prerendered page, its path without the trailing slash redirects
-   * to the path with it, dotfiles are not served, and a request it does not
-   * serve goes to React Router. Like `express.static`, it looks each GET and
-   * HEAD request up in the file system. It serves only a build that it loads
-   * once: in production mode, or a build value. A
-   * development build is never served, since Vite serves the client there, nor
-   * is a `publicPath` on another origin. Making the app fails with a
-   * {@link ClientBuildError} when it cannot read the directory. Needs the
-   * platform's file system, which `NodeHttpServer.layer` and the other server
-   * layers provide.
-   */
-  readonly clientAssets?: boolean | undefined;
-  /**
-   * Builds the services of one request, before React Router runs. They join
-   * the request's effect context, so every middleware, loader and action sees
-   * them without a middleware that sets them.
-   */
-  readonly requestContext?: ((request: Request) => Context.Context<never>) | undefined;
-}
+type BuildSource = ServerBuild | (() => ServerBuild | Promise<ServerBuild>);
 
 // ---------------------------------------------------------------------------
 // Response conversion.
@@ -102,7 +71,8 @@ export interface Options {
  * Converts React Router's response. Its `Set-Cookie` values become the
  * response's cookies, as `HttpServerResponse.fromWeb` converts them, so
  * middleware after the adapter can read and change them. Effect keeps one
- * cookie per name, the last one, and only the attributes it knows.
+ * cookie per name, the last one, and only the attributes it knows. A cookie
+ * whose name Effect's parser rejects is dropped, and `handleRequest` logs it.
  *
  * Effect gives a streamed body without a content type
  * `application/octet-stream`, so a route that sends a body sets its own.
@@ -113,6 +83,7 @@ export interface Options {
  */
 const toHttpResponse = (
   response: Response,
+  cookies: Cookies.Cookies,
   controller: AbortController,
 ): HttpServerResponse.HttpServerResponse => {
   const headers = new Headers(response.headers);
@@ -122,7 +93,7 @@ const toHttpResponse = (
     status: response.status,
     statusText: response.statusText === "" ? undefined : response.statusText,
     headers,
-    cookies: Cookies.fromSetCookie(response.headers.getSetCookie()),
+    cookies,
   };
   const body = response.body;
   return body === null
@@ -137,157 +108,80 @@ const toHttpResponse = (
       );
 };
 
-// ---------------------------------------------------------------------------
-// Client assets.
-// ---------------------------------------------------------------------------
-
-/** The services that serving the client build needs. */
-export type ClientAssetServices = FileSystem.FileSystem | Path.Path | HttpPlatform.HttpPlatform;
-
-/** The `Cache-Control` of the files under `assets/`, whose names include a content hash. */
-const hashedCacheControl = "public, max-age=31536000, immutable";
-
-/** The `Cache-Control` of the other client files, such as `favicon.ico`. */
-const otherCacheControl = "public, max-age=3600";
-
-/** Serves files of one directory, for the current request. */
-type StaticFiles = Effect.Effect<
-  HttpServerResponse.HttpServerResponse,
-  HttpServerError.HttpServerError,
-  HttpServerRequest.HttpServerRequest
->;
-
-/** The client build of one server build. */
-interface ClientFiles {
-  /** The `publicPath` without its trailing slash. */
-  readonly prefix: string;
-  readonly hashed: StaticFiles;
-  readonly other: StaticFiles;
-}
-
 /**
- * True for a path with a segment that starts with a dot, such as `.vite/`,
- * which is never served. Effect's static server serves dotfiles, and Vite
- * writes its manifest there. `express.static` ignores them.
+ * The names of the `Set-Cookie` values that are not in `cookies`, because
+ * Effect's parser rejects them, such as a name with `/` or `:`. A value whose
+ * name another value repeats is not dropped: Effect keeps the last cookie of
+ * each name. Each value is parsed alone only when the counts differ.
  */
-const hasDotSegment = (path: string): boolean =>
-  path.split("/").some((segment) => segment.startsWith("."));
+const droppedCookies = (
+  values: ReadonlyArray<string>,
+  cookies: Cookies.Cookies,
+): ReadonlyArray<string> =>
+  Object.keys(cookies.cookies).length === values.length
+    ? []
+    : values
+        .filter((value) => Cookies.isEmpty(Cookies.fromSetCookie(value)))
+        // The name, for the log only. The value can hold a secret.
+        .map((value) => value.split(/[=;]/, 1)[0]?.trim() ?? "");
 
-/** True when a static lookup found no file, so the request goes on to React Router. */
-const isNotFound = (error: HttpServerError.HttpServerError): boolean =>
-  error.reason._tag === "RouteNotFound";
-
-/**
- * The app serves the client build, and cannot read its directory. The
- * build's `assetsBuildDirectory` is relative to the working directory of the
- * server, so `directory` is the path it resolved to.
- */
-export class ClientBuildError extends Data.TaggedError("ClientBuildError")<{
-  readonly message: string;
-  /** The resolved directory of the client build. */
-  readonly directory: string;
-  readonly cause: unknown;
-}> {}
+// ---------------------------------------------------------------------------
+// Tracing.
+// ---------------------------------------------------------------------------
 
 /**
- * The client files of a build, or `undefined` when the adapter does not serve
- * them. Making them reads the build's directory, so a missing client build
- * fails the server's start and not its requests.
+ * The server span of a traced request, which gets `http.route`. Without it,
+ * the adapter adds no spans. The `react-router.*` spans nest under the
+ * request fiber's own span instead, through the request store.
  */
-const makeClientFiles = (
-  build: ServerBuild,
-): Effect.Effect<ClientFiles | undefined, ClientBuildError, ClientAssetServices> =>
-  Effect.gen(function* () {
-    if (build.assets.hmr !== undefined || !build.publicPath.startsWith("/")) return undefined;
-    const fileSystem = yield* FileSystem.FileSystem;
-    const path = yield* Path.Path;
-    const root = path.resolve(build.assetsBuildDirectory);
-    yield* fileSystem.readDirectory(root).pipe(
-      Effect.mapError(
-        (cause) =>
-          new ClientBuildError({
-            message: `Cannot read the client build at ${root}`,
-            directory: root,
-            cause,
-          }),
-      ),
-    );
-    const files = (cacheControl: string) =>
-      HttpStaticServer.make({ root, cacheControl }).pipe(
-        // Making a static server only resolves its root.
-        Effect.orDie,
-      );
-    return {
-      prefix: build.publicPath.replace(/\/$/, ""),
-      hashed: yield* files(hashedCacheControl),
-      other: yield* files(otherCacheControl),
-    };
-  });
-
-/** The decoded path of a URL, or `undefined` when it does not decode. */
-const decodePath = (path: string): string | undefined => {
-  try {
-    return decodeURIComponent(path);
-  } catch {
-    return undefined;
-  }
-};
+const requestSpanKey: RouterContext<Tracer.Span | undefined> = createContext<
+  Tracer.Span | undefined
+>(undefined);
 
 /**
- * Serves the request from the client build, or returns `None` when the build
- * has no such file: a path the build does not have, a directory without an
- * index file, a dotfile, a path outside the `publicPath`, or a method other
- * than GET and HEAD.
+ * The server span of the request, when a tracer exports it: not the native
+ * tracer, whose spans go nowhere, and not an unsampled span. A route-scoped
+ * router middleware can open spans of its own between the request fiber's
+ * span and the server span, so the search goes up to the span of kind
+ * `server` that Effect's HTTP tracer opens. It runs once per request. The
+ * search goes by kind: an app's own span of kind `server` inside the request
+ * would get `http.route` instead.
  */
-const serveClientFile = (
-  files: ClientFiles,
-  request: HttpServerRequest.HttpServerRequest,
-): Effect.Effect<
-  Option.Option<HttpServerResponse.HttpServerResponse>,
-  HttpServerError.HttpServerError
-> => {
-  const path = request.url.split("?")[0] ?? "";
-  if (
-    (request.method !== "GET" && request.method !== "HEAD") ||
-    !path.startsWith(`${files.prefix}/`)
-  ) {
-    return Effect.succeedNone;
+const serverSpan = (context: Context.Context<never>): Tracer.Span | undefined => {
+  if (Context.get(context, Tracer.Tracer) === Tracer.nativeTracer) return undefined;
+  let span = Context.getOrUndefined(context, Tracer.ParentSpan);
+  while (Predicate.isTagged(span, "Span") && span.kind !== "server") {
+    span = Option.getOrUndefined(span.parent);
   }
-  const url = request.url.slice(files.prefix.length);
-  const file = decodePath(url.split("?")[0] ?? "");
-  // The decoded path, so an encoded dot such as `%2e` is a dotfile too.
-  if (file === undefined || hasDotSegment(file)) return Effect.succeedNone;
-  const serve = url.startsWith("/assets/") ? files.hashed : files.other;
-  return serve.pipe(
-    Effect.provideService(HttpServerRequest.HttpServerRequest, request.modify({ url })),
-    Effect.map(Option.some),
-    Effect.catchIf(isNotFound, () => Effect.succeedNone),
-  );
+  return Predicate.isTagged(span, "Span") && span.sampled ? span : undefined;
 };
 
-// ---------------------------------------------------------------------------
-// Tracing.
-// ---------------------------------------------------------------------------
-
 /**
- * The span of a traced request: the server span of Effect's HTTP tracer, with
- * a tracer that exports spans. Without it, the adapter adds no spans.
+ * The `http.route` of a routed pattern, such as `/posts/:id`. React Router
+ * joins the route paths, so a root route without a path leaves out the
+ * leading slash.
  */
-const requestSpanKey: RouterContext<Tracer.Span | undefined> = createContext<
-  Tracer.Span | undefined
->(undefined);
+const httpRoute = (pattern: string): string => (pattern.startsWith("/") ? pattern : `/${pattern}`);
 
 /**
- * The span of the request fiber, when a tracer exports it: not the native
- * tracer, whose spans go nowhere, and not an unsampled span.
+ * Sets `http.route` on the server span to the pattern of the routes that
+ * React Router matched, once per request, after React Router answered. React
+ * Router 8 gives the pattern to this request handler hook, also for a page
+ * that runs no route function. A request that matched no route keeps the
+ * router's `*`.
  */
-const exportedSpan = (context: Context.Context<never>): Tracer.Span | undefined => {
-  const span = Context.getOrUndefined(context, Tracer.ParentSpan);
-  return span?._tag === "Span" &&
-    span.sampled &&
-    Context.get(context, Tracer.Tracer) !== Tracer.nativeTracer
-    ? span
-    : undefined;
+const routeLabel: ServerInstrumentation = {
+  handler(handler) {
+    handler.instrument({
+      async request(handleRequest, { context }) {
+        const { meta } = await handleRequest();
+        const span = context?.get(requestSpanKey);
+        if (span !== undefined && meta !== undefined && meta.pattern !== "") {
+          span.attribute("http.route", httpRoute(meta.pattern));
+        }
+      },
+    });
+  },
 };
 
 /** What a route function produced: its value, or what it threw. */
@@ -333,8 +227,6 @@ const isSpanError = (error: unknown): boolean => {
 /** What every route function gets, as far as tracing reads it. */
 interface TracedArgs {
   readonly context: Readonly<RouterContextProvider>;
-  /** The routed pattern of the request, such as `/posts/:id`. */
-  readonly pattern?: string | undefined;
 }
 
 /** The kind of route function, as React Router names it. */
@@ -342,8 +234,7 @@ type Operation = "middleware" | "loader" | "action";
 
 /**
  * Runs a route function in a span of its own when the request is traced,
- * such as `react-router.loader routes/home`, and sets `http.route` on the
- * request's span.
+ * such as `react-router.loader routes/home`. `routeLabel` sets `http.route`.
  *
  * The spans follow React Router's structure. A middleware's span is the
  * parent of everything its `next()` runs: the next middleware, then the
@@ -364,13 +255,7 @@ const traced =
     fn: (args: Args, ...rest: Rest) => Promise<unknown>,
   ) =>
   (args: Args, ...rest: Rest): Promise<unknown> => {
-    const requestSpan = args.context.get(requestSpanKey);
-    if (requestSpan === undefined) return fn(args, ...rest);
-    if (typeof args.pattern === "string") {
-      // React Router joins the route paths, so a root route without a path leaves out the leading slash.
-      const route = args.pattern.startsWith("/") ? args.pattern : `/${args.pattern}`;
-      requestSpan.attribute("http.route", route);
-    }
+    if (args.context.get(requestSpanKey) === undefined) return fn(args, ...rest);
     const store = args.context.get(storeKey);
     const program = Effect.useSpan(
       `react-router.${operation} ${routeId}`,
@@ -382,21 +267,25 @@ const traced =
         },
       },
       (span) =>
-        Effect.sync(() => {
+        Effect.promise(() => {
           args.context.set(storeKey, Context.add(store, Tracer.ParentSpan, span));
           const settled = settle(() => fn(args, ...rest));
           if (operation !== "middleware") args.context.set(storeKey, store);
           return settled;
         }).pipe(
           Effect.withParentSpan(span),
-          Effect.flatMap((settled) => Effect.promise(() => settled)),
+          // `Effect.filterOrFail` passes its failure callback the whole `Settled`
+          // union, so `result.error` would need a branch that never runs.
+          // @effect-diagnostics-next-line flatMapConditionalToFilterOrFail:off
           Effect.flatMap((result) =>
             result.ok || !isSpanError(result.error)
               ? Effect.succeed(result)
-              : Effect.fail(result.error),
+              : // oxlint-disable-next-line effecttsgo/any-unknown-in-error-context -- a route function can throw any value, and React Router types it `unknown`
+                Effect.fail(result.error),
           ),
         ),
     );
+    // oxlint-disable-next-line effecttsgo/any-unknown-in-error-context -- the error is that thrown value, rethrown below
     return Effect.runPromiseExitWith(store)(program).then((exit) => {
       if (operation === "middleware") args.context.set(storeKey, store);
       if (Exit.isFailure(exit)) throw Cause.squash(exit.cause);
@@ -446,18 +335,32 @@ const wrapModule = (
   };
 };
 
-/** Wraps every route module of a build. */
-const wrapBuild = (build: ServerBuild, handlers: RouteHandlers): ServerBuild => ({
-  ...build,
-  routes: Object.fromEntries(
-    Object.entries(build.routes).map(([id, route]) => [
-      id,
-      route === undefined
-        ? undefined
-        : { ...route, module: wrapModule(id, route.module, handlers) },
-    ]),
-  ),
-});
+/**
+ * Wraps every route module of a build, and adds the adapter's
+ * instrumentations after the app's own in the server entry module. An app
+ * often does not export `instrumentations`, and `Struct.evolve` changes only
+ * the keys that an object has, so the key is set with `Struct.assign`.
+ */
+const wrapBuild = (
+  build: ServerBuild,
+  handlers: RouteHandlers,
+  instrumentations: ReadonlyArray<ServerInstrumentation>,
+): ServerBuild =>
+  Struct.evolve(build, {
+    entry: (entry) =>
+      Struct.evolve(entry, {
+        module: (module) =>
+          Struct.assign(module, {
+            instrumentations: Arr.appendAll(module.instrumentations ?? [], instrumentations),
+          }),
+      }),
+    routes: (routes) =>
+      Record.map(routes, (route, id) =>
+        route === undefined
+          ? undefined
+          : Struct.evolve(route, { module: (module) => wrapModule(id, module, handlers) }),
+      ),
+  });
 
 /** React Router's request handler, as `createRequestHandler` returns it. */
 type RequestHandler = (request: Request, context: RouterContextProvider) => Promise<Response>;
@@ -473,12 +376,13 @@ interface LoadedBuild {
  * handler is built once per build value: React Router rebuilds its route
  * tables on every request when it is given a function, so the adapter
  * resolves the build itself. In development a new build after a change gets a
- * new handler. The last handler is kept across runs of {@link make}'s Effect,
- * since a development server can make the app for each request.
+ * new handler. The last handler is kept across requests, since a development
+ * build loads for each request.
  */
 const makeBuildLoader = (
-  options: Options,
-  mode: string | undefined,
+  options: Pick<ReactRouter.Options, "build" | "factory">,
+  mode: string,
+  instrumentations: ReadonlyArray<ServerInstrumentation>,
 ): Effect.Effect<LoadedBuild> => {
   let cached: LoadedBuild | undefined;
   return Effect.promise(async () => {
@@ -486,7 +390,10 @@ const makeBuildLoader = (
     if (cached?.build !== build) {
       cached = {
         build,
-        handler: createRequestHandler(wrapBuild(build, options.factory.handlers), mode),
+        handler: createRequestHandler(
+          wrapBuild(build, options.factory.handlers, instrumentations),
+          mode,
+        ),
       };
     }
     return cached;
@@ -533,112 +440,217 @@ const callRouter = (
     });
   }).pipe(Effect.interruptible);
 
-/** True when the options serve the client build. */
-type ServesClientAssets<O> = O extends { readonly clientAssets: infer Serves }
-  ? [Serves] extends [false | undefined]
-    ? false
-    : true
-  : false;
+// ---------------------------------------------------------------------------
+// The ReactRouter service.
+// ---------------------------------------------------------------------------
 
 /**
- * The Effect HTTP app {@link make} makes. Serving the client build adds the
- * static file server's errors to its errors.
+ * The methods of React Router's routes. Not the method `*`, which also
+ * registers HEAD: the router answers HEAD with the GET route of a path only
+ * when no HEAD route matches it, so a HEAD route on `*` takes HEAD from every
+ * GET route of the app.
  */
-export type App<O extends Options> = Effect.Effect<
-  HttpServerResponse.HttpServerResponse,
-  | HttpServerError.RequestError
-  | (ServesClientAssets<O> extends true ? HttpServerError.HttpServerError : never),
-  HttpServerRequest.HttpServerRequest
->;
+const routeMethods = Arr.filter(HttpMethod.all, (method) => method !== "HEAD");
 
 /**
- * Makes the Effect HTTP app that serves React Router. Run the Effect once,
- * when the server starts. In production it loads the build, and with
- * `clientAssets` it reads the client build's directory, so a missing one fails
- * the server's start with a {@link ClientBuildError} and not its requests.
+ * React Router, as a service of the Effect HTTP app. `ReactRouter.layer`
+ * provides it, and `ReactRouter.routes` registers it on the app's router as
+ * the catch-all route.
  *
  * ```ts
- * import { ReactRouterHttp } from "react-router-effect/server";
- *
- * export const reactRouterApp = ReactRouterHttp.make({
- *   build: () => import("virtual:react-router/server-build"),
- *   factory: routeFactory,
- *   clientAssets: true,
- * });
- *
- * // Serve it like any Effect HTTP app, with the app's own middleware.
- * Layer.unwrap(
- *   Effect.map(reactRouterApp, (app) => HttpServer.serve(app, HttpMiddleware.logger)),
+ * export const App = ReactRouter.routes.pipe(
+ *   Layer.provide(
+ *     ReactRouter.layer({
+ *       build: () => import("virtual:react-router/server-build"),
+ *       factory: routeFactory,
+ *       mode: import.meta.env.MODE,
+ *     }),
+ *   ),
  * );
  * ```
  *
- * In development, where the build changes, the app loads the build for each
- * request, and making it does nothing else.
- *
- * The request signal aborts only when the response ends early: when the
- * client leaves while React Router runs or while the body streams. A
- * completed response never aborts it.
+ * @stability unstable
  */
-export const make = <const O extends Options>(
-  options: O,
-): Effect.Effect<
-  App<O>,
-  ServesClientAssets<O> extends true ? ClientBuildError : never,
-  ServesClientAssets<O> extends true ? ClientAssetServices : never
-> => {
-  const mode = options.mode ?? process.env.NODE_ENV;
-  const loadBuild = makeBuildLoader(options, mode);
-  const settled = typeof options.build !== "function" || mode === "production";
-  const made = Effect.gen(function* () {
-    if (!settled) return serve(options, loadBuild, undefined);
-    const loaded = yield* loadBuild;
-    const files = options.clientAssets === true ? yield* makeClientFiles(loaded.build) : undefined;
-    return serve(options, Effect.succeed(loaded), files);
+export class ReactRouter extends Context.Service<
+  ReactRouter,
+  {
+    /**
+     * The build, when the layer loaded it once at startup: a build value, or
+     * a build function in production mode. `None` when the build loads for
+     * each request.
+     */
+    readonly build: Option.Option<ServerBuild>;
+    /**
+     * Answers the current request with React Router. The Scope is the
+     * request's scope: the resources that `loadContext` opens close with it.
+     */
+    readonly handle: Effect.Effect<
+      HttpServerResponse.HttpServerResponse,
+      HttpServerError.RequestError,
+      HttpServerRequest.HttpServerRequest | Scope.Scope
+    >;
+  }
+>()("react-router-effect/ReactRouter") {
+  /**
+   * Provides React Router. A build value, or a build function in production
+   * mode, loads when the layer builds. Provide one value of this layer to
+   * every layer that reads the service: two values load the build twice.
+   *
+   * @stability unstable
+   */
+  static readonly layer = <R = never>(
+    options: ReactRouter.Options<R>,
+  ): Layer.Layer<ReactRouter, never, Exclude<R, Scope.Scope>> =>
+    Layer.effect(ReactRouter, makeReactRouter(options));
+
+  /**
+   * Registers React Router as the catch-all route of the app's router, on
+   * `*`, for every method of `HttpMethod.all` but HEAD. A route that the app
+   * registers itself wins over it, also a route on `/`, such as the
+   * prerendered home page of `ReactRouterAssets.layer`. A HEAD request uses
+   * the GET route of its path, React Router's or the app's own, as Express
+   * does. A method outside `HttpMethod.all` gets the router's 404. Register
+   * it at the root of the router: under a prefix, React Router does not get
+   * the path that it expects.
+   *
+   * @stability unstable
+   */
+  static readonly routes = HttpRouter.use((router) =>
+    Effect.flatMap(ReactRouter, ({ handle }) =>
+      router.addAll(routeMethods.map((method) => HttpRouter.route(method, "*", handle))),
+    ),
+  );
+}
+
+export declare namespace ReactRouter {
+  /**
+   * The options of {@link ReactRouter.layer}. `R` is the requirement of `loadContext`.
+   *
+   * @stability unstable
+   */
+  export interface Options<R = never> {
+    /** The server build: `() => import("virtual:react-router/server-build")`. */
+    readonly build: BuildSource;
+    /** The route factory whose runner, runtime and error model route Effects use. */
+    readonly factory: { readonly handlers: RouteHandlers };
+    /**
+     * React Router's server mode, such as `import.meta.env.MODE` in a Vite
+     * app. React Router runs in production mode for any mode but
+     * `development` and `test`, and so does the layer: it loads a build
+     * function for each request only in those two modes.
+     */
+    readonly mode: "development" | "production" | "test" | (string & {});
+    /**
+     * Makes React Router's load context for each request, as `getLoadContext`
+     * does for `@react-router/express`. Plain loaders and actions, and
+     * `handleRequest` in `entry.server.tsx`, read its values with
+     * `context.get`. Route Effects read services from their Effect context,
+     * so an app gives them services with router middleware, not here. The
+     * adapter adds its own keys to the provider. The Effect gets the services
+     * of `R` from the layer, and the services of the request, which win over
+     * the services of the layer. A defect answers an empty 500.
+     */
+    readonly loadContext?:
+      | ((
+          request: HttpServerRequest.HttpServerRequest,
+        ) => Effect.Effect<RouterContextProvider, never, R>)
+      | undefined;
+  }
+}
+
+/**
+ * Makes the service. A build value, or a build function in production mode,
+ * loads once here, so a build that does not load stops the server's start.
+ * Any other build loads for each request, and gets a new React Router handler
+ * when its value changes.
+ */
+const makeReactRouter = Effect.fnUntraced(function* <R>(options: ReactRouter.Options<R>) {
+  const mode = options.mode;
+  // The tracer of the layer. With the native tracer, whose spans go
+  // nowhere, React Router gets no hook, and does no work for it on a request.
+  const tracer = yield* Effect.tracer;
+  const loadBuild = makeBuildLoader(
+    options,
+    mode,
+    tracer === Tracer.nativeTracer ? [] : [routeLabel],
+  );
+  const handlers = options.factory.handlers;
+  // The request's own services, such as its scope and its span, win over
+  // the services of the layer, as `HttpApiMiddleware` merges them.
+  const services = yield* Effect.context<R>();
+  const { loadContext } = options;
+  const provided: ReactRouter.Options["loadContext"] =
+    loadContext === undefined
+      ? undefined
+      : (request) =>
+          Effect.updateContext(loadContext(request), (requestContext: Context.Context<never>) =>
+            Context.merge(services, requestContext),
+          );
+  // React Router runs in production mode for any mode but these two.
+  if (typeof options.build === "function" && (mode === "development" || mode === "test")) {
+    return ReactRouter.of({
+      build: Option.none(),
+      handle: handleRequest(handlers, loadBuild, provided),
+    });
+  }
+  const loaded = yield* loadBuild;
+  return ReactRouter.of({
+    build: Option.some(loaded.build),
+    handle: handleRequest(handlers, Effect.succeed(loaded), provided),
   });
-  // The client build's errors and requirements apply only when the options serve it.
-  return made as unknown as Effect.Effect<
-    App<O>,
-    ServesClientAssets<O> extends true ? ClientBuildError : never,
-    ServesClientAssets<O> extends true ? ClientAssetServices : never
-  >;
-};
+});
 
-/** The app for one loaded build source, and the client files it serves, if any. */
-const serve = (
-  options: Options,
+/**
+ * Answers the current request with React Router. Route Effects get the
+ * request fiber's context without its scope, so they see the services that
+ * the app's router middleware provides. A route that needs a scope opens its
+ * own with `Effect.scoped`.
+ */
+const handleRequest = (
+  handlers: RouteHandlers,
   loadBuild: Effect.Effect<LoadedBuild>,
-  files: ClientFiles | undefined,
-): Effect.Effect<
-  HttpServerResponse.HttpServerResponse,
-  HttpServerError.RequestError | HttpServerError.HttpServerError,
-  HttpServerRequest.HttpServerRequest
-> =>
+  loadContext: ReactRouter.Options["loadContext"],
+): ReactRouter["Service"]["handle"] =>
   Effect.gen(function* () {
     const httpRequest = yield* HttpServerRequest.HttpServerRequest;
-    if (files !== undefined) {
-      const file = yield* serveClientFile(files, httpRequest);
-      if (Option.isSome(file)) return file.value;
-    }
     const { handler } = yield* loadBuild;
-    // Route effects get the request fiber's context, without its scope: a
-    // route that needs a scope opens its own with `Effect.scoped`.
     const fiberContext = Context.omit(Scope.Scope)(yield* Effect.context<never>());
+    // `loadContext` runs first: a copy of the request below takes its body.
+    const routerContext =
+      loadContext === undefined ? new RouterContextProvider() : yield* loadContext(httpRequest);
+    // `Effect.abortSignal` needs a `Scope`, which `fiberContext` omits, and it aborts
+    // when that scope closes, even for a response that completed. The adapter aborts
+    // this controller itself, on interrupt and when the body stream ends early.
+    // @effect-diagnostics-next-line abortControllerInEffect:off
     const controller = new AbortController();
-    const request = yield* HttpServerRequest.toWeb(httpRequest, { signal: controller.signal });
-    const routerContext = new RouterContextProvider();
-    routerContext.set(
-      options.factory.handlers.requestContext,
-      Context.merge(fiberContext, options.requestContext?.(request) ?? Context.empty()),
-    );
-    routerContext.set(requestSpanKey, exportedSpan(fiberContext));
+    const converted = yield* HttpServerRequest.toWeb(httpRequest, { signal: controller.signal });
+    // On a Web server, such as a Worker, `toWeb` returns the runtime's own
+    // Request and ignores `signal`. A copy follows both signals. A body that
+    // is used or locked cannot be copied, so that request goes to React
+    // Router as it is.
+    const request =
+      converted === httpRequest.source && !converted.bodyUsed && converted.body?.locked !== true
+        ? new Request(converted, { signal: AbortSignal.any([converted.signal, controller.signal]) })
+        : converted;
+    routerContext.set(handlers.requestContext, fiberContext);
+    routerContext.set(requestSpanKey, serverSpan(fiberContext));
     const response = yield* callRouter(handler, request, routerContext, controller);
-    return toHttpResponse(response, controller);
+    const setCookies = response.headers.getSetCookie();
+    const cookies = Cookies.fromSetCookie(setCookies);
+    const dropped = droppedCookies(setCookies, cookies);
+    if (dropped.length > 0) {
+      yield* Effect.logError(
+        "React Router adapter dropped cookies that Effect cannot send",
+        dropped,
+      );
+    }
+    return toHttpResponse(response, cookies, controller);
   }).pipe(
     // React Router logs and answers the errors of route code. A defect of the
-    // adapter's own steps, such as a `requestContext` that throws, a build
-    // that does not load, or React Router's handler rejecting, goes to the
-    // app's loggers, and the client gets a 500, as Express's error handler
-    // does. Answering it keeps a logger middleware from logging it again.
+    // adapter's own steps, such as a `loadContext` that dies, a build that
+    // does not load, or React Router's handler rejecting, goes to the app's
+    // loggers, and the client gets an empty 500, as Express's error handler
+    // answers.
     Effect.catchDefect((defect) =>
       Effect.logError("React Router adapter failed", defect).pipe(
         Effect.as(HttpServerResponse.empty({ status: 500 })),