jsx/dom documentation doesn't provide enough info for working example

[mcshaman]

What version of Hono are you using?

4.5.5

What runtime/platform is your app running on?

Node

What steps can reproduce the bug?

I want to try out the Client Components as documented on the docs but the documentation seems incomplete and in some case incorrect.

1. The Counter example doesn't explain how to integrate it into the App i.e. how does Hono add this to a html response?

2. The useState import appears to be incorrect. Looks like it should be importing from hono/jsx/dom not hono/jsx

3. Following the instruction to set The hono/jsx/dom runtime in tsconfig.json to "jsxImportSource": "hono/jsx/dom" causes TypeScript errors for core html elements. This looks like a regression because it doesn't seem to be an issue in version 4.0.0.

4. None of the examples include this feature. I found these examples by @yusukebe but they don't show/explain how they integrate with the Hono server i.e. transpiling the TypeScript and writing it into the HTML response.

What is the expected behavior?

Enough documentation to get a working example

What do you see instead?

Documentation that is either incomplete or assumes reader has additional knowledge?

Additional information

No response

[yusukebe]

HI @mcshaman

Thank you for raising the issue. These seem to be not bugs, but as you said, the following is right:

Documentation that is either incomplete or assumes reader has additional knowledge?

So, I've removed the triage label and added the document label. We can work on this issue later. (If others without me can help with this issue, please!)

[mcshaman]

I'd be happy to contribute by updating the documentation but I still can't get client components to work. I have tried hitting up the discord but haven't had any luck there either.

[yusukebe]

@mcshaman

Have you ever tried this code?

https://github.com/yusukebe/hono-jsx-spa

This is a good example of using Hono's JSX and RPC-mode.

[mcshaman]

I came across something similar... But it requires Vite to server the client components. I assumed you could build an app using Hono and Client Components without any other tooling. Is that not the case?

Another issue with this pattern is that you have to export the app from index.ts to Vite's dev server. WebSockets is an important part of app and Vite's dev server doesn't have Websockets. So using Hono's server in watch mode would be preferable.

[yusukebe]

I came across something similar... But it requires Vite to server the client components. I assumed you could build an app using Hono and Client Components without any other tooling. Is that not the case?

I understand very well what you want. Unfortunately, in most cases, the client component must be built using Vite or something similar.

Another issue with this pattern is that you have to export the app from index.ts to Vite's dev server. WebSockets is an important part of app and Vite's dev server doesn't have Websockets. So using Hono's server in watch mode would be preferable.

If you use @hono/vite-dev-server, you should be able to enable hot reloading without having to do anything.

[mcshaman]

If you use @hono/vite-dev-server, you should be able to enable hot reloading without having to do anything.

I don't want WebSockets for hot reloading I want it for actually sending messages

[mcshaman]

Looks like this has been discussed elswhere

[NOMADE55]

Sorry for doing some necromancy here, but I'm interested if this was solved in any way by @mcshaman.

I'm writing a really small app and use client components to avoid using a full blown library. The thing is, I'm using Deno 2, and not Vite.

Any insights? I've tried a few things like using deno's dnt, but I might be missing something.

[mcshaman]

I was advised by one of the main homo contributors that they could see what I wanted to do but ATM I would need something like vite to handle we sockets beyond hot reload. I ended up going back to good old express 😐

[yusukebe]

@mcshaman

Can I close this issue?

[mcshaman]

Go for it