fix: pass null to splat params

Author: posva

package.json

@@ -139,6 +139,7 @@
     ]
   },
   "dependencies": {
+    "@babel/generator": "^7.28.3",
     "@vue-macros/common": "3.0.0-beta.23",
     "@vue/language-core": "^3.0.7",
     "ast-walker-scope": "^0.8.2",
@@ -171,6 +172,7 @@
     "@posva/prompts": "^2.4.4",
     "@shikijs/vitepress-twoslash": "3.12.2",
     "@tanstack/vue-query": "^5.87.4",
+    "@types/babel__generator": "^7.27.0",
     "@types/node": "^24.3.0",
     "@types/picomatch": "^4.0.2",
     "@vitest/coverage-v8": "^3.2.4",
@@ -203,7 +205,7 @@
     "vitepress-plugin-llms": "^1.7.5",
     "vitest": "^3.2.4",
     "vue": "^3.5.21",
-    "vue-router": "https://pkg.pr.new/vue-router@be1679c",
+    "vue-router": "https://pkg.pr.new/vue-router@ecd1303",
     "vue-router-mock": "^2.0.0",
     "vue-tsc": "^3.0.7",
     "vuefire": "^3.2.2",

playground-experimental/package.json

@@ -18,6 +18,6 @@
     "mande": "^2.0.9",
     "pinia": "^3.0.3",
     "vue": "^3.5.18",
-    "vue-router": "https://pkg.pr.new/vue-router@be1679c"
+    "vue-router": "https://pkg.pr.new/vue-router@ecd1303"
   }
 }

playground-experimental/src/pages/[...path].vue

@@ -2,6 +2,7 @@
 import doc from '../main.ts?raw'
 
 const route = useRoute()
+const router = useRouter()
 route.params.path
 
 console.log('typeof', typeof route.params.active)
@@ -22,13 +23,30 @@ definePage({
       page: {
         parser: 'int',
         default: 1,
-        format: 'array',
+        format: 'value',
       },
-      other: 'bool',
-      active: {
+      other: {
         parser: 'bool',
         default: false,
       },
+      active: {
+        parser: 'bool',
+        default: true,
+      },
+
+      multi: {
+        format: 'array',
+      },
+
+      req: {
+        parser: 'int',
+        default: -1,
+      },
+
+      when: {
+        parser: 'date',
+        default: () => new Date(),
+      },
     },
   },
 })
@@ -39,7 +57,7 @@ definePage({
     <h1>Not Found</h1>
 
     <pre>{{ $route.params }}</pre>
-    <pre>{{ $route.params }}</pre>
+    <pre>{{ $route.query }}</pre>
     <pre>{{ $route.meta }}</pre>
   </main>
 </template>

playground-experimental/src/pages/events/repeat/[when=date]+.vue

@@ -0,0 +1,9 @@
+<script lang="ts" setup>
+const route = useRoute()
+console.log(route.params.when)
+</script>
+
+<template>
+  <h1>Date</h1>
+  <pre>{{ typeof route.params.when }} - {{ route.params.when }}</pre>
+</template>

playground-experimental/src/pages/users/[userId=int].vue

@@ -9,7 +9,9 @@ definePage({
   // path: '/users/:userId',
   params: {
     query: {
-      anyParam: {},
+      anyParam: {
+        default: '',
+      },
       page: {
         parser: 'int',
         default: 1,

playground-experimental/src/params/date.ts

@@ -1,18 +1,31 @@
-import { type ParamParser, miss } from 'vue-router/experimental'
+import { defineParamParser, miss } from 'vue-router/experimental'
 
-export const parser: ParamParser<Date, string> = {
-  get: (value: string): Date => {
-    const asDate = new Date(value)
-    if (Number.isNaN(asDate.getTime())) {
-      throw miss(`Invalid date: "${value}"`)
-    }
+function toDate(value: string): Date {
+  const asDate = new Date(value)
+  if (Number.isNaN(asDate.getTime())) {
+    throw miss(`Invalid date: "${value}"`)
+  }
 
-    return asDate
-  },
-  set: (value: Date): string =>
+  return asDate
+}
+
+function toString(value: Date): string {
+  return (
     value
       .toISOString()
       // allows keeping simple dates like 2023-10-01 without time
       // while still being able to parse full dates like 2023-10-01T12:00:00.000Z
-      .replace('T00:00:00.000Z', ''),
+      .replace('T00:00:00.000Z', '')
+  )
 }
+
+export const parser = defineParamParser({
+  get: (value: string | string[] | null) => {
+    if (!value) {
+      throw miss()
+    }
+    return Array.isArray(value) ? value.map(toDate) : toDate(value)
+  },
+  set: (value: Date | Date[]) =>
+    Array.isArray(value) ? value.map(toString) : toString(value),
+})

playground-experimental/typed-router.d.ts

@@ -22,20 +22,21 @@ declare module 'vue-router/auto-routes' {
    */
   export interface RouteNamedMap {
     '/(home)': RouteRecordInfo<'/(home)', '/', Record<never, never>, Record<never, never>>,
-    'not-found': RouteRecordInfo<'not-found', '/:path(.*)', { path: string, page?: number, other: boolean, active?: boolean }, { path: string, page: number, other: boolean, active: boolean }>,
+    'not-found': RouteRecordInfo<'not-found', '/:path(.*)', { path: string, page?: number, other?: boolean, active?: boolean, multi: string[], req?: number, when?: Exclude<Param_date, unknown[]> }, { path: string, page: number, other: boolean, active: boolean, multi: string[], req: number, when: Exclude<Param_date, unknown[]> }>,
     '/a.[b].c.[d]': RouteRecordInfo<'/a.[b].c.[d]', '/a/:b/c/:d', { b: string, d: string }, { b: string, d: string }>,
     '/b': RouteRecordInfo<'/b', '/b', Record<never, never>, Record<never, never>>,
-    '/blog/[slug]+': RouteRecordInfo<'/blog/[slug]+', '/blog/:slug+', { slug: string[] }, { slug: [string, ...string[]] }>,
+    '/blog/[slug]+': RouteRecordInfo<'/blog/[slug]+', '/blog/:slug+', { slug: string[] }, { slug: string[] }>,
     '/blog/[[slugOptional]]+': RouteRecordInfo<'/blog/[[slugOptional]]+', '/blog/:slugOptional*', { slugOptional?: string[] }, { slugOptional: string[] }>,
     '/blog/info/(info)': RouteRecordInfo<'/blog/info/(info)', '/blog/info', Record<never, never>, Record<never, never>>,
     '/blog/info/[[section]]': RouteRecordInfo<'/blog/info/[[section]]', '/blog/info/:section?', { section?: string | null }, { section: string | null }>,
-    '/events/[when=date]': RouteRecordInfo<'/events/[when=date]', '/events/:when', { when: string }, { when: string }>,
+    '/events/[when=date]': RouteRecordInfo<'/events/[when=date]', '/events/:when', { when: Exclude<Param_date, unknown[]> }, { when: Exclude<Param_date, unknown[]> }>,
+    '/events/repeat/[when=date]+': RouteRecordInfo<'/events/repeat/[when=date]+', '/events/repeat/:when+', { when: Extract<Param_date, unknown[]> }, { when: Extract<Param_date, unknown[]> }>,
     '/manually-added': RouteRecordInfo<'/manually-added', '/manually-added', Record<never, never>, Record<never, never>>,
     '/tests/[[optional]]/end': RouteRecordInfo<'/tests/[[optional]]/end', '/tests/:optional?/end', { optional?: string | null }, { optional: string | null }>,
     '/u[name]': RouteRecordInfo<'/u[name]', '/u:name', { name: string }, { name: string }, '/u[name]/24' | '/u[name]/[userId=int]'>,
-    '/u[name]/[userId=int]': RouteRecordInfo<'/u[name]/[userId=int]', '/u:name/:userId', { name: string, userId: string }, { name: string, userId: string }>,
+    '/u[name]/[userId=int]': RouteRecordInfo<'/u[name]/[userId=int]', '/u:name/:userId', { name: string, userId: number }, { name: string, userId: number }>,
     '/u[name]/24': RouteRecordInfo<'/u[name]/24', '/u:name/24', { name: string }, { name: string }>,
-    '/users/[userId=int]': RouteRecordInfo<'/users/[userId=int]', '/users/:userId', { userId: string, anyParam: null, page?: number }, { userId: string, anyParam: null, page: number }>,
+    '/users/[userId=int]': RouteRecordInfo<'/users/[userId=int]', '/users/:userId', { userId: number, anyParam?: string, page?: number }, { userId: number, anyParam: string, page: number }>,
     '/users/sub-[first]-[second]': RouteRecordInfo<'/users/sub-[first]-[second]', '/users/sub-:first-:second', { first: string, second: string }, { first: string, second: string }>,
   }
 
@@ -86,6 +87,10 @@ declare module 'vue-router/auto-routes' {
       routes: '/events/[when=date]'
       views: never
     }
+    'src/pages/events/repeat/[when=date]+.vue': {
+      routes: '/events/repeat/[when=date]+'
+      views: never
+    }
     'src/page-outside.vue': {
       routes: '/manually-added'
       views: never

pnpm-lock.yaml

@@ -1,5 +1,9 @@
 import { TreeNode } from '../core/tree'
-import { isTreeParamOptional } from '../core/treeNodeValue'
+import {
+  isTreeParamOptional,
+  isTreeParamRepeatable,
+  isTreePathParam,
+} from '../core/treeNodeValue'
 
 export function generateRouteParams(node: TreeNode, isRaw: boolean): string {
   // node.pathParams is a getter so we compute it once
@@ -33,19 +37,26 @@ export function EXPERIMENTAL_generateRouteParams(
   return nodeParams.length > 0
     ? `{ ${nodeParams
         .map((param, i) => {
+          const isOptional = isTreeParamOptional(param)
+          const isRepeatable = isTreeParamRepeatable(param)
+
           const type = types[i]
-          return `${param.paramName}${
-            isRaw && isTreeParamOptional(param) ? '?' : ''
-          }: ${
-            'modifier' in param
-              ? param.repeatable
-                ? param.optional || isRaw // in raw mode, the tuple version is annoying to pass
-                  ? 'string[]'
-                  : '[string, ...string[]]'
-                : param.optional
-                  ? 'string | null'
-                  : 'string'
-              : type
+
+          let extractedType: string
+
+          if (type?.startsWith('Param_')) {
+            extractedType = `${isRepeatable ? 'Extract' : 'Exclude'}<${type}, unknown[]>`
+          } else {
+            extractedType = `${type ?? 'string'}${isRepeatable ? '[]' : ''}`
+          }
+
+          extractedType +=
+            isTreePathParam(param) && isOptional && !isRepeatable
+              ? ' | null'
+              : ''
+
+          return `${param.paramName}${isRaw && isOptional ? '?' : ''}: ${
+            extractedType
           }`
         })
         .join(', ')} }`