@solidjs/router 0.5.0 → 0.6.0

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.d.ts

@@ -10,7 +10,7 @@ declare module "solid-js" {
         }
     }
 }
-export declare type RouterProps = {
+export type RouterProps = {
     base?: string;
     data?: RouteDataFunc;
     children: JSX.Element;
@@ -29,7 +29,7 @@ export interface RoutesProps {
 }
 export declare const Routes: (props: RoutesProps) => JSX.Element;
 export declare const useRoutes: (routes: RouteDefinition | RouteDefinition[], base?: string) => () => JSX.Element;
-export declare type RouteProps = {
+export type RouteProps = {
     path: string | string[];
     children?: JSX.Element;
     data?: RouteDataFunc;

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 = {};
@@ -171,9 +185,6 @@ function extractSearchParams(url) {
   });
   return params;
 }
-function urlDecode(str, isQuery) {
-  return decodeURIComponent(isQuery ? str.replace(/\+/g, " ") : str);
-}
 function createMatcher(path, partial) {
   const [pattern, splat] = path.split("/*", 2);
   const segments = pattern.split("/").filter(Boolean);
@@ -181,20 +192,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 +209,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 +230,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 +260,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)], []);
 }
 
@@ -296,25 +296,37 @@ const useLocation = () => useRouter().location;
 const useIsRouting = () => useRouter().isRouting;
 const useMatch = path => {
   const location = useLocation();
-  const matcher = createMemo(() => createMatcher(path()));
-  return createMemo(() => matcher()(location.pathname));
+  const matchers = createMemo(() => expandOptionals(path()).map(path => createMatcher(path)));
+  return createMemo(() => {
+    for (const matcher of matchers()) {
+      const match = matcher(location.pathname);
+      if (match) return match;
+    }
+  });
 };
 const useParams = () => useRoute().params;
 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 +349,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 +363,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) {
@@ -430,31 +428,26 @@ function createLocation(path, state) {
   }, origin, {
     equals: (a, b) => a.href === b.href
   });
-  const pathname = createMemo(() => urlDecode(url().pathname));
-  const search = createMemo(() => urlDecode(url().search, true));
-  const hash = createMemo(() => urlDecode(url().hash));
+  const pathname = createMemo(() => url().pathname);
+  const search = createMemo(() => url().search, true);
+  const hash = createMemo(() => url().hash);
   const key = createMemo(() => "");
   return {
     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 +456,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 +473,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 +491,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 +508,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 +531,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 +571,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 +604,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;
@@ -643,9 +614,8 @@ function createRouterContext(integration, base = "", data, out) {
       const rel = (a.getAttribute("rel") || "").split(/\s+/);
       if (a.hasAttribute("download") || rel && rel.includes("external")) return;
       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));
+      if (url.origin !== window.location.origin || basePath && url.pathname && !url.pathname.toLowerCase().startsWith(basePath.toLowerCase())) return;
+      const to = parsePath(url.pathname + url.search + url.hash);
       const state = a.getAttribute("state");
       evt.preventDefault();
       navigateFromRoute(baseRoute, to, {
@@ -654,14 +624,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 +638,8 @@ function createRouterContext(integration, base = "", data, out) {
     isRouting,
     renderPath,
     parsePath,
-    navigatorFactory
+    navigatorFactory,
+    beforeLeave
   };
 }
 function createRouteContext(router, parent, child, match) {
@@ -690,22 +660,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 +684,6 @@ function createRouteContext(router, parent, child, match) {
       TempRoute = undefined;
     }
   }
-
   return route;
 }
 
@@ -738,11 +702,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 +713,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 +725,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 +757,11 @@ const Routes = props => {
     get when() {
       return routeStates() && root;
     },
-
     children: route => createComponent$1(RouteContextObj.Provider, {
       value: route,
-
       get children() {
         return route.outlet();
       }
-
     })
   });
 };
@@ -827,7 +777,6 @@ const Route = props => {
     get children() {
       return childRoutes();
     }
-
   });
 };
 const Outlet = () => {
@@ -836,14 +785,11 @@ const Outlet = () => {
     get when() {
       return route.child;
     },
-
     children: child => createComponent$1(RouteContextObj.Provider, {
       value: child,
-
       get children() {
         return child.outlet();
       }
-
     })
   });
 };
@@ -852,47 +798,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 +853,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;
@@ -9,11 +9,12 @@ 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 useMatch: (path: () => string) => Accessor<import("./types").PathMatch | null>;
+export declare const useMatch: (path: () => string) => Accessor<import("./types").PathMatch | undefined>;
 export declare const useParams: <T extends Params>() => T;
-declare type MaybeReturnType<T> = T extends (...args: any) => infer R ? R : T;
+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,7 +1,8 @@
 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 { createMemoObject, extractSearchParams, invariant, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, urlDecode, expandOptionals } from "./utils";
+import { createBeforeLeave } from "./lifecycle";
+import { createMemoObject, extractSearchParams, invariant, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, expandOptionals } from "./utils";
 const MAX_REDIRECTS = 100;
 export const RouterContextObj = createContext();
 export const RouteContextObj = createContext();
@@ -24,8 +25,14 @@ export const useLocation = () => useRouter().location;
 export const useIsRouting = () => useRouter().isRouting;
 export const useMatch = (path) => {
     const location = useLocation();
-    const matcher = createMemo(() => createMatcher(path()));
-    return createMemo(() => matcher()(location.pathname));
+    const matchers = createMemo(() => expandOptionals(path()).map((path) => createMatcher(path)));
+    return createMemo(() => {
+        for (const matcher of matchers()) {
+            const match = matcher(location.pathname);
+            if (match)
+                return match;
+        }
+    });
 };
 export const useParams = () => useRoute().params;
 export const useRouteData = () => useRoute().data;
@@ -34,10 +41,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 +113,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 {
@@ -139,9 +151,9 @@ export function createLocation(path, state) {
     }, origin, {
         equals: (a, b) => a.href === b.href
     });
-    const pathname = createMemo(() => urlDecode(url().pathname));
-    const search = createMemo(() => urlDecode(url().search, true));
-    const hash = createMemo(() => urlDecode(url().hash));
+    const pathname = createMemo(() => url().pathname);
+    const search = createMemo(() => url().search, true);
+    const hash = createMemo(() => url().hash);
     const key = createMemo(() => "");
     return {
         get pathname() {
@@ -166,6 +178,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 +237,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 +265,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);
@@ -321,11 +334,10 @@ export function createRouterContext(integration, base = "", data, out) {
             if (a.hasAttribute("download") || (rel && rel.includes("external")))
                 return;
             const url = new URL(href);
-            const pathname = urlDecode(url.pathname);
             if (url.origin !== window.location.origin ||
-                (basePath && pathname && !pathname.toLowerCase().startsWith(basePath.toLowerCase())))
+                (basePath && url.pathname && !url.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 +359,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

@@ -1,6 +1,6 @@
 import { Component, JSX } from "solid-js";
-export declare type Params = Record<string, string>;
-export declare type SetParams = Record<string, string | number | boolean | null | undefined>;
+export type Params = Record<string, string>;
+export type SetParams = Record<string, string | number | boolean | null | undefined>;
 export interface Path {
     pathname: string;
     search: string;
@@ -21,14 +21,14 @@ export interface Navigator {
     (to: string, options?: Partial<NavigateOptions>): void;
     (delta: number): void;
 }
-export declare type NavigatorFactory = (route?: RouteContext) => Navigator;
+export type NavigatorFactory = (route?: RouteContext) => Navigator;
 export interface LocationChange<S = unknown> {
     value: string;
     replace?: boolean;
     scroll?: boolean;
     state?: S;
 }
-export declare type LocationChangeSignal = [() => LocationChange, (next: LocationChange) => void];
+export type LocationChangeSignal = [() => LocationChange, (next: LocationChange) => void];
 export interface RouterIntegration {
     signal: LocationChangeSignal;
     utils?: Partial<RouterUtils>;
@@ -39,8 +39,8 @@ export interface RouteDataFuncArgs<T = unknown> {
     location: Location;
     navigate: Navigator;
 }
-export declare type RouteDataFunc<T = unknown, R = unknown> = (args: RouteDataFuncArgs<T>) => R;
-export declare type RouteDefinition = {
+export type RouteDataFunc<T = unknown, R = unknown> = (args: RouteDataFuncArgs<T>) => R;
+export type RouteDefinition = {
     path: string | string[];
     data?: RouteDataFunc;
     children?: RouteDefinition | RouteDefinition[];
@@ -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,9 +1,9 @@
 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;
 export declare function extractSearchParams(url: URL): Params;
-export declare function urlDecode(str: string, isQuery?: boolean): string;
 export declare function createMatcher(path: string, partial?: boolean): (location: string) => PathMatch | null;
 export declare function scoreRoute(route: Route): number;
 export declare function createMemoObject<T extends Record<string | symbol, unknown>>(fn: () => T): T;

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 = {};
@@ -39,9 +39,6 @@ export function extractSearchParams(url) {
     });
     return params;
 }
-export function urlDecode(str, isQuery) {
-    return decodeURIComponent(isQuery ? str.replace(/\+/g, " ") : str);
-}
 export function createMatcher(path, partial) {
     const [pattern, splat] = path.split("/*", 2);
     const segments = pattern.split("/").filter(Boolean);

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "homepage": "https://github.com/solidjs/solid-router#readme",
   "repository": {
     "type": "git",
@@ -28,36 +28,36 @@
     "dist"
   ],
   "sideEffects": false,
-  "scripts": {
-    "build": "tsc && rollup -c",
-    "prepublishOnly": "npm run build",
-    "test": "jest && npm run test:types",
-    "test:watch": "jest --watch",
-    "test:coverage": "jest --coverage && npm run test:types",
-    "test:types": "tsc --project tsconfig.test.json",
-    "pretty": "prettier --write \"{src,test}/**/*.{ts,tsx}\""
-  },
   "devDependencies": {
     "@babel/core": "^7.18.13",
     "@babel/preset-typescript": "^7.18.6",
-    "@rollup/plugin-babel": "5.3.1",
-    "@rollup/plugin-node-resolve": "13.3.0",
+    "@rollup/plugin-babel": "6.0.3",
+    "@rollup/plugin-node-resolve": "15.0.1",
+    "@rollup/plugin-terser": "0.2.0",
     "@types/jest": "^29.0.0",
     "@types/node": "^18.7.14",
-    "babel-preset-solid": "^1.5.3",
+    "babel-jest": "^29.0.1",
+    "babel-preset-solid": "^1.6.6",
     "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",
+    "rollup": "^3.7.5",
     "solid-jest": "^0.2.0",
-    "solid-js": "^1.5.3",
-    "typescript": "^4.8.2"
+    "solid-js": "^1.6.6",
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
     "solid-js": "^1.5.3"
   },
   "jest": {
     "preset": "solid-jest/preset/browser"
+  },
+  "scripts": {
+    "build": "tsc && rollup -c",
+    "test": "jest && npm run test:types",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage && npm run test:types",
+    "test:types": "tsc --project tsconfig.test.json",
+    "pretty": "prettier --write \"{src,test}/**/*.{ts,tsx}\""
   }
-}
+}