@solidjs/router 0.13.2 → 0.13.4

package/README.md

@@ -30,6 +30,7 @@ It supports all of Solid's SSR methods and has Solid's transitions baked in, so
   - [useSearchParams](#usesearchparams)
   - [useIsRouting](#useisrouting)
   - [useMatch](#usematch)
+  - [useCurrentMatches](#useCurrentMatches)
   - [useBeforeLeave](#usebeforeleave)
 - [SPAs in Deployed Environments](#spas-in-deployed-environments)
 
@@ -429,7 +430,7 @@ Keep in mind these are completely optional. To use but showcase the power of our
 To prevent duplicate fetching and to trigger handle refetching we provide a cache api. That takes a function and returns the same function.
 
 ```jsx
-const getUser = cache((id) => {
+const getUser = cache(async (id) => {
   return (await fetch(`/api/users${id}`)).json()
 }, "users") // used as cache key + serialized arguments
 ```
@@ -860,6 +861,16 @@ const match = useMatch(() => props.href);
 return <div classList={{ active: Boolean(match()) }} />;
 ```
 
+### useCurrentMatches
+
+`useCurrentMatches` returns all the matches for the current matched route. Useful for getting all the route information.
+
+For example if you stored breadcrumbs on your route definition you could retrieve them like so:
+```js
+const matches = useCurrentMatches();
+const breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb))
+```
+
 ### useBeforeLeave
 
 `useBeforeLeave` takes a function that will be called prior to leaving a route. The function will be called with:

package/dist/components.jsx

@@ -20,7 +20,7 @@ export function A(props) {
             return [false, false];
         const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
         const loc = normalizePath(location.pathname).toLowerCase();
-        return [props.end ? path === loc : loc.startsWith(path), path === loc];
+        return [props.end ? path === loc : loc.startsWith(path + "/") || loc === path, path === loc];
     });
     return (<a {...rest} href={href() || props.href} state={JSON.stringify(props.state)} classList={{
             ...(props.class && { [props.class]: true }),

package/dist/data/action.js

@@ -104,23 +104,18 @@ function toAction(fn, url) {
 const hashString = (s) => s.split("").reduce((a, b) => ((a << 5) - a + b.charCodeAt(0)) | 0, 0);
 async function handleResponse(response, error, navigate) {
     let data;
+    let custom;
     let keys;
-    let invalidateKeys;
+    let flightKeys;
     if (response instanceof Response) {
         if (response.headers.has("X-Revalidate"))
-            keys = invalidateKeys = response.headers.get("X-Revalidate").split(",");
+            keys = response.headers.get("X-Revalidate").split(",");
         if (response.customBody) {
-            data = await response.customBody();
+            data = custom = await response.customBody();
             if (response.headers.has("X-Single-Flight")) {
-                keys || (keys = []);
-                invalidateKeys || (invalidateKeys = []);
-                Object.keys(data).forEach(key => {
-                    if (key === "_$value")
-                        return;
-                    keys.push(key);
-                    cache.set(key, data[key]);
-                });
                 data = data._$value;
+                delete custom._$value;
+                flightKeys = Object.keys(custom);
             }
         }
         if (response.headers.has("Location")) {
@@ -138,7 +133,9 @@ async function handleResponse(response, error, navigate) {
     else
         data = response;
     // invalidate
-    cacheKeyOp(invalidateKeys, entry => (entry[0] = 0));
+    cacheKeyOp(keys, entry => (entry[0] = 0));
+    // set cache
+    flightKeys && flightKeys.forEach(k => cache.set(k, custom[k]));
     // trigger revalidation
     await revalidate(keys, false);
     return data != null ? { data } : undefined;

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 } from "../routing.js";
+import { useNavigate, getIntent, getInLoadFn } from "../routing.js";
 const LocationHeader = "Location";
 const PRELOAD_TIMEOUT = 5000;
 const CACHE_TIMEOUT = 180000;
@@ -47,6 +47,7 @@ export function cache(fn, name) {
     const cachedFn = ((...args) => {
         const cache = getCache();
         const intent = getIntent();
+        const inLoadFn = getInLoadFn();
         const owner = getOwner();
         const navigate = owner ? useNavigate() : undefined;
         const now = Date.now();
@@ -86,13 +87,15 @@ export function cache(fn, name) {
                 cached[0] = now;
             }
             let res = cached[1];
-            if (intent !== "preload") {
+            if (!inLoadFn) {
                 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
             }
+            else
+                "then" in res && res.catch(() => { });
             return res;
         }
         let res = !isServer && sharedConfig.context && sharedConfig.has(key)
@@ -117,12 +120,14 @@ export function cache(fn, name) {
             if (e && e.router.dataOnly)
                 return (e.router.data[key] = res);
         }
-        if (intent !== "preload") {
+        if (!inLoadFn) {
             res =
                 "then" in res
                     ? res.then(handleResponse(false), handleResponse(true))
                     : handleResponse(false)(res);
         }
+        else
+            "then" in res && res.catch(() => { });
         // serialize on server
         if (isServer &&
             sharedConfig.context &&

package/dist/data/events.d.ts

@@ -1,2 +1,2 @@
 import type { RouterContext } from "../types.js";
-export declare function setupNativeEvents(preload?: boolean, explicitLinks?: boolean, actionBase?: string): (router: RouterContext) => void;
+export declare function setupNativeEvents(preload?: boolean, explicitLinks?: boolean, actionBase?: string, transformUrl?: (url: string) => string): (router: RouterContext) => void;

package/dist/data/events.js

@@ -2,7 +2,7 @@ import { delegateEvents } from "solid-js/web";
 import { onCleanup } from "solid-js";
 import { actions } from "./action.js";
 import { mockBase } from "../utils.js";
-export function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "/_server") {
+export function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "/_server", transformUrl) {
     return (router) => {
         const basePath = router.base.path();
         const navigateFromRoute = router.navigatorFactory(router.base);
@@ -57,6 +57,9 @@ export function setupNativeEvents(preload = true, explicitLinks = false, actionB
             if (!res)
                 return;
             const [a, url] = res;
+            if (typeof transformUrl === "function") {
+                url.pathname = transformUrl(url.pathname);
+            }
             if (!preloadTimeout[url.pathname])
                 router.preloadRoute(url, a.getAttribute("preload") !== "false");
         }
@@ -65,6 +68,9 @@ export function setupNativeEvents(preload = true, explicitLinks = false, actionB
             if (!res)
                 return;
             const [a, url] = res;
+            if (typeof transformUrl === "function") {
+                url.pathname = transformUrl(url.pathname);
+            }
             if (preloadTimeout[url.pathname])
                 return;
             preloadTimeout[url.pathname] = setTimeout(() => {
@@ -77,6 +83,9 @@ export function setupNativeEvents(preload = true, explicitLinks = false, actionB
             if (!res)
                 return;
             const [, url] = res;
+            if (typeof transformUrl === "function") {
+                url.pathname = transformUrl(url.pathname);
+            }
             if (preloadTimeout[url.pathname]) {
                 clearTimeout(preloadTimeout[url.pathname]);
                 delete preloadTimeout[url.pathname];

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, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing.js";
+export { useHref, useIsRouting, useLocation, useMatch, useCurrentMatches, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing.js";
 export { mergeSearchString as _mergeSearchString } from "./utils.js";
 export * from "./data/index.js";
-export type { Location, LocationChange, NavigateOptions, Navigator, OutputMatch, Params, RouteSectionProps, RouteLoadFunc, RouteLoadFuncArgs, RouteDefinition, RouterIntegration, RouterUtils, SetParams, BeforeLeaveEventArgs } from "./types.js";
+export type { Location, LocationChange, MatchFilter, MatchFilters, NavigateOptions, Navigator, OutputMatch, Params, PathMatch, RouteSectionProps, RouteLoadFunc, RouteLoadFuncArgs, RouteDefinition, Route, RouteMatch, RouterIntegration, RouterUtils, SetParams, BeforeLeaveEventArgs } from "./types.js";

package/dist/index.js

@@ -256,6 +256,7 @@ const useMatch = (path, matchFilters) => {
     }
   });
 };
+const useCurrentMatches = () => useRouter().matches;
 const useParams = () => useRouter().params;
 const useSearchParams = () => {
   const location = useLocation();
@@ -406,6 +407,13 @@ let intent;
 function getIntent() {
   return intent;
 }
+let inLoadFn = false;
+function getInLoadFn() {
+  return inLoadFn;
+}
+function setInLoadFn(value) {
+  inLoadFn = value;
+}
 function createRouterContext(integration, branches, getContext, options = {}) {
   const {
     signal: [source, setSource],
@@ -438,7 +446,12 @@ function createRouterContext(integration, branches, getContext, options = {}) {
   const location = createLocation(reference, state);
   const referrers = [];
   const submissions = createSignal(isServer ? initFromFlash() : []);
-  const matches = createMemo(() => getRouteMatches(branches(), location.pathname));
+  const matches = createMemo(() => {
+    if (typeof options.transformUrl === "function") {
+      return getRouteMatches(branches(), options.transformUrl(location.pathname));
+    }
+    return getRouteMatches(branches(), location.pathname);
+  });
   const params = createMemoObject(() => {
     const m = matches();
     const params = {};
@@ -462,17 +475,15 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     } = source();
     // Untrack this whole block so `start` doesn't cause Solid's Listener to be preserved
     untrack(() => {
-      if (value !== reference()) {
-        start(() => {
-          intent = "native";
-          setReference(value);
-          setState(state);
-          resetErrorBoundaries();
-          submissions[1]([]);
-        }).then(() => {
-          intent = undefined;
-        });
-      }
+      start(() => {
+        intent = "native";
+        if (value !== reference()) setReference(value);
+        setState(state);
+        resetErrorBoundaries();
+        submissions[1]([]);
+      }).then(() => {
+        intent = undefined;
+      });
     });
   });
   return {
@@ -590,6 +601,7 @@ function createRouterContext(integration, branches, getContext, options = {}) {
       const {
         load
       } = route;
+      inLoadFn = true;
       preloadData && load && runWithOwner(getContext(), () => load({
         params,
         location: {
@@ -602,6 +614,7 @@ function createRouterContext(integration, branches, getContext, options = {}) {
         },
         intent: "preload"
       }));
+      inLoadFn = false;
     }
     intent = prevIntent;
   }
@@ -623,11 +636,13 @@ function createRouteContext(router, parent, outlet, match) {
   } = 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;
   const route = {
     parent,
     pattern,
@@ -656,7 +671,8 @@ const createRouterComponent = router => props => {
   let context;
   const routerState = createRouterContext(router, branches, () => context, {
     base,
-    singleFlight: props.singleFlight
+    singleFlight: props.singleFlight,
+    transformUrl: props.transformUrl
   });
   router.create && router.create(routerState);
   return createComponent$1(RouterContextObj.Provider, {
@@ -685,11 +701,15 @@ const createRouterComponent = router => props => {
 function Root(props) {
   const location = props.routerState.location;
   const params = props.routerState.params;
-  const data = createMemo(() => props.load && untrack(() => props.load({
-    params,
-    location,
-    intent: "preload"
-  })));
+  const data = createMemo(() => props.load && untrack(() => {
+    setInLoadFn(true);
+    props.load({
+      params,
+      location,
+      intent: getIntent() || "initial"
+    });
+    setInLoadFn(false);
+  }));
   return createComponent$1(Show, {
     get when() {
       return props.root;
@@ -821,7 +841,7 @@ function createRouter(config) {
     value
   } : value;
   const signal = intercept(createSignal(wrap(config.get()), {
-    equals: (a, b) => a.value === b.value
+    equals: (a, b) => a.value === b.value && a.state === b.state
   }), undefined, next => {
     !ignore && config.set(next);
     return next;
@@ -856,8 +876,9 @@ function getPath(url) {
 }
 function StaticRouter(props) {
   let e;
+  const url = props.url || (e = getRequestEvent()) && getPath(e.request.url) || "";
   const obj = {
-    value: props.url || (e = getRequestEvent()) && getPath(e.request.url) || ""
+    value: props.transformUrl ? props.transformUrl(url) : url
   };
   return createRouterComponent({
     signal: [() => obj, next => Object.assign(obj, next)]
@@ -907,6 +928,7 @@ function cache(fn, name) {
   const cachedFn = (...args) => {
     const cache = getCache();
     const intent = getIntent();
+    const inLoadFn = getInLoadFn();
     const owner = getOwner();
     const navigate = owner ? useNavigate() : undefined;
     const now = Date.now();
@@ -940,10 +962,10 @@ function cache(fn, name) {
         cached[0] = now;
       }
       let res = cached[1];
-      if (intent !== "preload") {
+      if (!inLoadFn) {
         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
-      }
+      } else "then" in res && res.catch(() => {});
       return res;
     }
     let res = !isServer && sharedConfig.context && sharedConfig.has(key) ? sharedConfig.load(key) // hydrating
@@ -965,9 +987,9 @@ function cache(fn, name) {
       const e = getRequestEvent();
       if (e && e.router.dataOnly) return e.router.data[key] = res;
     }
-    if (intent !== "preload") {
+    if (!inLoadFn) {
       res = "then" in res ? res.then(handleResponse(false), handleResponse(true)) : handleResponse(false)(res);
-    }
+    } else "then" in res && res.catch(() => {});
     // serialize on server
     if (isServer && sharedConfig.context && sharedConfig.context.async && !sharedConfig.context.noHydrate) {
       const e = getRequestEvent();
@@ -1132,21 +1154,17 @@ function toAction(fn, url) {
 const hashString = s => s.split("").reduce((a, b) => (a << 5) - a + b.charCodeAt(0) | 0, 0);
 async function handleResponse(response, error, navigate) {
   let data;
+  let custom;
   let keys;
-  let invalidateKeys;
+  let flightKeys;
   if (response instanceof Response) {
-    if (response.headers.has("X-Revalidate")) keys = invalidateKeys = response.headers.get("X-Revalidate").split(",");
+    if (response.headers.has("X-Revalidate")) keys = response.headers.get("X-Revalidate").split(",");
     if (response.customBody) {
-      data = await response.customBody();
+      data = custom = await response.customBody();
       if (response.headers.has("X-Single-Flight")) {
-        keys || (keys = []);
-        invalidateKeys || (invalidateKeys = []);
-        Object.keys(data).forEach(key => {
-          if (key === "_$value") return;
-          keys.push(key);
-          cache.set(key, data[key]);
-        });
         data = data._$value;
+        delete custom._$value;
+        flightKeys = Object.keys(custom);
       }
     }
     if (response.headers.has("Location")) {
@@ -1161,7 +1179,9 @@ async function handleResponse(response, error, navigate) {
     error: response
   };else data = response;
   // invalidate
-  cacheKeyOp(invalidateKeys, entry => entry[0] = 0);
+  cacheKeyOp(keys, entry => entry[0] = 0);
+  // set cache
+  flightKeys && flightKeys.forEach(k => cache.set(k, custom[k]));
   // trigger revalidation
   await revalidate(keys, false);
   return data != null ? {
@@ -1169,7 +1189,7 @@ async function handleResponse(response, error, navigate) {
   } : undefined;
 }
 
-function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "/_server") {
+function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "/_server", transformUrl) {
   return router => {
     const basePath = router.base.path();
     const navigateFromRoute = router.navigatorFactory(router.base);
@@ -1209,12 +1229,18 @@ function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "
       const res = handleAnchor(evt);
       if (!res) return;
       const [a, url] = res;
+      if (typeof transformUrl === "function") {
+        url.pathname = transformUrl(url.pathname);
+      }
       if (!preloadTimeout[url.pathname]) router.preloadRoute(url, a.getAttribute("preload") !== "false");
     }
     function handleAnchorIn(evt) {
       const res = handleAnchor(evt);
       if (!res) return;
       const [a, url] = res;
+      if (typeof transformUrl === "function") {
+        url.pathname = transformUrl(url.pathname);
+      }
       if (preloadTimeout[url.pathname]) return;
       preloadTimeout[url.pathname] = setTimeout(() => {
         router.preloadRoute(url, a.getAttribute("preload") !== "false");
@@ -1225,6 +1251,9 @@ function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "
       const res = handleAnchor(evt);
       if (!res) return;
       const [, url] = res;
+      if (typeof transformUrl === "function") {
+        url.pathname = transformUrl(url.pathname);
+      }
       if (preloadTimeout[url.pathname]) {
         clearTimeout(preloadTimeout[url.pathname]);
         delete preloadTimeout[url.pathname];
@@ -1278,10 +1307,13 @@ function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "
 
 function Router(props) {
   if (isServer) return StaticRouter(props);
-  const getSource = () => ({
-    value: window.location.pathname + window.location.search + window.location.hash,
-    state: window.history.state
-  });
+  const getSource = () => {
+    const url = window.location.pathname + window.location.search;
+    return {
+      value: props.transformUrl ? props.transformUrl(url) + window.location.hash : url + window.location.hash,
+      state: window.history.state
+    };
+  };
   const beforeLeave = createBeforeLeave();
   return createRouter({
     get: getSource,
@@ -1309,7 +1341,7 @@ function Router(props) {
         });
       }
     })),
-    create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase),
+    create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase, props.transformUrl),
     utils: {
       go: delta => window.history.go(delta),
       beforeLeave
@@ -1342,7 +1374,7 @@ function HashRouter(props) {
       if (replace) {
         window.history.replaceState(keepDepth(state), "", "#" + value);
       } else {
-        window.location.hash = value;
+        window.history.pushState(state, "", "#" + value);
       }
       const hashIndex = value.indexOf("#");
       const hash = hashIndex >= 0 ? value.slice(hashIndex + 1) : "";
@@ -1434,7 +1466,7 @@ function A(props) {
     if (to_ === undefined) return [false, false];
     const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
     const loc = normalizePath(location.pathname).toLowerCase();
-    return [props.end ? path === loc : loc.startsWith(path), path === loc];
+    return [props.end ? path === loc : loc.startsWith(path + "/") || loc === path, path === loc];
   });
   return (() => {
     const _el$ = _tmpl$();
@@ -1607,4 +1639,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, 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, 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, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing.js";
+export { useHref, useIsRouting, useLocation, useMatch, useCurrentMatches, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing.js";
 export { mergeSearchString as _mergeSearchString } from "./utils.js";
 export * from "./data/index.js";

package/dist/routers/HashRouter.js

@@ -22,7 +22,7 @@ export function HashRouter(props) {
                 window.history.replaceState(keepDepth(state), "", "#" + value);
             }
             else {
-                window.location.hash = value;
+                window.history.pushState(state, "", "#" + value);
             }
             const hashIndex = value.indexOf("#");
             const hash = hashIndex >= 0 ? value.slice(hashIndex + 1) : "";

package/dist/routers/Router.js

@@ -6,10 +6,13 @@ import { createBeforeLeave, keepDepth, notifyIfNotBlocked, saveCurrentDepth } fr
 export function Router(props) {
     if (isServer)
         return StaticRouter(props);
-    const getSource = () => ({
-        value: window.location.pathname + window.location.search + window.location.hash,
-        state: window.history.state
-    });
+    const getSource = () => {
+        const url = window.location.pathname + window.location.search;
+        return {
+            value: props.transformUrl ? props.transformUrl(url) + window.location.hash : url + window.location.hash,
+            state: window.history.state
+        };
+    };
     const beforeLeave = createBeforeLeave();
     return createRouter({
         get: getSource,
@@ -32,7 +35,7 @@ export function Router(props) {
                 return !beforeLeave.confirm(s.value, { state: s.state });
             }
         })),
-        create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase),
+        create: setupNativeEvents(props.preload, props.explicitLinks, props.actionBase, props.transformUrl),
         utils: {
             go: delta => window.history.go(delta),
             beforeLeave

package/dist/routers/StaticRouter.js

@@ -6,8 +6,9 @@ function getPath(url) {
 }
 export function StaticRouter(props) {
     let e;
+    const url = props.url || ((e = getRequestEvent()) && getPath(e.request.url)) || "";
     const obj = {
-        value: props.url || ((e = getRequestEvent()) && getPath(e.request.url)) || ""
+        value: props.transformUrl ? props.transformUrl(url) : url,
     };
     return createRouterComponent({
         signal: [() => obj, next => Object.assign(obj, next)]

package/dist/routers/components.d.ts

@@ -9,6 +9,7 @@ export type BaseRouterProps = {
     rootLoad?: RouteLoadFunc;
     singleFlight?: boolean;
     children?: JSX.Element | RouteDefinition | RouteDefinition[];
+    transformUrl?: (url: string) => string;
 };
 export declare const createRouterComponent: (router: RouterIntegration) => (props: BaseRouterProps) => JSX.Element;
 export type RouteProps<S extends string, T = unknown> = {

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, getRouteMatches, RouteContextObj, RouterContextObj } from "../routing.js";
+import { createBranches, createRouteContext, createRouterContext, getIntent, getRouteMatches, RouteContextObj, RouterContextObj, setInLoadFn } from "../routing.js";
 export const createRouterComponent = (router) => (props) => {
     const { base } = props;
     const routeDefs = children(() => props.children);
@@ -9,7 +9,8 @@ export const createRouterComponent = (router) => (props) => {
     let context;
     const routerState = createRouterContext(router, branches, () => context, {
         base,
-        singleFlight: props.singleFlight
+        singleFlight: props.singleFlight,
+        transformUrl: props.transformUrl,
     });
     router.create && router.create(routerState);
     return (<RouterContextObj.Provider value={routerState}>
@@ -22,7 +23,12 @@ export const createRouterComponent = (router) => (props) => {
 function Root(props) {
     const location = props.routerState.location;
     const params = props.routerState.params;
-    const data = createMemo(() => props.load && untrack(() => props.load({ params, location, intent: "preload" })));
+    const data = createMemo(() => props.load &&
+        untrack(() => {
+            setInLoadFn(true);
+            props.load({ params, location, intent: getIntent() || "initial" });
+            setInLoadFn(false);
+        }));
     return (<Show when={props.root} keyed fallback={props.children}>
       {Root => (<Root params={params} location={location} data={data()}>
           {props.children}

package/dist/routers/createRouter.js

@@ -18,7 +18,9 @@ function querySelector(selector) {
 export function createRouter(config) {
     let ignore = false;
     const wrap = (value) => (typeof value === "string" ? { value } : value);
-    const signal = intercept(createSignal(wrap(config.get()), { equals: (a, b) => a.value === b.value }), undefined, next => {
+    const signal = intercept(createSignal(wrap(config.get()), {
+        equals: (a, b) => a.value === b.value && a.state === b.state
+    }), undefined, next => {
         !ignore && config.set(next);
         return next;
     });

package/dist/routing.d.ts

@@ -10,6 +10,7 @@ export declare const useNavigate: () => Navigator;
 export declare const useLocation: <S = unknown>() => Location<S>;
 export declare const useIsRouting: () => () => boolean;
 export declare const useMatch: <S extends string>(path: () => S, matchFilters?: MatchFilters<S> | undefined) => Accessor<import("./types.js").PathMatch | undefined>;
+export declare const useCurrentMatches: () => () => RouteMatch[];
 export declare const useParams: <T extends Params>() => T;
 export declare const useSearchParams: <T extends Params>() => [Partial<T>, (params: SetParams, options?: Partial<NavigateOptions>) => void];
 export declare const useBeforeLeave: (listener: (e: BeforeLeaveEventArgs) => void) => void;
@@ -19,8 +20,11 @@ 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 createRouterContext(integration: RouterIntegration, branches: () => Branch[], getContext?: () => any, options?: {
     base?: string;
     singleFlight?: boolean;
+    transformUrl?: (url: string) => string;
 }): RouterContext;
 export declare function createRouteContext(router: RouterContext, parent: RouteContext, outlet: () => JSX.Element, match: () => RouteMatch): RouteContext;

package/dist/routing.js

@@ -34,6 +34,7 @@ export const useMatch = (path, matchFilters) => {
         }
     });
 };
+export const useCurrentMatches = () => useRouter().matches;
 export const useParams = () => useRouter().params;
 export const useSearchParams = () => {
     const location = useLocation();
@@ -184,6 +185,13 @@ let intent;
 export function getIntent() {
     return intent;
 }
+let inLoadFn = false;
+export function getInLoadFn() {
+    return inLoadFn;
+}
+export function setInLoadFn(value) {
+    inLoadFn = value;
+}
 export function createRouterContext(integration, branches, getContext, options = {}) {
     const { signal: [source, setSource], utils = {} } = integration;
     const parsePath = utils.parsePath || (p => p);
@@ -211,7 +219,12 @@ export function createRouterContext(integration, branches, getContext, options =
     const location = createLocation(reference, state);
     const referrers = [];
     const submissions = createSignal(isServer ? initFromFlash() : []);
-    const matches = createMemo(() => getRouteMatches(branches(), location.pathname));
+    const matches = createMemo(() => {
+        if (typeof options.transformUrl === "function") {
+            return getRouteMatches(branches(), options.transformUrl(location.pathname));
+        }
+        return getRouteMatches(branches(), location.pathname);
+    });
     const params = createMemoObject(() => {
         const m = matches();
         const params = {};
@@ -232,17 +245,16 @@ export function createRouterContext(integration, branches, getContext, options =
         const { value, state } = source();
         // Untrack this whole block so `start` doesn't cause Solid's Listener to be preserved
         untrack(() => {
-            if (value !== reference()) {
-                start(() => {
-                    intent = "native";
+            start(() => {
+                intent = "native";
+                if (value !== reference())
                     setReference(value);
-                    setState(state);
-                    resetErrorBoundaries();
-                    submissions[1]([]);
-                }).then(() => {
-                    intent = undefined;
-                });
-            }
+                setState(state);
+                resetErrorBoundaries();
+                submissions[1]([]);
+            }).then(() => {
+                intent = undefined;
+            });
         });
     });
     return {
@@ -343,6 +355,7 @@ export function createRouterContext(integration, branches, getContext, options =
                 route.component.preload &&
                 route.component.preload();
             const { load } = route;
+            inLoadFn = true;
             preloadData &&
                 load &&
                 runWithOwner(getContext(), () => load({
@@ -357,6 +370,7 @@ export function createRouterContext(integration, branches, getContext, options =
                     },
                     intent: "preload"
                 }));
+            inLoadFn = false;
         }
         intent = prevIntent;
     }
@@ -374,7 +388,9 @@ export function createRouteContext(router, parent, outlet, match) {
     component &&
         component.preload &&
         component.preload();
+    inLoadFn = true;
     const data = load ? load({ params, location, intent: intent || "initial" }) : undefined;
+    inLoadFn = false;
     const route = {
         parent,
         pattern,

package/dist/types.d.ts

@@ -65,7 +65,7 @@ export type RouteLoadFunc<T = unknown> = (args: RouteLoadFuncArgs) => T;
 export interface RouteSectionProps<T = unknown> {
     params: Params;
     location: Location;
-    data?: T;
+    data: T;
     children?: JSX.Element;
 }
 export type RouteDefinition<S extends string | string[] = any, T = unknown> = {

package/package.json

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