Vanilla in Zag 1.0

[cschmatzler]

Heya! Do you plan on upgrading the examples for vanilla-ts to Zag 1.0 as well? As of now, it's broken since the package.json was bumped but the code itself still assumes machine-as-a-function.

[jramke]

Would also love to see the vanilla examples updated :)

[segunadebayo]

I have this in mind but didn't get to implement it. The vanilla setup will be close to the v0 external store implementation.

I will get to it when I have some free time.

[ShaneYu]

Please do, I've been wrecking my head trying to get the zag machines for tooltip and others working with vanilla JS/TS. Annoyingly also, all AI tools such as ChatGPT really struggle and are absolutely useless at helping to get this working.

Even if you only showed us how to do it with one component so we can figure the rest of them out form would be perfect. Do you have a rough ETA on when you may have this ready for us?

[segunadebayo]

I've got a quick PoC here for anyone interested in completing it
953476b

[ShaneYu]

Thank you, we will take a look tomorrow and see if we can get it working nicely for us. Much appreciated.

[babakfp]

There is this TS error:

Type '<T>(props: () => BindableParams<T>) => Bindable<T>' is missing the following properties from type 'BindableFn': cleanup, refts(2739)
types.ts(14, 3): The expected type comes from property 'bindable' which is declared here on type 'ContextParams<T>'

zag/examples/vanilla-ts/src/lib/machine.ts

Line 77 in 3081d6c

bindable,

[jramke]

The PoC is working great, thanks.
I noticed some bugfixes and changes recently and wondered if there plans to release it the vanilla code as its own package like @zag-js/vanilla?

[ShaneYu]

The PoC has been great and much appreciated, however I've noticed that only enter animations work for components such as dialog. We really want a exit animation and from what I can tell means we need to utilise the https://zagjs.com/components/react/presence component.

We've attempted to use this but not getting anywhere with it, is this something you could get into your PoC to help us out?

[segunadebayo]

Consider using @starting-style to style the transition from and to hidden.
https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style

Composing the presence and dialog machines might be a bit tricky

[ShaneYu]

Thanks, I've not heard of that one yet - will take a look. Shame it's only supported since 2024 though, but probably okay as entry animations work, exit ones just being snappy isn't the end of the world.

[ShaneYu]

I do wonder as well if the vanilla JS examples should really be custom elements (web components); given that they've been supported since 2016 and have a lot built into them (attribute monitoring, mount and unmount events) and can support custom events and more. 😉

Unfortunately I hadn't thought about using web components when we started building out our vanilla JS application, it's a little late in the day to change it; but might be an idea for a Zag JS implementation/framework. 😄

[ShaneYu]

FYI @starting-style is amazing and just simply works wonders. CSS is really starting to get good now! Thank you