JSFiddle - React, Tailwind, and code Playground

by polm23

HTML

<script src="https://rawgithub.com/weepy/o_O/master/o_O.js"></script>
<script src="https://rawgithub.com/raimohanska/bacon.js/master/dist/Bacon.js"></script>
<p id="box">blah blah</p>

JavaScript

$('#box').css('color','red');
$('#box').html(o_O.VERSION);

var oldemit = o_O.emit;

var cake = o_O.model({flavor: 'red velvet'});

cake.on('set:flavor',function(a,val){$('body').append('<p>changed flavor to ' + val + '</p>')});

// This is pretty non-obvious and uses the internal, undocumented fromBinder. 
// It's basically the same as asEventStream, but that has some weird jQuery
// requirement. 
var sub = cake.on;
var unsub = function(){console.log("unsub");return function(){}};
var bf = Bacon.fromBinder(function(handler){
    sub.call(cake,'set:flavor', handler);
    return unsub;
});

bf.onValue(function(val, piffle){$('body').append('<p>baconed flavor to ' + val.flavor() + '</p>')});

//Using a bus allows us to push events, which is much easier if the callback 
// structure is simple but not handled by Bacon
var flavbus = new Bacon.Bus();

cake.on('set:flavor',function(a,val){flavbus.push(val)});

flavbus.onValue(function(val){$('body').append('<p>bussed flavor to ' + val + '</p>')});

cake.flavor('chocolate');
cake.flavor('carrot');
$('#box').css('color','green');