Super tiny, simple to use SvelteJS store to control your application status.

Install

npm i svelte-statusable --save-dev

yarn add svelte-statusable

CDN: UNPKG | jsDelivr (available as window.statusable)

If you are not using ES6, instead of importing add

<script src="/path/to/svelte-statusable/index.js"></script>

just before closing body tag.

Usage

Create store to control online/offline status and page visibility with zero-config:

import { statusable } from 'svelte-statusable';

export const status = statusable();

Check it somewhere in you app:

{#if ! $status.online}
  <mark>Intenet connection lost</mark>
{/if}

<script>
  import { status } from './stores/status';

  $: if ($status.hidden) {
    player.pause();
  }

  $: console.log($status); // { online: true, hidden: false, heartbeat: false, stream: false }
</script>

Pass ping option on store creation to ping your server route and check its status:

Just provide event name as event and withCredentials properties in config object.

import { statusable } from 'svelte-statusable';

export const status = statusable({
  ping: 'https://mydomain/status'
});

OR additional options to full control:

import { statusable } from 'svelte-statusable';

export const status = statusable({
  ping: {
    url: 'https://mydomain/status',
    retry: 5000, // interval of polling
    abort: 1000, // acceptable response time
    // any Fetch API options
  }
});

Check it somewhere in you app:

{#if ! $status.heartbeat}
  <mark>Server connection lost</mark>
{/if}

Usage with Server-sent event:

Just provide SSE url via sse option to control SSE stream status:

export const status = statusable({
  sse: 'https://mydomain/stream'
});

// OR

export const status = statusable({
  sse: {
    url: 'https://mydomain/stream',
    withCredentials: true,
  }
});

Check it somewhere in you app:

{#if ! $status.stream}
  <mark>Live updates are stopped. Re-connecting...</mark>
{/if}

License

MIT © PaulMaly