@uniflowed/router 0.5.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/router",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "description": "The file-system router for Flow React applications: matching, layouts, loaders, navigation, server rendering and hydration.",
   "type": "module",
   "license": "MIT",
@@ -73,7 +73,8 @@
     }
   },
   "dependencies": {
-    "@uniflowed/hooks": "0.5.0",
-    "@uniflowed/server": "0.5.0"
+    "@uniflowed/hooks": "0.7.0",
+    "@uniflowed/server": "0.7.0",
+    "@uniflowed/validator": "0.7.0"
   }
 }

package/routing.js

@@ -18,6 +18,8 @@ export type {
   RouteRecord,
   RouteTable,
   SearchParams,
+  SearchParamsAll,
+  SearchParamsIssue,
   SlotRecord,
   SlotRouteRecord,
   TemplateRecord,
@@ -35,6 +37,7 @@ export {
   ForbiddenError,
   NotFoundError,
   RedirectError,
+  SearchParamsError,
   UnauthorizedError,
   buildRoute,
   forbidden,
@@ -42,6 +45,7 @@ export {
   matchRoute,
   notFound,
   parseSearch,
+  parseSearchAll,
   permanentRedirect,
   redirect,
   routeErrorStatus,

package/rsc-client.js

@@ -28,6 +28,7 @@ import { ROOT_ID } from "./internal/document.js";
 import {
   fetchFlight,
   installBrowserModules,
+  installServerCallback,
   readDocumentPayload,
 } from "./internal/flight-browser.js";
 import { domObserver } from "./internal/payload-rows.js";
@@ -83,6 +84,7 @@ export async function hydrateFlight(options: {|
   installStaleTime(options.staleTime ?? 0);
   installFlightFetch(fetchFlight);
   installBrowserModules();
+  installServerCallback();
   const flight = readDocumentPayload(document, domObserver(document));
 
   // The route table has no base path in it, and the address bar does.

package/rsc-ssr.js

@@ -28,7 +28,12 @@ import {
   installServerModules,
   readPayload,
 } from "./internal/flight-ssr.js";
-import { FLIGHT_CONTENT_TYPE, INTERCEPTED_FROM_HEADER, flightUrl } from "./internal/flight.js";
+import {
+  FLIGHT_CONTENT_TYPE,
+  INTERCEPTED_FROM_HEADER,
+  NOT_FOUND_HEADER,
+  flightUrl,
+} from "./internal/flight.js";
 import { type StreamRecord, streamReporter } from "./internal/inspector.js";
 import { requireServerComponentsReact } from "./internal/react-version.js";
 import { RedirectError } from "./internal/routing.js";
@@ -456,11 +461,13 @@ export function createDocumentRenderer(options: DocumentRendererOptions): Render
     settings?: {|
       readonly onError?: (error: mixed) => void,
       readonly interceptedFrom?: string,
+      readonly notFound?: boolean,
     |},
   ): Promise<FlightResponse> {
     const rendered = await renderFlight(url, {
       onError: settings?.onError,
       interceptedFrom: settings?.interceptedFrom,
+      notFound: settings?.notFound,
     });
     if (rendered.kind === "redirect") {
       const { location } = rendered;
@@ -479,7 +486,7 @@ export function createDocumentRenderer(options: DocumentRendererOptions): Render
       status: rendered.status,
       headers: {
         "content-type": FLIGHT_CONTENT_TYPE,
-        vary: INTERCEPTED_FROM_HEADER,
+        vary: `${INTERCEPTED_FROM_HEADER}, ${NOT_FOUND_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

package/rsc.js

@@ -50,7 +50,7 @@ import * as React from "react";
 import { use } from "react";
 // React's Flight server. Only this graph can load it: it refuses to evaluate
 // unless `react` resolved under the `react-server` condition.
-import { renderToReadableStream } from "react-server-dom-parcel/server";
+import { registerServerReference, renderToReadableStream } from "react-server-dom-parcel/server";
 
 import { noteRoute } from "@uniflowed/server/host";
 import { reportRequestError } from "@uniflowed/server/instrumentation";
@@ -68,9 +68,14 @@ import type {
   ResolvedSlot,
   RouteTable,
 } from "./internal/resolve.js";
-import { resolveFailure, resolveInterception, resolveMatch } from "./internal/resolve.js";
-import type { RouteParams, SearchParams } from "./internal/routing.js";
-import { RedirectError, nearestBoundary } from "./internal/routing.js";
+import {
+  pageSearchParams,
+  resolveFailure,
+  resolveInterception,
+  resolveMatch,
+} from "./internal/resolve.js";
+import type { RouteParams } from "./internal/routing.js";
+import { NotFoundError, RedirectError, nearestBoundary } from "./internal/routing.js";
 import { withServerRoute } from "./internal/server-route.js";
 
 export type { FlightRoot, RouteState } from "./internal/flight.js";
@@ -81,6 +86,36 @@ export { installRouting } from "./internal/base-path.js";
 // 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";
+// And the route handlers and the middleware, for the same reason: a `POST` a
+// `$route.js` answers writes to the same instance of a module that the page
+// reading it renders from (ubugeeei-prod/uf#1487).
+export { createDispatcher } from "./handler.js";
+export { createMiddlewareRunner } from "./middleware.js";
+
+/**
+ * Make a server action a value Flight can send to a Client Component.
+ *
+ * `@uniflowed/vite` calls this in the rsc graph on every callable export of a
+ * `"use server"` module, with the action id the build derived for it and its
+ * `module#export` name. React's `registerServerReference` marks the function
+ * as a server reference, so a Server Component may pass it, or a
+ * `.bind(null, …)` of it, to a Client Component as a prop. Flight writes the
+ * reference and any bound arguments instead of refusing a function, and the
+ * browser decodes it into a call over uf's JSON action wire
+ * (`callServerReference` in `./action.js`). See ubugeeei-prod/uf#1359.
+ *
+ * Calling the function is unchanged, and anything that is not a function is
+ * returned untouched. A function that no manifest row registered is still
+ * refused by Flight, which is what keeps an ordinary server function from
+ * being handed to the browser by accident.
+ */
+export function registerServerFunction<T>(fn: T, id: string, name: string): T {
+  if (typeof fn !== "function") {
+    return fn;
+  }
+  registerServerReference(fn, id, name);
+  return fn;
+}
 
 /** What a host may tell the renderer about one render. */
 export type FlightOptions = {|
@@ -117,6 +152,16 @@ export type FlightOptions = {|
    * render the intercepted tree.
    */
   readonly interceptedFrom?: string,
+  /**
+   * Render the URL's not-found page rather than its route: what a loader's
+   * `notFound()` would have rendered for it.
+   *
+   * What a browser asks for when a hydrated server action called `notFound()`
+   * and the route's error boundary caught it (ubugeeei-prod/uf#1489). The
+   * error is made here, in this graph, because the resolver tells a not-found
+   * by `instanceof` against its own copy of the class.
+   */
+  readonly notFound?: boolean,
   /** Stops the render, for a reader that went away. */
   readonly signal?: AbortSignal,
 |};
@@ -126,7 +171,7 @@ export type FlightRender =
   | {| readonly kind: "redirect", readonly status: 307 | 308, readonly location: string |}
   | {|
       readonly kind: "route",
-      readonly status: 200 | 401 | 403 | 404 | 500,
+      readonly status: 200 | 400 | 401 | 403 | 404 | 500,
       /** The payload, as React writes it. Read exactly once. */
       readonly stream: ReadableStream<Uint8Array>,
       /**
@@ -183,7 +228,8 @@ export function createFlightRenderer(options: {|
   return async function renderFlight(url: string, settings?: FlightOptions): Promise<FlightRender> {
     let resolved: ResolvedRoute;
     try {
-      const failure = settings?.failure;
+      const failure =
+        settings?.failure ?? (settings?.notFound === true ? { error: new NotFoundError() } : null);
       if (failure == null) {
         const defer = settings?.defer !== false;
         const intercepted = await resolveFlightInterception(
@@ -296,7 +342,7 @@ function pageElement(route: ResolvedRoute): React.Node {
       <DeferredPage
         page={route.page}
         params={route.params}
-        searchParams={route.searchParams}
+        searchParams={pageSearchParams(route)}
         loader={deferred}
       />
     );
@@ -305,19 +351,14 @@ function pageElement(route: ResolvedRoute): React.Node {
     <RoutePage
       page={route.page}
       params={route.params}
-      searchParams={route.searchParams}
+      searchParams={pageSearchParams(route)}
       data={route.data}
     />
   );
 }
 
 /** A route's page, with its loader's answer. */
-component RoutePage(
-  page: PageModule,
-  params: RouteParams,
-  searchParams: SearchParams,
-  data: mixed,
-) {
+component RoutePage(page: PageModule, params: RouteParams, searchParams: mixed, data: mixed) {
   const Page = pageComponent(page);
   // The route module's own export, looked up by route: `pageComponent` hands
   // back its `default` or `Page` as it is, so this is the same component on
@@ -337,7 +378,7 @@ component RoutePage(
 component DeferredPage(
   page: PageModule,
   params: RouteParams,
-  searchParams: SearchParams,
+  searchParams: mixed,
   loader: Promise<mixed>,
 ) {
   return <RoutePage page={page} params={params} searchParams={searchParams} data={use(loader)} />;
@@ -412,6 +453,7 @@ function renderFailure(resolved: ResolvedRoute): mixed {
   }
   return match (resolved.error) {
     {kind: "thrown", error: const error} => error,
+    {kind: "badRequest", ...} => undefined,
     {kind: "unauthorized"} => undefined,
     {kind: "forbidden"} => undefined,
   };

package/server-components.js

@@ -37,7 +37,7 @@ import type { Metadata } from "./internal/resolve.js";
 import type { RouteInfo, Router } from "./internal/runtime.js";
 import { serverRoute } from "./internal/server-route.js";
 
-export type { ErrorProps, LayoutProps, PageProps } from "./index.js";
+export type { ErrorProps, LayoutProps, PageProps, SearchParamsOf } from "./index.js";
 
 export type {
   AppProps,
@@ -81,6 +81,7 @@ export {
   ForbiddenError,
   NotFoundError,
   RedirectError,
+  SearchParamsError,
   UnauthorizedError,
   buildRoute,
   forbidden,
@@ -88,6 +89,7 @@ export {
   matchRoute,
   notFound,
   parseSearch,
+  parseSearchAll,
   permanentRedirect,
   redirect,
   routeErrorStatus,

package/server.js

@@ -537,6 +537,7 @@ function renderFailure(resolved: ResolvedRoute): mixed {
   }
   return match (resolved.error) {
     {kind: "thrown", error: const error} => error,
+    {kind: "badRequest", ...} => undefined,
     {kind: "unauthorized"} => undefined,
     {kind: "forbidden"} => undefined,
   };