I'm not sure either, you might have to wait for 1cg 🙂

you should be able to use

selectAndSwap()

we'll need to parse the response beforehand and select out just the stuff we want to swap into individual chunks and pass that in as the

responseText

for each element we are swapping in

there shouldn't be OOB content or select info, and the preserve functionality would be correct in this case

and, yes, the

init()

method is the way to get ahold of the internal extension API

but again I want to point out the

hx-select-oob

option, which does something pretty similar. (The documentation on it sucks though 😑 )

Thank you @mysterious-toddler-20573, I'll also look at

hx-select-oob

for inspiration, I see it in

handleOutOfBandSwaps

function

pardon my ignorance what is ssg? do you mean you generate the html statically?

Put me down as a vote for "no magic surrounding the

html

tag." I understand the discussion above, and what generated it - but isn't it really starting to run pretty far afield from the whole HATEOAS way of doing things? IMO, anything that jeopardizes the "throw

hx-boost="true"

on the

body

tag, and it 'just works!'" makes it not a desirable solution. htmx is about simplification and straightforwardness. It's not a "run your SPA piece-by-piece" library, it's a "make your MPA feel like it's a SPA" library. As an extension, I think it would be fine (and

head

merging is a slightly different discussion, though I have some "just works" concerns there), but to introduce magic in the main library that doesn't go with its original intent seems, to me, to not be the best idea. My (unrequested) $.02 - probably worth twice what you paid for it...

I’m using some vanilla JS on form elements with a specific

data

attribute. Basically it listens for the change event and does something to the rest of the page. Now I’m using htmx to dynamically render these form elements when another input changes, but this means my event listeners don’t work anymore. I guess I’d need something like jquery’s

live()

, or some way to re-add the event listeners once htmx has finished swapping the form elements. Is there an easy/obvious way to do this?

How about Event Delegation? Essentially you add the listener to a container of the element which will not be removed, and that listener only triggers if its

target

was the element you're actually interested in.

you either want to use event delegation somewhere stable in the DOM, or use

htmx.onLoad()

to establish your event handlers. Or, alternatively, use Alpine or _hyperscript, which eliminates this problem by colocating the scripts and the elements.

OK, I just want to say THANK YOU to the people behind htmx and hyperscript. The libs and the essays are a breath of fresh air in the musty cave of web development. I can't believe I didn't know about it before. No SPAs anymore, unless a gun is pointed to my head. Hell, I might even try going Jet Li in this case!

Thanks for the tips @mysterious-toddler-20573 @brainy-ice-92385. I ended up adding an event listener on

htmx:afterSwap

, it works well! 👍

"Radical Rails", a great name. Would be crazy if htmx made headway in the rails community folks!

Yup. Keep it simple gents.

Really cool. I feel like Tailwind may be underappreciated gold for HTMX-- LoB for CSS. LoB for JS (hyperscript, or surreal) has been a pretty big simplicity win.

i need to learn tailwind this is getting ridiculous

The problem with tailwind + hyperscript + HTMX is that you can end up with a paragraph tag definition that is multiple lines.

Almost too much locality of behavior

Hi, I'm seeing problems with history behaviour in the latest iOS Safari and htmx 1.8.0. I commented on an existing closed issue which appears to have been resolved, but should I open a new one? I'm not convinced the resolution actually fixed the issue of double instantiation. Safari seems to be doing something unusual with it's cache that other iOS browsers (all based on Webkit) do not. At the moment adding htmx to the seems to be the only sure way to ensure the back/forward buttons work as expected, but that's not ideal from a web performance POV. https://github.com/bigskysoftware/htmx/issues/854#issuecomment-1274437607 Edited top add 'latest iOS Safari'. I don't think the issue was present before iOS 16.

Do it.

Learning it will take an hour max.

They have lots of tutorial videos on YT. https://youtube.com/c/TailwindLabs

My introduction to it was through this video. It demonstrates the mobile-first development process.

Is there a community recommendation regarding the choice of css framework to go with htmx and hyperscript for more "complicated" apps?

It's unopinionated choose your own adventure, which is nice. I personally use stylus but lots on sass, vanilla, bootstrap.

Unopinionated big tent flexibility is one of HTMX's great defining features imo.