jsx-eslint/eslint-plugin-react

[jsx-handler-names] allow whitelisting of components or props (ideally both together)

Open

#2285 opened on May 22, 2019

View on GitHub
 (9 comments) (2 reactions) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
enhancementhelp wanted

Description

This issue is somewhat generic, as while I can think of a couple of abstract ways of solving this problem I'm pretty sure most of them would blow the rule up in terms of implementation.

Basically, while the rule is great, it doesn't care if a component is under my control or not.

For example, react-trello has a prop called handleDragEnd, which'll be flagged if I pass it this.handleDragEnd.

Ideally, I'd like to be able to whitelist ReactTrello#handeDragEnd (i.e "ignore the 'handleDragEnd' prop on components called 'ReactTrello').

While that can be done, I believe the current implementation of this rule is just a couple of regexes, which would mean expanding it to look for the name of the component a prop is on could be a lot more extra code.

A less optimal solution could be to allow whitelisting of props by name - so just "ignore any prop called 'handleDragEnd'". This could be used together with "override" so that only files that use the component that have the prop is ignored.

Regardless, the crux of the problem that I feel should be looked at solving is:

jsx-handler-names doesn't care if a component is under my control or not, meaning that it'll mark props that I can't rename as errors.

Contributor guide

Tech stack
javascriptreact
Domain
toolingdeveloper experience
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
mostly clear
Prerequisites
JavaScriptESLint plugin developmentReact JSX
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40
Research direction
Examine the current implementation of jsx handler names rule in the eslint plugin react repository. The rule currently uses regex based checks on handler props. Investigate how to add an option to whitelist specific component prop pairs, possibly by extending the rule's schema to accept an object mapping component names to allowed prop names. Review existing test files and documentation to understand the expected integration. Look for any previous comments or proposals in the issue for guidance on preferred implementation.