Add ESLint rule to prevent HTML comments inside Vue templates about ocfstatic HOT 3 CLOSED

Additionally, having some kind of automatic hydration check every time we run a build would be nice, not sure if Gridsome supports that.

from ocfstatic.

I haven't had too much time to debug what exactly happens, but HTML <!-- --> comments do get stripped out of the final build (at least for SSR). Also, from a cursory glance at the ASTs produced by the eslint parser, detecting the location of a comment is quite annoying since they are at the root of the <template> and not the node they're contained in. Flat-out banning HTML comments would be easier, but we need to check that JS comments don't break it either.

A hydration test seems quite computationally expensive because AFAICT most of the issue comes from how the browser parsers the HTML, so you'd need a real browser and not e.g. JSDOM; plus, we'd need to check that every page hydrates correctly and have a way of reliably detecting when hydration failed (probably just clicking buttons?).

from ocfstatic.

Oh ok that's good to know about HTML comments. I just tested it and hydration worked fine for me with JS comments.

As for the hydration test, I didn't really take that into account, it definitely seems like something that would require a lot more fine tuning to get right. Maybe an easy solution for now is to just implement a HTML validation step in our build process? That would identify all the missing closing tag issues that people were mentioning in the Gridsome issues.

from ocfstatic.