SAK-50934 webcomponents Improve linting of html templates

[adrianfish]

https://sakaiproject.atlassian.net/browse/SAK-50934

[adrianfish]

Windows build failing on an html-eslint rule "require-closing-tags". The line it's checking is not even an html tag, it's a js variable binding. If a windows dev could check this branch out and build webcomponents, that would be really helpful. @bgarciaentornos ?? :)

[bgarciaentornos]

Hi, I've spent some time with this and can't really tell you why but it fails here:

<div class="site cell ${i % 2 === 0 ? "even" : "odd"}">${a.siteTitle}</div>

Then it fails in the SakaiButton.js file, line 26:

class="${this.primary ? "primary" : ""} ${this.type ? this.type : ""}"

Then SakaiComment.js (line 69) and so on.

I can't identify the problem, I tried some things like using simple quotes but still didn't find the reason. Also it seems there are way more failing cases, so not sure what should be done...

[adrianfish]

@bgarciaentornos It's frustrating because there are some nice a11y rules in this change. Could you just try commenting out the rules that break on Windows, maybe with an explanation comment? I'd prefer to get at least some of these rules in. Huge thanks for testing it out.

Does it always fail on ternary statements?

[bgarciaentornos]

Not sure if it's always related to a ternary, because sometimes it was big chunks of code. And some other ternaries seemed to work too...

I have disabled that rule and then it failed here:

[INFO] Occurred while linting C:\git\bgarciasakai\webcomponents\tool\src\main\frontend\packages\sakai-conversations\src\SakaiAddTopic.js:578 [INFO] Rule: "@html-eslint/require-img-alt"

A bit strange because it's a datepicker component inside a div, not quite an image. But something's wrong with that code because if I disable that other rule too then it stops there with this error:

[INFO] Error: Unable to parse close tag name. [INFO] </div> [INFO] ${this._showLockDatePicker ? html
[INFO]

[INFO] ${this._i18n.date}
[INFO] <sakai-date-picker
[INFO] @datetime-selected=${this._setLockDate}
[INFO] epoch-millis="${this.topic.lockDateMillis}"
[INFO] label="${this._i18n.lockdate_picker_tooltip}">
[INFO]
[INFO]

[INFO] : nothing} [INFO] </div> [INFO] </div> does not match pattern of closing tag. [INFO] Occurred while linting C:\git\bgarciasakai\webcomponents\tool\src\main\frontend\packages\sakai-conversations\src\SakaiAddTopic.js:578 [INFO] Rule: "@html-eslint/no-extra-spacing-attrs"

I'm just trying some things when I have time, but not really delving much deeper... hope it helps!

[adrianfish]

@bgarciaentornos It definitely helps. I have to wait for the github build every time I try something new :)