43
loading...
DML is to Javascript what Tailwind is to CSS.
I am still impressed by the way it works.
Look at this piece of code :
Look at this piece of code :
function topBar (appName) {
let _styleTopBar = {style :`
background:orange;
line-height:50px;
display: flex;
justify-content: space-between;
margin-bottom: 50px;
padding-left:10px;
padding-right:10px;
box-shadow: 0 5px 5px rgba(0,0,0,0.13);
`}
let topBar = selectBase(div("", _styleTopBar ));
let _styleItems = {style:"cursor:pointer"}
let brand = div("brand", _styleItems);
let title = div(appName, _styleItems);
let help = div("Help", _styleItems);
unselectBase(); // topBar
for (let item of [brand, title, help]) {
item.onclick = () => alert(item.innerText);
}
return topBar;
}
let topbar = topBar("DML Demo");
console.log(topbar);Here is the result of the output:
<div style="background: orange none repeat scroll 0% 0%; line-height: 50px; display: flex; justify-content: space-between; margin-bottom: 50px; padding-left: 10px; padding-right: 10px; box-shadow: rgba(0, 0, 0, 0.13) 0px 5px 5px;">...</div>As Eckehard says, the author of DML, topBar acts as a function generator, it generates a real UI Element.
And to prove it, you can use your favorite framework to render it on a page (but you don't have to :-))
Here is how to render a topbar with Preact
You can test it here Topbar/Preact
const { render } = preact;
function topBar (appName) {
let _styleTopBar = {style :`
background:orange;
line-height:50px;
display: flex;
justify-content: space-between;
margin-bottom: 50px;
padding-left:10px;
padding-right:10px;
box-shadow: 0 5px 5px rgba(0,0,0,0.13);
`}
let topBar = selectBase(div("", _styleTopBar ));
let _styleItems = {style:"cursor:pointer"}
let brand = div("brand", _styleItems);
let title = div(appName, _styleItems);
let help = div("Help", _styleItems);
unselectBase(); // topBar
for (let item of [brand, title, help]) {
item.onclick = () => alert(item.innerText);
}
return topBar;
}
render(topBar("Demo DML"), document.body);But you can simply render topBar natively TopBar :
topBar("Demo DML")
topBar("Demo DML-2")Amazing :-)
43