DEV Community

Discussion on: The magic function...

View post

Replies for: I think that if DML could be formatted, properly indented, in an Editor, it could be more easily adopted...

Collapse
 
efpage profile image
Eckehard •

Sorry, I did not get your point? You can get indentation by adding { } in the code...

Thread Thread
 
artydev profile image
artydev •

In the following code, the indentation between 'view' and 'end' is done manually
and disapear whenever you format with Pretier ar any other code formater

function Counter (start = 0) {
  const counter = state(start);
  let view = bdiv();
      h1("Counter ", counter)
      button("INC").onclick = () => ++counter.val;
  end()
  return view
}
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
artydev profile image
artydev • • Edited

I have just tried

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

  h1("Here is an orphan counter");
  Counter(12);
}
end();
Enter fullscreen mode Exit fullscreen mode

and the indentation is preserved, great :-D

Than you Eckehard

Thread Thread
 
efpage profile image
Eckehard • • Edited

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();
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode
Thread Thread
 
artydev profile image
artydev •

Great Eckehard, I will be the first to use it :-)