feat: add Helper To Validate Params (#11)

* feat: add $params helper

* chore: update docs

README.md

@@ -1,6 +1,6 @@
 # remix-routes
 
-`remix-routes` automatically generates typesafe helper function for manipulating internal links in your Remix apps.
+`remix-routes` automatically generates typesafe helper functions for manipulating internal links in your Remix apps.
 
 ![Screenshot](https://user-images.githubusercontent.com/465125/147367217-0b8e8a04-0152-48e8-ba65-32c34605a4a5.png)
 
@@ -61,10 +61,24 @@ $path('/posts/:id', { id: 6 }, { version: 18 }); // => /posts/6?version=18
 $path('/posts', { limit: 10 }); // => /posts?limit=10
 ```
 
+Checking params:
+
+```typescript
+import type { ActionFunction } from 'remix';
+import { $params } from 'remix-routes'; // <-- Import $params helper.
+
+export const action: ActionFunction = async ({ params }) => {
+  const { id } = $params("/posts/:id/update", params) // <-- It's type safe, try renaming `id` param.
+
+  // ...
+}
+```
+
 ## API
 
 - `$path(path: string, params: { [key: string]: string | number }, query?: { [key: string]: string | number })`
 - `$path(path: string, query?: { [key: string]: string | number })`
+- `$params(path: string, params: { readonly [key: string]: string | undefined })`
 
 ## Command Line Options
 

src/__tests__/__snapshots__/cli.test.ts.snap

@@ -92,5 +92,45 @@ export declare function $path(
   query?: Record<string, string | number>
 ): string;
 
+export declare function $params(
+  route: \\"/chats/:season/:episode/:slug\\",
+  params: { readonly [key: string]: string | undefined }
+): {
+  season: string,
+  episode: string,
+  slug: string
+};
+export declare function $params(
+  route: \\"/chats/:season/:episode\\",
+  params: { readonly [key: string]: string | undefined }
+): {
+  season: string,
+  episode: string
+};
+export declare function $params(
+  route: \\"/s/:query\\",
+  params: { readonly [key: string]: string | undefined }
+): {
+  query: string
+};
+export declare function $params(
+  route: \\"/admin/episodes/:id\\",
+  params: { readonly [key: string]: string | undefined }
+): {
+  id: string
+};
+export declare function $params(
+  route: \\"/admin/episodes/:id/comments\\",
+  params: { readonly [key: string]: string | undefined }
+): {
+  id: string
+};
+export declare function $params(
+  route: \\"/jokes/:jokeId\\",
+  params: { readonly [key: string]: string | undefined }
+): {
+  jokeId: string
+};
+
 "
 `;

src/__tests__/index.test.ts

@@ -1,4 +1,4 @@
-import { $path } from '../';
+import { $path, $params } from '../';
 
 test('$path', () => {
   expect($path('/posts')).toBe('/posts');
@@ -15,3 +15,7 @@ test('$path + query', () => {
 test('$path + params + query', () => {
   expect($path('/posts/:id', { id: 1 }, { raw: 'true' })).toBe('/posts/1?raw=true');
 });
+
+test('$params', () => {
+  expect($params('/posts/:id', { id: "1" })).toStrictEqual({ id: "1" });
+});

src/cli.ts

@@ -62,7 +62,10 @@ function watch(remixRoot: string) {
 
 function generate(routesInfo: RoutesInfo) {
   const jsCode = generateHelpers(routesInfo);
-  const tsCode = generateDefinition(routesInfo);
+  const tsCode = [
+    generatePathDefinition(routesInfo),
+    generateParamsDefinition(routesInfo)
+  ].join('\n\n') + '\n\n';
   const outputPath = path.join(process.cwd(), 'node_modules', '.remix-routes');
   if (!fs.existsSync(outputPath)) {
     fs.mkdirSync(outputPath);
@@ -89,7 +92,7 @@ module.exports = { routes }
 `;
 }
 
-function generateDefinition(routesInfo: RoutesInfo) {
+function generatePathDefinition(routesInfo: RoutesInfo) {
   const code: string[] = [];
   Object.entries({
     '/': [],
@@ -105,10 +108,31 @@ function generateDefinition(routesInfo: RoutesInfo) {
     lines.push(`): string;`);
     code.push(lines.join('\n'));
   });
-  code.push('\n');
   return code.join('\n');
 }
 
+function generateParamsDefinition(routesInfo: RoutesInfo) {
+  const routes = Object.entries(routesInfo)
+
+  // $params helper makes sense only for routes with params.
+  const routesWithParams = routes.filter(([_, paramsNames]) => paramsNames.length > 0)
+
+  const code = routesWithParams.map(([route, paramsNames]) => {
+    const lines: string[] = []
+
+    lines.push(`export declare function $params(`)
+    lines.push(`  route: ${JSON.stringify(route)},`)
+    lines.push(`  params: { readonly [key: string]: string | undefined }`)
+    lines.push(`): {`)
+    lines.push(paramsNames.map(paramName => `  ${paramName}: string`).join(',\n'))
+    lines.push(`};`)
+
+    return lines.join('\n')
+  })
+
+  return code.join('\n')
+}
+
 function parse(routes: ConfigRoute[]) {
   const paramNames: string[] = [];
   routes.forEach((route) => {

src/index.ts

@@ -25,3 +25,7 @@ export function $path(route: string, ...paramsOrQuery: Array<object>) {
 
   return path + '?' + searchParams.toString();
 }
+
+export function $params(_route: string, params: { readonly [key: string]: string | undefined }) {
+  return params
+}