yep, this is the direction I'm heading right now

Still thinking about script elements, and re-evaluating them

but I thing this is the right direction

Little pattern enhancing htmx with Hyperscript: The feature is a text input which saves automatically while the user types. The API response is a content change to the indicator below, which lets the user know the status of the save. The user should be reassured that their changes are being recorded as soon as they make a change. Of course, I don't want to send a request for every single keypress. It can wait a moment until the user types a full thought. Enter `hx-trigger`'s

delay

syntax, which debounces the given event by the given time.

<div
    hx-trigger="input delay:500ms"
    hx-swap="innerHTML"
    hx-post="/api/setter"
    hx-target="[data-save-indicator]"
    hx-indicator="[data-save-indicator]"
    _="on input tell the next <.htmx-indicator />
                add .htmx-request to yourself
                put 'Saving...' into yourself"
>
    <label>
        Write your input!
        <input type="text" name="value" />
    </label>
</div>
<div class="htmx-indicator" data-save-indicator>Saving...</div>

I wanted to use

hx-indicator

but

hx-indicator

adds the

htmx-request

class to the given CSS selector when the request begins, after the delay. This is too late! I want to let users know their info is in safe hands as soon as possible. So, I take things into my own hands with hyperscript to add the class myself immediately to show the indicator. This doesn't mess with htmx's use of that class at all. I also reset the content of the indicator, since a prior API response could have changed it.

I work with a customer where they decided after much deliberation that the best http code to return when you query for something and there are no results is... 404 Not Found. I hate "REST".

The event modifier

throttle

doesn't seem to work for me. On an element like this

<input type="number" hx-post="" hx-trigger="change throttle:10s">

the POST request ist sent immediately. Do I need to configure it differently?

I obviously misunderstood how

throttle

works. The request is expected to fire immediately but all subsequent requests within the declared time window are discarded. Does anybody else find the wording in the docs unprecise?

https://htmx.org/docs/#trigger-modifiers not sure what wording you're referring to > throttle: - wait the given amount of time (e.g. 1s) before issuing the request. Unlike delay if a new event occurs before the time limit is hit the event will be discarded, so the request will trigger at the end of the time period.

There's also this one: https://htmx.org/attributes/hx-trigger/ >

throttle:<timing declaration>

- a throttle will occur before an event triggers a request. If the event is seen again before the delay completes it is ignored, the element will trigger at the end of the delay. Both state that

<timing>

introduces a delay before the request is fired and my observation is that the request is sent immediately.

With `throttle:3s`:

Click…Request #1…1s…2s…Click (discarded)…3s…Click…Request #2

vs.

Click…1s…2s…Click (discarded)…3s…Request

The latter is how I understand how it should work. But maybe that's just because I'm not a native speaker.

I like decorators and mixins

Don’t ban me

I do to but until they're standardized I don't wanna use them in typescript

Has there been any thought into breaking down HTMX into more plugins? Right now dependency size is a huge topic, like fresh boasting zero kb js. Curious if we could bundle HTMX like tailwind, we check to see what attributes are used and build a bundle specific to the js sent down or entire project. https://twitter.com/thomasreggi/status/1583481276220133377

well

maybe not

i dunno, I am a boomer-in-spirit and this discord stuff is frightening and confusing to me

hi everyone! is there a way to stop htmx from swapping the title tag after an hx-get??

Not currently, but there should be

i wonder why i had never gotten into this topic 😮 loading another page's content into the one where the request is made

@echoing-action-55459 @acceptable-spring-94420 just pushed up what I think is a good compromise on the head support. We now treat boosts and non-boosts differently, (merge vs. append, based on @echoing-action-55459 's suggestion) with the ability to override w/ an hx-head annotation. You can also keep a specific element in the head permanently by putting an

hx-preserve

attribute on it, and have it re-execute by placing an

hx-head="re-eval"

on it.

@hundreds-camera-24900 I think you were asking about better boost detection in events, and we now include a top level

boosted

boolean in the detail for both pre-request and post-request events triggered by htmx

link?

currently in dev

would love a code review if you have time

Avoid swapping the title workaround:

js
htmx.defineExtension('prevent-title-update', {
    handleSwap: function(swapStyle, target, fragment, settleInfo){
      settleInfo.title = document.title;
    }
});