Skip to content

Instantly share code, notes, and snippets.

@kosich
kosich / index.js
Created May 31, 2019
Loading indication with a delay and anti-flickering in RxJS
View index.js
const { rxObserver } = require('api/v0.3');
const { fromEvent, timer, combineLatest, merge, throwError, of } = require('rxjs');
const { timeout, share, catchError, mapTo, takeUntil, startWith, distinctUntilChanged, switchMap, map } = require('rxjs/operators');
const delayTime = 150;
const shouldError = false;
const result$ = makeARequest(delayTime, shouldError).pipe(
timeout(700), // 700ms timeout for the result to come
catchError(() => { // an error from the request or timeout will be handled here
@kosich
kosich / index.js
Last active May 29, 2019
expand with a limit
View index.js
const { rxObserver } = require('api/v0.3');
const { of, timer, EMPTY } = require('rxjs');
const { expand, delay, flatMap, take } = require('rxjs/operators');
// PLEASE, OPEN THE CONSOLE
const items = [
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
[11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
[21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
@kosich
kosich / a.js
Last active May 24, 2019
switchMap subscription
View a.js
const { rxObserver } = require('api/v0.3');
const { defer, timer, Subject } = require('rxjs');
const { take, switchMap, startWith, endWith, share } = require('rxjs/operators');
// OPEN THE CONSOLE TO SEE SUBSCRIPTION TIMINGS
// defer is called each time it is subscribed to
const source$ = defer(()=>{
console.log('subscribed at ', Date.now());
// will emit an event in 10ms
@kosich
kosich / index.js
Created May 23, 2019
startWith vs endWith bugreport
View index.js
const { rxObserver } = require('api/v0.3');
const { of } = require('rxjs');
const { startWith, endWith } = require('rxjs/operators');
of(':').pipe(
startWith('abc'),
endWith('def')
)
.subscribe(rxObserver());
@kosich
kosich / index.js
Last active May 23, 2019
Wrap source emission only if its not empty
View index.js
const { rxObserver } = require('api/v0.3');
const { timer, of, Notification, EMPTY, merge, concat, throwError } = require('rxjs');
const { switchMap, materialize, dematerialize, delay, map } = require('rxjs/operators');
const source$ = merge(timer(5), timer(10));
// Uncomment next line to get an empty source
// const source$ = EMPTY;
// Uncomment next line to get a source with an error
@kosich
kosich / index.js
Created May 21, 2019
custom operator that counts subscribers
View index.js
const { rxObserver } = require('api/v0.3');
const { Observable, Subject, of, timer, pipe, defer } = require('rxjs');
const { finalize, takeUntil } = require('rxjs/operators');
const subj$ = new Subject();
const result$ = subj$.pipe(
customOperator( n => console.log('Count updated: ', n) )
);
@kosich
kosich / index.js
Created May 21, 2019
Attempt to create custom Subject
View index.js
const { rxObserver } = require('api/v0.3');
const { Subject, of, timer } = require('rxjs');
const { finalize, takeUntil } = require('rxjs/operators');
class CountSubject extends Subject {
constructor(){
super();
this.subscribersCount = 0;
}
@kosich
kosich / index.js
Created May 8, 2019
startWith vs defaultIfEmpty with combineLatest operator
View index.js
const { rxObserver } = require('api/v0.3');
const { timer, combineLatest } = require('rxjs');
const { startWith, filter, defaultIfEmpty, skip } = require('rxjs/operators');
// our value to compare to
// toString is needed only for vizualisation
const NO_VALUE = { toString: _=>'-' };
const a$ = timer(5).pipe(
@kosich
kosich / index.js
Created May 6, 2019
mergeMap + forkJoin with accumulation example
View index.js
const { rxObserver } = require('api/v0.3');
const { forkJoin, timer, of } = require('rxjs');
const { map, mapTo, mergeMap } = require('rxjs/operators');
const parentTasksToSave = 1;
const childTasksToSave = [2, 3];
createWorkItem(parentTasksToSave).pipe(
mergeMap(parentId => {
@kosich
kosich / index.js
Last active May 1, 2019
ignoreElements with concat #rxjs
View index.js
const { rxObserver } = require('api/v0.3');
const { timer, of, concat } = require('rxjs');
const { take, ignoreElements } = require('rxjs/operators');
const source$ = timer(10, 5).pipe(take(4));
const result$ = concat(
source$.pipe(ignoreElements()),
of(true)