JSFiddle - React, Tailwind, and code Playground

by Kye Hohenberger

HTML

<script src="https://npmcdn.com/preact@latest/dist/preact.js"></script>
<div id="Example1"></div>
<div id="Example2"></div>

Babel + JSX

/** @jsx h */
const { h, render, Component, hooks, options } = preact;

const Box = (...args) => h('div', ...args)

const red = (Component) => (props) => 
	Box({ style: { color: 'red', border: '4px solid currentColor' } }, 'red', h(Component, props))

const green = (Component) => (props) => 
	Box({ style: { color: 'green', border: '4px solid currentColor' } }, 'green', h(Component, props))

const blue = (Component) => (props) =>
  Box({ style: { color: 'blue', border: '4px solid currentColor' } }, 'blue', h(Component, props))

const clickHandler = (onClick) => (Component) => class extends Component {
  render () { return Box({ onClick: this.handleClick }, h(Component, this.props)) }
  handleClick = (e) => onClick(e, this.props)
}
	

const C = x => ({
  map: f => C(f(x)),
  fold: f => f(x),
  x
})

const a = C(Box)
  .map(blue)
  .map(red)
  .map(clickHandler((e, props) => {
  	alert('clicked')
  }))
  .fold((x) => x)


render(h(a, { style: { width: 100, height: 200 } }), document.getElementById('Example1'))

const LazyC = g => ({
	fold: f => f(g()),
  map: f => LazyC(() => f(g())),
  g
})

let b = LazyC(() => Box)
	.map(red)
  .map(blue)

b = b.map(green)
render(b.fold(x => { return x({ style: { width: 100, height: 200 } })}), document.getElementById('Example2'))