[Q/feat] Async `htmx:confirm` -> `htmx:configRequest` data passing

[boyswan]

I'm struggling to find the idiomatic way of updating the configRequest asynchronously. The only approach I've found that works is the following:

document.body.addEventListener('htmx:confirm', async function (event) {
  event.preventDefault()

  if (event.detail.path == '/login') {
    let form = new FormData(event.detail.elt)
    let bearer = await get_bearer_token(form.get('email'), form.get('password'))
    event.detail.elt.bearer = bearer
  }

  event.detail.issueRequest()
})

Followed by:

document.body.addEventListener('htmx:configRequest', async (event) => {
  if (event.detail.elt.bearer) {
    event.detail.headers['Authorization'] = event.detail.elt.bearer
  }
})

It seems the only way I can persist data between these two events is by attaching it to detail.elt, which feels a little hacky. I noticed the etc field which in the docs is referred to as additional request information, but this is not available in htmx:confirm.

Is there a better way to achieve this? It seems all the parts are there but they don't quite work as expected. It feels like confirm and configRequest work independently, whilst I really want to be able to use them together. Perhaps if parameters were exposed in confirm and could be mutated, configRequest could make use of it.

[tatejones]

Hi, did you find a way to make this work without using detail.elt?
I tried just assigning the retrieved token directly (eg. await get_bearer_token) to the header without using Htmx:confirm event, but the fetch already starts before token is returned (it was awaited) within htmx.configRequest.