@svelte-put/noti

GitHub Github

type-safe and headless async notification builder

@svelte-put/noti @svelte-put/noti @svelte-put/noti @svelte-put/noti @svelte-put/noti

Still on Svelte 4? See the old docs site here.

Deprecation Notice

This package has been dropped in favor of @svelte-put/async-stack. @svelte-put/async-stack is a generic implementation extracted from @svelte-put/noti itself, and now is more minimal and powerful thanks to Svelte runes. See Migration to @svelte-put/async-stack for more details.

To see the original documentation, visit here.

Migration to @svelte-put/async-stack

Make sure you first install the latest version of @svelte-put/async-stack.

npm install --save-dev @svelte-put/async-stack
pnpm add -D @svelte-put/async-stack
yarn add -D @svelte-put/async-stack

NotificationStore is now Stack

First, the Svelte-store-based NotificationStore has been replaced by the plain class Stack. The variant method is now addVariant:

import { store } from '@svelte-put/noti';
import { stack } from '@svelte-put/async-stack';

export const notiStore = store()
export const notiStack = stack()
  .variant('name', /** config */)
  .addVariant('name', /** config */)
  .build();

resolve() method is now resolution property

In @svelte-put/noti V1, to await for resolution, you would call .resolve() on the notification instance. In @svelte-put/async-stack, this is now a property resolution to remove ambiguity between the act of awaiting for the promise and the act of resolving the notification.

const pushed = notiStore.push(/** push config */)
const pushed = notiStack.push(/** push config */)

const resolved = await pushed.resolve();
const resolved = await pushed.resolution;

notification injected prop is now item

In @svelte-put/noti V1, a notification prop is injected for components used in the variant/push config.

<script lang="ts">
  import type { NotificationInstance } from '@svelte-put/noti';

  export let notification: NotificationInstance;
</script>

In @svelte-put/async-stack, this prop is now named item.

<script lang="ts">
  import type { StackItemProps } from '@svelte-put/async-stack';

  let { item }: StackItemProps<{ valueForResolution: string }> = $props();
</script>

resolve CustomEvent is dropped

In @svelte-put/noti V1, notification is popped by dispatching a resolve CustomEvent within the component.

<script lang="ts">
  import { createEventDispatcher } from 'svelte';

  // ...truncated...

  const dispatch = createEventDispatcher<{ resolve: string }>();
  const dismiss = () => dispatch('resolve', 'popped from within component');
</script>
<!-- ...truncated... -->

Some fiction was observed as this required boilerplate around setting up dispatcher, for the same reason createEventDispatcher is now deprecated in Svelte 5. To resolve the notification (now StackItem) in @svelte-put/async-stack, just call the resolve method on the item prop.

<script lang="ts">
  import type { StackItemProps } from '@svelte-put/async-stack';

  // ...truncated...

  let { item }: StackItemProps<string> = $props();
  const dismiss = () => item.resolve('popped from within component');
</script>
<!-- ...truncated... -->

Notice the generic argument passed to StackItemProps is the Promise type of resolution.

Managing Timeout

The progress Svelte store is no longer needed. Notification state, as well as resume and pause methods, are now directly available on the item prop.

<script lang="ts">
  import type { NotificationInstance } from '@svelte-put/noti';
  import type { StackItemProps } from '@svelte-put/async-stack';

  export let notification: NotificationInstance;
  const { progress } = notification;
  let { item }: StackItemProps<string> = $props();

  $: console.log($progress.state);
  const pause = () => progress.pause();
  const resume = () => progress.resume();
  $inspect(item.state);
  const pause = () => item.pause();
  const resume = () => item.resume();
</script>

<!-- ...truncated... -->

Additionally, the timeout config property no longer accepts false. To disable notification timing, pass 0 instead.

notiStore.push('variant', { timeout: false });
notiStack.push('variant', { timeout: 0 });

And lastly, the default timeout is now 0 (disabled) instead of 3000 ms. To set the base timeout for all notification, pass the timeout option to the stack builder.

import { stack } from '@svelte-put/async-stack';

export const notiStack = stack({ timeout: 3000 })
  // .addVariant('<name>', { <config> })
  // ...
  .build();

Notification Config

Properties such as .id and .variant that were previously available on the notification instance are moved into the config property of item.

<script lang="ts">
  import type { StackItemProps } from '@svelte-put/async-stack';
  let { item }: StackItemProps<string> = $props();
</script>

<p>Notification (variant: {item.variant}): id of {item.id} with timeout of {item.timeout}ms</p>
<p>Notification (variant: {item.config.variant}): id of {item.config.id} with timeout of {item.config.timeout}ms</p>

Happy migrating 😅

Edit this page on Github