RXall(() => rx.of(1, 2, 3))
RXall(() => rx.interval(100).pipe(op.take(10)), { logMS: true })
RXlatest(() => rx.of(1, 2, 3))
RX(() =>
rx.Observable.create(subscriber => {
subscriber.next(1);
subscriber.error(new Error('oh no'));
subscriber.complete();
})
)
RX(() => rx.throwError('oh no'))
md`To use operators on a stream we need to use \`.pipe()\`:`
RX(() =>
// 'of' allows you to deliver values in a sequence
rx.of(1, 2, 3, 4, 5, 6).pipe(
// only accept values greater than 2
op.filter(v => v > 2),
// multiply all values in a stream by 3
op.map(v => v * 3)
)
)
RXall(() =>
rx.throwError(new Error('oh no')).pipe(
// We can replace errors with normal data
op.catchError(err => rx.of('fixed'))
)
)
RXall(() =>
rx.of(1, 2, 3, 4, 5).pipe(
op.mergeMap(v => {
if (v & 1) return rx.of('odd');
return rx
.throwError(new Error('even values unsupported'))
.pipe(op.catchError(err => rx.of('fixed')));
})
)
)
RXall(() =>
rx.range(1, 100).pipe(
// skip first 3 elements
op.skip(3),
// and take only next 5
op.take(5)
)
)
function RXinput() {
const form = html`<form>
<input name=input />
</form>`;
const obs = rx.Observable.create(subscriber => {
console.log('here');
const verb = "oninput";
form[verb] = e => {
console.log('oninput');
e && e.preventDefault();
subscriber.next(form.input.value);
};
form[verb]();
});
form.value = obs.pipe();
return form;
}
function RXlatest(f, options = {}) {
return Generators.observe(resolve => {
const vals = [];
const start = performance.now();
const logVal = v => {
const ms = Math.floor(performance.now() - start);
const val = options.logMS ? { ms: ms, v: v } : v;
if (options.logAll) {
vals.push(val);
resolve(vals);
} else {
resolve(val);
}
};
resolve([]);
f().subscribe({
next(x) {
logVal(x);
},
error(err) {
if (err.message !== undefined) {
logVal('❌: ' + err.message);
} else {
logVal('❌: ' + err);
}
},
complete() {
logVal('✅');
}
});
});
}
function RXall(f, options = {}) {
options.logAll = true;
return RXlatest(f, options);
}
RX = RXall
rx = await require("rxjs@6.6.2/bundles/rxjs.umd.js")
op = rx.operators
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
