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.21",
     "@vue/language-core": "^3.0.5",
     "ast-walker-scope": "^0.8.2",
@@ -171,6 +172,7 @@
     "@posva/prompts": "^2.4.4",
     "@shikijs/vitepress-twoslash": "3.9.2",
     "@tanstack/vue-query": "^5.85.3",
+    "@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.3",
     "vitest": "^3.2.4",
     "vue": "^3.5.18",
-    "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.5",
     "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