forbid-component-props.js 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. /**
  2. * @fileoverview Forbid certain props on components
  3. * @author Joe Lencioni
  4. */
  5. 'use strict';
  6. const docsUrl = require('../util/docsUrl');
  7. const report = require('../util/report');
  8. // ------------------------------------------------------------------------------
  9. // Constants
  10. // ------------------------------------------------------------------------------
  11. const DEFAULTS = ['className', 'style'];
  12. // ------------------------------------------------------------------------------
  13. // Rule Definition
  14. // ------------------------------------------------------------------------------
  15. const messages = {
  16. propIsForbidden: 'Prop "{{prop}}" is forbidden on Components',
  17. };
  18. module.exports = {
  19. meta: {
  20. docs: {
  21. description: 'Disallow certain props on components',
  22. category: 'Best Practices',
  23. recommended: false,
  24. url: docsUrl('forbid-component-props'),
  25. },
  26. messages,
  27. schema: [{
  28. type: 'object',
  29. properties: {
  30. forbid: {
  31. type: 'array',
  32. items: {
  33. oneOf: [{
  34. type: 'string',
  35. }, {
  36. type: 'object',
  37. properties: {
  38. propName: {
  39. type: 'string',
  40. },
  41. allowedFor: {
  42. type: 'array',
  43. uniqueItems: true,
  44. items: {
  45. type: 'string',
  46. },
  47. },
  48. message: {
  49. type: 'string',
  50. },
  51. },
  52. }],
  53. },
  54. },
  55. },
  56. }],
  57. },
  58. create(context) {
  59. const configuration = context.options[0] || {};
  60. const forbid = new Map((configuration.forbid || DEFAULTS).map((value) => {
  61. const propName = typeof value === 'string' ? value : value.propName;
  62. const options = {
  63. allowList: typeof value === 'string' ? [] : (value.allowedFor || []),
  64. message: typeof value === 'string' ? null : value.message,
  65. };
  66. return [propName, options];
  67. }));
  68. function isForbidden(prop, tagName) {
  69. const options = forbid.get(prop);
  70. const allowList = options ? options.allowList : undefined;
  71. // if the tagName is undefined (`<this.something>`), we assume it's a forbidden element
  72. return typeof allowList !== 'undefined' && (typeof tagName === 'undefined' || allowList.indexOf(tagName) === -1);
  73. }
  74. return {
  75. JSXAttribute(node) {
  76. const parentName = node.parent.name;
  77. // Extract a component name when using a "namespace", e.g. `<AntdLayout.Content />`.
  78. const tag = parentName.name || `${parentName.object.name}.${parentName.property.name}`;
  79. const componentName = parentName.name || parentName.property.name;
  80. if (componentName && typeof componentName[0] === 'string' && componentName[0] !== componentName[0].toUpperCase()) {
  81. // This is a DOM node, not a Component, so exit.
  82. return;
  83. }
  84. const prop = node.name.name;
  85. if (!isForbidden(prop, tag)) {
  86. return;
  87. }
  88. const customMessage = forbid.get(prop).message;
  89. report(context, customMessage || messages.propIsForbidden, !customMessage && 'propIsForbidden', {
  90. node,
  91. data: {
  92. prop,
  93. },
  94. });
  95. },
  96. };
  97. },
  98. };