bug: lots of unusable / reserved HTML props missing in reserved member linting rule

[Ruben-E]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil ESLint Version

0.4.0

Current Behavior

We created a component with results as property:

@Prop() results: ResultItem[];

Yet, in React we were unable to bind the correct data:

'{ ... }[]' is not assignable to type 'ResultItem[] & number'.
  Type '{ ... }[]' is not assignable to type 'number'

Completely confused where the intersection type & number was coming from.

After digging into Stencil we found that results was already defined on HTMLAttributes interface as a number: https://github.com/ionic-team/stencil/blob/main/src/declarations/stencil-public-runtime.ts#L1300

Stencil ESlinter missed this reserved property. It's not present in the reserved member rule, which should warn for these. And we found more unusable / reserved properties by comparing HTMLAttributes interface with the linting rule:

Set(29) {
  'class',
  'contextmenu',
  'hidden',
  'spellcheck',
  'tabindex?',
  'inputmode',
  'enterkeyhint',
  'is',
  'radiogroup',
  'role',
  'about',
  'datatype',
  'inlist',
  'property',
  'resource',
  'typeof',
  'vocab',
  'autocapitalize',
  'autocorrect',
  'autosave',
  'color',
  'itemprop',
  'itemscope',
  'itemtype',
  'itemid',
  'itemref',
  'results',
  'security',
  'unselectable'
}

We verified this with a couple of these properties and got the same behavior as with results

Expected Behavior

The reserved member linting rule should match the reserved properties in Stencil: https://github.com/ionic-team/stencil/blob/main/src/declarations/stencil-public-runtime.ts#L1238.

Steps to Reproduce

Inconsistent linting

Compare the reserved properties in Stencil with the reserved member linting rule. Or check the reproduce script.

Actual impact on development

Stencil:

export class Component {
  @Prop() results: string;

  render() {
    return (
      <div>
        {results}
      </div>
    );
  }
}

React: (with Stencil react output)

<Component results="123"></Component>

Results

ERROR in apps/react/src/app/app.tsx:40:49
TS2322: Type 'string' is not assignable to type 'undefined'.
  > 40 |             <Component results="123"></Component>

ESLint didn't complain.

Working example

With another, not reserved name, it works:

Stencil:

export class Component {
  @Prop() foo: string;

  render() {
    return (
      <div>
        {foo}
      </div>
    );
  }
}

React: (with Stencil react output)

<Component foo="123"></Component>

Results

webpack compiled successfully (37ebed430927f8d3)

Code Reproduction URL

https://gist.github.com/Ruben-E/091c96ea508ce8fb33eec59d324bdfab

Additional Information

No response