Upgrade to Svelte 4 #3543
Upgrade to Svelte 4 #3543
Conversation
| @@ -68,7 +68,7 @@ | |||
|
|
|||
| <div> | |||
| {#if showForm} | |||
| <div class="mt-6 mb-4 flex flex-col gap-y-4" transition:slide> | |||
| <div class="mt-6 mb-4 flex flex-col gap-y-4" transition:slide|global> | |||
There was a problem hiding this comment.
We have seen issues with global transitions. Has it been fixed in svelte4? Applies to all places where this change has been made.
There was a problem hiding this comment.
In Svelte 4, transitions are local by default. In Svelte 3, they were global by default. So this code ensures our application behaves the same as it did with Svelte 3.
All the changes to transitions were made automatically when I ran the Svelte 4 migration script: npx svelte-migrate@latest svelte-4.
I agree we should be wary of global transitions, but let's consider application behavior changes in a separate PR.
| @@ -77,7 +77,7 @@ are details left to the consumer of the component; this component should remain | |||
| {active} | |||
| /> | |||
| </Chip> | |||
| <div slot="tooltip-content" transition:fly|local={{ duration: 100, y: 4 }}> | |||
| <div slot="tooltip-content" transition:fly={{ duration: 100, y: 4 }}> | |||
There was a problem hiding this comment.
|local was added to fix issues with elements lingering. Has it been fixed in svelte 4? Applies to all instances of this change.
There was a problem hiding this comment.
See above – transitions are now local by default
| @@ -93,6 +93,7 @@ are details left to the consumer of the component; this component should remain | |||
| <RemovableListMenu | |||
| {excludeStore} | |||
| slot="floating-element" | |||
| let:toggleFloatingElement | |||
There was a problem hiding this comment.
See the migration guide's section on default slot bindings.
Previously, we were using default slot props (like toggleFloatingElement) in named slots (like slot="floating-element"). But that's no longer allowed. Now, to migrate, I've added a named slot prop toggleFloatingElement.
| @@ -41,6 +41,7 @@ and the menu closes. | |||
| <slot {handleClose} toggleMenu={toggleFloatingElement} {active} /> | |||
| <Menu | |||
| slot="floating-element" | |||
| let:handleClose | |||
There was a problem hiding this comment.
Why is this needed? Wont it mask the variable defined above on WithTogglableFloatingElement?
There was a problem hiding this comment.
Same answer as above – named slots no longer have access to the default slot props
Closes #2684
This PR upgrades Svelte 3 to Svelte 4. A handful of changes were required:
webworkspaceswebdependencies to versions that support Svelte 4@rgossiaux/svelte-headlessuihas not yet added official support for Svelte 4. Given community members have reported that the package does work with Svelte 4 in practice, I've included an npm override in the rootpackage.json.floating-elementchanges)derived()store function no longer accepts falsy values (see thetimeseries-data-storerefactor)@bufbuild/protobuf's base64 functions.onMountnot getting called byvitest. Fixed by following this StackOverflow post.