@solidjs/router 2.0.0-next.36 → 2.0.0-next.37

package/dist/index.js

@@ -1,5 +1,5 @@
-import { getOwner, runWithOwner, createMemo, createRenderEffect, onCleanup, untrack, createContext, createSignal, useContext, NotReadyError, DEV, isPending, latest, createComponent, createRoot, Show, createEffect, OBSERVE, onSettled, getObserver, isHydrating, isHydratable, $TRACK, action as action$1 } from 'solid-js';
-import { registerElementClaim, delegateEvents, isServer, getRequestEvent, hasFlashCookie, clearFlashCookie, createComponent as createComponent$1, memo, dynamic, isServerFunction, getServerFunctionMetadata, getServerFunctionRPC, takeHydrationValue, isResponseEnvelope, REVALIDATE_HEADER, getHydrationWriter } from '@solidjs/web';
+import { getOwner, runWithOwner, createMemo, createRenderEffect, onCleanup, untrack, isPending, NotReadyError, DEV, latest, createContext, createSignal, useContext, createComponent, createOwner, createRoot, Show, onSettled, isHydrating, OBSERVE, getObserver, isHydratable, $TRACK, action as action$1 } from 'solid-js';
+import { registerElementClaim, delegateEvents, dispatchAsInteraction, isServer, getRequestEvent, hasFlashCookie, clearFlashCookie, createComponent as createComponent$1, memo, dynamicComponent, isServerFunction, getServerFunctionMetadata, getServerFunctionRPC, takeHydrationValue, isResponseEnvelope, REVALIDATE_HEADER, getHydrationWriter } from '@solidjs/web';
 import { REDIRECT_HEADER, decodeRedirectHeaderValue, subscribeFlightData, decodeResponsePayload, parseServerFunctionActionUrl, createServerReference } from '@solidjs/web/server-functions';
 
 const hasSchemeRegex = /^(?:[a-z0-9]+:)?\/\//i;
@@ -249,7 +249,9 @@ function setFormClaimHandler(handler) {
  *   included (parameter order aside)
  * - `data-active` — pathname exact or prefix match (the router's root, its
  *   base path, exact only)
- * - `data-pending` — the link is the target of an in-flight navigation
+ * - `data-pending` — the link is the target of an in-flight navigation;
+ *   opt-in through `createRouter({ links: pendingLinks })`. Without the
+ *   plugin, claims never read pending state and the sweep does not track it.
  *
  * The matching rule is `matchLink`, shared with `useLinkState`. The router
  * only touches an `aria-current` it wrote itself: one the author set (a
@@ -264,8 +266,9 @@ function setFormClaimHandler(handler) {
  * are the same one-shot untracked refresh, reading the element's current
  * `href` from the DOM.
  */
-function setupLinkClaims(router, explicitLinks) {
+function setupLinkClaims(router, explicitLinks, links) {
   const basePath = router.base.path();
+  const plugin = links && links(router, basePath);
   // per-element record; `owned` is whether the `aria-current` on the element
   // is the router's, so it never writes over or removes an authored one
   const claimed = new WeakMap();
@@ -299,7 +302,7 @@ function setupLinkClaims(router, explicitLinks) {
     // read reactive sources unconditionally so the owning effect stays
     // subscribed even while the anchor is not router-managed
     const location = router.location;
-    const routing = router.isRouting();
+    const routing = plugin && plugin.track();
     const url = managedUrl(a);
     const target = url && url.pathname + url.search;
     // no per-anchor `end` opt-out like useLinkState has
@@ -307,13 +310,7 @@ function setupLinkClaims(router, explicitLinks) {
       active,
       current
     } = matchLink(location, target, basePath);
-    // effects observe the committed location during a transition, so the
-    // in-flight target comes from pendingTarget — readable here because the
-    // isRouting write flushes after the target is assigned
-    const pending = routing && !!router.pendingTarget && matchLink({
-      pathname: router.pendingTarget.value,
-      search: ""
-    }, target, basePath).active;
+    const pending = !!routing && plugin.pending(target);
     return {
       active,
       pending,
@@ -326,7 +323,7 @@ function setupLinkClaims(router, explicitLinks) {
     current
   }) {
     active ? a.setAttribute("data-active", "") : a.removeAttribute("data-active");
-    pending ? a.setAttribute("data-pending", "") : a.removeAttribute("data-pending");
+    if (plugin) pending ? a.setAttribute("data-pending", "") : a.removeAttribute("data-pending");
     // Ownership is read against the element, not just the record. A
     // server-component morph resets attributes to the server HTML, which
     // never carries router link state, then re-claims: an owned value that
@@ -346,9 +343,10 @@ function setupLinkClaims(router, explicitLinks) {
   const refresh = (a, rec) => untrack(() => apply(a, rec, linkState(a)));
 
   // The one subscription for every anchor: compute tracks the sources
-  // linkState derives from (the in-flight pendingTarget is readable in the
-  // effect phase because the isRouting write flushes after the target is
-  // assigned), the effect phase sweeps the registry untracked.
+  // linkState derives from (with the plugin, its pending read — the
+  // in-flight target is readable in the effect phase because the isRouting
+  // write flushes after the target is assigned), the effect phase sweeps the
+  // registry untracked.
   //
   // `transparent` keeps the effect invisible to the hydration id scheme.
   // This setup is client-only, so an id-consuming node here has no server
@@ -356,7 +354,7 @@ function setupLinkClaims(router, explicitLinks) {
   // slot — lazy-route lookups miss and hydration leaves server nodes
   // unclaimed. (The option is honored by the runtime but missing from the
   // published EffectOptions type, hence the cast.)
-  createRenderEffect(() => (router.location.pathname, router.location.search, router.isRouting()), () => registry.forEach(a => refresh(a, claimed.get(a))), {
+  createRenderEffect(() => (router.location.pathname, router.location.search, plugin && plugin.track()), () => registry.forEach(a => refresh(a, claimed.get(a))), {
     transparent: true
   });
   onCleanup(registerElementClaim(node => {
@@ -432,12 +430,14 @@ function setupNativeEvents({
       const to = router.parsePath(url.pathname + url.search + url.hash);
       const state = a.getAttribute("state");
       evt.preventDefault();
-      navigateFromRoute(to, {
+      // Only a click the router acts on joins the event's interaction: this
+      // listener hears every click on the document.
+      dispatchAsInteraction(evt, () => navigateFromRoute(to, {
         resolve: false,
         replace: a.hasAttribute("replace"),
         scroll: !a.hasAttribute("noscroll"),
         state: state ? JSON.parse(state) : undefined
-      });
+      }));
     }
     function handleAnchorPreload(evt) {
       const res = handleAnchor(evt);
@@ -477,10 +477,12 @@ function setupNativeEvents({
       const data = new FormData(form, evt.submitter);
       Promise.resolve().then(function () { return serverForms; }).then(m => m.submitServerForm(router, path, form, data));
     }
+    const handleSubmit = evt => dispatchAsInteraction(evt, () => handleFormSubmit(evt));
 
     // ensure delegated event run first
     delegateEvents(["click", "submit"]);
     document.addEventListener("click", handleAnchorClick);
+    // preloads are not interactions: those listeners run outside any frame
     if (preload) {
       document.addEventListener("mousemove", handleAnchorMove, {
         passive: true
@@ -492,7 +494,7 @@ function setupNativeEvents({
         passive: true
       });
     }
-    document.addEventListener("submit", handleFormSubmit);
+    document.addEventListener("submit", handleSubmit);
     onCleanup(() => {
       document.removeEventListener("click", handleAnchorClick);
       if (preload) {
@@ -500,7 +502,7 @@ function setupNativeEvents({
         document.removeEventListener("focusin", handleAnchorPreload);
         document.removeEventListener("touchstart", handleAnchorPreload);
       }
-      document.removeEventListener("submit", handleFormSubmit);
+      document.removeEventListener("submit", handleSubmit);
     });
   };
 }
@@ -610,7 +612,7 @@ function createPathsProxy(renderPath = p => p, base = "") {
 
 // The light half of server component routes: the brand the router core reads
 // off a route `component`, and the derivation of a route's call arguments.
-// Deliberately free of `query`/`dynamic` — routing.ts imports this module,
+// Deliberately free of `query`/`dynamicComponent` — routing.ts imports this module,
 // and routing.ts is in every app's eager graph. The heavy half (the helper
 // that builds the branded component) lives in serverRouteComponent.ts and only
 // enters a bundle when an app calls `serverRouteComponent()`.
@@ -674,6 +676,86 @@ function serverRouteArgsEqual(a, b) {
   return shallowEqual(a.params, b.params) && shallowEqual(a.search, b.search);
 }
 
+/**
+ * Pending navigation state, for the opt-in readers only: `useIsRouting`,
+ * `useLinkState().pending` and the `pendingLinks` claims plugin. `isPending`
+ * and `latest` are UI affordances — the router's own coordination reads its
+ * location writes and their `onSettled` instead — so an app that renders
+ * none of these never bundles Solid's verdict machinery.
+ */
+
+const routing = new WeakMap();
+
+/** Whether a navigation is in flight: one memo per router, under its owner. */
+function routingState(router) {
+  let read = routing.get(router);
+  if (!read) {
+    const {
+      location,
+      matches,
+      _source: source
+    } = router;
+    // `transparent`: created on first use rather than at router setup, so it
+    // must not take a hydration id — the server may never create it, or
+    // create it at a different point.
+    const pending = runWithOwner(router._owner, () => createMemo(() => isPending(() => {
+      try {
+        matches();
+      } catch (e) {
+        if (e instanceof NotReadyError) throw e;
+      }
+      location.search;
+      location.hash;
+    }), {
+      transparent: true,
+      ...(DEV && {
+        name: "routingPending"
+      })
+    }));
+    read = () => pending() || isPending(source);
+    routing.set(router, read);
+  }
+  return read;
+}
+
+/**
+ * The target of the in-flight programmatic navigation, if any. A
+ * back/forward traversal (`_navigation` -1) is not a link's target.
+ */
+function pendingTarget(router) {
+  if (!routingState(router)()) return;
+  const target = latest(router._source);
+  return target._navigation && target._navigation > 0 ? target : undefined;
+}
+
+/** Whether `to` is the destination of the in-flight navigation. */
+function linkPending(router, to, base, end) {
+  const target = pendingTarget(router);
+  return !!target && matchLink({
+    pathname: target.value,
+    search: ""
+  }, to, base, end).active;
+}
+
+/**
+ * Opt-in `data-pending` for plain anchors. Marks claimed links whose path
+ * covers the in-flight destination of a link click or `navigate()` (not
+ * back/forward), until it lands. Agrees with `useLinkState().pending`, which
+ * works without it. `aria-current` and `data-active` need no plugin.
+ *
+ * @example
+ * ```ts
+ * import { createRouter, pendingLinks } from "@solidjs/router";
+ *
+ * const Router = createRouter({ routes, links: pendingLinks });
+ * // CSS: a[data-pending] { opacity: .6 }
+ * ```
+ */
+const pendingLinks = (router, base) => ({
+  track: routingState(router),
+  pending: target => linkPending(router, target, base)
+});
+
 const MAX_REDIRECTS = 100;
 
 /**
@@ -759,6 +841,8 @@ const useLocation = () => useRouter().location;
 /**
  * Retrieves a signal that indicates whether the router is currently processing a navigation.
  * Useful for showing pending navigation state while the next route and its data settle.
+ * This is the way to read routing state: `RouterContext` doesn't carry `isRouting`.
+ * For the in-flight destination, read the location with Solid's `isPending`/`latest`.
  * 
  * @example
  * ```js
@@ -771,7 +855,7 @@ const useLocation = () => useRouter().location;
  * );
  * ```
  */
-const useIsRouting = () => useRouter().isRouting;
+const useIsRouting = () => routingState(useRouter());
 
 /**
  * `useMatch` takes an accessor that returns the path and creates a `Memo` that returns match information if the current path matches the provided path.
@@ -959,10 +1043,7 @@ const useLinkState = (href, options = {}) => {
     // observe the committed location during a transition
     pending: createMemo(() => {
       state(); // location dependency: mid-flight target swaps recompute
-      return router.isRouting() && !!router.pendingTarget && matchLink({
-        pathname: router.pendingTarget.value,
-        search: ""
-      }, to(), base, options.end).active;
+      return linkPending(router, to(), base, options.end);
     })
   };
 };
@@ -1320,7 +1401,12 @@ function createRouterContext(integration, branches, getContext, options = {}) {
       _navigation: isServer ? undefined : 1
     });
   }
-  const location = createLocation(() => source().value, () => source().state, utils.queryWrapper);
+
+  // The flushed world — what `latest(source)` answers — as the location's own
+  // memo sees it: it recomputes under the transition that carries a write,
+  // never for a write of this same tick (A28).
+  let flushed = initialSource;
+  const location = createLocation(() => (flushed = source()).value, () => source().state, utils.queryWrapper);
   // The flash cookie is consumed eagerly: its one-shot clear (Set-Cookie)
   // must be appended before streaming flushes the response headers, and an
   // unread outcome must not haunt a later request's render. Only detection
@@ -1397,7 +1483,9 @@ function createRouterContext(integration, branches, getContext, options = {}) {
   // NotReadyError's source must be a reactive async node, not the raw
   // Promise. Keep one reader per boundary for this router owner so rejection
   // is delivered through the graph's error channel and resolution wakes the
-  // parked matches computation.
+  // parked matches computation. `transparent`: the reader exists on the
+  // client only (the server parks `matches` on the promise directly), so it
+  // must not take a hydration id the server never allocated.
   const routerOwner = getOwner();
   const lazyReaders = new WeakMap();
   const readLazySubtree = record => {
@@ -1406,8 +1494,11 @@ function createRouterContext(integration, branches, getContext, options = {}) {
       read = runWithOwner(routerOwner, () => createMemo(() => {
         const result = resolveLazySubtree(record);
         return result instanceof Promise ? result.then(() => undefined) : undefined;
-      }, DEV && {
-        name: "lazyRoutes"
+      }, {
+        transparent: true,
+        ...(DEV && {
+          name: "lazyRoutes"
+        })
       }));
       lazyReaders.set(record, read);
     }
@@ -1442,28 +1533,15 @@ function createRouterContext(integration, branches, getContext, options = {}) {
   }, DEV && {
     name: "matches"
   });
-  const routingPending = createMemo(() => isPending(() => {
-    try {
-      matches();
-    } catch (e) {
-      if (e instanceof NotReadyError) throw e;
-    }
-    location.search;
-    location.hash;
-  }), DEV && {
-    name: "routingPending"
-  });
-  const isRouting = () => routingPending() || isPending(source);
+  const headedLocation = () => isServer ? untrack(source) : flushed;
+  // A flushed navigation write whose settle has not run is still in flight.
+  const unsettled = change => change._navigation !== undefined && !!integration.settled && !integration.settled(change);
   const transitionIntent = () => {
-    if (!isPending(source)) return;
-    const navigation = latest(source)._navigation;
+    const head = headedLocation();
+    if (!unsettled(head)) return;
+    const navigation = head._navigation;
     return navigation === -1 ? "native" : navigation && navigation > 0 ? "navigate" : undefined;
   };
-  const pendingNavigation = () => {
-    if (!isRouting()) return;
-    const target = latest(source);
-    return target._navigation && target._navigation > 0 ? target : undefined;
-  };
   const buildParams = () => mergeParams(matches());
   const wrapParams = utils.paramsWrapper ? getParams => utils.paramsWrapper(getParams, branches) : getParams => createMemoObject(getParams);
   const params = wrapParams(buildParams);
@@ -1481,11 +1559,9 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     location,
     params,
     wrapParams,
-    isRouting,
     intent: transitionIntent,
-    get pendingTarget() {
-      return pendingNavigation();
-    },
+    _source: source,
+    _owner: routerOwner,
     renderPath,
     parsePath,
     navigatorFactory,
@@ -1546,10 +1622,10 @@ function createRouterContext(integration, branches, getContext, options = {}) {
       // the destination the leave guard is told all read it. A write of this
       // same tick is not in it (A28) — see `compose` below.
       //
-      // A redirect hop: the previous navigation is still pending, or has landed
-      // but not yet reached history (a guard redirecting in the landing flush
-      // — its destination was never shown either way).
-      const headed = latest(source);
+      // A redirect hop: the previous navigation's write has not settled — it
+      // is still held, or a guard is redirecting in its landing flush — so its
+      // destination was never shown.
+      const headed = headedLocation();
 
       // A composed target (`setSearchParams`) is a function of where the
       // router is heading, an unflushed write of this tick included. Only
@@ -1579,7 +1655,7 @@ function createRouterContext(integration, branches, getContext, options = {}) {
         resolvedTo = resolveTarget(to);
         if (resolvedTo === undefined) throw unroutable(to);
       }
-      const navigationDepth = !isServer && headed._navigation !== undefined && headed._navigation > 0 && (isPending(source) || integration.inflight?.() === headed) ? headed._navigation : 0;
+      const navigationDepth = !isServer && headed._navigation !== undefined && headed._navigation > 0 && unsettled(headed) ? headed._navigation : 0;
       if (navigationDepth >= MAX_REDIRECTS) {
         throw new Error("Too many redirects");
       }
@@ -1833,9 +1909,12 @@ function Routes(props) {
   // they stay subscribed to `matches` and crash on a later navigation (#451)
   onCleanup(() => disposers.forEach(dispose => dispose()));
   // Route roots must outlive re-runs of the `routeStates` memo below, so they
-  // are created under the owner of this component rather than the memo's
-  // computation (which disposes its children every time it re-runs).
-  const owner = getOwner();
+  // are created under an owner of this component rather than the memo's
+  // computation (which disposes its children every time it re-runs). A
+  // dedicated one, created before the memo: the roots draw hydration ids from
+  // its counter, so the ids don't depend on whether the memo first parked on
+  // a lazy subtree (the server's render can park where the client's doesn't).
+  const owner = createOwner();
   const routeStates = createMemo(prev => {
     // While a lazy subtree resolves, `matches()` is not ready and this
     // computation parks with it — no route contexts are created against
@@ -2127,6 +2206,7 @@ function memoryHistory(initial = "/") {
 }
 
 const STORAGE_KEY = "solid-router:scroll";
+const AUTO_KEY = "solid-router:scroll-auto";
 
 /**
  * Explicit scroll restoration for back/forward navigation. The browser's
@@ -2141,7 +2221,7 @@ const STORAGE_KEY = "solid-router:scroll";
  * so restoration survives reloads, which `scrollRestoration = "manual"`
  * otherwise disables.
  *
- * Restoration is a single scroll once routing settles — the same strategy
+ * Restoration is a single scroll once the traversal settles — the same strategy
  * SvelteKit, TanStack Router and React Router use. Settling after the
  * transition commits is what makes the offset reachable; chasing a still-
  * growing document afterwards (a ResizeObserver re-asserting the offset as
@@ -2151,17 +2231,49 @@ const STORAGE_KEY = "solid-router:scroll";
  * layout changes can feed it back into itself. Content that commits after the
  * transition settles — an image without reserved space, a boundary below the
  * fold — keeps whatever offset the document can hold.
+ *
+ * A server-rendered document load is the exception: the browser restores it
+ * natively once the document — streamed boundaries included — has loaded,
+ * which a restore at the first client flush cannot match. So an entry is
+ * handed back to the browser (`auto`) whenever its document may unload
+ * (pagehide), and a hydrating router arriving on a handed-back entry leaves
+ * the restore to the browser: it does not scroll, and it takes the entry back
+ * (`manual`) only after load or at the first client navigation, whichever
+ * comes first. A programmatic scroll during the load cancels the native
+ * restore in Firefox and WebKit, and WebKit restores just after the load
+ * event, so a `manual` write before then — inside a load listener included —
+ * suppresses it; the write waits a task. Handed-back depths are tracked here
+ * rather than read from `history.scrollRestoration`, which Firefox reports as
+ * the mode before pagehide after a reload. An entry this router pushed and
+ * never handed back stays `manual` and gets no native restore, so the router
+ * restores it as on a client-rendered load.
  */
-function createScrollRestoration() {
-  window.history.scrollRestoration = "manual";
+function createScrollRestoration(hydrating) {
+  const h = window.history;
   // the current entry needs its depth stamp for captures to have a key, even
   // if something replaced history.state after the adapter stamped it
   saveCurrentDepth();
+  const depth = () => window.history.state && window.history.state._depth;
   let positions = {};
+  let handedBack = {};
   try {
     positions = JSON.parse(sessionStorage.getItem(STORAGE_KEY)) || {};
+    handedBack = JSON.parse(sessionStorage.getItem(AUTO_KEY)) || {};
   } catch {}
-  const depth = () => window.history.state && window.history.state._depth;
+  const manual = () => {
+    h.scrollRestoration = "manual";
+    const d = depth();
+    if (d != null) delete handedBack[d];
+  };
+  const d = depth();
+  let deferred = !!hydrating && (h.scrollRestoration === "auto" || d != null && !!handedBack[d]);
+  if (!deferred) manual();
+  const claim = () => {
+    if (!deferred) return;
+    deferred = false;
+    manual();
+  };
+  let timer;
   let programmatic = false;
   let pending;
   const unbind = [bindEvent(window, "scroll", () => {
@@ -2170,10 +2282,16 @@ function createScrollRestoration() {
     // the user took over — a pending restore would yank them
     if (!programmatic) pending = undefined;
   }), bindEvent(window, "pagehide", () => {
+    h.scrollRestoration = "auto";
+    const d = depth();
+    if (d != null) handedBack[d] = 1;
     try {
       sessionStorage.setItem(STORAGE_KEY, JSON.stringify(positions));
+      sessionStorage.setItem(AUTO_KEY, JSON.stringify(handedBack));
     } catch {}
-  })];
+  }), bindEvent(window, "pageshow", e => {
+    if (e.persisted) manual();
+  }), bindEvent(window, "load", () => deferred && (timer = setTimeout(claim))), () => clearTimeout(timer)];
   const restore = () => {
     if (pending == null) return;
     const y = positions[pending];
@@ -2186,42 +2304,38 @@ function createScrollRestoration() {
     programmatic = false;
   };
   return {
-    /** When the adapter notifies a traversal: mark the target for restoration. */
+    /**
+     * When the adapter notifies a traversal: mark the target and restore once
+     * the transition carrying it settles. The adapter notifies right before
+     * the location write, in the same tick, so the settle is that write's —
+     * a same-URL traversal included, which no location key would see.
+     */
     onPop() {
+      claim();
       pending = depth();
+      runWithOwner(null, () => onSettled(restore));
     },
+    /** The initial page settled: restore a reload/back_forward arrival. */
+    settled: () => restore(),
+    /** Before a client navigation writes history: the entry it creates copies the current mode. */
+    beforeWrite: claim,
     /** After a push: forward entries died, and this depth may be reused. */
     onPush() {
       const d = depth();
-      if (d != null) for (const k in positions) +k >= d && delete positions[k];
+      if (d != null) {
+        for (const k in positions) +k >= d && delete positions[k];
+        for (const k in handedBack) +k >= d && delete handedBack[k];
+      }
     },
-    create(router) {
-      // Restore once the traversal has settled: key on the location (a fully
-      // synchronous pop commits without isRouting ever flipping) and on
-      // isRouting, which reports in-flight transitions — native pops
-      // included — and holds the restore until they commit. restore() no-ops
-      // unless a traversal marked a target, so push navigations are inert.
-      // `transparent` keeps the effect invisible to the hydration id scheme —
-      // same reasoning as the link-claims effect (claims.ts): this setup is
-      // client-only, so an id-consuming node here has no server counterpart
-      // and every hydration id allocated after it shifts by one child slot.
-      // The visible failure is any <Loading> content that settled before the
-      // shell flush (a cache hit, a preloaded query): its serialized value and
-      // inlined markup are keyed under the server's ids, the shifted client
-      // misses both, recomputes, and re-renders the route fresh — duplicating
-      // the server DOM and leaving it inert.
-      createEffect(() => ({
-        url: router.location.pathname + router.location.search + router.location.hash,
-        routing: router.isRouting()
-      }), current => {
-        if (!current.routing) restore();
-      }, {
-        transparent: true
-      });
+    create() {
       onCleanup(() => unbind.forEach(u => u()));
       // reload/back_forward document loads land on an existing entry (a fresh
-      // navigation starts a new one and belongs at the top); the effect's
-      // initial run performs the restore after first render
+      // navigation starts a new one and belongs at the top); the router calls
+      // `settled` once the initial page has; a deferred arrival is the browser's
+      if (deferred) {
+        document.readyState === "complete" && claim();
+        return;
+      }
       const [nav] = performance.getEntriesByType?.("navigation");
       if (nav && nav.type !== "navigate") pending = depth();
     }
@@ -2237,6 +2351,7 @@ function withScrollRestoration(history, restoration) {
   return {
     ...history,
     set(next) {
+      restoration.beforeWrite();
       history.set(next);
       next.replace || restoration.onPush();
     },
@@ -2384,8 +2499,8 @@ function describeInitial(match, location) {
 /** Wraps a history adapter in the integration signal the router core consumes. Must run under a reactive owner. */
 function createIntegration(history, match) {
   let committing = false;
-  // Written, not yet in history (see `RouterIntegration.inflight`).
-  let inflight;
+  // Writes whose transition has landed (see `RouterIntegration.settled`).
+  const settled = new WeakSet();
   const wrap = value => typeof value === "string" ? {
     value
   } : value;
@@ -2404,14 +2519,16 @@ function createIntegration(history, match) {
       // the no-op rule compares against it, so `navigate()` behind another
       // write in one handler sees that write rather than the flushed world.
       write(headed => (written = resolveLocationWrite(headed, next)) || headed);
-      if (written && written._navigation && written._navigation > 0) {
+      if (written && written._navigation) {
         const next = written;
-        inflight = next;
         // Register out of band so a destination error boundary replacing the
-        // Router subtree cannot suppress the winning history commit.
+        // Router subtree cannot suppress the winning history commit. The
+        // settle is tied to the transition carrying the write: it fires when
+        // that lands, a rejection included, and a superseded write's settle
+        // fires with the transition that absorbed it.
         runWithOwner(null, () => onSettled(() => {
-          if (inflight === next) inflight = undefined;
-          if (read() !== next) return;
+          settled.add(next);
+          if (next._navigation < 0 || read() !== next) return;
           committing = true;
           try {
             history.set(next);
@@ -2445,7 +2562,7 @@ function createIntegration(history, match) {
   }));
   return {
     signal,
-    inflight: () => inflight,
+    settled: write => settled.has(write),
     utils: history.utils
   };
 }
@@ -2510,7 +2627,7 @@ function createRouter(config) {
     let restoration;
     let history = config.history;
     if (!isServer && (config.scrollRestoration ?? !history)) {
-      restoration = createScrollRestoration();
+      restoration = createScrollRestoration(isHydrating());
       history = withScrollRestoration(history || browserHistory(), restoration);
     }
     const integration = isServer ? staticIntegration(props.url, config.history && config.history.utils) : createIntegration(history || browserHistory(), matchPath);
@@ -2530,10 +2647,14 @@ function createRouter(config) {
         actionBase: config.actionBase,
         transformUrl: config.transformUrl
       })(routerState);
-      setupLinkClaims(routerState, config.explicitLinks);
+      setupLinkClaims(routerState, config.explicitLinks, config.links);
       if (routerState.singleFlight) onCleanup(registerFlightRouter(routerState));
-      restoration && restoration.create(routerState);
+      restoration && restoration.create();
     }
+    // Registered on both sides, outside the client-only branch: an owned
+    // onSettled takes a hydration id on the server too, so the ids line up.
+    // A no-op when the arrival is left to the browser's native restore.
+    onSettled(() => restoration && restoration.settled());
     return createComponent$1(RouterContextObj, {
       value: routerState,
       get children() {
@@ -2680,7 +2801,7 @@ const useBeforeLeave = listener => {
 //   // before: a client component exists only to make the call
 //   const getStory = query(storyView, "story");
 //   component: props => {
-//     const View = dynamic(() => getStory(props.params.id));
+//     const View = dynamicComponent(() => getStory(props.params.id));
 //     return <View>{props.children}</View>;
 //   }
 //   // after
@@ -2742,8 +2863,9 @@ source) {
   };
   function render(args, routeProps) {
     // The source may answer a component, a promise of one, or (a live query)
-    // successive components; `dynamic`'s memo lands each the same way.
-    const View = dynamic(() => call(args()));
+    // successive components; `dynamicComponent`'s memo lands each the same
+    // way. Never a tag, so the element runtime `dynamic` retains stays out.
+    const View = dynamicComponent(() => call(args()));
     return createComponent(View, {
       get children() {
         return routeProps.children;
@@ -4098,4 +4220,4 @@ var serverForms = /*#__PURE__*/Object.freeze({
   submitServerForm: submitServerForm
 });
 
-export { RouterContextObj as RouterContext, mergeSearchString as _mergeSearchString, action, browserHistory, createBeforeLeave, createRouter, defineRoute, defineRoutes, hashHistory, int, liveQuery, memoryHistory, query, revalidate, serverRouteComponent, useAction, useBeforeLeave, useHref, useIsRouting, useLinkState, useLocation, useMatch, useNavigate, useParams, usePreloadRoute, useResolvedPath, useRouteMatches, useSearchParams, useSubmissions };
+export { RouterContextObj as RouterContext, mergeSearchString as _mergeSearchString, action, browserHistory, createBeforeLeave, createRouter, defineRoute, defineRoutes, hashHistory, int, liveQuery, memoryHistory, pendingLinks, query, revalidate, serverRouteComponent, useAction, useBeforeLeave, useHref, useIsRouting, useLinkState, useLocation, useMatch, useNavigate, useParams, usePreloadRoute, useResolvedPath, useRouteMatches, useSearchParams, useSubmissions };

package/dist/index.jsx

@@ -1,6 +1,7 @@
 export * from "./routers/index.js";
 export * from "./lifecycle.js";
 export { useHref, useIsRouting, useLinkState, useLocation, useMatch, useNavigate, usePreloadRoute, useParams, useResolvedPath, useRouteMatches, useSearchParams, RouterContextObj as RouterContext } from "./routing.js";
+export { pendingLinks } from "./pending.js";
 export { mergeSearchString as _mergeSearchString } from "./utils.js";
 export { int } from "./paths.js";
 export { serverRouteComponent } from "./serverRouteComponent.js";