@svelte-put/noti

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

export const notiStore = store({ /** optional common config */ })
  .variant(/* */)
  .build(); // remember to call this to build the actual store

type store = (config?: NotificationCommonConfig) => import('@svelte-put/noti').NotificationStoreBuilder;

type NotificationCommonConfig = {
  /**
   * milliseconds to wait and automatically pop the notification.
   * Defaults to `3000`. Set to `false` to disable
   */
  timeout?: number | false;
  /**
   * id generator for notifications. Defaults to 'uuid'.
   *
   *
   *   - counter: use an auto-incremented counter that is scoped to the store
   *   - uuid: use `crypto.randomUUID()`, fallback to `counter` if not available
   *   - callback: a custom function that accepts {@link NotificationInstanceConfig} and returns a string as the id
   */
  id?:
    | 'counter'
    | 'uuid'
    | ((config: {
        /* NotificationInstanceConfig, omitted for conciseness */
      }) => string);
};

type SvelteComponentClass = import('svelte').ComponentType<import('svelte').SvelteComponent>;

type variant = (
  variant: string,
  config: NotificationVariantConfig | SvelteComponentClass,
) => import('@svelte-put/noti').NotificationStoreBuilder;

type NotificationVariantConfig = {
  /** extends NotificationCommonConfig, omitted for conciseness */
  variant: string;
  component: SvelteComponentClass;
  props?: {
    /** inferred props for component */
  };
};

notiStore.push('custom', {
  component: NotificationComponent, // required
  props: { /** props for NotificationComponent */ },
  id: () => 'one-time-id',
  timeout: false,
});

export const info = (content: string) => notiStore.push('info', { props: { content } });
// later
info('An info notification...');

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

  // ...truncated...

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

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

import { notiStore } from './notification-store';

// pop the topmost notification
notiStore.pop();

// pop a specific notification
notiStore.pop('specific-id');

// pop a specific notification with custom resolution value
notiStore.pop('id', 'custom-resolve-detail');

// alternatively, provide arguments as object
notiStore.pop({
  detail: 'custom-resolve-detail',
}); // pop the topmost notification with custom resolution value

import { notiStore } from './notification-store';

const pushed = notiStore.push('info');
const resolved = await pushed.resolve();

<script lang="ts">
  import { notiStore } from './comprehensive/notification-store';

  let promise: Promise<unknown> | null = null;
  async function pushNoti() {
    const pushed = notiStore.push('info', {
      timeout: false,
      props: { content: 'A persistent notification' },
    });

    promise = pushed.resolve();
    await promise;
    setTimeout(() => (promise = null), 2000);
  }

  function popNoti() {
    notiStore.pop();
  }
</script>

<button
  on:click={pushNoti}
  disabled={!!promise}
  class="c-btn"
  class:bg-gray-500={!!promise}
>
  Push a persistent notification
</button>
{#if promise}
  <p class="mt-2 text-blue-500">
    {#await promise}
      Notification is pushed and waiting for resolution. Either click the x button on the
      notification, or <button class="c-link" on:click={popNoti}>click here</button> to pop the notification.
    {:then}
      Resolved (resetting in 2 seconds)
    {/await}
  </p>
{/if}

notiStore.pause(pushed.id);
notiStore.resume(pushed.id);

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

  export let notification: NotificationInstance;

  const { progress } = notification;

  $: console.log($progress.state); // 'idle' | 'running' | 'paused' | 'ended'
  const pause = () => progress.pause();
  const resume = () => progress.resume();
</script>

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

<script>
  import { portal } from '@svelte-put/noti';
  import { notiStore } from './notification-store';
</script>

<aside use:portal={notiStore} />

<script lang="ts">
  import { store } from '@svelte-put/noti';
  import NotificationWrapper from '@svelte-put/noti/Notification.svelte';
  import { flip } from 'svelte/animate';
  import { fly, fade } from 'svelte/transition';

  import Notification from './comprehensive/Notification.svelte';

  // define somewhere global, reuse across app
  const notiStore = store()
    .variant('info', Notification)
    .variant('special', {
      id: 'counter',
      component: Notification,
      props: {
        special: true,
        content: 'A very special notification',
      },
    })
    .build();

  const pushInfo = () => notiStore.push('info', { props: { content: 'An info notification' } });
  const pushSpecial = () => notiStore.push('special');
</script>

<!-- notification portal, typically setup at somewhere global like root layout -->
<aside
  class="fixed z-notification inset-y-0 right-0 md:left-1/2 p-10 pointer-events-none flex flex-col-reverse gap-4 justify-end md:justify-start"
>
  {#each $notiStore.notifications as notification (notification.id)}
    <div animate:flip={{ duration: 200 }} in:fly={{ duration: 200 }} out:fade={{ duration: 120 }}>
      <NotificationWrapper {notification} />
    </div>
  {/each}
</aside>

<!-- notification push triggers -->
<button class="c-btn c-btn--outlined" on:click={pushInfo}>Push an info notification</button>
<button class="c-btn" on:click={pushSpecial}>Push a special notification</button>

type NotificationInstanceConfig = NotificationVariantConfig & {
  /** extends NotificationVariantConfig, omitted for conciseness */
  id: string;
};

type NotificationInstance = NotificationInstanceConfig & {
  /** reference to the rendered notification component */
  instance?: SvelteComponent;
  /** internal api for resolving a notification, effectively popping it from the stack */
  $resolve: (e: ComponentEvents['resolve']) => Promise<ComponentEvents['resolve']['detail']>;
  /** svelte store with .pause & .resume methods for controlling automatic timeout */
  progress: NotificationProgressStore;
}

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

  export let notification: NotificationInstance;
</script>

<div data-id={notification.id} class="notification notification--{notification.variant}" />