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

package/README.md

@@ -19,7 +19,7 @@ Explore the official [documentation](https://docs.solidjs.com/solid-router) for
 - **Typed Routing**: URLs built through a typed path proxy inferred from your route config — `paths.users(2).settings` typechecks against the tree
 - **Plain Anchors**: no link component — `<a>` elements get `aria-current` and `data-active` automatically via compiler-claimed anchors, and `data-pending` with the opt-in `pendingLinks` plugin
 - **Universal Rendering**: one factory for browser, hash, memory, and server rendering; history adapters are imports, so unused ones never enter your bundle
-- **Preload Functions**: parallel data fetching following the render-as-you-fetch pattern, triggered eagerly on link hover/focus
+- **Preload Functions**: parallel data fetching following the render-as-you-fetch pattern, triggered eagerly by opt-in [link preloading](#preloading)
 - **Data APIs with Caching**: `query` and `action` with deduplication, revalidation, single-flight mutations, and progressive enhancement — plus experimental `liveQuery` for keyed queries over live streams
 - **Typed Search Params**: opt-in per-route [Standard Schema](https://github.com/standard-schema/standard-schema) validation — `search.page` is a `number`, not `"2"`
 
@@ -40,6 +40,7 @@ Explore the official [documentation](https://docs.solidjs.com/solid-router) for
   - [File-System Routes](#file-system-routes)
 - [Typed Paths](#typed-paths)
 - [Links](#links)
+- [Preloading](#preloading)
 - [Preload Functions](#preload-functions)
 - [Data APIs](#data-apis)
 - [Typed Search Params](#typed-search-params)
@@ -171,7 +172,7 @@ A route definition supports:
 | `path`         | `string \| string[]`                                         | Path partial for this route segment                                             |
 | `component`    | `Component`                                                  | Component rendered for the matched segment                                      |
 | `children`     | `RouteDefinition \| RouteDefinition[] \| () => Promise<...>` | Nested route definitions, or a thunk for a [lazy subtree](#lazy-route-subtrees) |
-| `preload`      | `RoutePreloadFunc`                                           | Called on preload intent (hover/focus) and navigation                           |
+| `preload`      | `RoutePreloadFunc`                                           | Called on [link preloading](#preloading) and navigation                         |
 | `matchFilters` | `MatchFilters`                                               | Additional constraints for matching parameters                                  |
 | `search`       | `StandardSchemaV1`                                           | Search-param validator; its types flow into `paths` and hooks                   |
 | `info`         | `Record<string, any>`                                        | Arbitrary metadata, readable via `useRouteMatches`                              |
@@ -360,11 +361,11 @@ const router = createRouter({
 });
 ```
 
-The import only fires when something needs the subtree — hovering a link into it, navigating into it, or the server matching a URL beneath it. Until then the tree carries a placeholder that knows every URL under `/admin` belongs to the subtree without knowing its contents (static sibling routes still win without triggering the load). Everything folds in as if the routes were inline:
+The import only fires when something needs the subtree — preloading a link into it, navigating into it, or the server matching a URL beneath it. Until then the tree carries a placeholder that knows every URL under `/admin` belongs to the subtree without knowing its contents (static sibling routes still win without triggering the load). Everything folds in as if the routes were inline:
 
 - **Types**: TypeScript never runs the thunk — inference flows through the import's promise type, so `paths.admin.users(2)` typechecks (match filters and search schemas included) before any of the subtree's code exists client-side. The module's `default` or `routes` export is used. Only tables genuinely built at runtime (typed as plain `RouteDefinition[]`) degrade to untyped.
 - **Navigation**: the table load folds into the navigation transition — the old screen holds until the subtree (and its matched components) are ready, exactly like a `lazy()` route component.
-- **Preloading**: hover intent kicks the table load, and when it lands the preload continues into the inner routes' components and `preload` functions — one cascading warm-up from the earliest possible moment.
+- **Preloading**: a link preload kicks the table load, and when it lands the preload continues into the inner routes' components and `preload` functions — one cascading warm-up from the earliest possible moment.
 - **Server**: SSR resolves matched boundaries during the render (use the streaming entry point `renderToStream` — awaiting it resolves with the settled HTML — as with any async work), and the single-flight collector resolves them before its data pass.
 
 Resolution is cached per thunk and append-only: the tree never changes shape after a subtree lands, it just gets more specific. Keep thunks deterministic — `() => import(...)` — rather than switching tables on runtime state.
@@ -399,10 +400,10 @@ The source is called with **derived** arguments, not a live location — the cal
 
 A route view is route-shaped on purpose — the address stays stable and `defineRoute` can check its params against the pattern — which means it is only callable as a route. When the same server component is also used elsewhere, keep it a plain (non-exported, non-endpoint) function and have the route view call it with `params.id`. The value `serverRouteComponent` returns is a component only so it fits the `component` field; mounting it any other way (through `lazy()`, or by hand) throws, since outside the match there are only merged params to call with.
 
-The router mounts the resolved component with the outlet as `children`, so a server component can be a layout, and it calls the same source under preload intent — link hover, `preloadRoute`, the [single-flight collector](#server-integration) — with the same derived args. What that call _means_ is the source's: the router does not choose the cache strategy or own the key.
+The router mounts the resolved component with the outlet as `children`, so a server component can be a layout, and it calls the same source under preload intent — link preloading, `usePreloadRoute`, the [single-flight collector](#server-integration) — with the same derived args. What that call _means_ is the source's: the router does not choose the cache strategy or own the key.
 
 - `query(fn, key)`: link intent warms the entry the render reads, `revalidate("story")` and action responses refetch it, and the collector reproduces it so a mutation's response carries the route's fresh markup. Argument changes deliver into the mounted boundary — it morphs in place rather than remounting.
-- [`liveQuery(fn, key)`](#livequery-experimental): the frame stream stays open and the channel owns it — hover connects it (held through the preload window, so a hovered link is an open stream), `revalidate(key)` reconnects, and the mutation sweep and the single-flight collector both leave it alone — nothing pulls it server-side, and the stream is its own freshness.
+- [`liveQuery(fn, key)`](#livequery-experimental): the frame stream stays open and the channel owns it — a link preload connects it (held through the preload window, so a preloaded link is an open stream), `revalidate(key)` reconnects, and the mutation sweep and the single-flight collector both leave it alone — nothing pulls it server-side, and the stream is its own freshness.
 
 Anything else callable with the args works too; wrapping is what gives dedupe, preload, and revalidation.
 
@@ -502,14 +503,14 @@ There is no link component. Use `<a>`; the router intercepts same-origin clicks
 
 Behavior modifiers are attributes, so they work identically in client, server-rendered, and third-party markup:
 
-| attribute  | description                                                                                                     |
-| ---------- | --------------------------------------------------------------------------------------------------------------- |
-| `replace`  | Replace the history entry instead of pushing                                                                    |
-| `noscroll` | Turn off scrolling to the top after navigation                                                                  |
-| `state`    | JSON string [pushed](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) onto the history stack |
-| `preload`  | Set to `"false"` to opt this link out of hover/focus preloading                                                 |
-| `link`     | Marks a router link when `explicitLinks` is enabled                                                             |
-| `target`   | Any value (e.g. `_self`) opts the anchor out of router handling                                                 |
+| attribute  | description                                                                                                         |
+| ---------- | ------------------------------------------------------------------------------------------------------------------- |
+| `replace`  | Replace the history entry instead of pushing                                                                        |
+| `noscroll` | Turn off scrolling to the top after navigation                                                                      |
+| `state`    | JSON string [pushed](https://developer.mozilla.org/en-US/docs/Web/API/History/pushState) onto the history stack     |
+| `preload`  | `"false"` opts this link out of all [preloading](#preloading); `"viewport"` or `"eager"` opts it into that strategy |
+| `link`     | Marks a router link when `explicitLinks` is enabled                                                                 |
+| `target`   | Any value (e.g. `_self`) opts the anchor out of router handling                                                     |
 
 ```tsx
 <a href={paths.login} replace>Log in</a>
@@ -563,9 +564,47 @@ function TabLink(props: { href: string; children: JSX.Element }) {
 }
 ```
 
+## Preloading
+
+The router can warm a link's route before it is clicked: preloading **code** loads the matched routes' `lazy()` components (and any [lazy subtree](#lazy-route-subtrees) on the way), and preloading **data** also runs their [preload functions](#preload-functions) with `intent: "preload"`. Nothing is preloaded unless you opt in. Earlier `next` prereleases preloaded on hover, focus, and touch by default; that built-in is gone. A boolean `preloadLinks` is a type error and, in development, a warning — it preloads nothing.
+
+```tsx
+import { createRouter, intentPreload } from "@solidjs/router";
+
+const Router = createRouter({ routes, preloadLinks: intentPreload() });
+```
+
+| strategy                                                           | preloads a link when                                                                                                                                                                                                                                | defaults      |
+| ------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- |
+| `intentPreload({ delay = 20, data = true })`                       | the pointer rests on it for `delay` ms, it is focused (`focusin`), or a touch starts on it (`touchstart`). Moving over a link that already preloaded does not preload it again until the pointer leaves                                             | code and data |
+| `tapPreload({ data = true })`                                      | a pointer goes down on it (`pointerdown`: mouse, touch, or pen), ahead of the click                                                                                                                                                                 | code and data |
+| `viewportPreload({ all = false, data = false, delay = 100, rootMargin })` | it has stayed in the viewport for `delay` ms and the browser is then idle (`requestIdleCallback`, or `setTimeout` if that is missing). Once per `href`; leaving before the idle flush cancels it, and a new `href` preloads again. One shared `IntersectionObserver`. `rootMargin` is passed through (the observer's own `"0px"` when omitted) | code          |
+| `eagerPreload({ all = false, data = false })`                      | the page has loaded and the browser is idle, including links mounted later. Once per `href`; a link removed before that flush is dropped                                                                                                                                 | code          |
+
+Pass an array to combine strategies — viewport for code, intent for data:
+
+```tsx
+const Router = createRouter({
+  routes,
+  preloadLinks: [viewportPreload({ all: true }), intentPreload()]
+});
+```
+
+Strategies are client-only, and an app ships only the ones it imports. `intentPreload` and `tapPreload` apply to every router link. `viewportPreload` and `eagerPreload` apply only to links that name them, `<a href="/pricing" preload="viewport">` or `preload="eager"`, unless created with `{ all: true }`. They also skip preloading when the browser reports Save-Data or a 2g connection (`effectiveType` of `"2g"` or `"slow-2g"`).
+
+The `href` and `preload` attribute are read when the preload runs, so a dynamic `href` is the one the link has then.
+
+Hover, focus, and touch preloads do not check modifier keys or `defaultPrevented`, and neither does `tapPreload`'s `pointerdown`. A click still does: the router ignores it when `preventDefault` was already called, when it is not the primary button, or when alt, ctrl, meta, or shift is held.
+
+Preloading is purely an optimization: without it every navigation still loads the same code and data, just after the click instead of before it. A link with `preload="false"` is never preloaded by any strategy.
+
+Whether a strategy also preloads data is its own `data` option, not a per-link choice. `intentPreload` and `tapPreload` default to data because the user is about to click; a data preload runs only for route levels the navigation would change, and `query` keeps the result for the few seconds until the click arrives. `viewportPreload` and `eagerPreload` warm links that are merely on screen or already on the page, so they default to code only — a data preload there is worth it only when the cache outlives the moment of clicking, as with TanStack Query or an HTTP-cached `GET` server function. Pass `{ data: true }` to opt in.
+
+`usePreloadRoute` triggers the same work by hand.
+
 ## Preload Functions
 
-Even with smart caches, waterfalls happen when data fetching waits on view logic or lazy-loaded code. Preload functions start fetching data in parallel with loading the route — called when a route renders, and eagerly when links are hovered or focused.
+Even with smart caches, waterfalls happen when data fetching waits on view logic or lazy-loaded code. Preload functions start fetching data in parallel with loading the route — called when a route renders, and eagerly when the router [preloads a link](#preloading) with data.
 
 ```tsx
 import { lazy } from "solid-js";
@@ -581,11 +620,11 @@ const routes = defineRoutes([{ path: "/users/:id", component: User, preload: pre
 
 The preload function receives:
 
-| key      | type                                               | description                                                                                                                                                       |
-| -------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| params   | object                                             | The route parameters (same value as `useParams()` inside the route component)                                                                                     |
-| location | `{ pathname, search, hash, query, state, key }`    | Path information (corresponds to [`useLocation()`](#uselocation))                                                                                                 |
-| intent   | `"initial" \| "navigate" \| "native" \| "preload"` | Why this is being called: `initial` — first render; `navigate` — router navigation; `native` — browser back/forward; `preload` — link hover/focus, not navigating |
+| key      | type                                               | description                                                                                                                                                      |
+| -------- | -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| params   | object                                             | The route parameters (same value as `useParams()` inside the route component)                                                                                    |
+| location | `{ pathname, search, hash, query, state, key }`    | Path information (corresponds to [`useLocation()`](#uselocation))                                                                                                |
+| intent   | `"initial" \| "navigate" \| "native" \| "preload"` | Why this is being called: `initial` — first render; `navigate` — router navigation; `native` — browser back/forward; `preload` — link preloading, not navigating |
 
 The factory-level `preload` option is the app-wide counterpart: it runs once per mount/request with the merged params of every match, and its result reaches the root render-prop as `props.data`.
 
@@ -606,7 +645,7 @@ const getUser = query(async id => {
 A query:
 
 1. Dedupes on the server for the lifetime of the request.
-2. Fills a preload cache in the browser lasting 5 seconds, so hover preloads and route entry share one fetch.
+2. Fills a preload cache in the browser lasting 5 seconds, so link preloads and route entry share one fetch.
 3. Refetches reactively by key on action revalidation.
 4. Serves as a back/forward cache for browser navigation up to 5 minutes; user-initiated navigation bypasses it.
 
@@ -793,18 +832,18 @@ Without a schema, `useSearchParams()` behaves as before: raw string values, merg
 createRouter(config);
 ```
 
-| option          | type                      | description                                                                                           |
-| --------------- | ------------------------- | ----------------------------------------------------------------------------------------------------- |
-| `routes`        | `RouteDefinition[]`       | The route tree — inline arrays infer literally; wrap extracted trees in `defineRoutes`                |
-| `base`          | `string`                  | Base url to use for matching routes                                                                   |
-| `preload`       | `RoutePreloadFunc`        | App-wide preload: once per mount/request, result reaches the root render-prop as `props.data`         |
-| `history`       | `RouterHistory`           | History adapter; defaults to browser history on the client and the request URL on the server          |
-| `singleFlight`  | `boolean`                 | Single-flight mutations, default `true`                                                               |
-| `actionBase`    | `string`                  | Root url for server actions, default `/_server`                                                       |
-| `preloadLinks`  | `boolean`                 | Preload route code/data on link hover and focus, default `true`                                       |
-| `explicitLinks` | `boolean`                 | Require the `link` attribute for router handling instead of intercepting all anchors, default `false` |
-| `links`         | `LinksPlugin`             | Link claims plugin — `pendingLinks` adds `data-pending` to the in-flight navigation's target          |
-| `transformUrl`  | `(url: string) => string` | Rewrite URLs before matching                                                                          |
+| option          | type                           | description                                                                                           |
+| --------------- | ------------------------------ | ----------------------------------------------------------------------------------------------------- |
+| `routes`        | `RouteDefinition[]`            | The route tree — inline arrays infer literally; wrap extracted trees in `defineRoutes`                |
+| `base`          | `string`                       | Base url to use for matching routes                                                                   |
+| `preload`       | `RoutePreloadFunc`             | App-wide preload: once per mount/request, result reaches the root render-prop as `props.data`         |
+| `history`       | `RouterHistory`                | History adapter; defaults to browser history on the client and the request URL on the server          |
+| `singleFlight`  | `boolean`                      | Single-flight mutations, default `true`                                                               |
+| `actionBase`    | `string`                       | Root url for server actions, default `/_server`                                                       |
+| `preloadLinks`  | `LinkPreload \| LinkPreload[]` | [Link preload strategies](#preloading), e.g. `intentPreload()`; none by default. A boolean is a type error |
+| `explicitLinks` | `boolean`                      | Require the `link` attribute for router handling instead of intercepting all anchors, default `false` |
+| `links`         | `LinksPlugin`                  | Link claims plugin — `pendingLinks` adds `data-pending` to the in-flight navigation's target          |
+| `transformUrl`  | `(url: string) => string`      | Rewrite URLs before matching                                                                          |
 
 The returned instance is the provider component and carries the static surface:
 
@@ -913,7 +952,7 @@ declare module "@solidjs/router" {
 
 ### usePreloadRoute
 
-Returns a function to preload a route manually — the same work link hover/focus triggers automatically. Accepts strings, URLs, and typed path nodes:
+Returns a function to preload a route manually — the same work [link preloading](#preloading) triggers automatically. Accepts strings, URLs, and typed path nodes:
 
 ```tsx
 const preload = usePreloadRoute();
@@ -1056,6 +1095,7 @@ Route props map 1:1 onto definition keys (`path`, `component`, `preload`, `match
 - Pending link styling → `[data-pending]`, opt-in with `createRouter({ routes, links: pendingLinks })`
 - Route-relative hrefs → typed `paths`; `useResolvedPath` / `useHref` remain for manual resolution
 - Custom link components → `useLinkState`
+- Hover/focus preloading is opt-in → `createRouter({ routes, preloadLinks: intentPreload() })`; `preload="false"` on a link skips it entirely. The previous `next` prerelease preloaded on hover by default
 
 ### Removed and renamed
 

package/dist/claims.d.ts

@@ -15,7 +15,7 @@ export declare function setFormClaimHandler(handler: ((form: HTMLFormElement) =>
  *   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.
  *

package/dist/claims.js

@@ -1,6 +1,6 @@
 import { registerElementClaim } from "@solidjs/web";
 import { createRenderEffect, getOwner, onCleanup, untrack } from "solid-js";
-import { isUnderBase, matchLink } from "./utils.js";
+import { isUnderBase, linkMatcher } from "./utils.js";
 /**
  * Claimed forms are handed to this slot instead of the claims importing the
  * action module: the action side installs it on first action creation (see
@@ -26,7 +26,7 @@ export 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.
  *
@@ -75,6 +75,10 @@ export function setupLinkClaims(router, explicitLinks, links) {
             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
@@ -82,8 +86,13 @@ export 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
-        const { active, current } = matchLink(location, target, basePath);
+        if (key !== matched) {
+            matched = key;
+            match = linkMatcher(location, basePath);
+        }
+        const { active, current } = match(target);
         const pending = !!routing && plugin.pending(target);
         return { active, pending, current };
     }

package/dist/data/events.d.ts

@@ -1,4 +1,4 @@
-import type { RouterContext } from "../types.js";
+import type { LinkPreload, RouterContext } from "../types.js";
 /**
  * The submit delegation consults this slot instead of importing the action
  * module: the action side installs its handler on first action creation
@@ -7,11 +7,18 @@ import type { RouterContext } from "../types.js";
  */
 export type RouterFormHandler = (evt: SubmitEvent, router: RouterContext, actionBase: string) => void;
 export declare function setRouterFormHandler(handler: RouterFormHandler | undefined): void;
+/**
+ * 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.
+ */
+declare let linkPreloader: ((router: RouterContext, url: URL, data: boolean) => void) | undefined;
+export declare function setLinkPreloader(preloader: typeof linkPreloader): void;
 type NativeEventConfig = {
-    preload?: boolean;
+    preload?: LinkPreload | readonly LinkPreload[];
     explicitLinks?: boolean;
     actionBase?: string;
-    transformUrl?: (url: string) => string;
 };
-export declare function setupNativeEvents({ preload, explicitLinks, actionBase, transformUrl }?: NativeEventConfig): (router: RouterContext) => void;
+export declare function setupNativeEvents({ preload, explicitLinks, actionBase }?: NativeEventConfig): (router: RouterContext) => void;
 export {};

package/dist/data/events.js

@@ -5,12 +5,20 @@ let formHandler;
 export function setRouterFormHandler(handler) {
     formHandler = handler;
 }
-export function setupNativeEvents({ preload = true, explicitLinks = false, actionBase = "/_server", transformUrl } = {}) {
+/**
+ * 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;
+export function setLinkPreloader(preloader) {
+    linkPreloader = preloader;
+}
+export function setupNativeEvents({ preload, explicitLinks = false, 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";
         }
@@ -22,10 +30,19 @@ export function setupNativeEvents({ preload = true, explicitLinks = false, actio
                 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")))
+            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;
@@ -42,7 +59,7 @@ export function setupNativeEvents({ preload = true, explicitLinks = false, actio
                 return;
             if (url.origin !== window.location.origin || !isUnderBase(url.pathname, basePath))
                 return;
-            return [a, url];
+            return url;
         }
         function handleAnchorClick(evt) {
             const res = handleAnchor(evt);
@@ -61,28 +78,6 @@ export function setupNativeEvents({ preload = true, explicitLinks = false, actio
                 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);
@@ -104,29 +99,30 @@ export function setupNativeEvents({ preload = true, explicitLinks = false, actio
             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);
-            import("./serverForms.js").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);
+                import("./serverForms.js").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)
+            }));
     };
 }

package/dist/index.d.ts

@@ -19,12 +19,14 @@ export interface RouteInfo {
 }
 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 { useHref, useIsRouting, useLinkState, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useRouteMatches, useSearchParams, RouterContextObj as RouterContext } from "./routing.js";
 export type { LinkState } from "./routing.js";
 export { pendingLinks } from "./pending.js";
+export { eagerPreload, intentPreload, tapPreload, viewportPreload } from "./preload.js";
+export { usePreloadRoute } from "./preloadRoute.js";
 export { mergeSearchString as _mergeSearchString } from "./utils.js";
 export { int } from "./paths.js";
 export { serverRouteComponent } from "./serverRouteComponent.js";
 export type { RoutePaths, PathParamsOf, PathEnd, TypedMatchFilter, DefaultSearchTypes } from "./paths.js";
 export * from "./data/index.js";
-export type { LinksPlugin, Location, LocationChange, LocationWrite, SearchParams, MatchFilter, MatchFilters, NavigateOptions, Navigator, OutputMatch, Params, PathMatch, RouteComponent, RouteParams, RouteProps, RouteSectionProps, RoutePreloadFunc, RoutePreloadFuncArgs, RouteDefinition, RouteDescription, RouteMatch, RouterIntegration, RouterUtils, SetParams, SetSearchParams, ServerRouteArgs, ServerRouteParams, ServerRouteFunction, ServerRouteView, Submission, BeforeLeaveEventArgs, TypedPath, TypedSearchPath, StandardSchemaV1 } from "./types.js";
+export type { LinkPreload, LinksPlugin, Location, LocationChange, LocationWrite, SearchParams, MatchFilter, MatchFilters, NavigateOptions, Navigator, OutputMatch, Params, PathMatch, RouteComponent, RouteParams, RouteProps, RouteSectionProps, RoutePreloadFunc, RoutePreloadFuncArgs, RouteDefinition, RouteDescription, RouteMatch, RouterIntegration, RouterUtils, SetParams, SetSearchParams, ServerRouteArgs, ServerRouteParams, ServerRouteFunction, ServerRouteView, Submission, BeforeLeaveEventArgs, TypedPath, TypedSearchPath, StandardSchemaV1 } from "./types.js";