New Rule: `invalid-attribute`

[paoloricciuti]

Motivation

In the past (and apparently i'm not alone ) i had the need to prevent certain types of attributes to be used. It could be the need to prevent an onclick attribute like i asked months ago (well now it would actually be the opposite ironically) or something more general for some specific reasons i think having a way to specify a list of invalid attributes could be a good rule to have.

Description

The user can provide through rule options a list of invalid attributes/regex. Every component using such attribute will be reported.

Examples

Given a configuration like this

{
    "rules": {
        "svelte/invalid-attribute": ["error", ["title"]]
    }
}

<!-- ✗ BAD -->
<Foo title=""/>
<Foo {title}/>
<Foo bind:title/>
<Foo title={somevar}/>

we probably can also error on props named that way for in-repo components.

Additional comments

I got a very barebone version of this already and if interested i can work on it and submit a PR.

[baseballyama]

Why do we need to check <Foo>’s attribute? If the <Foo> component does not have a title prop, we should be able to recognize this through type checking, right? Are you suggesting that we want to restrict something like <p title="xxx">xxx</p>?

[paoloricciuti]

Why do we need to check <Foo>’s attribute? If the <Foo> component does not have a title prop, we should be able to recognize this through type checking, right? Are you suggesting that we want to restrict something like <p title="xxx">xxx</p>?

When people create components they can add the "title" prop on a component. But now that i think about it will be more effective to check the props of the in-repo components rather than the attributes because if some external library requires a banned attribute that could be problematic.

[paoloricciuti]

And i think what enrico actually wanted was prevent the usage of some html attribute (like title and placeholder)