[New] components detection: track React imports

The default React import and named React import specifiers are tracked during a Components.detect rules definition. Rules using Components.detect can access the default import specifier using `components.getDefaultReactImport()` and an array any named import specifiers using `components.getNamedReactImports()` Within a rule, these specifier nodes can be checked to ensure identifiers in scope correspond with the imported identifiers. Not treating this as semver-minor since it's not part of the documented API.

Author: duncanbeevers

CHANGELOG.md

@@ -8,6 +8,7 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 ### Changed
 * [Refactor] [`no-arrow-function-lifecycle`], [`no-unused-class-component-methods`]: use report/messages convention (@ljharb)
 * [Tests] component detection: Add testing scaffolding ([#3149][] @duncanbeevers)
+* [New] component detection: track React imports ([#3149][] @duncanbeevers)
 
 [#3149]: https://github.com/yannickcr/eslint-plugin-react/pull/3149
 

lib/util/Components.js

@@ -47,13 +47,15 @@ function mergeUsedPropTypes(propsList, newPropsList) {
 }
 
 const Lists = new WeakMap();
+const ReactImports = new WeakMap();
 
 /**
  * Components
  */
 class Components {
  constructor() {
  Lists.set(this, {});
+ ReactImports.set(this, {});
  }
 
  /**
@@ -179,6 +181,52 @@ class Components {
  const list = Lists.get(this);
  return Object.keys(list).filter((i) => list[i].confidence >= 2).length;
  }
+
+ /**
+ * Return the node naming the default React import
+ * It can be used to determine the local name of import, even if it's imported
+ * with an unusual name.
+ *
+ * @returns {ASTNode} React default import node
+ */
+ getDefaultReactImports() {
+ return ReactImports.get(this).defaultReactImports;
+ }
+
+ /**
+ * Return the nodes of all React named imports
+ *
+ * @returns {Object} The list of React named imports
+ */
+ getNamedReactImports() {
+ return ReactImports.get(this).namedReactImports;
+ }
+
+ /**
+ * Add the default React import specifier to the scope
+ *
+ * @param {ASTNode} specifier The AST Node of the default React import
+ * @returns {void}
+ */
+ addDefaultReactImport(specifier) {
+ const info = ReactImports.get(this);
+ ReactImports.set(this, Object.assign({}, info, {
+ defaultReactImports: (info.defaultReactImports || []).concat(specifier),
+ }));
+ }
+
+ /**
+ * Add a named React import specifier to the scope
+ *
+ * @param {ASTNode} specifier The AST Node of a named React import
+ * @returns {void}
+ */
+ addNamedReactImport(specifier) {
+ const info = ReactImports.get(this);
+ ReactImports.set(this, Object.assign({}, info, {
+ namedReactImports: (info.namedReactImports || []).concat(specifier),
+ }));
+ }
 }
 
 function getWrapperFunctions(context, pragma) {
@@ -857,6 +905,25 @@ function componentRule(rule, context) {
  },
  };
 
+ // Detect React import specifiers
+ const reactImportInstructions = {
+ ImportDeclaration(node) {
+ const isReactImported = node.source.type === 'Literal' && node.source.value === 'react';
+ if (!isReactImported) {
+ return;
+ }
+
+ node.specifiers.forEach((specifier) => {
+ if (specifier.type === 'ImportDefaultSpecifier') {
+ components.addDefaultReactImport(specifier);
+ }
+ if (specifier.type === 'ImportSpecifier') {
+ components.addNamedReactImport(specifier);
+ }
+ });
+ },
+ };
+
  // Update the provided rule instructions to add the component detection
  const ruleInstructions = rule(context, components, utils);
  const updatedRuleInstructions = Object.assign({}, ruleInstructions);
@@ -866,7 +933,8 @@ function componentRule(rule, context) {
  const allKeys = new Set(Object.keys(detectionInstructions).concat(
  Object.keys(propTypesInstructions),
  Object.keys(usedPropTypesInstructions),
- Object.keys(defaultPropsInstructions)
+ Object.keys(defaultPropsInstructions),
+ Object.keys(reactImportInstructions)
  ));
 
  allKeys.forEach((instruction) => {
@@ -883,6 +951,9 @@ function componentRule(rule, context) {
  if (instruction in defaultPropsInstructions) {
  defaultPropsInstructions[instruction](node);
  }
+ if (instruction in reactImportInstructions) {
+ reactImportInstructions[instruction](node);
+ }
  if (ruleInstructions[instruction]) {
  return ruleInstructions[instruction](node);
  }

tests/util/Component.js

@@ -76,5 +76,23 @@ describe('Components', () => {
  });
  });
  });
+
+ it('should detect React Imports', () => {
+ testComponentsDetect({
+ code: 'import React, { useCallback, useState } from \'react\'',
+ }, (_context, components) => {
+ assert.deepEqual(
+ components.getDefaultReactImports().map((specifier) => specifier.local.name),
+ ['React'],
+ 'default React import identifier should be "React"'
+ );
+
+ assert.deepEqual(
+ components.getNamedReactImports().map((specifier) => specifier.local.name),
+ ['useCallback', 'useState'],
+ 'named React import identifiers should be "useCallback" and "useState"'
+ );
+ });
+ });
  });
 });