A case for Alpine.stop() and/or Alpine.destroy()

[stepanjakl]

Hello guys,

I have been running into an issue with a CMS system I have been working with. This application essentially loads the site, and then "enhances" the DOM with additional elements and properties. I integrated Alpine.js for additional features of course. However, once Alpine starts up and the DOM begins changing, on each "enhancement" the Alpine restarts its initial script (i.e. x-init or init()).

I composed an isolated example: https://codepen.io/stepj/pen/LYeyQRe

It absolutely makes sense that Alpine reinitialises any Node tree that is newly added to the DOM. Nonetheless, for the sake of full control over the script lifecycle, it would be beneficial to have an option to either pause (Alpine.pause() / Alpine.stop()) or fully destroy the Alpine.js instance (Alpine.destroy()). What do you think?

I brought this up in the Discord group and was informed that such intervention would be time-consuming to develop. I fully understand, so I am just leaving it here for a discussion and as a potential feature idea for future versions.

[SimoTod]

Stopping Alpine is usually the wrong solution and it will give you more problems than the ones you fix.

You can just use Alpine.mutateDom to make changes that Alpine would ignore. In your example

Alpine.mutateDom(() => {
      originalNode.replaceWith(newNode)
 })

but that means that, if you had an Alpine component in originalNode, that would just stop working so I'm not sure you really want that.

Probably what you really want is to use Alpine.morph to update the HTML.

See https://codepen.io/SimoTod/pen/jOYmzLG for some ideas

[stepanjakl]

@SimoTod That's very helpful, thank you.

[Christopher-Hayes]

Thanks! Didn't realize mutateDom was a thing, works flawlessly.

[stepanjakl]

Would there possibly be a "global solution" which allows to stop detecting any DOM changes and then re-initiating the tree via Alpine.initTree(document.body) as such? I am unfortunately not able to pin point which part of the DOM will change with that CMS.

[ekwoka]

mutateDom.

but it should also just work to replace everything and Alpine can handle that. It shouldn't run its init multiple times. It will hook into new elements as expected.

[stepanjakl]

#359 relevant