/** * @fileoverview Prevent common casing typos */ 'use strict'; const PROP_TYPES = Object.keys(require('prop-types')); const Components = require('../util/Components'); const docsUrl = require('../util/docsUrl'); const componentUtil = require('../util/componentUtil'); const report = require('../util/report'); const lifecycleMethods = require('../util/lifecycleMethods'); // ------------------------------------------------------------------------------ // Rule Definition // ------------------------------------------------------------------------------ const STATIC_CLASS_PROPERTIES = ['propTypes', 'contextTypes', 'childContextTypes', 'defaultProps']; const messages = { typoPropTypeChain: 'Typo in prop type chain qualifier: {{name}}', typoPropType: 'Typo in declared prop type: {{name}}', typoStaticClassProp: 'Typo in static class property declaration', typoPropDeclaration: 'Typo in property declaration', typoLifecycleMethod: 'Typo in component lifecycle method declaration: {{actual}} should be {{expected}}', staticLifecycleMethod: 'Lifecycle method should be static: {{method}}', noPropTypesBinding: '`\'prop-types\'` imported without a local `PropTypes` binding.', noReactBinding: '`\'react\'` imported without a local `React` binding.', }; module.exports = { meta: { docs: { description: 'Disallow common typos', category: 'Stylistic Issues', recommended: false, url: docsUrl('no-typos'), }, messages, schema: [], }, create: Components.detect((context, components, utils) => { let propTypesPackageName = null; let reactPackageName = null; function checkValidPropTypeQualifier(node) { if (node.name !== 'isRequired') { report(context, messages.typoPropTypeChain, 'typoPropTypeChain', { node, data: { name: node.name }, }); } } function checkValidPropType(node) { if (node.name && !PROP_TYPES.some((propTypeName) => propTypeName === node.name)) { report(context, messages.typoPropType, 'typoPropType', { node, data: { name: node.name }, }); } } function isPropTypesPackage(node) { return ( node.type === 'Identifier' && node.name === propTypesPackageName ) || ( node.type === 'MemberExpression' && node.property.name === 'PropTypes' && node.object.name === reactPackageName ); } /* eslint-disable no-use-before-define */ function checkValidCallExpression(node) { const callee = node.callee; if (callee.type === 'MemberExpression' && callee.property.name === 'shape') { checkValidPropObject(node.arguments[0]); } else if (callee.type === 'MemberExpression' && callee.property.name === 'oneOfType') { const args = node.arguments[0]; if (args && args.type === 'ArrayExpression') { args.elements.forEach((el) => { checkValidProp(el); }); } } } function checkValidProp(node) { if ((!propTypesPackageName && !reactPackageName) || !node) { return; } if (node.type === 'MemberExpression') { if ( node.object.type === 'MemberExpression' && isPropTypesPackage(node.object.object) ) { // PropTypes.myProp.isRequired checkValidPropType(node.object.property); checkValidPropTypeQualifier(node.property); } else if ( isPropTypesPackage(node.object) && node.property.name !== 'isRequired' ) { // PropTypes.myProp checkValidPropType(node.property); } else if (node.object.type === 'CallExpression') { checkValidPropTypeQualifier(node.property); checkValidCallExpression(node.object); } } else if (node.type === 'CallExpression') { checkValidCallExpression(node); } } /* eslint-enable no-use-before-define */ function checkValidPropObject(node) { if (node && node.type === 'ObjectExpression') { node.properties.forEach((prop) => checkValidProp(prop.value)); } } function reportErrorIfPropertyCasingTypo(propertyValue, propertyKey, isClassProperty) { const propertyName = propertyKey.name; if (propertyName === 'propTypes' || propertyName === 'contextTypes' || propertyName === 'childContextTypes') { checkValidPropObject(propertyValue); } STATIC_CLASS_PROPERTIES.forEach((CLASS_PROP) => { if (propertyName && CLASS_PROP.toLowerCase() === propertyName.toLowerCase() && CLASS_PROP !== propertyName) { const messageId = isClassProperty ? 'typoStaticClassProp' : 'typoPropDeclaration'; report(context, messages[messageId], messageId, { node: propertyKey, }); } }); } function reportErrorIfLifecycleMethodCasingTypo(node) { const key = node.key; let nodeKeyName = key.name; if (key.type === 'Literal') { nodeKeyName = key.value; } if (key.type === 'PrivateName' || (node.computed && typeof nodeKeyName !== 'string')) { return; } lifecycleMethods.static.forEach((method) => { if (!node.static && nodeKeyName && nodeKeyName.toLowerCase() === method.toLowerCase()) { report(context, messages.staticLifecycleMethod, 'staticLifecycleMethod', { node, data: { method: nodeKeyName, }, }); } }); lifecycleMethods.instance.concat(lifecycleMethods.static).forEach((method) => { if (nodeKeyName && method.toLowerCase() === nodeKeyName.toLowerCase() && method !== nodeKeyName) { report(context, messages.typoLifecycleMethod, 'typoLifecycleMethod', { node, data: { actual: nodeKeyName, expected: method }, }); } }); } return { ImportDeclaration(node) { if (node.source && node.source.value === 'prop-types') { // import PropType from "prop-types" if (node.specifiers.length > 0) { propTypesPackageName = node.specifiers[0].local.name; } else { report(context, messages.noPropTypesBinding, 'noPropTypesBinding', { node, }); } } else if (node.source && node.source.value === 'react') { // import { PropTypes } from "react" if (node.specifiers.length > 0) { reactPackageName = node.specifiers[0].local.name; // guard against accidental anonymous `import "react"` } else { report(context, messages.noReactBinding, 'noReactBinding', { node, }); } if (node.specifiers.length >= 1) { const propTypesSpecifier = node.specifiers.find((specifier) => ( specifier.imported && specifier.imported.name === 'PropTypes' )); if (propTypesSpecifier) { propTypesPackageName = propTypesSpecifier.local.name; } } } }, 'ClassProperty, PropertyDefinition'(node) { if (!node.static || !componentUtil.isES6Component(node.parent.parent, context)) { return; } reportErrorIfPropertyCasingTypo(node.value, node.key, true); }, MemberExpression(node) { const propertyName = node.property.name; if ( !propertyName || STATIC_CLASS_PROPERTIES.map((prop) => prop.toLocaleLowerCase()).indexOf(propertyName.toLowerCase()) === -1 ) { return; } const relatedComponent = utils.getRelatedComponent(node); if ( relatedComponent && (componentUtil.isES6Component(relatedComponent.node, context) || ( relatedComponent.node.type !== 'ClassDeclaration' && utils.isReturningJSX(relatedComponent.node))) && (node.parent && node.parent.type === 'AssignmentExpression' && node.parent.right) ) { reportErrorIfPropertyCasingTypo(node.parent.right, node.property, true); } }, MethodDefinition(node) { if (!componentUtil.isES6Component(node.parent.parent, context)) { return; } reportErrorIfLifecycleMethodCasingTypo(node); }, ObjectExpression(node) { const component = componentUtil.isES5Component(node, context) && components.get(node); if (!component) { return; } node.properties.filter((property) => property.type !== 'SpreadElement').forEach((property) => { reportErrorIfPropertyCasingTypo(property.value, property.key, false); reportErrorIfLifecycleMethodCasingTypo(property); }); }, }; }), };