jsx-eslint/eslint-plugin-react

function-component-definition should ignore function with `this`

Open

#2781 opened on Sep 1, 2020

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

Description

This is a polyfill for IE:

		Element.prototype.closest = function (s) {
			let el = this
			if (!document.documentElement.contains(el)) return null
			do {
				if (el.matches(s)) return el
				el = el.parentElement || el.parentNode
			} while (el !== null && el.nodeType === 1)
			return null
		}

it needs access to this and function-component-definition complains about it.

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
bug
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-3 hours
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.
clear
Prerequisites
Understanding of ESLint rulesJavaScript AST basics
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the rule implementation in lib/rules/function component definition.js. The rule currently flags all function expressions not defined as arrow functions. To fix, add a check to skip functions that contain a 'this' expression in their body. Look at ESLint's AST for 'ThisExpression' node type. Ensure the fix aligns with the rule's purpose and add appropriate tests.