43081j / eslint-plugin-lit

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

Update `binding-positions` rule for Lit v2 #98

Open stramel opened 3 years ago

stramel commented 3 years ago

In Lit v2 you can achieve some of these invalid binding positions by using import { html } from 'lit/static-html.js'; .

We should probably warn about the binding positions if they're not utilizing the static html function.

https://lit.dev/docs/api/static-html/ https://lit.dev/docs/templates/expressions/#expression-locations https://lit.dev/docs/templates/expressions/#static-expressions

aboutsimon commented 2 years ago

Same issue with no-invalid-html, when trying to use e.g. the code from the lit docs

  render() {
    return html`
      <${this.tag} ${this.activeAttribute}?=${this.active}>
        <p>${this.caption}</p>
      </${this.tag}>`;
  }

Results in

Template contained invalid HTML syntax, error was: invalid-first-character-of-tag-name eslint lit/no-invalid-html

43081j commented 2 years ago

that one in particular is because our placeholders are currently comments except in the case of attributes, then they are placeholder attributes.

we need to implement better placeholder/substitution to account for tags/attributes/etc.

i was hoping peter on the lit team would finish the analyzer he started building first, so we could just use the same analysis here.