@uniflowed/router 0.2.0 → 0.4.0

package/internal/runtime.js

@@ -100,7 +100,13 @@ import {
   navigationKey,
   routeNavigations,
 } from "./navigation-cache.js";
-import { hasClientPage, matchRoute, nearestBoundary } from "./routing.js";
+import {
+  hasClientPage,
+  matchRoute,
+  nearestBoundary,
+  refuseScriptUrl,
+  scriptSchemeOf,
+} from "./routing.js";
 import type { RouteParams, SearchParams } from "./routing.js";
 import {
   beneath,
@@ -352,6 +358,70 @@ export type Router = {|
   readonly forward: () => void,
 |};
 
+/**
+ * The router of the `RouterProvider` on screen, or `null` when none is mounted.
+ *
+ * Module state, for the one caller that is not a component and still has to
+ * navigate: a server action reference whose action called `redirect()`
+ * (`../action.js`). A reference is a plain function that React calls from a
+ * form or a transition, with no hook to read the context through, and the
+ * navigation it owes is the one `router.push` would make — a client render
+ * under client navigation, a document load under document navigation.
+ */
+let mountedRouter: Router | null = null;
+
+/** Publish `router` as [`mountedRouter`] while its provider is mounted. */
+hook useMountedRouter(router: Router): void {
+  useEffect(() => {
+    mountedRouter = router;
+    return () => {
+      if (mountedRouter === router) {
+        mountedRouter = null;
+      }
+    };
+  });
+}
+
+/**
+ * Go where a server action's `redirect()` pointed.
+ *
+ * `location` is the address the action endpoint answered with — already under
+ * `app.router.basePath` for a path on this application — and `from` is the page
+ * the call was made from, which a relative `location` is resolved against: the
+ * visitor may have navigated while the action ran, and `redirect("next")` means
+ * next to the page that called it. A path on this origin is the mounted
+ * router's `push`, so the page underneath stays hydrated and a layout keeps its
+ * state, exactly as a `Link` to it would; another origin, or no router on
+ * screen, is the browser's document load. The promise settles when the
+ * navigation has, so a `useActionState` that awaited the action is not left
+ * pending on a page that has moved on.
+ *
+ * Only `http:` and `https:` are followed. `redirect()` refuses a script URL
+ * where it is built, but `location` arrived over the network, and
+ * `location.assign("javascript:…")` runs it in this page; a scheme this
+ * function would not follow is thrown as an error instead.
+ */
+export async function followActionRedirect(location: string, from: string): Promise<void> {
+  const target = new URL(location, new URL(from, window.location.href));
+  if (target.protocol !== "http:" && target.protocol !== "https:") {
+    throw new Error(
+      `@uniflowed/router: a server action redirected to a ${target.protocol} URL, which is not ` +
+        "followed. A redirect goes to an http or https address.",
+    );
+  }
+  const router = mountedRouter;
+  if (router == null || target.origin !== window.location.origin) {
+    window.location.assign(target.href);
+    return;
+  }
+  const applicationPath = applicationPathOf(target.pathname);
+  if (applicationPath == null) {
+    window.location.assign(target.href);
+    return;
+  }
+  await router.push(applicationPath + target.search + target.hash);
+}
+
 /** What `useRoute()` returns. */
 export type RouteInfo = {|
   readonly path: string,
@@ -679,6 +749,9 @@ component ModuleRouter(url: string, initial: ResolvedRoute, children: React.Node
     if (!isBrowser()) {
       return;
     }
+    // Before anything else: every path below may end in `location.assign`,
+    // which runs a `javascript:` URL in this page. See `refuseScriptUrl`.
+    refuseScriptUrl(to, "a router navigation");
     const target = new URL(addressOf(to), window.location.href);
     // The application path the route table is asked about, and the address the
     // history entry keeps: one URL, with and without `app.router.basePath`.
@@ -973,6 +1046,8 @@ component ModuleRouter(url: string, initial: ResolvedRoute, children: React.Node
     },
   };
 
+  useMountedRouter(router);
+
   const value: RouterState = {
     route: routeState(resolved),
     view: { kind: "modules", resolved },
@@ -1019,6 +1094,8 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
     if (!isBrowser()) {
       return;
     }
+    // As in `ModuleRouter`: a `javascript:` URL never reaches `location`.
+    refuseScriptUrl(to, "a router navigation");
     // A payload URL is an address, so it keeps the base path; the server takes
     // it off.
     const target = new URL(addressOf(to), window.location.href);
@@ -1243,6 +1320,8 @@ component FlightRouter(flight: Promise<FlightRoot>, children: React.Node) {
     },
   };
 
+  useMountedRouter(router);
+
   const value: RouterState = {
     route: root.route,
     view: { kind: "flight", tree: root.tree },
@@ -1781,6 +1860,28 @@ export hook useLinkStatus(): {| readonly pending: boolean |} {
   return { pending: useContext(LinkStatusContext) };
 }
 
+/**
+ * The click a `Link` hands its `onClick`: React's synthetic mouse event, as
+ * much of it as a link reads.
+ *
+ * Flow's React library no longer declares `SyntheticMouseEvent`, so the name
+ * this prop used did not resolve and every handler passed to it was unchecked.
+ * Stated structurally, as `@uniflowed/ui`'s `PartEvent` is; the event React
+ * passes has every member below.
+ */
+export type LinkClickEvent = {
+  readonly defaultPrevented: boolean,
+  readonly button: number,
+  readonly altKey: boolean,
+  readonly ctrlKey: boolean,
+  readonly metaKey: boolean,
+  readonly shiftKey: boolean,
+  readonly currentTarget: mixed,
+  readonly preventDefault: () => mixed,
+  readonly stopPropagation: () => mixed,
+  ...
+};
+
 /**
  * A client-side navigation.
  *
@@ -1813,8 +1914,10 @@ export component Link(
   transition?: boolean = true,
   children?: React.Node,
   className?: string,
-  onClick?: (event: SyntheticMouseEvent<HTMLAnchorElement>) => mixed,
-  ...rest: { readonly [string]: mixed }
+  onClick?: (event: LinkClickEvent) => mixed,
+  // `key` named out of the indexer: React never hands a component its key, and
+  // the rest is spread onto the anchor, where a `mixed` key would not do.
+  ...rest: { readonly key?: empty, readonly [string]: mixed }
 ) {
   const { router, navigation } = useRouterState();
   const [linkPending, startLinkTransition] = useTransition();
@@ -1835,7 +1938,7 @@ export component Link(
     }
   });
 
-  const handleClick = (event: SyntheticMouseEvent<HTMLAnchorElement>) => {
+  const handleClick = (event: LinkClickEvent) => {
     if (onClick != null) {
       onClick(event);
     }
@@ -1857,9 +1960,14 @@ export component Link(
       try {
         await router.push(to, { replace, transition });
       } catch (error) {
-        // A failed navigation falls back to the browser doing it.
+        // A failed navigation falls back to the browser doing it — unless what
+        // failed was the router refusing a script URL, which the browser would
+        // run rather than load. `isExternal` above does not catch every
+        // spelling of one: ` javascript:` with a leading space is a path to it.
         console.error(error);
-        window.location.assign(addressOf(to));
+        if (scriptSchemeOf(to) == null) {
+          window.location.assign(addressOf(to));
+        }
       }
     });
   };

package/internal/stream.js

@@ -100,12 +100,25 @@ type NodeDestination = {
 };
 
 /** The controller a `ReadableStream` source is handed. */
-type StreamController = {
-  readonly enqueue: (chunk: Uint8Array) => mixed,
-  readonly close: () => mixed,
+/**
+ * What `renderToPipeableStream` hands back, as much of it as is used here.
+ *
+ * Stated because the callbacks passed to the call use its result, and Flow
+ * cannot type a value whose definition depends on itself without being told.
+ */
+type PipeableStream = {
+  readonly pipe: (destination: NodeDestination) => mixed,
+  readonly abort: (reason?: mixed) => void,
   ...
 };
 
+type StreamController = interface {
+  // Methods, as a `ReadableStreamDefaultController`'s are: a method cannot be
+  // read off its object as a function-valued property.
+  enqueue(chunk: Uint8Array): mixed,
+  close(): mixed,
+};
+
 /**
  * A stream of bytes, as much of one as this module reads.
  *
@@ -113,13 +126,13 @@ type StreamController = {
  * result and `react-dom/static`'s `prelude` — and neither is typed by anything
  * uf can import, so the shape it is used through is stated here.
  */
-type ByteSource = {
-  readonly getReader: () => {
-    readonly read: () => Promise<{ readonly done?: boolean, readonly value?: Uint8Array, ... }>,
-    readonly releaseLock: () => mixed,
-    ...
+type ByteSource = interface {
+  // Methods, as a `ReadableStream`'s are: a class instance is not a subtype of
+  // an object type with function-valued properties.
+  getReader(): interface {
+    read(): Promise<{ readonly done?: boolean, readonly value?: Uint8Array, ... }>,
+    releaseLock(): mixed,
   },
-  ...
 };
 
 /** How the document is assembled around the app's markup. */
@@ -732,7 +745,7 @@ export function renderDocument(node: React.Node, options: RenderOptions): Promis
   const queue = new ChunkQueue();
   return new Promise((resolve, reject) => {
     if (typeof ReactDOMServer.renderToPipeableStream === "function") {
-      const { pipe, abort } = ReactDOMServer.renderToPipeableStream(node, {
+      const { pipe, abort }: PipeableStream = ReactDOMServer.renderToPipeableStream(node, {
         onShellReady() {
           pipe(queueDestination(queue));
           resolve(
@@ -1355,13 +1368,15 @@ function advanced(boundary: Boundary, html: string, rootDepth: number): Boundary
  *
  * `prerenderToNodeStream` hands back a Node `Readable` and `prerender` a web
  * `ReadableStream`, and which one a build has depends on which React entry
- * point exists — so the union is real rather than defensive, and `getReader`
- * is what tells them apart.
+ * point exists — so the union is real rather than defensive. Which one it is
+ * is asked of the class: a web stream is a `ReadableStream`, and a Node
+ * `Readable` is not. A test of a `getReader` property answered the same at run
+ * time, but a union of two structural types cannot be narrowed by one.
  */
 async function* preludeChunks(
-  prelude: ByteSource | AsyncIterable<string | Uint8Array>,
+  prelude: ReadableStream | AsyncIterable<string | Uint8Array>,
 ): AsyncGenerator<string, void, void> {
-  if (typeof prelude.getReader === "function") {
+  if (prelude instanceof ReadableStream) {
     yield* decoded(prelude);
     return;
   }

package/middleware.js

@@ -395,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.2.0",
+  "version": "0.4.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.2.0",
-    "@uniflowed/server": "0.2.0"
+    "@uniflowed/hooks": "0.4.0",
+    "@uniflowed/server": "0.4.0"
   }
 }

package/rsc-ssr.js

@@ -144,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;
@@ -248,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
@@ -405,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, {
@@ -477,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,
     };
@@ -601,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

@@ -412,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.
@@ -505,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 {