feat: type custom params

Author: posva

client.d.ts

@@ -34,9 +34,11 @@ declare module 'vue-router/auto-routes' {
 
 declare module 'vue-router' {
   import type { RouteNamedMap } from 'vue-router/auto-routes'
+  import type { ParamParserCustom } from 'vue-router/auto-resolver'
 
   export interface TypesConfig {
     RouteNamedMap: RouteNamedMap
+    ParamParsers: ParamParserCustom
   }
 }
 

playground-experimental/typed-router.d.ts

@@ -8,6 +8,10 @@
 // Custom route params parsers
 type Param_date = ReturnType<NonNullable<typeof import('./src/params/date.ts').parser['get']>>
 
+declare module 'vue-router/auto-resolver' {
+  export type ParamParserCustom = 'date'
+}
+
 declare module 'vue-router/auto-routes' {
   import type {
     RouteRecordInfo,

playground/typed-router.d.ts

@@ -5,6 +5,10 @@
 // It's recommended to commit this file.
 // Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
 
+declare module 'vue-router/auto-resolver' {
+  export type ParamParserCustom = never
+}
+
 declare module 'vue-router/auto-routes' {
   import type {
     RouteRecordInfo,

src/codegen/generateDTS.ts

@@ -20,11 +20,13 @@ export function generateDTS({
   routeNamedMap,
   routeFileInfoMap,
   paramsTypesDeclaration,
+  customParamsType,
 }: {
   routesModule: string
   routeNamedMap: string
   routeFileInfoMap: string
   paramsTypesDeclaration: string
+  customParamsType: string
 }) {
   return ts`
 /* eslint-disable */
@@ -42,7 +44,11 @@ ${paramsTypesDeclaration}
 
 `.trimStart()
     : ''
-}declare module '${routesModule}' {
+}declare module 'vue-router/auto-resolver' {
+  export type ParamParserCustom = ${customParamsType}
+}
+
+declare module '${routesModule}' {
   import type {
     RouteRecordInfo,
     ParamValue,

src/codegen/generateParamParsers.spec.ts

@@ -5,6 +5,7 @@ import {
   generateParamsTypes,
   generateParamParserOptions,
   generatePathParamsOptions,
+  generateParamParserCustomType,
   type ParamParsersMap,
 } from './generateParamParsers'
 import { PrefixTree } from '../core/tree'
@@ -464,3 +465,106 @@ describe('generatePathParamsOptions', () => {
     expect(result).toContain('tags: [/* no parser */, /* repeatable: */ true]')
   })
 })
+
+describe('generateParamParserCustomType', () => {
+  it('returns never for empty param parsers map', () => {
+    const paramParsers: ParamParsersMap = new Map()
+    const result = generateParamParserCustomType(paramParsers)
+    expect(result).toBe('never')
+  })
+
+  it('returns single quoted parser name for one parser', () => {
+    const paramParsers: ParamParsersMap = new Map([
+      [
+        'date',
+        {
+          name: 'date',
+          typeName: 'Param_date',
+          relativePath: 'parsers/date',
+          absolutePath: '/path/to/parsers/date',
+        },
+      ],
+    ])
+
+    const result = generateParamParserCustomType(paramParsers)
+    expect(result).toBe("'date'")
+  })
+
+  it('returns union of quoted parser names for multiple parsers in alphabetical order on separate lines', () => {
+    const paramParsers: ParamParsersMap = new Map([
+      [
+        'uuid',
+        {
+          name: 'uuid',
+          typeName: 'Param_uuid',
+          relativePath: 'parsers/uuid',
+          absolutePath: '/path/to/parsers/uuid',
+        },
+      ],
+      [
+        'date',
+        {
+          name: 'date',
+          typeName: 'Param_date',
+          relativePath: 'parsers/date',
+          absolutePath: '/path/to/parsers/date',
+        },
+      ],
+    ])
+
+    const result = generateParamParserCustomType(paramParsers)
+    expect(result).toBe("  | 'date'\n  | 'uuid'")
+  })
+
+  it('handles parser names with special characters correctly', () => {
+    const paramParsers: ParamParsersMap = new Map([
+      [
+        'custom-parser',
+        {
+          name: 'custom-parser',
+          typeName: 'Param_custom-parser',
+          relativePath: 'parsers/custom-parser',
+          absolutePath: '/path/to/parsers/custom-parser',
+        },
+      ],
+    ])
+
+    const result = generateParamParserCustomType(paramParsers)
+    expect(result).toBe("'custom-parser'")
+  })
+
+  it('formats multiple parsers with proper indentation for three or more types', () => {
+    const paramParsers: ParamParsersMap = new Map([
+      [
+        'uuid',
+        {
+          name: 'uuid',
+          typeName: 'Param_uuid',
+          relativePath: 'parsers/uuid',
+          absolutePath: '/path/to/parsers/uuid',
+        },
+      ],
+      [
+        'date',
+        {
+          name: 'date',
+          typeName: 'Param_date',
+          relativePath: 'parsers/date',
+          absolutePath: '/path/to/parsers/date',
+        },
+      ],
+      [
+        'slug',
+        {
+          name: 'slug',
+          typeName: 'Param_slug',
+          relativePath: 'parsers/slug',
+          absolutePath: '/path/to/parsers/slug',
+        },
+      ],
+    ])
+
+    const result = generateParamParserCustomType(paramParsers)
+    expect(result).toBe("  | 'date'\n  | 'slug'\n  | 'uuid'")
+  })
+})

src/codegen/generateParamParsers.ts

@@ -87,6 +87,22 @@ export function generateParamParserOptions(
   return ''
 }
 
+export function generateParamParserCustomType(
+  paramParsers: ParamParsersMap
+): string {
+  const parserNames = Array.from(paramParsers.keys()).sort()
+
+  if (parserNames.length === 0) {
+    return 'never'
+  }
+
+  if (parserNames.length === 1) {
+    return `'${parserNames[0]}'`
+  }
+
+  return parserNames.map((name) => `  | '${name}'`).join('\n')
+}
+
 export function generatePathParamsOptions(
   params: TreePathParam[],
   importsMap: ImportsMap,

src/core/context.ts

@@ -25,6 +25,7 @@ import { generateRouteResolver } from '../codegen/generateRouteResolver'
 import { type FSWatcher, watch as fsWatch } from 'chokidar'
 import {
   generateParamParsersTypesDeclarations,
+  generateParamParserCustomType,
   ParamParsersMap,
   warnMissingParamParsers,
 } from '../codegen/generateParamParsers'
@@ -370,6 +371,7 @@ if (import.meta.hot) {
       }),
       paramsTypesDeclaration:
         generateParamParsersTypesDeclarations(paramParsersMap),
+      customParamsType: generateParamParserCustomType(paramParsersMap),
     })
 
     // TODO: parser auto copmlete for definePage