Expose more information from hono/client proxy to easier integrate in client side query libraries

[Meess]

To make a proper wrapper for e.g. @tanstack/react-query (or ) it would be ideal to access over the following information:

• clean path (without param arguments filled in)
  • Can be used as queryKey, and easy invalidate client-side cache for all data from this endpoint
• path (with param arguments filled in)
  • Can be used as queryKey, and to invalidate the data from this specific endpoint with params filled in
• query function
  • To fetch the eventual data, and to infer the input and output type from
  • (not for now but future, type inference for 2xx response and error responses, e.g. inferErrorResponseType, inferOkReponseType)
• arguments
  • Could possibly be used as queryKey input

Currently all of the above are exposed ( clean path: .$url(), path, path .$url({params: {...}}, query function) but quite tedious to use in a wrapper function as easy input as all are proxies. e.g. if we make a useEndpoint hook you don't want to input all three functions separately (e.g. see https://github.com/orgs/honojs/discussions/3075). So an additional function (next to .$get, .$post ... .$url ) that returns all needed information would be very helpful, and as this is not the hono/core I expect there is more room for DX expanding the interface.

Business logic wise all information is already present in /hono/src/client/client.ts, but I'm not sure about the syntax for it as it should be descriptive and straight forward, but not confusing / interface pollution. Things I thought about:

• add a .$meta() which returns all required data. Not sure as we also want to know the method, so would it the become: honoclient.some.path.$get.$meta()? Then capture the $meta, set const meta = True, and then call .$get(). Although that might be confusing due to .$get being used as object and as function
• create hono/metaClient, almost identical to hono, but instead of .$get, $post... etc returning a promise it returns the required information to make a proper wrapper. This can be a simple < 50 lines of code version of "hc" (no need for "toString", "valueOf") and call it metaHc, so you could do const warpperClient = metaHc<app>.

This would save a lot of boiler plate and makes it very smooth to use consume the API in the client (in my case React, but this is not specific to react as all other frontend frameworks will also have the data needed to build their own query client wrapper).

[Meess]

As mentioned the business logic for it would be quite easy, but can't figure out how to properply type the response...:

import type { Hono } from 'hono'

export const customHc = <T extends Hono<any, any, any>>(
    baseUrl: string,
    options?: ClientRequestOptions,
) =>
    createProxy(function proxyCallback(opts) {
        const parts = [...opts.path]

        let method = ''
        if (/^\$/.test(parts[parts.length - 1])) {
            const last = parts.pop()
            if (last) {
                method = last.replace(/^\$/, '')
            }
        }

        const path = parts.join('/')
        const urlRaw = mergePath(baseUrl, path)
        const url = replaceUrlParam(urlRaw, opts.args[0]?.param)

        return {
            method,
            urlRaw,
            url,
            args: opts.args,
            // omitted including ClientRequestImpl for now but don't see any issues there
        }
    }, []) as UnionToIntersection<Client<T>>

Anyone could give me some starting points on how to correctly type this, while maintaining the autocompletion of the paths for the client?
My guess for now it's in the PathToChain type, but still trying to unravel it.

This is the full code that you could copy paste / edit, aside from the above customHc functio all types / functions are copied from the hono source code as it doesn't export them:

import type { Hono, Schema } from 'hono'
import type { ClientRequest, ClientRequestOptions } from 'hono/client'
import { UnionToIntersection } from 'hono/utils/types';

type Callback = (opts: { path: string[]; args: any[] }) => unknown

const createProxy = (callback: Callback, path: string[] = []): unknown => {
    return new Proxy(() => {}, {
        get(_obj, key) {
            if (typeof key !== 'string' || key === 'then') {
                return undefined
            }
            return createProxy(callback, [...path, key])
        },
        apply(_1, _2, args) {
            return callback({ path, args })
        },
    })
}

type PathToChain<
    Path extends string,
    E extends Schema,
    Original extends string = Path,
> = Path extends `/${infer P}`
    ? PathToChain<P, E, Path>
    : Path extends `${infer P}/${infer R}`
      ? { [K in P]: PathToChain<R, E, Original> }
      : {
            [K in Path extends '' ? 'index' : Path]: ClientRequest<
                E extends Record<string, unknown> ? E[Original] : never
            >
        }

export type Client<T> =
    T extends Hono<any, infer S, any>
        ? S extends Record<infer K, Schema>
            ? K extends string
                ? PathToChain<K, S>
                // ? {K:K,S: S}
                : never
            : never
        : never

export const replaceUrlParam = (
    urlString: string,
    params?: Record<string, string>,
) => {
    if (params)
        for (const [k, v] of Object.entries(params)) {
            const reg = new RegExp('/:' + k + '(?:{[^/]+})?')
            urlString = urlString.replace(reg, `/${v}`)
        }
    return urlString
}

export const mergePath = (base: string, path: string) => {
    base = base.replace(/\/+$/, '')
    base = base + '/'
    path = path.replace(/^\/+/, '')
    return base + path
}

export const replaceUrlProtocol = (
    urlString: string,
    protocol: 'ws' | 'http',
) => {
    switch (protocol) {
        case 'ws':
            return urlString.replace(/^http/, 'ws')
        case 'http':
            return urlString.replace(/^ws/, 'http')
    }
}

export const customHc = <T extends Hono<any, any, any>>(
    baseUrl: string,
    options?: ClientRequestOptions,
) =>
    createProxy(function proxyCallback(opts) {
        const parts = [...opts.path]

        let method = ''
        if (/^\$/.test(parts[parts.length - 1])) {
            const last = parts.pop()
            if (last) {
                method = last.replace(/^\$/, '')
            }
        }

        const path = parts.join('/')
        const urlRaw = mergePath(baseUrl, path)
        const url = replaceUrlParam(urlRaw, opts.args[0]?.param)

        return {
            method,
            urlRaw,
            url,
            args: opts.args,
        }
    }, []) as UnionToIntersection<Client<T>>