Unlocking reactivity with Svelte and RxJS about timdeschryver.dev HOT 6 CLOSED

This is probably a coincidence, but this makes it very pleasant to work with

Not a coincidence at all actually.

People started to talk about it, Rich Harris made an issue to discuss it, Ben Lesh put up a PR to support RxJS as stores (with proper unsubscribing) and there was a healthy discussion in the PR too.

Really, just some effort on the maintainers of 2 fantastic libraries and we get some super power magic.

from timdeschryver.dev.

Another way to integrate RxJS and Svelte variables without mimicking stores would be to pair a $: statement with next like this:

<script>
import { BehaviorSubject } from 'rxjs'
let foo;
let subj = new BehaviorSubject('');
$: subj.next(foo)
</script>
<input type="text" bind:value={foo} />

from timdeschryver.dev.

Verry nice article, i'm coming from angular world, and this is the first think i noticed, Store and BehaviorSubject are pretty the same. Good implementation i have to try like that. Wich interest to use Store if we can do everything with BehaviorSubject ? Thank's.

from timdeschryver.dev.

Hi @GiuntaLucas , thanks for the kind words.
The interesting part here is that you don't have to switch to Store if you're already used to using BehaviorSubject. The implementation might be different, but because they hold the same contract (subscribe and next) they can be swapped with each other.

from timdeschryver.dev.

I would think the svelte community would be more prone to adopt rxjs if we can have the operators attached to the svelte writable/readable - maybe a sveltePipe operator instead of SvelteSubject?

Edit- or extending and exposing https://github.com/ReactiveX/rxjs/blob/6fa819beb91ba99dadd6262d6c13f7ddfd9470c5/src/internal/observable/fromSubscribable.ts ? After all, a svelte store is subscribable

from timdeschryver.dev.

This is what I would suggest:

<script lang="ts">
    import { writable, type Writable, type Readable, type Unsubscriber } from 'svelte/store';

    import { Observable, from } from 'rxjs';

    function fromSvelteStore<T>(svelteStore: Writable<T> | Readable<T>): Observable<T> {
        let unsub: Unsubscriber;
        const obs = new Observable<T>((subscriber) => {
            unsub = svelteStore.subscribe((val) => {
                console.log('Next on value');
                subscriber.next(val);
            });

            return () => {
                console.log('Unsubscribing the svelte store');
                unsub();
            };
        });

        return obs;
    }

    import { map } from 'rxjs/operators';
    const w = writable<number>(0);
    const stuff = fromSvelteStore<number>(w).pipe(map((x) => x + 10));
    setTimeout(() => {
        w.set(2);
    }, 3000);
</script>

<h1>The count is {$stuff} or {$w}</h1>
<a href="/other">Go to other page so we can see unsubscribe run</a>

from timdeschryver.dev.