DEV Community

loading...
Cover image for Tiny Statefull Components with DML

Tiny Statefull Components with DML

artydev
Updated on ・8 min read

Here is a very tiny Counter component written with DML. Look carefully, although it is tiny, the concepts behind worth a try :-).

I am a big fan of tiny frameworks like Mithril, Preact..., but I am revisiting my positions the more I use DML.

No vdom, no repaint, no jsx, no bundler, directly in the browser in plain Javascript.

If you like Javascript, you will appreciate DML :-)
Here is certainly, one of the tiniest TinyCounter:

import {button, idiv} from "./dml"; /* <sdtio.h> :-) */

function Counter () {
    let count = 0;
    let value = idiv("0", {style:"padding-right: 10px"});
    let binc = button("inc");
    let bdec = button("dec");
    binc.onclick = () => value.innerText = ++count;
    bdec.onclick = () => value.innerText = --count;
}

Counter();
Enter fullscreen mode Exit fullscreen mode

Another one, more styled :

function Counter () {
    let count = 0;
    selectBase(div("", {style : styleCounter})); // <==> <div>...
      selectBase(div("")) // <==> <div>...
        span("Counter : ");
        let value = span("0");
      unselectBase()     // <==> </div>
      let binc = button("inc");
      let bdec = button("dec");
    unselectBase(); // <==> <div>...
    binc.onclick = () => value.innerText = ++count;
    bdec.onclick = () => value.innerText = --count;
    /* Eventually you can : */
    return {
       inc : binc.onclick,
       dec : bdec.onclick
    }
}

let counter = Counter();

counter.inc()

The  idea using DML, is that all created elements are automatically referenced.
You access all their properties, without having to use any global'id' to reference them. 

Enter fullscreen mode Exit fullscreen mode

You can play with it here : CounterDemo

Discussion (0)