plastikaweb
12/6/2016 - 9:56 AM

JS Bin// source https://jsbin.com/jewezex RxJS - Refactoring composable streams

JS Bin// source https://jsbin.com/jewezex RxJS - Refactoring composable streams

index.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"></script>
</head>
<body>
  <button id="start">Start</button>
  <button id="half">Half</button>
  <button id="quarter">Quarter</button>
  <button id="stop">Stop</button>
  <button id="reset">Reset</button>
<script id="jsbin-javascript">
'use strict';

var startB = document.querySelector('#start');
var stopB = document.querySelector('#stop');
var resetB = document.querySelector('#reset');
var halfB = document.querySelector('#half');
var quarterB = document.querySelector('#quarter');

var start$ = Rx.Observable.fromEvent(startB, 'click');
var stop$ = Rx.Observable.fromEvent(stopB, 'click');
var reset$ = Rx.Observable.fromEvent(resetB, 'click');
var half$ = Rx.Observable.fromEvent(halfB, 'click');
var quarter$ = Rx.Observable.fromEvent(quarterB, 'click');

var data = { count: 5 };
var inc = function inc(acc) {
  return { count: acc.count + 1 };
};
var reset = function reset(acc) {
  return data;
};

var starters$ = Rx.Observable.merge(start$.mapTo(1000), half$.mapTo(500), quarter$.mapTo(250));
var intervalActions$ = function intervalActions$(time) {
  return Rx.Observable.merge(Rx.Observable.interval(time).takeUntil(stop$).mapTo(inc), reset$.mapTo(reset));
};

starters$.switchMap(intervalActions$).startWith(data).scan(function (acc, curr) {
  return curr(acc);
}).subscribe(function (x) {
  return console.log(x);
});
</script>

<script id="jsbin-source-html" type="text/html">
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <script src="https://unpkg.com/@reactivex/rxjs@5.0.0-beta.7/dist/global/Rx.umd.js"><\/script>
</head>
<body>
  <button id="start">Start</button>
  <button id="half">Half</button>
  <button id="quarter">Quarter</button>
  <button id="stop">Stop</button>
  <button id="reset">Reset</button>
</body>
</html></script>


<script id="jsbin-source-javascript" type="text/javascript">const startB = document.querySelector('#start');
const stopB = document.querySelector('#stop');
const resetB = document.querySelector('#reset');
const halfB = document.querySelector('#half');
const quarterB = document.querySelector('#quarter');

const start$ = Rx.Observable.fromEvent(startB, 'click');
const stop$ = Rx.Observable.fromEvent(stopB, 'click');
const reset$ = Rx.Observable.fromEvent(resetB, 'click');
const half$ = Rx.Observable.fromEvent(halfB, 'click');
const quarter$ = Rx.Observable.fromEvent(quarterB, 'click');

const data = { count: 5 };
const inc = (acc) => ({count: acc.count + 1});
const reset = (acc) => (data);

const starters$ = Rx.Observable.merge(
    start$.mapTo(1000), 
    half$.mapTo(500),
    quarter$.mapTo(250)
  );
const intervalActions$ = (time) => Rx.Observable.merge(
      Rx.Observable.interval(time)
        .takeUntil(stop$).mapTo(inc), 
      reset$.mapTo(reset)
    );

starters$
  .switchMap(intervalActions$)
  .startWith(data)
  .scan((acc, curr) => curr(acc))
  .subscribe((x) => console.log(x));
</script></body>
</html>
jsbin.jewezex.js
content_copyfile_download
'use strict';

var startB = document.querySelector('#start');
var stopB = document.querySelector('#stop');
var resetB = document.querySelector('#reset');
var halfB = document.querySelector('#half');
var quarterB = document.querySelector('#quarter');

var start$ = Rx.Observable.fromEvent(startB, 'click');
var stop$ = Rx.Observable.fromEvent(stopB, 'click');
var reset$ = Rx.Observable.fromEvent(resetB, 'click');
var half$ = Rx.Observable.fromEvent(halfB, 'click');
var quarter$ = Rx.Observable.fromEvent(quarterB, 'click');

var data = { count: 5 };
var inc = function inc(acc) {
  return { count: acc.count + 1 };
};
var reset = function reset(acc) {
  return data;
};

var starters$ = Rx.Observable.merge(start$.mapTo(1000), half$.mapTo(500), quarter$.mapTo(250));
var intervalActions$ = function intervalActions$(time) {
  return Rx.Observable.merge(Rx.Observable.interval(time).takeUntil(stop$).mapTo(inc), reset$.mapTo(reset));
};

starters$.switchMap(intervalActions$).startWith(data).scan(function (acc, curr) {
  return curr(acc);
}).subscribe(function (x) {
  return console.log(x);
});