new extension: attributes ... allows attribute-only swap

[stukennedy]

• hx-swap and hx-swap-oob to have an "attributes" value
• swap the attributes of the target element and not its children
• ensure hyperscript is processed after swap

Description

There are many occasions in a deeply-nested DOM structure where attribute-only changes are desirable. In the spirit of HATEOAS it is desirable that the back-end drives the state and behaviour changes in the front-end. Even simple class changes or aria attribute changes are better delivered from the back-end than programmed in the client. But the power of this approach comes in the ability to be able to make targeted changes to HTMX attributes, allowing for branching behaviours without needing to return entire components, which can become very messy, especially if targeting multiple OOB components that have children.

Example of changing form behaviour:

<form hx-post="/original-action">
    <div>Bunch of stuff</div>
    <input name="foo" type="text" />
    <button type="submit">Submit</button>
    <a hx-post="/change-form" hx-swap="attributes" hx-target="form">Change form action</a>
</form>

server responds with

<form  hx-post="/new-action"></form>

(This extension will not override the id or the hx-ext attribute of the target.)

Corresponding issue:

Testing

test file added to test new behaviour and test existing behaviour is unaltered by the extension

Checklist

• [x] I have read the contribution guidelines
• [x] I have targeted this PR against the correct branch (master for website changes, dev for source changes)
• [x] This is either a bugfix, a documentation update, or a new feature that has been explicitly approved via an issue
• [x] I ran the test suite locally (npm run test) and verified that it succeeded

[netlify[bot]]

✅ Deploy Preview for htmx-extensions ready!

Name	Link
🔨 Latest commit	053bb3ac893b3fdb50424ad4fd588b0af0e68f16
🔍 Latest deploy log	https://app.netlify.com/sites/htmx-extensions/deploys/669f8df40abcf10008bbe40e
😎 Deploy Preview	https://deploy-preview-60--htmx-extensions.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Telroshan]

Hey, I would suggest publishing your own extension repo for now and list it in this repo's community extensions. Adding an extension to the repo itself makes it kind of an "official" extension that we'd have to provide long-term support for, I hope you'll understand we can't do that with all extensions! All extensions in this repo were already there in 1.0, and with htmx 2 we wanted to take a different approach, to let community easily register their extensions in our extensions list while we let them handle their support.

We can always discuss later if an extension should or should not make it into the core, but I would suggest making it a community extension first.

I know this can feel frustrating, apologies for that! We'll have to define contributing guidelines at some point for this repo, we're still playing it by ear for now

Note: yes, this is a shameless copy-paste from my comment in #44, but it applies just as well!