Add react import detection

Author: jseminck

lib/rules/no-typos.js

@@ -37,6 +37,7 @@ module.exports = {
 
   create: Components.detect((context, components, utils) => {
     let propTypesPackageName;
+    let reactPackageName;
 
     function checkValidPropTypeQualfier(node) {
       if (node.name !== 'isRequired') {
@@ -58,7 +59,7 @@ module.exports = {
 
     /* eslint-disable no-use-before-define */
     function checkValidProp(node) {
-      if (!propTypesPackageName || !node) {
+      if ((!propTypesPackageName && !reactPackageName) || !node) {
         return;
       }
 
@@ -132,12 +133,14 @@ module.exports = {
       ImportDeclaration: function(node) {
         if (node.source && node.source.value === 'prop-types') { // import PropType from "prop-types"
           propTypesPackageName = node.specifiers[0].local.name;
-        }
-      },
-
-      CallExpression: function(node) {
-        if (node.callee.name === 'require' && node.arguments[0].value === 'prop-types') {
-          propTypesPackageName = node.parent.id.name;
+        } else if (node.source && node.source.value === 'react') { // import { PropTypes } from "react"
+          reactPackageName = node.specifiers[0].local.name;
+
+          propTypesPackageName = node.specifiers.length > 1 && (
+            node.specifiers
+              .filter(specifier => specifier.imported && specifier.imported.name === 'PropTypes')
+              .map(specifier => specifier.local.name)
+          );
         }
       },
 

tests/lib/rules/no-typos.js

@@ -14,7 +14,8 @@ const parserOptions = {
   ecmaVersion: 6,
   ecmaFeatures: {
     jsx: true
-  }
+  },
+  sourceType: 'module'
 };
 
 // -----------------------------------------------------------------------------
@@ -337,6 +338,34 @@ ruleTester.run('no-typos', rule, {
    `,
     parser: 'babel-eslint',
     parserOptions: parserOptions
+  }, {
+    code: `
+      import PropTypes from "prop-types";
+      class Component extends React.Component {};
+      Component.propTypes = {
+        a: PropTypes.oneOf([
+          'hello',
+          'hi'
+        ])
+      }
+   `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions
+  }, {
+    code: `
+      import PropTypes from "prop-types";
+      class Component extends React.Component {};
+      Component.childContextTypes = {
+        a: PropTypes.string,
+        b: PropTypes.string.isRequired,
+        c: PropTypes.shape({
+          d: PropTypes.string,
+          e: PropTypes.number.isRequired,
+        }).isRequired
+      }
+   `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions
   }, {
     code: `
       import PropTypes from "prop-types";
@@ -367,26 +396,22 @@ ruleTester.run('no-typos', rule, {
     parserOptions: parserOptions
   }, {
     code: `
-      const PropTypes = require('prop-types');
-      const MyPropTypes = require('lib/my-prop-types')
+      import PropTypes from "prop-types"
+      import * as MyPropTypes from 'lib/my-prop-types'
       class Component extends React.Component {};
       Component.propTypes = {
-        a: PropTypes.string,
-        b: MyPropTypes.MYSTRING,
-        c: MyPropTypes.MYSTRING.isRequired,
+        b: PropTypes.string,
+        a: MyPropTypes.MYSTRING,
       }
    `,
     parser: 'babel-eslint',
     parserOptions: parserOptions
   }, {
     code: `
-      const RealPropTypes = require('prop-types');
-      const MyPropTypes = require('lib/my-prop-types')
+      import CustomReact from "react"
       class Component extends React.Component {};
       Component.propTypes = {
-        a: RealPropTypes.string,
-        b: MyPropTypes.MYSTRING,
-        c: MyPropTypes.MYSTRING.isRequired,
+        b: CustomReact.PropTypes.string,
       }
    `,
     parser: 'babel-eslint',
@@ -878,7 +903,7 @@ ruleTester.run('no-typos', rule, {
     }]
   }, {
     code: `
-      const PropTypes = require('prop-types');
+      import PropTypes from 'prop-types';
       class Component extends React.Component {};
       Component.childContextTypes = {
         a: PropTypes.bools,
@@ -900,15 +925,15 @@ ruleTester.run('no-typos', rule, {
     }]
   }, {
     code: `
-     const PropTypes = require('prop-types');
+     import PropTypes from 'prop-types';
      class Component extends React.Component {};
      Component.propTypes = {
        a: PropTypes.string.isrequired,
        b: PropTypes.shape({
          c: PropTypes.number
        }).isrequired
      }
-   `,
+    `,
     parserOptions: parserOptions,
     errors: [{
       message: 'Typo in prop type chain qualifier: isrequired'
@@ -917,7 +942,7 @@ ruleTester.run('no-typos', rule, {
     }]
   }, {
     code: `
-     const PropTypes = require('prop-types');
+     import PropTypes from 'prop-types';
      class Component extends React.Component {};
      Component.propTypes = {
        a: PropTypes.string.isrequired,
@@ -935,7 +960,7 @@ ruleTester.run('no-typos', rule, {
     }]
   }, {
     code: `
-      const RealPropTypes = require('prop-types');
+      import RealPropTypes from 'prop-types';
       class Component extends React.Component {};
       Component.childContextTypes = {
         a: RealPropTypes.bools,
@@ -955,5 +980,17 @@ ruleTester.run('no-typos', rule, {
     }, {
       message: 'Typo in declared prop type: objectof'
     }]
+  }, {
+    code: `
+      import RealReactDifferentName from "react"
+      Component.propTypes = {
+        b: RealReactDifferentName.PropTypes.STRING,
+      }
+   `,
+    parser: 'babel-eslint',
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Typo in prop type chain qualifier: STRING'
+    }]
   }]
 });