create exportOnly rule for no-multi-comp

Author: vwillyams

docs/rules/no-multi-comp.md

@@ -69,6 +69,10 @@ class HelloJohn extends React.Component {
 module.exports = HelloJohn;
 ```
 
+### `exportOnly`
+
+When `true` the rule will ignore components which are not exported, which allows you to define components as long as they are only used within a private scope.
+
 ## When Not To Use It
 
 If you prefer to declare multiple components per file you can disable this rule.

lib/rules/no-multi-comp.js

@@ -17,6 +17,7 @@ const report = require('../util/report');
 
 const messages = {
   onlyOneComponent: 'Declare only one React component per file',
+  onlyOneExportedComponent: 'Declare only one exported React component per file',
 };
 
 /** @type {import('eslint').Rule.RuleModule} */
@@ -38,6 +39,10 @@ module.exports = {
           default: false,
           type: 'boolean',
         },
+        exportOnly: {
+          default: false,
+          type: 'boolean',
+        },
       },
       additionalProperties: false,
     }],
@@ -46,6 +51,43 @@ module.exports = {
   create: Components.detect((context, components, utils) => {
     const configuration = context.options[0] || {};
     const ignoreStateless = configuration.ignoreStateless || false;
+    const exportOnly = configuration.exportOnly || false;
+
+    const exportedComponents = new Set(); // Track exported components
+    const validIdentifiers = ['ArrowFunctionExpression', 'Identifier', 'FunctionExpression'];
+
+    /**
+     * Given an export declaration, find the export name.
+     * @param {Object} node
+     * @returns {string}
+     */
+    function getExportedComponentName(node) {
+      if (node.declaration.type === 'ClassDeclaration') {
+        return node.declaration.id.name;
+      }
+      for (const declarator of node.declaration.declarations || []) {
+        const type = declarator.init.type;
+        if (validIdentifiers.find(type)) {
+          return declarator.id.name;
+        }
+      }
+    }
+
+    /**
+     * Given a React component, find the exported name.
+     * @param {Object} component
+     * @returns {string}
+     */
+    function findComponentIdentifierFromComponent(component) {
+      let name;
+      if (component.node.parent) {
+        name = component.node.parent.id.name;
+      }
+      if (!name) {
+        name = component.node.id.name;
+      }
+      return name;
+    }
 
     /**
      * Checks if the component is ignored
@@ -61,21 +103,46 @@ module.exports = {
       );
     }
 
-    return {
+    /**
+     * Checks if the component is exported, if exportOnly is set
+     * @param {Object} component The component being checked.
+     * @returns {boolean} True if the component is exported or exportOnly is false
+     */
+    function isExported(component) {
+      return !exportOnly && exportedComponents.has(findComponentIdentifierFromComponent(component));
+    }
+
+    const rule = {
       'Program:exit'() {
         if (components.length() <= 1) {
           return;
         }
 
         values(components.list())
           .filter((component) => !isIgnored(component))
+          .filter((component) => isExported(component))
           .slice(1)
           .forEach((component) => {
-            report(context, messages.onlyOneComponent, 'onlyOneComponent', {
-              node: component.node,
-            });
+            report(context,
+              exportOnly ? messages.onlyOneExportedComponent : messages.onlyOneComponent,
+              exportOnly ? 'onlyOneExportedComponent' : 'onlyOneComponent',
+              {
+                node: component.node,
+              });
           });
       },
     };
+
+    if (exportOnly) {
+      rule.ExportNamedDeclaration = (node) => {
+        exportedComponents.add(getExportedComponentName(node));
+      };
+
+      rule.ExportDefaultDeclaration = (node) => {
+        exportedComponents.add(getExportedComponentName(node));
+      };
+    }
+
+    return rule;
   }),
 };

tests/lib/rules/no-multi-comp.js

@@ -265,6 +265,69 @@ ruleTester.run('no-multi-comp', rule, {
         export default MenuList
       `,
     },
+    {
+      code: `
+        const componentOne = () => <></>;
+        const componentTwo = () => <></>;
+      `,
+      options: [{ exportOnly: true }],
+    },
+    {
+      code: `
+        export const componentOne = () => <></>;
+        const componentTwo = () => <></>;
+      `,
+      options: [{ exportOnly: true }],
+    },
+    {
+      code: `
+        const componentOne = () => <></>;
+        const componentTwo = () => <></>;
+        module.exports = { componentOne };
+      `,
+      options: [{ exportOnly: true }],
+    },
+    {
+      code: `
+        const componentOne = () => <></>;
+        const componentTwo = () => <></>;
+        export default componentOne;
+      `,
+      options: [{ exportOnly: true }],
+    },
+    {
+      code: `
+        function componentOne() { return <></> };
+        const componentTwo = () => <></>;
+        export default componentOne;
+      `,
+      options: [{ exportOnly: true }],
+    },
+    {
+      code: `
+        function componentOne() { return <></> };
+        function componentTwo() { return <></> };
+        export default componentOne;
+      `,
+      options: [{ exportOnly: true }],
+    },
+    {
+      code: `
+        import React, {Component} from "react";
+        export class componentOne extends Component() { render() { return <></>; }};
+        function componentTwo() { return <></> };
+      `,
+      options: [{ exportOnly: true }],
+    },
+    {
+      code: `
+        import React, {Component} from "react";
+        class componentOne extends Component() { render() { return <></>; }};
+        function componentTwo() { return <></> };
+        export default componentOne;
+      `,
+      options: [{ exportOnly: true }],
+    },
   ]),
 
   invalid: parsers.all([
@@ -612,5 +675,68 @@ ruleTester.run('no-multi-comp', rule, {
       },
       errors: [{ messageId: 'onlyOneComponent' }],
     },
+    {
+      code: `
+        export const componentOne = () => <></>;
+        export const componentTwo = () => <></>;
+      `,
+      options: [{ exportOnly: true }],
+      errors: [{ messageId: 'onlyOneExportedComponent' }],
+    },
+    {
+      code: `
+        const componentOne = () => <></>;
+        const componentTwo = () => <></>;
+        module.exports = { componentOne, componentTwo };
+      `,
+      options: [{ exportOnly: true }],
+      errors: [{ messageId: 'onlyOneExportedComponent' }],
+    },
+    {
+      code: `
+        const componentOne = () => <></>;
+        export const componentTwo = () => <></>;
+        export default componentOne;
+      `,
+      options: [{ exportOnly: true }],
+      errors: [{ messageId: 'onlyOneExportedComponent' }],
+    },
+    {
+      code: `
+        export function componentOne() { return <></> };
+        export const componentTwo = () => <></>;
+        export default componentTwo;
+      `,
+      options: [{ exportOnly: true }],
+      errors: [{ messageId: 'onlyOneExportedComponent' }],
+    },
+    {
+      code: `
+        function componentOne() { return <></> };
+        export function componentTwo() { return <></> };
+        export default componentOne;
+      `,
+      options: [{ exportOnly: true }],
+      errors: [{ messageId: 'onlyOneExportedComponent' }],
+    },
+    {
+      code: `
+        import React, {Component} from "react";
+        export class componentOne extends Component() { render() { return <></>; }};
+        export function componentTwo() { return <></> };
+      `,
+      options: [{ exportOnly: true }],
+      errors: [{ messageId: 'onlyOneExportedComponent' }],
+    },
+    {
+      code: `
+        import React, {Component} from "react";
+        class componentOne extends Component() { render() { return <></>; }};
+        export function componentTwo() { return <></> };
+        export default componentOne;
+      `,
+      options: [{ exportOnly: true }],
+      errors: [{ messageId: 'onlyOneExportedComponent' }],
+    },
   ]),
 });