A simple RxJS library of convenience functions for arithmetic operations on Observables.
1import { add } from 'rxmetics';
2
3// ...
4
5add(a, b)...
1import { add } from 'rxmetics/pipes';
2
3// ...
4
5a.pipe(add(b))...
1import { combineLatest, ... } from 'rxjs';
2import { map, ... } from 'rxjs/operators';
3
4// ...
5
6combineLatest(a, b).pipe(map(([a, b]) => a + b))...
linkInstallation
Via NPM:
1npm i rxmetics
Or if you want to get it via a CDN, then:
1<!--> Click on each line to copy it. -->
2<script src="https://unpkg.com/rxjs/bundles/rxjs.umd.min.js"></script> <!--> Install Dependencies -->
3<script src="https://unpkg.com/rxmetics/dist/bundles/rxmetics.es5.min.js"></script> <!--> Install RxMetics -->
linkUsage
linkNumeric Operations
1import { interval } from 'rxjs';
2import { add } from 'rxmetics';
3import { mul } from 'rxmetics/pipes';
4
5add(
6 interval(1000),
7 interval(500).pipe(mul(2)),
8 1
9).subscribe(console.log);
10
11// Result:
12// > 1, 3, 5, 6, 8, 10, 11, ...
linkString Operations
1import { interval } from 'rxjs';
2import { map } from 'rxjs/operators';
3import { rxl } from 'rxmetics';
4import { concat } from 'rxmetics/pipes';
5
6const num = interval(1000).pipe(
7 map(x => '# ' + x),
8 concat(' seconds')
9);
10
11rxl`You were here for ${num} ...`.subscribe(console.log);
12
13// Result:
14// > You were here for # 0 seconds ...
15// > You were here for # 1 seconds ...
16// > You were here for # 2 seconds ...
17// ...
linkBoolean Operations
1import { interval } from 'rxjs';
2import { and, not } from 'rxmetics';
3import { mod, eq } from 'rxmetics/pipes';
4
5
6and(
7 interval(1000).pipe(mod(2), eq(0)),
8 interval(500).pipe(mod(2), eq(1)),
9).pipe(not).subscribe(console.log);
10
11// Result:
12// true, false, true, true, true, true, true, false, true, ...
linkGeneric Functions
1import { interval } from 'rxjs';
2import { E } from 'rxmetics';
3
4
5interval(1000).pipe(E(Math.sqrt)).subscribe(console.log);
6
7// Result:
8// > 0
9// > 1
10// > 1.4142135623730951
11// > 1.7320508075688772
12// > 2
13// > 2.23606797749979
14// > 2.449489742783178
15// ...
linkAn Example
Here is an example of fun stuff you can do easily with RxMetics:
1import { mul, add, div, E, rxl } from 'rxmetics';
2import { sub, neg } from 'rxmetics/pipes';
3import { fromEvent } from 'rxjs';
4import { pluck } from 'rxjs/operators';
5
6
7const cx = window.innerWidth / 2; // --> center of screen
8const cy = window.innerHeight / 2; // --> center of screen
9const dx = fromEvent(document, 'mousemove')
10 .pipe(pluck('clientX'), sub(cx)); // --> get the mouse x, subtract center from it
11const dy = fromEvent(document, 'mousemove')
12 .pipe(pluck('clientY'), sub(cy)); // --> get the mouse y, substract center from it
13
14const D = E(Math.sqrt)(add(mul(dx, dx), mul(dy, dy))); // --> calc distance of mouse from center
15const P = add(1, div(D, Math.sqrt(cx * cx + cy * cy)).pipe(neg)); // --> calc a power based on the distance between (0, 1)
16
17const color = rxl`rgba(255, 96, 128, ${P})`; // --> the background style based on that power
18
19color.subscribe(c => document.body.style.background = c); // --> set that style