eslint-plugin-react-x 5.18.1 → 5.18.2

package/dist/index.js

@@ -145,7 +145,7 @@ const rules$6 = {
 //#endregion
 //#region package.json
 var name$6 = "eslint-plugin-react-x";
-var version = "5.18.1";
+var version = "5.18.2";
 
 //#endregion
 //#region src/utils/create-rule.ts
@@ -3397,21 +3397,79 @@ function create$23(context) {
 //#endregion
 //#region src/rules/no-nested-component-definitions/lib.ts
 /**
-* Determine whether the node is inside JSX attribute value
-* @param node The AST node to check
-* @returns `true` if the node is inside JSX attribute value
+* Well-known component wrapper function names, matched by exact or `.`-suffixed fully
+* qualified name (e.g. `memo`, `React.memo`, `mobx.observer`, `connect` from react-redux,
+* or Relay's `create*Container` helpers). Only wrappers whose argument is a render function
+* are listed; wrappers taking a component identifier (`styled`, `motion`) or a loader
+* (`lazy`, `dynamic`) are irrelevant for name resolution.
 */
-function isInsideJSXAttributeValue(node) {
-	return node.parent.type === AST_NODE_TYPES.JSXAttribute || findParentAttribute(node, (n) => n.value?.type === AST_NODE_TYPES.JSXExpressionContainer) != null;
+const WELL_KNOWN_COMPONENT_WRAPPERS = [
+	"connect",
+	"createFragmentContainer",
+	"createPaginationContainer",
+	"createRefetchContainer",
+	"forwardRef",
+	"graphql",
+	"memo",
+	"observer",
+	"useCallback"
+];
+/** Matches the HOC naming convention shared by recompose, react-router v5, Formik and custom HOCs (e.g. `withProps`, `withRouter`, `withFormik`, `withAuth`). */
+const RE_HOC_WRAPPER_NAME = /^with[A-Z]/;
+/**
+* Check if a call expression is a well-known component wrapper call.
+* Only calls whose callee's fully qualified name is (or ends with) a well-known wrapper
+* name (e.g. `memo`, `React.memo`, `React.useCallback`, `mobx.observer`) are treated as
+* wrappers; anything else, including member calls on data objects (e.g. `items.map`,
+* `Array.from`), is not, so array method callbacks are never mistaken for wrapped components.
+* Curried wrappers like `connect(...)(Component)` or `withFormik(...)(Component)` are
+* recognized by unwrapping nested callee call expressions.
+* @param context The rule context
+* @param node The call expression to check
+* @returns `true` if the call is a well-known component wrapper call
+*/
+function isWellKnownComponentWrapperCall(context, node) {
+	let callee = Extract.unwrap(node.callee);
+	while (callee.type === AST_NODE_TYPES.CallExpression) callee = Extract.unwrap(callee.callee);
+	const name = Extract.getFullyQualifiedName(callee, (n) => context.sourceCode.getText(n));
+	const baseName = name.slice(name.lastIndexOf(".") + 1);
+	return RE_HOC_WRAPPER_NAME.test(baseName) || WELL_KNOWN_COMPONENT_WRAPPERS.some((wrapper) => name === wrapper || name.endsWith(`.${wrapper}`));
 }
 /**
-* Check whether a given node is declared inside a class component's render block
-* Ex: class C extends React.Component { render() { const Nested = () => <div />; } }
-* @param node The AST node being checked
-* @returns `true` if the node is inside a class component's render block
+* Check if a call expression is a component wrapper call for name resolution purposes.
+* @param context The rule context
+* @param call The call expression to check
+* @param arg The function node passed to the call
+* @returns `true` if the call is a component wrapper call
 */
-function isInsideRenderMethod(node) {
-	return Traverse.findParent(node, (n) => core.isRenderMethodLike(n) && core.isClassComponent(n.parent.parent)) != null;
+function isComponentWrapperCall(context, call, arg) {
+	if (Extract.unwrap(call.callee) === arg) return false;
+	return isWellKnownComponentWrapperCall(context, call);
+}
+/**
+* Resolve the name a function is bound to through a chain of wrapping call expressions,
+* e.g. `const Component = useCallback(() => <div />, [])` resolves to `Component`.
+* @param context The rule context
+* @param node The function node to resolve the bound name for
+* @returns The bound name if the call chain ends at a variable declarator with an identifier, `null` otherwise
+*/
+function getWrapperCallBoundName(context, node) {
+	let current = node;
+	let parent = current.parent;
+	while (Check.isTypeExpression(parent)) {
+		current = parent;
+		parent = parent.parent;
+	}
+	while (parent.type === AST_NODE_TYPES.CallExpression && isComponentWrapperCall(context, parent, current)) {
+		current = parent;
+		parent = parent.parent;
+		while (Check.isTypeExpression(parent)) {
+			current = parent;
+			parent = parent.parent;
+		}
+	}
+	if (parent.type !== AST_NODE_TYPES.VariableDeclarator || parent.id.type !== AST_NODE_TYPES.Identifier) return null;
+	return parent.id.name;
 }
 /**
 * Determine whether the node is inside `createElement`'s props argument
@@ -3426,6 +3484,23 @@ function isInsideCreateElementProps(context, node) {
 	if (prop == null) return false;
 	return prop === call.arguments[1];
 }
+/**
+* Determine whether the node is inside JSX attribute value
+* @param node The AST node to check
+* @returns `true` if the node is inside JSX attribute value
+*/
+function isInsideJSXAttributeValue(node) {
+	return node.parent.type === AST_NODE_TYPES.JSXAttribute || findParentAttribute(node, (n) => n.value?.type === AST_NODE_TYPES.JSXExpressionContainer) != null;
+}
+/**
+* Check whether a given node is declared inside a class component's render block
+* Ex: class C extends React.Component { render() { const Nested = () => <div />; } }
+* @param node The AST node being checked
+* @returns `true` if the node is inside a class component's render block
+*/
+function isInsideRenderMethod(node) {
+	return Traverse.findParent(node, (n) => core.isRenderMethodLike(n) && core.isClassComponent(n.parent.parent)) != null;
+}
 
 //#endregion
 //#region src/rules/no-nested-component-definitions/no-nested-component-definitions.ts
@@ -3442,21 +3517,24 @@ var no_nested_component_definitions_default = createRule({
 	defaultOptions: []
 });
 function create$22(context) {
-	const hint = core.FunctionComponentDetectionHint.DoNotIncludeJsxWithNumberValue | core.FunctionComponentDetectionHint.DoNotIncludeJsxWithBooleanValue | core.FunctionComponentDetectionHint.DoNotIncludeJsxWithNullValue | core.FunctionComponentDetectionHint.DoNotIncludeJsxWithStringValue | core.FunctionComponentDetectionHint.DoNotIncludeJsxWithUndefinedValue | core.FunctionComponentDetectionHint.RequireBothSidesOfLogicalExpressionToBeJsx | core.FunctionComponentDetectionHint.RequireBothBranchesOfConditionalExpressionToBeJsx | core.FunctionComponentDetectionHint.DoNotIncludeFunctionDefinedAsArrayPatternElement | core.FunctionComponentDetectionHint.DoNotIncludeFunctionDefinedAsArrayExpressionElement | core.FunctionComponentDetectionHint.DoNotIncludeFunctionDefinedAsArrayMapCallback;
+	const hint = core.FunctionComponentDetectionHint.DoNotIncludeJsxWithNumberValue | core.FunctionComponentDetectionHint.DoNotIncludeJsxWithBooleanValue | core.FunctionComponentDetectionHint.DoNotIncludeJsxWithNullValue | core.FunctionComponentDetectionHint.DoNotIncludeJsxWithStringValue | core.FunctionComponentDetectionHint.DoNotIncludeJsxWithUndefinedValue | core.FunctionComponentDetectionHint.RequireBothSidesOfLogicalExpressionToBeJsx | core.FunctionComponentDetectionHint.RequireBothBranchesOfConditionalExpressionToBeJsx | core.FunctionComponentDetectionHint.DoNotIncludeFunctionDefinedAsArrayPatternElement | core.FunctionComponentDetectionHint.DoNotIncludeFunctionDefinedAsArrayExpressionElement | core.FunctionComponentDetectionHint.DoNotIncludeFunctionDefinedAsArrayMapCallback | core.FunctionComponentDetectionHint.DoNotIncludeFunctionDefinedAsArrayFlatMapCallback;
 	const fc = core.getFunctionComponentCollector(context, { hint });
 	const cc = core.getClassComponentCollector(context);
 	return merge(fc.visitor, cc.visitor, { "Program:exit"(program) {
 		const fComponents = [...fc.api.getAllComponents(program)];
 		const cComponents = [...cc.api.getAllComponents(program)];
+		const fComponentNodes = new Set(fComponents.map((c) => c.node));
+		const cComponentNodes = new Set(cComponents.map((c) => c.node));
 		function findEnclosingComponent(node) {
 			return Traverse.findParent(node, (n) => {
-				if (Check.isFunction(n)) return fComponents.some((c) => c.node === n);
-				if (Check.isClass(n)) return cComponents.some((c) => c.node === n);
+				if (Check.isFunction(n)) return fComponentNodes.has(n);
+				if (Check.isClass(n)) return cComponentNodes.has(n);
 				return false;
 			});
 		}
-		for (const { name, node: component } of fComponents) {
-			if (name == null) continue;
+		for (let { name, node: component } of fComponents) {
+			name ??= getWrapperCallBoundName(context, component);
+			if (name == null || !core.isFunctionComponentNameLoose(name)) continue;
 			if (isInsideJSXAttributeValue(component)) {
 				context.report({
 					data: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-react-x",
-  "version": "5.18.1",
+  "version": "5.18.2",
   "description": "A set of composable ESLint rules for libraries and frameworks that use React as a UI runtime.",
   "keywords": [
     "react",
@@ -45,16 +45,16 @@
     "string-ts": "^2.3.1",
     "ts-api-utils": "^2.5.0",
     "ts-pattern": "^5.9.0",
-    "@eslint-react/ast": "5.18.1",
-    "@eslint-react/core": "5.18.1",
-    "@eslint-react/jsx": "5.18.1",
-    "@eslint-react/shared": "5.18.1",
-    "@eslint-react/eslint": "5.18.1",
-    "@eslint-react/var": "5.18.1"
+    "@eslint-react/ast": "5.18.2",
+    "@eslint-react/core": "5.18.2",
+    "@eslint-react/eslint": "5.18.2",
+    "@eslint-react/jsx": "5.18.2",
+    "@eslint-react/var": "5.18.2",
+    "@eslint-react/shared": "5.18.2"
   },
   "devDependencies": {
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "dedent": "^1.7.2",
     "eslint": "^10.8.0",
     "react": "^19.2.8",