Add alternate hx-on:* syntax for template engines that don't support colons in attributes

[is-jonreeves]

I see that htmx 1.9.3 deprecated the use of hx-on="" in favor of a new hx-on:*="" syntax. While I like the addition of the : character to organize the event handlers it does make working them in JSX a little problematic.

// Pre 1.9.3
<form hx-on="htmx:after-request: this.reset()" />

// Now - (invalid JSX)
<form hx-on::after-request="this.reset()" />

// Work around
<form {...{ 'hx-on::after-request': 'this.reset()' }} />

Other than destructuring objects onto the element does anyone know of a cleaner way to express these colon-delimited attributes in JSX?

I suspect this is more of a JSX issue than a HTMX one, I just figured I'd ask here incase you were not aware of the impact of the change. And also see if you have any guidance as to how long before you remove support for the older syntax entirely?

[mfulton26]

I think that's the best JSX can do right now.

Maybe HTMX can support an alternative syntax for JSX users. e g.: hx-on--after-request.

[andryyy]

Might work as hx-on:htmx:after-request

This is the same as :: when handling htmx events.

[mfulton26]

JSX doesn't support any colon though in an attribute name. 😞

[alexpetros]

This came up in the discord too. I'm open to supporting an alternative syntax (although it is annoying to me that JSX and XHTML do not support this valid HTML syntax)

[beganovich]

Can we have the pre 1.9.3 syntax back?

[jollytoad]

This is also a problem when using JSX in Deno, for which there is no obvious way to allow it at present. I've raised an issue for this in the Deno project... https://github.com/denoland/deno/issues/20345

[renxzen]

it's also working with the deprecated syntax (version 1.9.5) hx-on="htmx:afterRequest:this.reset()"

hx-on documentation

maybe we could also consider hx-on-after-request to standardize the event handling. same could be with hx-on-click. I don't see why we could need colons to determine it's a functionality from hx-on, maybe someone can answer me this

[andryyy]

There is a workaround for JSX available and I really think this should be fixed in their code. Not blaming them though.

[is-jonreeves]

I was playing with this again today in a hono project. I was using their hono/jsx as the jsxImportSource and noticed that using a single : worked:

<form hx-on:after-request="this.reset()" />

This struck me as odd, so I looked at their implementation but didn't see anything special there. Turns out the wrangler cli I am using makes use of esbuild under the hood and that has an allowance for using a single colon in JSX (maybe for Vue compatibility or something), but no more than that: https://github.com/evanw/esbuild/blob/main/internal/js_parser/js_parser.go#L4891-L4920