usePreloadRoute method pre-release

Author: ryansolid

.changeset/shy-rats-kiss.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/router": patch
+---
+
+usePreloadRoute method pre-release

README.md

@@ -873,6 +873,16 @@ const matches = useCurrentMatches();
 const breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb))
 ```
 
+### usePreloadRoute
+
+`usePreloadRoute` returns a function that can be used to preload a route manual. This is what happens automatically with link hovering and similar focus based behavior, but it is available here as an API.
+
+```js
+const preload = usePreloadRoute();
+
+preload(`/users/settings`, { preloadData: true });
+```
+
 ### useBeforeLeave
 
 `useBeforeLeave` takes a function that will be called prior to leaving a route. The function will be called with:

src/data/events.ts

@@ -75,7 +75,7 @@ export function setupNativeEvents(preload = true, explicitLinks = false, actionB
         url.pathname = transformUrl(url.pathname);
       }
       if (!preloadTimeout[url.pathname])
-        router.preloadRoute(url, a.getAttribute("preload") !== "false");
+        router.preloadRoute(url, { preloadData: a.getAttribute("preload") !== "false" });
     }
 
     function handleAnchorIn(evt: Event) {
@@ -87,7 +87,7 @@ export function setupNativeEvents(preload = true, explicitLinks = false, actionB
       }
       if (preloadTimeout[url.pathname]) return;
       preloadTimeout[url.pathname] = setTimeout(() => {
-        router.preloadRoute(url, a.getAttribute("preload") !== "false");
+        router.preloadRoute(url, { preloadData: a.getAttribute("preload") !== "false" });
         delete preloadTimeout[url.pathname];
       }, 200) as any;
     }

src/routing.ts

@@ -77,6 +77,7 @@ export const useHref = (to: () => string | undefined) => {
 export const useNavigate = () => useRouter().navigatorFactory();
 export const useLocation = <S = unknown>() => useRouter().location as Location<S>;
 export const useIsRouting = () => useRouter().isRouting;
+export const usePreloadRoute = () => useRouter().preloadRoute
 
 export const useMatch = <S extends string>(path: () => S, matchFilters?: MatchFilters<S>) => {
   const location = useLocation();
@@ -459,7 +460,7 @@ export function createRouterContext(
     }
   }
 
-  function preloadRoute(url: URL, preloadData: boolean) {
+  function preloadRoute(url: URL, options: { preloadData?: boolean } = {}) {
     const matches = getRouteMatches(branches(), url.pathname);
     const prevIntent = intent;
     intent = "preload";
@@ -470,7 +471,7 @@ export function createRouterContext(
         (route.component as MaybePreloadableComponent).preload!();
       const { load } = route;
       inLoadFn = true;
-      preloadData &&
+      options.preloadData &&
         load &&
         runWithOwner(getContext!(), () =>
           load({

src/types.ts

@@ -167,7 +167,7 @@ export interface RouterContext {
   renderPath(path: string): string;
   parsePath(str: string): string;
   beforeLeave: BeforeLeaveLifecycle;
-  preloadRoute: (url: URL, preloadData: boolean) => void;
+  preloadRoute: (url: URL, options: { preloadData?: boolean }) => void;
   singleFlight: boolean;
   submissions: Signal<Submission<any, any>[]>;
 }