Discussion on: The magic function...

You can also use a short form for indentation in VScode, which is readable as well. It´s just a matter of personal preference:

  let app = bdiv(); {
    h1({ style: "text-align:center" }, "Demo VanJS / DML");
    Counter(0);
    Counter(4);
    Counter(56);
  }; end();

With respect to Tao´s whish to keep the code as small as possible, van_dml contains just a minimal version of begin/end. The next version of DML, which I´m currently working on, will look like this:

begin(document.body);
{
    let app = bdiv();   
    {
        h1({ style: "text-align:center" }, "Demo VanJS / DML");
        Counter(0);
        Counter(4);
        Counter(56);
    }
    end(app);
    app.style = style_app;
}
end(document.body);

This is super helpful in larger applications, as you immediately know, which level is closed by end(). You can still use end() without arguments, but if you include the reference, that was used in the corresponding begin(), DML performs a stack check to see, if all levels are closed correctly. This comes very handy in larger applications.

I preserved the option to perform multiple end´s like this, which sometimes makes the code shorter:

begin(document.body);
{
    let app = bdiv();   
    {
        h1({ style: "text-align:center" }, "Demo VanJS / DML");
        Counter(0);
        bdiv("border: 1px solid black;");   
        {
            h1({ style: "text-align:center" }, "Demo VanJS / DML");
            Counter(0);
        }
    }
}
end(3, document.body);