search

ocf / ocfstatic

A static redesign of the main ocf website
https://new.ocf.berkeley.edu/
17 stars 33 forks source link

Add ESLint rule to prevent HTML comments inside Vue templates #245

Closed Kalissaac closed 2 years ago

Kalissaac commented 3 years ago

As seen in #210 adding HTML comments inside Vue templates causes hydration to fail, which breaks almost all interactive functionality of the site.

Instead of using HTML comments (<!-- comment -->), we could instead use JS template comments ({{ comment }}) which have the additional benefit of being stripped out of the final build.

Kalissaac commented 3 years ago

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

ethanwu10 commented 3 years ago

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?).

Kalissaac commented 3 years ago

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.