[Fix] jsx-uses-react: mark fragment variables as used

This allows to use the following syntax:

```jsx
import { createElement, Fragment } from 'react';

function Component {
  return <></>;
}
```

Or more common in Preact:

```jsx
import { Fragment, h } from 'preact';

function Component {
  return <></>;
}
```

The `react.fragment` setting already existed for other rules, but it was
undocumented.

Author: remcohaszing

README.md

@@ -39,6 +39,7 @@ You should also specify settings that will be shared across all the plugin rules
       "createClass": "createReactClass", // Regex for Component Factory to use,
                                          // default to "createReactClass"
       "pragma": "React",  // Pragma to use, default to "React"
+      "fragment": "React.Fragment",  // Fragment to use, default to "React.Fragment"
       "version": "detect", // React version. "detect" automatically picks the version you have installed.
                            // You can also use `16.0`, `16.3`, etc, if you want to override the detected value.
                            // default to latest and warns if missing

lib/rules/jsx-uses-react.js

@@ -25,6 +25,7 @@ module.exports = {
 
   create(context) {
     const pragma = pragmaUtil.getFromContext(context);
+    const fragment = pragmaUtil.getFragmentFromContext(context);
 
     function handleOpeningElement() {
       context.markVariableAsUsed(pragma);
@@ -35,7 +36,10 @@ module.exports = {
 
     return {
       JSXOpeningElement: handleOpeningElement,
-      JSXOpeningFragment: handleOpeningElement
+      JSXOpeningFragment: handleOpeningElement,
+      JSXFragment() {
+        context.markVariableAsUsed(fragment);
+      }
     };
   }
 };

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

@@ -39,14 +39,17 @@ const linter = ruleTester.linter || eslint.linter;
 linter.defineRule('jsx-uses-react', require('../../../lib/rules/jsx-uses-react'));
 
 ruleTester.run('no-unused-vars', rule, {
-  valid: [
+  valid: [].concat(
     {code: '/*eslint jsx-uses-react:1*/ var React; <div />;'},
     {code: '/*eslint jsx-uses-react:1*/ var React; (function () { <div /> })();'},
     {code: '/*eslint jsx-uses-react:1*/ /** @jsx Foo */ var Foo; <div />;'},
     {code: '/*eslint jsx-uses-react:1*/ var Foo; <div />;', settings},
-    {code: '/*eslint jsx-uses-react:1*/ var React; <></>;', parser: parsers.BABEL_ESLINT}
-  ],
-  invalid: [{
+    parsers.TS([
+      {code: '/*eslint jsx-uses-react:1*/ var Frag; <></>;', settings: {react: {fragment: 'Frag'}}},
+      {code: '/*eslint jsx-uses-react:1*/ var React; <></>;', parser: parsers.BABEL_ESLINT}
+    ])
+  ),
+  invalid: [].concat({
     code: '/*eslint jsx-uses-react:1*/ var React;',
     errors: [{message: '\'React\' is defined but never used.'}]
   }, {
@@ -56,10 +59,14 @@ ruleTester.run('no-unused-vars', rule, {
     code: '/*eslint jsx-uses-react:1*/ var React; <div />;',
     errors: [{message: '\'React\' is defined but never used.'}],
     settings
+  }, parsers.TS([{
+    code: '/*eslint jsx-uses-react:1*/ var Frag; <></>;',
+    errors: [{message: '\'Frag\' is defined but never used.'}],
+    settings: {react: {fragment: 'Fragment'}}
   }, {
     code: '/*eslint jsx-uses-react:1*/ var React; <></>;',
     parser: parsers.BABEL_ESLINT,
     errors: [{message: '\'React\' is defined but never used.'}],
     settings
-  }]
+  }]))
 });