@sheepdog/svelte

Task management made simple

Sheepdog helps you maintain your async tasks and gives you useful derived state in your Svelte app.

Because managing tasks shouldn't feel like chasing sheep.

Code

Sheepdog

<script>
  import { task, timeout } from '@sheepdog/svelte';

  let searchTask = task.restart(async function(value) {
    await timeout(500);
    let response = await fetch('/my-favourite-sheep?search=' + value);
    return await response.json();
  });
</script>

<label for="search">Search</label>
<input
  name="search"
  type="text"
  on:input={(event) => searchTask.perform(event.target.value)}
/>

{#if $searchTask.isRunning}
  Loading...
{:else if $searchTask.lastSuccessful?.value.length}
  <ul>
    {#each $searchTask.lastSuccesful.value as name}
      <li>{name}</li>
    {/each}
  </ul>
{:else}
  No sheep found
{/if}

Native

<script>
  let _currentValue;
  let timeout;
  let search = (value) => {
    if (timeout) {
      clearTimeout(timeout);
    }

    let _timeout = setTimeout(async () => {
      let response = await fetch('/my-favourite-sheep?search=' + value);
      let results = await response.json();
      // only set results if this is the last started search
      if (timeout === _timeout) {
        currentValue = results;
        timeout = undefined;
      }
    }, 500);
    timeout = _timeout;
  };

  $: isRunning = Boolean(timeout);
  $: currentValue = _currentValue;
</script>

<label for="search">Search</label>
<input
  name="search"
  type="text"
  on:input={(event) => search(event.target.value)}
/>

{#if timeout}
  Loading...
{:else if currentValue?.length}
  <ul>
    {#each currentValue as name}
      <li>{name}</li>
    {/each}
  </ul>
{:else}
  No sheep found
{/if}

Demo

Search State: idle

• Autumn
• Buttercup
• Chloe
• Dolly
• Emma
• Freddie

Task modifiers

Specify what your task should do if there's another instance already running.

EnqueueDropRestartKeep LatestDefault

You can click an individual task instance to cancel it

Add Clear timeline