@solidjs/router 0.14.7 → 0.14.8

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/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, { preloadData: 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(() => {
+            transformUrl && (url.pathname = transformUrl(url.pathname));
+            preloadTimeout = 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];
-            }
+                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/index.js

@@ -367,7 +367,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 +384,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 +401,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 +464,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 +473,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,
@@ -1186,7 +1188,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 +1225,24 @@ 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, {
+      transformUrl && (url.pathname = transformUrl(url.pathname));
+      router.preloadRoute(url, {
         preloadData: 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(() => {
+      if (lastElement === a) return;
+      transformUrl && (url.pathname = transformUrl(url.pathname));
+      preloadTimeout = 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];
-      }
+        lastElement = a;
+      }, 20);
     }
     function handleFormSubmit(evt) {
       if (evt.defaultPrevented) return;
@@ -1282,17 +1270,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 +1440,7 @@ function MemoryRouter(props) {
   })(props);
 }
 
-const _tmpl$ = /*#__PURE__*/template(`<a>`);
+var _tmpl$ = /*#__PURE__*/template(`<a>`);
 function A(props) {
   props = mergeProps({
     inactiveClass: "inactive",
@@ -1462,11 +1454,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;

package/dist/routing.d.ts

@@ -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

@@ -145,7 +145,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 +163,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 +180,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 +240,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 +249,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 +306,6 @@ export function createRouterContext(integration, branches, getContext, options =
                 scroll: true,
                 ...options
             };
-            let s;
             const resolvedTo = resolve
                 ? route.resolvePath(to)
                 : resolvePath((queryOnly && location.pathname) || "", to);

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;

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.14.7",
+  "version": "0.14.8",
   "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"