Add hx-swap-oob modifier support #3352
Open
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This Change re-implements hx-swap-oob swapping to use the full htmx swap function and all of its various modifiers and adds two additional modifiers for additional oob functionality. The recent refactors of the swap function to support history, delay and transitions have now enabled us to reuse swap() much easier than before!
Core to this change is the full backwards compatibility with existing hx-swap-oob use cases where the attribute value can be a
<swapStyle>:<selector>
format. With the old format the swapStyle portion could never contain white space as only a single word swap style was usable so we can use this fact to search for whitespace and when it exists treat the whole attribute value as a normal hx-swap style value instead and reuse all existing code paths we can.target:
modifierTo support a custom target selector I've added a
target:
modifier that only works with oob swaps and allows parsing of multiple words aftertarget:
to be used as a complex extended selector.strip:
modifierThe oob tags are set to be stripped off by default in all but outerHTML swap styles to make oob behaviour simple for inner style swaps but it is helpful sometimes to override this default to allow various other kinds of swap behaviors like doing an outerHTML style swap of an oob tags inner contents to place multiple items easily over top of a single target element. So I've added a
strip:true
andstrip:false
options that allows you to easily override it with this modifier.template handling
This change also includes support for oob tags to be template tags themselves instead of just wrapping template tags around them which simplifies tag choice when dealing with tables and other element types. This just required using fragment.content if the oob element happened to be a template element
hx-select/hx-select-oob
hx-select tested working with strip:true and hx-select-oob updated to be fully backwards compatible with its old undocumented id only format and now supports css selectors properly as this was documented but not working properly and it now supports full hx-swap-oob syntax as well.
idiomroph advanced oob swap support
This change now allows hx-oob-swap to support
:
in the swap style which allows morph:innerHTML swap styles that were not usable before.Corresponding issue:
#2308
#3316
Testing
Performed some manual testing of various hx-swap-oob actions and added many tests for the various core functions.
Checklist
master
for website changes,dev
forsource changes)
approved via an issue
npm run test
) and verified that it succeeded