JSFiddle - React, Tailwind, and code Playground

by koehr

HTML

The classic:

<div id="content">…loading</div>

JavaScript

function reactive(obj) {
  const wrapped = {}

  for (let key in obj) {
    let value = obj[key]

    Object.defineProperty(wrapped, key, {
      get: function reactiveGetter() {
        return value
      },
      set: function reactiveGetter(newValue) {
        console.log('setting value from', value, 'to', newValue)
        value = newValue
      }
    })
  }

  return wrapped
}

const component = {
  el: document.getElementById('content'),
  data: reactive({ name: 'World' }),
  render: function () {
    console.log('component renders', this.data)
    this.el.innerHTML = `<h1>Hello ${this.data.name}</h1>`
  }
}

component.render()
component.data.name = 'Universe'