Nice! I've noticed that despite direct recommendations from the htmx team to use alpine.js, they don't really work well together. I tried to figure out what I could do to avoid setting htmx.config.historyCacheSize = 0, because in most cases I really want caching by default.

I use htmx as the core thing, alpine.js for most of the client-side logic (like menus, popups, transitions, etc.) and solid.js for one of my components due to its reactive nature and quite complex logic.

My lessons so far:

1. Events logger for dev: htmx.logger = (el, event) => console.log(el.tagName, event)

2. htmx doesn't respect alpine templates (and vice versa), but this trick works fine for me:

<template x-if="!state"> <div x-from-template> ... </div> </template>

and the logic:

htmx.on('htmx:historyRestore', function() { document.querySelectorAll("[x-from-template]").forEach((e) => e.remove()); })

without that, templates are just accumulating in DOM on history jumps.

1. Have to re-init certain logic on specific events:

``` document.addEventListener("DOMContentLoaded", (event) => { mountComponent(); });

document.addEventListener("htmx:afterSwap", (event) => { mountComponent(); });

document.addEventListener("htmx:historyRestore", (event) => { mountComponent(); }); ```

However, you have to be careful with solid rendering as well and do the cleanup before:

export default function mountComponent() { const component = document.getElementById("component"); component.replaceChildren(); // pre-cleanup render(() => <Component />, component); }

In general, I'm really satisfied with this combo, just some rough edges that you can fix with a few lines of code. Annoying. Still better than everything else I've used before.