(function () {

  const {innerHTML, html} = window.diff

  const state = {
    name: "Anonymous",
    email: "nobody@nowhere.com"
  }

  const actions = {
    changeName: (e) => state.name = e.target.value,
    changeEmail: (e) => state.email = e.target.value
  }

  function render() { 
    innerHTML(window.scene, html`
      <style>
        input {
          margin-bottom: 10px;
          display: block;
        }
      </style>
      <h2> 
        Hello ${state.name} <br /> Your email is : ${state.email}
      </h2>
      Name : <input oninput="${actions.changeName}"/>
      Email : <input oninput="${actions.changeEmail}"/>
    `);
    requestAnimationFrame(render);
  }

  render();

})();