rename load to preload

Author: ryansolid

.changeset/serious-teachers-deny.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/router": minor
+---
+
+rename load to preload

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,25 +380,25 @@ 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";
 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>
 ```
 

src/data/cache.ts

@@ -8,7 +8,7 @@ import {
   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";
 import { CacheEntry } from "../types.js";
 
 const LocationHeader = "Location";
@@ -69,7 +69,7 @@ export function cache<T extends (...args: any) => any>(fn: T, name: string): Cac
   const cachedFn = ((...args: Parameters<T>) => {
     const cache = getCache();
     const intent = getIntent();
-    const inLoadFn = getInLoadFn();
+    const inPreloadFn = getInPreloadFn();
     const owner = getOwner();
     const navigate = owner ? useNavigate() : undefined;
     const now = Date.now();
@@ -118,7 +118,7 @@ export function cache<T extends (...args: any) => any>(fn: T, name: string): Cac
             : 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 =
@@ -152,7 +152,7 @@ export function cache<T extends (...args: any) => any>(fn: T, name: string): Cac
           ? 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 &&

src/index.tsx

@@ -27,13 +27,15 @@ export type {
   Params,
   PathMatch,
   RouteSectionProps,
-  RouteLoadFunc,
-  RouteLoadFuncArgs,
+  RoutePreloadFunc,
+  RoutePreloadFuncArgs,
   RouteDefinition,
   RouteDescription,
   RouteMatch,
   RouterIntegration,
   RouterUtils,
   SetParams,
-  BeforeLeaveEventArgs
+  BeforeLeaveEventArgs,
+  RouteLoadFunc,
+  RouteLoadFuncArgs,
 } from "./types.js";

src/routers/components.tsx

@@ -20,17 +20,17 @@ import {
   getRouteMatches,
   RouteContextObj,
   RouterContextObj,
-  setInLoadFn
+  setInPreloadFn
 } from "../routing.js";
 import type {
   MatchFilters,
   RouteContext,
-  RouteLoadFunc,
   RouteDefinition,
   RouterIntegration,
   RouterContext,
   Branch,
-  RouteSectionProps
+  RouteSectionProps,
+  RoutePreloadFunc
 } from "../types.js";
 
 export type BaseRouterProps = {
@@ -39,10 +39,12 @@ export type BaseRouterProps = {
    * 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 const createRouterComponent = (router: RouterIntegration) => (props: BaseRouterProps) => {
@@ -61,7 +63,7 @@ export const createRouterComponent = (router: RouterIntegration) => (props: Base
   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>
@@ -72,18 +74,18 @@ export const createRouterComponent = (router: RouterIntegration) => (props: Base
 function Root(props: {
   routerState: RouterContext;
   root?: Component<RouteSectionProps>;
-  load?: RouteLoadFunc;
+  preload?: RoutePreloadFunc;
   children: JSX.Element;
 }) {
   const location = props.routerState.location;
   const params = props.routerState.params;
   const data = createMemo(
     () =>
-      props.load &&
+      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 (
@@ -169,10 +171,12 @@ const createOutlet = (child: () => RouteContext | undefined) => {
 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 const Route = <S extends string, T = unknown>(props: RouteProps<S, T>) => {
@@ -196,8 +200,8 @@ function dataOnly(event: RequestEvent, routerState: RouterContext, branches: Bra
     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"

src/routing.ts

@@ -125,13 +125,13 @@ export const useBeforeLeave = (listener: (e: BeforeLeaveEventArgs) => void) => {
 };
 
 export function createRoutes(routeDef: RouteDefinition, base: string = ""): RouteDescription[] {
-  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
   };
 
@@ -271,12 +271,12 @@ let intent: Intent | undefined;
 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: boolean) {
-  inLoadFn = value;
+export function setInPreloadFn(value: boolean) {
+  inPreloadFn = value;
 }
 
 export function createRouterContext(
@@ -469,12 +469,12 @@ export function createRouterContext(
       route.component &&
         (route.component as MaybePreloadableComponent).preload &&
         (route.component as MaybePreloadableComponent).preload!();
-      const { load } = route;
-      inLoadFn = true;
+      const { preload } = route;
+      inPreloadFn = true;
       options.preloadData &&
-        load &&
+        preload &&
         runWithOwner(getContext!(), () =>
-          load({
+          preload({
             params,
             location: {
               pathname: url.pathname,
@@ -487,7 +487,7 @@ export function createRouterContext(
             intent: "preload"
           })
         );
-      inLoadFn = false;
+      inPreloadFn = false;
     }
     intent = prevIntent;
   }
@@ -507,15 +507,15 @@ export function createRouteContext(
   match: () => RouteMatch
 ): RouteContext {
   const { base, location, params } = router;
-  const { pattern, component, load } = match().route;
+  const { pattern, component, preload } = match().route;
   const path = createMemo(() => match().path);
 
   component &&
     (component as MaybePreloadableComponent).preload &&
     (component as MaybePreloadableComponent).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: RouteContext = {
     parent,