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

package/dist/index.js

@@ -37,28 +37,35 @@ const comparableQuery = search => {
 };
 
 /**
- * The link-state rule shared by claimed anchors and `useLinkState`, given
- * the location and a link's already-resolved target (path, optional query
- * and hash):
+ * The link-state rule shared by claimed anchors and `useLinkState`, bound to
+ * a location so links matched against the same one share its parse. The
+ * returned matcher takes a link's already-resolved target (path, optional
+ * query and hash):
  *
  * - `current` — same pathname and same query (parameter order and hash aside)
  * - `active` — same pathname or one under it; the router's root (`base`, or
  *   `/` without one) only matches exactly, since it is a prefix of every
  *   page. `end` makes every link exact-only.
  */
-function matchLink(location, target, base, end) {
-  if (target === undefined) return {
-    active: false,
-    current: false
-  };
-  const loc = comparablePath(location.pathname);
-  const path = comparablePath(target);
-  const exact = loc === path;
-  const hashless = target.split("#", 1)[0];
-  const q = hashless.indexOf("?");
-  return {
-    active: exact || !end && path !== "" && path !== comparablePath(base) && loc.startsWith(path + "/"),
-    current: exact && comparableQuery(location.search) === comparableQuery(q < 0 ? "" : hashless.slice(q))
+function linkMatcher({
+  pathname,
+  search
+}, base, end) {
+  const loc = comparablePath(pathname);
+  const root = comparablePath(base);
+  return target => {
+    if (target === undefined) return {
+      active: false,
+      current: false
+    };
+    const path = comparablePath(target);
+    const exact = loc === path;
+    const hashless = target.split("#", 1)[0];
+    const q = hashless.indexOf("?");
+    return {
+      active: exact || !end && path !== "" && path !== root && loc.startsWith(path + "/"),
+      current: exact && comparableQuery(search) === comparableQuery(q < 0 ? "" : hashless.slice(q))
+    };
   };
 }
 function resolvePath(base, path, from) {
@@ -253,7 +260,7 @@ function setFormClaimHandler(handler) {
  *   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
+ * The matching rule is `linkMatcher`, shared with `useLinkState`. The router
  * only touches an `aria-current` it wrote itself: one the author set (a
  * stepper's `"step"`, a static `"page"`) is left in place, current or not.
  *
@@ -298,6 +305,11 @@ function setupLinkClaims(router, explicitLinks, links) {
     if (url.origin !== window.location.origin || !isUnderBase(url.pathname, basePath)) return;
     return url;
   }
+
+  // every anchor matches against the same location, so its parse is shared
+  // until the location changes
+  let matched;
+  let match;
   function linkState(a) {
     // read reactive sources unconditionally so the owning effect stays
     // subscribed even while the anchor is not router-managed
@@ -305,11 +317,16 @@ function setupLinkClaims(router, explicitLinks, links) {
     const routing = plugin && plugin.track();
     const url = managedUrl(a);
     const target = url && url.pathname + url.search;
+    const key = location.pathname + location.search;
     // no per-anchor `end` opt-out like useLinkState has
+    if (key !== matched) {
+      matched = key;
+      match = linkMatcher(location, basePath);
+    }
     const {
       active,
       current
-    } = matchLink(location, target, basePath);
+    } = match(target);
     const pending = !!routing && plugin.pending(target);
     return {
       active,
@@ -381,6 +398,12 @@ function setupLinkClaims(router, explicitLinks, links) {
   }));
 }
 
+/**
+ * App bundlers define this (`"true"` when server components are on, including
+ * `'external'`, otherwise `"false"`). Not assigned here: the published build
+ * keeps the `typeof` check so they can fold the fallback away.
+ */
+
 /**
  * The submit delegation consults this slot instead of importing the action
  * module: the action side installs its handler on first action creation
@@ -392,24 +415,43 @@ let formHandler;
 function setRouterFormHandler(handler) {
   formHandler = handler;
 }
+
+/**
+ * Link preload strategies reach route preloading through this slot instead
+ * of the event wiring importing it: a strategy installs it when it runs (see
+ * preload.ts), so an app with no strategy and no `usePreloadRoute` never
+ * ships route preloading.
+ */
+let linkPreloader;
+function setLinkPreloader(preloader) {
+  linkPreloader = preloader;
+}
 function setupNativeEvents({
-  preload = true,
+  preload,
   explicitLinks = false,
-  actionBase = "/_server",
-  transformUrl
+  actionBase = "/_server"
 } = {}) {
   return router => {
     const basePath = router.base.path();
     const navigateFromRoute = router.navigatorFactory(router.base);
-    let preloadTimeout;
-    let lastElement;
     function isSvg(el) {
       return el.namespaceURI === "http://www.w3.org/2000/svg";
     }
     function handleAnchor(evt) {
       if (evt.defaultPrevented || evt.button !== 0 || evt.metaKey || evt.altKey || evt.ctrlKey || evt.shiftKey) return;
+      return findAnchor(evt);
+    }
+
+    // no button or modifier gate: focus and touch events carry neither
+    function findAnchor(evt) {
       const a = evt.composedPath().find(el => el instanceof Node && el.nodeName.toUpperCase() === "A");
-      if (!a || explicitLinks && !a.hasAttribute("link")) return;
+      const url = a && anchorUrl(a);
+      return url && [a, url];
+    }
+
+    /** The anchor's URL when the router manages it, else `undefined`. */
+    function anchorUrl(a) {
+      if (explicitLinks && !a.hasAttribute("link")) return;
       const svg = isSvg(a);
       const href = svg ? a.href.baseVal : a.href;
       const target = svg ? a.target.baseVal : a.target;
@@ -421,7 +463,7 @@ function setupNativeEvents({
       // inherit the page origin, so the origin check below won't reject them. #382
       if (url.protocol !== "https:" && url.protocol !== "http:") return;
       if (url.origin !== window.location.origin || !isUnderBase(url.pathname, basePath)) return;
-      return [a, url];
+      return url;
     }
     function handleAnchorClick(evt) {
       const res = handleAnchor(evt);
@@ -439,25 +481,6 @@ function setupNativeEvents({
         state: state ? JSON.parse(state) : undefined
       }));
     }
-    function handleAnchorPreload(evt) {
-      const res = handleAnchor(evt);
-      if (!res) return;
-      const [a, url] = res;
-      transformUrl && (url.pathname = transformUrl(url.pathname));
-      router.preloadRoute(url, a.getAttribute("preload") !== "false");
-    }
-    function handleAnchorMove(evt) {
-      clearTimeout(preloadTimeout);
-      const res = handleAnchor(evt);
-      if (!res) return lastElement = null;
-      const [a, url] = res;
-      if (lastElement === a) return;
-      transformUrl && (url.pathname = transformUrl(url.pathname));
-      preloadTimeout = setTimeout(() => {
-        router.preloadRoute(url, a.getAttribute("preload") !== "false");
-        lastElement = a;
-      }, 20);
-    }
     function handleFormSubmit(evt) {
       if (formHandler) return formHandler(evt, router, actionBase);
       // No form handler means no action module in the client graph at all
@@ -473,37 +496,31 @@ function setupNativeEvents({
       const url = new URL(ref, document.baseURI);
       const path = router.parsePath(url.pathname + url.search);
       if (!path.startsWith(actionBase) || form.method.toUpperCase() !== "POST") return;
-      evt.preventDefault();
-      const data = new FormData(form, evt.submitter);
-      Promise.resolve().then(function () { return serverForms; }).then(m => m.submitServerForm(router, path, form, data));
+      // The import sits inside the check so bundlers drop the server-forms
+      // chunk. An early return above a still-present import() does not.
+      // Missing stays off: an undefined constant does not fold.
+      if (typeof __SOLID_SERVER_COMPONENTS__ !== "undefined" && __SOLID_SERVER_COMPONENTS__) {
+        evt.preventDefault();
+        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
-      });
-      document.addEventListener("focusin", handleAnchorPreload, {
-        passive: true
-      });
-      document.addEventListener("touchstart", handleAnchorPreload, {
-        passive: true
-      });
-    }
     document.addEventListener("submit", handleSubmit);
     onCleanup(() => {
       document.removeEventListener("click", handleAnchorClick);
-      if (preload) {
-        document.removeEventListener("mousemove", handleAnchorMove);
-        document.removeEventListener("focusin", handleAnchorPreload);
-        document.removeEventListener("touchstart", handleAnchorPreload);
-      }
       document.removeEventListener("submit", handleSubmit);
     });
+    // the pre-strategy boolean option is ignored (a dev warning names it)
+    if (preload && preload !== true) [].concat(preload).forEach(strategy => strategy({
+      anchor: findAnchor,
+      url: anchorUrl,
+      preload: (url, data) => linkPreloader(router, url, data)
+    }));
   };
 }
 
@@ -731,10 +748,10 @@ function pendingTarget(router) {
 /** Whether `to` is the destination of the in-flight navigation. */
 function linkPending(router, to, base, end) {
   const target = pendingTarget(router);
-  return !!target && matchLink({
+  return !!target && linkMatcher({
     pathname: target.value,
     search: ""
-  }, to, base, end).active;
+  }, base, end)(to).active;
 }
 
 /**
@@ -909,23 +926,6 @@ const useRouteMatches = () => {
   return () => router.matches().slice();
 };
 
-/**
- * `usePreloadRoute` returns a function for warming a route by hand — the same
- * work link hover/focus intent triggers automatically: the matched routes'
- * lazy components load, and with `preloadData` their `preload` functions run.
- *
- * @example
- * ```js
- * const preload = usePreloadRoute();
- *
- * preload(paths.users(2).settings, { preloadData: true });
- * ```
- */
-const usePreloadRoute = () => {
-  const pre = useRouter().preloadRoute;
-  return (url, options = {}) => pre(url instanceof URL ? url : new URL(String(url), mockBase), options.preloadData);
-};
-
 /**
  * Retrieves a reactive, store-like object containing the current route path parameters as defined in the Route.
  * 
@@ -1034,7 +1034,7 @@ const useLinkState = (href, options = {}) => {
   const location = router.location;
   const to = useResolvedPath(() => String(href()));
   const base = router.base.path();
-  const state = createMemo(() => matchLink(location, to(), base, options.end));
+  const state = createMemo(() => linkMatcher(location, base, options.end)(to()));
   return {
     active: createMemo(() => state().active),
     current: createMemo(() => state().current),
@@ -1373,6 +1373,11 @@ let preloadIntent;
 function getIntent() {
   return preloadIntent || useOptionalContext(RouterContextObj)?.intent?.();
 }
+function setPreloadIntent(intent) {
+  const prev = preloadIntent;
+  preloadIntent = intent;
+  return prev;
+}
 let inPreloadFn = false;
 function getInPreloadFn() {
   return inPreloadFn;
@@ -1504,9 +1509,9 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     }
     return read();
   };
+  const matchPath = pathname => getRouteMatches(branches(), options.transformUrl ? options.transformUrl(pathname) : pathname);
   const matches = createMemo(() => {
-    const pathname = typeof options.transformUrl === "function" ? options.transformUrl(location.pathname) : location.pathname;
-    const m = getRouteMatches(branches(), pathname);
+    const m = matchPath(location.pathname);
     // An unresolved lazy subtree parks readers on not-ready semantics — the
     // navigation transition (or the SSR stream) holds until the table lands.
     // NotReadyError (not a returned promise) because a match chain is full
@@ -1562,12 +1567,13 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     intent: transitionIntent,
     _source: source,
     _owner: routerOwner,
+    _routeOwner: getContext,
+    _match: matchPath,
     renderPath,
     parsePath,
     navigatorFactory,
     matches,
     beforeLeave,
-    preloadRoute,
     singleFlight: options.singleFlight === undefined ? true : options.singleFlight,
     get submissions() {
       return submissions ||= createSignal(isServer ? initSubmissions() : [], {
@@ -1697,71 +1703,6 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     route = route || useOptionalContext(RouteContextObj) || baseRoute;
     return (to, options) => navigateFromRoute(route, to, options);
   }
-  function preloadRoute(url, preloadData) {
-    const next = getRouteMatches(branches(), url.pathname);
-    // An unresolved lazy subtree in the chain: the placeholder's
-    // component.preload (below) kicks the table load; once it lands,
-    // preload again so the real inner routes warm too. Preloads are
-    // speculative: a failed load (held sync throw or rejection) is ignored
-    // here — the real navigation surfaces and retries it.
-    const boundary = next.find(m => m.route.lazy && !m.route.lazy.resolved);
-    if (boundary) {
-      try {
-        resolveLazySubtree(boundary.route.lazy).then(() => preloadRoute(url, preloadData), () => {});
-      } catch {}
-    }
-    // Data preloads run only for levels a navigation would mount fresh or
-    // reuse with changed inputs: this level's params, and search as the
-    // declared schema's output or else the raw string. Navigation itself is
-    // already this selective (a matching level is reused and re-reads through
-    // tracked params), so an unchanged level has nothing new to warm.
-    let current;
-    try {
-      current = untrack(matches);
-    } catch {}
-    const query = extractSearchParams(url);
-    const inputs = (p, q, s, r) => {
-      const a = serverRouteArgs(r, p, q);
-      a.search === undefined && (a.search = s);
-      return a;
-    };
-    const prevIntent = preloadIntent;
-    preloadIntent = "preload";
-    for (let match in next) {
-      const {
-        route,
-        params
-      } = next[match];
-      const {
-        preload,
-        component
-      } = route;
-      component?.preload?.();
-      const now = current && current[match];
-      const unchanged = now && now.route.key === route.key && serverRouteArgsEqual(inputs(params, query, url.search, route), inputs(now.params, location.query, location.search, route));
-      inPreloadFn = true;
-      preloadData && !unchanged && runWithOwner(getContext(), () => {
-        // A server component route's data IS its call: warm the same
-        // query entry the render will read, under the same derived args.
-        const server = serverRouteOf(component);
-        server && server.call(serverRouteArgs(route, params, query));
-        preload && preload({
-          params,
-          location: {
-            pathname: url.pathname,
-            search: url.search,
-            hash: url.hash,
-            query,
-            state: null,
-            key: ""
-          },
-          intent: "preload"
-        });
-      });
-      inPreloadFn = false;
-    }
-    preloadIntent = prevIntent;
-  }
 
   // Seeds the initial submission from a no-JS form post: the server
   // function runtime redirected back with the outcome in a one-shot flash
@@ -2595,6 +2536,9 @@ function staticIntegration(url, utils) {
   };
 }
 function createRouter(config) {
+  if (DEV && typeof config.preloadLinks === "boolean") {
+    console.warn("`preloadLinks` takes preload strategies, not a boolean, and preloads nothing by default. " + "Use `preloadLinks: intentPreload()` for hover/focus preloading.");
+  }
   const basePath = config.base || "";
   // Routes are immutable per instance, so compilation is shared by every
   // mount, request, and `match()` call — recompiled only when a lazy subtree
@@ -2644,8 +2588,7 @@ function createRouter(config) {
       setupNativeEvents({
         preload: config.preloadLinks,
         explicitLinks: config.explicitLinks,
-        actionBase: config.actionBase,
-        transformUrl: config.transformUrl
+        actionBase: config.actionBase
       })(routerState);
       setupLinkClaims(routerState, config.explicitLinks, config.links);
       if (routerState.singleFlight) onCleanup(registerFlightRouter(routerState));
@@ -2791,6 +2734,289 @@ const useBeforeLeave = listener => {
   onCleanup(s);
 };
 
+/**
+ * Warms the routes `url` matches: their lazy components (and any lazy
+ * subtree on the way) load, and with `preloadData` their `preload` functions
+ * run under `intent: "preload"`. Only link preload strategies and
+ * `usePreloadRoute` import it, so apps using neither don't ship it.
+ */
+function preloadRoute(router, url, preloadData) {
+  const next = router._match(url.pathname);
+  // An unresolved lazy subtree in the chain: the placeholder's
+  // component.preload (below) kicks the table load; once it lands,
+  // preload again so the real inner routes warm too. Preloads are
+  // speculative: a failed load (held sync throw or rejection) is ignored
+  // here — the real navigation surfaces and retries it.
+  const boundary = next.find(m => m.route.lazy && !m.route.lazy.resolved);
+  if (boundary) {
+    try {
+      resolveLazySubtree(boundary.route.lazy).then(() => preloadRoute(router, url, preloadData), () => {});
+    } catch {}
+  }
+  // Data preloads run only for levels a navigation would mount fresh or
+  // reuse with changed inputs: this level's params, and search as the
+  // declared schema's output or else the raw string. Navigation itself is
+  // already this selective (a matching level is reused and re-reads through
+  // tracked params), so an unchanged level has nothing new to warm.
+  let current;
+  try {
+    current = untrack(router.matches);
+  } catch {}
+  const {
+    location
+  } = router;
+  const query = extractSearchParams(url);
+  const inputs = (p, q, s, r) => {
+    const a = serverRouteArgs(r, p, q);
+    a.search === undefined && (a.search = s);
+    return a;
+  };
+  const prevIntent = setPreloadIntent("preload");
+  for (let match in next) {
+    const {
+      route,
+      params
+    } = next[match];
+    const {
+      preload,
+      component
+    } = route;
+    component?.preload?.();
+    const now = current && current[match];
+    const unchanged = now && now.route.key === route.key && serverRouteArgsEqual(inputs(params, query, url.search, route), inputs(now.params, location.query, location.search, route));
+    setInPreloadFn(true);
+    preloadData && !unchanged && runWithOwner(router._routeOwner(), () => {
+      // A server component route's data IS its call: warm the same
+      // query entry the render will read, under the same derived args.
+      const server = serverRouteOf(component);
+      server && server.call(serverRouteArgs(route, params, query));
+      preload && preload({
+        params,
+        location: {
+          pathname: url.pathname,
+          search: url.search,
+          hash: url.hash,
+          query,
+          state: null,
+          key: ""
+        },
+        intent: "preload"
+      });
+    });
+    setInPreloadFn(false);
+  }
+  setPreloadIntent(prevIntent);
+}
+
+/**
+ * `usePreloadRoute` returns a function for warming a route by hand — the same
+ * work link preloading triggers: the matched routes' lazy components load,
+ * and with `preloadData` their `preload` functions run.
+ *
+ * @example
+ * ```js
+ * const preload = usePreloadRoute();
+ *
+ * preload(paths.users(2).settings, { preloadData: true });
+ * ```
+ */
+const usePreloadRoute = () => {
+  const router = useRouter();
+  return (url, options) => preloadRoute(router, url instanceof URL ? url : new URL(String(url), mockBase), options?.preloadData);
+};
+
+/**
+ * Anchors as the runtime claims them: at creation and again on `href`
+ * writes. `disarm` runs when the creating owner is disposed. Claims fire
+ * before dynamic attributes are applied (solidjs/solid#3923), so whether a
+ * link is opted in, and where it points, is read when it preloads.
+ */
+function claimAnchors(arm, disarm) {
+  const seen = new WeakSet();
+  setLinkPreloader(preloadRoute);
+  onCleanup(registerElementClaim(node => {
+    if (node.nodeName.toUpperCase() !== "A") return;
+    arm(node);
+    // a re-claim runs under the owner writing `href`, not the anchor's
+    if (seen.has(node)) return;
+    seen.add(node);
+    getOwner() && onCleanup(() => disarm(node));
+  }));
+}
+
+// requests made before the browser is idle run together once it is
+function whenIdle(fn) {
+  let scheduled = false;
+  return () => {
+    if (scheduled) return;
+    scheduled = true;
+    (window.requestIdleCallback || setTimeout)(() => {
+      scheduled = false;
+      fn();
+    });
+  };
+}
+
+/**
+ * Preloads an ambient strategy's anchor: one that names the strategy in its
+ * `preload` attribute, or with `all` any but `preload="false"`. Skipped when
+ * the user asked to save data or the connection is 2g (where the Network
+ * Information API is available).
+ */
+const ambientPreload = ({
+  url,
+  preload
+}, name, all, data) => a => {
+  const value = a.getAttribute("preload");
+  const connection = navigator.connection;
+  const href = (value === name || all && value !== "false") && !(connection && (connection.saveData || /2g/.test(connection.effectiveType))) && url(a);
+  href && preload(href, data);
+};
+
+/**
+ * Preload a link when the pointer rests on it for `delay` ms (default 20),
+ * when it takes focus, and on touchstart. Moving over a link that already
+ * preloaded does not preload it again until the pointer leaves. These
+ * listeners do not check modifier keys or `defaultPrevented`; clicks still do.
+ * Warms route code and, unless `data` is false (default true), runs the
+ * matched routes' `preload` functions.
+ *
+ * @example
+ * ```ts
+ * const Router = createRouter({ routes, preloadLinks: intentPreload() });
+ * ```
+ */
+const intentPreload = ({
+  delay = 20,
+  data = true
+} = {}) => ctx => {
+  let timeout;
+  let lastElement;
+  setLinkPreloader(preloadRoute);
+  const onIntent = evt => {
+    // clear before resolving: a throw must not leave the rest timer armed
+    if (evt.type === "mousemove") clearTimeout(timeout);
+    const res = ctx.anchor(evt);
+    const link = res && res[0].getAttribute("preload") !== "false" ? res : undefined;
+    if (evt.type !== "mousemove") return link && ctx.preload(link[1], data);
+    if (!link) return lastElement = undefined;
+    const [a, url] = link;
+    if (lastElement === a) return;
+    timeout = setTimeout(() => {
+      ctx.preload(url, data);
+      lastElement = a;
+    }, delay);
+  };
+  const passive = {
+    passive: true
+  };
+  document.addEventListener("focusin", onIntent, passive);
+  document.addEventListener("touchstart", onIntent, passive);
+  document.addEventListener("mousemove", onIntent, passive);
+  onCleanup(() => {
+    clearTimeout(timeout);
+    document.removeEventListener("focusin", onIntent);
+    document.removeEventListener("touchstart", onIntent);
+    document.removeEventListener("mousemove", onIntent);
+  });
+};
+
+/**
+ * Preload a link on `pointerdown` (mouse, touch, or pen), ahead of its click.
+ * Does not check modifier keys or `defaultPrevented`. Warms route code and,
+ * unless `data` is false (default true), route data.
+ */
+const tapPreload = ({
+  data = true
+} = {}) => ctx => {
+  setLinkPreloader(preloadRoute);
+  const onTap = evt => {
+    const res = ctx.anchor(evt);
+    res && res[0].getAttribute("preload") !== "false" && ctx.preload(res[1], data);
+  };
+  document.addEventListener("pointerdown", onTap, {
+    passive: true
+  });
+  onCleanup(() => document.removeEventListener("pointerdown", onTap));
+};
+
+/**
+ * Preload a link once it has stayed in the viewport for `delay` ms (default
+ * 100), when the browser is next idle (`requestIdleCallback`, or `setTimeout`
+ * where that is missing). Each link preloads once, and again after its `href`
+ * changes; a link that leaves before then is dropped. One `IntersectionObserver`
+ * is shared. `rootMargin` is passed through to it (the observer's own `"0px"`
+ * when omitted). Applies to links with `preload="viewport"`, or with `all`
+ * (default false) to every link except `preload="false"`. Skips Save-Data and
+ * 2g connections. Warms route code only unless `data` is true (default false).
+ */
+const viewportPreload = ({
+  all,
+  data = false,
+  delay = 100,
+  rootMargin
+} = {}) => ctx => {
+  if (typeof IntersectionObserver === "undefined") return;
+  const warm = ambientPreload(ctx, "viewport", all, data);
+  // visible anchors: a pending dwell timer, or `true` once due
+  const visible = new Map();
+  let observer;
+  const leave = a => {
+    clearTimeout(visible.get(a));
+    visible.delete(a);
+  };
+  const flush = whenIdle(() => visible.forEach((due, a) => {
+    if (due !== true) return;
+    observer.unobserve(a);
+    visible.delete(a);
+    warm(a);
+  }));
+  const intersect = entries => entries.forEach(({
+    target: a,
+    isIntersecting
+  }) => isIntersecting ? visible.set(a, setTimeout(() => (visible.set(a, true), flush()), delay)) : leave(a));
+  claimAnchors(a => (observer ||= new IntersectionObserver(intersect, {
+    rootMargin
+  })).observe(a), a => {
+    observer.unobserve(a);
+    leave(a);
+  });
+  onCleanup(() => {
+    observer && observer.disconnect();
+    visible.forEach((_, a) => leave(a));
+  });
+};
+
+/**
+ * Preload links as soon as the page has loaded and the browser is idle,
+ * including links mounted later. A link removed before the flush is dropped.
+ * Applies to links with `preload="eager"`, or with `all` (default false) to
+ * every link except `preload="false"`. Skips Save-Data and 2g connections.
+ * Warms route code only unless `data` is true (default false).
+ */
+const eagerPreload = ({
+  all,
+  data = false
+} = {}) => ctx => {
+  const warm = ambientPreload(ctx, "eager", all, data);
+  const queue = new Set();
+  const flush = whenIdle(() => {
+    queue.forEach(warm);
+    queue.clear();
+  });
+  addEventListener("load", flush, {
+    once: true
+  });
+  claimAnchors(a => {
+    queue.add(a);
+    document.readyState === "complete" && flush();
+  }, a => queue.delete(a));
+  onCleanup(() => {
+    removeEventListener("load", flush);
+    queue.clear();
+  });
+};
+
 // Server component routes (experimental — rides the experimental server
 // components surface in @solidjs/web; the arg shape may change).
 //
@@ -4220,4 +4446,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, pendingLinks, 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, eagerPreload, hashHistory, int, intentPreload, liveQuery, memoryHistory, pendingLinks, query, revalidate, serverRouteComponent, tapPreload, useAction, useBeforeLeave, useHref, useIsRouting, useLinkState, useLocation, useMatch, useNavigate, useParams, usePreloadRoute, useResolvedPath, useRouteMatches, useSearchParams, useSubmissions, viewportPreload };