feat: improve support for svelte

[anubra266]

Trying out svelte through actions based on this: #262 (comment)

Issues after first try

• I tried accordion, and there seems to be a render issue where the items all flash on initial render, very possible such will happen for other components.
• The sample uses sveltekit, there seems to be a problem with initial render, where zag is trying to access the browser before it's available, so it throws a 500 - Most likely SSR

[changeset-bot]

🦋 Changeset detected

Latest commit: 8817f9c

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package "svelte-kit" depends on the ignored package "@zag-js/shared", but "svelte-kit" is not being ignored. Please add "svelte-kit" to the `ignore` option.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
zag-nextjs	✅ Ready (Inspect)	Visit Preview	Apr 2, 2023 10:39pm
zag-solid	✅ Ready (Inspect)	Visit Preview	Apr 2, 2023 10:39pm
zag-vue	✅ Ready (Inspect)	Visit Preview	Apr 2, 2023 10:39pm

[segunadebayo]

Geneally speaking, it's a good idea to have Svelte in there.

It's SSR I'm mostly concerned with here, I understand that i can be achieved with actions but they don't work in SSR.

I think Zak might have some solutions for Svelte SSR already. Please reach out to him

[csenio]

We could use the actions only for event handlers and spread the remaining props like normally.
Would be a bit less pretty, but should get rid of the ssr issues.

[segunadebayo]

That would be amazing @jescowuester. Looking forward to a POC for this.

[Shyrro]

Hey @anubra266 !

I wanted to push something to your PR but wasn't able to(I don't have the rights). So instead i created this repo : https://github.com/Shyrro/test-zag-svelte

I made the spread work with the accordion machine. I'm still having reactivity issues but those are mainly coming from what i did in the use machine hook and not related to SSR or anything. I'm missing reactivity somewhere and didn't dig further.

As you can see when launching the repo, the props are spread correctly, the events also have no issue being used correctly. I added a counter so that it's obvious.

Your code was good, and i think your code is working(i just changed some stuff for the useMachine and normalizeProps), but the main issue i had in the zag repo, is that for some reason, importing packages from the workspace doesn't seem to work in SvelteKit.

In the push i wanted to make, i changed the version for the accordion machine, that way i explicitly download the npm version instead of the workspace one and i didn't have anymore issues.

Maybe @segunadebayo can help us resolving these?

Here i forked the zag repo and made an example that emphasizes this : https://github.com/Shyrro/zag/tree/svelte-trial

This works but only because i'm using the machine from npm instead of the zag workspace

[segunadebayo]

@anubra266 @Shyrro. Let's get this branch merged ASAP.

Don't want us to have a long-running branch

[anubra266]

@segunadebayo sure. Other changes will be in subsequent pull requests