https://github.com/tronicboy1/svelte-rxjs-subjects

An extension of RxJS subjects to be used as Svelte Stores
https://github.com/tronicboy1/svelte-rxjs-subjects

Last synced: 4 months ago
JSON representation

An extension of RxJS subjects to be used as Svelte Stores

• Host: GitHub
• URL: https://github.com/tronicboy1/svelte-rxjs-subjects
• Owner: tronicboy1
• Created: 2023-03-05T00:19:55.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2023-04-12T02:38:09.000Z (almost 2 years ago)
• Last Synced: 2024-09-15T06:24:06.774Z (5 months ago)
• Language: JavaScript
• Size: 8.79 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# About this Project

This is a simple extension of RxJS to make it compatible with Svelte Stores.

You can use these subjects in Svelte's templates to use RxJS's powerful async tooling.

# License

The extensions here are distributed under the MIT license. For licensing on RxJS, please view Microsofts RxJS repository.

# Example

```html

  import { filter, map, mergeMap, sampleTime, switchMap } from "rxjs";

  import { SvelteSubject } from "./svelte-subject";

  let input$ = new SvelteSubject<string>();

  let result$ = input$.pipe(

    sampleTime(500), // 500msの感覚でしか値を取らない、無駄にリクエストを送るのを止める

    map((input) => Number(input)),

    filter((number) => !isNaN(number) && number > 0),

    switchMap((num) => fetch(`https://jsonplaceholder.typicode.com/todos/${num}`)), // switchMapで前のリクエストがまだ終わっていなければキャンセルして新しいリクエストを送る

    filter((response) => response.ok),

    mergeMap((result) => result.json())

  );

Todo Search

Enter Todo Number:


{#if $result$}

  
{$result$.title}

  {#if $result$.completed}

  
Completed!

  {/if}


{/if}

  .completed {

    color: red;

  }

```