🙏

That did the trick after working out how my htmx code itself was borked 😅

how do i import htmx via esbuild?

This works for me:

import 'htmx.org/dist/htmx.js';
const htmx = window.htmx;

thanks, but where

htmx

var goes?

it's not like it references the import, right?

To be honest, I have no idea. I think it's just the combination of how htmx is exported + how esbuild interprets it. I think I tried to

import htmx from 'htmx.org/dist/htmx.js

, and reference that var, but it didn't work.

yeah, same

Hey folks, I’m having some trouble getting an async handler working with the

wsConfigSend

event in the ws extension (use case: to encrypt a message before it’s sent to the server for end-to-end encryption). It looks like the handler is called but not awaited. I tried awaiting the function in the handler declaration but that didn’t work. I then tried preventing the default event and using the

event.detail.socketWrapper

to manually send the message but it doesn’t even look like that’s being triggered. (From my tests, it looks like the handler is being garbage collected very soon after it’s run, even before it hits an await statement inside it.) (I’m using Alpine.js to add the handler.) Any ideas?

html
<div 
  id='chat'
  hx-ext='ws'
  ws-connect='/chat.socket'
  x-data='{ showPlaceholder: true }'
  @htmx:ws-config-send='encryptMessage'
>
…
</div>

js
async function encryptMessage (event) {
  const parameters = event.detail.parameters
  const ourPrivateKey = localStorage.getItem('secret')
  const encryptedMessage = await encryptMessageForDomain(parameters.text, ourPrivateKey, parameters.domain)
  event.detail.parameters['text'] = encryptedMessage
}

Yes, htmx does not use promises, so it is not possible to make async event handler unfortunately. As for collected socketWrapper, I'll take a look at that one

@ripe-action-67367 Ah, I didn’t realise that. Do you know if promise support is on the roadmap? (And thanks for looking into it, appreciate it.) 🙂

for htmx 2.0 most likely

@ripe-action-67367 Cool, thanks. I’ll read up on 2.0 🙂

Actually, I don't think it is possible to await for event handlers

htmx uses standard html custom events dispatcher, which, as far as I know, has no way to await for event listeners

Right, you can’t, basic example, onclick='await something()' but I’m still seeing different behaviour when adding an asynchronous handler (where the handler is being garbage collected before completing). I’ll have a think about how best to pause the send event so that an asynchronous transformation can be applied to the message contents. At the very least, I need it to implement end-to-end encryption 🙂

(Maybe the issue is that the configuration method should be a separate attribute that is awaited instead of a standard event handler. In any case, I’ll have a play. Thanks again.)

A quick repro showed, that it's not garbage collected. It's just a bug on the extension side. The wrapper is not correctly initialized. I'll have a fix later

As for GC, I don't think it is the case, since the wrapper is referenced in event object, which is referenced in event handler arguments, which is captured in the async continuation closure. It would be a V8 bug if it was the case

Cool, thanks (so I guess I should be able to cancel the event, create my own message, and use the socket wrapper to send it).

Yes, that was the intention

Does anyone know what version of Node is supported by htmx? I’m trying to run npm install and it’s failing for me both on Node latest (19.6.0) and on Node LTS (18.14.0). Looks like node-sass is the culprit. Stack traces: https://github.com/bigskysoftware/htmx/issues/1243#issuecomment-1422668704

Right, to answer my own question (went backwards from 18 until I found it)… it’s Node 15. Will open an issue and a pull request to add the supported engine to package.json.

(Sadly, npm apparently doesn’t warn of version mismatch until after attempting to install dependencies so

engines

declarations had no effect so I didn’t include it but at least documented the Python 2 requirement in a PR.)

@ripe-action-67367 I’ve got htmx up and running with all tests passing. Should I write a failing test and have a go at fixing the undefined

socketWrapper

methods or would you rather I left it to you?

If you got time, please do. The relevant part is at src/ext/ws.js:179.

Thanks, I’ll have a look at it now then. Appreciate the pointer 🙂

Also, this https://discord.com/channels/725789699527933952/725789747212976259/999997871367651329

Haha, indeed 🙂

Right, it was scope (of course), and a tiny typo. Would love a code review when you get a moment, @ripe-action-67367 🙂 https://github.com/bigskysoftware/htmx/pull/1247