search

honojs / honox

HonoX - Hono based meta framework
https://hono.dev
MIT License
1.69k stars 46 forks source link

HTMX Compatibility #219

Open codepilotsf opened 2 months ago

codepilotsf commented 2 months ago

Support for HTMX / Hypermedia Development Patterns

I wanted to request that you consider that there are many HTMX developers looking for a good TS-based SSR framework for use with HTMX. HonoX looks like it's shaping up to be something very special and I think it would probably take very little effort to make sure that it plays nice with Hypermedia-driven app development patterns.

The one thing it would really need to work well with HTMX (or Hotwire, Unpoly, etc) is the ability to respond with partials – meaning a response that includes only one or more HTML elements with zero <html><head><body></html> boilerplate stuff. HTMX requests also include a header HX-Request: true. So this makes it possible to check for the presence of this header at runtime, then return just a partial for HTMX or the whole page for non-HTMX requests. Right now, Astro comes pretty close to allowing this behavior with export const partial = true -- but this is set at build time. So you can't conditionally render partial or full-page depending on presence of the HX-Request header.

Anyway, that's my request! Yoroshiku onegaishimasu!

yusukebe commented 2 months ago

Hi @codepilotsf

It's a quick response. I think we can do something you said with JSX Renderer Middleware (or using the layouts in context directly). It does not depend on HonoX. We can make it checkHX-Request: true and return the partial if it is set. I don't have enough time to try it but it's very interesting challenge.

codepilotsf commented 2 months ago

Thank you for taking the time to respond. Ideally, I think HonoX should not check for the HTMX headers but should instead just make it possible for the developer to choose to send a Response as a partial. In my case, I'd most often do that when it's an HTMX request – but for others, they may want to return a partial for use with Unpoly or some other Hypermedia library.

yusukebe commented 2 months ago

@codepilotsf

I previously created the PoC for creating a SPA app with HTMX. It follows the same method discussed in this issue. You can check it!

https://github.com/yusukebe/htmx-spa