Efficient use of htmx.process with Alpine-Morph Extension

[gbourant]

I use the alpine-morph extension. When the swap is set to morph it triggers the extension. If the response contains htmx attributes they won't work. In order to make them work, I'll have to call the htmx.process. In order to do that, I created the following extension.

htmx.defineExtension('test-morph', {
    onEvent : function(name, evt) {
        if(name=== 'htmx:afterSettle'){
            htmx.process(evt.detail.target)
        }
        return true;
    }
})

The problem with that is that it's always called for all type of swaps. How can I avoid unnecessary calls to htmx.process? I mean, in other methods like isInlineSwap and handleSwap I have the swap style. I looked for the swapStyle in evt but I couldn't find it.

[gbourant]

Also, I found out that the following happens too. After the successful call of htmx.process of test-morph extension, the template works again but until a x-if is triggered.

When the x-if evaluates to true then false and then again to true, even after calling again the htmx.process, it won't work.

The htmx-internal-data.listenerInfos of <form> contains

When I hover in the dev tools the htmx-internal-data.listenerInfos.on properties, the htmx-internal-data.listenerInfos[0].on gets highlighted in the page (meaning that the element still exists) but the htmx-internal-data.listenerInfos[1].on is not highlighted in the page (meaning that the element does not exists).

Which means (I think) that the htmx-internal-data contains a reference to an (old) element that does not exist anymore. (when x-if is true, it creates the dom elements, when it's false it destroy them).

So what could happen is that the htmx.process uses the htmx-internal-data with an old reference but not the new element which is created with x-if ?

<form id="my-form" hx-trigger="submit,input changed delay:500ms from:#otp" hx-swap="morph" hx-ext="alpine-morph,test-morph">

<template x-if="some-condition">
     <input x-init="htmx.process($el); htmx.process(htmx.find('#my-form'));" type="text" id="otp" />
</template>
</form>

[gbourant]

I removed the htmx-internal-data attribute of the form element and then called the htmx.process and it worked. delete htmx.find('#my-form')['htmx-internal-data']

The reason why the subsequent calls to the htmx.process are not working is because the form's attribute htmx-internal-data is already initialized, so when x-if becomes true and I try to call the htmx.process to make the input changed delay:500ms from:#otp work again, it won't work because htmx-internal-data already exists (or maybe because firstInitComplete is true, didn't test that).

Of course, deleting the htmx-internal-data is too hacky, what's the best way to fix this? I mean, that's why I call the htmx.process in the first place, to make it work. Maybe a method htmx.process(element, force=true) ? Does it have side effects when I delete the htmx-internal-data?