Scenario where components being injected into DOM can be initialized multiple times

[johndwells]

I'm building an app with Unpoly & AlpineJS (I've done this a handful of times and it's always gone beautifully), and encountered a scenario where AlpineJS components were being initialized multiple times.

(Unpoly is a tool similar to HTMX, Intercooler, Hotwire etc. It fetches & injects server-rendered HTML into the DOM.)

I first raised it with the Unpoly community, and the framework's author presented a working code example to suggest there may be an issue with Alpine's mutation observer code:

I think there could be an issue in Alpine's MutationObserver that evaluates [x-init] when a new element is attached to the DOM. The issue can be observed when the new element with [x-init] is not attached directly, but is a child of the attached element.

To give a minimal example without Unpoly, the following code appends a single element with [x-init], but the callback in [x-init] is called twice:

container = document.createElement('div')
document.body.appendChild(container)
alpineElement = document.createElement('span')
alpineElement.setAttribute('x-data', '')
alpineElement.setAttribute('x-init', 'console.log("alpine init")')
container.appendChild(alpineElement) // prints "alpine init" twice

^ unpoly/unpoly#314 (comment)

I dropped this code sample into a codepen to demonstrate, and I also added a 2nd block of code that avoided the duplicate initialization - by wrapping the 2nd element creation & insertion in a setTimeout() call (like a $nextTick where we give the browser a chance to finish updating the DOM before carrying on with the 2nd element insertion):

https://codepen.io/johndwells-the-decoder/pen/QWMVYRR

Any thoughts?

[SimoTod]

Definitely a bug, thanks for narrowing it down. I've raised #2376 to fix it.