Vanilla example does not actually update props

[cschmatzler]

🐛 Bug report

Running examples/vanilla-ts, the button state updates, but the actual input value does not update.

CleanShot.2024-05-23.at.23.49.07.mp4

💥 Steps to reproduce

1. Run npm run dev inside examples/vanilla-ts.
2. Click the Check and Uncheck buttons
3. Watch the DOM elements with x-bind not actually update

💻 Link to reproduction

Not needed, as it's the actual example in the repo.

🧐 Expected behavior

The DOM gets updated and value is set to on/off.

🌍 System information

Software	Version(s)
Zag Version	workspace:* on latest main
Browser	Arc
Operating System	macOS 14.4

[segunadebayo]

The vanilla example is still under development. I’m looking to remove alpine all together.

[cschmatzler]

You've been an absolute hero writing all of these in the past few days! ❤️

[cschmatzler]

Hey @segunadebayo , I'm sorry but it's me again 😄
Do you have any pointers on how to do something like Combobox in Vanilla? It's obviously missing the useState/createSignal/ref/... reactivity so I've been struggling making it work. Would already appreciate a hint towards a reactivity library that you'd use.
Cheers

[segunadebayo]

I'd recommend trying the zag-js/store package. It can give you the reactivity you need.

https://github.com/chakra-ui/zag/tree/main/packages/store

[segunadebayo]

Closing — the vanilla adapter (@zag-js/vanilla) was rewritten in v1.0 and this issue no longer applies.