boolean-prop-naming.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426
  1. /**
  2. * @fileoverview Enforces consistent naming for boolean props
  3. * @author Ev Haus
  4. */
  5. 'use strict';
  6. const flatMap = require('array.prototype.flatmap');
  7. const values = require('object.values');
  8. const Components = require('../util/Components');
  9. const propsUtil = require('../util/props');
  10. const astUtil = require('../util/ast');
  11. const docsUrl = require('../util/docsUrl');
  12. const propWrapperUtil = require('../util/propWrapper');
  13. const report = require('../util/report');
  14. const eslintUtil = require('../util/eslint');
  15. const getSourceCode = eslintUtil.getSourceCode;
  16. const getText = eslintUtil.getText;
  17. /**
  18. * Checks if prop is nested
  19. * @param {Object} prop Property object, single prop type declaration
  20. * @returns {boolean}
  21. */
  22. function nestedPropTypes(prop) {
  23. return (
  24. prop.type === 'Property'
  25. && astUtil.isCallExpression(prop.value)
  26. );
  27. }
  28. // ------------------------------------------------------------------------------
  29. // Rule Definition
  30. // ------------------------------------------------------------------------------
  31. const messages = {
  32. patternMismatch: 'Prop name `{{propName}}` doesn’t match rule `{{pattern}}`',
  33. };
  34. /** @type {import('eslint').Rule.RuleModule} */
  35. module.exports = {
  36. meta: {
  37. docs: {
  38. category: 'Stylistic Issues',
  39. description: 'Enforces consistent naming for boolean props',
  40. recommended: false,
  41. url: docsUrl('boolean-prop-naming'),
  42. },
  43. messages,
  44. schema: [{
  45. additionalProperties: false,
  46. properties: {
  47. propTypeNames: {
  48. items: {
  49. type: 'string',
  50. },
  51. minItems: 1,
  52. type: 'array',
  53. uniqueItems: true,
  54. },
  55. rule: {
  56. default: '^(is|has)[A-Z]([A-Za-z0-9]?)+',
  57. minLength: 1,
  58. type: 'string',
  59. },
  60. message: {
  61. minLength: 1,
  62. type: 'string',
  63. },
  64. validateNested: {
  65. default: false,
  66. type: 'boolean',
  67. },
  68. },
  69. type: 'object',
  70. }],
  71. },
  72. create: Components.detect((context, components, utils) => {
  73. const config = context.options[0] || {};
  74. const rule = config.rule ? new RegExp(config.rule) : null;
  75. const propTypeNames = config.propTypeNames || ['bool'];
  76. // Remembers all Flowtype object definitions
  77. const objectTypeAnnotations = new Map();
  78. /**
  79. * Returns the prop key to ensure we handle the following cases:
  80. * propTypes: {
  81. * full: React.PropTypes.bool,
  82. * short: PropTypes.bool,
  83. * direct: bool,
  84. * required: PropTypes.bool.isRequired
  85. * }
  86. * @param {Object} node The node we're getting the name of
  87. * @returns {string | null}
  88. */
  89. function getPropKey(node) {
  90. // Check for `ExperimentalSpreadProperty` (eslint 3/4) and `SpreadElement` (eslint 5)
  91. // so we can skip validation of those fields.
  92. // Otherwise it will look for `node.value.property` which doesn't exist and breaks eslint.
  93. if (node.type === 'ExperimentalSpreadProperty' || node.type === 'SpreadElement') {
  94. return null;
  95. }
  96. if (node.value && node.value.property) {
  97. const name = node.value.property.name;
  98. if (name === 'isRequired') {
  99. if (node.value.object && node.value.object.property) {
  100. return node.value.object.property.name;
  101. }
  102. return null;
  103. }
  104. return name;
  105. }
  106. if (node.value && node.value.type === 'Identifier') {
  107. return node.value.name;
  108. }
  109. return null;
  110. }
  111. /**
  112. * Returns the name of the given node (prop)
  113. * @param {Object} node The node we're getting the name of
  114. * @returns {string}
  115. */
  116. function getPropName(node) {
  117. // Due to this bug https://github.com/babel/babel-eslint/issues/307
  118. // we can't get the name of the Flow object key name. So we have
  119. // to hack around it for now.
  120. if (node.type === 'ObjectTypeProperty') {
  121. return getSourceCode(context).getFirstToken(node).value;
  122. }
  123. return node.key.name;
  124. }
  125. /**
  126. * Checks if prop is declared in flow way
  127. * @param {Object} prop Property object, single prop type declaration
  128. * @returns {boolean}
  129. */
  130. function flowCheck(prop) {
  131. return (
  132. prop.type === 'ObjectTypeProperty'
  133. && prop.value.type === 'BooleanTypeAnnotation'
  134. && rule.test(getPropName(prop)) === false
  135. );
  136. }
  137. /**
  138. * Checks if prop is declared in regular way
  139. * @param {Object} prop Property object, single prop type declaration
  140. * @returns {boolean}
  141. */
  142. function regularCheck(prop) {
  143. const propKey = getPropKey(prop);
  144. return (
  145. propKey
  146. && propTypeNames.indexOf(propKey) >= 0
  147. && rule.test(getPropName(prop)) === false
  148. );
  149. }
  150. function tsCheck(prop) {
  151. if (prop.type !== 'TSPropertySignature') return false;
  152. const typeAnnotation = (prop.typeAnnotation || {}).typeAnnotation;
  153. return (
  154. typeAnnotation
  155. && typeAnnotation.type === 'TSBooleanKeyword'
  156. && rule.test(getPropName(prop)) === false
  157. );
  158. }
  159. /**
  160. * Runs recursive check on all proptypes
  161. * @param {Array} proptypes A list of Property object (for each proptype defined)
  162. * @param {Function} addInvalidProp callback to run for each error
  163. */
  164. function runCheck(proptypes, addInvalidProp) {
  165. if (proptypes) {
  166. proptypes.forEach((prop) => {
  167. if (config.validateNested && nestedPropTypes(prop)) {
  168. runCheck(prop.value.arguments[0].properties, addInvalidProp);
  169. return;
  170. }
  171. if (flowCheck(prop) || regularCheck(prop) || tsCheck(prop)) {
  172. addInvalidProp(prop);
  173. }
  174. });
  175. }
  176. }
  177. /**
  178. * Checks and mark props with invalid naming
  179. * @param {Object} node The component node we're testing
  180. * @param {Array} proptypes A list of Property object (for each proptype defined)
  181. */
  182. function validatePropNaming(node, proptypes) {
  183. const component = components.get(node) || node;
  184. const invalidProps = component.invalidProps || [];
  185. runCheck(proptypes, (prop) => {
  186. invalidProps.push(prop);
  187. });
  188. components.set(node, {
  189. invalidProps,
  190. });
  191. }
  192. /**
  193. * Reports invalid prop naming
  194. * @param {Object} component The component to process
  195. */
  196. function reportInvalidNaming(component) {
  197. component.invalidProps.forEach((propNode) => {
  198. const propName = getPropName(propNode);
  199. report(context, config.message || messages.patternMismatch, !config.message && 'patternMismatch', {
  200. node: propNode,
  201. data: {
  202. component: propName,
  203. propName,
  204. pattern: config.rule,
  205. },
  206. });
  207. });
  208. }
  209. function checkPropWrapperArguments(node, args) {
  210. if (!node || !Array.isArray(args)) {
  211. return;
  212. }
  213. args.filter((arg) => arg.type === 'ObjectExpression').forEach((object) => validatePropNaming(node, object.properties));
  214. }
  215. function getComponentTypeAnnotation(component) {
  216. // If this is a functional component that uses a global type, check it
  217. if (
  218. (component.node.type === 'FunctionDeclaration' || component.node.type === 'ArrowFunctionExpression')
  219. && component.node.params
  220. && component.node.params.length > 0
  221. && component.node.params[0].typeAnnotation
  222. ) {
  223. return component.node.params[0].typeAnnotation.typeAnnotation;
  224. }
  225. if (
  226. !component.node.parent
  227. || component.node.parent.type !== 'VariableDeclarator'
  228. || !component.node.parent.id
  229. || component.node.parent.id.type !== 'Identifier'
  230. || !component.node.parent.id.typeAnnotation
  231. || !component.node.parent.id.typeAnnotation.typeAnnotation
  232. ) {
  233. return;
  234. }
  235. const annotationTypeArguments = propsUtil.getTypeArguments(
  236. component.node.parent.id.typeAnnotation.typeAnnotation
  237. );
  238. if (
  239. annotationTypeArguments && (
  240. annotationTypeArguments.type === 'TSTypeParameterInstantiation'
  241. || annotationTypeArguments.type === 'TypeParameterInstantiation'
  242. )
  243. ) {
  244. return annotationTypeArguments.params.find(
  245. (param) => param.type === 'TSTypeReference' || param.type === 'GenericTypeAnnotation'
  246. );
  247. }
  248. }
  249. function findAllTypeAnnotations(identifier, node) {
  250. if (node.type === 'TSTypeLiteral' || node.type === 'ObjectTypeAnnotation' || node.type === 'TSInterfaceBody') {
  251. const currentNode = [].concat(
  252. objectTypeAnnotations.get(identifier.name) || [],
  253. node
  254. );
  255. objectTypeAnnotations.set(identifier.name, currentNode);
  256. } else if (
  257. node.type === 'TSParenthesizedType'
  258. && (
  259. node.typeAnnotation.type === 'TSIntersectionType'
  260. || node.typeAnnotation.type === 'TSUnionType'
  261. )
  262. ) {
  263. node.typeAnnotation.types.forEach((type) => {
  264. findAllTypeAnnotations(identifier, type);
  265. });
  266. } else if (
  267. node.type === 'TSIntersectionType'
  268. || node.type === 'TSUnionType'
  269. || node.type === 'IntersectionTypeAnnotation'
  270. || node.type === 'UnionTypeAnnotation'
  271. ) {
  272. node.types.forEach((type) => {
  273. findAllTypeAnnotations(identifier, type);
  274. });
  275. }
  276. }
  277. // --------------------------------------------------------------------------
  278. // Public
  279. // --------------------------------------------------------------------------
  280. return {
  281. 'ClassProperty, PropertyDefinition'(node) {
  282. if (!rule || !propsUtil.isPropTypesDeclaration(node)) {
  283. return;
  284. }
  285. if (
  286. node.value
  287. && astUtil.isCallExpression(node.value)
  288. && propWrapperUtil.isPropWrapperFunction(
  289. context,
  290. getText(context, node.value.callee)
  291. )
  292. ) {
  293. checkPropWrapperArguments(node, node.value.arguments);
  294. }
  295. if (node.value && node.value.properties) {
  296. validatePropNaming(node, node.value.properties);
  297. }
  298. if (node.typeAnnotation && node.typeAnnotation.typeAnnotation) {
  299. validatePropNaming(node, node.typeAnnotation.typeAnnotation.properties);
  300. }
  301. },
  302. MemberExpression(node) {
  303. if (!rule || !propsUtil.isPropTypesDeclaration(node)) {
  304. return;
  305. }
  306. const component = utils.getRelatedComponent(node);
  307. if (!component || !node.parent.right) {
  308. return;
  309. }
  310. const right = node.parent.right;
  311. if (
  312. astUtil.isCallExpression(right)
  313. && propWrapperUtil.isPropWrapperFunction(
  314. context,
  315. getText(context, right.callee)
  316. )
  317. ) {
  318. checkPropWrapperArguments(component.node, right.arguments);
  319. return;
  320. }
  321. validatePropNaming(component.node, node.parent.right.properties);
  322. },
  323. ObjectExpression(node) {
  324. if (!rule) {
  325. return;
  326. }
  327. // Search for the proptypes declaration
  328. node.properties.forEach((property) => {
  329. if (!propsUtil.isPropTypesDeclaration(property)) {
  330. return;
  331. }
  332. validatePropNaming(node, property.value.properties);
  333. });
  334. },
  335. TypeAlias(node) {
  336. findAllTypeAnnotations(node.id, node.right);
  337. },
  338. TSTypeAliasDeclaration(node) {
  339. findAllTypeAnnotations(node.id, node.typeAnnotation);
  340. },
  341. TSInterfaceDeclaration(node) {
  342. findAllTypeAnnotations(node.id, node.body);
  343. },
  344. // eslint-disable-next-line object-shorthand
  345. 'Program:exit'() {
  346. if (!rule) {
  347. return;
  348. }
  349. values(components.list()).forEach((component) => {
  350. const annotation = getComponentTypeAnnotation(component);
  351. if (annotation) {
  352. let propType;
  353. if (annotation.type === 'GenericTypeAnnotation') {
  354. propType = objectTypeAnnotations.get(annotation.id.name);
  355. } else if (annotation.type === 'ObjectTypeAnnotation' || annotation.type === 'TSTypeLiteral') {
  356. propType = annotation;
  357. } else if (annotation.type === 'TSTypeReference') {
  358. propType = objectTypeAnnotations.get(annotation.typeName.name);
  359. } else if (annotation.type === 'TSIntersectionType') {
  360. propType = flatMap(annotation.types, (type) => (
  361. type.type === 'TSTypeReference'
  362. ? objectTypeAnnotations.get(type.typeName.name)
  363. : type
  364. ));
  365. }
  366. if (propType) {
  367. [].concat(propType).filter(Boolean).forEach((prop) => {
  368. validatePropNaming(
  369. component.node,
  370. prop.properties || prop.members || prop.body
  371. );
  372. });
  373. }
  374. }
  375. if (component.invalidProps && component.invalidProps.length > 0) {
  376. reportInvalidNaming(component);
  377. }
  378. });
  379. // Reset cache
  380. objectTypeAnnotations.clear();
  381. },
  382. };
  383. }),
  384. };