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();
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.
You can play with it here : CounterDemo
Top comments (0)