npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

htmx-ext-multi-swap

v2.0.0

Published

This extension allows you to swap multiple elements marked with the `id` attribute from the HTML response. You can also choose for each element which [swap method](https://htmx.org/docs#swapping) should be used.

Downloads

3,066

Readme

This extension allows you to swap multiple elements marked with the id attribute from the HTML response. You can also choose for each element which swap method should be used.

Multi-swap can help in cases where OOB (Out of Band Swaps) is not enough for you. OOB requires HTML tags marked with hx-swap-oob attributes to be at the TOP level of HTML, which significantly limited its use. With OOB, it's impossible to swap multiple elements arbitrarily placed and nested in the DOM tree.

It is a very powerful tool in conjunction with hx-boost and preload extension.

Install

<script src="https://unpkg.com/[email protected]/multi-swap.js"></script>

Usage

  1. Set hx-ext="multi-swap" attribute on <body>, on some parent element, or on each action element that should trigger an action (typically anchors or buttons).
  2. On your action elements set hx-swap="multi:ID-SELECTORS", e.g. hx-swap="multi:#id1,#id2:outerHTML,#id3:afterend".
  3. If you're not using e.g. hx-get to enable HTMX behavior, set hx-boost="true" on your action elements, or on some parent element, so that all elements inherit the hx-boost setting.

Selectors must be separated by a comma (without surrounding spaces) and a colon with the desired swap method can optionally be placed after the selector. Default swap method is innerHTML.

<body hx-boost="true" hx-ext="multi-swap">
   <!-- simple example how to swap #id1 and #id2 from /example by innerHTML (default swap method) -->
   <button hx-get="/example" hx-swap="multi:#id1,#id2">Click to swap #id1 and #id2 content</button>

   <!-- advanced example how to swap multiple elements from /example by different swap methods -->
   <a href="/example" hx-swap="multi:#id1,#id2:outerHTML,#id3:beforeend,#id4:delete">Click to swap #id1 and #id2, extend #id3 content and delete #id4 element</a>

   <div id="id1">Old 1 content</div>
   <div id="id2">Old 2 content</div>
   <div id="id3">Old 3 content</div>
   <div id="id4">Old 4 content</div>
</body>

Real world example with preloading

The use case below shows how to ensure that only the #submenu and #content elements are redrawn when the main menu items are clicked. Thanks to the combination with the preload extension, the page, including its images, is preloaded on mouseover event.

<head>
  <script src="/path/to/htmx.js"></script>
  <script src="/path/to/ext/multi-swap.js"></script>
  <script src="/path/to/ext/preload.js"></script>
</head>
<body hx-ext="multi-swap,preload">
  <header>...</header>
  <menu hx-boost="true">
    <ul>
      <li><a href="/page-1" hx-swap="multi:#submenu,#content" preload="mouseover" preload-images="true">Page 1</a></li>
      <li><a href="/page-2" hx-swap="multi:#submenu,#content" preload="mouseover" preload-images="true">Page 2</a></li>
    </ul>
    <div id="submenu">... submenu contains items by selected top-level menu ...</div>
  <menu>
  <main id="content">...</div>
  <footer>...</footer>
</body>

Notes and limitations

  • Attribute hx-swap value must not contain spaces, otherwise only the part of the value up to the first space will be accepted.
  • If the delete swap method is used, the HTML response must also contain deleted element (it can be empty div with id attribute).
  • Only elements with an id selector are supported, as the function internally uses OOB internal method. So it is not possible to use class or any other selectors.