`vg-template` reacts badly with tables

[GontikR99]

Love playing around trying to build a site with your Vugu framework.

One problem I've had is trying to use a loop within a table. Something like the following:

<table>
  <vg-template vg-for='i:=0; i<10; i++'>
    <tr><td vg-content='fmt.Sprint("before", i)'></td></tr>
    <tr><td vg-content='fmt.Sprint("after", i)'></td></tr>
  </vg-template>
</table>

In my use case I need to create two rows for each loop iteration, so sticking the vg-for on the <tr> isn't a possibility without significant reorganization.

Unfortunately, the generated code for this somehow lifts the loop outside the table, and won't compile due to references to the undeclared variable i.

My read of the code is that the issue is that vugu/html's parsing of tables uses "table insertion mode" while building the HTML node tree, and table insertion mode doesn't respect the <vg-template> tags -- it ends up moving them outside the table.

[bradleypeabody]

Thanks @GontikR99 - yes, you're right about the reason for this issue.

Overall the HTML parsing needs some additional attention and refactor. The parser Vugu uses (https://github.com/vugu/html) is a fork of golang.org/x/net/html, which is where the this rule is coming from. Perhaps instead of trying to fix these automatically, a better behavior would be to simply enforce stricter rules, and have them be customized to Vugu (to handle things like vg-template).

Unfortunately I don't know of a simple fix other than to work around the HTML parser, e.g. by using display: table CSS on div tag, etc. Or in this case you could do something like put the vg-for on the tr tag, make the loop run to 20 instead of 10 and do a vg-if='i%2==0' on the first td tag, and vg-if='i%2==0' on the second. Ugly, I know :)

I'll leave this open as it's definitely a valid point that should be addressed, but hopefully one of those workarounds can serve in the mean time.