JSFiddle - React, Tailwind, and code Playground

by michaelsbradleyjr

HTML

<script src="https://github.com/michaelsbradleyjr/flapjax/raw/b9b79612be3a99452aa5b5487c5d020775e238d0/website/build/fx/flapjax.js"></script>
<p>x and y are true? &nbsp;::&nbsp; <span id="and"></span></p>
<br />
<p>x or y is true? &nbsp;::&nbsp; <span id="or"></span></p>
<br /><br />
<p>x = <span id="x"></span></p>
<p>y = <span id="y"></span></p>

<script id="ghost" type="application/json">
    { "someKey" : "amazing truly amazing! counter: ", "counter" : 1 }
</script>
<br /><br />
<div id="container"></div>

JavaScript

// setup two event stream "receivers"
// http://www.flapjax-lang.org/docs/#receiverEandsendEvent

var x = receiverE();
var y = receiverE();

// setup two behaviors, with time-varying values determined by the event streams x and y; starting value for both behaviors is boolean true
// http://www.flapjax-lang.org/docs/#startsWith

var xx = startsWith(x, true);
var yy = startsWith(y, true);

// map the event streams x and y to a function (same for both), but rate-limit the events; time values for the delays are in milliseconds; the function imperatively sends a new event to x or y, and the new event value is calculated based on the received event value
// http://www.flapjax-lang.org/docs/#delayE
// http://www.flapjax-lang.org/docs/#mapE
// http://www.flapjax-lang.org/docs/#receiverEandsendEvent

x.delayE(725).mapE(function(evt) {
    x.sendEvent(evt ? 0 : 1);
});

y.delayE(125).mapE(function(evt) {
    y.sendEvent(evt ? 0 : 1);
});

// each time the value of behaviors xx or yy changes, the value is inserted into the "innerHTML" property of the DOM element with id "x" or "y", respectively
// http://www.flapjax-lang.org/docs/#insertValueB

insertValueB(xx, 'x', 'innerHTML');
insertValueB(yy, 'y', 'innerHTML');

// works similar to the statements above, but boolean combinators are used for derived behavior values
// http://www.flapjax-lang.org/docs/#andB

insertValueB(andB(xx, yy), 'and', 'innerHTML');
insertValueB(orB(xx, yy), 'or', 'innerHTML');

// the following statements kick off sendEvent() chain reactions, owing to the mapE statements for x and y event streams
// http://www.flapjax-lang.org/docs/#receiverEandsendEvent

x.sendEvent(1);
y.sendEvent(0);

/* ------- */

// setup a variable named ghost which references the DOM element with id "ghost"

var ghost = document.getElementById('ghost');

// create an event stream for "DOMSubTreeModified" events on DOM element "ghost" (doesn't work in Safari, but does work in Chrome and Firefox); introduce an event stream...