@solidjs/router 0.14.7 → 0.14.9

package/README.md

@@ -856,7 +856,7 @@ const isRouting = useIsRouting();
 
 return (
   <div classList={{ "grey-out": isRouting() }}>
-    <MyAwesomeConent />
+    <MyAwesomeContent />
   </div>
 );
 ```

package/dist/components.jsx

@@ -19,7 +19,7 @@ export function A(props) {
         if (to_ === undefined)
             return [false, false];
         const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
-        const loc = normalizePath(location.pathname).toLowerCase();
+        const loc = decodeURI(normalizePath(location.pathname).toLowerCase());
         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={{

package/dist/data/cache.js

@@ -184,7 +184,7 @@ cache.set = (key, value) => {
 cache.clear = () => getCache().clear();
 function matchKey(key, keys) {
     for (let k of keys) {
-        if (key.startsWith(k))
+        if (k && key.startsWith(k))
             return true;
     }
     return false;

package/dist/data/events.js

@@ -6,7 +6,8 @@ export function setupNativeEvents(preload = true, explicitLinks = false, actionB
     return (router) => {
         const basePath = router.base.path();
         const navigateFromRoute = router.navigatorFactory(router.base);
-        let preloadTimeout = {};
+        let preloadTimeout;
+        let lastElement;
         function isSvg(el) {
             return el.namespaceURI === "http://www.w3.org/2000/svg";
         }
@@ -57,39 +58,22 @@ 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, { preloadData: a.getAttribute("preload") !== "false" });
+            transformUrl && (url.pathname = transformUrl(url.pathname));
+            router.preloadRoute(url, a.getAttribute("preload") !== "false");
         }
-        function handleAnchorIn(evt) {
+        function handleAnchorMove(evt) {
+            clearTimeout(preloadTimeout);
             const res = handleAnchor(evt);
             if (!res)
-                return;
+                return lastElement = null;
             const [a, url] = res;
-            if (typeof transformUrl === "function") {
-                url.pathname = transformUrl(url.pathname);
-            }
-            if (preloadTimeout[url.pathname])
+            if (lastElement === a)
                 return;
-            preloadTimeout[url.pathname] = setTimeout(() => {
-                router.preloadRoute(url, { preloadData: a.getAttribute("preload") !== "false" });
-                delete preloadTimeout[url.pathname];
-            }, 200);
-        }
-        function handleAnchorOut(evt) {
-            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];
-            }
+            transformUrl && (url.pathname = transformUrl(url.pathname));
+            preloadTimeout = setTimeout(() => {
+                router.preloadRoute(url, a.getAttribute("preload") !== "false");
+                lastElement = a;
+            }, 20);
         }
         function handleFormSubmit(evt) {
             if (evt.defaultPrevented)
@@ -121,17 +105,15 @@ export function setupNativeEvents(preload = true, explicitLinks = false, actionB
         delegateEvents(["click", "submit"]);
         document.addEventListener("click", handleAnchorClick);
         if (preload) {
-            document.addEventListener("mouseover", handleAnchorIn);
-            document.addEventListener("mouseout", handleAnchorOut);
-            document.addEventListener("focusin", handleAnchorPreload);
-            document.addEventListener("touchstart", handleAnchorPreload);
+            document.addEventListener("mousemove", handleAnchorMove, { passive: true });
+            document.addEventListener("focusin", handleAnchorPreload, { passive: true });
+            document.addEventListener("touchstart", handleAnchorPreload, { passive: true });
         }
         document.addEventListener("submit", handleFormSubmit);
         onCleanup(() => {
             document.removeEventListener("click", handleAnchorClick);
             if (preload) {
-                document.removeEventListener("mouseover", handleAnchorIn);
-                document.removeEventListener("mouseout", handleAnchorOut);
+                document.removeEventListener("mousemove", handleAnchorMove);
                 document.removeEventListener("focusin", handleAnchorPreload);
                 document.removeEventListener("touchstart", handleAnchorPreload);
             }

package/dist/data/response.js

@@ -12,7 +12,7 @@ export function redirect(url, init = 302) {
     }
     const headers = new Headers(responseInit.headers);
     headers.set("Location", url);
-    revalidate && headers.set("X-Revalidate", revalidate.toString());
+    revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
     const response = new Response(null, {
         ...responseInit,
         headers: headers
@@ -22,7 +22,7 @@ export function redirect(url, init = 302) {
 export function reload(init = {}) {
     const { revalidate, ...responseInit } = init;
     const headers = new Headers(responseInit.headers);
-    revalidate && headers.set("X-Revalidate", revalidate.toString());
+    revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
     return new Response(null, {
         ...responseInit,
         headers
@@ -31,7 +31,7 @@ export function reload(init = {}) {
 export function json(data, init = {}) {
     const { revalidate, ...responseInit } = init;
     const headers = new Headers(responseInit.headers);
-    revalidate && headers.set("X-Revalidate", revalidate.toString());
+    revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
     headers.set("Content-Type", "application/json");
     const response = new Response(JSON.stringify(data), {
         ...responseInit,

package/dist/index.js

@@ -244,7 +244,10 @@ const useHref = to => {
 const useNavigate = () => useRouter().navigatorFactory();
 const useLocation = () => useRouter().location;
 const useIsRouting = () => useRouter().isRouting;
-const usePreloadRoute = () => useRouter().preloadRoute;
+const usePreloadRoute = () => {
+  const pre = useRouter().preloadRoute;
+  return (url, options = {}) => pre(url instanceof URL ? url : new URL(url, mockBase), options.preloadData);
+};
 const useMatch = (path, matchFilters) => {
   const location = useLocation();
   const matchers = createMemo(() => expandOptionals(path()).map(path => createMatcher(path, undefined, matchFilters)));
@@ -367,7 +370,7 @@ function getRouteMatches(branches, location) {
   }
   return [];
 }
-function createLocation(path, state) {
+function createLocation(path, state, queryWrapper) {
   const origin = new URL(mockBase);
   const url = createMemo(prev => {
     const path_ = path();
@@ -384,6 +387,7 @@ function createLocation(path, state) {
   const search = createMemo(() => url().search, true);
   const hash = createMemo(() => url().hash);
   const key = () => "";
+  const queryFn = on(search, () => extractSearchParams(url()));
   return {
     get pathname() {
       return pathname();
@@ -400,7 +404,7 @@ function createLocation(path, state) {
     get key() {
       return key();
     },
-    query: createMemoObject(on(search, () => extractSearchParams(url())))
+    query: queryWrapper ? queryWrapper(queryFn) : createMemoObject(queryFn)
   };
 }
 let intent;
@@ -463,7 +467,7 @@ function createRouterContext(integration, branches, getContext, options = {}) {
   };
   const [reference, setReference] = createSignal(source().value);
   const [state, setState] = createSignal(source().state);
-  const location = createLocation(reference, state);
+  const location = createLocation(reference, state, utils.queryWrapper);
   const referrers = [];
   const submissions = createSignal(isServer ? initFromFlash() : []);
   const matches = createMemo(() => {
@@ -472,14 +476,15 @@ function createRouterContext(integration, branches, getContext, options = {}) {
     }
     return getRouteMatches(branches(), location.pathname);
   });
-  const params = createMemoObject(() => {
+  const buildParams = () => {
     const m = matches();
     const params = {};
     for (let i = 0; i < m.length; i++) {
       Object.assign(params, m[i].params);
     }
     return params;
-  });
+  };
+  const params = utils.paramsWrapper ? utils.paramsWrapper(buildParams, branches) : createMemoObject(buildParams);
   const baseRoute = {
     pattern: basePath,
     path: () => basePath,
@@ -583,7 +588,7 @@ function createRouterContext(integration, branches, getContext, options = {}) {
       referrers.length = 0;
     }
   }
-  function preloadRoute(url, options = {}) {
+  function preloadRoute(url, preloadData) {
     const matches = getRouteMatches(branches(), url.pathname);
     const prevIntent = intent;
     intent = "preload";
@@ -597,7 +602,7 @@ function createRouterContext(integration, branches, getContext, options = {}) {
         preload
       } = route;
       inPreloadFn = true;
-      options.preloadData && preload && runWithOwner(getContext(), () => preload({
+      preloadData && preload && runWithOwner(getContext(), () => preload({
         params,
         location: {
           pathname: url.pathname,
@@ -1030,7 +1035,7 @@ cache.set = (key, value) => {
 cache.clear = () => getCache().clear();
 function matchKey(key, keys) {
   for (let k of keys) {
-    if (key.startsWith(k)) return true;
+    if (k && key.startsWith(k)) return true;
   }
   return false;
 }
@@ -1186,7 +1191,8 @@ function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "
   return router => {
     const basePath = router.base.path();
     const navigateFromRoute = router.navigatorFactory(router.base);
-    let preloadTimeout = {};
+    let preloadTimeout;
+    let lastElement;
     function isSvg(el) {
       return el.namespaceURI === "http://www.w3.org/2000/svg";
     }
@@ -1222,39 +1228,20 @@ 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, {
-        preloadData: a.getAttribute("preload") !== "false"
-      });
+      transformUrl && (url.pathname = transformUrl(url.pathname));
+      router.preloadRoute(url, a.getAttribute("preload") !== "false");
     }
-    function handleAnchorIn(evt) {
+    function handleAnchorMove(evt) {
+      clearTimeout(preloadTimeout);
       const res = handleAnchor(evt);
-      if (!res) return;
+      if (!res) return lastElement = null;
       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, {
-          preloadData: a.getAttribute("preload") !== "false"
-        });
-        delete preloadTimeout[url.pathname];
-      }, 200);
-    }
-    function handleAnchorOut(evt) {
-      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];
-      }
+      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 (evt.defaultPrevented) return;
@@ -1282,17 +1269,21 @@ function setupNativeEvents(preload = true, explicitLinks = false, actionBase = "
     delegateEvents(["click", "submit"]);
     document.addEventListener("click", handleAnchorClick);
     if (preload) {
-      document.addEventListener("mouseover", handleAnchorIn);
-      document.addEventListener("mouseout", handleAnchorOut);
-      document.addEventListener("focusin", handleAnchorPreload);
-      document.addEventListener("touchstart", handleAnchorPreload);
+      document.addEventListener("mousemove", handleAnchorMove, {
+        passive: true
+      });
+      document.addEventListener("focusin", handleAnchorPreload, {
+        passive: true
+      });
+      document.addEventListener("touchstart", handleAnchorPreload, {
+        passive: true
+      });
     }
     document.addEventListener("submit", handleFormSubmit);
     onCleanup(() => {
       document.removeEventListener("click", handleAnchorClick);
       if (preload) {
-        document.removeEventListener("mouseover", handleAnchorIn);
-        document.removeEventListener("mouseout", handleAnchorOut);
+        document.removeEventListener("mousemove", handleAnchorMove);
         document.removeEventListener("focusin", handleAnchorPreload);
         document.removeEventListener("touchstart", handleAnchorPreload);
       }
@@ -1448,7 +1439,7 @@ function MemoryRouter(props) {
   })(props);
 }
 
-const _tmpl$ = /*#__PURE__*/template(`<a>`);
+var _tmpl$ = /*#__PURE__*/template(`<a>`);
 function A(props) {
   props = mergeProps({
     inactiveClass: "inactive",
@@ -1462,11 +1453,11 @@ function A(props) {
     const to_ = to();
     if (to_ === undefined) return [false, false];
     const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
-    const loc = normalizePath(location.pathname).toLowerCase();
+    const loc = decodeURI(normalizePath(location.pathname).toLowerCase());
     return [props.end ? path === loc : loc.startsWith(path + "/") || loc === path, path === loc];
   });
   return (() => {
-    const _el$ = _tmpl$();
+    var _el$ = _tmpl$();
     spread(_el$, mergeProps$1(rest, {
       get href() {
         return href() || props.href;
@@ -1620,7 +1611,7 @@ function redirect(url, init = 302) {
   }
   const headers = new Headers(responseInit.headers);
   headers.set("Location", url);
-  revalidate && headers.set("X-Revalidate", revalidate.toString());
+  revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
   const response = new Response(null, {
     ...responseInit,
     headers: headers
@@ -1633,7 +1624,7 @@ function reload(init = {}) {
     ...responseInit
   } = init;
   const headers = new Headers(responseInit.headers);
-  revalidate && headers.set("X-Revalidate", revalidate.toString());
+  revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
   return new Response(null, {
     ...responseInit,
     headers
@@ -1645,7 +1636,7 @@ function json(data, init = {}) {
     ...responseInit
   } = init;
   const headers = new Headers(responseInit.headers);
-  revalidate && headers.set("X-Revalidate", revalidate.toString());
+  revalidate !== undefined && headers.set("X-Revalidate", revalidate.toString());
   headers.set("Content-Type", "application/json");
   const response = new Response(JSON.stringify(data), {
     ...responseInit,

package/dist/routing.d.ts

@@ -9,8 +9,8 @@ export declare const useHref: (to: () => string | undefined) => Accessor<string
 export declare const useNavigate: () => Navigator;
 export declare const useLocation: <S = unknown>() => Location<S>;
 export declare const useIsRouting: () => () => boolean;
-export declare const usePreloadRoute: () => (url: URL, options: {
-    preloadData?: boolean | undefined;
+export declare const usePreloadRoute: () => (url: string | URL, options?: {
+    preloadData?: boolean;
 }) => void;
 export declare const useMatch: <S extends string>(path: () => S, matchFilters?: MatchFilters<S> | undefined) => Accessor<import("./types.js").PathMatch | undefined>;
 export declare const useCurrentMatches: () => () => RouteMatch[];
@@ -21,7 +21,6 @@ export declare function createRoutes(routeDef: RouteDefinition, base?: string):
 export declare function createBranch(routes: RouteDescription[], index?: number): Branch;
 export declare function createBranches(routeDef: RouteDefinition | RouteDefinition[], base?: string, stack?: RouteDescription[], branches?: Branch[]): Branch[];
 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 getInPreloadFn(): boolean;
 export declare function setInPreloadFn(value: boolean): void;

package/dist/routing.js

@@ -23,7 +23,10 @@ export const useHref = (to) => {
 export const useNavigate = () => useRouter().navigatorFactory();
 export const useLocation = () => useRouter().location;
 export const useIsRouting = () => useRouter().isRouting;
-export const usePreloadRoute = () => useRouter().preloadRoute;
+export const usePreloadRoute = () => {
+    const pre = useRouter().preloadRoute;
+    return (url, options = {}) => pre(url instanceof URL ? url : new URL(url, mockBase), options.preloadData);
+};
 export const useMatch = (path, matchFilters) => {
     const location = useLocation();
     const matchers = createMemo(() => expandOptionals(path()).map(path => createMatcher(path, undefined, matchFilters)));
@@ -145,7 +148,7 @@ export function getRouteMatches(branches, location) {
     }
     return [];
 }
-export function createLocation(path, state) {
+function createLocation(path, state, queryWrapper) {
     const origin = new URL(mockBase);
     const url = createMemo(prev => {
         const path_ = path();
@@ -163,6 +166,7 @@ export function createLocation(path, state) {
     const search = createMemo(() => url().search, true);
     const hash = createMemo(() => url().hash);
     const key = () => "";
+    const queryFn = on(search, () => extractSearchParams(url()));
     return {
         get pathname() {
             return pathname();
@@ -179,7 +183,7 @@ export function createLocation(path, state) {
         get key() {
             return key();
         },
-        query: createMemoObject(on(search, () => extractSearchParams(url())))
+        query: queryWrapper ? queryWrapper(queryFn) : createMemoObject(queryFn)
     };
 }
 let intent;
@@ -239,7 +243,7 @@ export function createRouterContext(integration, branches, getContext, options =
     };
     const [reference, setReference] = createSignal(source().value);
     const [state, setState] = createSignal(source().state);
-    const location = createLocation(reference, state);
+    const location = createLocation(reference, state, utils.queryWrapper);
     const referrers = [];
     const submissions = createSignal(isServer ? initFromFlash() : []);
     const matches = createMemo(() => {
@@ -248,14 +252,17 @@ export function createRouterContext(integration, branches, getContext, options =
         }
         return getRouteMatches(branches(), location.pathname);
     });
-    const params = createMemoObject(() => {
+    const buildParams = () => {
         const m = matches();
         const params = {};
         for (let i = 0; i < m.length; i++) {
             Object.assign(params, m[i].params);
         }
         return params;
-    });
+    };
+    const params = utils.paramsWrapper
+        ? utils.paramsWrapper(buildParams, branches)
+        : createMemoObject(buildParams);
     const baseRoute = {
         pattern: basePath,
         path: () => basePath,
@@ -302,7 +309,6 @@ export function createRouterContext(integration, branches, getContext, options =
                 scroll: true,
                 ...options
             };
-            let s;
             const resolvedTo = resolve
                 ? route.resolvePath(to)
                 : resolvePath((queryOnly && location.pathname) || "", to);
@@ -345,7 +351,7 @@ export function createRouterContext(integration, branches, getContext, options =
             referrers.length = 0;
         }
     }
-    function preloadRoute(url, options = {}) {
+    function preloadRoute(url, preloadData) {
         const matches = getRouteMatches(branches(), url.pathname);
         const prevIntent = intent;
         intent = "preload";
@@ -356,7 +362,7 @@ export function createRouterContext(integration, branches, getContext, options =
                 route.component.preload();
             const { preload } = route;
             inPreloadFn = true;
-            options.preloadData &&
+            preloadData &&
                 preload &&
                 runWithOwner(getContext(), () => preload({
                     params,

package/dist/types.d.ts

@@ -126,6 +126,8 @@ export interface RouterUtils {
     parsePath(str: string): string;
     go(delta: number): void;
     beforeLeave: BeforeLeaveLifecycle;
+    paramsWrapper: (getParams: () => Params, branches: () => Branch[]) => Params;
+    queryWrapper: (getQuery: () => Params) => Params;
 }
 export interface RouterContext {
     base: RouteContext;
@@ -137,9 +139,7 @@ export interface RouterContext {
     renderPath(path: string): string;
     parsePath(str: string): string;
     beforeLeave: BeforeLeaveLifecycle;
-    preloadRoute: (url: URL, options: {
-        preloadData?: boolean;
-    }) => void;
+    preloadRoute: (url: URL, preloadData?: boolean) => void;
     singleFlight: boolean;
     submissions: Signal<Submission<any, any>[]>;
 }

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.14.7",
+  "version": "0.14.9",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",
@@ -37,15 +37,15 @@
     "@rollup/plugin-terser": "0.4.4",
     "@types/jest": "^29.5.11",
     "@types/node": "^20.11.14",
-    "babel-preset-solid": "^1.8.6",
+    "babel-preset-solid": "^1.9.2",
     "jsdom": "^24.0.0",
     "prettier": "^2.7.0",
     "rollup": "^4.9.6",
-    "solid-js": "^1.8.7",
+    "solid-js": "^1.9.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.12",
+    "vite": "^5.4.8",
     "vite-plugin-solid": "^2.9.1",
-    "vitest": "^1.2.2"
+    "vitest": "^2.1.2"
   },
   "peerDependencies": {
     "solid-js": "^1.8.6"