@uniflowed/router 0.1.0 → 0.3.0

package/middleware.js

@@ -60,6 +60,32 @@
 // middleware writes against `/pricing` holds for a client navigation too, and
 // a rewrite of the document becomes a rewrite of its payload.
 //
+// # A payload that renders over another page runs that page's guards too
+//
+// An intercepted navigation — a modal slot opening over the page it was clicked
+// from — asks for the payload of the URL it opens, and names the page it
+// renders over in `uf-intercepted-from`. The answer is *both* pages: the one
+// the URL names, in the slot, and the one the header names, underneath it,
+// with that page's loader run and its data in the payload.
+//
+// So the chain matched against the URL alone would be the wrong chain. A guard
+// on `/feed` holds for a request *for* `/feed`, and a payload for `/photo/1`
+// rendered over `/feed` is `/feed` as much as it is `/photo/1`. After the
+// ordinary chain has admitted the request, every middleware guarding the page
+// underneath runs as well — against a `GET` for that page, with its params and
+// query — including one that already ran for the URL, because a middleware
+// that decides by reading the pathname (one root `$middleware.js` guarding
+// several sections is a common shape) has only been asked about the other
+// path. If every one of them declines, the interception stands. If any
+// answers or rewrites, the page underneath is not this request's to render:
+// the header is taken off, and what renders is the page the URL names on its
+// own — exactly what a reader who could not open the page underneath would
+// see after a reload. The guard's own answer is not sent: the request was for
+// `/photo/1`, which that guard does not cover.
+//
+// The header is taken off whenever it is not a path on this origin, too, so
+// the renderer is never handed a value this module has not judged.
+//
 // # The request it runs inside
 //
 // The runner does not establish one. The host does — `beginRequest` in
@@ -96,7 +122,7 @@
 // `routesModuleSource` keeps the middleware table in an export the client
 // never imports, for the same reason it does that with route handlers.
 
-import { documentPathOf, flightUrl } from "./internal/flight.js";
+import { INTERCEPTED_FROM_HEADER, documentPathOf, flightUrl } from "./internal/flight.js";
 import { requireRequest } from "./internal/request.js";
 import type { RouteParams } from "./internal/runtime.js";
 
@@ -160,7 +186,10 @@ export type MiddlewareRecord = {|
  * caller's signal to carry on to the handler or the page. Returns a `Request`
  * when one of them rewrote: the same request at the destination, which the
  * caller carries on with instead — and which has already been past the
- * destination's middleware.
+ * destination's middleware. It also returns a `Request` when a payload request
+ * names a page to render over and that page's guards did not all admit it: the
+ * same request without `uf-intercepted-from`. The host must carry on with that
+ * request and read the header off nothing else, or the decision is undone.
  *
  * The runner is called once per request, above both the dispatcher and the
  * renderer, rather than from inside each of them. Putting the call inside
@@ -242,15 +271,99 @@ export function createMiddlewareRunner(options: {|
       return result;
     }
 
-    if (!rewritten) {
-      return null;
+    const admitted: Request | null = !rewritten
+      ? null
+      : document == null
+        ? seen
+        : requestAt(seen, new URL(flightUrl(url.pathname + url.search), url));
+
+    // A payload rendered over another page: that page's guards have their say
+    // too. See "A payload that renders over another page" above.
+    if (document != null && request.headers.has(INTERCEPTED_FROM_HEADER)) {
+      const carried = admitted ?? request;
+      const underneath = interceptionBase(request.headers.get(INTERCEPTED_FROM_HEADER), url);
+      if (underneath == null || !(await guardsAdmit(table, carried, underneath))) {
+        return withoutInterception(carried);
+      }
     }
-    return document == null
-      ? seen
-      : requestAt(seen, new URL(flightUrl(url.pathname + url.search), url));
+    return admitted;
   };
 }
 
+/**
+ * The page an intercepted payload names in its header, as a URL on `base`'s
+ * origin, or `null` when the value is not a path on this origin.
+ *
+ * The same shape the renderer accepts (`usableInterceptionBase` in `./rsc.js`,
+ * `interceptedFrom` in `@uniflowed/server`): a path, not a network-path
+ * reference, with any fragment dropped. Parsed rather than compared as text,
+ * so the pathname the guards are matched against is the one the renderer's
+ * route matching will read.
+ */
+function interceptionBase(header: string | null, base: URL): URL | null {
+  if (header == null || !header.startsWith("/") || header.startsWith("//")) {
+    return null;
+  }
+  let parsed: URL;
+  try {
+    parsed = new URL(header, base);
+  } catch {
+    return null;
+  }
+  if (parsed.origin !== base.origin) {
+    return null;
+  }
+  parsed.hash = "";
+  return parsed;
+}
+
+/**
+ * Whether every middleware guarding `underneath` lets this request see it.
+ *
+ * Each one is asked exactly as it would be asked by a request for that page: a
+ * `GET` at its URL carrying this request's headers, with the params of the
+ * directory it guards and the page's query. All of them, root first, whether
+ * or not they already ran for the URL the request names — a guard that reads
+ * the pathname has so far only been asked about the other one.
+ *
+ * A `Response` is a refusal and so is a `rewrite()`: the page a guard would
+ * serve instead is not the page the header names, and the renderer has no way
+ * to render one under the other. Nothing either returns is sent; the caller
+ * only learns that the page underneath is not this request's to render.
+ */
+async function guardsAdmit(
+  table: $ReadOnlyArray<MiddlewareRecord>,
+  request: Request,
+  underneath: URL,
+): Promise<boolean> {
+  const asked = new Request(underneath.href, { method: "GET", headers: request.headers });
+  for (const record of table) {
+    const params = matchPrefix(record.path, underneath.pathname);
+    if (params == null) {
+      continue;
+    }
+    const middleware = pick(await record.load(), record.file);
+    const result = await middleware(asked, { params, searchParams: underneath.searchParams });
+    if (result != null) {
+      return false;
+    }
+  }
+  return true;
+}
+
+/**
+ * `request` with its `uf-intercepted-from` header taken off, so the renderer
+ * answers with the page its URL names and nothing underneath it.
+ *
+ * Only a payload request reaches here, and a payload is a `GET` or a `HEAD`,
+ * so there is no body to hand on.
+ */
+function withoutInterception(request: Request): Request {
+  const headers = new Headers(request.headers);
+  headers.delete(INTERCEPTED_FROM_HEADER);
+  return new Request(request.url, { method: request.method, headers, signal: request.signal });
+}
+
 /**
  * Where a rewrite goes, resolved against the URL the middleware was handed.
  *
@@ -282,12 +395,28 @@ function withPathname(url: URL, pathname: string): URL {
 /**
  * `request` at another URL: same method, headers, signal and body.
  *
- * A `Request` is a valid `RequestInit`, so a streamed body is handed on rather
- * than read.
+ * Every member of `RequestInit` that a `Request` carries, named — what passing
+ * the request itself as the init would read, spelled out so that the checker
+ * can see it. A streamed body is handed on rather than read, which is why a
+ * body comes with `duplex: "half"`, the one mode a streamed request body has.
  */
 function requestAt(request: Request, url: URL): Request {
-  // $FlowFixMe[incompatible-call] - a `Request` is read as the `RequestInit` it satisfies.
-  return new Request(url.href, request);
+  const body = request.body;
+  return new Request(url.href, {
+    method: request.method,
+    headers: request.headers,
+    body,
+    ...(body == null ? {} : { duplex: "half" }),
+    signal: request.signal,
+    cache: request.cache,
+    credentials: request.credentials,
+    integrity: request.integrity,
+    keepalive: request.keepalive,
+    mode: request.mode,
+    redirect: request.redirect,
+    referrer: request.referrer,
+    referrerPolicy: request.referrerPolicy,
+  });
 }
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/router",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "description": "The file-system router for Flow React applications: matching, layouts, loaders, navigation, server rendering and hydration.",
   "type": "module",
   "license": "MIT",
@@ -28,7 +28,8 @@
     "./middleware": "./middleware.js",
     "./native-navigation": "./native-navigation.js",
     "./http-client": "./http-client.js",
-    "./instrumentation": "./instrumentation.js"
+    "./instrumentation": "./instrumentation.js",
+    "./testing": "./testing.js"
   },
   "files": [
     "action.js",
@@ -47,6 +48,7 @@
     "native-navigation.js",
     "http-client.js",
     "instrumentation.js",
+    "testing.js",
     "!*.test.js"
   ],
   "peerDependencies": {
@@ -71,7 +73,7 @@
     }
   },
   "dependencies": {
-    "@uniflowed/hooks": "0.1.0",
-    "@uniflowed/server": "0.1.0"
+    "@uniflowed/hooks": "0.3.0",
+    "@uniflowed/server": "0.3.0"
   }
 }

package/rsc-client.js

@@ -41,6 +41,8 @@ import {
   installRouting,
   installStaleTime,
 } from "./internal/runtime.js";
+import { hydrationOptions } from "./internal/hydrate-options.js";
+import { readFormState } from "./internal/form-action.js";
 
 /**
  * Hydrate a document React Server Components rendered.
@@ -106,7 +108,7 @@ export async function hydrateFlight(options: {|
     hydrateRoot(
       container,
       options.strictMode === true ? <StrictMode>{tree}</StrictMode> : tree,
-      recovery == null ? undefined : { onRecoverableError: recovery },
+      hydrationOptions(recovery, readFormState(document)),
     );
     if (restoreDevHead != null) {
       setTimeout(restoreDevHead, 250);

package/rsc-ssr.js

@@ -40,6 +40,7 @@ import {
   runPartialPrerender,
 } from "@uniflowed/server/host";
 
+import type { FormState } from "./internal/form-action.js";
 import { redirectDocument, redirectResult, shellFor } from "./internal/shell.js";
 import {
   type DocumentBody,
@@ -113,6 +114,7 @@ export function createDocumentRenderer(options: DocumentRendererOptions): Render
       readonly onError: (error: mixed) => void,
       readonly transformHead?: (html: string) => Promise<string>,
       readonly onStream?: (record: StreamRecord) => void,
+      readonly formState?: FormState,
     |},
   ): Promise<DocumentBody> {
     const [forHtml, forBrowser] = stream.tee();
@@ -123,12 +125,13 @@ export function createDocumentRenderer(options: DocumentRendererOptions): Render
     const nonce = currentNonce();
     try {
       return await renderDocument(<App url={url} flight={readPayload(forHtml)} />, {
-        shell: shellFor(assets, nonce),
+        shell: shellFor(assets, nonce, settings.formState),
         onError: settings.onError,
         transformHead: settings.transformHead,
         onStream: settings.onStream,
         payload: forBrowser,
         nonce,
+        formState: settings.formState,
       });
     } catch (error) {
       void forBrowser.cancel();
@@ -141,7 +144,7 @@ export function createDocumentRenderer(options: DocumentRendererOptions): Render
     assets: RenderAssets,
     settings?: RenderOptions,
   ): Promise<RenderResult> {
-    const report = settings?.onError ?? (() => {});
+    const report = settings?.onError ?? ((_error: mixed) => {});
     const send = settings?.onStream;
     const onStream = send == null ? undefined : streamReporter(url, send);
     const transformHead = settings?.transformHead;
@@ -189,6 +192,7 @@ export function createDocumentRenderer(options: DocumentRendererOptions): Render
         },
         transformHead,
         onStream,
+        formState: settings?.formState,
       });
       streaming = true;
       for (const error of held) {
@@ -244,7 +248,7 @@ export function createDocumentRenderer(options: DocumentRendererOptions): Render
     assets: RenderAssets,
     settings?: RenderOptions,
   ): Promise<PrerenderResult> {
-    const report = settings?.onError ?? (() => {});
+    const report = settings?.onError ?? ((_error: mixed) => {});
     const ledger = createErrorLedger();
     // A read of the request, while the build may leave it for the request, is
     // not an exception to report: it is how the build finds the holes. Its row
@@ -401,7 +405,7 @@ export function createDocumentRenderer(options: DocumentRendererOptions): Render
     shell: PrerenderedShell,
     settings?: RenderOptions,
   ): Promise<RenderResult> {
-    const report = settings?.onError ?? (() => {});
+    const report = settings?.onError ?? ((_error: mixed) => {});
     const ledger = createErrorLedger();
     const stop = new AbortController();
     const rendered = await renderFlight(url, {
@@ -473,7 +477,16 @@ export function createDocumentRenderer(options: DocumentRendererOptions): Render
     }
     return {
       status: rendered.status,
-      headers: { "content-type": FLIGHT_CONTENT_TYPE, vary: INTERCEPTED_FROM_HEADER },
+      headers: {
+        "content-type": FLIGHT_CONTENT_TYPE,
+        vary: INTERCEPTED_FROM_HEADER,
+        // The payload carries the page's strings as they were rendered — a
+        // comment body with `<img onerror>` in it included — and its URL is one
+        // anybody can open as a document. `text/x-component` is not a type a
+        // browser sniffs into HTML today; `nosniff` makes that a promise rather
+        // than a property of today's browsers.
+        "x-content-type-options": "nosniff",
+      },
       stream: rendered.stream,
       error: rendered.failure,
     };
@@ -597,7 +610,7 @@ function digestOf(error: mixed): string | null {
   if (error == null || typeof error !== "object") {
     return null;
   }
-  const tagged: { +digest?: mixed, ... } = (error: $FlowFixMe);
+  const tagged: { readonly digest?: mixed, ... } = error as $FlowFixMe;
   return typeof tagged.digest === "string" ? tagged.digest : null;
 }
 

package/rsc.js

@@ -59,17 +59,28 @@ import { BoundaryReporter } from "./internal/boundaries.js";
 import { routeBoundaries } from "./internal/boundary-data.js";
 import { composeRoute, pageComponent } from "./internal/compose.js";
 import { ErrorRoutePage } from "./internal/error-view.js";
-import { type FlightRoot, routeState } from "./internal/flight.js";
+import { type FlightRoot, crossableRouteError, routeState } from "./internal/flight.js";
 import { requireServerComponentsReact } from "./internal/react-version.js";
-import type { ErrorModule, PageModule, ResolvedRoute, ResolvedSlot } from "./internal/resolve.js";
+import type {
+  ErrorModule,
+  PageModule,
+  ResolvedRoute,
+  ResolvedSlot,
+  RouteTable,
+} from "./internal/resolve.js";
 import { resolveFailure, resolveInterception, resolveMatch } from "./internal/resolve.js";
-import type { RouteParams, RouteTable, SearchParams } from "./internal/routing.js";
+import type { RouteParams, SearchParams } from "./internal/routing.js";
 import { RedirectError, nearestBoundary } from "./internal/routing.js";
 import { withServerRoute } from "./internal/server-route.js";
 
 export type { FlightRoot, RouteState } from "./internal/flight.js";
 // For `virtual:uf/rsc`, so a Server Component's `basePath()` is the project's.
 export { installRouting } from "./internal/base-path.js";
+// For `virtual:uf/rsc` too: the server-action endpoint is built in this graph,
+// beside the pages, so an action and the page that shows what it wrote run the
+// same instance of every module they share (ubugeeei-prod/uf#1469). The host
+// reaches it through the bridge, as it reaches `renderFlight`.
+export { createActionDispatcher } from "./internal/action-endpoint.js";
 
 /** What a host may tell the renderer about one render. */
 export type FlightOptions = {|
@@ -209,9 +220,11 @@ export function createFlightRenderer(options: {|
       </>
     );
     const root: FlightRoot = { route: state, tree, deployment: options.deployment ?? null };
-    const failure = renderFailure(route);
+    // From the route as it resolved, not the copy for the browser: the host is
+    // told what was actually thrown. See `crossableRouteError`.
+    const failure = renderFailure(resolved);
     if (failure != null) reportRequestError(failure, "render");
-    const report = (error) => {
+    const report = (error: mixed) => {
       reportRequestError(error, "render");
       if (settings?.onError != null) return settings.onError(error);
       console.error(error);
@@ -227,7 +240,7 @@ export function createFlightRenderer(options: {|
         signal: settings?.signal,
       }),
     );
-    return { kind: "route", status: route.status, stream, failure: renderFailure(route) };
+    return { kind: "route", status: route.status, stream, failure };
   };
 }
 
@@ -343,6 +356,9 @@ function forTheBrowser(resolved: ResolvedRoute, file: string | null): ResolvedRo
   const boundary = resolved.errorBoundary;
   return {
     ...resolved,
+    // Only an `Error` has React's production rule of carrying no message; see
+    // `crossableRouteError`.
+    error: crossableRouteError(resolved.error),
     errorBoundary: { above: boundary.above, module: clientErrorModule(boundary.module, file) },
     slots: resolved.slots.map(slotForTheBrowser),
   };
@@ -385,7 +401,7 @@ function isClientReference(value: mixed): boolean {
   if (value == null || (typeof value !== "object" && typeof value !== "function")) {
     return false;
   }
-  const tagged: { +$$typeof?: mixed, ... } = (value: $FlowFixMe);
+  const tagged: { readonly $$typeof?: mixed, ... } = value as $FlowFixMe;
   return tagged.$$typeof === CLIENT_REFERENCE;
 }
 

package/server.js

@@ -48,6 +48,7 @@ import {
   resolveMatch,
 } from "./internal/runtime.js";
 
+import type { FormState } from "./internal/form-action.js";
 import { type StreamDiagnostic, streamReporter } from "./internal/inspector.js";
 
 import { redirectDocument, redirectResult, shellFor } from "./internal/shell.js";
@@ -198,6 +199,12 @@ export type RenderOptions = {|
    * it changes is a failing test rather than a surprise.
    */
   readonly transformHead?: (html: string) => Promise<string>,
+  /**
+   * React's `formState` for a page rendered in answer to a form posted before
+   * hydration; see `internal/form-action.js`. Only a host's `postback` passes
+   * one.
+   */
+  readonly formState?: FormState,
   /**
    * Told, in words, when a document streamed differently than it did last time.
    *
@@ -405,7 +412,7 @@ export function createRenderer(options: {|
       return redirectDocument(resolution.error);
     }
     let resolved: ResolvedRoute = resolution.route;
-    const report = settings?.onError ?? (() => {});
+    const report = settings?.onError ?? ((_error: mixed) => {});
     // Built once and shared by both renders below, so a page that threw its
     // shell away and rendered its error boundary instead reports the stream the
     // browser was actually sent rather than the one that was abandoned.
@@ -436,11 +443,12 @@ export function createRenderer(options: {|
     let body: DocumentBody;
     try {
       body = await renderDocument(<App url={url} initial={resolved} />, {
-        shell: shellFor(assets, nonce),
+        shell: shellFor(assets, nonce, settings?.formState),
         onError,
         transformHead: settings?.transformHead,
         onStream,
         nonce,
+        formState: settings?.formState,
       });
       streaming = true;
       // Recovered before the shell was ready: a `<Suspense>` boundary whose
@@ -469,11 +477,12 @@ export function createRenderer(options: {|
       // where somebody can fix it.
       streaming = true;
       body = await renderDocument(<App url={url} initial={resolved} />, {
-        shell: shellFor(assets, nonce),
+        shell: shellFor(assets, nonce, settings?.formState),
         onError,
         transformHead: settings?.transformHead,
         onStream,
         nonce,
+        formState: settings?.formState,
       });
     }
 
@@ -496,7 +505,7 @@ export function createRenderer(options: {|
       return redirectResult(redirectDocument(resolution.error));
     }
     let resolved: ResolvedRoute = resolution.route;
-    const report = settings?.onError ?? (() => {});
+    const report = settings?.onError ?? ((_error: mixed) => {});
 
     let html: string;
     try {