Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

option: list subclass names #148

Open
bennypowers opened this issue Nov 28, 2022 · 5 comments
Open

option: list subclass names #148

bennypowers opened this issue Nov 28, 2022 · 5 comments

Comments

@bennypowers
Copy link

We should provide an option that lists (string) subclass names, so that

export class IsReallyALitElement extends FooElement {
  /*...*/
}

lints up with our plugin

@43081j
Copy link
Owner

43081j commented Nov 28, 2022

probably can re-use the same logic eslint-plugin-wc uses:

"settings": {
  "wc": {
    "elementBaseClasses": ["MyElement"]
  }
}

one idea is that we could use the same detection as eslint-plugin-wc: look for a customElement decorator or JSDoc on the class we're in. then if we see it has a render method and makes use of html, maybe we assume its a lit element?

bit of an awkward one though, lot of guesswork 😬

may be better to just do the base class stuff

@freshp86
Copy link

freshp86 commented May 30, 2024

Has there been any resolution/workaround here? Looking to possibly use this plugin, but all our Lit elements extend from a custom LitElement subclass, so it fails to find any errors when specifying lit/lifecycle-super checks.

@maxpatiiuk
Copy link

maxpatiiuk commented May 30, 2024

My workaround, for now, has been to name my custom Lit class LitElement, and to use https://typescript-eslint.io/rules/no-restricted-imports/ to forbit importing LitElement directly from lit

@freshp86
Copy link

freshp86 commented May 30, 2024

Thanks for the suggestion. While the above would work, it would require a lot of renaming across the codebase so not ideal. An easier approach would be to directly patch the relevant rules locally to use our custom subclass name (see below result for git grep --no-index 'LitElement'

lib/rules/lifecycle-super.js:                node.superClass.name !== 'LitElement') {
lib/rules/no-property-change-update.js:                node.superClass.name !== 'LitElement') {
lib/rules/no-this-assign-in-render.js:                node.superClass.name !== 'LitElement') {

Having said that, this would also not work well for our case since we often use Mixins using the following pattern.

const MyElementBase = SomeMixin(MyLitElement);

class MyElement extends MyElementBase {...}

So we would need to supply a list of classes.

@43081j
Copy link
Owner

43081j commented May 30, 2024

ill take a look at this at the weekend if i can 👍

pretty busy next few days but ill pick it up soon as i can

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants