1.1.0 • Published 2 years ago
svelte-statusable v1.1.0
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