feat(router): support partial transform (#4426)

alexchexes · antfu · web-flow · commit bba3f3271be5 · 2025-01-02T15:38:30.000+08:00
Co-authored-by: Anthony Fu &lt;github@antfu.me&gt;
diff --git a/packages/router/_types.ts b/packages/router/_types.ts
@@ -26,10 +26,13 @@ export interface ReactiveRouteOptions {
 
 export interface ReactiveRouteOptionsWithTransform<V, R> extends ReactiveRouteOptions {
   /**
-   * Function to transform data before return
+   * Function to transform data before return, or an object with one or both functions:
+   * `get` to transform data before returning, and `set` to transform data before setting
    */
-  transform?: ((val: V) => R) | {
-    get: (value: V) => R
-    set: (value: R) => V
-  }
+  transform?:
+    | ((val: V) => R)
+    | ({
+      get?: (value: V) => R
+      set?: (value: R) => V
+    })
 }
diff --git a/packages/router/useRouteParams/index.test.ts b/packages/router/useRouteParams/index.test.ts
@@ -65,6 +65,44 @@ describe('useRouteParams', () => {
     expect(object.value).toEqual({ foo: 'baz' })
   })
 
+  it('should handle transform with only get', async () => {
+    let route = getRoute({
+      search: 'VUE3',
+    })
+    const router = { replace: (r: any) => route = r } as any
+
+    const search = useRouteParams('search', undefined, {
+      transform: {
+        get: (value: string) => value.toLowerCase(),
+      },
+      router,
+      route,
+    })
+
+    expect(search.value).toBe('vue3')
+    expect(route.params.search).toBe('VUE3')
+  })
+
+  it('should handle transform with only set', async () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    const search = useRouteParams('search', undefined, {
+      transform: {
+        set: (value: string) => value.toLowerCase(),
+      },
+      router,
+      route,
+    })
+
+    search.value = 'VUE3'
+    expect(search.value).toBe('vue3')
+
+    await nextTick()
+
+    expect(route.params.search).toBe('vue3')
+  })
+
   it('should re-evaluate the value immediately', () => {
     let route = getRoute()
     const router = { replace: (r: any) => route = r } as any
diff --git a/packages/router/useRouteParams/index.ts b/packages/router/useRouteParams/index.ts
@@ -36,8 +36,18 @@ export function useRouteParams<
     transform,
   } = options
 
-  const transformGet = transform && 'get' in transform ? transform.get : transform ?? ((value: T) => value as any as K)
-  const transformSet = transform && 'set' in transform ? transform.set : (value: K) => value as any as T
+  let transformGet = (value: T) => value as unknown as K
+  let transformSet = (value: K) => value as unknown as T
+
+  if (typeof transform === 'function') {
+    transformGet = transform
+  }
+  else if (transform) {
+    if (transform.get)
+      transformGet = transform.get
+    if (transform.set)
+      transformSet = transform.set
+  }
 
   if (!_queue.has(router))
     _queue.set(router, new Map())
diff --git a/packages/router/useRouteQuery/index.test.ts b/packages/router/useRouteQuery/index.test.ts
@@ -63,6 +63,44 @@ describe('useRouteQuery', () => {
     expect(object.value).toEqual({ foo: 'baz' })
   })
 
+  it('should handle transform with only get', async () => {
+    let route = getRoute({
+      search: 'VUE3',
+    })
+    const router = { replace: (r: any) => route = r } as any
+
+    const search = useRouteQuery('search', undefined, {
+      transform: {
+        get: (value: string) => value.toLowerCase(),
+      },
+      router,
+      route,
+    })
+
+    expect(search.value).toBe('vue3')
+    expect(route.query.search).toBe('VUE3')
+  })
+
+  it('should handle transform with only set', async () => {
+    let route = getRoute()
+    const router = { replace: (r: any) => route = r } as any
+
+    const search = useRouteQuery('search', undefined, {
+      transform: {
+        set: (value: string) => value.toLowerCase(),
+      },
+      router,
+      route,
+    })
+
+    search.value = 'VUE3'
+    expect(search.value).toBe('vue3')
+
+    await nextTick()
+
+    expect(route.query.search).toBe('vue3')
+  })
+
   it('should re-evaluate the value immediately', () => {
     let route = getRoute({
       search: 'vue3',
diff --git a/packages/router/useRouteQuery/index.ts b/packages/router/useRouteQuery/index.ts
@@ -36,8 +36,18 @@ export function useRouteQuery<
     transform,
   } = options
 
-  const transformGet = transform && 'get' in transform ? transform.get : transform ?? ((value: T) => value as any as K)
-  const transformSet = transform && 'set' in transform ? transform.set : (value: K) => value as any as T
+  let transformGet = (value: T) => value as unknown as K
+  let transformSet = (value: K) => value as unknown as T
+
+  if (typeof transform === 'function') {
+    transformGet = transform
+  }
+  else if (transform) {
+    if (transform.get)
+      transformGet = transform.get
+    if (transform.set)
+      transformSet = transform.set
+  }
 
   if (!_queue.has(router))
     _queue.set(router, new Map())
