Closed gursheyss closed 1 year ago
I'm talking to the Radix Svelte team about upgrading to Svelte 4.0 which will resolve these issues. We're at the mercy of that project at the moment. If you want to use the project immediately, I'd suggest using the latest Svelte 3.X release until this has been resolved.
How does the retirement of the radix svelte library factor into resolving this issue?
https://github.com/radix-svelte/radix-svelte/blob/develop/ANNOUNCEMENT.md
Also how does it affect the future of this library, and possible migration to melt ui?
Also how does it affect the future of this library, and possible migration to melt ui?
@mpost RE your 2nd question, Melt is written by the same dev as radix-svelte with help from Huntabyte. Huntabyte is planning to move shadcn-svelte to use melt-ui in place of Radix UI.
@jasongitmail Thanks for the insight. :)
Any update on that. I would love to use it with Sveltekit and svelte4
@juliuslipp the issue is radix-svelte
here?
@philschmid I guess so. It is the only dep. that shows the error of svelte3 rn. Cannot test it properly rn though.
Another workaround would be to just install Svelte3, run init, and then install 4 again. Radix-
npm i -S svelte@3
npx shadcn-svelte init
npm i -S svelte@4
Thanks sounds not very stable. I guess i need to continue using NextJS :/
Thanks sounds not very stable. I guess i need to continue using NextJS :/
It's not very stable yet unfortunately. I've actively been working with others on MeltUI which will replace Radix Svelte, but as I'm sure you can imagine building a headless UI library with all of these components isn't a super quick process!
You can track the progress on it @ https://github.com/melt-ui/melt-ui - we're getting close to a 1.0 release and when that occurs and we have some stability, shadcn-svelte will also have stability!
Sorry about that :/
Let me know, if you need some support. Would be open to help out a little!
@huntabyte thank you for the update and thank you for working on that! Its a huge help for the svelte community! Will Melt-UI replace radix or will it replace the shadcn version?
It will replace Radix! Melt is 100% headless :) also when that occurs I'll update this project to catch up with the new themes and such that shad has released on the main project!
Fantastic! Do you think we could keep backwards compatibility? Since i am now thinking of going with svellte3 and then migrating as soon as melt-ui takes over
Hi @huntabyte ! Thank you so much for the great job you are goind ! :) Can you share with us the timing you have in mind to make all components compatible with svelte 4 ? :)
There was a release yesterday in radix-svelte
to svelte 4. https://github.com/radix-svelte/radix-svelte/releases/tag/v0.9.0
@philschmid Does it means it's ok to use this library with svelte 4 ?
It will replace Radix! Melt is 100% headless :) also when that occurs I'll update this project to catch up with the new themes and such that shad has released on the main project!
I've been playing around with Melt and I was wondering how this would be possible given that Svelte doesn't allow event forwarding for custom components. This was an issue Thomas pointed out as a pain point with radix-svelte
.
As an example (see below), assuming you'd create your own Button
element in shadcn-svelte
, how would you create a Dialog
component using that Button
element as the trigger? I'm curious if you have a solution for this, thanks.
PS: Love what you're doing!
<!-- Button.svelte -->
<button
{...$$props}
on:click
on:change
>
<slot />
</button>
<!-- Dialog.svelte -->
<script>
import Button from '$lib/components/ui/Button.svelte'
import { createDialog } from '@melt-ui/svelte';
const { trigger, portal, overlay, content, title, description, close, open } = createDialog();
</script>
<!-- this Button component will not work since we can't forward events -->
<Button {...$trigger} use:trigger>
Open dialog
</Button>
<div use:portal>
{#if $open}
<div {...$overlay} use:overlay />
<div
{...$content}
use:content
>
<slot name="content" />
</div>
{/if}
</div>
Hey thanks for the kind words @srazzak!
We're going to be publishing some "componentization" guides once the API is more stable, which I'll likely write as I work through the implementation details of shadcn-svelte 1.0 ✅
So instead of saying use:trigger on the Button component, you would have to pass that trigger action as a prop.
We'll have some helper types eventually as well to assist with this, but this will all be abstracted away in shadcn-svelte as DialogTrigger, etc., as it is now.
The regular button element would take the action prop (maybe more than one) which would could default to a dummy do nothing action and then just have use:
If you join the discord there's a few peeps in there that are already building some pretty nice components with it. I'd write some better examples but I'm on mobile atm.
Ahhh okay, that makes sense. I'll take a look at the Discord.
Looking forward to the release and thanks Hunter!
Now that radix-svelte
has been updated to support Svelte 4, is there an upcoming release to shadcn-svelte
that will support Svelte 4 as well?
Closed by #150
Current Behavior
When installing some components, such as labels or radio groups,
Expected Behavior
Successfully added component and install radix-svelte
Steps To Reproduce
npx shadcn-svelte add input
More Information
Ive tried using
npm install radix-svelte --legacy-peer-deps
but adding some components still doesn't work.