search

techniq / svelte-ux

Collection of Svelte components, actions, stores, and utilities to build highly interactive applications.
https://svelte-ux.techniq.dev/
MIT License
679 stars 34 forks source link

Svelte 5 compatibility #144

Open techniq opened 8 months ago

techniq commented 8 months ago

Issue to track any Svelte 5 compatibility issues. Hoping close to 0 changes are required in Svelte UX to support 5.

⚠️ PENDING: SelectField selection not working (bind:value issue?)

example: https://svelte5-docs.svelte-ux.pages.dev/docs/components/SelectField

⚠️ PENDING: sveld (API docs) not compatible

issue: #435

⚠️ PENDING: MultiSelect hangs browser (MultiSelectField / MultiSelectMenu appear to work fine)

example: https://svelte5-docs.svelte-ux.pages.dev/docs/components/MultiSelect

⚠️ PENDING: Duration Cannot access 'timer' before initialization

example: https://svelte5-docs.svelte-ux.pages.dev/docs/components/Duration

✅ WORKAROUND: Dialog/Drawer can only be opened once (likely portal related). Removes subsequent elements. Issue with portal'd content and multiple elements in same

issue: https://github.com/sveltejs/svelte/issues/12440, see also: https://github.com/sveltejs/svelte/issues/12427#issuecomment-2226916099 example: https://svelte5-docs.svelte-ux.pages.dev/docs/components/Dialog workaround: Place each portal'd content into separate {#if} block (commit)

✅ WORKAROUND: Portal actions timing is different with available DOM

issue: https://github.com/techniq/svelte-ux/issues/437 fix: add explicit document.body for example, likely only affects docs (presence of .PortalTarget element)

✅ WONTFIX: <tr> is invalid inside <table>

issue: https://github.com/sveltejs/svelte/issues/12090 fix: add explilcit <tbody>

✅ FIXED: can only receive attributes, not directives

issue: https://github.com/sveltejs/svelte/issues/10382 fix: https://github.com/sveltejs/svelte/pull/10391

✅ FIXED: type attribute must be a static text value if input uses two-way binding

Fixed via: https://github.com/sveltejs/svelte/pull/9713 Reported in discord. If ran within the Svelte 5 beta (ex. 5.0.0-next.15), currently Input throws a 'type' attribute must be a static text value if input uses two-way binding error

image

✅ FIXED: let directive on <svelte:self>

issue: https://github.com/sveltejs/svelte/issues/9710 fix: https://github.com/sveltejs/svelte/pull/9727

CropWatchDevelopment commented 8 months ago

I found a fix for this, I made a PR #145. There is one more problem with TreeList.svelte, but I am hoping to get early feedback on this fix first!

techniq commented 8 months ago

Thanks @CropWatchDevelopment, but it looks like this is a regression with the Svelte 5 compiler (see issue and Twitter/X discussion, including confirmation by Simon (Svelte/Vercel team).

I also found a workaround using <svelte:element>, although I would prefer to wait for it to be fixed upstream (which it should be). It looks like Svelte 3/4 had an explicit check for bind:this that likely was overlooked as part of the Svelte 5 rewrite, so likely the fix will be similar (and hopefully as simple).

Would it be OK if we wait a bit to see if this is resolved upstream before we consider a workaround?

I'm curious what you found in TreeList.

CropWatchDevelopment commented 8 months ago

100% Yes OK to wait until later. After checking the Svelte repo and seeing all of the v5 issues logged. I am thinking I may wait a few months even before making the move. It seems like v5 may take a bit be fully worked out :) I will pull down the PR, but Hope to help out in the future!

techniq commented 8 months ago

100% Yes OK to wait until later. After checking the Svelte repo and seeing all of the v5 issues logged. I am thinking I may wait a few months even before making the move. It seems like v5 may take a bit be fully worked out :) I will pull down the PR, but Hope to help out in the future!

FWIW, the bind:this issue is already fixed and should be on 5.0.0-next.16 once released (already on the preview REPL). I was going to test my StackBlitz until I realize .16 wasn't published yet.

TBH, that's my plan ATM. As much as I love all the great things coming in Svelte 5, I personally will wait closer to the official release before I focus too much on it. My plan is for Svelte UX (and LayerChart) 1.0 releases to be fully compatibility with Svelte 3/4/5, and 2.0 I'll probably start embracing some of the Svelte 5 features (runes, snippets, etc) which will likely break 3/4 compatibility, but as long as 5 is a drop in replacement for 3/4, I think that's a fair tradeoff.

Just the speed/size improvements in 5 running non-rune mode is exciting.

Thanks for the PR and discussion.

dimfeld commented 5 months ago

Filed https://github.com/sveltejs/svelte/issues/10382 because SelectField.svelte fails to compile with latest Svelte 5.

CleanShot 2024-02-02 at 20 42 27

techniq commented 5 months ago

Thanks @dimfeld for submitting the upstream issue with repo. I've updated this issue's description to make it easy to track any known Svelte 5 compatibility issues. The Svelte team has been amazingly fast resolving these thus far.

dimfeld commented 5 months ago

Haven't tried it but I think this will hit svelte-ux as well https://github.com/sveltejs/svelte/pull/10395

edit: this one is fixed now

techniq commented 2 weeks ago

Identified the root cause of the Dialog/Drawer problem (portal'd content with elements in the same conditional) - https://github.com/sveltejs/svelte/issues/12440

techniq commented 2 weeks ago

Workaround identified - https://github.com/techniq/svelte-ux/commit/54d9d39ee7bdb712f6c2e85faea1701aae9fe3ba