no-children-prop.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. /**
  2. * @fileoverview Prevent passing of children as props
  3. * @author Benjamin Stepp
  4. */
  5. 'use strict';
  6. const docsUrl = require('../util/docsUrl');
  7. const isCreateElement = require('../util/isCreateElement');
  8. const report = require('../util/report');
  9. // ------------------------------------------------------------------------------
  10. // Helpers
  11. // ------------------------------------------------------------------------------
  12. /**
  13. * Checks if the node is a createElement call with a props literal.
  14. * @param {ASTNode} node - The AST node being checked.
  15. * @param {Context} context - The AST node being checked.
  16. * @returns {boolean} - True if node is a createElement call with a props
  17. * object literal, False if not.
  18. */
  19. function isCreateElementWithProps(node, context) {
  20. return isCreateElement(context, node)
  21. && node.arguments.length > 1
  22. && node.arguments[1].type === 'ObjectExpression';
  23. }
  24. // ------------------------------------------------------------------------------
  25. // Rule Definition
  26. // ------------------------------------------------------------------------------
  27. const messages = {
  28. nestChildren: 'Do not pass children as props. Instead, nest children between the opening and closing tags.',
  29. passChildrenAsArgs: 'Do not pass children as props. Instead, pass them as additional arguments to React.createElement.',
  30. nestFunction: 'Do not nest a function between the opening and closing tags. Instead, pass it as a prop.',
  31. passFunctionAsArgs: 'Do not pass a function as an additional argument to React.createElement. Instead, pass it as a prop.',
  32. };
  33. /** @type {import('eslint').Rule.RuleModule} */
  34. module.exports = {
  35. meta: {
  36. docs: {
  37. description: 'Disallow passing of children as props',
  38. category: 'Best Practices',
  39. recommended: true,
  40. url: docsUrl('no-children-prop'),
  41. },
  42. messages,
  43. schema: [{
  44. type: 'object',
  45. properties: {
  46. allowFunctions: {
  47. type: 'boolean',
  48. default: false,
  49. },
  50. },
  51. additionalProperties: false,
  52. }],
  53. },
  54. create(context) {
  55. const configuration = context.options[0] || {};
  56. function isFunction(node) {
  57. return configuration.allowFunctions && (node.type === 'ArrowFunctionExpression' || node.type === 'FunctionExpression');
  58. }
  59. return {
  60. JSXAttribute(node) {
  61. if (node.name.name !== 'children') {
  62. return;
  63. }
  64. const value = node.value;
  65. if (value && value.type === 'JSXExpressionContainer' && isFunction(value.expression)) {
  66. return;
  67. }
  68. report(context, messages.nestChildren, 'nestChildren', {
  69. node,
  70. });
  71. },
  72. CallExpression(node) {
  73. if (!isCreateElementWithProps(node, context)) {
  74. return;
  75. }
  76. const props = 'properties' in node.arguments[1] ? node.arguments[1].properties : undefined;
  77. const childrenProp = props.find((prop) => (
  78. 'key' in prop
  79. && prop.key
  80. && 'name' in prop.key
  81. && prop.key.name === 'children'
  82. ));
  83. if (childrenProp) {
  84. if ('value' in childrenProp && childrenProp.value && !isFunction(childrenProp.value)) {
  85. report(context, messages.passChildrenAsArgs, 'passChildrenAsArgs', {
  86. node,
  87. });
  88. }
  89. } else if (node.arguments.length === 3) {
  90. const children = node.arguments[2];
  91. if (isFunction(children)) {
  92. report(context, messages.passFunctionAsArgs, 'passFunctionAsArgs', {
  93. node,
  94. });
  95. }
  96. }
  97. },
  98. JSXElement(node) {
  99. const children = node.children;
  100. if (children && children.length === 1 && children[0].type === 'JSXExpressionContainer') {
  101. if (isFunction(children[0].expression)) {
  102. report(context, messages.nestFunction, 'nestFunction', {
  103. node,
  104. });
  105. }
  106. }
  107. },
  108. };
  109. },
  110. };