feat(client): $path (#4636)

* init

* tests

* fix leading slash

* refactor(): reuse mergePath

* ci: apply automated fixes

* apply suggested patch

* support an edge case

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Yusuke Wada <yusuke@kamawada.com>

Author: 3 people

src/client/client.test.ts

@@ -424,6 +424,38 @@ describe('Basic - $url()', () => {
       }).href
     ).toBe('http://fake/content/search?page=123&limit=20')
   })
+
+  it.each(['http://fake', 'http://fake/', 'http://fake//', 'http://fake/api'])(
+    'Should return a correct path via $path() regardless of %s',
+    async (baseURL) => {
+      const client = hc<typeof app>(baseURL)
+      expect(client.index.$path()).toBe('/')
+      expect(
+        client.index.$path({
+          query: {
+            page: '123',
+            limit: '20',
+          },
+        })
+      ).toBe('/?page=123&limit=20')
+      expect(client.api.$path()).toBe('/api')
+      expect(
+        client.api.posts[':id'].$path({
+          param: {
+            id: '123',
+          },
+        })
+      ).toBe('/api/posts/123')
+      expect(
+        client.content.search.$path({
+          query: {
+            page: '123',
+            limit: '20',
+          },
+        })
+      ).toBe('/content/search?page=123&limit=20')
+    }
+  )
 })
 
 describe('Form - Multiple Values', () => {
@@ -760,6 +792,10 @@ describe('Merge path with `app.route()`', () => {
       const url = client.api.bar.$url()
       expect(url.href).toBe('http://localhost/api/bar')
     })
+    it('Should work with $path', async () => {
+      const path = client.api.bar.$path()
+      expect(path).toBe('/api/bar')
+    })
   })
 
   describe('With a blank path', () => {
@@ -780,6 +816,35 @@ describe('Merge path with `app.route()`', () => {
       const url = client.api.v1.me.$url()
       expectTypeOf<URL>(url)
       expect(url.href).toBe('http://localhost/api/v1/me')
+
+      const path = client.api.v1.me.$path()
+      expectTypeOf<'/api/v1/me'>(path)
+      expect(path).toBe('/api/v1/me')
+    })
+  })
+
+  describe('With endpoint pathname', () => {
+    const app = new Hono().basePath('/api/v1')
+    const routes = app.route(
+      '/me',
+      new Hono().route(
+        '',
+        new Hono().get('', async (c) => {
+          return c.json({ name: 'hono' })
+        })
+      )
+    )
+    const client = hc<typeof routes>('http://localhost/proxy')
+
+    it('Should infer paths correctly', async () => {
+      // Should not a throw type error
+      const url = client.api.v1.me.$url()
+      expectTypeOf<URL>(url)
+      expect(url.href).toBe('http://localhost/proxy/api/v1/me')
+
+      const path = client.api.v1.me.$path()
+      expectTypeOf<'/api/v1/me'>(path)
+      expect(path).toBe('/api/v1/me')
     })
   })
 })
@@ -1055,40 +1120,43 @@ describe('Infer the response types from middlewares', () => {
   })
 })
 
-describe('$url() with a param option', () => {
+const pathname = <T extends URL | string>(value: T): string =>
+  value instanceof URL ? value.pathname : value
+
+describe.each(['$path', '$url'] as const)('%s() with a param option', (cmd) => {
   const app = new Hono()
     .get('/posts/:id/comments', (c) => c.json({ ok: true }))
     .get('/something/:firstId/:secondId/:version?', (c) => c.json({ ok: true }))
   type AppType = typeof app
   const client = hc<AppType>('http://localhost')
 
-  it('Should return the correct path - /posts/123/comments', async () => {
-    const url = client.posts[':id'].comments.$url({
+  it('Should return the correct url path - /posts/123/comments', async () => {
+    const value = client.posts[':id'].comments[cmd]({
       param: {
         id: '123',
       },
     })
-    expect(url.pathname).toBe('/posts/123/comments')
+    expect(pathname(value)).toBe('/posts/123/comments')
   })
 
   it('Should return the correct path - /posts/:id/comments', async () => {
-    const url = client.posts[':id'].comments.$url()
-    expect(url.pathname).toBe('/posts/:id/comments')
+    const value = client.posts[':id'].comments[cmd]()
+    expect(pathname(value)).toBe('/posts/:id/comments')
   })
 
   it('Should return the correct path - /something/123/456', async () => {
-    const url = client.something[':firstId'][':secondId'][':version?'].$url({
+    const value = client.something[':firstId'][':secondId'][':version?'][cmd]({
       param: {
         firstId: '123',
         secondId: '456',
         version: undefined,
       },
     })
-    expect(url.pathname).toBe('/something/123/456')
+    expect(pathname(value)).toBe('/something/123/456')
   })
 })
 
-describe('$url() with a query option', () => {
+describe('$url() / $path() with a query option', () => {
   const app = new Hono().get(
     '/posts',
     validator('query', () => {
@@ -1106,6 +1174,13 @@ describe('$url() with a query option', () => {
       },
     })
     expect(url.search).toBe('?filter=test')
+
+    const path = client.posts.$path({
+      query: {
+        filter: 'test',
+      },
+    })
+    expect(path).toBe('/posts?filter=test')
   })
 })
 

src/client/client.ts

@@ -168,7 +168,7 @@ export const hc = <T extends Hono<any, any, any>, Prefix extends string = string
 
     const path = parts.join('/')
     const url = mergePath(baseUrl, path)
-    if (method === 'url') {
+    if (method === 'url' || method === 'path') {
       let result = url
       if (opts.args[0]) {
         if (opts.args[0].param) {
@@ -179,7 +179,10 @@ export const hc = <T extends Hono<any, any, any>, Prefix extends string = string
         }
       }
       result = removeIndexString(result)
-      return new URL(result)
+      if (method === 'url') {
+        return new URL(result)
+      }
+      return result.slice(baseUrl.replace(/\/+$/, '').length).replace(/^\/?/, '/')
     }
     if (method === 'ws') {
       const webSocketUrl = replaceUrlProtocol(

src/client/types.test.ts

@@ -35,12 +35,14 @@ describe('without the leading slash', () => {
   it('`foo` should have `$get`', () => {
     expectTypeOf(client.foo).toHaveProperty('$get')
     expectTypeOf(client.foo.$url()).toEqualTypeOf<TypedURL<'http:', 'localhost', '', '/foo', ''>>()
+    expectTypeOf(client.foo.$path()).toEqualTypeOf<'/foo'>()
   })
   it('`foo.bar` should not have `$get`', () => {
     expectTypeOf(client.foo.bar).toHaveProperty('$get')
     expectTypeOf(client.foo.bar.$url()).toEqualTypeOf<
       TypedURL<'http:', 'localhost', '', '/foo/bar', ''>
     >()
+    expectTypeOf(client.foo.bar.$path()).toEqualTypeOf<'/foo/bar'>()
   })
   it('`foo[":id"].baz` should have `$get`', () => {
     expectTypeOf(client.foo[':id'].baz).toHaveProperty('$get')
@@ -58,6 +60,19 @@ describe('without the leading slash', () => {
         query: { q: 'hono' },
       })
     ).toEqualTypeOf<TypedURL<'http:', 'localhost', '', '/foo/123/baz', `?${string}`>>()
+
+    expectTypeOf(client.foo[':id'].baz.$path()).toEqualTypeOf<'/foo/:id/baz'>()
+    expectTypeOf(
+      client.foo[':id'].baz.$path({
+        param: { id: '123' },
+      })
+    ).toEqualTypeOf<'/foo/123/baz'>()
+    expectTypeOf(
+      client.foo[':id'].baz.$path({
+        param: { id: '123' },
+        query: { q: 'hono' },
+      })
+    ).toEqualTypeOf<`/foo/123/baz?${string}`>()
   })
 })
 
@@ -110,3 +125,21 @@ describe('app.all()', () => {
     expectTypeOf(res.json()).resolves.toEqualTypeOf<{ msg: string }>()
   })
 })
+
+describe('with base URL pathname', () => {
+  const app = new Hono()
+    .get('foo', (c) => c.json({}))
+    .get('foo/bar', (c) => c.json({}))
+    .get('foo/:id/baz', (c) => c.json({}))
+  const client = hc<typeof app, 'http://localhost/api'>('http://localhost/api')
+  it('$path', () => {
+    expectTypeOf(client.foo.$path()).toEqualTypeOf<'/foo'>()
+    expectTypeOf(client.foo.bar.$path()).toEqualTypeOf<'/foo/bar'>()
+    expectTypeOf(
+      client.foo[':id'].baz.$path({
+        param: { id: '123' },
+        query: { q: 'hono' },
+      })
+    ).toEqualTypeOf<`/foo/123/baz?${string}`>()
+  })
+})

src/client/types.ts

@@ -94,6 +94,21 @@ export type ClientRequest<Prefix extends string, Path extends string, S extends
   >(
     arg?: Arg
   ) => HonoURL<Prefix, Path, Arg>
+  $path: <
+    const Arg extends
+      | (S[keyof S] extends { input: infer R }
+          ? R extends { param: infer P }
+            ? R extends { query: infer Q }
+              ? { param: P; query: Q }
+              : { param: P }
+            : R extends { query: infer Q }
+              ? { query: Q }
+              : {}
+          : {})
+      | undefined = undefined,
+  >(
+    arg?: Arg
+  ) => BuildPath<Path, Arg>
 } & (S['$get'] extends { outputFormat: 'ws' }
     ? S['$get'] extends { input: infer I }
       ? {
@@ -146,6 +161,8 @@ type BuildPathname<P extends string, Arg> = Arg extends { param: infer Param }
   ? `${ApplyParam<TrimStartSlash<P>, Param>}`
   : `/${TrimStartSlash<P>}`
 
+type BuildPath<P extends string, Arg> = `${BuildPathname<P, Arg>}${BuildSearch<Arg, 'query'>}`
+
 type BuildTypedURL<
   Protocol extends string,
   Host extends string,