Alpine.js Initialization with HTMX for Both Initial and Dynamic Loads

[axzilla]

Description:

Right now, when using Alpine.js with HTMX, it's tricky to handle components so they work on both the initial page load and after HTMX swaps:

1. CSP and Host Issues:
   Changing from cdn.jsdelivr.net to unpkg.com solved some CSP-related problems.

2. Timing Challenges:

   • Alpine.data('myComponent', ...) works after HTMX swaps, but not on the initial page load.
   • Using document.addEventListener('alpine:init', ...) works on the initial load, but not again after swaps.

3. Workarounds:
   Using an IIFE and checking if Alpine is defined, then falling back to alpine:init:

   (() => {
       const registerComponent = () => {
           Alpine.data('example', () => ({ ... }));
       };
       typeof Alpine !== 'undefined'
           ? registerComponent()
           : document.addEventListener('alpine:init', registerComponent);
   })();

   This feels clumsy.

4. Current Approach:
   Keep the script separate from the component:

   • Load the script on the initial page load.
   • Load the component HTML initially or via HTMX as needed.

Request:
Look for a simpler or built-in way to handle Alpine.js components so they work smoothly on the initial load and after HTMX swaps, without complex timing hacks.

[Shadowfaxenator]

I remember HTMX has htmx.process()
so will something like this help? x-init="$nextTick(() => htmx.process($el))

[Shadowfaxenator]

What an issue I had with Alpine+HTMX is css animations problem, cause HTMX uses settle (timeout for animations) on each render and Alpine doesn't work with it. So for alpine to work correctly I needed to turn off settle in HTMX config.

Currently looking at unpolyjs as a better htmx alternative, what i love about unpoly is that you first do a regular MPA (with templ+go) and then just add up- directives to progressivle enhance MPA with SPA like behaviour

[gedw99]

What an issue I had with Alpine+HTMX is css animations problem, cause HTMX uses settle (timeout for animations) on each render and Alpine doesn't work with it. So for alpine to work correctly I needed to turn off settle in HTMX config.

Currently looking at unpolyjs as a better htmx alternative, what i love about unpoly is that you first do a regular MPA (with templ+go) and then just add up- directives to progressivle enhance MPA with SPA like behaviour

Try Datastar .

it’s unified . Like alpine and htmx work fully together. Plus it does push so it’s real time updates to all users. Saw is built in with a broker for scale out

https://github.com/Superpat/datastar/tree/ts-sdk

[axzilla]

I remember HTMX has htmx.process() so will something like this help? x-init="$nextTick(() => htmx.process($el))

Thanks, I honestly don't know. Actually, I'm trying to create a framework-independent UI library, so I probably won't pursue that approach any further. That means, it must work with pure page reloading as well as with HTMX or any other JS library out of the box.

Currently looking at unpolyjs as a better htmx alternative

Interesting! I'll look into that. There's also https://alpine-ajax.js.org which I haven't looked at either and I think if someone looks into this topic more deeply there are probably a few more solutions.

what i love about unpoly is that you first do a regular MPA (with templ+go) and then just add up- directives

Isn't this the same with hx-?

[axzilla]

I'll stick with the current implementation for now but I'm open for further discussions.