@uniflowed/router 0.0.0-alpha.32 → 0.0.0-alpha.34

package/internal/runtime.js

@@ -463,11 +463,24 @@ export type RouteRecord = RoutingRouteRecord<
   LayoutModule,
   TemplateModule,
   LoadingModule,
+  ErrorModule,
 >;
 
-export type SlotRecord = RoutingSlotRecord<PageModule, LayoutModule>;
+export type SlotRecord = RoutingSlotRecord<
+  PageModule,
+  LayoutModule,
+  TemplateModule,
+  LoadingModule,
+  ErrorModule,
+>;
 
-export type SlotRouteRecord = RoutingSlotRouteRecord<PageModule, LayoutModule>;
+export type SlotRouteRecord = RoutingSlotRouteRecord<
+  PageModule,
+  LayoutModule,
+  TemplateModule,
+  LoadingModule,
+  ErrorModule,
+>;
 
 export type TemplateRecord = RoutingTemplateRecord<TemplateModule>;
 
@@ -487,6 +500,21 @@ export type RouteTable = RoutingRouteTable<
 
 export type RouteMatch = RoutingRouteMatch<RouteRecord>;
 
+type ResolvedTemplate = {|
+  readonly above: number,
+  readonly module: TemplateModule,
+|};
+
+type ResolvedSlotErrorBoundary = {|
+  readonly above: number,
+  readonly module: ?ErrorModule,
+|};
+
+type SlotErrorBoundaryLoader = {|
+  readonly above: number,
+  readonly module: () => Promise<ErrorModule>,
+|};
+
 /**
  * A match whose modules are loaded and whose loader has run or is running — or,
  * when `error` is set, the error page that stands in for it.
@@ -567,10 +595,7 @@ export type ResolvedRoute = {|
    * than walked to, and templates are accumulated on the walk down to a route
    * the URL never reached.
    */
-  readonly templates: $ReadOnlyArray<{|
-    readonly above: number,
-    readonly module: TemplateModule,
-  |}>,
+  readonly templates: $ReadOnlyArray<ResolvedTemplate>,
   /**
    * The slots this route renders, outermost first, already imported.
    *
@@ -580,6 +605,41 @@ export type ResolvedRoute = {|
    * belongs to the segment the walk went through.
    */
   readonly slots: $ReadOnlyArray<ResolvedSlot>,
+  /**
+   * Set when a client navigation was intercepted: this is then the route the
+   * navigation came from, still on screen, with the intercepting route in one
+   * of its slots.
+   *
+   * `null` or absent on every other resolution — which includes every one a
+   * server makes, because a document request is never intercepted. See
+   * [`resolveInterception`].
+   */
+  readonly interception?: ?Interception,
+|};
+
+/**
+ * What an intercepted navigation went to, and what it went there from.
+ *
+ * A route is resolved *for* a URL, and an intercepted navigation is the one
+ * case where the URL in the address bar is not the URL the page on screen was
+ * resolved for. The `ResolvedRoute` that carries this is the page the
+ * navigation started on — its `pathname`, `params` and `data` are that page's,
+ * because that page is what `children` still renders and what `useRoute()`
+ * still describes — and this is the other half: where the address bar went.
+ *
+ * `base` is the same page as it was before anything intercepted it. Kept rather
+ * than re-derived, because a second interception from inside the first — the
+ * next photo, from a photo already open in the modal — has to start from the
+ * page underneath rather than from a page that already has a modal in it, and
+ * going back from the second to the first has to find that page where it left
+ * it.
+ */
+export type Interception = {|
+  /** The URL the navigation went to: the one in the address bar. */
+  readonly pathname: string,
+  readonly search: string,
+  /** The route the navigation came from, as it was before it was intercepted. */
+  readonly base: ResolvedRoute,
 |};
 
 /**
@@ -600,7 +660,36 @@ export type ResolvedSlot = {|
   readonly page: ?PageModule,
   readonly params: RouteParams,
   readonly layouts: $ReadOnlyArray<LayoutModule>,
+  readonly loading: $ReadOnlyArray<{| readonly above: number, readonly module: LoadingModule |}>,
+  readonly templates: $ReadOnlyArray<ResolvedTemplate>,
+  readonly errorBoundary: ?ResolvedSlotErrorBoundary,
   readonly slots: $ReadOnlyArray<ResolvedSlot>,
+  /**
+   * The table record this slot was resolved from.
+   *
+   * Carried so a client navigation can ask the slots *on screen* whether they
+   * intercept where it is going. Interception is a question about the page a
+   * navigation starts on, and this is that page's own answer rather than a
+   * second match of the table that could arrive at different slots. Absent on
+   * a slot written by hand, which then intercepts nothing.
+   */
+  readonly record?: SlotRecord,
+  /**
+   * Set when this slot renders an intercepting route, or sits inside one: the
+   * URL that was intercepted.
+   *
+   * The slot's keys and its page's `searchParams` come from here rather than
+   * from the route on screen, because the route on screen is the page the
+   * navigation started on. Keying the modal's templates on that page's
+   * pathname would leave the second photo mounted as the first one.
+   */
+  readonly intercepted?: ?InterceptedUrl,
+|};
+
+/** The URL an intercepting route was matched against. */
+type InterceptedUrl = {|
+  readonly pathname: string,
+  readonly searchParams: SearchParams,
 |};
 
 // ---------------------------------------------------------------------------
@@ -835,12 +924,15 @@ async function resolveSlots(
   pathname: string,
   layoutCount: number,
   fallbackParams: RouteParams,
+  intercepted?: ?InterceptedUrl,
 ): Promise<$ReadOnlyArray<ResolvedSlot>> {
   if (records.length === 0) {
     return [];
   }
   return Promise.all(
-    records.map((record) => resolveSlot(record, pathname, layoutCount, fallbackParams)),
+    records.map((record) =>
+      resolveSlot(record, pathname, layoutCount, fallbackParams, intercepted),
+    ),
   );
 }
 
@@ -849,6 +941,7 @@ async function resolveSlot(
   pathname: string,
   layoutCount: number,
   fallbackParams: RouteParams,
+  intercepted?: ?InterceptedUrl,
 ): Promise<ResolvedSlot> {
   // Clamped exactly as a template's `above` is, and for the same reason: a
   // hand-written table, or a `(group)` between the layout and the route, can
@@ -860,7 +953,12 @@ async function resolveSlot(
     page: null,
     params: fallbackParams,
     layouts: [],
+    loading: [],
+    templates: [],
+    errorBoundary: null,
     slots: [],
+    record,
+    intercepted,
   };
 
   const matched = matchIn(record.routes, pathname);
@@ -875,9 +973,38 @@ async function resolveSlot(
     if (module == null) {
       return empty;
     }
-    return { ...empty, page: withoutLoader(module, record.defaultFile ?? record.name) };
+    return {
+      ...empty,
+      page: withoutLoader(module, record.defaultFile ?? record.name),
+      errorBoundary: await resolveSlotErrorBoundary(record.defaultErrorBoundary ?? null, 0),
+    };
   }
 
+  return (await resolveSlotRoute(record, matched, above, pathname, intercepted)) ?? empty;
+}
+
+/**
+ * One route inside a slot, imported: what the slot renders for a match.
+ *
+ * Shared by the two ways a slot comes to render a route — one of its own
+ * `routes`, matched against the URL, and one of its `intercepts`, matched
+ * against where a client navigation is going — so an intercepting page is
+ * composed exactly the way every other slot page is: inside its own layouts,
+ * fallbacks, templates and error boundary, with the slots those layouts
+ * declare.
+ *
+ * `null` when the page or a layout will not import, and what that means is the
+ * caller's to say. For a match it is an empty slot, for the reason
+ * [`resolveSlots`] gives; for an interception it is no interception, and the
+ * navigation goes where the URL says instead.
+ */
+async function resolveSlotRoute(
+  record: SlotRecord,
+  matched: RoutingRouteMatch<SlotRouteRecord>,
+  above: number,
+  pathname: string,
+  intercepted: ?InterceptedUrl,
+): Promise<?ResolvedSlot> {
   const route = matched.route;
   // Started together and awaited apart, so the two `await`s are not a
   // waterfall and each keeps the type its loader had.
@@ -886,24 +1013,236 @@ async function resolveSlot(
   const page = await pending;
   const layouts = await pendingLayouts;
   if (page == null) {
-    return empty;
+    return null;
   }
   const loaded = layouts.filter(Boolean);
   if (loaded.length !== layouts.length) {
-    return empty;
+    return null;
   }
+  const loading = await resolveLoadingRecords(route.loading ?? [], loaded.length);
+  const templates = await resolveTemplateRecords(route.templates ?? [], loaded.length);
+  const errorBoundary = await resolveSlotErrorBoundary(route.errorBoundary ?? null, loaded.length);
   return {
     name: record.name,
     above,
     page: withoutLoader(page, route.file),
     params: matched.params,
     layouts: loaded,
+    loading,
+    templates,
+    errorBoundary,
     // The slot's own layouts are what a nested slot is measured against, so
-    // the count handed down is this slot's rather than the route's.
-    slots: await resolveSlots(route.slots, pathname, loaded.length, matched.params),
+    // the count handed down is this slot's rather than the route's. A slot
+    // nested inside an interception is matched against the intercepted URL,
+    // and keyed on it, for the same reason the interception is.
+    slots: await resolveSlots(route.slots, pathname, loaded.length, matched.params, intercepted),
+    record,
+    intercepted,
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Interception
+// ---------------------------------------------------------------------------
+
+/**
+ * The page underneath: `resolved` itself, or what it was before an interception
+ * put something in one of its slots.
+ *
+ * Every question about where a navigation *starts* is asked of this rather than
+ * of the route on screen, because an interception is not a place a navigation
+ * can start from. The next photo, opened from inside the modal, is intercepted
+ * from the feed.
+ */
+function beneath(resolved: ResolvedRoute): ResolvedRoute {
+  return resolved.interception?.base ?? resolved;
+}
+
+/**
+ * The intercepting routes the slots on screen have for `pathname`.
+ *
+ * Only the slots on screen, and that is the whole of what "a navigation from
+ * inside `/feed`" means. A page under `app/feed/$layout.js` renders the layout
+ * that declares `@modal`, so the slot is in its tree and so are the slot's
+ * `intercepts`. A page outside that segment has no such slot in its tree —
+ * which is why a link to `/feed/photo/1` from `/about` is an ordinary
+ * navigation to the photo page, not an interception with nowhere to render.
+ *
+ * A slot that intercepts `pathname` is not looked inside: what it holds is
+ * about to be replaced, nested slots and all.
+ */
+function interceptingRoutes(
+  slots: $ReadOnlyArray<ResolvedSlot>,
+  pathname: string,
+): $ReadOnlyArray<SlotRouteRecord> {
+  const found: Array<SlotRouteRecord> = [];
+  for (const slot of slots) {
+    const matched = matchIn(slot.record?.intercepts ?? [], pathname);
+    if (matched != null) {
+      found.push(matched.route);
+    } else {
+      found.push(...interceptingRoutes(slot.slots, pathname));
+    }
+  }
+  return found;
+}
+
+/**
+ * `base`, with every slot on it that intercepts `url` rendering what it
+ * intercepts — or `null` when none of them does.
+ *
+ * # What stays, and what does not
+ *
+ * Everything that is not an intercepting slot stays exactly as it was, and that
+ * is the feature rather than a shortcut. `children` goes on rendering the page
+ * the reader navigated *from* — its data, its scroll position, whatever state
+ * its components are holding — and every other slot keeps what it was showing.
+ * An intercepted navigation changes the address bar and the slots that
+ * intercept it, and nothing else. Matching the rest against the new URL would
+ * be an ordinary navigation with a modal on top of it: the page underneath
+ * swapped for the page the URL names, which is precisely what interception
+ * exists not to do.
+ *
+ * Every slot that intercepts the URL renders it, not only the first, because
+ * slots are independent of each other: two named places may each have
+ * something to show for one URL, the way two slots each match one URL by their
+ * own routes.
+ *
+ * # Never on a server
+ *
+ * Nothing on the server calls this. A document request for an intercepted URL
+ * resolves the ordinary page, because a request carries where it is going and
+ * not what was on screen when it was made — which is what a reload, a shared
+ * link and a crawler all are.
+ *
+ * # When the interception cannot render
+ *
+ * A slot whose intercepting page will not import keeps what it had, and when no
+ * slot could render the interception this answers `null`: the navigation goes
+ * ahead as an ordinary one, and the reader gets the page the URL names — what a
+ * reload would have given them — rather than a click that did nothing. An
+ * intercepting page that exports a `loader`, which no slot page may, is the
+ * error boundary for the URL, the way any other slot page's is.
+ */
+async function resolveInterception(
+  table: RouteTable,
+  base: ResolvedRoute,
+  url: string,
+): Promise<?ResolvedRoute> {
+  const { pathname, search } = splitUrl(url);
+  const intercepted: InterceptedUrl = { pathname, searchParams: parseSearch(search) };
+  // The first slot that renders the interception, for the transition's name.
+  let first: ?ResolvedSlot = null;
+  const visit = (slots: $ReadOnlyArray<ResolvedSlot>): Promise<$ReadOnlyArray<ResolvedSlot>> =>
+    Promise.all(
+      slots.map(async (slot): Promise<ResolvedSlot> => {
+        const record = slot.record;
+        const matched = record == null ? null : matchIn(record.intercepts ?? [], pathname);
+        if (record == null || matched == null) {
+          return slot.slots.length === 0 ? slot : { ...slot, slots: await visit(slot.slots) };
+        }
+        const rendered = await resolveSlotRoute(record, matched, slot.above, pathname, intercepted);
+        if (rendered == null) {
+          return slot;
+        }
+        first = first ?? rendered;
+        return rendered;
+      }),
+    );
+
+  let slots: $ReadOnlyArray<ResolvedSlot>;
+  try {
+    slots = await visit(base.slots);
+  } catch (error) {
+    return resolveFailure(table, url, error);
+  }
+  if (first == null) {
+    return null;
+  }
+  return {
+    ...base,
+    slots,
+    // The intercepting page's own name, where it or a layout inside the slot
+    // declares one, so a stylesheet can tell a modal opening from a page
+    // arriving. The page underneath has not moved, so its name would say
+    // nothing about this arrival.
+    viewTransition: resolveViewTransition(first.page ?? {}, first.layouts),
+    interception: { pathname, search, base },
   };
 }
 
+/**
+ * The key an intercepted navigation writes into its history entry.
+ *
+ * One string in `history.state` rather than the resolved route, because the
+ * browser structured-clones the state and keeps it across a reload: it can hold
+ * a URL and nothing with a module in it. A URL is also all the entry needs —
+ * where the navigation came from, resolved again when that page is not the one
+ * on screen, and the entry's own URL for what intercepted it.
+ */
+const INTERCEPTED_FROM = "uf:intercepted-from";
+
+/**
+ * The state a history entry for `resolved` is written with.
+ *
+ * `null` for a navigation nothing intercepted, which is what every entry this
+ * router wrote was before interception existed.
+ */
+function historyStateFor(resolved: ResolvedRoute): mixed {
+  const interception = resolved.interception;
+  if (interception == null) {
+    return null;
+  }
+  return { [INTERCEPTED_FROM]: interception.base.pathname + interception.base.search };
+}
+
+/** Where the history entry holding `state` was intercepted from, if it was. */
+function interceptedFrom(state: mixed): ?string {
+  if (state == null || typeof state !== "object" || Array.isArray(state)) {
+    return null;
+  }
+  const from = state[INTERCEPTED_FROM];
+  return typeof from === "string" ? from : null;
+}
+
+/**
+ * `state` without the interception in it.
+ *
+ * What is left is handed back rather than cleared, because an entry's state is
+ * not only this router's to write: another library may have put something
+ * beside it.
+ */
+function withoutInterception(state: mixed): mixed {
+  if (state == null || typeof state !== "object" || Array.isArray(state)) {
+    return state;
+  }
+  const rest: { [string]: mixed } = {};
+  for (const key of Object.keys(state)) {
+    if (key !== INTERCEPTED_FROM) {
+      rest[key] = state[key];
+    }
+  }
+  return Object.keys(rest).length === 0 ? null : rest;
+}
+
+async function resolveSlotErrorBoundary(
+  boundary: ?SlotErrorBoundaryLoader,
+  layoutCount: number,
+): Promise<?ResolvedSlotErrorBoundary> {
+  if (boundary == null) {
+    return null;
+  }
+  const above = Math.min(boundary.above, layoutCount);
+  try {
+    return { module: await loadOnce(boundary.module), above };
+  } catch {
+    // Keep the declared depth even when the custom file fails to import. The
+    // framework fallback still contains the slot instead of escalating the
+    // page beside it.
+    return { module: null, above };
+  }
+}
+
 /**
  * A module, or `null` when it would not import.
  *
@@ -963,8 +1302,14 @@ function withoutLoader(module: PageModule, file: string): PageModule {
 async function resolveTemplates(
   route: RouteRecord,
   layoutCount: number,
-): Promise<$ReadOnlyArray<{| readonly above: number, readonly module: TemplateModule |}>> {
-  const records = route.templates ?? [];
+): Promise<$ReadOnlyArray<ResolvedTemplate>> {
+  return resolveTemplateRecords(route.templates ?? [], layoutCount);
+}
+
+async function resolveTemplateRecords(
+  records: $ReadOnlyArray<TemplateRecord>,
+  layoutCount: number,
+): Promise<$ReadOnlyArray<ResolvedTemplate>> {
   if (records.length === 0) {
     return [];
   }
@@ -1000,7 +1345,13 @@ async function resolveLoading(
   route: RouteRecord,
   layoutCount: number,
 ): Promise<$ReadOnlyArray<{| readonly above: number, readonly module: LoadingModule |}>> {
-  const records = route.loading ?? [];
+  return resolveLoadingRecords(route.loading ?? [], layoutCount);
+}
+
+async function resolveLoadingRecords(
+  records: $ReadOnlyArray<LoadingRecord>,
+  layoutCount: number,
+): Promise<$ReadOnlyArray<{| readonly above: number, readonly module: LoadingModule |}>> {
   if (records.length === 0) {
     return [];
   }
@@ -1812,6 +2163,20 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
   // that asked at click time would be asking a question whose answer decided
   // what it rendered.
   const navigation = navigationMode();
+  // The route on screen, for the code that runs after a render has finished.
+  //
+  // State is what renders, and a closure only sees the state of the render that
+  // made it: the `popstate` listener below is installed once and would go on
+  // reading the first route forever, and a navigation awaits between reading
+  // what is on screen and replacing it. Interception is what needs the answer —
+  // whether a navigation is intercepted is a question about the page it starts
+  // on — and `show` writes both in the same breath, so the two cannot disagree
+  // about what was last committed.
+  const shown = React.useRef<ResolvedRoute>(initial);
+  const show = (next: ResolvedRoute) => {
+    shown.current = next;
+    setResolved(next);
+  };
 
   const navigate = async (to: string, options?: NavigateOptions): Promise<void> => {
     if (!isBrowser()) {
@@ -1832,6 +2197,13 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
       }
       return;
     }
+    // Interception first, because it is a question about the page this
+    // navigation starts on rather than about the one it reaches. A slot on
+    // screen that intercepts the URL renders a page of its own, so whether the
+    // URL's ordinary page is in this bundle — the paragraph below — is not a
+    // question this navigation has to ask.
+    const origin = beneath(shown.current);
+    const intercepting = interceptingRoutes(origin.slots, target.pathname).length > 0;
     // The half of the split that is not about bytes. A route whose page is not
     // in this bundle is not a route this router can render, and pretending
     // otherwise is the silent break: the navigation would resolve to nothing
@@ -1839,21 +2211,29 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
     // has the document, so the browser does the navigation — which is what a
     // link does when there is no JavaScript at all, and what the anchor
     // `Link` renders would have done on its own.
-    const matched = matchRoute(routeTable().routes, target.pathname);
-    if (matched != null && !hasClientPage(matched.route)) {
-      window.location.assign(target.href);
-      return;
+    if (!intercepting) {
+      const matched = matchRoute(routeTable().routes, target.pathname);
+      if (matched != null && !hasClientPage(matched.route)) {
+        window.location.assign(target.href);
+        return;
+      }
     }
     setPending(true);
     try {
-      const nextResolved = await resolveMatch(routeTable(), next);
+      const nextResolved =
+        (intercepting ? await resolveInterception(routeTable(), origin, next) : null) ??
+        (await resolveMatch(routeTable(), next));
+      // An intercepted entry remembers where it was intercepted from, so back
+      // and forward can put the page underneath under it again. Every other
+      // entry is written the way it always was.
+      const state = historyStateFor(nextResolved);
       if (options?.replace === true) {
-        window.history.replaceState(null, "", next + target.hash);
+        window.history.replaceState(state, "", next + target.hash);
       } else {
-        window.history.pushState(null, "", next + target.hash);
+        window.history.pushState(state, "", next + target.hash);
       }
       const commit = () => {
-        setResolved(nextResolved);
+        show(nextResolved);
         setPending(false);
       };
       if (options?.transition === false) {
@@ -1861,7 +2241,13 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
       } else {
         withViewTransition(nextResolved.viewTransition, commit);
       }
-      if (options?.scroll !== false) {
+      // An intercepted navigation leaves the page underneath where the reader
+      // left it — the modal opens over the post they clicked, not over the top
+      // of the feed — so it moves the window only for a caller who asks with
+      // `scroll: true`. Every other navigation scrolls unless asked not to.
+      const scroll =
+        nextResolved.interception == null ? options?.scroll !== false : options?.scroll === true;
+      if (scroll) {
         if (target.hash !== "") {
           const element = document.getElementById(target.hash.slice(1));
           if (element != null) {
@@ -1881,6 +2267,16 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
     if (!isBrowser()) {
       return undefined;
     }
+    // An entry that says it was intercepted, under a provider that has only
+    // just mounted, is an entry the browser reloaded or restored — and the
+    // document on screen is what a request for its URL returned, which is the
+    // ordinary page. Clearing the mark makes the entry say what the reader is
+    // looking at, so coming back to it later renders this page again rather
+    // than a modal over a page they never saw one on.
+    const restored = window.history.state;
+    if (interceptedFrom(restored) != null) {
+      window.history.replaceState(withoutInterception(restored), "", window.location.href);
+    }
     // Nothing pushed a history entry, so there is nothing to pop back into: a
     // document-navigating application left this page when the link was
     // followed, and the back button asks the browser for the previous document
@@ -1890,8 +2286,37 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
     if (navigation === "document") {
       return undefined;
     }
+    const arrive = (nextResolved: ResolvedRoute) => {
+      // The back button is a navigation, and a navigation that animates in
+      // one direction and cuts in the other would read as a bug in the
+      // animation rather than as a decision.
+      withViewTransition(nextResolved.viewTransition, () => {
+        show(nextResolved);
+      });
+    };
     const onPopState = () => {
       const next = window.location.pathname + window.location.search;
+      // Back or forward into an entry an interception wrote: the page it was
+      // intercepted from, with the interception over it again. That page is
+      // resolved afresh only when it is not already the one underneath, so
+      // back from the second photo to the first leaves the feed exactly where
+      // it is.
+      const from = interceptedFrom(window.history.state);
+      if (from != null) {
+        const underneath = beneath(shown.current);
+        const origin =
+          underneath.pathname + underneath.search === from
+            ? Promise.resolve(underneath)
+            : resolveMatch(routeTable(), from);
+        origin
+          .then((page) => resolveInterception(routeTable(), page, next))
+          // Nothing on that page intercepts the entry's URL any more — a
+          // module that will not load, a table a development server rebuilt —
+          // so the entry is what its URL names.
+          .then((intercepted) => intercepted ?? resolveMatch(routeTable(), next))
+          .then(arrive);
+        return;
+      }
       // Back into a route this bundle has no page for. The history entry is
       // already the browser's — it moved before this listener ran — so the
       // document that belongs to it is what has to be fetched.
@@ -1900,14 +2325,7 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
         window.location.reload();
         return;
       }
-      resolveMatch(routeTable(), next).then((nextResolved) => {
-        // The back button is a navigation, and a navigation that animates in
-        // one direction and cuts in the other would read as a bug in the
-        // animation rather than as a decision.
-        withViewTransition(nextResolved.viewTransition, () => {
-          setResolved(nextResolved);
-        });
-      });
+      resolveMatch(routeTable(), next).then(arrive);
     };
     window.addEventListener("popstate", onPopState);
     return () => {
@@ -1928,6 +2346,19 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
         return;
       }
       const target = new URL(to, window.location.href);
+      // What the next render will need is decided the way the navigation will
+      // decide it: a URL a slot on screen intercepts renders that slot's page,
+      // so that is the module worth having, and the page the URL names is not.
+      const intercepting = interceptingRoutes(beneath(shown.current).slots, target.pathname);
+      if (intercepting.length > 0) {
+        await Promise.all(
+          intercepting.flatMap((route) => [
+            loadOnce(route.page),
+            ...route.layouts.map((layout) => loadOnce(layout)),
+          ]),
+        );
+        return;
+      }
       const matched = matchRoute(routeTable().routes, target.pathname);
       const load = matched?.route.page;
       if (matched == null || load == null) {
@@ -1950,16 +2381,28 @@ export component RouterProvider(url: string, initial: ResolvedRoute, children: R
         window.location.reload();
         return;
       }
-      const nextResolved = await resolveMatch(
-        routeTable(),
-        window.location.pathname + window.location.search,
-      );
+      // A refresh of an intercepted page refreshes both of its halves: the
+      // page underneath, resolved again for its own URL, and the interception
+      // resolved again over it. Resolving only the address bar's URL would
+      // close the modal, which is a navigation nobody asked for.
+      const interception = shown.current.interception;
+      const nextResolved =
+        interception == null
+          ? await resolveMatch(routeTable(), window.location.pathname + window.location.search)
+          : ((await resolveInterception(
+              routeTable(),
+              await resolveMatch(
+                routeTable(),
+                interception.base.pathname + interception.base.search,
+              ),
+              interception.pathname + interception.search,
+            )) ?? (await resolveMatch(routeTable(), interception.pathname + interception.search)));
       // No view transition, and it is the one place that is right: a refresh
       // is the same URL resolved again, so a transition would animate a page
       // into itself — a cross-fade between two frames of the same thing,
       // which is a flicker with a name.
       startTransition(() => {
-        setResolved(nextResolved);
+        show(nextResolved);
       });
     },
     back: () => {
@@ -2510,7 +2953,16 @@ function loadingComponent(module: LoadingModule): React.ComponentType<{||}> {
  * the React Compiler's aliasing inference gave up on, and a component it
  * cannot compile is a component it does not memoise.
  */
-function insideTemplates(element: React.Node, resolved: ResolvedRoute, depth: number): React.Node {
+function insideTemplates(
+  element: React.Node,
+  resolved: {
+    readonly pathname: string,
+    readonly params: RouteParams,
+    readonly templates: $ReadOnlyArray<ResolvedTemplate>,
+    ...
+  },
+  depth: number,
+): React.Node {
   let out = element;
   for (let index = resolved.templates.length - 1; index >= 0; index -= 1) {
     const entry = resolved.templates[index];
@@ -2589,17 +3041,48 @@ component SlotView(slot: ResolvedSlot) {
   if (page == null) {
     return null;
   }
+  // Except in an interception, whose URL is not the one the route on screen was
+  // resolved for. The page it renders reads the intercepted URL's query, and
+  // its templates and error boundary are keyed on the intercepted pathname — so
+  // a second photo opened in the modal remounts what the first one mounted, the
+  // way a navigation between two pages does.
+  const pathname = slot.intercepted?.pathname ?? resolved.pathname;
+  const searchParams = slot.intercepted?.searchParams ?? resolved.searchParams;
   const Page = pageComponent(page);
   let element: React.Node = (
-    <Page params={slot.params} searchParams={resolved.searchParams} data={undefined} />
+    <Page params={slot.params} searchParams={searchParams} data={undefined} />
   );
-  for (let depth = slot.layouts.length; depth > 0; depth -= 1) {
-    const Layout = layoutComponent(slot.layouts[depth - 1]);
-    element = (
-      <Layout {...slotsAt(slot.slots, depth)} params={slot.params}>
-        {element}
-      </Layout>
-    );
+  const templateContext = {
+    pathname,
+    params: slot.params,
+    templates: slot.templates,
+  };
+  for (let depth = slot.layouts.length; depth >= 0; depth -= 1) {
+    for (let index = slot.loading.length - 1; index >= 0; index -= 1) {
+      const boundary = slot.loading[index];
+      if (boundary.above !== depth) {
+        continue;
+      }
+      const Fallback = loadingComponent(boundary.module);
+      element = <Suspense fallback={<Fallback />}>{element}</Suspense>;
+    }
+    const errorBoundary = slot.errorBoundary;
+    if (errorBoundary != null && errorBoundary.above === depth) {
+      element = (
+        <RouteErrorBoundary module={errorBoundary.module} resetKey={`${pathname}:${slot.name}`}>
+          {element}
+        </RouteErrorBoundary>
+      );
+    }
+    element = insideTemplates(element, templateContext, depth);
+    if (depth > 0) {
+      const Layout = layoutComponent(slot.layouts[depth - 1]);
+      element = (
+        <Layout {...slotsAt(slot.slots, depth)} params={slot.params}>
+          {element}
+        </Layout>
+      );
+    }
   }
   return element;
 }