How can I send updates from an x-data to an external JS script?

[noam-elbaz]

Hi.

I'd like to observe changes to: x-data="count: 0" (or something like that) in an external Vanilla JS script ?

(I am pretty good with importing data and functions from outside Alpine internally, but not the other direction)

Thanks.
Noam

[SimoTod]

An Alpine store is usually a good option but it really depends on what you want to do.
https://codepen.io/SimoTod/pen/RwZRojG

[noam-elbaz]

Thanks. I want my external JS script (non-alpine) to get / receive / access the data that comes from within Alpine.

Any ideas how to do that?

Thanks again

[danddanddand]

As mentioned, you can just use Alpine.store for your state and Alpine.effect to watch for changes to the state. Either that or dispatch events from Alpine and listen for them in non Alpine code. I prefer not to use events to communicate, usually Alpine store is cleaner.

[noam-elbaz]

$dispatch can do that?! (I thought it was only for communicating within Alpine between components)

Can you show me a simple example?

Thanks so much.

[danddanddand]

It's just a delegate to element.dispatchEvent(new CustomEvent(...)) so you'd just listen for it like you would any other event. https://developer.mozilla.org/en-US/docs/Web/Events/Creating_and_triggering_events

[noam-elbaz]

@danddanddand Thanks alot!
Store is working nicely.
I had to experiment for a while to figure out how to use the Store in the right way.
But now it's coming together.
I'm able to easily update simple Store data and send that out to the WebSocket.
And it shows up on the Server side.