Svelte 5 compatibility

[techniq]

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

---

⚠️ PENDING: sveld (API docs) not compatible

issue: #435

---

✅ FIXED: MultiSelect hangs browser (MultiSelectField / MultiSelectMenu appear to work fine)

example: https://svelte5-docs.svelte-ux.pages.dev/docs/components/MultiSelect (see screenshot)
fix: #507

---

✅ FIXED: SelectField raises node_invalid_placement_ssr

Server-side

node_invalid_placement_ssr: <button> (src/lib/components/SelectField.svelte:415:0) cannot contain <button> (src/lib/components/Button.svelte:446:0)

This can cause content to shift around as the browser repairs the HTML, and will likely result in a hydration_mismatch warning.

Client-side

Uncaught (in promise) HierarchyRequestError: Failed to execute 'appendChild' on 'Node': This node type does not support this method.

fix: 4e17218

---

✅ FIXED: Form $: dispatch('change', ...) called immediately (not after change)

examples: svelte 4, svelte 5
fix: f419435

---

✅ FIXED: SelectField selection not working (bind:value issue?)

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

---

✅ FIXED: Duration Cannot access 'timer' before initialization

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

---

✅ 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: sveltejs/svelte#12440, see also: sveltejs/svelte#12427 (comment)
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: #437
fix: add explicit document.body for example, likely only affects docs (presence of .PortalTarget element)

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

issue: sveltejs/svelte#12090
fix: add explilcit <tbody>

---

✅ FIXED: can only receive attributes, not directives

issue: sveltejs/svelte#10382
fix: sveltejs/svelte#10391

---

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

Fixed via: sveltejs/svelte#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

---

✅ FIXED: let directive on <svelte:self>

issue: sveltejs/svelte#9710
fix: sveltejs/svelte#9727

[CropWatchDevelopment]

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]

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]

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]

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]

Filed sveltejs/svelte#10382 because SelectField.svelte fails to compile with latest Svelte 5.

[techniq]

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]

Haven't tried it but I think this will hit svelte-ux as well sveltejs/svelte#10395

edit: this one is fixed now

[techniq]

Identified the root cause of the Dialog/Drawer problem (portal'd content with elements in the same conditional) - sveltejs/svelte#12440

[techniq]

Workaround identified - 54d9d39

[dimfeld]

The SelectField bug is quite strange... The option setting code gets called a bunch of times, not sure if that's normal or not. But at some point updateSelected is called from the reactive statement, and options is an empty array instead of the actual options. That's why things get cleared.

[dimfeld]

Oh actually I figured it out... The problem is that a bunch of the SelectField controls are binding to the same value, and one of them is using options={optionsAsync}, which starts out empty. So at some point when that SelectField runs its reactivity it clears the value since its options don't contain the number, which then propagates back to the first SelectField.

Commenting out the example with optionsAsync or just making it not use bind makes everything else work fine.

I think this is actually a case where some of the weird cross-component reactivity problems in Svelte 4 are fixed, and the previous "correct" behavior is only correct because Svelte 4 was losing the reactivity chain at some point. So here we just need to not bind:value on the optionsAsync SelectField, or perhaps bind to a different value variable.