43081j / eslint-plugin-lit

lit-html support for ESLint
116 stars 21 forks source link

no invalid html bug #133

Closed thepassle closed 1 year ago

thepassle commented 1 year ago

Given the following code:

        <foo-bar
          @current-changed=${this.__offsetChanged}
          page-url="?count=${this.__paginationCount}&offset="
          .count="${Math.ceil(agreements.length / this.__paginationCount)}"
          .current="${this.__paginationOffset}"
        ></foo-bar>

I'm getting linting errors on both the lines of page-url AND .count:

image

image

Changing the value of page-url to any string (like for example page-url="foo"), passes the lint check.

Im guessing the template analyzer flags the usage of & and = in an attribute as invalid, but it seems to also flag the next line as invalid, which seems like a bug.

image

43081j commented 1 year ago

for now, you can probably just move the bindings to variables:

const pageUrl = `?count=${this.__paginationCount}&offset=`;
const count = Math.ceil(agreements.length / this.__paginationCount);

// ...

return html`
  <foo-bar
    page-url=${pageUrl}
    .count=${count}

it'll probably be fixed by #130 once i push a new release

43081j commented 1 year ago

Closing since 130 should've fixed this