svelte-async-readable
    TypeScript icon, indicating that this package has built-in type declarations

    4.0.2 • Public • Published

    svelte-async-readable

    Svelte Readable Store bound to an async resource

    NPM Package

    npm install svelte-async-readable

    Full documentation:

    Working demo:

    You can clone this repo and run npm run dev to see it working

    Highlights

    Create an async readable associated with a GET request:

    const myReadable = asyncReadable(writable(null), {
    	dataProvider: () => axios.get('/path/to/api').then((response) => response.data),
    });
    myReadable.fetch().catch(() => console.error('ops, something went wrong'));

    In a Svelte component, the created AsyncReadable can be used just like any other Readable:

    Here is the resource:
    <div>{$myReadable}</div>

    A useful nested store named fetching is provided. It can be used, for example, to show a loading state:

    <script>
    	const myReadable = asyncReadable(...); // Initialized in some way
    	myReadable
    		.fetch()
    		.catch(() => console.log('ops, something went wrong')); // Start fetching asynchronously (don't forget, Promises always come with a catch!)
    	const { fetching } = myReadable; // Extracts the fetching store
    </script>
    {#if $fetching}
    	Loading...
    {:else}
    	Here is the resource:
    	<div>{$myReadable}</div>
    {/if}

    The fetch must be manually triggered (for example, after some changes to the app state)

    myReadable.fetch();

    If a fetching is already in progress, subsequent fetch calls will be ignored, unless you set the force flag to true

    myReadable.fetch(true);

    You can also pass a temporary value that will be assigned to the AsyncReadable to notify all subscribers while waiting for the new value that will be retrieved using the dataProvider. This also can be useful to show a loading/intermediate state

    myReadable.fetch(true, null); // or myReadable.fetch(false, null);

    Persisting data

    AsyncReadable can be used with any store as its cache, this means that you can take advantage of libraries such as svelte-persistent-writable or svelte-persistent-store (and many more) to delegate the persistence logic.

    As an example, the following code uses svelte-persistent-writable as a storage mechanism:

    import { persistentWritable, localStorageAdapter } from 'svelte-persistent-writable';
    import { asyncReadable } from 'svelte-async-readable';
    
    export const myAsyncReadable = asyncReadable(
    	persistentWritable(null, { storage: localStorageAdapter('myAsyncReadable') }),
    	{ dataProvider: () => axios.get('/path/to/api').then((response) => response.data) }
    );
    
    myAsyncReadable.fetch().catch(() => console.error('oops...'));

    Install

    npm i svelte-async-readable

    DownloadsWeekly Downloads

    14

    Version

    4.0.2

    License

    MIT

    Unpacked Size

    11.9 kB

    Total Files

    6

    Last publish

    Collaborators

    • cdellacqua