43081j / eslint-plugin-lit

lit-html support for ESLint
115 stars 20 forks source link

rule 'attribute-names' is also applied to internal reactive state #202

Closed HerrDietz closed 1 month ago

HerrDietz commented 1 month ago

In the following class, the attribute-names” rule is applied to the isFoo property, although it is decorated with @state and therefore has no public attribute.

import {LitElement} from "lit";
import {customElement, state} from "lit/decorators.js";

@customElement('my-component')
export class MyComponent extends LitElement {

  @state()
  private isFoo = false;

}

The rule is applied as well if the static properties syntax is used.

@customElement('my-component2')
export class MyComponent2 extends LitElement {

  static properties={
    isFoo: {type: Boolean, state: true}
  }

}
43081j commented 1 month ago

good catch. seems like a bug for sure

contributions welcome, but if not, ill try take a look soon 👍

HerrDietz commented 1 month ago

I'll see if I can get around to taking a look at it this weekend. If I do, I'll be happy to post a pull request.

43081j commented 1 month ago

its probably as simple as changing this condition to also check for !propConfig.state:

https://github.com/43081j/eslint-plugin-lit/blob/fb4dcfe3e67bab1eb3f69469cbc69dabaa94b75b/src/rules/attribute-names.ts#L40-L42

but i'd start by adding a test with similar code to your example and go from there

HerrDietz commented 1 month ago

I have opened a pullrequest. Would you be so kind to review it?

43081j commented 1 month ago

Fixed by #203