Add detection for @bind decorators in react-this-binding

[connor4312]

It's common practice to do something like the following:

import { bind } from 'decko';

class Foo extends Component {
  public render() {
    return <button onclick={this.sayHi}>Greet</button>;
  }

  @bind
  public sayHi() {
    alert('hi');
  }
}

Unfortunately the react-this-binding-issue rule isn't aware of this and gets tripped up.

I propose adding an option like { "bindDecorators": ["bind"] } which looks at decorator names and flags functions with those decorators as having been bound. It can have sensible defaults like ["bind", "Bind"].

[cyberhck]

is this being considered?

[JoshuaKGoldberg]

@cyberhck absolutely! Everything with the Status: Accepting PRs label is open to being contributed. Feel free to tackle this if you have time! 😊

[cyberhck]

I would, but I don't even know how to go about this 😄

[IllusionMH]

@cyberhck if you are still interested in implementation I can provide you with tips about possible implementation.

Otherwise I can take on this issue if there are no more volunteers.

[cyberhck]

Yes please, can you provide me some tips? Since this will be my first attempt, I don't know of helper methods, and I don't know how to detect if a function is bound or not.

[IllusionMH]

@cyberhck ok.
First - understanding of AST for TypeScript code would help. You can use https://astexplorer.net/ (need to pick TypeScript as parser in the header) or https://ts-ast-viewer.com/ to see what are relations between nodes (ClassDeclaration, MethodDeclaration, Decorator etc.)

Next - files related to rule: rule source and tests.

In rule source code you'll need to add options parser inside Walker constructor (you can check other rules for example) and in VisitClassDeclaration instead of empty array of bound declarations you want to add list of methods that has decorator with identifier specified in options. I'd propose to move code from AstUtils.getDeclaredMethodNames to this method and process both declaredMethods and boundListeners in the single run, but it up to you.

Test are regular Mocha tests with helpers that allow to compare liter result with array of error objects. For your case you'll need to use TestHelper.assertViolationsWithOptions and pass configuration with list of decorator names that will bind methods.

[cyberhck]

I've enabled experimentalDecorators for test data. Will send a PR soonish.
can someone please review :)

[connor4312]

Great job @cyberhck!