JSFiddle - React, Tailwind, and code Playground

by BraveOstrich

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.4.1/Rx.js"></script>

JavaScript

function MessageWalker() {
	return {
  	enter: function(obj) {
      source.next({enter: obj});
    },
    exit: function(obj) {
      source.next({exit:obj});
    }
  }
}

var mw = new MessageWalker();
var source = new Rx.Subject();
var height = new Rx.Subject();
source.scan(function (acc, x, i, source) { 
	var result = acc.slice();
  if (!!x.enter) {
		result.push({name: x.enter.name, height: 0});
  }
  if (!!x.exit) {
  	result.forEach(function(item) {item.height += 20;});
  	var obj = result.pop();
    height.next(obj);
  }
	return result; 
  }, [])
  .subscribe(
	function(v) {console.log('next', v);},
  function(e) {console.log('error', e);},
  function() {console.log('completed');}
  );  
height.subscribe(
	function(v) {console.log('get height next', v);},
  function(e) {console.log('error', e);},
  function() {console.log('completed');}
);  
mw.enter({name: 'a'});
mw.enter({name: 'b'});
mw.enter({name: 'c'});
mw.exit({name: 'c'});
mw.enter({name: 'd'});
mw.exit({name: 'd'});
mw.exit({name: 'b'});
mw.enter({name: 'e'});
mw.exit({name: 'e'});
mw.exit({name: 'a'});