move the type and add to README

Author: Munawwar

README.md

@@ -261,6 +261,16 @@ The difference between `/:id*` and `/:id/*` is that in the former, the `id` para
   - `/profile/:id/*`, with `/profile/123/abc`
     - `id` is `123`
 
+You can narrow prop types for your routes using `RoutePropsForPath<path>`:
+```js
+import type { RoutePropsForPath } from 'preact-iso/router'
+
+function User(props: RoutePropsForPath<'/user/:id'>) {
+	props.user.id2 // type error
+	props.user.id // no type error
+}
+```
+
 ### `useLocation`
 
 A hook to work with the `LocationProvider` to access location context.

src/router.d.ts

@@ -59,6 +59,32 @@ type RoutableProps =
 
 export type RouteProps<Props> = RoutableProps & { component: AnyComponent<Props> };
 
+export type RoutePropsForPath<Path extends string> = Path extends '*'
+	? { params: {}; rest: string }
+
+	: Path extends `:${infer placeholder}?/${infer rest}`
+	? { [k in placeholder]?: string } & { params: RoutePropsForPath<rest>['params'] & { [k in placeholder]?: string } } & Omit<RoutePropsForPath<rest>, 'params'>
+
+	: Path extends `:${infer placeholder}/${infer rest}`
+	? { [k in placeholder]: string } & { params: RoutePropsForPath<rest>['params'] & { [k in placeholder]: string } } & Omit<RoutePropsForPath<rest>, 'params'>
+
+	: Path extends `:${infer placeholder}?`
+	? { [k in placeholder]?: string } & { params: { [k in placeholder]?: string } }
+
+	: Path extends `:${infer placeholder}*`
+	? { [k in placeholder]?: string } & { params: { [k in placeholder]?: string } }
+
+	: Path extends `:${infer placeholder}+`
+	? { [k in placeholder]: string } & { params: { [k in placeholder]: string } }
+
+	: Path extends `:${infer placeholder}`
+	? { [k in placeholder]: string } & { params: { [k in placeholder]: string } }
+
+	: Path extends (`/${infer rest}` | `${infer _}/${infer rest}`)
+	? RoutePropsForPath<rest>
+
+	: { params: {} };
+
 export function Route<Props>(props: RouteProps<Props> & Partial<Props>): VNode;
 
 declare module 'preact' {

test/node/pattern-match.test.ts test/node/pattern-match.types.tstest/node/pattern-match.test.ts renamed to test/node/pattern-match.types.ts

@@ -1,31 +1,7 @@
 // Test this file by running:
-// npx tsc --noEmit test/node/pattern-match.test.ts
+// npx tsc --noEmit test/node/pattern-match.types.ts
 
-type RoutePropsNarrow<Re extends string> = Re extends '*'
-	? { params: {}; rest: string }
-
-	: Re extends `:${infer placeholder}?/${infer rest}`
-	? { [k in placeholder]?: string } & { params: RoutePropsNarrow<rest>['params'] & { [k in placeholder]?: string } } & Omit<RoutePropsNarrow<rest>, 'params'>
-
-	: Re extends `:${infer placeholder}/${infer rest}`
-	? { [k in placeholder]: string } & { params: RoutePropsNarrow<rest>['params'] & { [k in placeholder]: string } } & Omit<RoutePropsNarrow<rest>, 'params'>
-
-	: Re extends `:${infer placeholder}?`
-	? { [k in placeholder]?: string } & { params: { [k in placeholder]?: string } }
-
-	: Re extends `:${infer placeholder}*`
-	? { [k in placeholder]?: string } & { params: { [k in placeholder]?: string } }
-
-	: Re extends `:${infer placeholder}+`
-	? { [k in placeholder]: string } & { params: { [k in placeholder]: string } }
-
-	: Re extends `:${infer placeholder}`
-	? { [k in placeholder]: string } & { params: { [k in placeholder]: string } }
-	
-	: Re extends (`/${infer rest}` | `${infer _}/${infer rest}`)
-	? RoutePropsNarrow<rest>
-
-	: { params: {} };
+import type { RoutePropsForPath } from '../../src/router.js';
 
 // Test utils
 
@@ -36,92 +12,92 @@ type isWeakEqualsType<T, U> = T extends U ? true : false;
 
 // Base route test
 const test1: isEqualsType<
-  RoutePropsNarrow<'/'> ,
+  RoutePropsForPath<'/'> ,
 	{ params: {} }
 > = true;
 
 const test1_1: isEqualsType<
-  RoutePropsNarrow<'/'> ,
+  RoutePropsForPath<'/'> ,
 	{ arbitrary: {} }
 > = false;
 
 // Param route test
 const test2: isEqualsType<
-  RoutePropsNarrow<'/user/:id'> ,
+  RoutePropsForPath<'/user/:id'> ,
   { params: { id: string }, id: string }
 > = true;
 
 const test2_weak: isWeakEqualsType<
-  RoutePropsNarrow<'/user/:id'> ,
+  RoutePropsForPath<'/user/:id'> ,
   { params: { id: string } }
 > = true;
 
 // Param rest segment test
 const test3: isEqualsType<
-  RoutePropsNarrow<'/user/*'> ,
+  RoutePropsForPath<'/user/*'> ,
   { params: {}, rest: string }
 > = true;
 
 const test3_1: isEqualsType<
-  RoutePropsNarrow<'/*'> ,
+  RoutePropsForPath<'/*'> ,
   { params: {}, rest: string }
 > = true;
 
 const test3_2: isEqualsType<
-  RoutePropsNarrow<'*'> ,
+  RoutePropsForPath<'*'> ,
   { params: {}, rest: string }
 > = true;
 
 // Param route with rest segment test
 const test4: isEqualsType<
-  RoutePropsNarrow<'/user/:id/*'> ,
+  RoutePropsForPath<'/user/:id/*'> ,
   { params: { id: string }, id: string, rest: string }
 > = true;
 
 // Optional param route test
 const test5: isEqualsType<
-  RoutePropsNarrow<'/user/:id?'> ,
+  RoutePropsForPath<'/user/:id?'> ,
 	{ params: { id?: string }, id?: string }
 > = true;
 
 // Optional rest param route "/:x*" test
 const test6: isEqualsType<
-  RoutePropsNarrow<'/user/:id*'> ,
+  RoutePropsForPath<'/user/:id*'> ,
   { params: { id?: string }, id?: string }
 > = true;
 
 // rest param should not be present
 const test6_error: isEqualsType<
-  RoutePropsNarrow<'/user/:id*'> ,
+  RoutePropsForPath<'/user/:id*'> ,
   { params: { id: string }, rest: string }
 > = false;
 
 // Rest param route "/:x+" test
 const test7: isEqualsType<
-  RoutePropsNarrow<'/user/:id+'> ,
+  RoutePropsForPath<'/user/:id+'> ,
   { params: { id: string }, id: string }
 > = true;
 
 // rest param should not be present
 const test7_error: isEqualsType<
-  RoutePropsNarrow<'/user/:id+'>,
+  RoutePropsForPath<'/user/:id+'>,
   { params: { id: string }, id: string, rest: string }
 > = false;
 
 // Handles leading/trailing slashes test
 const test8: isEqualsType<
-  RoutePropsNarrow<'/about-late/:seg1/:seg2/'> ,
+  RoutePropsForPath<'/about-late/:seg1/:seg2/'> ,
   { params: { seg1: string; seg2: string }, seg1: string, seg2: string }
 > = true;
 
 // Multiple params test (from overwrite properties test)
 const test9: isEqualsType<
-  RoutePropsNarrow<'/:path/:query'> ,
+  RoutePropsForPath<'/:path/:query'> ,
   { params: { path: string; query: string }, path: string, query: string }
 > = true;
 
 // Empty route test
 const test10: isEqualsType<
-  RoutePropsNarrow<''> ,
+  RoutePropsForPath<''> ,
   { params: {} }
 > = true;