Add checkContextObjects option in display-name

Author: JulesBlm

README.md

@@ -293,7 +293,6 @@ module.exports = [
 | :----------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------- | :- | :- | :- | :- | :- |
 | [boolean-prop-naming](docs/rules/boolean-prop-naming.md)                                   | Enforces consistent naming for boolean props                                                                                                 |    |    |    |    |    |
 | [button-has-type](docs/rules/button-has-type.md)                                           | Disallow usage of `button` elements without an explicit `type` attribute                                                                     |    |    |    |    |    |
-| [context-display-name](docs/rules/context-display-name.md)                                 | Disallow missing displayName in a React context definition                                                                                   |    |    |    |    |    |
 | [default-props-match-prop-types](docs/rules/default-props-match-prop-types.md)             | Enforce all defaultProps have a corresponding non-required PropType                                                                          |    |    |    |    |    |
 | [destructuring-assignment](docs/rules/destructuring-assignment.md)                         | Enforce consistent usage of destructuring assignment of props, state, and context                                                            |    |    | 🔧 |    |    |
 | [display-name](docs/rules/display-name.md)                                                 | Disallow missing displayName in a React component definition                                                                                 | ☑️ |    |    |    |    |

docs/rules/context-display-name.md

@@ -45,7 +45,7 @@ const Hello = React.memo(function Hello({ a }) {
 
 ```js
 ...
-"react/display-name": [<enabled>, { "ignoreTranspilerName": <boolean> }]
+"react/display-name": [<enabled>, { "ignoreTranspilerName": <boolean>, "checkContextObjects": <boolean> }]
 ...
 ```
 
@@ -128,6 +128,27 @@ function HelloComponent() {
 module.exports = HelloComponent();
 ```
 
+### checkContextObjects
+
+`displayName` allows you to [name your context](https://reactjs.org/docs/context.html#contextdisplayname) object. This name is used in the React dev tools for the context's `Provider` and `Consumer`.
+When `true` this rule will warn on context objects without a `displayName`.
+
+## Rule Details
+
+Examples of **incorrect** code for this rule:
+
+```jsx
+const Hello = React.createContext();
+```
+
+Examples of **correct** code for this rule:
+
+```jsx
+const Hello = React.createContext();
+Hello.displayName = "HelloContext";
+```
+
+
 ## About component detection
 
 For this rule to work we need to detect React components, this could be very hard since components could be declared in a lot of ways.

docs/rules/display-name.md

@@ -21,6 +21,7 @@ const report = require('../util/report');
 
 const messages = {
   noDisplayName: 'Component definition is missing display name',
+  noContextDisplayName: 'Context definition is missing display name',
 };
 
 module.exports = {
@@ -40,6 +41,9 @@ module.exports = {
         ignoreTranspilerName: {
           type: 'boolean',
         },
+        checkContextObjects: {
+          type: 'boolean',
+        },
       },
       additionalProperties: false,
     }],
@@ -48,6 +52,9 @@ module.exports = {
   create: Components.detect((context, components, utils) => {
     const config = context.options[0] || {};
     const ignoreTranspilerName = config.ignoreTranspilerName || false;
+    const checkContextObjects = config.checkContextObjects || false;
+
+    const contextObjects = new Map();
 
     /**
      * Mark a prop type as declared
@@ -70,6 +77,36 @@ module.exports = {
       return node.type === 'CallExpression' && argumentIsCallExpression && utils.isPragmaComponentWrapper(node);
     }
 
+    /**
+     * Checks if the node is a createContext call
+     * @param {ASTNode} node - The AST node being checked.
+     * @returns {Boolean} - True if node is a createContext call object literal, False if not.
+     */
+    function isCreateContext(node) {
+      if (!node.init) {
+        return false;
+      }
+
+      if (
+        node.init.type === 'CallExpression' &&
+        node.init.callee &&
+        node.init.callee.name === 'createContext'
+      ) {
+        return true;
+      }
+
+      if (
+        node.init.callee &&
+        node.init.callee.type === 'MemberExpression' &&
+        node.init.callee.property &&
+        node.init.callee.property.name === 'createContext'
+      ) {
+        return true;
+      }
+
+      return false;
+    }
+
     /**
      * Reports missing display name for a given component
      * @param {Object} component The component to process
@@ -87,6 +124,18 @@ module.exports = {
       });
     }
 
+    /**
+     * Reports missing display name for a given context object
+     * @param {Object} contextObj The context object to process
+     */
+    function reportMissingContextDisplayName(contextObj) {
+      if (testReactVersion(context, '>= 16.3.0')) {
+        report(context, messages.noContextDisplayName, 'noContextDisplayName', {
+          node: contextObj.node,
+        });
+      }
+    }
+
     /**
      * Checks if the component have a name set by the transpiler
      * @param {ASTNode} node The AST node being checked.
@@ -144,6 +193,11 @@ module.exports = {
     // --------------------------------------------------------------------------
 
     return {
+      VariableDeclarator(node) {
+        if (checkContextObjects && isCreateContext(node)) {
+          contextObjects.set(node.id.name, { node, hasDisplayName: false });
+        }
+      },
       'ClassProperty, PropertyDefinition'(node) {
         if (!propsUtil.isDisplayNameDeclaration(node)) {
           return;
@@ -155,6 +209,14 @@ module.exports = {
         if (!propsUtil.isDisplayNameDeclaration(node.property)) {
           return;
         }
+        if (
+          checkContextObjects && 
+          node.object &&
+          node.object.name &&
+          contextObjects.has(node.object.name)
+        ) {
+          contextObjects.get(node.object.name).hasDisplayName = true;
+        }
         const component = utils.getRelatedComponent(node);
         if (!component) {
           return;
@@ -258,6 +320,11 @@ module.exports = {
         values(list).filter((component) => !component.hasDisplayName).forEach((component) => {
           reportMissingDisplayName(component);
         });
+        // Report missing display name for all context objects
+        const contextsList = Array.from(contextObjects.values()).filter(
+          (v) => !v.hasDisplayName
+        );
+        contextsList.forEach((contextObj) => reportMissingContextDisplayName(contextObj));
       },
     };
   }),

lib/rules/context-display-name.js

@@ -5,7 +5,6 @@
 module.exports = {
   'boolean-prop-naming': require('./boolean-prop-naming'),
   'button-has-type': require('./button-has-type'),
-  'context-display-name': require('./context-display-name'),
   'default-props-match-prop-types': require('./default-props-match-prop-types'),
   'destructuring-assignment': require('./destructuring-assignment'),
   'display-name': require('./display-name'),