https://github.com/timhall/svelte-observable

Use observables in svelte components with ease.
https://github.com/timhall/svelte-observable

Last synced: 2 months ago
JSON representation

Use observables in svelte components with ease.

• Host: GitHub
• URL: https://github.com/timhall/svelte-observable
• Owner: timhall
• License: mit
• Created: 2018-07-14T03:34:37.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-03T15:46:48.000Z (almost 2 years ago)
• Last Synced: 2024-09-19T08:39:17.982Z (3 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.03 MB
• Stars: 62
• Watchers: 4
• Forks: 2
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-svelte-stores - timhall/svelte-observable

README

        
# svelte-observable

Use observables in svelte components with ease. svelte-observable wraps Observables with svelte's reactive stores so that all you have to do is `{#await $...}` in your templates. This allows you to work with Observable libraries like RxJS and zen-observable with the convenience and built-in support of svelte's reactive stores.

```html

{#await $values}

  Loading until first value

{:then value}

  Will be re-rendered as values come in

{:catch error}

  Errors are handled too

{/await}

  import { observe } from 'svelte-observable'; 

  import { list } from './api';

  const values = observe(list());

```

## observe

Wrap an observable as a reactive store with an initial deferred value for compatibility with `{#await ...}`.

Wrapped observables return a chain of promises in one of three promise states:

- pending - No value or error has been received yet

- fulfilled - Received a value

- rejected - Received an error

```html

  import { observe } from 'svelte-observable';

  const results = query({});

  //    ^ Observable<Result>

  const results_store = observe(results);

  //    ^ Readable<Promise<Result>>

  function query() {

    return new Observable(observer => {

      // ...

    })

  }

{#await $results_store}

  pending - No value or error has been received yet

{:then result}

  fulfilled - Received a value

{:catch error}

  rejected - Received an error

{/await}

```

## flat

Flatten a store/observable of stores/observables, unsubscribing from the previous store/observable as new values come in. This method is similar to `switchMap` in RxJS.

```html

  import { writable, derived } from 'svelte/store';

  import { flat } from 'svelte-observable';

  import { query } from './api';

  const search = writable('');

  // query returns an Observable of results

  // -> need to unsubscribe from previous results on search change

  const store_of_observables = derived(search, $search => query($search));

  //    ^ Readable<Observable<Result>>

  const results = flat(store_of_observables);

  //    ^ Readable<Promise<Result>>

 search.set(e.target.value)} />

{#await $results}

  Loading...

{:then results}

  {results}

{:catch error}

  {error}

{/await}

```