ProAct.js click counter with streams

Uses the ProAct.registry to declaratively write code.

by meddle

HTML

<script src="http://cdn.jsdelivr.net/proact.js/0.4.2/proact.min.js"></script>
<div class='counter'>0</div>
<button onclick='P.registry.s("plus").trigger(1)'>+</button>
<button onclick='P.registry.s("minus").trigger(1)'>-</button>
<button onclick='P.registry.s("plus").trigger(2)'>+2</button>
<button onclick='P.registry.s("minus").trigger(2)'>-2</button>

JavaScript

ProAct.registry.make('s:plus'); 
ProAct.registry.make('s:minus', 'map(-)');
ProAct.registry.make('s:main', '<<(s:plus, s:minus)|acc(+)|@($1)', function (v) {
    var counterEl = document.getElementsByClassName('counter')[0];
    counterEl.innerHTML = v;
});

// 1: Creates a stream called 'plus' and stores it into the ProAct.registry.
//    This stream is a simple value stream.
// 2: Creates a stream called 'minus' and stores it into the ProAct.registry.
//    On its values is mapped the predefined function '-', that inverts the sign of its operand
// 3: Creates a stream called 'main', it has two sources of values - the streams minus and plus; It accumulates using the predefined summing function and it has one listener a function that changes the html of the counter with every new value.