JSFiddle - React, Tailwind, and code Playground

by Minko Gechev

HTML

<script src="http://cdn.jsdelivr.net/pro.js/0.3.0/pro.min.js"></script>
<div class='counter'>0</div>
<button onclick='App.plus.trigger(1)'>+</button>
<button onclick='App.minus.trigger(1)'>-</button>
<button onclick='App.plus.trigger(2)'>+2</button>
<button onclick='App.minus.trigger(2)'>-2</button>

JavaScript

// counter is numeric pro value (reactive value)
// plus and minus are normal Pro.Streams
// stream is a merge of the plus stream and a stream created from the minus stream that turns every value from the minus stream to a its negative counterpart - for example 1 becomes -1, 30 : -30 .
var counter = Pro.prob(0),
    plus = new Pro.Stream(),
    minus = new Pro.Stream(),
    stream = plus.merge(minus.map(function (el) {
        return -el;
    }));

// Here we bind the counter value to a DOM element.
counter.on(function () {
    var counterEl = document.getElementsByClassName('counter')[0];
    counterEl.innerHTML = counter.v;
});

// Exporting the plus and minus to be used as click handlers.
window.App = {};
window.App.plus = plus;
window.App.minus = minus;

// This is cool - the counter reactive object will update its input on every event that comes from the stream passed to #in. The stream is accumulation stream - it sums the current result from stream to the new value that is struggered.
// Example : the accumulated value is 0 in the beginning (the default seed), when we trigger 5 -> the new value from the stream will be 0 + 5 = 5, and the accumulated sum is 5.
// On the next value - 4 we have 5 + 4 = 9 -> the new accumulated val. 
counter.into(stream.accumulate(0, function (x, y) {
    return x + y;
}));