A $refresh equivalent for Alpine v3?

[carltongibson]

Hi. 👋.

I'm looking for an equivalent of $refresh that would work for Alpine v3.

I can't spot a hook equivalent to the old updateElements, so I'm wondering if you could suggest as to how this could be done?

No doubt I'm holding it wrong but any pointers here would be greatly appreciated. 🙂
Thanks.

[KevinBatdorf]

Can you share a demo of how you want to use it?

[SimoTod]

@KevinBatdorf That example unfortunately doesn't work with x-for, see https://codepen.io/SimoTod/pen/jOmBrBe?editors=1010

I have another solution with the same defect: https://codepen.io/SimoTod/pen/NWjdjvv

The refresh helper needs to clean up x-for's and x-if's, I think

[carltongibson]

Thanks for the super examples both of you! Very helpful for me.

[KevinBatdorf]

Hmm yeah good point @SimoTod

I tried using clone() initially but had other issues before. I think it only works within the same component?

I guess if we wanted to package it up we should definitely solve all the edge cases.

I wonder how useful a $refresh() helper is though with most people using Alpine.store anyway. I sort of just made the demo quickly for fun while chatting in Discord without much consideration

[SimoTod]

Yeah, my example work only inside the component but there's no reason why it can't do a Alpine.closestRoot of a query selector to get an external component.
I used clone() because it natively handles duplicate listeners and other undesired side effects without having to really clone the node (which would kill listener created by other libraries if there are any). Still not working with x-for unfortunately, it would be good if Alpine was exposing destroyTree but it doesn't.

[KevinBatdorf]

I suppose we could just PR it. He accepted the initTree PR. What would be a good use case other than refresh?

[SimoTod]

Not sure if there are any. Even the refresh itself is a bit weird because Alpine should automatically track any changes.

[KevinBatdorf]

Yeah, maybe someone will come here in the future with a decent use case, but I think generally there are better ways to solve it