JSFiddle - React, Tailwind, and code Playground

by Kye Hohenberger

HTML

<script src="https://unpkg.com/preact/dist/preact.min.js"></script>
<div id="o"></div>

CSS

html,
body,
#app,
.full-size {
  font-family: sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

JavaScript

const {
  h,
  Component: preactComponent,
  render,
  cloneElement
} = preact

const el = document.getElementById('o')

function compose(...funcs) {
  if (funcs.length === 0) {
    return arg => arg
  }
  if (funcs.length === 1) {
    return funcs[0]
  }
  return funcs.reduce((a, b) => (...args) => a(b(...args)))
}

class Component {
  constructor() {
    this.children = []
    this.hocStack = []
    return this
  }

  markup(Component) {
    this.children = compose(...this.hocStack)(Component)
    console.log(this.children)
    return compose(...this.hocStack)(Component)
  }

  mapProps(fn) {
    this.hocStack.push((C) => {
      return (props) => h(C, fn(props))
    })
    return this
  }

  withProps(fn) {
    this.hocStack.push((C) => {
      return (props) => h(C, Object.assign({}, props, fn(props)))
    })
    return this
  }

  render(props) {
    render(h(this.children, props), el)
  }
}

const Child = new Component()
  .withProps((props) => {
    return {
      age: Math.floor(props.name.length * 9.8)
    }
  })
  .markup((props) => h('pre', {}, JSON.stringify(props, null, 2), props.children))

const App = new Component()
  .mapProps((props) => {
    return {
      name: props.name.toUpperCase()
    }
  })
  .markup((props) => h(Child, props, h('div', {}, 'child 1'), h('div', {}, 'child 2')))
  
 render(h(App, {
    name: 'Kye'
  }), el)