RxJS playground

rxjs 6.2.1

by nomadev

HTML

<script src="https://unpkg.com/@reactivex/[email protected]/dist/global/rxjs.umd.js"></script>
<button id="submit">
start rendering
</button>

<br /><br /><br />
<button id="httpCall">
    save user
</button>

Babel + JSX

console.clear();

const {
	Observable,
  	of
} = rxjs;

const {
  	catchError,
  	switchMap,
    throttleTime,
    map,
    delay
} = rxjs.operators;


/*
class DataSource {
    constructor() {
        let i = 0;
        this._interval = setInterval(() => this.emit(i++), 200);
    }
	
    emit(n) {
        const limit = 10;
        if (this.ondata) {
            this.ondata(n);
        }
        if (n === limit) {
            if (this.oncomplete) {
                this.oncomplete();
            }
        this.destroy();
        }
   	}
    destroy() {
    	clearInterval(this._interval);
  	}
}


function myObservable(observer) {
    let datasource = new DataSource();
    datasource.ondata = (e) => observer.next(e);
    datasource.onerror = (err) => observer.error(err);
    datasource.oncomplete = () => observer.complete();
    return () => {
        datasource.destroy();
    };
}

const unsub = myObservable({
  next(x) { console.log(x); },
  error(err) { console.error(err); },
  complete() { console.log('done')}
});
*/


const buttonSubmit = document.querySelector('#submit');

const clickObservable = new Observable(observer => {
	const handler = (e) => observer.next(e)
    buttonSubmit.addEventListener('click', handler);
    return () => buttonSubmit.removeEventListener('click', handler);
})
.pipe(
	throttleTime(1000),
    map( res => "click X: " + res.clientX + " click Y: " + res.clientY)
)
.subscribe( res => {
	console.log(res);
})


function fakeHttpCall(val, time) {
	console.log('woo', val, time)
	return of(val).pipe(delay(time));
}


const buttonSaveUser = document.querySelector('#httpCall');

const saveUser = new Observable(observer => {
	const handler = res => fakeHttpCall('saving user...', 1000)
    .pipe(
        switchMap(sourceValue => {
            console.log("switching source", sourceValue);
            return fakeHttpCall('data reload', 1000);
        })
	);
    buttonSaveUser.addEventListener('click', handler);
    return () =>...