toObservable or fromSvelteStore function to bridge

[Tommertom]

Describe the problem

I'm always frustrated when I have to rewrite svelte store to RXJS's BehaviorSubject (or use another library) to get access to RXJS operators on my data streams. Creating these streams with svelte-store suffices and is very easy, and the creator syntax for the equivalent in RXJs is a bit tedious

So

import {writable} from 'svelte/store'

const mystore=writabe<number>(0);

Should first become below, in order to add RXJS operators to create powerful transformations on the data stream

import {BehaviorSubject} from 'rxjs';

const mystore= new BehaviorSubject<number>(0);

Describe the proposed solution

I would like to see a function added to the svelte-store library, or maybe a separate library within the svelte-organisation that allows me to easily transform all sorts of svelte stores I have, into RXJS observables.

I am suggesting a function like fromSvelteStore in below example:

<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>

This function takes a svelte store and converts it into an RXJS observable, so the developer can apply RXJS operators to it. As Svelte subscription mechanism already works very nicely with Observables, it could be a real addition to the ecosystem.

The alternative name could be something like toRXJS or toObservable, as the fromSvelteStore would be better fit for placement in RXJS. See comments by Ben Lesh in #2549 that they rather see such things placed with Svelte-org

Alternatives considered

Alternatives I see are -

timdeschryver/timdeschryver.dev#121 (comment)
#2549
SvelteSubject - but, this is almost the same as creating BehaviorSubject myself.. so no DX win

https://svelte-fuse-rx.netlify.app/
Which may look nice, as it replaces svelte/store with another library, but creates a strong dependency.

Creating all the require data transformation in a derived store
But that imho creates lots of (imperative) code, which can be easily replaced with rxjs operators

Importance

would make my life easier