DEV Community

loading...

RxJS Ninja - New Operators for working with StreamsAPI

tanepiper profile image Tane Piper Originally published at tane.dev ・2 min read

Since the last update on RxJS Ninja there have been a few new operators added, below are some details and links to StackBlitz demos showing them in action.

Numbers and Math operators

In @rxjs-ninja/rxjs-number the missing toFixed operator has been added, alongside a new custom toHex operator and the corresponding parseHex one allowing hex numbers to be worked with (such as converting colours).

There are also new operators for some basic math - add, sub, div, mul, mod and pow all allowing you to modify source numbers, all accept a number, or an Observable number source.

Working with Browser Streams

Some new operators have been added to @rxjs-ninja/rxjs-utility that allow interoperability between RxJSand the StreamsAPI. These APIs are not in all browsers but there is an available polyfill.

fromReadableStream

This operator accepts a ReadableStream and provides the emitted values as an Observable, allowing you to use RxJS operators to work with the data.

  • Demo - Using fetch body with fromReadableStream to show partial images
  • Demo - A basic infinite number stream that ticks per second

toWritableStream

This operator accepts a WritableStream.The operator emits the source value and also writes to the stream. The operator takes care of closing the writer when the Observable subscription is closed.

  • Demo - Streams an Observable interval value into a WritableStream with optional ability to stop the writer without ending the Observable subscription.

fromFetchWithProgress

This operator uses fetch to do an HTTP request, instead of the body response it emits either a number which is the current progress, or a Uint8Array containing the final
response from the body.

  • Demo Fetches an image and shows a progress bar with the current percentage and once complete shows the image.

Discussion (0)

pic
Editor guide