feat: allow string as a param parser for convenience

Author: posva

packages/router/src/experimental/runtime.ts

@@ -113,6 +113,7 @@ export interface DefinePage<FilePath extends string = string> extends Partial<
 export interface ParamParsers_Native {
   int: { type: number }
   bool: { type: boolean }
+  string: { type: string }
 }
 
 export type ParamParserType_Native = keyof ParamParsers_Native

packages/router/src/unplugin/codegen/generateParamParsers.spec.ts

@@ -40,6 +40,7 @@ describe('warnMissingParamParsers', () => {
     const tree = new PrefixTree(DEFAULT_OPTIONS)
     tree.insert('users/[id=int]', 'users/[id=int].vue')
     tree.insert('posts/[active=bool]', 'posts/[active=bool].vue')
+    tree.insert('blog/[slug=string]', 'blog/[slug=string].vue')
 
     const paramParsers: ParamParsersMap = new Map()
 
@@ -95,6 +96,7 @@ describe('collectMissingParamParsers', () => {
     const tree = new PrefixTree(DEFAULT_OPTIONS)
     tree.insert('users/[id=int]', 'users/[id=int].vue')
     tree.insert('posts/[active=bool]', 'posts/[active=bool].vue')
+    tree.insert('blog/[slug=string]', 'blog/[slug=string].vue')
 
     const paramParsers: ParamParsersMap = new Map()
 
@@ -344,11 +346,19 @@ describe('generateParamsTypes', () => {
         isSplat: false,
         parser: 'bool',
       },
+      {
+        paramName: 'slug',
+        modifier: '',
+        optional: false,
+        repeatable: false,
+        isSplat: false,
+        parser: 'string',
+      },
     ]
     const paramParsers: ParamParsersMap = new Map()
 
     const result = generateParamsTypes(params, paramParsers)
-    expect(result).toEqual(['number', 'boolean'])
+    expect(result).toEqual(['number', 'boolean', 'string'])
   })
 
   it('handles mixed params with and without parsers', () => {
@@ -478,6 +488,49 @@ describe('generateParamParserOptions', () => {
     )
   })
 
+  it("returns empty string for native 'string' parser (treated as no parser)", () => {
+    const param: TreePathParam = {
+      paramName: 'slug',
+      modifier: '',
+      optional: false,
+      repeatable: false,
+      isSplat: false,
+      parser: 'string',
+    }
+    const importsMap = new ImportsMap()
+    const paramParsers: ParamParsersMap = new Map()
+
+    const result = generateParamParserOptions(param, importsMap, paramParsers)
+    expect(result).toBe('')
+    expect(importsMap.toString()).not.toContain('PARAM_PARSER_STRING')
+  })
+
+  it("lets custom parser named 'string' override the native default", () => {
+    const param: TreePathParam = {
+      paramName: 'slug',
+      modifier: '',
+      optional: false,
+      repeatable: false,
+      isSplat: false,
+      parser: 'string',
+    }
+    const importsMap = new ImportsMap()
+    const paramParsers: ParamParsersMap = new Map([
+      [
+        'string',
+        {
+          name: 'string',
+          typeName: 'Param_string',
+          relativePath: 'parsers/string',
+          absolutePath: '/path/to/parsers/string',
+        },
+      ],
+    ])
+
+    const result = generateParamParserOptions(param, importsMap, paramParsers)
+    expect(result).toBe('_normalized_PARAM_PARSER__string')
+  })
+
   it('returns empty string for missing parser', () => {
     const param: TreePathParam = {
       paramName: 'id',

packages/router/src/unplugin/codegen/generateParamParsers.ts

@@ -38,11 +38,12 @@ export type ParamParsersMap = Map<
 >
 
 // just for type strictness
-const _NATIVE_PARAM_PARSERS = ['int', 'bool'] as const
+const _NATIVE_PARAM_PARSERS = ['int', 'bool', 'string'] as const
 const NATIVE_PARAM_PARSERS = _NATIVE_PARAM_PARSERS as readonly string[]
 const NATIVE_PARAM_PARSERS_TYPES = {
   int: 'number',
   bool: 'boolean',
+  string: 'string',
 } satisfies Record<(typeof _NATIVE_PARAM_PARSERS)[number], string>
 
 const RAW_PARAM_PARSER_DEFINER = 'defineParamParserRaw'
@@ -337,6 +338,10 @@ export function generateParamParserOptions(
   if (paramParsers.has(param.parser)) {
     const { name } = paramParsers.get(param.parser)!
     return `_normalized_PARAM_PARSER__${name}`
+    // 'string' is the implicit default but it's part of NATIVE_PARAM_PARSERS
+    // so we need to skip it here
+  } else if (param.parser === 'string') {
+    return ''
   } else if (NATIVE_PARAM_PARSERS.includes(param.parser)) {
     const varName = `PARAM_PARSER_${param.parser.toUpperCase()}`
     importsMap.add('vue-router/experimental', varName)

packages/router/src/unplugin/codegen/generateRouteParams.spec.ts

@@ -86,6 +86,28 @@ describe('EXPERIMENTAL_generateRouteParams', () => {
       const result = EXPERIMENTAL_generateRouteParams(node, [null], false)
       expect(result).toBe('{ id: string | null }')
     })
+
+    it("native 'string' type matches no-parser output for required path", () => {
+      const node = createTreeWithParam('[id]')
+      const nullResult = EXPERIMENTAL_generateRouteParams(node, [null], false)
+      const stringResult = EXPERIMENTAL_generateRouteParams(
+        node,
+        ['string'],
+        false
+      )
+      expect(stringResult).toBe(nullResult)
+    })
+
+    it("native 'string' type matches no-parser output for optional path", () => {
+      const node = createTreeWithParam('[[id]]')
+      const nullResult = EXPERIMENTAL_generateRouteParams(node, [null], false)
+      const stringResult = EXPERIMENTAL_generateRouteParams(
+        node,
+        ['string'],
+        false
+      )
+      expect(stringResult).toBe(nullResult)
+    })
   })
 
   describe('raw param parsers', () => {

packages/router/src/unplugin/codegen/generateRouteResolver.spec.ts

@@ -107,6 +107,37 @@ describe('generateRouteRecordQuery', () => {
     `)
   })
 
+  it("emits identical query code for parser: 'string' and no parser", () => {
+    const treeNone = new PrefixTree(DEFAULT_OPTIONS)
+    const nodeNone = treeNone.insert('a', 'a.vue')
+    nodeNone.value.setEditOverride('params', {
+      query: { search: {} },
+    })
+
+    const treeString = new PrefixTree(DEFAULT_OPTIONS)
+    const nodeString = treeString.insert('a', 'a.vue')
+    nodeString.value.setEditOverride('params', {
+      query: { search: { parser: 'string' } },
+    })
+
+    const noneImports = new ImportsMap()
+    const stringImports = new ImportsMap()
+
+    const noneCode = generateRouteRecordQuery({
+      importsMap: noneImports,
+      node: nodeNone,
+      paramParsersMap: new Map(),
+    })
+    const stringCode = generateRouteRecordQuery({
+      importsMap: stringImports,
+      node: nodeString,
+      paramParsersMap: new Map(),
+    })
+
+    expect(stringCode).toBe(noneCode)
+    expect(stringImports.toString()).toBe(noneImports.toString())
+  })
+
   it('generates query property with multiple query params', () => {
     const node = new PrefixTree(DEFAULT_OPTIONS).insert('a', 'a.vue')
     node.value.setEditOverride('params', {
@@ -371,6 +402,37 @@ describe('generateRouteRecord', () => {
       })"
     `)
   })
+
+  it('emits identical path code for [id=string] and [id]', () => {
+    const treeNone = new PrefixTree(DEFAULT_OPTIONS)
+    const treeString = new PrefixTree(DEFAULT_OPTIONS)
+
+    const noneImports = new ImportsMap()
+    const stringImports = new ImportsMap()
+
+    const noneCode = generateRouteRecord({
+      node: treeNone.insert('p/[id]', 'p/[id].vue'),
+      parentVar: null,
+      parentNode: null,
+      state: { id: 0, matchableRecords: [] },
+      options: DEFAULT_OPTIONS,
+      importsMap: noneImports,
+      paramParsersMap: new Map(),
+    })
+    const stringCode = generateRouteRecord({
+      node: treeString.insert('p/[id=string]', 'p/[id=string].vue'),
+      parentVar: null,
+      parentNode: null,
+      state: { id: 0, matchableRecords: [] },
+      options: DEFAULT_OPTIONS,
+      importsMap: stringImports,
+      paramParsersMap: new Map(),
+    })
+
+    // file paths differ between fixtures; align them before comparison
+    expect(stringCode.replace(/\[id=string\]/g, '[id]')).toBe(noneCode)
+    expect(stringImports.toString()).toBe(noneImports.toString())
+  })
 })
 
 describe('generateRouteResolver', () => {