RxJS operators and Browser API wrappers.
To install the latest version of rxjs-augmented, simply run:
npm install --save rxjs-augmented@latest
Of course it depends on rxjs, so install it if you haven't already:
npm install --save rxjs
These are pipeable rxjs operators
Will only emit if the mapped value is distinct from the previous. Useful for Observable state stores to avoid unnecessary rendering.
import { of } from 'rxjs';
import { select } from 'rxjs-augmented/operators';
const source$ = of(1, 2, 2, 1).pipe(select(value => value * 2));
source$.subscribe(console.log); //2, 4, 1
These operators will let you create Observables from Browser APIs.
Internally this operator uses the FileReader
API. Pass it a File
or a Blob
and the readAs
method you desire (default will be readAsArrayBuffer
)
import { fromEvent } from 'rxjs';
import { fromBlob } from 'rxjs-augmented';
//For Typescript
interface HTMLInputEvent extends Event {
target: HTMLInputElement & EventTarget;
}
const fileInput: HTMLInputElement = document.querySelector('#file');
fromEvent(fileInput, 'change')
.pipe(
map((event: HTMLInputEvent) => event.target.files[0]),
switchMap((file: File) => fromBlob(file, 'array'))
)
.subscribe(console.log);
Pass it an instance of Worker and internally it'll setup the listeners and post the initial message. Upon receiving the first message from the worker, it'll complete.
//app.ts
import { fromEvent, of } from 'rxjs';
import { fromWorker } from 'rxjs-augmented';
const button: HTMLButtonElement = document.querySelector('#run-worker');
fromEvent(button, 'click').pipe(
switchMap(() => {
if (typeof Worker !== 'undefined') {
//If you're using Typescript, you can correctly type the Observable:
return fromWorker<string>(
new Worker('./worker.ts', { type: 'module' }),
'data for the worker'
);
}
// Web Workers are not supported in this environment.
// You should add fallback so that your program still executes correctly.
const whateverYouHadToDoInTheWorker = 'the response';
return of(whateverYouHadToDoInTheWorker);
}).subscribe(console.log); // 'the response'
//worker.ts
addEventListener('message', ({ data }) => {
console.log(data); //'data for the worker'
postMessage('the response');
});
These are Observable wrappers for Browser APIs.
Observable of the browser's ability to connect to the network.
import { online$ } from 'rxjs-augmented';
//Try connecting and disconnecting
online$.subscribe(console.log); //true or false