JSFiddle - React, Tailwind, and code Playground

by gianlucaguarini

HTML

<script src="https://webreflection.github.io/hyperHTML/min.js"></script>

JavaScript

function createComponent(root, struct) {
   const renderer = hyperHTML.bind(root)
   return Object.create(struct, {
    mount: {
      value(){
        this.update()
      }
    },
  	update: {
      value(data) {
      	Object.assign(this.store, data || {})
    		this.render(renderer, this.store)
      }
    }
  })
}

const cmp = createComponent(document.body, {
  store: {
     message: 'click me',
     error: 'i am an error',
     items: [{ value: 'foo'}, { value: 'bar' }]
  },
	render(h, store) {
  	 return h`
      <p onclick="${ this.updateMessage.bind(this) }">
        ${ store.message }
      </p>${ store.error ?
         `<div>
           <p>${ store.error }</p>
         </div>`
         : `no errors`
      }<ul>${
         this.store.items.map((item) => {
           return `<li>${ item.value }</li>`
         })
      }</ul>
    `;
  },
	updateMessage() {
  	this.update({ message: 'goodbye', error: false })
  }
})

cmp.mount()