UI Components - Parent - Child communications

With DML, it's very easy to make Parent / Child communication.

// make : wrapper around createElement
const cType = (type) => (content, props) => make(type, props, content)

const h1 = cType("h1");
const div = cType("div");
const button = cType("button");
const br = () => make("br");


function Parent () {
  selectBase(div('', "background:darkorange; padding:10px; margin:10px"))
  h1("Parent")
  let c = Counter();
  br()
  button("inc child counter").onclick = () => c.incby(1);
  unselectBase()
}

function Counter () {
    selectBase(div("I am the child...", "border: 1px solid red; padding:10px;background:orange"))
      let value = div("0");
      let incby = (val) =>  value.innerText = Number(value.innerText)+val
      button("inc").onclick = () => incby(1);
      button("dec").onclick = () => incby(-1);
    unselectBase()
    return { incby }
}


Parent();
Parent();
Parent()

You try it here : ParentChild