[jsx-no-bind] Only warn for props and account for variable declaration

[jackyho112]

This will fix #1444, #1395 and #1417, so that the rule will only warn if there are violations in JSX attributes and will keep track of const variable declarations of violations.

For examples,

renderButton(someParams){
  const clickHandler = this.handleClick.bind(this, someParams);
  return(
    <ButtonComponent
      onClick={clickHandler}
    >
      Submit
    </ButtonComponent>  
  )
} 

will warn.

But

 render() {
    return (
      <div>
        {this.props.list.map(this.wrap.bind(this, 'span'))}
      </div>
    );
  }

will not.

The new implementation is simply keeping track of each const variable declaration that references a violation in each block statement and reports them if they got passed into JSX props.

With the update, this rule does not account for any assignment expression and variable declarations that are not const. I feel that it is acceptable to leave them for future updates.

Please let me know if there is any idea for improvements. 😄

Fixes #1444. Fixes #1395. Fixes #1417.

[jackyho112]

I think this block of code reports any violation in a component's render method. This rule is supposed to only report violations in JSX props, so this is not needed.

[ljharb]

most of these test cases don't need babel-eslint; can we use the default parser wherever possible?

[ljharb]

What about async arrow functions?

[jackyho112]

@ljharb Forgot about them. Will fix. 😅

[jackyho112]

@ljharb

Thanks for the feedback! I have gotten rid of all the unnecessary babel-eslint in the tests. For async arrow functions, I think the code has already accounted for it by checking all the block statements, so I just added more tests regarding that.

Now I will always keep async arrow functions in mind for future contributions. let me know if there is anything else I can improve on this PR. 😄

[ljharb]

@jackyho112 I was mainly asking about ensuring that <Foo prop={async () => {}} /> warns too :-)

[jackyho112]

@ljharb 😄 , didn't know. I'm on it!

[ljharb]

Let's also ensure that function () {}, function * () {}, and async function () {} all warn as well :-)

[jackyho112]

@ljharb Good call. Gonna have to do it tomorrow though.

[ljharb]

Thanks, this LGTM

[jackyho112]

Thanks for the approval!

[toearth]

However, with react-navigation options, it can not pass the rule

[ljharb]

@windhost can you file a separate issue for that? since NavigationOptions returns an object, it shouldn't be treated like a component.

[toearth]

@ljharb 👌

[toearth]

#1736