HTMX wrapper for Edge renderer tailored for the Adonis web server.
It also introduces concept of template fragments described on HTMX website.
Install it using npm, yarn or pnpm.
# npm
npm i adonis-edge-htmx
# yarn
yarn add adonis-edge-htmx
# pnpm
pnpm add adonis-edge-htmxAfter install call configure:
node ace configure adonis-edge-htmxMake sure to register the provider inside adonisrc.ts file.
providers: [
// ...
() => import('adonis-edge-htmx/provider'),
]You can check if given request has been made by htmx and act accordingly
async function handle({ request }: HtppContext) {
if(request.htmx) {
// Request has been made by HTMX - you can now use request.htmx to get access to HTMX related info e.g.
request.htmx.boosted // true if boosted
}
}The provider adds htmx property to HttpContext. This property is a wrapper around EdgeRenderer that introduces fluent interface to create and render HTMX responses.
async function handle({ htmx }: HttpContext) {
...
return htmx
.location('/client-redirect')
.trigger('some-event')
.render('/path/to/template#fragment', { data })
}Add @fragment tag to your edge template.
<header>Some header</header>
@fragment("content")
My awesome content
@end
<footer>Some footer</footer>Now you can render not only full template but also just template fragment
async function full({ htmx }: HttpContext) {
return htmx.render('path/to/template', { data })
}
async function contentOnly({ htmx }: HttpContext) {
return htmx.render('path/to/template#content', { data })
}