Riot should support less intrusive virtual tags

[kokujin]

Riots tags virtual tags sometimes are unnecessary and may "pollute" DOM. It would be nice if it was something like Knockouts(http://knockoutjs.com/documentation/custom-bindings-for-virtual-elements.html)

<!-- ko foreach: items -->
        <li data-bind="text: $data"></li>
    <!-- /ko -->

• Question
• Bug
• Discussion
• [x ] Feature request
• Tip
• [x ] Enhancement
• Performance

[rsbondi]

your ko example renders to the dom

<!-- ko foreach: items -->
        <li data-bind="text: $data">item 1</li>
        <li data-bind="text: $data">item 2</li>
<!-- /ko -->

it renders the comments as well as the expression on each list item

the riot equivelant would be

<li each={item in items}>{item}</li>

renders

<li>item 1</li>
<li>item 2</li>

with virtual

<virtual each={item in items}>
  <h1>{item.h}</h1>
  <p>{item.p}</p>
</virtual>

renders

<h1>header 1</h1>
<p>value 1</p>
<h1>header 2</h1>
<p>value 2</p>

no virtual element(comments rendered in ko) and no expressions on each element so polluting the dom is not an issue, however the knockout style advantage does allow virtual anywhere since comments can go anywhere, so I can see an improvement where you might want use in a table or select/options but I can't think of an good example.

[GianlucaGuarini]

Honestly I don't see any improvement here, it's just a matter of style. Riot uses DOM nodes easier to remember and type, self contained, familiar for any HTML developer and IDE friendly. Knockout on the other hand uses DOM comments that in my opinion are less semantic and more confusing: we reuse html (enhancing it a bit) as presentation layer, html comments were made for another purpose and make sense only if you want to comment what you are actually coding and not what you are trying to achieve with your layout.

[kokujin]

Maybe I'm mistaken. But I noticed that nested custom tags leave an encompassing virtual tag. So using the example above

<virtual each={item in items}>
  <h1>{item.h}</h1>
  <my-test>
      <p>{item.p}</p>
    </my-test>
</virtual>

Would render, this

<virtual each={item in items}>
    <h1>header 1</h1>

    </my-test>
        <p>value 1</p>
    </my-test>
    <h1>header 2</h1>

    <my-test>
    <p>value 2</p>
    </my-test>
</virtual>

I understand the advantages of riots virtual tags, the thing is, I would like them not to show up in the markup

[GianlucaGuarini]

All virtual tags must be removed. The current riot implementation removes them only in the loops. In future we will remove also in the conditional statements

[rsbondi]

no virtual in dom,

I would like them not to show up in the markup

Not sure I follow?

[wintercounter]

Tried your plunker with this. As stated, it is only removed when using with each. Agree that it should be removed always under any circumstances.

<virtual if={ true }>
    My content
</virtual>

[GianlucaGuarini]

The current virtual implementation allows if statement and loops and that's enough for riot@3 the future riot release will allow users to render their tag with pure js template strings so I am closing this issue.