Skip to content

AlexAegis/svelte-rxjs-observer

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Files

Permalink
Failed to load latest commit information.

svelte-rxjs-observer

npm ci codacy codecov vercel

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>