Adonis HTMX

Better HTMX development with AdonisJS framework.

Instalation

Install and configure it in two steps.

# npm
npm i adonis-htmx
node ace configure adonis-htmx

Or use ace add command that combines those two steps:

node ace add adonis-htmx

Api

Request

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
  }
}

Response

The provider adds set of htmxX properties to Response. This introduces fluent interface for setting correct htmx headers.

async function handle({ response, view }: HttpContext) {

  response
    .htmxLocation('/client-redirect')
    .htmxTrigger('some-event')

  return view('page/test', { data });
}

Properties that expect urls (htmxLocation, htmxRedirect, htmxPushUrl, htmxReplaceUrl) can be provided with route definitions in a form of [string, params, options] - these are passed to router.makeUrl function to resolve the final path e.g:

async function handle({ response, view }: HttpContext) {

  response
    .htmxLocation(['profile.show', { userId: 4 }])

  return response.status(200)
}