Htmx + alpine problems

[Shadowfaxenator]

I was so hyped on alpine+htmx, but the reality is not that good 😦 I have 2 main problems 1. Id attribute cannot be swapped correctly 2. hx-boost works but history saves conflict with alpine and also with id attributes, it’s total mess and I can’t use it for real projects because of these issues

[Telroshan]

Hey, could you provide code examples so we can investigate ? Hard to debug otherwise!
In the meantime, you might want to look into the following docs if you haven't already:

• htmx - 3rd Party Javascript
• htmx extension - alpine-morph

Hope this helps!

[Shadowfaxenator]

You mentioned alpine morph, how can I set hx-swap=‘morph’ to work only on histore swaps but not on others?

[Telroshan]

As far as I know, htmx uses the hx-history-elt (that is the body by default) but doesn't allow you to swap with another method than innerHTML:

htmx/src/htmx.js

Line 3156 in 0023cd8

swapInnerHTML(historyElement, content, settleInfo)

htmx/src/htmx.js

Line 3179 in 0023cd8

swapInnerHTML(historyElement, fragment, settleInfo)

So I don't think you can change the swap method here for history restores, but you can change the hx-history-elt if that is of any help?

[Shadowfaxenator]

There is a problem now with using alpine. If a component uses ID and settles attributes by default. You must turn off settle to make it work and in this case css animations wont work correctly.
There is no official docs to make it work from the box :(

[Telroshan]

Never used alpine so I won't be able to help that much more I'm afraid!
Except the 2 links above I don't think we have any other docs about alpine indeed.
Looking at issues, seems #1081 also requested history swap method customization for alpine.
Anyway, sounds reasonable to me to expose this so users can use another swap method for history restores if they want to (after all, we let them customize the swap method for everything else).
If you're interested in diving into this topic and opening PRs to address those issues (exposing the history swap method, and/or adding documentation to work with alpine), please feel free to do so!

[MichaelWest22]

One option to handle history issues with alpine may be to use the history config items like historyCacheSize=0 and refreshOnHistoryMiss=true So that it will not use htmx to store and restore history. It will then do full page loads when using back button and while it will be a little slower it will then load all alpine enabled items fresh each time

[scrhartley]

When I've had an issue with boost I've got Alpine to listen to HTMX events,
e.g.

x-on:htmx:before-history-save.window="console.log('cleanup before change')"

[croxton]

I wrote an extension to help with history restores that will prevent Alpine errors on back/forward navigation:

https://gist.github.com/croxton/e2c33bd22591f9a5bd8c9d23a56c9edc

It also helps to use inline directives over runtime declarations, for example use x‑data over Alpine.data.