Teach jsx-uses-vars about components as object properties

When I'm importing a component (say Input) which has other subcomponents
as it's properties (like Input.Placeholder, Input.Button, etc), and
there is another different component imported by a same name (say
Button), and then if I use <Input.Button> in my code then eslint doesn't
tell that <Button> is unused.

Reproducible code:

```
import React from 'react';
import Button from './Button';
import Input from './Input';

export default class X extends React.Component {
  render() {
    return <Input.Button />;
  }
}
```

What should be expected?

The import Button from './Button'; line should be highlighted with a
no-unused-vars error. You can see this if you just use <Input> in the
render function instead of <Input.Button>.

This was happening because the rule was checking for all JSXIdentifiers,
which included the object properties. I fixed this by having it check
for JSXOpeningElements and then drilling down to get the variable name
used from there.

Fixes jsx-eslint#694

Author: lencioni

lib/rules/jsx-uses-vars.js

@@ -20,11 +20,22 @@ module.exports = function(context) {
       variableUtil.markVariableAsUsed(context, node.expression.name);
     },
 
-    JSXIdentifier: function(node) {
-      if (node.parent.type === 'JSXAttribute') {
+    JSXOpeningElement: function(node) {
+      var name;
+      if (node.name.namespace && node.name.namespace.name) {
+        // <Foo:Bar>
+        name = node.name.namespace.name;
+      } else if (node.name.name) {
+        // <Foo>
+        name = node.name.name;
+      } else if (node.name.object && node.name.object.name) {
+        // <Foo.Bar> - node.name.object.name
+        name = node.name.object.name;
+      } else {
         return;
       }
-      variableUtil.markVariableAsUsed(context, node.name);
+
+      variableUtil.markVariableAsUsed(context, name);
     }
 
   };

tests/lib/rules/jsx-uses-vars.js

@@ -112,6 +112,22 @@ ruleTester.run('no-unused-vars', rule, {
         React.render(<App unused=""/>);',
       errors: [{message: '\'unused\' is defined but never used'}],
       parserOptions: parserOptions
+    }, {
+      code: '\
+        /*eslint jsx-uses-vars:1*/\
+        var App;\
+        var Hello;\
+        React.render(<App:Hello/>);',
+      errors: [{message: '\'Hello\' is defined but never used'}],
+      parserOptions: parserOptions
+    }, {
+      code: '\
+        /*eslint jsx-uses-vars:1*/\
+        var Button;\
+        var Input;\
+        React.render(<Button.Input unused=""/>);',
+      errors: [{message: '\'Input\' is defined but never used'}],
+      parserOptions: parserOptions
     }, {
       code: '\
         /*eslint jsx-uses-vars:1*/\