search

honojs / hono

Web framework built on Web Standards
https://hono.dev
MIT License
18.55k stars 521 forks source link

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

Open mcshaman opened 1 month ago

mcshaman commented 1 month ago

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.

    Screenshot 2024-08-14 at 3 07 36 PM

  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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

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 commented 1 month ago

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 commented 2 weeks ago

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 commented 2 weeks ago

Looks like this has been discussed elswhere