I'm looking into using Stimulus so I'm considering Turbo as well

but I see that David from Contexte chose to use HTMX instead

@melodic-advantage-28381 Would you be able to tell me why you chose HTMX over Turbo?

I use both htmx and turbo extensively in production, but my preferred choice is HTMX + HS. 1. with Turbo you are basically opting in to use "former-turbolinks-approach" on all links. If you prefer html-first approach to website development you may not find this comfortable. I like spending time building stuff as opposed to constantly debugging what standard browser behavior we broke again (history, back, forward, refresh etc.) 2. HTMX is explicit in what you want to replace and you define this right where you expect this to be defined - in the html part of a given link, button etc. Turbo adds a bit more magic in Rails but that can backfire as you may get lost trying to untangle what exactly is going on - especially if you come to the piece of code after some time. 3. You get features that are actually very useful like debouncing - built into the HTMX 4. HTML, Tailwind, HTMX, HS is truly powerful combo if you like "Locality of Behavior " and you may find you dont need anything else really, on the front-end 😉

Two Rails powered sites with HTMX instead of Turbo for some reference: https://craftisian.com https://club.royalpickleball.com/shootouts

What’s HS?

https://hyperscript.org (#796428329531605032)

Oh of course! 🤦‍♂️

Hi folks. I'm using Active Search (https://htmx.org/examples/active-search/) pattern to display search results dynamically. I'd like to avoid re-rendering search results that were already there from the previous search. I can uniquely identify each result using the

id

attribute. Any way to do this without custom JS?

There are extensions integrating htmx with "morphing" libraries https://htmx.org/docs/#morphing, that should help you achieve the desired outcome, namely

alpine-morph

,

morphdom-swap

and brand new

idiomorph

from 1cg himself. What's your goal though? I imagine, there isn't much elements state to keep within search results?

My search results are cards which contain multiple elements, one of which is an image retrieved from a remote server, so I would ideally like to prevent the image from being unnecessarily retrieved. Moreover, when search results are the same, u can see them being re-rendered on the page, which is not great UX since they're exactly the same. I'll look into the morphing libraries, thanks!

who is the client of those images? the browser or your server? in any case any well behaved image server and http client should support caching to avoid refetching content (etag, last-modified, cache stuff, etc)

(browsers do this pretty well for you as long as the server sends the right headers)

does any of that help @elegant-keyboard-60245?

glad to you you back sir!

@mysterious-toddler-20573 - I completed

multi-swap

extension. Now it works according to all our requirements.

js
(function () {

    /** @type {import("../htmx").HtmxInternalApi} */
    var api;

    htmx.defineExtension('multi-swap', {
        init: function (apiRef) {
            api = apiRef;
        },
        isInlineSwap: function (swapStyle) {
            return swapStyle.indexOf('multi:') === 0;
        },
        handleSwap: function (swapStyle, target, fragment, settleInfo) {
            if (swapStyle.indexOf('multi:') === 0) {
                var selectorToSwapStyle = {};
                var elements = swapStyle.replace(/^multi\s*:\s*/, '').split(/\s*,\s*/);

                elements.map(function (element) {
                    var split = element.split(/\s*:\s*/);
                    var elementSelector = split[0];
                    var elementSwapStyle = typeof (split[1]) !== "undefined" ? split[1] : "innerHTML";

                    if (elementSelector.charAt(0) !== '#') {
                        console.error("HTMX multi-swap: unsupported selector '" + elementSelector + "'. Only ID selectors starting with '#' are supported.");
                        return;
                    }

                    selectorToSwapStyle[elementSelector] = elementSwapStyle;
                });

                for (var selector in selectorToSwapStyle) {
                    var swapStyle = selectorToSwapStyle[selector];
                    var elementToSwap = fragment.querySelector(selector);
                    if (elementToSwap) {
                        api.oobSwap(swapStyle, elementToSwap, settleInfo);
                    } else {
                        console.warn("HTMX multi-swap: selector '" + selector + "' not found in source content.");
                    }
                }

                return true;
            }
        }
    });
})();

@mysterious-toddler-20573 - Could you please try it and give feedback before I send a pull request to add this extension? I will also prepare the content for the documentation page. Below is simple test script.

php
<?php
$div1 = rand(0,99999999);
$div2 = rand(0,99999999);
$div3 = rand(0,99999999);
$random = rand(0,99999999);
?>
<html>
<head>
    <title>Page <?php echo $random; ?></title>
    <style type="text/css">
        div { clear: both; display: block; }
    </style>
    <script src="htmx.js"></script>
    <script src="htmx.multi-swap.js"></script>
</head>
<body hx-boost="true">
    <h1>Heading (<?php echo $random; ?>)</h1>
    <a href="index.php" hx-ext="multi-swap" hx-swap="multi:#id1,#id3:beforeend">Refresh</a>
    <div id="id1"><?php echo $div1; ?></div>
    <div id="id2"><?php echo $div2; ?></div>
    <div id="id3"><?php echo $div3; ?></div>
</body>
</html>

Btw, extension use oobSwap() function so only ID selectors are supported. I would also prefer to support the class selector

.foo

, but I couldn't find any other way to replace the content available in the internal API.

Simplicity. Driving all this with data attributes (vs new markup tags) is very comfortable IMO, and I knew my team would have a very short learning curve with htmx. That being said: - It's only my opinion, and Turbo seems like a beautiful thing that I did not explore entirely - Most of what I say in my talk would also be true with Turbo (or Unpoly or any other tool that removes the need of a client-side Javascript application framework)

For my supabase spring boot starter I use the htmx ajax function to swap my body after authenticating with google. I don't want to force users to use htmx, could I extract only the htmx.ajax function?

I have converted the HTMX modal sample (https://htmx.org/examples/modal-custom/) with tailwind here : https://jsfiddle.net/oh4cywse/1/ There is a strange behaviour when you use demo.htmx.org, when you click on the button, there are two modals opening. Not sure if this is a bug, or I'm doing something wrong

Thank you msojka and David for the insight.

Client is the browser.. images can come from anywhere, they're not currently on a server that I control.

Right well, I would just let their server and the browser handle it to be honest. If you want more control you would have to download those images yourself, store and serve them.

that's strange to me. Stimulus is very much like that using attributes but they chose to use new markup for turbo instead of using attributes as well?

Is there an existing pattern/technique for asking htmx to perform the ajax call and and swap only if a given condition is met? In my case I want htmx to check that an element DOES NOT exist in the DOM before doing anything i.e.

<button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#output-area"
    hx-swap="outerHTML"
    hx-condition="!exists #item2"
>
    Click Me!
</button>

<div id="output-area"></div>

<div id="container-for-things-to-check">
 <p id="item1">item one</p>
 <p id="item3">item three</p>
 <p id="item4">item four</p>
</div>

obviously I can perform the check with hyperscript and the trigger a custom event, but was just curious

1. Trigger custom events the way you describe it 2. Hook into htmx events, verify the condition and call

preventDefault

when condition is not met (can also be done with _hyperscript) 3. Define a JS function and use event filters (e.g.,

click[!elementExists()]

). The function must be in the global scope

hmm. Cool. Thanks Renerick. I'll mull it over because i reckon it would probably be more convenient to choose the most "generic" way of handling this for every call now that I think about it.