JSFiddle - React, Tailwind, and code Playground

by mcsf

HTML

<script src="//cdn.jsdelivr.net/ramda/latest/ramda.min.js"></script>

CSS

body {
  background: #333;
  color: #eee;
  font-family: sans-serif;
  margin: 1em;
}

pre {
  padding: 0.5em;
  background: #444;
}

code {
  font-family: monospace;
}

Babel + JSX

/*
 * Imports and setup
 */
const { chain } = R
const p = (s) =>
  document.body.innerHTML += `<p>${format(s)}</p>`
const l = (title, ...args) =>
	[ title, `<pre><code>${ format(...args) }</code></pre>` ]
		.forEach(p)
const format = (...args) => args
	.map(x => typeof x === 'string' ? x : JSON.stringify(x))
	.join('<br>')
	.replace(/,\[/g, ',\n[')
		
/*
 * Flip!
 */
const flip = (previous = []) => [
	[ ...previous, 'heads' ],
	[ ...previous, 'tails' ]
]

/*
 * Method 1: Prototype overloading,
 * for the sake of example
 */
Array.prototype.chain = function(fn) {
	return R.chain(fn, this);
}

l(
	'Method 1',
	flip().chain(flip).chain(flip)
)

/*
 * Method 2: Nested function calls.
 * Not super convenient.
 */
l(
	'Method 2a',
	chain(flip, flip())
)

l(
	'Method 2b',
	chain(
		flip,
		chain(flip, flip())
	)
)

/*
 * Method 3: FP-style function composition
 */
l(
	'Method 3',
	R.pipe(
		R.chain(flip),
		R.chain(flip),
		R.chain(flip)
	)(flip())
)