Mithril & WickedElement

Adding WickeElement to Mithril allows to create "custom-elements" very easily.

You can test it here Chrono

<div class="my-chrono"></div>
<div class="my-chrono"></div>

import {define} from 'wicked-elements';

let Chrono = function () {
  let count = 0;  
  let disabled = false;
  let timer;
  let start = () => {timer = setInterval(() => { count += 1; disabled = true; m.redraw()}) }
  let stop = () => {clearInterval(timer); disabled = false; m.redraw()};
  let reset = () => {stop(); count = 0} 
  let disable = (status) => status
  let view = () => [
    m("h1", count),
    m("button", {onclick:start, disabled : disabled}, "start"),
    m("button", {onclick:stop}, "stop"),
    m("button", {onclick:reset}, "reset")
  ]
  return  { 
    view : view 
  }
}

function renderComp(target, component) {
   m.mount(target, component)
}

define(".my-chrono", {
   init() {
     renderComp(this.element, Chrono)
   } 
})