-
-
Notifications
You must be signed in to change notification settings - Fork 232
Vanilla in Zag 1.0 #2309
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
I've got a quick PoC here for anyone interested in completing it
953476b
Replies: 4 comments 8 replies
-
Would also love to see the vanilla examples updated :)
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
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?
Beta Was this translation helpful? Give feedback.
All reactions
-
I've got a quick PoC here for anyone interested in completing it
953476b
Beta Was this translation helpful? Give feedback.
All reactions
-
👀 1
-
Thank you, we will take a look tomorrow and see if we can get it working nicely for us. Much appreciated.
Beta Was this translation helpful? Give feedback.
All reactions
-
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>'
Beta Was this translation helpful? Give feedback.
All reactions
-
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?
Beta Was this translation helpful? Give feedback.
All reactions
-
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?
Beta Was this translation helpful? Give feedback.
All reactions
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
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.
Beta Was this translation helpful? Give feedback.
All reactions
-
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. 😄
Beta Was this translation helpful? Give feedback.
All reactions
-
FYI @starting-style is amazing and just simply works wonders. CSS is really starting to get good now! Thank you
Beta Was this translation helpful? Give feedback.