Shopify · BPScott · May 30, 2022 · May 27, 2022
diff --git a/packages/eslint-plugin/CHANGELOG.md b/packages/eslint-plugin/CHANGELOG.md
@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Changed
+
+- Update `eslint-plugin-react` dependency to `^7.30.0`. Fix breakages by no longer reaching into `eslint-plugin-react`'s internals. [[#332](https://github.com/Shopify/web-configs/pull/332)]
 
 ## 41.2.1 - 2022-04-04
 

diff --git a/packages/eslint-plugin/lib/rules/react-initialize-state.js b/packages/eslint-plugin/lib/rules/react-initialize-state.js
@@ -1,6 +1,5 @@
-const Components = require('eslint-plugin-react/lib/util/Components');
-
 const {docsUrl, uncast, getName} = require('../utilities');
+const {isES6Component} = require('../utilities/component-utils');
 
 module.exports = {
   meta: {
@@ -14,12 +13,12 @@ module.exports = {
     schema: [],
   },
 
-  create: Components.detect((context, components, utils) => {
+  create(context) {
     let classInfo = null;
 
     return {
       ClassDeclaration(node) {
-        if (!utils.isES6Component(node)) {
+        if (!isES6Component(node, context)) {
           return;
         }
 
@@ -68,7 +67,7 @@ module.exports = {
         classInfo = null;
       },
     };
-  }),
+  },
 };
 
 function classHasEmptyStateType({superTypeParameters}) {

diff --git a/packages/eslint-plugin/lib/rules/react-no-multiple-render-methods.js b/packages/eslint-plugin/lib/rules/react-no-multiple-render-methods.js
@@ -1,6 +1,5 @@
-const Components = require('eslint-plugin-react/lib/util/Components');
-
 const {docsUrl} = require('../utilities');
+const {isES6Component} = require('../utilities/component-utils');
 
 const message = [
   'Don’t use multiple render methods in a single component;',
@@ -20,8 +19,8 @@ module.exports = {
     },
   },
 
-  create: Components.detect((context, components, utils) => {
-    let isES6Component = false;
+  create(context) {
+    let componentIsES6 = false;
 
     function report(node) {
       const name = getMethodName(node);
@@ -35,26 +34,26 @@ module.exports = {
 
     return {
       ClassDeclaration(node) {
-        isES6Component = utils.isES6Component(node);
+        componentIsES6 = isES6Component(node, context);
       },
 
       MethodDefinition(node) {
-        if (!isES6Component || !isRenderMethod(node)) {
+        if (!componentIsES6 || !isRenderMethod(node)) {
           return;
         }
 
         report(node);
       },
 
       ArrowFunctionExpression(node) {
-        if (!isES6Component || !isRenderMethod(node)) {
+        if (!componentIsES6 || !isRenderMethod(node)) {
           return;
         }
 
         report(node);
       },
     };
-  }),
+  },
 };
 
 function isRenderMethod(node) {

diff --git a/packages/eslint-plugin/lib/rules/react-prefer-private-members.js b/packages/eslint-plugin/lib/rules/react-prefer-private-members.js
@@ -1,7 +1,7 @@
 const {pascalCase} = require('change-case');
-const Components = require('eslint-plugin-react/lib/util/Components');
 
 const {docsUrl} = require('../utilities');
+const {isES6Component} = require('../utilities/component-utils');
 
 module.exports = {
   meta: {
@@ -13,8 +13,8 @@ module.exports = {
     },
   },
 
-  create: Components.detect((context, components, utils) => {
-    let isES6Component = 0;
+  create(context) {
+    let componentIsES6 = 0;
     let componentName = null;
 
     function report({node, componentName: classComponent}) {
@@ -31,32 +31,32 @@ module.exports = {
 
     return {
       ClassDeclaration(node) {
-        if (utils.isES6Component(node)) {
-          isES6Component++;
+        if (isES6Component(node, context)) {
+          componentIsES6++;
         }
         componentName = node.id.name;
       },
       'ClassDeclaration:exit': function (node) {
-        if (utils.isES6Component(node)) {
-          isES6Component--;
+        if (isES6Component(node, context)) {
+          componentIsES6--;
         }
       },
       'ClassProperty,PropertyDefinition': function (node) {
-        if (isES6Component === 0 || isValid(node)) {
+        if (componentIsES6 === 0 || isValid(node)) {
           return;
         }
 
         report({node, componentName});
       },
       MethodDefinition(node) {
-        if (isES6Component === 0 || isValid(node)) {
+        if (componentIsES6 === 0 || isValid(node)) {
           return;
         }
 
         report({node, componentName});
       },
     };
-  }),
+  },
 };
 
 function isValid(node) {

diff --git a/packages/eslint-plugin/lib/rules/react-type-state.js b/packages/eslint-plugin/lib/rules/react-type-state.js
@@ -1,6 +1,5 @@
-const Components = require('eslint-plugin-react/lib/util/Components');
-
 const {docsUrl, getName} = require('../utilities');
+const {isES6Component} = require('../utilities/component-utils');
 
 module.exports = {
   meta: {
@@ -13,12 +12,12 @@ module.exports = {
     schema: [],
   },
 
-  create: Components.detect((context, components, utils) => {
+  create(context) {
     let inTypeScriptReactComponent = false;
 
     function looksLikeTypeScriptComponent(node) {
       return (
-        utils.isES6Component(node) &&
+        isES6Component(node, context) &&
         Boolean(node.superTypeParameters) &&
         Boolean(node.superTypeParameters.params) &&
         node.superTypeParameters.params.length > 0 &&
@@ -45,5 +44,5 @@ module.exports = {
         );
       },
     };
-  }),
+  },
 };
diff --git a/packages/eslint-plugin/lib/utilities/component-utils.js b/packages/eslint-plugin/lib/utilities/component-utils.js
@@ -0,0 +1,101 @@
+// Copied from eslint-plugin-react's lib/util/componentUtil.js
+// Because we don't want to reach deep into that packages's internals
+// https://github.com/jsx-eslint/eslint-plugin-react/blob/18de0a653122c4ffd586a0269a7355c15ef05e23/lib/util/componentUtil.js
+
+const doctrine = require('doctrine');
+
+const pragmaUtil = require('./pragma');
+
+/**
+ * @template {(_: object) => any} T
+ * @param {T} fn
+ * @returns {T}
+ */
+function memoize(fn) {
+  const cache = new WeakMap();
+  // @ts-ignore
+  return function memoizedFn(arg) {
+    const cachedValue = cache.get(arg);
+    if (cachedValue !== undefined) {
+      return cachedValue;
+    }
+    const val = fn(arg);
+    cache.set(arg, val);
+    return val;
+  };
+}
+
+const getPragma = memoize(pragmaUtil.getFromContext);
+
+/**
+ * Check if the node is explicitly declared as a descendant of a React Component
+ * @param {any} node
+ * @param {Context} context
+ * @returns {boolean}
+ */
+function isExplicitComponent(node, context) {
+  const sourceCode = context.getSourceCode();
+  let comment;
+  // Sometimes the passed node may not have been parsed yet by eslint, and this function call crashes.
+  // Can be removed when eslint sets "parent" property for all nodes on initial AST traversal: https://github.com/eslint/eslint-scope/issues/27
+  // eslint-disable-next-line no-warning-comments
+  // FIXME: Remove try/catch when https://github.com/eslint/eslint-scope/issues/27 is implemented.
+  try {
+    comment = sourceCode.getJSDocComment(node);
+  } catch (err) {
+    comment = null;
+  }
+
+  if (comment === null) {
+    return false;
+  }
+
+  let commentAst;
+  try {
+    commentAst = doctrine.parse(comment.value, {
+      unwrap: true,
+      tags: ['extends', 'augments'],
+    });
+  } catch (err) {
+    // handle a bug in the archived `doctrine`, see #2596
+    return false;
+  }
+
+  const relevantTags = commentAst.tags.filter(
+    (tag) =>
+      tag.name === 'React.Component' || tag.name === 'React.PureComponent',
+  );
+
+  return relevantTags.length > 0;
+}
+
+/**
+ * @param {ASTNode} node
+ * @param {Context} context
+ * @returns {boolean}
+ */
+function isES6Component(node, context) {
+  const pragma = getPragma(context);
+  if (isExplicitComponent(node, context)) {
+    return true;
+  }
+
+  if (!node.superClass) {
+    return false;
+  }
+  if (node.superClass.type === 'MemberExpression') {
+    return (
+      node.superClass.object.name === pragma &&
+      /^(Pure)?Component$/.test(node.superClass.property.name)
+    );
+  }
+  if (node.superClass.type === 'Identifier') {
+    return /^(Pure)?Component$/.test(node.superClass.name);
+  }
+  return false;
+}
+
+module.exports = {
+  isES6Component,
+  isExplicitComponent,
+};
diff --git a/packages/eslint-plugin/lib/utilities/pragma.js b/packages/eslint-plugin/lib/utilities/pragma.js
@@ -0,0 +1,78 @@
+// Copied from eslint-plugin-react's lib/util/pragma.js
+// Because we don't want to reach deep into that packages's internals
+// https://github.com/jsx-eslint/eslint-plugin-react/blob/18de0a653122c4ffd586a0269a7355c15ef05e23/lib/util/pragma.js
+
+/**
+ * @fileoverview Utility functions for React pragma configuration
+ * @author Yannick Croissant
+ */
+
+const JSX_ANNOTATION_REGEX = /@jsx\s+([^\s]+)/;
+// Does not check for reserved keywords or unicode characters
+const JS_IDENTIFIER_REGEX = /^[_$a-zA-Z][_$a-zA-Z0-9]*$/;
+
+/**
+ * @param {Context} context
+ * @returns {string}
+ */
+function getCreateClassFromContext(context) {
+  let pragma = 'createReactClass';
+  // .eslintrc shared settings (https://eslint.org/docs/user-guide/configuring#adding-shared-settings)
+  if (context.settings.react && context.settings.react.createClass) {
+    pragma = context.settings.react.createClass;
+  }
+  if (!JS_IDENTIFIER_REGEX.test(pragma)) {
+    throw new Error(
+      `createClass pragma ${pragma} is not a valid function name`,
+    );
+  }
+  return pragma;
+}
+
+/**
+ * @param {Context} context
+ * @returns {string}
+ */
+function getFragmentFromContext(context) {
+  let pragma = 'Fragment';
+  // .eslintrc shared settings (https://eslint.org/docs/user-guide/configuring#adding-shared-settings)
+  if (context.settings.react && context.settings.react.fragment) {
+    pragma = context.settings.react.fragment;
+  }
+  if (!JS_IDENTIFIER_REGEX.test(pragma)) {
+    throw new Error(`Fragment pragma ${pragma} is not a valid identifier`);
+  }
+  return pragma;
+}
+
+/**
+ * @param {Context} context
+ * @returns {string}
+ */
+function getFromContext(context) {
+  let pragma = 'React';
+
+  const sourceCode = context.getSourceCode();
+  const pragmaNode = sourceCode
+    .getAllComments()
+    .find((node) => JSX_ANNOTATION_REGEX.test(node.value));
+
+  if (pragmaNode) {
+    const matches = JSX_ANNOTATION_REGEX.exec(pragmaNode.value);
+    pragma = matches[1].split('.')[0];
+    // .eslintrc shared settings (https://eslint.org/docs/user-guide/configuring#adding-shared-settings)
+  } else if (context.settings.react && context.settings.react.pragma) {
+    pragma = context.settings.react.pragma;
+  }
+
+  if (!JS_IDENTIFIER_REGEX.test(pragma)) {
+    throw new Error(`React pragma ${pragma} is not a valid identifier`);
+  }
+  return pragma;
+}
+
+module.exports = {
+  getCreateClassFromContext,
+  getFragmentFromContext,
+  getFromContext,
+};
diff --git a/packages/eslint-plugin/package.json b/packages/eslint-plugin/package.json
@@ -39,6 +39,7 @@
     "@typescript-eslint/parser": "^5.4.0",
     "change-case": "^4.1.2",
     "common-tags": "^1.8.2",
+    "doctrine": "^2.1.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-module-utils": "^2.7.1",
     "eslint-plugin-eslint-comments": "^3.2.0",
@@ -50,7 +51,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-promise": "^6.0.0",
-    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react": "^7.30.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-sort-class-members": "^1.14.0",
     "jsx-ast-utils": "^3.2.1",