Asynchronous Dynamic Liste in UMAI

Umai is heavily inspired by Mithril.

Here is a demo showing how to update a liste a lite in asynchronous mode:

/** @jsx m */
import { m, mount, redraw } from 'umai';

const MAX = 11
const DATA = Array.from({ length: MAX }).map((_, i) => i)

let liste = []; 

function sleep (ms) {
  return new Promise((r, err) => {
    setTimeout(r, ms)
  })
}

let fillListe = (datas) => async () => {
    const setup = (element) => {
      const eventHandlers = {
        mouseover: () => element.style.background = "red",
        mouseout: () => element.style.background = "white"
      };
      Object.keys(eventHandlers).forEach(event => {
        element.addEventListener(event, eventHandlers[event]);
      });
    };
    for (var i of datas ) {
      await sleep(200)
      liste.push(
        <h1 
          dom={setup} 
          style="cursor:pointer" 
          data-index={i} 
          onclick={(e) => {alert(e.target.innerText)}}
        >
          {i}
        </h1>)
      redraw()
    }
  }

const App  = () => (
  <div>
    <h1>Dynamic Liste</h1>
    <ul dom = {() => fillListe(DATA)()}>
      { liste }
    </ul>   
  </div>
)

mount(document.body, App); 

Demo