-
-
Notifications
You must be signed in to change notification settings - Fork 38
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Svelte 5 compatibility #144
Comments
I found a fix for this, I made a PR #145. |
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 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. |
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 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. |
Filed sveltejs/svelte#10382 because SelectField.svelte fails to compile with latest Svelte 5. |
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. |
Haven't tried it but I think this will hit svelte-ux as well sveltejs/svelte#10395 edit: this one is fixed now |
Identified the root cause of the Dialog/Drawer problem (portal'd content with elements in the same conditional) - sveltejs/svelte#12440 |
Workaround identified - 54d9d39 |
The |
Oh actually I figured it out... The problem is that a bunch of the Commenting out the example with 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 |
This fixes it although it's a bit of a hack. There's probably a better way to write this but the standard tricks like <script lang="ts">
+ function getDelay(useTimer = true) {
- function getDelay() {
+ const endTime = end ?? (useTimer ? $timer : null);
+ const newDuration = getDuration(start, endTime, duration);
- const newDuration = getDuration(start, end ?? $timer, duration);
// snip
}
const timer = timerStore({
+ delay: getDelay(false),
- delay: getDelay(),
disabled: end != null,
onTick: () => {
// Update delay based on display duration
const newDelay = getDelay();
if (newDelay != timer.getDelay()) {
timer.setDelay(newDelay);
}
},
}); |
MultiSelect issues are related to The I'm not 100% sure of the full dependency cycle here, or why it breaks in Svelte 5 but worked on 4, but my current best fix is to wrap the call to $: if (mode === 'immediate' && $selection) {
setTimeout(applyChange);
} |
Just spotted another Svelte 5 regression with |
Did a quick investigation and it looks to go aways unless you add the " <h2>`append` slot (field actions)</h2>
<Preview>
<Toggle let:on={open} let:toggle let:toggleOff>
<SelectField {options}>
<span slot="append" on:click|stopPropagation role="none">
<Button icon={mdiPlus} class="text-surface-content/50 p-2" on:click={toggle} />
</span>
</SelectField>
<Form
initial={newOption()}
on:change={(e) => {
options = [e.detail, ...options];
}}
let:draft
let:commit
let:revert
>
<Dialog {open} on:close={toggleOff}>
<div slot="title">Create new option</div>
<div class="px-6 py-3 w-96 grid gap-2">
<TextField
label="Label"
value={draft.label}
on:change={(e) => {
draft.label = e.detail.value;
}}
autofocus
/>
<TextField
label="Value"
value={draft.value}
on:change={(e) => {
draft.value = e.detail.value;
}}
/>
</div>
<div slot="actions">
<Button on:click={() => commit()} color="primary">Add option</Button>
<Button on:click={() => revert()}>Cancel</Button>
</div>
</Dialog>
</Form>
</Toggle>
</Preview> Definitely more to look into, but this helps to reduce it down. |
So the root issue of the extra SelectField option being added is because This is because the reactive dispatch in Form is called immediately in Svelte 5 (REPL) but not in Svelte 4 (REPL).
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
let value = 0;
$: dispatch('change', { value });
</script>
<script>
import Component from './Component.svelte';
</script>
<Component on:change={e => console.log('change', e.detail)} /> I'm debating on whether this is a reportable regression, or works as expected ( If not, I need to come up with a solution to wait for the value to change. I initially thought of... <script>
//...
let isMounted = false;
onMount(() => {
isMounted = true;
});
$: if (isMounted) {
dispatch('change', $_state);
}
</script> ...but then @dimfeld thoughts? |
One workaround is to use a $: dispatch('change', $_state); becomes... const changed = changeStore(_state, (value) => dispatch('change', value.current));
$changed; // must subscribe to store to get onChange callbacks |
It sounds more like a bug that it wasn't doing this in Svelte 4 :) And actually this is sveltejs/svelte#4470 Yeah anything that suppresses that first firing seems fine. |
Issue to track any Svelte 5 compatibility issues. Hoping close to
0
changes are required in Svelte UX to support 5.issue: #435
MultiSelect
hangs browser (MultiSelectField / MultiSelectMenu appear to work fine)example: https://svelte5-docs.svelte-ux.pages.dev/docs/components/SelectField (see screenshot)
✅ 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 initializationexample: 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 sameissue: 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 bindingFixed 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
The text was updated successfully, but these errors were encountered: