@svelte-put/async-stack

@svelte-put/async-stack

Type-safe and headless async builder for async component stack (notification and modal/dialog systems, for example)

svelte-put

This package is part of the @svelte-put family. For contributing guideline and more, refer to its readme.

Usage & Documentation

See the dedicated documentation page here.

Quick Start

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

  // any Svelte component to render as
  import MyComponent from './MyComponent.svelte';

  // define somewhere global, reuse across app
  export const myStack = stack()
    // add a minimalistic variant config
    .addVariant('my', MyComponent)
    // add a verbose variant config
    .addVariant('special', {
      timeout: false,
      id: 'counter',
      component: MyComponent,
      props: {
        // inferred from Notification component
        special: true,
        content: 'A very special thing',
      },
    })
    // build the actual stack
    .build();

  onMount(async () => {
    // push a special item
    const pushed = myStack.push('special');

    // wait for some user action for the item
    // to be resolved (popped) from within the component
    const { userAction } = await pushed.resolution;

    // push another item with custom props
    notiStack.push('info', {
      props: {
        content: 'An example information',
      },
    });
  });
</script>

<!-- portal ->
<aside class="applicable class">
  {#each myStack.items as item (item.config.id)}
    <div use:myStack.actions.render={item}>
      <!-- StackItem instances rendered as direct children -->
    </div>
  {/each}
</aside>

Changelog