Name: Turn a Stream of Objects into an Object of Streams
Rating: 3.2 (3596 reviews)
Author: kosich

Hi, fellow RxJS streamer! 👋

Today I want to share a JS/TS package that allows you to access props of objects on Observables:

source$.subscribe(o => console.log(o?.a?.b?.c))
// turn ↑ into ↓
source$.a.b.c.subscribe(console.log)

tl;dr: github.com/kosich/rxjs-proxify

A simple use case: read the msg property of each value on the stream

import { proxify } from "rxjs-proxify";
import { of } from "rxjs";

const source = of({ msg: 'Hello' }, { msg: 'World' });
const stream = proxify(source);
stream.msg.subscribe(console.log); // 'Hello', 'World'

☝️ proxify will create a Proxy for given Observable

The package has good TypeScript support, so all props are intelli-sensed by cats, dogs, and IDEs:

import { of } from 'rxjs';
import { proxify } from 'rxjs-proxify';

const source = of({ a:1, b:1 }, { a:2, b:2 });
const stream = proxify(source);
stream. // <- will suggest .a .b .pipe .subscribe etc

👀 I can see your intentions

t's also possible to call methods on values (even those using this keyword), e.g.:

import { proxify } from "rxjs-proxify";
import { of } from "rxjs";

const source = of({ msg: () => 'Hello' }, { msg: () => 'World' });
const stream = proxify(source);
// calls msg() fn on each value of the stream
stream.msg().subscribe(console.log); // 'Hello', 'World'

🤯 pure magic, I tell you

And you are still free to apply RxJS operators at any depth:

import { proxify } from "rxjs-proxify";
import { of } from "rxjs";
import { scan } from "rxjs/operators";

const source = of({ msg: 'Hello' }, { msg: 'World' });
const stream = proxify(source);
stream.msg.pipe(scan((a, c)=> a + c)).subscribe(console.log); // 'HelloWorld'

Just like regular Observables!

The package uses Proxies under the hood, recursively applying it to sub-properties and method results, so the chain can be indefinitely deep. And you can apply .subscribe or .pipe at any time!

🎹 Try it

You can install it via npm i rxjs-proxify

Or test it online: stackblitz.com/edit/rxjs-proxify-repl

📖 Repository

The source code and more examples are available on github repo:

github.com/kosich/rxjs-proxify

Outro

Thank you for reading this article! Stay reactive and have a nice day 🙂

If you enjoyed reading — please, indicate that with ❤️ 🦄 📘 buttons — it helps a lot!

Soon I'll post a more detailed review of the lib and how it works

Follow me here and on twitter for more RxJS, React, and JS posts:

🗣 Would love to hear your thoughts!

Psst.. need something more to read?

I got you covered:

😉

Cya 👋