Group component related functions

Author: yannickcr

lib/rules/display-name.js

@@ -4,97 +4,20 @@
  */
 'use strict';
 
+var componentUtil = require('../util/component');
+var ComponentList = componentUtil.List;
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
 
 module.exports = function(context) {
 
-  var components = {};
+  var componentList = new ComponentList();
 
   var MISSING_MESSAGE = 'Component definition is missing display name';
   var MISSING_MESSAGE_NAMED_COMP = '{{component}} component definition is missing display name';
 
-  var defaultClassName = 'eslintReactComponent';
-
-  /**
-   * Get the component id from an ASTNode
-   * @param {ASTNode} node The AST node being checked.
-   * @returns {String} The component id.
-   */
-  function getComponentId(node) {
-    if (
-      node.type === 'MemberExpression' &&
-      node.property && node.property.name === 'displayName' &&
-      node.object && components[node.object.name]
-    ) {
-      return node.object.name;
-    }
-
-    var scope = context.getScope();
-    while (scope && scope.type !== 'class') {
-      scope = scope.upper;
-    }
-
-    if (scope) {
-      return scope.block.id.name;
-    }
-
-    return defaultClassName;
-  }
-
-  /**
-   * Get the component from an ASTNode
-   * @param {ASTNode} node The AST node being checked.
-   * @returns {Object} The component object.
-   */
-  function getComponent(node) {
-    var id = getComponentId(node);
-    if (!components[id]) {
-      components[id] = {
-        name: id,
-        node: node,
-        hasDisplayName: false
-      };
-    }
-    return components[id];
-  }
-
-  /**
-   * Detect if we are in a React component by checking the render method
-   * @param {ASTNode} node The AST node being checked.
-   */
-  function detectReactComponent(node) {
-    var scope = context.getScope();
-    if (
-        (node.argument.type === 'Literal' && (node.argument.value !== null && node.argument.value !== false)) &&
-        (node.argument.type !== 'JSXElement') &&
-        (scope.block.parent.key.name === 'render')
-    ) {
-      return;
-    }
-    var component = getComponent(node);
-    component.isComponentDefinition = true;
-  }
-
-  /**
-   * Checks if we are inside a component definition
-   * @param {ASTNode} node The AST node being checked.
-   * @returns {Boolean} True if we are inside a component definition, false if not.
-   */
-  function isComponentDefinition(node) {
-    var isES5Component = Boolean(
-      node.parent &&
-      node.parent.callee &&
-      node.parent.callee.object &&
-      node.parent.callee.property &&
-      node.parent.callee.object.name === 'React' &&
-      node.parent.callee.property.name === 'createClass'
-    );
-    var isES6Component = getComponent(node).isComponentDefinition;
-    return isES5Component || isES6Component;
-  }
-
   /**
    * Checks if we are declaring a display name
    * @param {ASTNode} node The AST node being checked.
@@ -112,22 +35,23 @@ module.exports = function(context) {
    * @param {ASTNode} node The AST node being checked.
    */
   function markDisplayNameAsDeclared(node) {
-    var component = getComponent(node);
-    component.hasDisplayName = true;
+    componentList.set(context, node, {
+      hasDisplayName: true
+    });
   }
 
   /**
    * Reports missing display name for a given component
-   * @param {String} id The id of the component to process
+   * @param {Object} component The component to process
    */
-  function reportMissingDisplayName(id) {
-    if (!components[id] || components[id].hasDisplayName === true) {
+  function reportMissingDisplayName(component) {
+    if (!component || component.hasDisplayName === true) {
       return;
     }
     context.report(
-      components[id].node,
-      id === defaultClassName ? MISSING_MESSAGE : MISSING_MESSAGE_NAMED_COMP, {
-        component: id
+      component.node,
+      component.name === componentUtil.DEFAULT_COMPONENT_NAME ? MISSING_MESSAGE : MISSING_MESSAGE_NAMED_COMP, {
+        component: component.name
       }
     );
   }
@@ -142,14 +66,14 @@ module.exports = function(context) {
       if (!isDisplayNameDeclaration(node.property)) {
         return;
       }
-      markDisplayNameAsDeclared(node);
-    },
-
-    ObjectExpression: function(node) {
-      if (!isComponentDefinition(node)) {
+      var component = componentList.getByName(node.object.name);
+      if (!component) {
         return;
       }
+      markDisplayNameAsDeclared(component.node);
+    },
 
+    ObjectExpression: function(node) {
       // Search for the displayName declaration
       node.properties.forEach(function(property) {
         if (!isDisplayNameDeclaration(property.key)) {
@@ -159,29 +83,23 @@ module.exports = function(context) {
       });
     },
 
-    'ObjectExpression:exit': function(node) {
-      if (!isComponentDefinition(node)) {
-        return;
-      }
-
-      // Report missing display name for all ES5 classes
-      reportMissingDisplayName(defaultClassName);
-
-      // Reset the ES5 default object
-      components[defaultClassName] = null;
-    },
-
     'Program:exit': function() {
-      // Report missing display name for all ES6 classes
-      for (var component in components) {
-        if (!components.hasOwnProperty(component)) {
+      var list = componentList.getList();
+      // Report missing display name for all classes
+      for (var component in list) {
+        if (!list.hasOwnProperty(component)) {
           continue;
         }
-        reportMissingDisplayName(component);
+        reportMissingDisplayName(list[component]);
       }
     },
 
-    ReturnStatement: detectReactComponent
+    ReturnStatement: function(node) {
+      if (!componentUtil.isReactComponent(context, node)) {
+        return;
+      }
+      componentList.set(context, node);
+    }
   };
 
 };

lib/rules/no-multi-comp.js

@@ -4,86 +4,45 @@
  */
 'use strict';
 
+var componentUtil = require('../util/component');
+var ComponentList = componentUtil.List;
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
 
 module.exports = function(context) {
 
-  var components = [];
+  var componentList = new ComponentList();
 
   var MULTI_COMP_MESSAGE = 'Declare only one React component per file';
 
-  /**
-   * Checks if we are inside a component definition
-   * @param {ASTNode} node The AST node being checked.
-   * @returns {Boolean} True if we are inside a component definition, false if not.
-   */
-  function isComponentDefinition(node) {
-    return Boolean(
-      node.parent &&
-      node.parent.callee &&
-      node.parent.callee.object &&
-      node.parent.callee.property &&
-      node.parent.callee.object.name === 'React' &&
-      node.parent.callee.property.name === 'createClass'
-    );
-  }
-
-  /**
-   * Get the component from an ASTNode
-   * @param {ASTNode} node The AST node being checked.
-   * @returns {Object} The component object.
-   */
-  function getComponent() {
-    var scope = context.getScope();
-    while (scope && scope.type !== 'class') {
-      if (isComponentDefinition(scope.block.parent.parent)) {
-        return scope.block.parent.parent.parent.callee;
-      }
-      scope = scope.upper;
-    }
-
-    return scope.block;
-  }
-
-  /**
-   * Detect if we are in a React component by checking the render method
-   * @param {ASTNode} node The AST node being checked.
-   */
-  function detectReactComponent(node) {
-    var scope = context.getScope();
-    if (
-        (node.argument.type === 'Literal' && (node.argument.value !== null && node.argument.value !== false)) &&
-        (node.argument.type !== 'JSXElement') &&
-        (scope.block.parent.key.name === 'render')
-    ) {
-      return;
-    }
-    components.push(getComponent(node));
-  }
-
-  /**
-   * Reports missing display name for a given component
-   * @param {String} id The id of the component to process
-   */
-  function reportMultiComponent() {
-    if (components.length <= 1) {
-      return;
-    }
-
-    for (var i = 1, j = components.length; i < j; i++) {
-      context.report(components[i], MULTI_COMP_MESSAGE);
-    }
-  }
-
   // --------------------------------------------------------------------------
   // Public
   // --------------------------------------------------------------------------
 
   return {
-    'Program:exit': reportMultiComponent,
+    'Program:exit': function() {
+      if (componentList.count() <= 1) {
+        return;
+      }
+
+      var list = componentList.getList();
+      var i = 0;
 
-    ReturnStatement: detectReactComponent
+      for (var component in list) {
+        if (!list.hasOwnProperty(component) || ++i === 1) {
+          continue;
+        }
+        context.report(list[component].node, MULTI_COMP_MESSAGE);
+      }
+    },
+
+    ReturnStatement: function(node) {
+      if (!componentUtil.isReactComponent(context, node)) {
+        return;
+      }
+      componentList.set(context, node);
+    }
   };
 };