@solidjs/router 0.13.6 → 0.14.0

package/README.md

@@ -10,7 +10,7 @@ A router lets you change your view based on the URL in the browser. This allows
 
 Solid Router is a universal router for SolidJS - it works whether you're rendering on the client or on the server. It was inspired by and combines paradigms of React Router and the Ember Router. Routes can be defined directly in your app's template using JSX, but you can also pass your route configuration directly as an object. It also supports nested routing, so navigation can change a part of a component, rather than completely replacing it.
 
-It supports all of Solid's SSR methods and has Solid's transitions baked in, so use it freely with suspense, resources, and lazy components. Solid Router also allows you to define a load function that loads parallel to the routes ([render-as-you-fetch](https://epicreact.dev/render-as-you-fetch/)).
+It supports all of Solid's SSR methods and has Solid's transitions baked in, so use it freely with suspense, resources, and lazy components. Solid Router also allows you to define a preload function that loads parallel to the routes ([render-as-you-fetch](https://epicreact.dev/render-as-you-fetch/)).
 
 - [Getting Started](#getting-started)
   - [Set Up the Router](#set-up-the-router)
@@ -380,11 +380,11 @@ You can nest indefinitely - just remember that only leaf nodes will become their
 </Route>
 ```
 
-## Load Functions
+## Preload Functions
 
-Even with smart caches it is possible that we have waterfalls both with view logic and with lazy loaded code. With load functions, we can instead start fetching the data parallel to loading the route, so we can use the data as soon as possible. The load function is called when the Route is loaded or eagerly when links are hovered.
+Even with smart caches it is possible that we have waterfalls both with view logic and with lazy loaded code. With preload functions, we can instead start fetching the data parallel to loading the route, so we can use the data as soon as possible. The preload function is called when the Route is loaded or eagerly when links are hovered.
 
-As its only argument, the load function is passed an object that you can use to access route information:
+As its only argument, the preload function is passed an object that you can use to access route information:
 
 ```js
 import { lazy } from "solid-js";
@@ -392,13 +392,13 @@ import { Route } from "@solidjs/router";
 
 const User = lazy(() => import("./pages/users/[id].js"));
 
-// load function
-function loadUser({params, location}) {
-  // do loading
+// preload function
+function preloadUser({params, location}) {
+  // do preloading
 }
 
 // Pass it in the route definition
-<Route path="/users/:id" component={User} load={loadUser} />;
+<Route path="/users/:id" component={User} preload={preloadUser} />;
 ```
 
 | key      | type                                              | description                                                                                                                   |
@@ -408,24 +408,24 @@ function loadUser({params, location}) {
 | intent | `"initial", "navigate", "native", "preload"` | Indicates why this function is being called. <ul><li>"initial" - the route is being initially shown (ie page load)</li><li>"native" - navigate originated from the browser (eg back/forward)</li><li>"navigate" - navigate originated from the router (eg call to navigate or anchor clicked)</li><li>"preload" - not navigating, just preloading (eg link hover)</li></ul> |
 
 
-A common pattern is to export the load function and data wrappers that corresponds to a route in a dedicated `route.data.js` file. This way, the data function can be imported without loading anything else.
+A common pattern is to export the preload function and data wrappers that corresponds to a route in a dedicated `route.data.js` file. This way, the data function can be imported without loading anything else.
 
 ```js
 import { lazy } from "solid-js";
 import { Route } from "@solidjs/router";
-import loadUser from "./pages/users/[id].data.js";
+import preloadUser from "./pages/users/[id].data.js";
 const User = lazy(() => import("/pages/users/[id].js"));
 
 // In the Route definition
-<Route path="/users/:id" component={User} load={loadUser} />;
+<Route path="/users/:id" component={User} preload={preloadUser} />;
 ```
 
-The return value of the `load` function is passed to the page component when called at anytime other than `"preload"`, so you can initialize things in there, or alternatively use our new Data APIs:
+The return value of the `preload` function is passed to the page component when called at anytime other than `"preload"` intent, so you can initialize things in there, or alternatively use our new Data APIs:
 
 
 ## Data APIs
 
-Keep in mind these are completely optional. To use but showcase the power of our load mechanism.
+Keep in mind these are completely optional. To use but showcase the power of our preload mechanism.
 
 ### `cache`
 
@@ -441,11 +441,11 @@ It is expected that the arguments to the cache function are serializable.
 This cache accomplishes the following:
 
 1. It does just deduping on the server for the lifetime of the request.
-2. It does preload cache in the browser which lasts 10 seconds. When a route is preloaded on hover or when load is called when entering a route it will make sure to dedupe calls.
+2. It does preload cache in the browser which lasts 5 seconds. When a route is preloaded on hover or when preload is called when entering a route it will make sure to dedupe calls.
 3. We have a reactive refetch mechanism based on key. So we can tell routes that aren't new to retrigger on action revalidation.
 4. It will serve as a back/forward cache for browser navigation up to 5 mins. Any user based navigation or link click bypasses it. Revalidation or new fetch updates the cache.
 
-Using it with load function might look like:
+Using it with preload function might look like:
 
 ```js
 import { lazy } from "solid-js";
@@ -454,13 +454,13 @@ import { getUser } from ... // the cache function
 
 const User = lazy(() => import("./pages/users/[id].js"));
 
-// load function
-function loadUser({params, location}) {
+// preload function
+function preloadUser({params, location}) {
   void getUser(params.id)
 }
 
 // Pass it in the route definition
-<Route path="/users/:id" component={User} load={loadUser} />;
+<Route path="/users/:id" component={User} preload={preloadUser} />;
 ```
 
 Inside your page component you:
@@ -770,7 +770,7 @@ The Component for defining Routes:
 | component | `Component` | Component that will be rendered for the matched segment |
 | matchFilters | `MatchFilters` | Additional constraints for matching against the route |
 | children | `JSX.Element` | Nested `<Route>` definitions |
-| load | `RouteLoadFunc` | Function called during preload or when the route is navigated to. |
+| preload | `RoutePreloadFunc` | Function called during preload or when the route is navigated to. |
 
 ## Router Primitives
 
@@ -929,7 +929,7 @@ Related without Outlet component it has to be passed in manually. At which point
 
 ### `data` functions & `useRouteData`
 
-These have been replaced by a load mechanism. This  allows link hover preloads (as the load function can be run as much as wanted without worry about reactivity). It support deduping/cache APIs which give more control over how things are cached. It also addresses TS issues with getting the right types in the Component without `typeof` checks.
+These have been replaced by a preload mechanism. This  allows link hover preloads (as the preload function can be run as much as wanted without worry about reactivity). It support deduping/cache APIs which give more control over how things are cached. It also addresses TS issues with getting the right types in the Component without `typeof` checks.
 
 That being said you can reproduce the old pattern largely by turning off preloads at the router level and then injecting your own Context:
 
@@ -939,15 +939,15 @@ import { Route } from "@solidjs/router";
 
 const User = lazy(() => import("./pages/users/[id].js"));
 
-// load function
-function loadUser({params, location}) {
+// preload function
+function preloadUser({params, location}) {
   const [user] = createResource(() => params.id, fetchUser);
   return user;
 }
 
 // Pass it in the route definition
 <Router preload={false}>
-  <Route path="/users/:id" component={User} load={loadUser} />
+  <Route path="/users/:id" component={User} preload={preloadUser} />
 </Router>
 ```
 

package/dist/data/action.d.ts

@@ -1,13 +1,13 @@
 import { JSX } from "solid-js";
-import type { Submission, SubmissionStub } from "../types.js";
-export type Action<T extends Array<any>, U> = (T extends [FormData] | [] ? JSX.SerializableAttributeValue : unknown) & ((...vars: T) => Promise<U>) & {
+import type { Submission, SubmissionStub, NarrowResponse } from "../types.js";
+export type Action<T extends Array<any>, U> = (T extends [FormData] | [] ? JSX.SerializableAttributeValue : unknown) & ((...vars: T) => Promise<NarrowResponse<U>>) & {
     url: string;
-    with<A extends any[], B extends any[]>(this: (this: any, ...args: [...A, ...B]) => Promise<U>, ...args: A): Action<B, U>;
+    with<A extends any[], B extends any[]>(this: (this: any, ...args: [...A, ...B]) => Promise<NarrowResponse<U>>, ...args: A): Action<B, U>;
 };
 export declare const actions: Map<string, Action<any, any>>;
 export declare function useSubmissions<T extends Array<any>, U>(fn: Action<T, U>, filter?: (arg: T) => boolean): Submission<T, U>[] & {
     pending: boolean;
 };
 export declare function useSubmission<T extends Array<any>, U>(fn: Action<T, U>, filter?: (arg: T) => boolean): Submission<T, U> | SubmissionStub;
-export declare function useAction<T extends Array<any>, U>(action: Action<T, U>): (...args: Parameters<Action<T, U>>) => Promise<U>;
+export declare function useAction<T extends Array<any>, U>(action: Action<T, U>): (...args: Parameters<Action<T, U>>) => Promise<NarrowResponse<U>>;
 export declare function action<T extends Array<any>, U = void>(fn: (...args: T) => Promise<U>, name?: string): Action<T, U>;

package/dist/data/cache.d.ts

@@ -1,9 +1,9 @@
-import { CacheEntry } from "../types.js";
+import type { CacheEntry, NarrowResponse } from "../types.js";
 export declare function revalidate(key?: string | string[] | void, force?: boolean): Promise<void>;
 export declare function cacheKeyOp(key: string | string[] | void, fn: (cacheEntry: CacheEntry) => void): void;
 export type CachedFunction<T extends (...args: any) => any> = T extends (...args: infer A) => infer R ? ([] extends {
     [K in keyof A]-?: A[K];
-} ? (...args: never[]) => R : T) & {
+} ? (...args: never[]) => R extends Promise<infer P> ? Promise<NarrowResponse<P>> : NarrowResponse<R> : (...args: A) => R extends Promise<infer P> ? Promise<NarrowResponse<P>> : NarrowResponse<R>) & {
     keyFor: (...args: A) => string;
     key: string;
 } : never;

package/dist/data/cache.js

@@ -1,6 +1,6 @@
 import { createSignal, getListener, getOwner, onCleanup, sharedConfig, startTransition } from "solid-js";
 import { getRequestEvent, isServer } from "solid-js/web";
-import { useNavigate, getIntent, getInLoadFn } from "../routing.js";
+import { useNavigate, getIntent, getInPreloadFn } from "../routing.js";
 const LocationHeader = "Location";
 const PRELOAD_TIMEOUT = 5000;
 const CACHE_TIMEOUT = 180000;
@@ -47,7 +47,7 @@ export function cache(fn, name) {
     const cachedFn = ((...args) => {
         const cache = getCache();
         const intent = getIntent();
-        const inLoadFn = getInLoadFn();
+        const inPreloadFn = getInPreloadFn();
         const owner = getOwner();
         const navigate = owner ? useNavigate() : undefined;
         const now = Date.now();
@@ -94,7 +94,7 @@ export function cache(fn, name) {
                         : handleResponse(false)(cached[1]);
                 !isServer && intent === "navigate" && startTransition(() => cached[3][1](cached[0])); // update version
             }
-            inLoadFn && "then" in res && res.catch(() => { });
+            inPreloadFn && "then" in res && res.catch(() => { });
             return res;
         }
         let res = !isServer && sharedConfig.context && sharedConfig.has(key)
@@ -125,7 +125,7 @@ export function cache(fn, name) {
                     ? res.then(handleResponse(false), handleResponse(true))
                     : handleResponse(false)(res);
         }
-        inLoadFn && "then" in res && res.catch(() => { });
+        inPreloadFn && "then" in res && res.catch(() => { });
         // serialize on server
         if (isServer &&
             sharedConfig.context &&

package/dist/data/events.js

@@ -111,10 +111,10 @@ export function setupNativeEvents(preload = true, explicitLinks = false, actionB
             const handler = actions.get(actionRef);
             if (handler) {
                 evt.preventDefault();
-                const data = new FormData(evt.target);
-                if (evt.submitter && evt.submitter.name)
-                    data.append(evt.submitter.name, evt.submitter.value);
-                handler.call({ r: router, f: evt.target }, data);
+                const data = new FormData(evt.target, evt.submitter);
+                handler.call({ r: router, f: evt.target }, evt.target.enctype === "multipart/form-data"
+                    ? data
+                    : new URLSearchParams(data));
             }
         }
         // ensure delegated event run first

package/dist/data/response.d.ts

@@ -1,6 +1,4 @@
-export type RouterResponseInit = Omit<ResponseInit, "body"> & {
-    revalidate?: string | string[];
-};
-export declare function redirect(url: string, init?: number | RouterResponseInit): never;
-export declare function reload(init?: RouterResponseInit): never;
-export declare function json<T>(data: T, init?: RouterResponseInit): T;
+import type { RouterResponseInit, CustomResponse } from "../types";
+export declare function redirect(url: string, init?: number | RouterResponseInit): CustomResponse<never>;
+export declare function reload(init?: RouterResponseInit): CustomResponse<never>;
+export declare function json<T>(data: T, init?: RouterResponseInit): CustomResponse<T>;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./routers/index.js";
 export * from "./components.jsx";
 export * from "./lifecycle.js";
-export { useHref, useIsRouting, useLocation, useMatch, useCurrentMatches, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing.js";
+export { useHref, useIsRouting, useLocation, useMatch, useCurrentMatches, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, usePreloadRoute } from "./routing.js";
 export { mergeSearchString as _mergeSearchString } from "./utils.js";
 export * from "./data/index.js";
-export type { Location, LocationChange, MatchFilter, MatchFilters, NavigateOptions, Navigator, OutputMatch, Params, PathMatch, RouteSectionProps, RouteLoadFunc, RouteLoadFuncArgs, RouteDefinition, RouteDescription, RouteMatch, RouterIntegration, RouterUtils, SetParams, BeforeLeaveEventArgs } from "./types.js";
+export type { Location, LocationChange, MatchFilter, MatchFilters, NavigateOptions, Navigator, OutputMatch, Params, PathMatch, RouteSectionProps, RoutePreloadFunc, RoutePreloadFuncArgs, RouteDefinition, RouteDescription, RouteMatch, RouterIntegration, RouterUtils, SetParams, BeforeLeaveEventArgs, RouteLoadFunc, RouteLoadFuncArgs, RouterResponseInit, CustomResponse } from "./types.js";

package/dist/index.js

@@ -246,6 +246,7 @@ const useHref = to => {
 const useNavigate = () => useRouter().navigatorFactory();
 const useLocation = () => useRouter().location;
 const useIsRouting = () => useRouter().isRouting;
+const usePreloadRoute = () => useRouter().preloadRoute;
 const useMatch = (path, matchFilters) => {
   const location = useLocation();
   const matchers = createMemo(() => expandOptionals(path()).map(path => createMatcher(path, undefined, matchFilters)));
@@ -282,6 +283,7 @@ const useBeforeLeave = listener => {
 function createRoutes(routeDef, base = "") {
   const {
     component,
+    preload,
     load,
     children,
     info
@@ -290,7 +292,7 @@ function createRoutes(routeDef, base = "") {
   const shared = {
     key: routeDef,
     component,
-    load,
+    preload: preload || load,
     info
   };
   return asArray(routeDef.path).reduce((acc, originalPath) => {
@@ -407,12 +409,12 @@ let intent;
 function getIntent() {
   return intent;
 }
-let inLoadFn = false;
-function getInLoadFn() {
-  return inLoadFn;
+let inPreloadFn = false;
+function getInPreloadFn() {
+  return inPreloadFn;
 }
-function setInLoadFn(value) {
-  inLoadFn = value;
+function setInPreloadFn(value) {
+  inPreloadFn = value;
 }
 function createRouterContext(integration, branches, getContext, options = {}) {
   const {
@@ -593,10 +595,10 @@ function createRouterContext(integration, branches, getContext, options = {}) {
       } = matches[match];
       route.component && route.component.preload && route.component.preload();
       const {
-        load
+        preload
       } = route;
-      inLoadFn = true;
-      options.preloadData && load && runWithOwner(getContext(), () => load({
+      inPreloadFn = true;
+      options.preloadData && preload && runWithOwner(getContext(), () => preload({
         params,
         location: {
           pathname: url.pathname,
@@ -608,7 +610,7 @@ function createRouterContext(integration, branches, getContext, options = {}) {
         },
         intent: "preload"
       }));
-      inLoadFn = false;
+      inPreloadFn = false;
     }
     intent = prevIntent;
   }
@@ -626,17 +628,17 @@ function createRouteContext(router, parent, outlet, match) {
   const {
     pattern,
     component,
-    load
+    preload
   } = match().route;
   const path = createMemo(() => match().path);
   component && component.preload && component.preload();
-  inLoadFn = true;
-  const data = load ? load({
+  inPreloadFn = true;
+  const data = preload ? preload({
     params,
     location,
     intent: intent || "initial"
   }) : undefined;
-  inLoadFn = false;
+  inPreloadFn = false;
   const route = {
     parent,
     pattern,
@@ -677,8 +679,8 @@ const createRouterComponent = router => props => {
         get root() {
           return props.root;
         },
-        get load() {
-          return props.rootLoad;
+        get preload() {
+          return props.rootPreload || props.rootLoad;
         },
         get children() {
           return [memo(() => (context = getOwner()) && null), createComponent$1(Routes, {
@@ -695,14 +697,14 @@ const createRouterComponent = router => props => {
 function Root(props) {
   const location = props.routerState.location;
   const params = props.routerState.params;
-  const data = createMemo(() => props.load && untrack(() => {
-    setInLoadFn(true);
-    props.load({
+  const data = createMemo(() => props.preload && untrack(() => {
+    setInPreloadFn(true);
+    props.preload({
       params,
       location,
       intent: getIntent() || "initial"
     });
-    setInLoadFn(false);
+    setInPreloadFn(false);
   }));
   return createComponent$1(Show, {
     get when() {
@@ -807,7 +809,7 @@ function dataOnly(event, routerState, branches) {
       route,
       params
     } = matches[match];
-    route.load && route.load({
+    route.preload && route.preload({
       params,
       location: routerState.location,
       intent: "preload"
@@ -922,7 +924,7 @@ function cache(fn, name) {
   const cachedFn = (...args) => {
     const cache = getCache();
     const intent = getIntent();
-    const inLoadFn = getInLoadFn();
+    const inPreloadFn = getInPreloadFn();
     const owner = getOwner();
     const navigate = owner ? useNavigate() : undefined;
     const now = Date.now();
@@ -960,7 +962,7 @@ function cache(fn, name) {
         res = "then" in cached[1] ? cached[1].then(handleResponse(false), handleResponse(true)) : handleResponse(false)(cached[1]);
         !isServer && intent === "navigate" && startTransition(() => cached[3][1](cached[0])); // update version
       }
-      inLoadFn && "then" in res && res.catch(() => {});
+      inPreloadFn && "then" in res && res.catch(() => {});
       return res;
     }
     let res = !isServer && sharedConfig.context && sharedConfig.has(key) ? sharedConfig.load(key) // hydrating
@@ -985,7 +987,7 @@ function cache(fn, name) {
     if (intent !== "preload") {
       res = "then" in res ? res.then(handleResponse(false), handleResponse(true)) : handleResponse(false)(res);
     }
-    inLoadFn && "then" in res && res.catch(() => {});
+    inPreloadFn && "then" in res && res.catch(() => {});
     // serialize on server
     if (isServer && sharedConfig.context && sharedConfig.context.async && !sharedConfig.context.noHydrate) {
       const e = getRequestEvent();
@@ -1277,12 +1279,11 @@ function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "
       const handler = actions.get(actionRef);
       if (handler) {
         evt.preventDefault();
-        const data = new FormData(evt.target);
-        if (evt.submitter && evt.submitter.name) data.append(evt.submitter.name, evt.submitter.value);
+        const data = new FormData(evt.target, evt.submitter);
         handler.call({
           r: router,
           f: evt.target
-        }, data);
+        }, evt.target.enctype === "multipart/form-data" ? data : new URLSearchParams(data));
       }
     }
 
@@ -1312,7 +1313,7 @@ function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "
 function Router(props) {
   if (isServer) return StaticRouter(props);
   const getSource = () => {
-    const url = window.location.pathname + window.location.search;
+    const url = window.location.pathname.replace(/^\/+/, "/") + window.location.search;
     return {
       value: props.transformUrl ? props.transformUrl(url) + window.location.hash : url + window.location.hash,
       state: window.history.state
@@ -1643,4 +1644,4 @@ function json(data, init = {}) {
   return response;
 }
 
-export { A, HashRouter, MemoryRouter, Navigate, Route, Router, StaticRouter, mergeSearchString as _mergeSearchString, action, cache, createAsync, createAsyncStore, createBeforeLeave, createMemoryHistory, createRouter, json, keepDepth, notifyIfNotBlocked, redirect, reload, revalidate, saveCurrentDepth, useAction, useBeforeLeave, useCurrentMatches, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useSubmission, useSubmissions };
+export { A, HashRouter, MemoryRouter, Navigate, Route, Router, StaticRouter, mergeSearchString as _mergeSearchString, action, cache, createAsync, createAsyncStore, createBeforeLeave, createMemoryHistory, createRouter, json, keepDepth, notifyIfNotBlocked, redirect, reload, revalidate, saveCurrentDepth, useAction, useBeforeLeave, useCurrentMatches, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, usePreloadRoute, useResolvedPath, useSearchParams, useSubmission, useSubmissions };

package/dist/index.jsx

@@ -1,6 +1,6 @@
 export * from "./routers/index.js";
 export * from "./components.jsx";
 export * from "./lifecycle.js";
-export { useHref, useIsRouting, useLocation, useMatch, useCurrentMatches, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing.js";
+export { useHref, useIsRouting, useLocation, useMatch, useCurrentMatches, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, usePreloadRoute } from "./routing.js";
 export { mergeSearchString as _mergeSearchString } from "./utils.js";
 export * from "./data/index.js";

package/dist/routers/Router.js

@@ -7,7 +7,7 @@ export function Router(props) {
     if (isServer)
         return StaticRouter(props);
     const getSource = () => {
-        const url = window.location.pathname + window.location.search;
+        const url = window.location.pathname.replace(/^\/+/, "/") + window.location.search;
         return {
             value: props.transformUrl ? props.transformUrl(url) + window.location.hash : url + window.location.hash,
             state: window.history.state

package/dist/routers/components.d.ts

@@ -1,23 +1,27 @@
 import type { Component, JSX } from "solid-js";
-import type { MatchFilters, RouteLoadFunc, RouteDefinition, RouterIntegration, RouteSectionProps } from "../types.js";
+import type { MatchFilters, RouteDefinition, RouterIntegration, RouteSectionProps, RoutePreloadFunc } from "../types.js";
 export type BaseRouterProps = {
     base?: string;
     /**
      * A component that wraps the content of every route.
      */
     root?: Component<RouteSectionProps>;
-    rootLoad?: RouteLoadFunc;
+    rootPreload?: RoutePreloadFunc;
     singleFlight?: boolean;
     children?: JSX.Element | RouteDefinition | RouteDefinition[];
     transformUrl?: (url: string) => string;
+    /** @deprecated use rootPreload */
+    rootLoad?: RoutePreloadFunc;
 };
 export declare const createRouterComponent: (router: RouterIntegration) => (props: BaseRouterProps) => JSX.Element;
 export type RouteProps<S extends string, T = unknown> = {
     path?: S | S[];
     children?: JSX.Element;
-    load?: RouteLoadFunc<T>;
+    preload?: RoutePreloadFunc<T>;
     matchFilters?: MatchFilters<S>;
     component?: Component<RouteSectionProps<T>>;
     info?: Record<string, any>;
+    /** @deprecated use preload */
+    load?: RoutePreloadFunc<T>;
 };
 export declare const Route: <S extends string, T = unknown>(props: RouteProps<S, T>) => JSX.Element;

package/dist/routers/components.jsx

@@ -1,7 +1,7 @@
 /*@refresh skip*/
 import { getRequestEvent, isServer } from "solid-js/web";
 import { children, createMemo, createRoot, getOwner, mergeProps, on, Show, untrack } from "solid-js";
-import { createBranches, createRouteContext, createRouterContext, getIntent, getRouteMatches, RouteContextObj, RouterContextObj, setInLoadFn } from "../routing.js";
+import { createBranches, createRouteContext, createRouterContext, getIntent, getRouteMatches, RouteContextObj, RouterContextObj, setInPreloadFn } from "../routing.js";
 export const createRouterComponent = (router) => (props) => {
     const { base } = props;
     const routeDefs = children(() => props.children);
@@ -14,7 +14,7 @@ export const createRouterComponent = (router) => (props) => {
     });
     router.create && router.create(routerState);
     return (<RouterContextObj.Provider value={routerState}>
-      <Root routerState={routerState} root={props.root} load={props.rootLoad}>
+      <Root routerState={routerState} root={props.root} preload={props.rootPreload || props.rootLoad}>
         {(context = getOwner()) && null}
         <Routes routerState={routerState} branches={branches()}/>
       </Root>
@@ -23,11 +23,11 @@ export const createRouterComponent = (router) => (props) => {
 function Root(props) {
     const location = props.routerState.location;
     const params = props.routerState.params;
-    const data = createMemo(() => props.load &&
+    const data = createMemo(() => props.preload &&
         untrack(() => {
-            setInLoadFn(true);
-            props.load({ params, location, intent: getIntent() || "initial" });
-            setInLoadFn(false);
+            setInPreloadFn(true);
+            props.preload({ params, location, intent: getIntent() || "initial" });
+            setInPreloadFn(false);
         }));
     return (<Show when={props.root} keyed fallback={props.children}>
       {Root => (<Root params={params} location={location} data={data()}>
@@ -105,8 +105,8 @@ function dataOnly(event, routerState, branches) {
         if (!prevMatches[match] || matches[match].route !== prevMatches[match].route)
             event.router.dataOnly = true;
         const { route, params } = matches[match];
-        route.load &&
-            route.load({
+        route.preload &&
+            route.preload({
                 params,
                 location: routerState.location,
                 intent: "preload"

package/dist/routing.d.ts

@@ -23,8 +23,8 @@ export declare function createBranches(routeDef: RouteDefinition | RouteDefiniti
 export declare function getRouteMatches(branches: Branch[], location: string): RouteMatch[];
 export declare function createLocation(path: Accessor<string>, state: Accessor<any>): Location;
 export declare function getIntent(): Intent | undefined;
-export declare function getInLoadFn(): boolean;
-export declare function setInLoadFn(value: boolean): void;
+export declare function getInPreloadFn(): boolean;
+export declare function setInPreloadFn(value: boolean): void;
 export declare function createRouterContext(integration: RouterIntegration, branches: () => Branch[], getContext?: () => any, options?: {
     base?: string;
     singleFlight?: boolean;

package/dist/routing.js

@@ -59,12 +59,12 @@ export const useBeforeLeave = (listener) => {
     onCleanup(s);
 };
 export function createRoutes(routeDef, base = "") {
-    const { component, load, children, info } = routeDef;
+    const { component, preload, load, children, info } = routeDef;
     const isLeaf = !children || (Array.isArray(children) && !children.length);
     const shared = {
         key: routeDef,
         component,
-        load,
+        preload: preload || load,
         info
     };
     return asArray(routeDef.path).reduce((acc, originalPath) => {
@@ -186,12 +186,12 @@ let intent;
 export function getIntent() {
     return intent;
 }
-let inLoadFn = false;
-export function getInLoadFn() {
-    return inLoadFn;
+let inPreloadFn = false;
+export function getInPreloadFn() {
+    return inPreloadFn;
 }
-export function setInLoadFn(value) {
-    inLoadFn = value;
+export function setInPreloadFn(value) {
+    inPreloadFn = value;
 }
 export function createRouterContext(integration, branches, getContext, options = {}) {
     const { signal: [source, setSource], utils = {} } = integration;
@@ -350,11 +350,11 @@ export function createRouterContext(integration, branches, getContext, options =
             route.component &&
                 route.component.preload &&
                 route.component.preload();
-            const { load } = route;
-            inLoadFn = true;
+            const { preload } = route;
+            inPreloadFn = true;
             options.preloadData &&
-                load &&
-                runWithOwner(getContext(), () => load({
+                preload &&
+                runWithOwner(getContext(), () => preload({
                     params,
                     location: {
                         pathname: url.pathname,
@@ -366,7 +366,7 @@ export function createRouterContext(integration, branches, getContext, options =
                     },
                     intent: "preload"
                 }));
-            inLoadFn = false;
+            inPreloadFn = false;
         }
         intent = prevIntent;
     }
@@ -377,14 +377,14 @@ export function createRouterContext(integration, branches, getContext, options =
 }
 export function createRouteContext(router, parent, outlet, match) {
     const { base, location, params } = router;
-    const { pattern, component, load } = match().route;
+    const { pattern, component, preload } = match().route;
     const path = createMemo(() => match().path);
     component &&
         component.preload &&
         component.preload();
-    inLoadFn = true;
-    const data = load ? load({ params, location, intent: intent || "initial" }) : undefined;
-    inLoadFn = false;
+    inPreloadFn = true;
+    const data = preload ? preload({ params, location, intent: intent || "initial" }) : undefined;
+    inPreloadFn = false;
     const route = {
         parent,
         pattern,

package/dist/types.d.ts

@@ -56,12 +56,12 @@ export interface RouterIntegration {
     utils?: Partial<RouterUtils>;
 }
 export type Intent = "initial" | "native" | "navigate" | "preload";
-export interface RouteLoadFuncArgs {
+export interface RoutePreloadFuncArgs {
     params: Params;
     location: Location;
     intent: Intent;
 }
-export type RouteLoadFunc<T = unknown> = (args: RouteLoadFuncArgs) => T;
+export type RoutePreloadFunc<T = unknown> = (args: RoutePreloadFuncArgs) => T;
 export interface RouteSectionProps<T = unknown> {
     params: Params;
     location: Location;
@@ -71,10 +71,12 @@ export interface RouteSectionProps<T = unknown> {
 export type RouteDefinition<S extends string | string[] = any, T = unknown> = {
     path?: S;
     matchFilters?: MatchFilters<S>;
-    load?: RouteLoadFunc<T>;
+    preload?: RoutePreloadFunc<T>;
     children?: RouteDefinition | RouteDefinition[];
     component?: Component<RouteSectionProps<T>>;
     info?: Record<string, any>;
+    /** @deprecated use preload */
+    load?: RoutePreloadFunc;
 };
 export type MatchFilter = readonly string[] | RegExp | ((s: string) => boolean);
 export type PathParams<P extends string | readonly string[]> = P extends `${infer Head}/${infer Tail}` ? [...PathParams<Head>, ...PathParams<Tail>] : P extends `:${infer S}?` ? [S] : P extends `:${infer S}` ? [S] : P extends `*${infer S}` ? [S] : [];
@@ -100,7 +102,7 @@ export interface RouteDescription {
     originalPath: string;
     pattern: string;
     component?: Component<RouteSectionProps>;
-    load?: RouteLoadFunc;
+    preload?: RoutePreloadFunc;
     matcher: (location: string) => PathMatch | null;
     matchFilters?: MatchFilters;
     info?: Record<string, any>;
@@ -181,3 +183,15 @@ export interface MaybePreloadableComponent extends Component {
 export type CacheEntry = [number, any, Intent | undefined, Signal<number> & {
     count: number;
 }];
+export type NarrowResponse<T> = T extends CustomResponse<infer U> ? U : Exclude<T, Response>;
+export type RouterResponseInit = Omit<ResponseInit, "body"> & {
+    revalidate?: string | string[];
+};
+export type CustomResponse<T> = Omit<Response, "clone"> & {
+    customBody: () => T;
+    clone(...args: readonly unknown[]): CustomResponse<T>;
+};
+/** @deprecated */
+export type RouteLoadFunc = RoutePreloadFunc;
+/** @deprecated */
+export type RouteLoadFuncArgs = RoutePreloadFuncArgs;

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.13.6",
+  "version": "0.14.0",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",