v2.0.0

v2 introduces Svelte 5 support and an API overhaul to better solve the community requests from v1. Please check out the new documentation to see detailed examples and usage. The v1 documentation will remain available here

The following issues have been addressed or fixed with this release:

#7
#9
#18
#15
#17
#27
#21
#34
#35

Migration from v1

You can continue to use the v1 API and incrementally adopt the new API by using the svelte-modals/legacy import. Please check out the migration guide for a detailed walkthrough.

Breaking changes

API

• Svelte 5 is now required as a peer dependency
• modals has been changed from a store to being the main entrypoint for most svelte-modals methods.
  • openModal -> modals.open and now returns a promise
    • when using { replace: true } and the currently opened modal prevents the close, the promise will reject
  • closeModal -> modals.close
  • closeAllModals -> modals.closeAll
  • modals -> modals.stack and changed from a store to a rune
  • action -> modals.action and changed from a store to a rune
  • transition -> modals.transition and changed from a store to a rune
• <Modals /> has been updated to use snippets instead of slots. The default slot has been changed to a modals snippet.
  • svelte-modals/legacy continues to use slots and the default slot
• Deferred transitions are now enabled by using the exitBeforeEnter action instead of forwarding events

Types

• SvelteModalComponent has been renamed to ModalComponent and updated for Svelte 5 component types
• LazySvelteModalComponent has been renamed to LazyModalComponent and updated for Svelte 5 component types

1.3.0

• Adds support for Svelte 4 as a peerDependency #31
• Fixes svelte export in package.json #30
• Updated documentation for using transitions with Svelte 4

1.2.0

Features

• adds onBeforeClose to conditionally prevent modal from being closed

1.1.0

Features

• Support lazy loading components in openModal

import { openModal } from 'svelte-modals'

openModal(() => import('./AlertModal.svelte'))

• Add loading slot for Modals component that is shown when a modal is being lazy loaded

<script>
  import { Modals } from 'svelte-modals'
  import Spinner from './Spinner.svelte'
</script>

<Modals>
  <div slot="loading">
    <Spinner />
  </div>
</Modals>

1.0.1

• fix build for ESM (71b80c2)