feat: custom param

Author: posva

packages/experiments-playground/src/App.vue

@@ -59,7 +59,13 @@ const queryPage = computed({
     params: <code>{{ route.params }}</code>
     <br />
     <template v-if="queryPage != null">
-      page: <input type="number" v-model.number="queryPage" />
+      page:
+      <input
+        type="number"
+        v-model.number="queryPage"
+        autocomplete="off"
+        data-1p-ignore
+      />
       <br />
     </template>
     meta: <code>{{ route.meta }}</code>

packages/experiments-playground/src/pages/profiles/[userId].vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+</script>
+
+<template>
+  <main>
+    <h2>Details</h2>
+    <p>{{ route.fullPath }}</p>
+    <pre>{{ route.params }}</pre>
+  </main>
+</template>

packages/experiments-playground/src/router/index.ts

@@ -1,17 +1,18 @@
-import { createWebHistory } from 'vue-router'
+import { createWebHistory, type RouteParamValue } from 'vue-router'
 import {
   experimental_createRouter,
   createStaticResolver,
   MatcherPatternPathStatic,
+  MatcherPatternPathCustomParams,
   normalizeRouteRecord,
 } from 'vue-router/experimental'
 import type {
   EXPERIMENTAL_RouteRecordNormalized_Matchable,
   MatcherPatternHash,
   MatcherPatternQuery,
+  EmptyParams,
 } from 'vue-router/experimental'
 import PageHome from '../pages/(home).vue'
-import type { EmptyParams } from 'vue-router/experimental'
 
 // type ExtractMatcherQueryParams<T> =
 //   T extends MatcherPatternQuery<infer P> ? P : never
@@ -134,6 +135,31 @@ const r_nested_a = normalizeRouteRecord({
   path: new MatcherPatternPathStatic('/nested/a'),
 })
 
+const r_profiles_detail = normalizeRouteRecord({
+  name: 'profiles-detail',
+  components: { default: () => import('../pages/profiles/[userId].vue') },
+  parent: r_profiles_layout,
+  path: new MatcherPatternPathCustomParams(
+    /^\/profiles\/(?<userId>[^/]+)$/i,
+    {
+      userId: {
+        parser: {
+          // @ts-expect-error: FIXME: should would with generic class
+          get: (value: string): number => Number(value),
+          // @ts-expect-error: FIXME: should would with generic class
+          set: (value: number): string => String(value),
+        },
+      },
+    },
+    ({ userId }) => {
+      if (typeof userId !== 'number') {
+        throw new Error('userId must be a number')
+      }
+      return `/profiles/${userId}`
+    }
+  ),
+})
+
 export const router = experimental_createRouter({
   history: createWebHistory(),
   resolver: createStaticResolver<EXPERIMENTAL_RouteRecordNormalized_Matchable>([
@@ -142,6 +168,7 @@ export const router = experimental_createRouter({
     r_nested,
     r_nested_a,
     r_profiles_list,
+    r_profiles_detail,
   ]),
 })
 

packages/router/src/experimental/index.ts

@@ -22,6 +22,7 @@ export {
   MatcherPatternPathDynamic,
   MatcherPatternPathStatic,
   MatcherPatternPathStar,
+  MatcherPatternPathCustomParams,
 } from './route-resolver/matchers/matcher-pattern'
 export type {
   MatcherPattern,

packages/router/src/experimental/route-resolver/matchers/matcher-pattern.spec.ts

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest'
 import {
   MatcherPatternPathStatic,
   MatcherPatternPathStar,
-  MatcherPatternPathCustom,
+  MatcherPatternPathCustomParams,
 } from './matcher-pattern'
 import { pathEncoded } from '../resolver-abstract'
 import { invalid } from './errors'
@@ -106,7 +106,7 @@ describe('MatcherPatternPathStar', () => {
 
 describe('MatcherPatternPathCustom', () => {
   it('single param', () => {
-    const pattern = new MatcherPatternPathCustom(
+    const pattern = new MatcherPatternPathCustomParams(
       /^\/teams\/([^/]+?)\/b$/i,
       {
         // all defaults
@@ -133,7 +133,7 @@ describe('MatcherPatternPathCustom', () => {
   })
 
   it('decodes single param', () => {
-    const pattern = new MatcherPatternPathCustom(
+    const pattern = new MatcherPatternPathCustomParams(
       /^\/teams\/([^/]+?)$/i,
       {
         teamId: {},
@@ -150,7 +150,7 @@ describe('MatcherPatternPathCustom', () => {
   })
 
   it('optional param', () => {
-    const pattern = new MatcherPatternPathCustom(
+    const pattern = new MatcherPatternPathCustomParams(
       /^\/teams(?:\/([^/]+?))?\/b$/i,
       {
         teamId: { optional: true },
@@ -172,7 +172,7 @@ describe('MatcherPatternPathCustom', () => {
   })
 
   it('repeatable param', () => {
-    const pattern = new MatcherPatternPathCustom(
+    const pattern = new MatcherPatternPathCustomParams(
       /^\/teams\/(.+?)\/b$/i,
       {
         teamId: { repeat: true },
@@ -196,7 +196,7 @@ describe('MatcherPatternPathCustom', () => {
   })
 
   it('repeatable optional param', () => {
-    const pattern = new MatcherPatternPathCustom(
+    const pattern = new MatcherPatternPathCustomParams(
       /^\/teams(?:\/(.+?))?\/b$/i,
       {
         teamId: { repeat: true, optional: true },

packages/router/src/experimental/route-resolver/matchers/matcher-pattern.ts

@@ -193,30 +193,49 @@ export type ParamsFromParsers<P extends Record<string, ParamParser_Generic>> = {
     : never
 }
 
-/**
- * TODO: it should accept a dict of param parsers for each param and if they are repeatable and optional
- * The object order matters, they get matched in that order
- */
-
-interface MatcherPatternPathDynamicParam<
-  TIn extends string | string[] | null | undefined =
-    | string
-    | string[]
-    | null
-    | undefined,
+interface MatcherPatternPathCustomParamOptions<
+  TIn extends string | string[] | null = string | string[] | null,
   TOut = string | string[] | null,
 > {
   repeat?: boolean
   optional?: boolean
   parser?: Param_GetSet<TIn, TOut>
 }
 
-export class MatcherPatternPathCustom implements MatcherPatternPath {
+export const PARAM_NUMBER = {
+  get: (value: string) => {
+    const num = Number(value)
+    if (Number.isFinite(num)) {
+      return num
+    }
+    throw miss()
+  },
+  set: (value: number) => String(value),
+} satisfies Param_GetSet<string, number>
+
+export const PARAM_NUMBER_OPTIONAL = {
+  get: (value: string | null) =>
+    value == null ? null : PARAM_NUMBER.get(value),
+  set: (value: number | null) =>
+    value != null ? PARAM_NUMBER.set(value) : null,
+} satisfies Param_GetSet<string | null, number | null>
+
+export const PARAM_NUMBER_REPEATABLE = {
+  get: (value: string[]) => value.map(PARAM_NUMBER.get),
+  set: (value: number[]) => value.map(PARAM_NUMBER.set),
+} satisfies Param_GetSet<string[], number[]>
+
+export class MatcherPatternPathCustomParams implements MatcherPatternPath {
   // private paramsKeys: string[]
 
   constructor(
+    // TODO: make this work with named groups and simplify `params` to be an array of the repeat flag
     readonly re: RegExp,
-    readonly params: Record<string, MatcherPatternPathDynamicParam>,
+    readonly params: Record<
+      string,
+      // @ts-expect-error: adapt with generic class
+      MatcherPatternPathCustomParamOptions<unknown, unknown>
+    >,
     readonly build: (params: MatcherParamsFormatted) => string
     // A better version could be using all the parts to join them
     // .e.g ['users', 0, 'profile', 1] -> /users/123/profile/456
@@ -236,7 +255,7 @@ export class MatcherPatternPathCustom implements MatcherPatternPath {
     for (const paramName in this.params) {
       const currentParam = this.params[paramName]
       // an optional group in the regexp will return undefined
-      const currentMatch = match[i++] as string | undefined
+      const currentMatch = (match[i++] as string | undefined) ?? null
       if (__DEV__ && !currentParam.optional && !currentMatch) {
         warn(
           `Unexpected undefined value for param "${paramName}". Regexp: ${String(this.re)}. path: "${path}". This is likely a bug.`
@@ -251,9 +270,7 @@ export class MatcherPatternPathCustom implements MatcherPatternPath {
           )
         : decode(currentMatch)
 
-      console.log(paramName, currentParam, value)
-
-      params[paramName] = (currentParam.parser?.get || (v => v ?? null))(value)
+      params[paramName] = (currentParam.parser?.get || (v => v))(value)
     }
 
     if (__DEV__ && i !== match.length) {