Add support for Hono Client Components

[gaetan-puleo]

Hono has a client components system, and is very similar to React but much more smaller.

https://hono.dev/guides/jsx-dom#client-components

[molefrog]

Thanks for the suggestion. I am not familiar with Hono's components yet, could you maybe write your ideas on how this could be implemented?

[gaetan-puleo]

Thanks for the interest. Hono/jsx/dom (hono client components) export the same hooks than react.

We could try to mimic this file https://github.com/molefrog/wouter/blob/v3/packages/wouter/src/react-deps.js (or the preact file) with the same hooks and export everything in wouter/hono?

If I take the import coming from React and used in react-deps.

export {
  useRef,
  useState,
  useContext,
  createContext,
  isValidElement,
  cloneElement,
  createElement,
  Fragment,
  forwardRef,
} from "react";

All the thing exist in Hono.

I think we should be able to make wouter works for hono.

Here the methods coming from Hono.

(Sorry for my bad English)

[molefrog]

Thanks, I'll think more about this, right now I don't see a straightforward solution. Maybe you can try importing wouter from a CDN (like esm.sh) with react dependency overriden? Similarly, to what you would do to use convert a React library to Preact?

P.S. Your English is fine! I am a non-native speaker myself.

[gaetan-puleo]

It's not urgent on my side, I use react right now, I'll migrate to hono/jsx/dom when a solution is ready.

When I have some time, I will try your solution. (I didn't know about esm.sh, thank you)

[gaetan-puleo]

Hi @molefrog there is a fork of wouter with hono support but the ssrPath is not working. Here the repo https://github.com/apvarun/wouter-hono.

I created an issue here. https://github.com/apvarun/wouter-hono/issues/1

But I still think the hono package could be part of the wouter package.

[molefrog]

Alright, I did some brief digging and it looks like the problem in this line https://github.com/molefrog/wouter/blob/fa5f6b1e8e66d7e5933f38b181cc15c5044b2bf9/packages/wouter/src/index.js#L183

wouter uses createElement to construct a provider element and passes children as a prop, however Hono does not support this and expects children to be the third argument. Hence, nothing gets rendered. We need to investigate if this is expected behaviour or something that Hono does not support yet.

[molefrog]

I run a quick test and it worked, however there is another issue: Hono can't render components that return null.

[gaetan-puleo]

I run a quick test and it worked, however there is another issue: Hono can't render components that return null.

Can you add more info about the test ?

I can create an issue about this point here if needed https://github.com/honojs

[molefrog]

Sure, here is what you can test (these are separate cases):

1. Create a Hono app with Client Components. Make a component that renders null and render it in your app. In React, this will render nothing, while in Hono it throws an error.
2. Call createElement method from hono/jsx and try to make a new JSX element with children provided as a prop:

import { createElement } from "hono/jsx"

const el = createElement("div", { children: <a href="/">Link</a> })
// expected behaviour is the same as in React:
// div with a link in it, instead it just creates a `div`

The fix is to pass children as a third argument. We can fix this in wouter's source though, but I think it would make sense to have this behaviour similar to React's.