OOB Swap doesn't handle `transition: true` argument

[Hades32]

I want to be able to do <div id="alerts" hx-swap-oob="outerHTML transition:true">, which currently leads to the complete swap not working

htmx/src/htmx.js

Lines 759 to 766 in ca03dab

	if (oobValue === "true") {
	// do nothing
	} else if (oobValue.indexOf(":") > 0) {
	swapStyle = oobValue.substr(0, oobValue.indexOf(":"));
	selector = oobValue.substr(oobValue.indexOf(":") + 1, oobValue.length);
	} else {
	swapStyle = oobValue;
	}

[Edweis]

I am interested in this feature. I am looking to build an alert with:

<div id="alerts" hx-swap-oob="outerHTML settle:1s">

Looking at the code I see this is not supported yet.

[Hades32]

@Edweis for alerts I have resorted to the "classes" extension. You can add and remove CSS classes after some time delay to e.g. slowly show and then hide it again

[Edweis]

Thank you @Hades32 , that solves my problem!

[billythedummy]

I guess the fix is to change the css selector separator to something other than : since : can appear in many valid hx-swap values

[TheQueenIsDead]

Is it as simple as changing the separator to a space, then parsing on a colon from there? Sounds like an easy PR!

I'm also after this fix because we can not use scroll and show modifiers:

hx-swap-oob="beforeend:#items scroll:#items:bottom"

OOB swaps being limited in this fashion is particularly painful given that WS support requires the OOB attribute

[aral]

Just running into this now with hx-swap-oob not supporting swap:, settle:, and delay: – fails with "is not a valid selector" error.

[hasanbal]

Are there any updates on here? Is there any alternative way to use these modifiers in hx-swap-oob?

[dakixr]

Any updates?

[aral]

@hasanbal @dakixr This is how I’m handling it in Kitten’s internal fork of htmx, in case it helps anyone to implement upstream (I’m up to my neck in code at the moment so I don’t have time to prepare a PR right now):

https://codeberg.org/kitten/app/src/branch/main/lib/htmx-2.js#L1412

(And this likely requires a design discussion as oob swaps should be brought up to parity with regular swaps at some point. Especially important since very WebSocket swap is an oob swap. I had to implement this in Kitten as Kitten’s Streaming HTML workflow uses htmx with the WebSocket extension.)

[scriptogre]

Hey @Hades32, @Edweis, @aral, @hasanbal, @dakixr

The server-commands extension lets you use any hx-swap modifers for oob swaps.

For example, instead of doing:

<div id="alerts" hx-swap-oob="outerHTML transition:true">
...
</htmx>

You can do:

<htmx target="#alerts" swap="outerHTML transition:true">
  <div id="alerts">...</div>
</htmx>

I know the syntax looks a bit different from regular OOB swaps, but it’s much more flexible and opens up a lot of new possibilities.

Check out the extension when you get a chance. Feedback & testing is very welcome!