Integration with web components

[hypeJunction]

It's getting tiring, building and rebuilding things in React and Vue, so I am wondering if we should take the plunge and go in the direction of web components. I really like what zagjs is doing, as it seems, just like me, you are fed up with rewriting the same code over and over from project to project. But before I do any further digging, what's your take on making zagjs working with web components, anything you see that might make it difficult or impossible? I was thinking lit or webc integration could be an interesting thing to try out.

[segunadebayo]

Totally feel you @hypeJunction

We’re also all into modeling components once and reusing everywhere possible.

Regarding web components, we’re open to seeing a Lit implementation similar to Shoelace https://github.com/shoelace-style/shoelace, or Stencil.

Feel free to open a draft PoC of how this could work.

[hypeJunction]

Just doing some legwork reading. This could be a showstopper lit/lit#923

[segunadebayo]

There’s an helper library that can help with this
https://github.com/open-wc/open-wc/blob/master/packages/lit-helpers/CHANGELOG.md

[hypeJunction]

Perhaps the connector could expose a render function that spells out the template with all the props and events, but it might require quite some work to express all component machines in that manner.

[ico85]

There is a vanilla example in this repository for vanilla-ts. Can I use it with lit web-components? Or do we need a lit implementation? Tried to figure it out, but it looks very complicated to me :/

I wanted to implement an accordion web-component with lit and I thought it would be nice to use zag's accordion machine.

[anubra266]

Previous lit samples are here
https://github.com/chakra-ui/zag/blob/v0/examples/lit-ts/src/accordion-element.ts
Try extending current vanilla samples to match this