Alpine + HTMX

[SirMetathyst]

Will alpine work if I fetch a html partial from the backend and it contains an alpine component?

Example:

<div hx-target="this" hx-swap="outerHTML">
    <p>comment text...</p>
    <button hx-get="/comment/1/edit" class="btn btn-primary">
    <!-- Html with alpine component replacing div... textarea form with alpine word/character count? -->
    </button>
</div>

[mshamma]

Not your specific use case, but I use a wrapper method for 'bridging' Alpine and HTMX.

document.addEventListener('alpine:init', () => {
    initWrapper(null);
});

// could be any htmx event here
document.body.addEventListener('htmx:beforeSwap', function (evt) {
    initWrapper(evt);
});

function initWrapper(evt) {
        // I use Alpine.store() as one global data facade for my site.
        Alpine.store('darkmode', {
            on: false,
 
            toggle() {
                this.on = ! this.on
            }
            // add more stuff here
        })
}

[SimoTod]

I'm not sure trying to manipulate the response is a good idea. Can you try something as simple as

    <script>
      document.addEventListener('htmx:beforeSwap', function (event) {
        Alpine.deferMutations()
      })
      document.addEventListener('htmx:afterSettle', function (event) {
        Alpine.flushAndStopDeferringMutations()
      })
    </script>

I tried on an online playground an it worked for me. The code just stops Alpine from trying to initialise anything before the swap, and it restart it after the dom is settled (there's also a afterSwap event but I think it fires too early).

[ekwoka]

@SimoTod This doesn't handle the issue of script tags themselves being marked as started by the parsers. The script tags won't evaluate.

Or does HTMX already handle that?

[SimoTod]

@ekwoka I think HTMX handles it
See https://lassebomh.github.io/htmx-playground/?url=https%253A%252F%252Fgist.githubusercontent.com%252FSimoTod%252F2c82791bb30333061af7de16f154a52a%252Fraw%252F716f4457f370f6b41f157969151f8ca21a9aeb45%252Fhtmx%25252520test

[SimoTod]

It uses https://github.com/bigskysoftware/htmx/blob/master/src/htmx.js#L570

[ekwoka]

Right on