@solidjs/router 0.5.0 → 0.5.1

package/README.md

@@ -28,6 +28,7 @@ It supports all of Solid's SSR methods and has Solid's transitions baked in, so
   - [useRouteData](#useroutedata)
   - [useMatch](#usematch)
   - [useRoutes](#useroutes)
+  - [useBeforeLeave](#usebeforeleave)
 
 ## Getting Started
 
@@ -538,3 +539,32 @@ return <div classList={{ active: Boolean(match()) }} />;
 ### useRoutes
 
 Used to define routes via a config object instead of JSX. See [Config Based Routing](#config-based-routing).
+
+### useBeforeLeave
+
+`useBeforeLeave` takes a function that will be called prior to leaving a route.  The function will be called with:
+
+- from (_Location_): current location (before change).
+- to (_string | number_}: path passed to `navigate`.
+- options (_NavigateOptions_}: options passed to `navigate`.
+- preventDefault (_void function_): call to block the route change.
+- defaultPrevented (_readonly boolean_): true if any previously called leave handlers called preventDefault().
+- retry (_void function_, _force?: boolean_ ): call to retry the same navigation, perhaps after confirming with the user. Pass `true` to skip running the leave handlers again (ie force navigate without confirming).
+
+Example usage:
+```js
+useBeforeLeave((e: BeforeLeaveEventArgs) => {
+  if (form.isDirty && !e.defaultPrevented) {
+    // preventDefault to block immediately and prompt user async
+    e.preventDefault();
+    setTimeout(() => {
+      if (window.confirm("Discard unsaved changes - are you sure?")) {
+        // user wants to proceed anyway so retry with force=true
+        e.retry(true); 
+      }
+    }, 100);
+  }
+});
+```
+
+

package/dist/components.jsx

@@ -3,7 +3,7 @@ import { children, createMemo, createRoot, mergeProps, on, Show, splitProps } fr
 import { isServer } from "solid-js/web";
 import { pathIntegration, staticIntegration } from "./integration";
 import { createBranches, createRouteContext, createRouterContext, getRouteMatches, RouteContextObj, RouterContextObj, useHref, useLocation, useNavigate, useResolvedPath, useRoute, useRouter } from "./routing";
-import { joinPaths } from "./utils";
+import { joinPaths, normalizePath } from "./utils";
 export const Router = (props) => {
     const { source, url, base, data, out } = props;
     const integration = source || (isServer ? staticIntegration({ value: url || "" }) : pathIntegration());
@@ -76,7 +76,7 @@ export const Outlet = () => {
 };
 export function A(props) {
     props = mergeProps({ inactiveClass: "inactive", activeClass: "active" }, props);
-    const [, rest] = splitProps(props, ["href", "state", "activeClass", "inactiveClass", "end"]);
+    const [, rest] = splitProps(props, ["href", "state", "class", "activeClass", "inactiveClass", "end"]);
     const to = useResolvedPath(() => props.href);
     const href = useHref(to);
     const location = useLocation();
@@ -84,11 +84,12 @@ export function A(props) {
         const to_ = to();
         if (to_ === undefined)
             return false;
-        const path = to_.split(/[?#]/, 1)[0].toLowerCase();
-        const loc = location.pathname.toLowerCase();
+        const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
+        const loc = normalizePath(location.pathname).toLowerCase();
         return props.end ? path === loc : loc.startsWith(path);
     });
     return (<a link {...rest} href={href() || props.href} state={JSON.stringify(props.state)} classList={{
+            ...(props.class && { [props.class]: true }),
             [props.inactiveClass]: !isActive(),
             [props.activeClass]: isActive(),
             ...rest.classList

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./components";
 export * from "./integration";
-export { useRouteData, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams } from "./routing";
+export * from "./lifecycle";
+export { useRouteData, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing";
 export { mergeSearchString as _mergeSearchString } from "./utils";
-export type { Location, LocationChange, LocationChangeSignal, NavigateOptions, Navigator, OutputMatch, Params, RouteDataFunc, RouteDataFuncArgs, RouteDefinition, RouterIntegration, RouterOutput, RouterUtils, SetParams } from "./types";
+export type { Location, LocationChange, LocationChangeSignal, NavigateOptions, Navigator, OutputMatch, Params, RouteDataFunc, RouteDataFuncArgs, RouteDefinition, RouterIntegration, RouterOutput, RouterUtils, SetParams, BeforeLeaveEventArgs } from "./types";

package/dist/index.js

@@ -1,15 +1,13 @@
-import { isServer, delegateEvents, createComponent as createComponent$1, spread, effect, setAttribute, classList, template } from 'solid-js/web';
+import { isServer, delegateEvents, createComponent as createComponent$1, spread, mergeProps as mergeProps$1, template } from 'solid-js/web';
 import { createSignal, onCleanup, getOwner, runWithOwner, createMemo, createContext, useContext, untrack, createRenderEffect, createComponent, on, startTransition, resetErrorBoundaries, children, createRoot, Show, mergeProps, splitProps } from 'solid-js';
 
 function bindEvent(target, type, handler) {
   target.addEventListener(type, handler);
   return () => target.removeEventListener(type, handler);
 }
-
 function intercept([value, setValue], get, set) {
   return [get ? () => get(value()) : value, set ? v => setValue(set(v)) : setValue];
 }
-
 function querySelector(selector) {
   // Guard against selector being an invalid CSS selector
   try {
@@ -18,24 +16,19 @@ function querySelector(selector) {
     return null;
   }
 }
-
 function scrollToHash(hash, fallbackTop) {
   const el = querySelector(`#${hash}`);
-
   if (el) {
     el.scrollIntoView();
   } else if (fallbackTop) {
     window.scrollTo(0, 0);
   }
 }
-
 function createIntegration(get, set, init, utils) {
   let ignore = false;
-
   const wrap = value => typeof value === "string" ? {
     value
   } : value;
-
   const signal = intercept(createSignal(wrap(get()), {
     equals: (a, b) => a.value === b.value
   }), undefined, next => {
@@ -64,7 +57,6 @@ function normalizeIntegration(integration) {
       signal: integration
     };
   }
-
   return integration;
 }
 function staticIntegration(obj) {
@@ -87,7 +79,6 @@ function pathIntegration() {
     } else {
       window.history.pushState(state, "", value);
     }
-
     scrollToHash(window.location.hash.slice(1), scroll);
   }, notify => bindEvent(window, "popstate", () => notify()), {
     go: delta => window.history.go(delta)
@@ -105,7 +96,6 @@ function hashIntegration() {
     } else {
       window.location.hash = value;
     }
-
     const hashIndex = value.indexOf("#");
     const hash = hashIndex >= 0 ? value.slice(hashIndex + 1) : "";
     scrollToHash(hash, scroll);
@@ -113,37 +103,63 @@ function hashIntegration() {
     go: delta => window.history.go(delta),
     renderPath: path => `#${path}`,
     parsePath: str => {
-      const to = str.replace(/^.*?#/, ""); // Hash-only hrefs like `#foo` from plain anchors will come in as `/#foo` whereas a link to
+      const to = str.replace(/^.*?#/, "");
+      // Hash-only hrefs like `#foo` from plain anchors will come in as `/#foo` whereas a link to
       // `/foo` will be `/#/foo`. Check if the to starts with a `/` and if not append it as a hash
       // to the current path so we can handle these in-page anchors correctly.
-
       if (!to.startsWith("/")) {
         const [, path = "/"] = window.location.hash.split("#", 2);
         return `${path}#${to}`;
       }
-
       return to;
     }
   });
 }
 
+function createBeforeLeave() {
+  let listeners = new Set();
+  function subscribe(listener) {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+  }
+  let ignore = false;
+  function confirm(to, options) {
+    if (ignore) return !(ignore = false);
+    const e = {
+      to,
+      options,
+      defaultPrevented: false,
+      preventDefault: () => e.defaultPrevented = true
+    };
+    for (const l of listeners) l.listener({
+      ...e,
+      from: l.location,
+      retry: force => {
+        force && (ignore = true);
+        l.navigate(to, options);
+      }
+    });
+    return !e.defaultPrevented;
+  }
+  return {
+    subscribe,
+    confirm
+  };
+}
+
 const hasSchemeRegex = /^(?:[a-z0-9]+:)?\/\//i;
 const trimPathRegex = /^\/+|\/+$/g;
-
-function normalize(path, omitSlash = false) {
+function normalizePath(path, omitSlash = false) {
   const s = path.replace(trimPathRegex, "");
   return s ? omitSlash || /^[?#]/.test(s) ? s : "/" + s : "";
 }
-
 function resolvePath(base, path, from) {
   if (hasSchemeRegex.test(path)) {
     return undefined;
   }
-
-  const basePath = normalize(base);
-  const fromPath = from && normalize(from);
+  const basePath = normalizePath(base);
+  const fromPath = from && normalizePath(from);
   let result = "";
-
   if (!fromPath || path.startsWith("/")) {
     result = basePath;
   } else if (fromPath.toLowerCase().indexOf(basePath.toLowerCase()) !== 0) {
@@ -151,18 +167,16 @@ function resolvePath(base, path, from) {
   } else {
     result = fromPath;
   }
-
-  return (result || "/") + normalize(path, !result);
+  return (result || "/") + normalizePath(path, !result);
 }
 function invariant(value, message) {
   if (value == null) {
     throw new Error(message);
   }
-
   return value;
 }
 function joinPaths(from, to) {
-  return normalize(from).replace(/\/*(\*.*)?$/g, "") + normalize(to);
+  return normalizePath(from).replace(/\/*(\*.*)?$/g, "") + normalizePath(to);
 }
 function extractSearchParams(url) {
   const params = {};
@@ -181,20 +195,16 @@ function createMatcher(path, partial) {
   return location => {
     const locSegments = location.split("/").filter(Boolean);
     const lenDiff = locSegments.length - len;
-
     if (lenDiff < 0 || lenDiff > 0 && splat === undefined && !partial) {
       return null;
     }
-
     const match = {
       path: len ? "" : "/",
       params: {}
     };
-
     for (let i = 0; i < len; i++) {
       const segment = segments[i];
       const locSegment = locSegments[i];
-
       if (segment[0] === ":") {
         match.params[segment.slice(1)] = locSegment;
       } else if (segment.localeCompare(locSegment, undefined, {
@@ -202,14 +212,11 @@ function createMatcher(path, partial) {
       }) !== 0) {
         return null;
       }
-
       match.path += `/${locSegment}`;
     }
-
     if (splat) {
       match.params[splat] = lenDiff ? locSegments.slice(-lenDiff).join("/") : "";
     }
-
     return match;
   };
 }
@@ -226,21 +233,17 @@ function createMemoObject(fn) {
       if (!map.has(property)) {
         runWithOwner(owner, () => map.set(property, createMemo(() => fn()[property])));
       }
-
       return map.get(property)();
     },
-
     getOwnPropertyDescriptor() {
       return {
         enumerable: true,
         configurable: true
       };
     },
-
     ownKeys() {
       return Reflect.ownKeys(fn());
     }
-
   });
 }
 function mergeSearchString(search, params) {
@@ -260,17 +263,17 @@ function expandOptionals(pattern) {
   if (!match) return [pattern];
   let prefix = pattern.slice(0, match.index);
   let suffix = pattern.slice(match.index + match[0].length);
-  const prefixes = [prefix, prefix += match[1]]; // This section handles adjacent optional params. We don't actually want all permuations since
+  const prefixes = [prefix, prefix += match[1]];
+
+  // This section handles adjacent optional params. We don't actually want all permuations since
   // that will lead to equivalent routes which have the same number of params. For example
   // `/:a?/:b?/:c`? only has the unique expansion: `/`, `/:a`, `/:a/:b`, `/:a/:b/:c` and we can
   // discard `/:b`, `/:c`, `/:b/:c` by building them up in order and not recursing. This also helps
   // ensure predictability where earlier params have precidence.
-
   while (match = /^(\/\:[^\/]+)\?/.exec(suffix)) {
     prefixes.push(prefix += match[1]);
     suffix = suffix.slice(match[0].length);
   }
-
   return expandOptionals(suffix).reduce((results, expansion) => [...results, ...prefixes.map(p => p + expansion)], []);
 }
 
@@ -304,17 +307,24 @@ const useRouteData = () => useRoute().data;
 const useSearchParams = () => {
   const location = useLocation();
   const navigate = useNavigate();
-
   const setSearchParams = (params, options) => {
     const searchString = untrack(() => mergeSearchString(location.search, params));
-    navigate(location.pathname + searchString, {
+    navigate(location.pathname + searchString + location.hash, {
       scroll: false,
+      resolve: false,
       ...options
     });
   };
-
   return [location.query, setSearchParams];
 };
+const useBeforeLeave = listener => {
+  const s = useRouter().beforeLeave.subscribe({
+    listener,
+    location: useLocation(),
+    navigate: useNavigate()
+  });
+  onCleanup(s);
+};
 function createRoutes(routeDef, base = "", fallback) {
   const {
     component,
@@ -337,13 +347,13 @@ function createRoutes(routeDef, base = "", fallback) {
     for (const originalPath of expandOptionals(path)) {
       const path = joinPaths(base, originalPath);
       const pattern = isLeaf ? path : path.split("/*", 1)[0];
-      acc.push({ ...shared,
+      acc.push({
+        ...shared,
         originalPath,
         pattern,
         matcher: createMatcher(pattern, !isLeaf)
       });
     }
-
     return acc;
   }, []);
 }
@@ -351,76 +361,62 @@ function createBranch(routes, index = 0) {
   return {
     routes,
     score: scoreRoute(routes[routes.length - 1]) * 10000 - index,
-
     matcher(location) {
       const matches = [];
-
       for (let i = routes.length - 1; i >= 0; i--) {
         const route = routes[i];
         const match = route.matcher(location);
-
         if (!match) {
           return null;
         }
-
-        matches.unshift({ ...match,
+        matches.unshift({
+          ...match,
           route
         });
       }
-
       return matches;
     }
-
   };
 }
-
 function asArray(value) {
   return Array.isArray(value) ? value : [value];
 }
-
 function createBranches(routeDef, base = "", fallback, stack = [], branches = []) {
   const routeDefs = asArray(routeDef);
-
   for (let i = 0, len = routeDefs.length; i < len; i++) {
     const def = routeDefs[i];
-
     if (def && typeof def === "object" && def.hasOwnProperty("path")) {
       const routes = createRoutes(def, base, fallback);
-
       for (const route of routes) {
         stack.push(route);
-
-        if (def.children) {
+        const isEmptyArray = Array.isArray(def.children) && def.children.length === 0;
+        if (def.children && !isEmptyArray) {
           createBranches(def.children, route.pattern, fallback, stack, branches);
         } else {
           const branch = createBranch([...stack], branches.length);
           branches.push(branch);
         }
-
         stack.pop();
       }
     }
-  } // Stack will be empty on final return
-
+  }
 
+  // Stack will be empty on final return
   return stack.length ? branches : branches.sort((a, b) => b.score - a.score);
 }
 function getRouteMatches(branches, location) {
   for (let i = 0, len = branches.length; i < len; i++) {
     const match = branches[i].matcher(location);
-
     if (match) {
       return match;
     }
   }
-
   return [];
 }
 function createLocation(path, state) {
   const origin = new URL("http://sar");
   const url = createMemo(prev => {
     const path_ = path();
-
     try {
       return new URL(path_, origin);
     } catch (err) {
@@ -438,23 +434,18 @@ function createLocation(path, state) {
     get pathname() {
       return pathname();
     },
-
     get search() {
       return search();
     },
-
     get hash() {
       return hash();
     },
-
     get state() {
       return state();
     },
-
     get key() {
       return key();
     },
-
     query: createMemoObject(on(search, () => extractSearchParams(url())))
   };
 }
@@ -463,17 +454,14 @@ function createRouterContext(integration, base = "", data, out) {
     signal: [source, setSource],
     utils = {}
   } = normalizeIntegration(integration);
-
   const parsePath = utils.parsePath || (p => p);
-
   const renderPath = utils.renderPath || (p => p);
-
+  const beforeLeave = utils.beforeLeave || createBeforeLeave();
   const basePath = resolvePath("", base);
   const output = isServer && out ? Object.assign(out, {
     matches: [],
     url: undefined
   }) : undefined;
-
   if (basePath === undefined) {
     throw new Error(`${basePath} is not a valid base path`);
   } else if (basePath && !source().value) {
@@ -483,19 +471,15 @@ function createRouterContext(integration, base = "", data, out) {
       scroll: false
     });
   }
-
   const [isRouting, setIsRouting] = createSignal(false);
-
   const start = async callback => {
     setIsRouting(true);
-
     try {
       await startTransition(callback);
     } finally {
       setIsRouting(false);
     }
   };
-
   const [reference, setReference] = createSignal(source().value);
   const [state, setState] = createSignal(source().state);
   const location = createLocation(reference, state);
@@ -505,13 +489,10 @@ function createRouterContext(integration, base = "", data, out) {
     params: {},
     path: () => basePath,
     outlet: () => null,
-
     resolvePath(to) {
       return resolvePath(basePath, to);
     }
-
   };
-
   if (data) {
     try {
       TempRoute = baseRoute;
@@ -525,20 +506,17 @@ function createRouterContext(integration, base = "", data, out) {
       TempRoute = undefined;
     }
   }
-
   function navigateFromRoute(route, to, options) {
     // Untrack in case someone navigates in an effect - don't want to track `reference` or route paths
     untrack(() => {
       if (typeof to === "number") {
         if (!to) ; else if (utils.go) {
-          utils.go(to);
+          beforeLeave.confirm(to, options) && utils.go(to);
         } else {
           console.warn("Router integration does not support relative routing");
         }
-
         return;
       }
-
       const {
         replace,
         resolve,
@@ -551,28 +529,24 @@ function createRouterContext(integration, base = "", data, out) {
         ...options
       };
       const resolvedTo = resolve ? route.resolvePath(to) : resolvePath("", to);
-
       if (resolvedTo === undefined) {
         throw new Error(`Path '${to}' is not a routable path`);
       } else if (referrers.length >= MAX_REDIRECTS) {
         throw new Error("Too many redirects");
       }
-
       const current = reference();
-
       if (resolvedTo !== current || nextState !== state()) {
         if (isServer) {
           if (output) {
             output.url = resolvedTo;
           }
-
           setSource({
             value: resolvedTo,
             replace,
             scroll,
             state: nextState
           });
-        } else {
+        } else if (beforeLeave.confirm(resolvedTo, options)) {
           const len = referrers.push({
             value: current,
             replace,
@@ -595,34 +569,30 @@ function createRouterContext(integration, base = "", data, out) {
       }
     });
   }
-
   function navigatorFactory(route) {
     // Workaround for vite issue (https://github.com/vitejs/vite/issues/3803)
     route = route || useContext(RouteContextObj) || baseRoute;
     return (to, options) => navigateFromRoute(route, to, options);
   }
-
   function navigateEnd(next) {
     const first = referrers[0];
-
     if (first) {
       if (next.value !== first.value || next.state !== first.state) {
-        setSource({ ...next,
+        setSource({
+          ...next,
           replace: first.replace,
           scroll: first.scroll
         });
       }
-
       referrers.length = 0;
     }
   }
-
   createRenderEffect(() => {
     const {
       value,
       state
-    } = source(); // Untrack this whole block so `start` doesn't cause Solid's Listener to be preserved
-
+    } = source();
+    // Untrack this whole block so `start` doesn't cause Solid's Listener to be preserved
     untrack(() => {
       if (value !== reference()) {
         start(() => {
@@ -632,7 +602,6 @@ function createRouterContext(integration, base = "", data, out) {
       }
     });
   });
-
   if (!isServer) {
     function handleAnchorClick(evt) {
       if (evt.defaultPrevented || evt.button !== 0 || evt.metaKey || evt.altKey || evt.ctrlKey || evt.shiftKey) return;
@@ -645,7 +614,7 @@ function createRouterContext(integration, base = "", data, out) {
       const url = new URL(href);
       const pathname = urlDecode(url.pathname);
       if (url.origin !== window.location.origin || basePath && pathname && !pathname.toLowerCase().startsWith(basePath.toLowerCase())) return;
-      const to = parsePath(pathname + urlDecode(url.search, true) + urlDecode(url.hash));
+      const to = parsePath(url.pathname + url.search + url.hash);
       const state = a.getAttribute("state");
       evt.preventDefault();
       navigateFromRoute(baseRoute, to, {
@@ -654,14 +623,13 @@ function createRouterContext(integration, base = "", data, out) {
         scroll: !a.hasAttribute("noscroll"),
         state: state && JSON.parse(state)
       });
-    } // ensure delegated events run first
-
+    }
 
+    // ensure delegated events run first
     delegateEvents(["click"]);
     document.addEventListener("click", handleAnchorClick);
     onCleanup(() => document.removeEventListener("click", handleAnchorClick));
   }
-
   return {
     base: baseRoute,
     out: output,
@@ -669,7 +637,8 @@ function createRouterContext(integration, base = "", data, out) {
     isRouting,
     renderPath,
     parsePath,
-    navigatorFactory
+    navigatorFactory,
+    beforeLeave
   };
 }
 function createRouteContext(router, parent, child, match) {
@@ -690,22 +659,17 @@ function createRouteContext(router, parent, child, match) {
   const route = {
     parent,
     pattern,
-
     get child() {
       return child();
     },
-
     path,
     params,
     data: parent.data,
     outlet,
-
     resolvePath(to) {
       return resolvePath(base.path(), to, path());
     }
-
   };
-
   if (data) {
     try {
       TempRoute = route;
@@ -719,7 +683,6 @@ function createRouteContext(router, parent, child, match) {
       TempRoute = undefined;
     }
   }
-
   return route;
 }
 
@@ -738,11 +701,9 @@ const Router = props => {
   const routerState = createRouterContext(integration, base, data, out);
   return createComponent$1(RouterContextObj.Provider, {
     value: routerState,
-
     get children() {
       return props.children;
     }
-
   });
 };
 const Routes = props => {
@@ -751,7 +712,6 @@ const Routes = props => {
   const routeDefs = children(() => props.children);
   const branches = createMemo(() => createBranches(routeDefs(), joinPaths(parentRoute.pattern, props.base || ""), Outlet));
   const matches = createMemo(() => getRouteMatches(branches(), router.location.pathname));
-
   if (router.out) {
     router.out.matches.push(matches().map(({
       route,
@@ -764,39 +724,31 @@ const Routes = props => {
       params
     })));
   }
-
   const disposers = [];
   let root;
   const routeStates = createMemo(on(matches, (nextMatches, prevMatches, prev) => {
     let equal = prevMatches && nextMatches.length === prevMatches.length;
     const next = [];
-
     for (let i = 0, len = nextMatches.length; i < len; i++) {
       const prevMatch = prevMatches && prevMatches[i];
       const nextMatch = nextMatches[i];
-
       if (prev && prevMatch && nextMatch.route.key === prevMatch.route.key) {
         next[i] = prev[i];
       } else {
         equal = false;
-
         if (disposers[i]) {
           disposers[i]();
         }
-
         createRoot(dispose => {
           disposers[i] = dispose;
           next[i] = createRouteContext(router, next[i - 1] || parentRoute, () => routeStates()[i + 1], () => matches()[i]);
         });
       }
     }
-
     disposers.splice(nextMatches.length).forEach(dispose => dispose());
-
     if (prev && equal) {
       return prev;
     }
-
     root = next[0];
     return next;
   }));
@@ -804,14 +756,11 @@ const Routes = props => {
     get when() {
       return routeStates() && root;
     },
-
     children: route => createComponent$1(RouteContextObj.Provider, {
       value: route,
-
       get children() {
         return route.outlet();
       }
-
     })
   });
 };
@@ -827,7 +776,6 @@ const Route = props => {
     get children() {
       return childRoutes();
     }
-
   });
 };
 const Outlet = () => {
@@ -836,14 +784,11 @@ const Outlet = () => {
     get when() {
       return route.child;
     },
-
     children: child => createComponent$1(RouteContextObj.Provider, {
       value: child,
-
       get children() {
         return child.outlet();
       }
-
     })
   });
 };
@@ -852,47 +797,43 @@ function A(props) {
     inactiveClass: "inactive",
     activeClass: "active"
   }, props);
-  const [, rest] = splitProps(props, ["href", "state", "activeClass", "inactiveClass", "end"]);
+  const [, rest] = splitProps(props, ["href", "state", "class", "activeClass", "inactiveClass", "end"]);
   const to = useResolvedPath(() => props.href);
   const href = useHref(to);
   const location = useLocation();
   const isActive = createMemo(() => {
     const to_ = to();
     if (to_ === undefined) return false;
-    const path = to_.split(/[?#]/, 1)[0].toLowerCase();
-    const loc = location.pathname.toLowerCase();
+    const path = normalizePath(to_.split(/[?#]/, 1)[0]).toLowerCase();
+    const loc = normalizePath(location.pathname).toLowerCase();
     return props.end ? path === loc : loc.startsWith(path);
   });
   return (() => {
     const _el$ = _tmpl$.cloneNode(true);
-
-    spread(_el$, rest, false, false);
-
-    effect(_p$ => {
-      const _v$ = href() || props.href,
-            _v$2 = JSON.stringify(props.state),
-            _v$3 = {
-        [props.inactiveClass]: !isActive(),
-        [props.activeClass]: isActive(),
-        ...rest.classList
+    spread(_el$, mergeProps$1(rest, {
+      get href() {
+        return href() || props.href;
       },
-            _v$4 = isActive() ? "page" : undefined;
-
-      _v$ !== _p$._v$ && setAttribute(_el$, "href", _p$._v$ = _v$);
-      _v$2 !== _p$._v$2 && setAttribute(_el$, "state", _p$._v$2 = _v$2);
-      _p$._v$3 = classList(_el$, _v$3, _p$._v$3);
-      _v$4 !== _p$._v$4 && setAttribute(_el$, "aria-current", _p$._v$4 = _v$4);
-      return _p$;
-    }, {
-      _v$: undefined,
-      _v$2: undefined,
-      _v$3: undefined,
-      _v$4: undefined
-    });
-
+      get state() {
+        return JSON.stringify(props.state);
+      },
+      get classList() {
+        return {
+          ...(props.class && {
+            [props.class]: true
+          }),
+          [props.inactiveClass]: !isActive(),
+          [props.activeClass]: isActive(),
+          ...rest.classList
+        };
+      },
+      get ["aria-current"]() {
+        return isActive() ? "page" : undefined;
+      }
+    }), false, false);
     return _el$;
   })();
-} // deprecated alias exports
+}
 function Navigate(props) {
   const navigate = useNavigate();
   const location = useLocation();
@@ -911,4 +852,4 @@ function Navigate(props) {
   return null;
 }
 
-export { A, A as Link, A as NavLink, Navigate, Outlet, Route, Router, Routes, mergeSearchString as _mergeSearchString, createIntegration, hashIntegration, normalizeIntegration, pathIntegration, staticIntegration, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useRouteData, useRoutes, useSearchParams };
+export { A, A as Link, A as NavLink, Navigate, Outlet, Route, Router, Routes, mergeSearchString as _mergeSearchString, createBeforeLeave, createIntegration, hashIntegration, normalizeIntegration, pathIntegration, staticIntegration, useBeforeLeave, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useRouteData, useRoutes, useSearchParams };

package/dist/index.jsx

@@ -1,4 +1,5 @@
 export * from "./components";
 export * from "./integration";
-export { useRouteData, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams } from "./routing";
+export * from "./lifecycle";
+export { useRouteData, useHref, useIsRouting, useLocation, useMatch, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing";
 export { mergeSearchString as _mergeSearchString } from "./utils";

package/dist/lifecycle.d.ts

@@ -0,0 +1,2 @@
+import { BeforeLeaveLifecycle } from "./types";
+export declare function createBeforeLeave(): BeforeLeaveLifecycle;

package/dist/lifecycle.js

@@ -0,0 +1,32 @@
+export function createBeforeLeave() {
+    let listeners = new Set();
+    function subscribe(listener) {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+    }
+    let ignore = false;
+    function confirm(to, options) {
+        if (ignore)
+            return !(ignore = false);
+        const e = {
+            to,
+            options,
+            defaultPrevented: false,
+            preventDefault: () => (e.defaultPrevented = true)
+        };
+        for (const l of listeners)
+            l.listener({
+                ...e,
+                from: l.location,
+                retry: (force) => {
+                    force && (ignore = true);
+                    l.navigate(to, options);
+                }
+            });
+        return !e.defaultPrevented;
+    }
+    return {
+        subscribe,
+        confirm
+    };
+}

package/dist/routing.d.ts

@@ -1,5 +1,5 @@
 import type { Component, Accessor } from "solid-js";
-import type { Branch, Location, LocationChangeSignal, NavigateOptions, Navigator, Params, Route, RouteContext, RouteDataFunc, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SetParams } from "./types";
+import type { BeforeLeaveEventArgs, Branch, Location, LocationChangeSignal, NavigateOptions, Navigator, Params, Route, RouteContext, RouteDataFunc, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SetParams } from "./types";
 export declare const RouterContextObj: import("solid-js").Context<RouterContext | undefined>;
 export declare const RouteContextObj: import("solid-js").Context<RouteContext | undefined>;
 export declare const useRouter: () => RouterContext;
@@ -14,6 +14,7 @@ export declare const useParams: <T extends Params>() => T;
 declare type MaybeReturnType<T> = T extends (...args: any) => infer R ? R : T;
 export declare const useRouteData: <T>() => MaybeReturnType<T>;
 export declare const useSearchParams: <T extends Params>() => [T, (params: SetParams, options?: Partial<NavigateOptions>) => void];
+export declare const useBeforeLeave: (listener: (e: BeforeLeaveEventArgs) => void) => void;
 export declare function createRoutes(routeDef: RouteDefinition, base?: string, fallback?: Component): Route[];
 export declare function createBranch(routes: Route[], index?: number): Branch;
 export declare function createBranches(routeDef: RouteDefinition | RouteDefinition[], base?: string, fallback?: Component, stack?: Route[], branches?: Branch[]): Branch[];

package/dist/routing.js

@@ -1,6 +1,7 @@
 import { createComponent, createContext, createMemo, createRenderEffect, createSignal, on, onCleanup, untrack, useContext, startTransition, resetErrorBoundaries } from "solid-js";
 import { isServer, delegateEvents } from "solid-js/web";
 import { normalizeIntegration } from "./integration";
+import { createBeforeLeave } from "./lifecycle";
 import { createMemoObject, extractSearchParams, invariant, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, urlDecode, expandOptionals } from "./utils";
 const MAX_REDIRECTS = 100;
 export const RouterContextObj = createContext();
@@ -34,10 +35,14 @@ export const useSearchParams = () => {
     const navigate = useNavigate();
     const setSearchParams = (params, options) => {
         const searchString = untrack(() => mergeSearchString(location.search, params));
-        navigate(location.pathname + searchString, { scroll: false, ...options });
+        navigate(location.pathname + searchString + location.hash, { scroll: false, resolve: false, ...options });
     };
     return [location.query, setSearchParams];
 };
+export const useBeforeLeave = (listener) => {
+    const s = useRouter().beforeLeave.subscribe({ listener, location: useLocation(), navigate: useNavigate() });
+    onCleanup(s);
+};
 export function createRoutes(routeDef, base = "", fallback) {
     const { component, data, children } = routeDef;
     const isLeaf = !children || (Array.isArray(children) && !children.length);
@@ -102,7 +107,8 @@ export function createBranches(routeDef, base = "", fallback, stack = [], branch
             const routes = createRoutes(def, base, fallback);
             for (const route of routes) {
                 stack.push(route);
-                if (def.children) {
+                const isEmptyArray = Array.isArray(def.children) && def.children.length === 0;
+                if (def.children && !isEmptyArray) {
                     createBranches(def.children, route.pattern, fallback, stack, branches);
                 }
                 else {
@@ -166,6 +172,7 @@ export function createRouterContext(integration, base = "", data, out) {
     const { signal: [source, setSource], utils = {} } = normalizeIntegration(integration);
     const parsePath = utils.parsePath || (p => p);
     const renderPath = utils.renderPath || (p => p);
+    const beforeLeave = utils.beforeLeave || createBeforeLeave();
     const basePath = resolvePath("", base);
     const output = isServer && out
         ? Object.assign(out, {
@@ -224,7 +231,7 @@ export function createRouterContext(integration, base = "", data, out) {
                     // A delta of 0 means stay at the current location, so it is ignored
                 }
                 else if (utils.go) {
-                    utils.go(to);
+                    beforeLeave.confirm(to, options) && utils.go(to);
                 }
                 else {
                     console.warn("Router integration does not support relative routing");
@@ -252,7 +259,7 @@ export function createRouterContext(integration, base = "", data, out) {
                     }
                     setSource({ value: resolvedTo, replace, scroll, state: nextState });
                 }
-                else {
+                else if (beforeLeave.confirm(resolvedTo, options)) {
                     const len = referrers.push({ value: current, replace, scroll, state: state() });
                     start(() => {
                         setReference(resolvedTo);
@@ -325,7 +332,7 @@ export function createRouterContext(integration, base = "", data, out) {
             if (url.origin !== window.location.origin ||
                 (basePath && pathname && !pathname.toLowerCase().startsWith(basePath.toLowerCase())))
                 return;
-            const to = parsePath(pathname + urlDecode(url.search, true) + urlDecode(url.hash));
+            const to = parsePath(url.pathname + url.search + url.hash);
             const state = a.getAttribute("state");
             evt.preventDefault();
             navigateFromRoute(baseRoute, to, {
@@ -347,7 +354,8 @@ export function createRouterContext(integration, base = "", data, out) {
         isRouting,
         renderPath,
         parsePath,
-        navigatorFactory
+        navigatorFactory,
+        beforeLeave
     };
 }
 export function createRouteContext(router, parent, child, match) {

package/dist/types.d.ts

@@ -93,6 +93,7 @@ export interface RouterUtils {
     renderPath(path: string): string;
     parsePath(str: string): string;
     go(delta: number): void;
+    beforeLeave: BeforeLeaveLifecycle;
 }
 export interface OutputMatch {
     originalPath: string;
@@ -112,4 +113,22 @@ export interface RouterContext {
     isRouting: () => boolean;
     renderPath(path: string): string;
     parsePath(str: string): string;
+    beforeLeave: BeforeLeaveLifecycle;
+}
+export interface BeforeLeaveEventArgs {
+    from: Location;
+    to: string | number;
+    options?: Partial<NavigateOptions>;
+    readonly defaultPrevented: boolean;
+    preventDefault(): void;
+    retry(force?: boolean): void;
+}
+export interface BeforeLeaveListener {
+    listener(e: BeforeLeaveEventArgs): void;
+    location: Location;
+    navigate: Navigator;
+}
+export interface BeforeLeaveLifecycle {
+    subscribe(listener: BeforeLeaveListener): () => void;
+    confirm(to: string | number, options?: Partial<NavigateOptions>): boolean;
 }

package/dist/utils.d.ts

@@ -1,4 +1,5 @@
 import type { Params, PathMatch, Route, SetParams } from "./types";
+export declare function normalizePath(path: string, omitSlash?: boolean): string;
 export declare function resolvePath(base: string, path: string, from?: string): string | undefined;
 export declare function invariant<T>(value: T | null | undefined, message: string): T;
 export declare function joinPaths(from: string, to: string): string;

package/dist/utils.js

@@ -1,7 +1,7 @@
 import { createMemo, getOwner, runWithOwner } from "solid-js";
 const hasSchemeRegex = /^(?:[a-z0-9]+:)?\/\//i;
 const trimPathRegex = /^\/+|\/+$/g;
-function normalize(path, omitSlash = false) {
+export function normalizePath(path, omitSlash = false) {
     const s = path.replace(trimPathRegex, "");
     return s ? (omitSlash || /^[?#]/.test(s) ? s : "/" + s) : "";
 }
@@ -9,8 +9,8 @@ export function resolvePath(base, path, from) {
     if (hasSchemeRegex.test(path)) {
         return undefined;
     }
-    const basePath = normalize(base);
-    const fromPath = from && normalize(from);
+    const basePath = normalizePath(base);
+    const fromPath = from && normalizePath(from);
     let result = "";
     if (!fromPath || path.startsWith("/")) {
         result = basePath;
@@ -21,7 +21,7 @@ export function resolvePath(base, path, from) {
     else {
         result = fromPath;
     }
-    return (result || "/") + normalize(path, !result);
+    return (result || "/") + normalizePath(path, !result);
 }
 export function invariant(value, message) {
     if (value == null) {
@@ -30,7 +30,7 @@ export function invariant(value, message) {
     return value;
 }
 export function joinPaths(from, to) {
-    return normalize(from).replace(/\/*(\*.*)?$/g, "") + normalize(to);
+    return normalizePath(from).replace(/\/*(\*.*)?$/g, "") + normalizePath(to);
 }
 export function extractSearchParams(url) {
     const params = {};

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "@types/node": "^18.7.14",
     "babel-preset-solid": "^1.5.3",
     "jest": "^29.0.1",
-    "jest-environment-jsdom": "^29.1.2",
+    "jest-environment-jsdom": "^29.2.1",
     "prettier": "^2.7.1",
     "rollup": "^2.79.0",
     "rollup-plugin-terser": "^7.0.2",