bug: decorator is not properly detected by eslint

[Jagget]

Prerequisites

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

Stencil ESLint Version

"@stencil/eslint-plugin": "0.3.1",
"@typescript-eslint/eslint-plugin": "5.1.0",
"@typescript-eslint/parser": "5.1.0",
"eslint": "8.0.1",
"eslint-plugin-react": "7.26.1",

Current Behavior

The component:

@Component({
  tag: 'signup',
  scoped: false,
  shadow: false,
})
export class Signup implements ComponentInterface {
  @Prop() active: boolean = false;
  render(): any {
    return <Host />;
  }
}

the error:

The @Prop decorator can only be applied to class properties   @stencil/decorators-context

Expected Behavior

No error

Steps to Reproduce

npm init stencil
npx: installed 1 in 1.681s

√ Pick a starter » component
√ Project name » bug

Follow the steps https://github.com/ionic-team/stencil-eslint/blob/main/README.md

Run npm run lint

Code Reproduction URL

No response

Additional Information

No response

[rwaskiewicz]

I'm pretty sure this is related to ESLint 8 support, need to pull it down to verify

[bodinaren]

@rwaskiewicz timdeschryver/eslint-plugin-ngrx#258

ClassProperty in decorators-context is now PropertyDefinition.

[vaibhavshn]

I tried the same with ESLint 6.8.0, still getting the same error.

[rwaskiewicz]

@Jagget we released @stencil/eslint@0.4.0 this afternoon - are you able to reproduce this issue with that version of the library and the dependencies it declares? (e.g. ESLint 7)

[Jagget]

@rwaskiewicz
Yes, sir.

src\components\my-component\my-component.tsx
  13:3  error  The @Prop decorator can only be applied to class properties  @stencil/decorators-context
  18:3  error  The @Prop decorator can only be applied to class properties  @stencil/decorators-context
  23:3  error  The @Prop decorator can only be applied to class properties  @stencil/decorators-context

src\utils\utils.ts
  2:27  warning  This type is not allowed in the condition because it is a string. Allowed types are boolean, null-union, undefined-union, or boolean-or-undefined  @stencil/strict-boolean-conditions
  2:58  warning  This type is not allowed in the condition because it is a string. Allowed types are boolean, null-union, undefined-union, or boolean-or-undefined  @stencil/strict-boolean-conditions

[Jagget]

I also got warning during npm install:

npm WARN @stencil/eslint-plugin@0.4.0 requires a peer of @typescript-eslint/eslint-plugin@<5 && ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @stencil/eslint-plugin@0.4.0 requires a peer of @typescript-eslint/parser@<5 && ^4.0.0 but none is installed. You must install peer dependencies yourself.

But I use

    "@typescript-eslint/eslint-plugin": "^5.2.0",
    "@typescript-eslint/parser": "^5.2.0",

[Ruben-E]

Same here. Downgrading worked.

From

"eslint": "^8.2.0",
"@typescript-eslint/eslint-plugin": "^5.3.1",
"@typescript-eslint/parser": "^5.3.1"

To

"eslint": "^7.0.0",
"@typescript-eslint/eslint-plugin": "^4.0.0",
"@typescript-eslint/parser": "^4.0.0"

But downgrading is just a workaround for now, nevertheless it should be fixed 🙂

[BohdanYavorskyi]

@rwaskiewicz looks like just eslint-plugin-react package could produce Eslint 8+ errors but it already supports it (7.27+).
I think eslint and @typescript-eslint packages can be easily updated

[johncrim]

This bug is also breaking the @stencil/no-unused-watch rule (I'm pretty sure). Seems like the same cause would break both rules.

I'm seeing both rules failing to identify decorators after upgrading eslint:

  28:3  error  The @Element decorator can only be applied to class properties                    @stencil/decorators-context
  31:3  error  The @Prop decorator can only be applied to class properties                       @stencil/decorators-context
  ....
  47:3  error  Watch decorator @Watch("animation") is not matching with any @Prop() or @State()  @stencil/no-unused-watch
  61:3  error  The @Event decorator can only be applied to class properties                      @stencil/decorators-context
  64:3  error  The @Event decorator can only be applied to class properties                      @stencil/decorators-context

[mhoritani]

Seems to be related to ESLint 8. Are there any plans to add support for it?

[pranav-js]

its failing for eslint 8 with eslint-plugin-react and stuff :(

[pranav-js]

I also got warning during npm install:

npm WARN @stencil/eslint-plugin@0.4.0 requires a peer of @typescript-eslint/eslint-plugin@<5 && ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN @stencil/eslint-plugin@0.4.0 requires a peer of @typescript-eslint/parser@<5 && ^4.0.0 but none is installed. You must install peer dependencies yourself.

But I use

    "@typescript-eslint/eslint-plugin": "^5.2.0",
    "@typescript-eslint/parser": "^5.2.0",

I had to install with --legacy option like this #68

[renet]

I'm having the same issue with both @stencil/decorators-context and @stencil/no-unused-watch since I updated my eslint-related dependencies to the latest version. Definitely seems to be related to the eslint v8.

Only workaround was downgrading back to eslint@7 (and @typescript-eslint/eslint-plugin@4 and @typescript-eslint/parser@4). Please fix this, being able to keep dependencies up-to-date would be awesome. 🙏

[bjankord]

Ran into this issue with The @Prop decorator can only be applied to class properties

Currently on the following versions:

• "@typescript-eslint/eslint-plugin": "^5.47.1",
• "@typescript-eslint/parser": "^5.47.1",
• "typescript": "4.8.4",
• "@stencil/core": "2.20.0",
• "@stencil/eslint-plugin": "^0.3.1",

[raphaelpor]

Solved. If you run into this issue, please upgrade your stencil-eslint to the latest version. 🙏