@uniflowed/router 0.0.0-alpha.40 → 0.0.0-alpha.41

package/native.js

@@ -28,6 +28,9 @@
 
 import type { RouteParams, RouteRecord, RouteTable } from "./internal/routing.js";
 import { hasClientPage, matchRoute, splitUrl } from "./internal/routing.js";
+import { nativeLinkHref } from "./internal/native-links.js";
+export { createNativeLinking } from "./internal/native-links.js";
+export type { NativeLinkSource } from "./internal/native-links.js";
 
 export type NativeNavigationKind = "push" | "replace" | "prefetch";
 
@@ -221,7 +224,7 @@ export function resolveNativeNavigation(
   to: string,
   kind?: NativeNavigationKind = "push",
 ): NativeNavigationEvent {
-  const href = normalizeNativeHref(to);
+  const href = normalizeNativeHref(to, table);
   const { pathname, search } = splitUrl(href);
   const matched = matchRoute(table.routes, pathname);
   if (matched == null) {
@@ -285,8 +288,13 @@ export function nativeScreenNavigationState(
   };
 }
 
-function normalizeNativeHref(to: string): string {
+function normalizeNativeHref(
+  to: string,
+  table: RouteTable<mixed, mixed, mixed, mixed, mixed>,
+): string {
   if (/^[A-Za-z][A-Za-z0-9+.-]*:/.test(to) || to.startsWith("//")) {
+    const claimed = nativeLinkHref(table, to);
+    if (claimed != null) return claimed;
     throw new NativeNavigationError(
       "external-url",
       `@uniflowed/router/native: ${to} is an external URL, and a native navigator needs an app route`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniflowed/router",
-  "version": "0.0.0-alpha.40",
+  "version": "0.0.0-alpha.41",
   "description": "The file-system router for Flow React applications: matching, layouts, loaders, navigation, server rendering and hydration.",
   "type": "module",
   "license": "MIT",
@@ -25,7 +25,9 @@
     "./routing": "./routing.js",
     "./package.json": "./package.json",
     "./handler": "./handler.js",
-    "./middleware": "./middleware.js"
+    "./middleware": "./middleware.js",
+    "./native-navigation": "./native-navigation.js",
+    "./http-client": "./http-client.js"
   },
   "files": [
     "action.js",
@@ -41,12 +43,16 @@
     "rsc.js",
     "server-components.js",
     "server.js",
+    "native-navigation.js",
+    "http-client.js",
     "!*.test.js"
   ],
   "peerDependencies": {
     "react": ">=19.2.3",
     "react-dom": ">=19.2.3",
-    "react-server-dom-parcel": ">=19.3.0"
+    "react-server-dom-parcel": ">=19.3.0",
+    "react-native": ">=0.86",
+    "@react-navigation/native": "^7.0.0"
   },
   "peerDependenciesMeta": {
     "react-dom": {
@@ -54,10 +60,16 @@
     },
     "react-server-dom-parcel": {
       "optional": true
+    },
+    "react-native": {
+      "optional": true
+    },
+    "@react-navigation/native": {
+      "optional": true
     }
   },
   "dependencies": {
-    "@uniflowed/hooks": "0.0.0-alpha.40",
-    "@uniflowed/server": "0.0.0-alpha.40"
+    "@uniflowed/hooks": "0.0.0-alpha.41",
+    "@uniflowed/server": "0.0.0-alpha.41"
   }
 }

package/rsc-ssr.js

@@ -27,7 +27,7 @@ import {
   installServerModules,
   readPayload,
 } from "./internal/flight-ssr.js";
-import { FLIGHT_CONTENT_TYPE, flightUrl } from "./internal/flight.js";
+import { FLIGHT_CONTENT_TYPE, INTERCEPTED_FROM_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";
@@ -312,9 +312,15 @@ export function createDocumentRenderer(options: DocumentRendererOptions): Render
 
   async function flight(
     url: string,
-    settings?: {| readonly onError?: (error: mixed) => void |},
+    settings?: {|
+      readonly onError?: (error: mixed) => void,
+      readonly interceptedFrom?: string,
+    |},
   ): Promise<FlightResponse> {
-    const rendered = await renderFlight(url, { onError: settings?.onError });
+    const rendered = await renderFlight(url, {
+      onError: settings?.onError,
+      interceptedFrom: settings?.interceptedFrom,
+    });
     if (rendered.kind === "redirect") {
       const { location } = rendered;
       // A redirect on this origin points at its target's payload, so the
@@ -330,7 +336,7 @@ export function createDocumentRenderer(options: DocumentRendererOptions): Render
     }
     return {
       status: rendered.status,
-      headers: { "content-type": FLIGHT_CONTENT_TYPE },
+      headers: { "content-type": FLIGHT_CONTENT_TYPE, vary: INTERCEPTED_FROM_HEADER },
       stream: rendered.stream,
       error: rendered.failure,
     };

package/rsc.js

@@ -59,7 +59,7 @@ import { ErrorRoutePage } from "./internal/error-view.js";
 import { type FlightRoot, routeState } from "./internal/flight.js";
 import { requireServerComponentsReact } from "./internal/react-version.js";
 import type { ErrorModule, PageModule, ResolvedRoute, ResolvedSlot } from "./internal/resolve.js";
-import { resolveFailure, resolveMatch } from "./internal/resolve.js";
+import { resolveFailure, resolveInterception, resolveMatch } from "./internal/resolve.js";
 import type { RouteParams, RouteTable, SearchParams } from "./internal/routing.js";
 import { RedirectError, nearestBoundary } from "./internal/routing.js";
 import { withServerRoute } from "./internal/server-route.js";
@@ -95,6 +95,14 @@ export type FlightOptions = {|
    * did not.
    */
   readonly failure?: {| readonly error: mixed |},
+  /**
+   * The page a browser was showing when it asked for this payload.
+   *
+   * A document request never sets it. A client navigation may, because only the
+   * browser knows the page it is navigating from, while only this renderer can
+   * render the intercepted tree.
+   */
+  readonly interceptedFrom?: string,
   /** Stops the render, for a reader that went away. */
   readonly signal?: AbortSignal,
 |};
@@ -155,12 +163,22 @@ export function createFlightRenderer(options: {|
     let resolved: ResolvedRoute;
     try {
       const failure = settings?.failure;
-      resolved =
-        failure == null
-          ? // `onMatch` records the route pattern on the request before the
-            // loader runs, so every line the loader logs names its route.
-            await resolveMatch(table, url, { defer: settings?.defer !== false, onMatch: noteRoute })
-          : await resolveFailure(table, url, failure.error);
+      if (failure == null) {
+        const defer = settings?.defer !== false;
+        const intercepted = await resolveFlightInterception(
+          table,
+          url,
+          settings?.interceptedFrom,
+          defer,
+        );
+        resolved =
+          intercepted ??
+          // `onMatch` records the route pattern on the request before the
+          // loader runs, so every line the loader logs names its route.
+          (await resolveMatch(table, url, { defer, onMatch: noteRoute }));
+      } else {
+        resolved = await resolveFailure(table, url, failure.error);
+      }
     } catch (error) {
       if (error instanceof RedirectError) {
         return { kind: "redirect", status: error.permanent ? 308 : 307, location: error.to };
@@ -196,6 +214,35 @@ export function createFlightRenderer(options: {|
   };
 }
 
+async function resolveFlightInterception(
+  table: RouteTable,
+  url: string,
+  from: ?string,
+  defer: boolean,
+): Promise<?ResolvedRoute> {
+  const baseUrl = usableInterceptionBase(from);
+  if (baseUrl == null) {
+    return null;
+  }
+  try {
+    const base = await resolveMatch(table, baseUrl, { defer });
+    return await resolveInterception(table, base, url);
+  } catch (error) {
+    if (error instanceof RedirectError) {
+      return null;
+    }
+    throw error;
+  }
+}
+
+function usableInterceptionBase(from: ?string): ?string {
+  if (from == null || !from.startsWith("/") || from.startsWith("//")) {
+    return null;
+  }
+  const hash = from.indexOf("#");
+  return hash === -1 ? from : from.slice(0, hash);
+}
+
 /**
  * The page element: the route's page with its data, the deferred page that
  * waits for its loader, or the error route's page.

package/server-components.js

@@ -71,7 +71,7 @@ export type {
   TwitterCard,
 } from "./internal/runtime.js";
 
-export { Link, RouteView, RouterProvider, routerView } from "./internal/runtime.js";
+export { Link, RouteView, RouterProvider, routerView, useLinkStatus } from "./internal/runtime.js";
 // `app.router.basePath`, for a Server Component that builds an address itself.
 // The rsc entry installs it; `./internal/base-path.js` has no directive, so this
 // graph gets the function rather than a reference to it.

package/server.js

@@ -23,7 +23,7 @@
 // `internal/stream.js` holds the mechanics and says which React renderer serves
 // which.
 
-import { noteRoute } from "@uniflowed/server/host";
+import { currentNonce, noteRoute } from "@uniflowed/server/host";
 import * as React from "react";
 
 import {
@@ -44,7 +44,6 @@ import {
 } from "./internal/runtime.js";
 
 import { type StreamDiagnostic, streamReporter } from "./internal/inspector.js";
-import { currentNonce } from "@uniflowed/server/host";
 
 import { redirectDocument, redirectResult, shellFor } from "./internal/shell.js";
 
@@ -288,7 +287,10 @@ export type Renderer = {|
    */
   readonly flight?: (
     url: string,
-    options?: {| readonly onError?: (error: mixed) => void |},
+    options?: {|
+      readonly onError?: (error: mixed) => void,
+      readonly interceptedFrom?: string,
+    |},
   ) => Promise<FlightResponse>,
 |};