svelte-rxjs-observer

A tiny component that observes observables for you

Example app available @ Vercel

Usage

Install:

npm install svelte-rxjs-observer

Examples

Simple

<script lang="ts">
  import { Subject } from 'rxjs';
  import { Observer } from 'svelte-rxjs-observer';

  let subject = new Subject<number>();
</script>

<Observer {subject} let:next>
  {next}
  <svelte:fragment slot="pending">loading...</svelte:fragment>
</Observer>

Typed error and completion states

<script lang="ts">
  import { Subject } from 'rxjs';
  import { Observer } from 'svelte-rxjs-observer';

  let subject = new Subject<number>();
  let errorType: TypeError; // Optinal typehint for the error
</script>

<Observer {subject} let:next {errorType}>
  {stringify({ next })}
  <svelte:fragment slot="pending">
    {stringify({ slot: 'pending' })}
  </svelte:fragment>
  <svelte:fragment slot="error" let:error let:last>
    {stringify({ slot: 'error', error: { message: error.message }, last })}
  </svelte:fragment>
  <svelte:fragment slot="completed" let:last>
    {stringify({ slot: 'completed', last })}
  </svelte:fragment>
</Observer>