WIP: Breaking: Svelte 5

[Antosik]

Work in progress

Breaking changes

1. The svelte dependency has been moved to peer dependencies.
2. svelte@^5.8.0 is now required
3. Events and slot names have been updated to align with the new Svelte paradigm (see below). However, there are some breaking changes:
   3.1. The onchange event now triggers only on the component itself, not on the input element (to avoid event overlap)

Events

Events are now divided into two categories: native events - MultiSelectNativeEvents (triggered on the input element) and generated events - MultiSelectComponentEvents (triggered on the component itself).
Event naming conventions have been slightly adjusted (e.g., on:add → onadd), and custom event details are no longer required (e.g., e.detail.type → e.type).

Example

Before (svelte4):

<MultiSelect
  options={[1, 2, 3]}
  on:keyup={(event) => console.log('key', event.target.value)}
  on:change={(e) => alert(`You ${e.detail.type} ${e.detail.option}`)}
/>

After (svelte5):

<MultiSelect
  options={[1, 2, 3]}
  onkeyup={(event) => console.log('key', event.target.value)}
  onchange={(e) => alert(`You ${e.type} ${e.option}`)}
/>

Slots Snippets

Slot names have been slightly adjusted (e.g., expand-icon → expandIcon, etc.).

Example

Before (svelte4):

<MultiSelect
  options={languages}
  maxSelect={5}
  placeholder="What languages do you know?"
  selected={['Python', 'TypeScript', 'Julia']}
  let:option
>
  <LanguageSlot {option} />
  <Icon slot="expand-icon" let:open icon={open ? 'Collapse' : 'Expand'} />
  <MinusIcon slot="remove-icon" width="1em" />
</MultiSelect>

After (svelte5):

<MultiSelect
  options={languages}
  maxSelect={5}
  placeholder="What languages do you know?"
  selected={['Python', 'TypeScript', 'Julia']}
>
  {#snippet children({ option })}
    <LanguageSlot {option} />
  {/snippet}
  {#snippet expandIcon({ open })}
    <Icon icon={open ? 'Collapse' : 'Expand'} />
  {/snippet}
  {#snippet removeIcon()}
    <MinusIcon width="1em" />
  {/snippet}
</MultiSelect>

Minor changes

• Dependencies were updated to latest versions
• MultiSelectEvents were removed in favor of MultiSelectComponentEvents & MultiSelectNativeEvents
• Little code optimizations

Todos

1. Migrate remaining events to svelte5 (remove legacy code)
2. Migrate routes directory to svelte5
3. Update docs
4. Update tests (using @testing-library/svelte (?))
5. Wait until Feat/ svelte 5 upgrade mattjennings/mdsvexamples#32 is merged (before that dependencies can be installed only by using --legacy-peer-deps flag)

Checklist

[ ] has tests (only needed if any new functionality was added or bugs fixed)
[ ] has examples/docs (only needed if any new functionality was added)

Useful links

• Svelte 5 Migration Guide

[janosh]

thanks so much @Antosik for taking of this big migration effort! 👍

i've been meaning to tackle this as well but haven't gotten to it yet so really appreciated 🙏

[janosh]

i don't think contributors need to run npm run package?

[janosh]

ideally, i would like to stick to pure vitest unit testing. can we do without @testing-library

[janosh]

maybe we can get rid of this file entirely now with runes? never liked this hacky workaround for testing 2-way binding...

[janosh]

this file contains a lot of boilerplate. many of the functions are 1-liners so probably better to inline them