Discussion on: YoffeeJS: Yet another Javascript framework. But this one's good, I think

[artydev]

Hy Numbut

What do you think of this, a not styled tiny counter :

import {button, idiv, div, unselectBase, selectBase} from "./dml"; 
function Counter () {
    let count = 0;
    let counter = selectBase(div(''))
    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;
    unselectBase()
    return counter 
}

/* This is displayed directly on the page */
Counter()

You can test it here : DevToTinyCounter

Regards

[Numbnut]

Hi :)
I like the self-encapsulation of your components. In the second (styled) example, you could move the style inside the Counter function.
What I don't like is that in order to write html hierarchies, you have to declare selectBase and unselectBase each time you enter / exit a DOM node. Your code formatting will be ruined if you run a basic linter.
Instead, I would allow a third parameter to the function div (and any other HTML Element) that would receive it's children, and it would look like:

div("I am a div", {style: ...}, [
    span("I am a child"),
    div("I am another child")
])

But that's just my opinion - you should do whatever you like.
Can you send me your github / npm so I can play with it? I couldn't find it.

Also, did you look at hyperapp? It looks close to DML in its concept.
Have a good day :)

[artydev]

Hy Numbut,
Thank you your advises.
In fact, I am not the creator of DML
Here is the official link : DML
Github : DMLGit

Enjoy :-)

Regards

[Numbnut]

Thanks :)

[artydev]

Hyperapp is nice.
But DML has this very nice thing to refence directly the newly created element.
Read the official site, to see what does that permit.

Regards

[Numbnut]

Yep, that's actually a neat feature of the selectBase code style.