@solidjs/router 0.5.1 → 0.7.0

package/README.md

@@ -6,7 +6,7 @@
 
 A router lets you change your view based on the URL in the browser. This allows your "single-page" application to simulate a traditional multipage site. To use Solid Router, you specify components called Routes that depend on the value of the URL (the "path"), and the router handles the mechanism of swapping them in and out.
 
-Solid Router is a universal router for SolidJS - it works whether you're rendering on the client or on the server. It was inspired by and combines paradigms of React Router and the Ember Router. Routes can be defined directly in your app's template using JSX, but you can also pass your route configuration directly as an object. It also supports nested routing, so navigation can change a part of a component, rather than completely replacing it. 
+Solid Router is a universal router for SolidJS - it works whether you're rendering on the client or on the server. It was inspired by and combines paradigms of React Router and the Ember Router. Routes can be defined directly in your app's template using JSX, but you can also pass your route configuration directly as an object. It also supports nested routing, so navigation can change a part of a component, rather than completely replacing it.
 
 It supports all of Solid's SSR methods and has Solid's transitions baked in, so use it freely with suspense, resources, and lazy components. Solid Router also allows you to define a data function that loads parallel to the routes ([render-as-you-fetch](https://epicreact.dev/render-as-you-fetch/)).
 
@@ -16,8 +16,8 @@ It supports all of Solid's SSR methods and has Solid's transitions baked in, so
 - [Create Links to Your Routes](#create-links-to-your-routes)
 - [Dynamic Routes](#dynamic-routes)
 - [Data Functions](#data-functions)
-- [Nested Routes](#nested-routes) 
-- [Hash Mode Router](#hash-mode-router) 
+- [Nested Routes](#nested-routes)
+- [Hash Mode Router](#hash-mode-router)
 - [Config Based Routing](#config-based-routing)
 - [Router Primitives](#router-primitives)
   - [useParams](#useparams)
@@ -63,17 +63,16 @@ Solid Router allows you to configure your routes using JSX:
 
 1. Use the `Routes` component to specify where the routes should appear in your app.
 
-
 ```jsx
 import { Routes, Route } from "@solidjs/router"
 
 export default function App() {
   return <>
-    <h1>My Site with Lots of Pages</h1>
+      <h1>My Site with Lots of Pages</h1>
     <Routes>
 
     </Routes>
-  </>
+    </>
 }
 ```
 
@@ -87,13 +86,13 @@ import Users from "./pages/Users"
 
 export default function App() {
   return <>
-    <h1>My Site with Lots of Pages</h1>
-    <Routes>
-      <Route path="/users" component={Users} />
-      <Route path="/" component={Home} />
-      <Route path="/about" element={<div>This site was made with Solid</div>} />
-    </Routes>
-  </>
+      <h1>My Site with Lots of Pages</h1>
+      <Routes>
+        <Route path="/users" component={Users} />
+        <Route path="/" component={Home} />
+        <Route path="/about" element={<div>This site was made with Solid</div>} />
+      </Routes>
+    </>
 }
 ```
 
@@ -109,13 +108,13 @@ const Home = lazy(() => import("./pages/Home"));
 
 export default function App() {
   return <>
-    <h1>My Site with Lots of Pages</h1>
-    <Routes>
-      <Route path="/users" component={Users} />
-      <Route path="/" component={Home} />
-      <Route path="/about" element={<div>This site was made with Solid</div>} />
-    </Routes>
-  </>
+      <h1>My Site with Lots of Pages</h1>
+      <Routes>
+        <Route path="/users" component={Users} />
+        <Route path="/" component={Home} />
+        <Route path="/about" element={<div>This site was made with Solid</div>} />
+      </Routes>
+    </>
 }
 ```
 
@@ -131,17 +130,17 @@ const Home = lazy(() => import("./pages/Home"));
 
 export default function App() {
   return <>
-    <h1>My Site with Lots of Pages</h1>
-    <nav>
-      <A href="/about">About</A>
-      <A href="/">Home</A>
-    </nav>
-    <Routes>
-      <Route path="/users" component={Users} />
-      <Route path="/" component={Home} />
-      <Route path="/about" element={<div>This site was made with Solid</div>} />
-    </Routes>
-  </>
+      <h1>My Site with Lots of Pages</h1>
+      <nav>
+        <A href="/about">About</A>
+        <A href="/">Home</A>
+      </nav>
+      <Routes>
+        <Route path="/users" component={Users} />
+        <Route path="/" component={Home} />
+        <Route path="/about" element={<div>This site was made with Solid</div>} />
+      </Routes>
+    </>
 }
 ```
 
@@ -163,7 +162,7 @@ Solid Router provides a `Navigate` component that works similarly to `A`, but it
 
 ```jsx
 function getPath ({navigate, location}) {
-  //navigate is the result of calling useNavigate(); location is the result of calling useLocation(). 
+  //navigate is the result of calling useNavigate(); location is the result of calling useLocation().
   //You can use those to dynamically determine a path to navigate to
   return "/some-path";
 }
@@ -174,7 +173,7 @@ function getPath ({navigate, location}) {
 
 ## Dynamic Routes
 
-If you don't know the path ahead of time, you might want to treat part of the path as a flexible parameter that is passed on to the component. 
+If you don't know the path ahead of time, you might want to treat part of the path as a flexible parameter that is passed on to the component.
 
 ```jsx
 import { lazy } from "solid-js";
@@ -185,14 +184,14 @@ const Home = lazy(() => import("./pages/Home"));
 
 export default function App() {
   return <>
-    <h1>My Site with Lots of Pages</h1>
-    <Routes>
-      <Route path="/users" component={Users} />
-      <Route path="/users/:id" component={User} />
-      <Route path="/" component={Home} />
-      <Route path="/about" element={<div>This site was made with Solid</div>} />
-    </Routes>
-  </>
+      <h1>My Site with Lots of Pages</h1>
+      <Routes>
+        <Route path="/users" component={Users} />
+        <Route path="/users/:id" component={User} />
+        <Route path="/" component={Home} />
+        <Route path="/about" element={<div>This site was made with Solid</div>} />
+      </Routes>
+    </>
 }
 ```
 
@@ -200,6 +199,48 @@ The colon indicates that `id` can be any string, and as long as the URL fits tha
 
 You can then access that `id` from within a route component with `useParams`:
 
+---
+
+Each path parameter can be validated using a `MatchFilter`.
+This allows for more complex routing descriptions than just checking the presence of a parameter.
+
+```tsx
+import {lazy} from "solid-js";
+import {Routes, Route} from "@solidjs/router"
+import type {SegmentValidators} from "./types";
+
+const Users = lazy(() => import("./pages/Users"));
+const User = lazy(() => import("./pages/User"));
+const Home = lazy(() => import("./pages/Home"));
+
+const filters: MatchFilters = {
+  parent: ['mom', 'dad'], // allow enum values
+  id: /^\d+$/, // only allow numbers
+  withHtmlExtension: (v: string) => v.length > 5 && v.endsWith('.html') // we want an `*.html` extension
+}
+
+export default function App() {
+  return <>
+      <h1>My Site with Lots of Pages</h1>
+      <Routes>
+      <Route path="/users/:parent/:id/:withHtmlExtension" component={User} matchFilters={filters}/>
+      </Routes>
+    </>
+}
+```
+
+Here, we have added the `matchFilters` prop. This allows us to validate the `parent`, `id` and `withHtmlExtension` parameters against the filters defined in `filters`.
+If the validation fails, the route will not match.
+
+So in this example:
+
+- `/users/mom/123/contact.html` would match,
+- `/users/dad/123/about.html` would match,
+- `/users/aunt/123/contact.html` would not match as `:parent` is not 'mom' or 'dad',
+- `/users/mom/me/contact.html` would not match as `:id` is not a number,
+- `/users/dad/123/contact` would not match as `:withHtmlExtension` is missing `.html`.
+
+---
 
 ```jsx
 //async fetching function
@@ -250,12 +291,10 @@ Routes also support defining multiple paths using an array. This allows a route
 <Route path={["login", "register"]} component={Login}/>
 ```
 
-
 ## Data Functions
 In the [above example](#dynamic-routes), the User component is lazy-loaded and then the data is fetched. With route data functions, we can instead start fetching the data parallel to loading the route, so we can use the data as soon as possible.
 
-To do this, create a function that fetches and returns the data using `createResource`. Then pass that function to the `data` prop of the `Route` component. 
-
+To do this, create a function that fetches and returns the data using `createResource`. Then pass that function to the `data` prop of the `Route` component.
 
 ```js
 import { lazy } from "solid-js";
@@ -299,7 +338,7 @@ A common pattern is to export the data function that corresponds to a route in a
 ```js
 import { lazy } from "solid-js";
 import { Route } from "@solidjs/router";
-import { fetchUser } ... 
+import { fetchUser } ...
 import UserData from "./pages/users/[id].data.js";
 const User = lazy(() => import("/pages/users/[id].js"));
 
@@ -341,15 +380,14 @@ Only leaf Route nodes (innermost `Route` components) are given a route. If you w
 
 You can also take advantage of nesting by adding a parent element with an `<Outlet/>`.
 ```jsx
-
 import { Outlet } from "@solidjs/router";
 
 function PageWrapper () {
   return <div>
-    <h1> We love our users! </h1>
+      <h1> We love our users! </h1>
     <Outlet/>
-    <A href="/">Back Home</A>
-  </div>
+      <A href="/">Back Home</A>
+    </div>
 }
 
 <Route path="/users" component={PageWrapper}>
@@ -369,7 +407,7 @@ You can nest indefinitely - just remember that only leaf nodes will become their
 </Route>
 ```
 
-If you declare a `data` function on a parent and a child, the result of the parent's data function will be passed to the child's data function as the `data` property of the argument, as described in the last section. This works even if it isn't a direct child, because by default every route forwards its parent's data. 
+If you declare a `data` function on a parent and a child, the result of the parent's data function will be passed to the child's data function as the `data` property of the argument, as described in the last section. This works even if it isn't a direct child, because by default every route forwards its parent's data.
 
 ## Hash Mode Router
 
@@ -378,7 +416,7 @@ By default, Solid Router uses `location.pathname` as route path. You can simply
 ```jsx
 import { Router, hashIntegration } from '@solidjs/router'
 
-<Router source={hashIntegration()}><App></Router>
+<Router source={hashIntegration()}><App /></Router>
 ```
 
 ## Config Based Routing
@@ -560,11 +598,9 @@ useBeforeLeave((e: BeforeLeaveEventArgs) => {
     setTimeout(() => {
       if (window.confirm("Discard unsaved changes - are you sure?")) {
         // user wants to proceed anyway so retry with force=true
-        e.retry(true); 
+        e.retry(true);
       }
     }, 100);
   }
 });
 ```
-
-

package/dist/components.d.ts

@@ -1,5 +1,5 @@
 import type { Component, JSX } from "solid-js";
-import type { Location, LocationChangeSignal, Navigator, RouteDataFunc, RouteDefinition, RouterIntegration } from "./types";
+import type { Location, LocationChangeSignal, MatchFilters, Navigator, RouteDataFunc, RouteDefinition, RouterIntegration } from "./types";
 declare module "solid-js" {
     namespace JSX {
         interface AnchorHTMLAttributes<T> {
@@ -10,7 +10,7 @@ declare module "solid-js" {
         }
     }
 }
-export declare type RouterProps = {
+export type RouterProps = {
     base?: string;
     data?: RouteDataFunc;
     children: JSX.Element;
@@ -29,10 +29,11 @@ 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 = {
-    path: string | string[];
+export type RouteProps<S extends string> = {
+    path: S | S[];
     children?: JSX.Element;
     data?: RouteDataFunc;
+    matchFilters?: MatchFilters<S>;
 } & ({
     element?: never;
     component: Component;
@@ -41,7 +42,7 @@ export declare type RouteProps = {
     element?: JSX.Element;
     preload?: () => void;
 });
-export declare const Route: (props: RouteProps) => JSX.Element;
+export declare const Route: <S extends string>(props: RouteProps<S>) => JSX.Element;
 export declare const Outlet: () => JSX.Element;
 export interface AnchorProps extends Omit<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, "state"> {
     href: string;

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, normalizePath } from "./utils";
+import { joinPaths, normalizePath, createMemoObject } from "./utils";
 export const Router = (props) => {
     const { source, url, base, data, out } = props;
     const integration = source || (isServer ? staticIntegration({ value: url || "" }) : pathIntegration());
@@ -16,6 +16,14 @@ export 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));
+    const params = createMemoObject(() => {
+        const m = matches();
+        const params = {};
+        for (let i = 0; i < m.length; i++) {
+            Object.assign(params, m[i].params);
+        }
+        return params;
+    });
     if (router.out) {
         router.out.matches.push(matches().map(({ route, path, params }) => ({
             originalPath: route.originalPath,
@@ -42,7 +50,7 @@ export const Routes = (props) => {
                 }
                 createRoot(dispose => {
                     disposers[i] = dispose;
-                    next[i] = createRouteContext(router, next[i - 1] || parentRoute, () => routeStates()[i + 1], () => matches()[i]);
+                    next[i] = createRouteContext(router, next[i - 1] || parentRoute, () => routeStates()[i + 1], () => matches()[i], params);
                 });
             }
         }
@@ -76,7 +84,14 @@ export const Outlet = () => {
 };
 export function A(props) {
     props = mergeProps({ inactiveClass: "inactive", activeClass: "active" }, props);
-    const [, rest] = splitProps(props, ["href", "state", "class", "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();

package/dist/index.js

@@ -185,10 +185,7 @@ function extractSearchParams(url) {
   });
   return params;
 }
-function urlDecode(str, isQuery) {
-  return decodeURIComponent(isQuery ? str.replace(/\+/g, " ") : str);
-}
-function createMatcher(path, partial) {
+function createMatcher(path, partial, matchFilters) {
   const [pattern, splat] = path.split("/*", 2);
   const segments = pattern.split("/").filter(Boolean);
   const len = segments.length;
@@ -202,24 +199,46 @@ function createMatcher(path, partial) {
       path: len ? "" : "/",
       params: {}
     };
+    const matchFilter = s => matchFilters === undefined ? undefined : matchFilters[s];
     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, {
-        sensitivity: "base"
-      }) !== 0) {
+      const key = segment[0] === ":" ? segment.slice(1) : segment;
+      if (segment[0] === ":" && matchSegment(locSegment, matchFilter(key))) {
+        match.params[key] = locSegment;
+      } else if (!matchSegment(locSegment, segment)) {
         return null;
       }
       match.path += `/${locSegment}`;
     }
     if (splat) {
-      match.params[splat] = lenDiff ? locSegments.slice(-lenDiff).join("/") : "";
+      const remainder = lenDiff ? locSegments.slice(-lenDiff).join("/") : "";
+      if (matchSegment(remainder, matchFilter(splat))) {
+        match.params[splat] = remainder;
+      } else {
+        return null;
+      }
     }
     return match;
   };
 }
+function matchSegment(input, filter) {
+  const isEqual = s => s.localeCompare(input, undefined, {
+    sensitivity: "base"
+  }) === 0;
+  if (filter === undefined) {
+    return true;
+  } else if (typeof filter === "string") {
+    return isEqual(filter);
+  } else if (typeof filter === "function") {
+    return filter(input);
+  } else if (Array.isArray(filter)) {
+    return filter.some(isEqual);
+  } else if (filter instanceof RegExp) {
+    return filter.test(input);
+  }
+  return false;
+}
 function scoreRoute(route) {
   const [pattern, splat] = route.pattern.split("/*", 2);
   const segments = pattern.split("/").filter(Boolean);
@@ -297,10 +316,15 @@ const useHref = to => {
 const useNavigate = () => useRouter().navigatorFactory();
 const useLocation = () => useRouter().location;
 const useIsRouting = () => useRouter().isRouting;
-const useMatch = path => {
+const useMatch = (path, matchFilters) => {
   const location = useLocation();
-  const matcher = createMemo(() => createMatcher(path()));
-  return createMemo(() => matcher()(location.pathname));
+  const matchers = createMemo(() => expandOptionals(path()).map(path => createMatcher(path, undefined, matchFilters)));
+  return createMemo(() => {
+    for (const matcher of matchers()) {
+      const match = matcher(location.pathname);
+      if (match) return match;
+    }
+  });
 };
 const useParams = () => useRoute().params;
 const useRouteData = () => useRoute().data;
@@ -351,7 +375,7 @@ function createRoutes(routeDef, base = "", fallback) {
         ...shared,
         originalPath,
         pattern,
-        matcher: createMatcher(pattern, !isLeaf)
+        matcher: createMatcher(pattern, !isLeaf, routeDef.matchFilters)
       });
     }
     return acc;
@@ -426,9 +450,9 @@ 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() {
@@ -612,8 +636,7 @@ 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;
+      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();
@@ -641,7 +664,7 @@ function createRouterContext(integration, base = "", data, out) {
     beforeLeave
   };
 }
-function createRouteContext(router, parent, child, match) {
+function createRouteContext(router, parent, child, match, params) {
   const {
     base,
     location,
@@ -654,7 +677,6 @@ function createRouteContext(router, parent, child, match) {
     data
   } = match().route;
   const path = createMemo(() => match().path);
-  const params = createMemoObject(() => match().params);
   preload && preload();
   const route = {
     parent,
@@ -712,6 +734,14 @@ 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));
+  const params = createMemoObject(() => {
+    const m = matches();
+    const params = {};
+    for (let i = 0; i < m.length; i++) {
+      Object.assign(params, m[i].params);
+    }
+    return params;
+  });
   if (router.out) {
     router.out.matches.push(matches().map(({
       route,
@@ -741,7 +771,7 @@ const Routes = props => {
         }
         createRoot(dispose => {
           disposers[i] = dispose;
-          next[i] = createRouteContext(router, next[i - 1] || parentRoute, () => routeStates()[i + 1], () => matches()[i]);
+          next[i] = createRouteContext(router, next[i - 1] || parentRoute, () => routeStates()[i + 1], () => matches()[i], params);
         });
       }
     }

package/dist/routing.d.ts

@@ -1,5 +1,5 @@
 import type { Component, Accessor } from "solid-js";
-import type { BeforeLeaveEventArgs, Branch, Location, LocationChangeSignal, NavigateOptions, Navigator, Params, Route, RouteContext, RouteDataFunc, RouteDefinition, RouteMatch, RouterContext, RouterIntegration, SetParams } from "./types";
+import type { BeforeLeaveEventArgs, Branch, Location, LocationChangeSignal, MatchFilters, 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,9 +9,9 @@ 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: <S extends string>(path: () => S, matchFilters?: MatchFilters<S> | undefined) => 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;
@@ -21,5 +21,5 @@ export declare function createBranches(routeDef: RouteDefinition | RouteDefiniti
 export declare function getRouteMatches(branches: Branch[], location: string): RouteMatch[];
 export declare function createLocation(path: Accessor<string>, state: Accessor<any>): Location;
 export declare function createRouterContext(integration?: RouterIntegration | LocationChangeSignal, base?: string, data?: RouteDataFunc, out?: object): RouterContext;
-export declare function createRouteContext(router: RouterContext, parent: RouteContext, child: () => RouteContext, match: () => RouteMatch): RouteContext;
+export declare function createRouteContext(router: RouterContext, parent: RouteContext, child: () => RouteContext, match: () => RouteMatch, params: Params): RouteContext;
 export {};

package/dist/routing.js

@@ -2,7 +2,7 @@ import { createComponent, createContext, createMemo, createRenderEffect, createS
 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";
+import { createMemoObject, extractSearchParams, invariant, resolvePath, createMatcher, joinPaths, scoreRoute, mergeSearchString, expandOptionals } from "./utils";
 const MAX_REDIRECTS = 100;
 export const RouterContextObj = createContext();
 export const RouteContextObj = createContext();
@@ -23,10 +23,16 @@ export const useHref = (to) => {
 export const useNavigate = () => useRouter().navigatorFactory();
 export const useLocation = () => useRouter().location;
 export const useIsRouting = () => useRouter().isRouting;
-export const useMatch = (path) => {
+export const useMatch = (path, matchFilters) => {
     const location = useLocation();
-    const matcher = createMemo(() => createMatcher(path()));
-    return createMemo(() => matcher()(location.pathname));
+    const matchers = createMemo(() => expandOptionals(path()).map(path => createMatcher(path, undefined, matchFilters)));
+    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;
@@ -35,12 +41,20 @@ export const useSearchParams = () => {
     const navigate = useNavigate();
     const setSearchParams = (params, options) => {
         const searchString = untrack(() => mergeSearchString(location.search, params));
-        navigate(location.pathname + searchString + location.hash, { scroll: false, resolve: 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() });
+    const s = useRouter().beforeLeave.subscribe({
+        listener,
+        location: useLocation(),
+        navigate: useNavigate()
+    });
     onCleanup(s);
 };
 export function createRoutes(routeDef, base = "", fallback) {
@@ -69,7 +83,7 @@ export function createRoutes(routeDef, base = "", fallback) {
                 ...shared,
                 originalPath,
                 pattern,
-                matcher: createMatcher(pattern, !isLeaf)
+                matcher: createMatcher(pattern, !isLeaf, routeDef.matchFilters)
             });
         }
         return acc;
@@ -145,9 +159,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() {
@@ -328,9 +342,8 @@ 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(url.pathname + url.search + url.hash);
             const state = a.getAttribute("state");
@@ -358,11 +371,10 @@ export function createRouterContext(integration, base = "", data, out) {
         beforeLeave
     };
 }
-export function createRouteContext(router, parent, child, match) {
+export function createRouteContext(router, parent, child, match, params) {
     const { base, location, navigatorFactory } = router;
     const { pattern, element: outlet, preload, data } = match().route;
     const path = createMemo(() => match().path);
-    const params = createMemoObject(() => match().params);
     preload && preload();
     const route = {
         parent,

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,9 +39,10 @@ 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 = {
-    path: string | string[];
+export type RouteDataFunc<T = unknown, R = unknown> = (args: RouteDataFuncArgs<T>) => R;
+export type RouteDefinition<S extends string | string[] = any> = {
+    path: S;
+    matchFilters?: MatchFilters<S>;
     data?: RouteDataFunc;
     children?: RouteDefinition | RouteDefinition[];
 } & ({
@@ -52,6 +53,11 @@ export declare type RouteDefinition = {
     element?: JSX.Element;
     preload?: () => void;
 });
+export type MatchFilter = string[] | RegExp | ((s: string) => boolean);
+export type PathParams<P extends string | readonly string[]> = P extends `${infer Head}/${infer Tail}` ? [...PathParams<Head>, ...PathParams<Tail>] : P extends `:${infer S}?` ? [S] : P extends `:${infer S}` ? [S] : P extends `*${infer S}` ? [S] : [];
+export type MatchFilters<P extends string | readonly string[] = any> = P extends string ? {
+    [K in PathParams<P>[number]]?: MatchFilter;
+} : Record<string, MatchFilter>;
 export interface PathMatch {
     params: Params;
     path: string;
@@ -73,6 +79,7 @@ export interface Route {
     preload?: () => void;
     data?: RouteDataFunc;
     matcher: (location: string) => PathMatch | null;
+    matchFilters?: MatchFilters;
 }
 export interface Branch {
     routes: Route[];

package/dist/utils.d.ts

@@ -1,11 +1,10 @@
-import type { Params, PathMatch, Route, SetParams } from "./types";
+import type { MatchFilters, 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 createMatcher<S extends string>(path: S, partial?: boolean, matchFilters?: MatchFilters<S>): (location: string) => PathMatch | null;
 export declare function scoreRoute(route: Route): number;
 export declare function createMemoObject<T extends Record<string | symbol, unknown>>(fn: () => T): T;
 export declare function mergeSearchString(search: string, params: SetParams): string;

package/dist/utils.js

@@ -39,10 +39,7 @@ export function extractSearchParams(url) {
     });
     return params;
 }
-export function urlDecode(str, isQuery) {
-    return decodeURIComponent(isQuery ? str.replace(/\+/g, " ") : str);
-}
-export function createMatcher(path, partial) {
+export function createMatcher(path, partial, matchFilters) {
     const [pattern, splat] = path.split("/*", 2);
     const segments = pattern.split("/").filter(Boolean);
     const len = segments.length;
@@ -56,23 +53,50 @@ export function createMatcher(path, partial) {
             path: len ? "" : "/",
             params: {}
         };
+        const matchFilter = (s) => matchFilters === undefined ? undefined : matchFilters[s];
         for (let i = 0; i < len; i++) {
             const segment = segments[i];
             const locSegment = locSegments[i];
-            if (segment[0] === ":") {
-                match.params[segment.slice(1)] = locSegment;
+            const key = segment[0] === ":" ? segment.slice(1) : segment;
+            if (segment[0] === ":" && matchSegment(locSegment, matchFilter(key))) {
+                match.params[key] = locSegment;
             }
-            else if (segment.localeCompare(locSegment, undefined, { sensitivity: "base" }) !== 0) {
+            else if (!matchSegment(locSegment, segment)) {
                 return null;
             }
             match.path += `/${locSegment}`;
         }
         if (splat) {
-            match.params[splat] = lenDiff ? locSegments.slice(-lenDiff).join("/") : "";
+            const remainder = lenDiff ? locSegments.slice(-lenDiff).join("/") : "";
+            if (matchSegment(remainder, matchFilter(splat))) {
+                match.params[splat] = remainder;
+            }
+            else {
+                return null;
+            }
         }
         return match;
     };
 }
+function matchSegment(input, filter) {
+    const isEqual = (s) => s.localeCompare(input, undefined, { sensitivity: "base" }) === 0;
+    if (filter === undefined) {
+        return true;
+    }
+    else if (typeof filter === "string") {
+        return isEqual(filter);
+    }
+    else if (typeof filter === "function") {
+        return filter(input);
+    }
+    else if (Array.isArray(filter)) {
+        return filter.some(isEqual);
+    }
+    else if (filter instanceof RegExp) {
+        return filter.test(input);
+    }
+    return false;
+}
 export function scoreRoute(route) {
     const [pattern, splat] = route.pattern.split("/*", 2);
     const segments = pattern.split("/").filter(Boolean);

package/package.json

@@ -6,7 +6,7 @@
     "Ryan Turnquist"
   ],
   "license": "MIT",
-  "version": "0.5.1",
+  "version": "0.7.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.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}\""
   }
-}
+}