Add flush() method or clear all states each time on start() method

[Thanty]

Greetings!

Due to our application lifecycle we are in need of calling Alpine.start() manually after switching pages.

Problem is when you call start() it doesn't clear all onAttributeAddeds, onElRemoveds and onElAddeds.
If an element has any x-on events, they are being duplicated.

Is there a chance to clear "Addeds" inside start() or add public flush() method?

https://codepen.io/Thanty/pen/MWQGMMy

Thanks in advance!

[SimoTod]

What's your use case? If you are adding new elements to an existing page they'll get initialised automatically you don't need to call start (and for the reasons you mentioned, you shouldn't).

[Thanty]

Simo, pages are loaded via ajax, some extra scripts can be loaded and they can contain additional Alpine.data(), bind(), directive() or whatever.

Alpine renders new elements before additional scripts are executed and therefore it doesn't see new directives.

So the lifecycle looks like:

• load page and scripts
• start Alpine
• request new page
• "pause" Alpine
• load scripts and render requested page
• "restart" Alpine with new directives and data

[SimoTod]

Ignoring the question for one second, it's going to be more complicated than that (Not just because of Alpine):
Inline scripts loaded via ajax are usually ignored unless you use a workaround like jQuery used to do.
scripts loading a remote file would work but the file itself can take more or less time depending on multiple factors (for example the network latency).

Assuming you already know how to handle those issues, to pause and restart Alpine you can

• call Alpine.deferMutations
• make your changes
• call Alpine.flushAndStopDeferringMutations

If you are taking a SPA-like approach, you could consider loading all your javascript files at once.

[Thanty]

Thanks for the proposal with deferMutations!

Works like a charm.