I'm doing more stuff with HTMX.

HTMX allows for almost-convenient polling by adding hx-trigger="every 1s" to an attribute. This allows you to kick off some processing on your server after having served a page and automagically update the page with the status and a download link when processing completes.

<div class="preview-card" id="preview-div"
    hx-trigger="every 1s"
    hx-get="/preview"
    hx-swap="outerHTML"
>
Please stand by while we prepare your content
</div>

The polling only works if the element has a hx-get or hx-post attribute. It does not work on <form> elements with action="..." , surprisingly.

The workaround is to add an explicit hx-get or hx-post="..." attribute to the element:

<form method="POST" action="/submit"
    hx-trigger="every 1s"
    hx-post="/preview"
    hx-swap="none"
>
<input name="message" type="text" />
...
</form>

I really like HTMX. But its error reporting is severely lacking. For example, typos or wrong keywords in hx-trigger or other hx- attributes do only result in a nondescript console entry and a stack trace:

htmx:syntax:error

The HTMX documentation suggests only source-diving as a way to find where the attribute parser chokes. While this works, it is not convenient. I have to switch from the minified HTMX library to the development version, and then set a breakpoint on the logging routine, and from there work my way backwards to the origin of the error. Which is most of the time a typo or wrong keyword in an attribute.

Luckily, HTMX can invoke a callback on the htmx:syntax:error event, so we can list the offending elements in the console and make them easily clickable:

htmx.on("htmx:syntax:error", (elt) => { console.log("htmx.syntax.error",elt)});

This still does not report the offending hx- attribute, and also does not tell us, what keyword was wrong or where the expression went bad, but it is a lot closer and does not require us to go source diving.