Why not Svelte?

[frederikhors]

🚀 Feature request

Vue, React, Solid, why not Svelte?

[segunadebayo]

Hi @frederikhors,

The only thing holding us back from supporting Svelte is sveltejs/svelte#5112

An important aspect of Zag is that we manage the event handlers internally and provide a way for users to spread it onto the elements. Svelte doesn't support events in spread props just yet.

When it does, we'll add support for it.

[frederikhors]

Can we leave this open?

[anubra266]

Can we leave this open?

Yeah sure, It'll help others looking for Svelte understand why too.

[impactvelocity]

Looks like some progress for svelte is coming? :)

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

I tried it out, but couldn't figure out the api.connect normalizeProps.

[csenio]

I managed to get it working by making use of svelte actions!! https://codesandbox.io/s/zag-svelte-n01f02?file=/Select.svelte

@segunadebayo Is there a scenario where that wouldn't work?

[anubra266]

@TGlide mentioning custom events actually gave me an idea. Dispatching a custom event in the agnostic logic, and listening for it in the svelte adapter.

[TGlide]

@TGlide mentioning custom events actually gave me an idea. Dispatching a custom event in the agnostic logic, and listening for it in the svelte adapter.

Oh nice! I'd love to know how that goes 🤩

[TGlide]

Also, I have a (hacky) way to pass in event listeners without actions: https://svelte.dev/repl/daf364f729e54818856d7e718c208fb9?version=3.59.1

I did some experiments over on my library, if you're curious to see a more advanced implementation:

• Store with event listeners: https://github.com/TGlide/radix-svelte/blob/feat/builders/src/lib/internal/stores/derived.ts
• Component using said store: https://github.com/TGlide/radix-svelte/blob/feat/builders/src/lib/builders/collapsible/index.ts
• Component usage: https://github.com/TGlide/radix-svelte/blob/feat/builders/src/routes/builders/collapsible/preview.svelte

Don't know if this is something that could/should be used in Zag, but thought it'd be nice to share :)

[anubra266]

@TGlide we don't use actions for attributes, just events..
And we can't keep logic in stores because Zag is agnostic.

[TGlide]

I meant events, that was a typo on my end. And I see, makes sense!

[Not-Jayden]

@segunadebayo FYI Svelte 5 is moving away from on:x syntax to onx event props that can be spread directly onto elements (example)

Would love to put my hand up to work on this (and subsequently the Ark UI implementation). Svelte 5 is still in alpha but keen to get a head start.

[Not-Jayden]

Maybe I'll explore this for myself in a separate repo and see where I get. I don't fully understand what the limitations are yet with achieving a spec-compatible implementation, but I'm sure it can get at least 95% of the way there.

[cschroeter]

@Not-Jayden

I'm happy to help.

[ditorodev]

Im curious if there has been progress here? This is very promising, if theres something I can help with im happy to (sporadically, don't have a bunch of time)

[Not-Jayden]

Not from me personally. I was going to re-assess once Svelte 5 reaches general availability as there's been a fair few significant changes since I first commented. I imagine that should be within a couple months or so.

If anyone is super keen to get a jump on it now though please feel free though.

[gbouteiller]

@Not-Jayden actually, i'm currently working on it as we speak. I'm working in parallel on the docs and i'll have the beginning of something next week.

[segunadebayo]

We've got the first installment of Svelte support merged. Although not publicly available yet, we'll polish it a bit more and prepare it for release pretty soon.

[frederikhors]

Any news?

[anubra266]

@frederikhors Most things are in place already; you can see try it, snippets are here.
Basically just waiting for a stable svelte v5, then we can add test suite and go live.