no-deprecated.js

/**
 * @fileoverview Prevent usage of deprecated methods
 * @author Yannick Croissant
 * @author Scott Feeney
 * @author Sergei Startsev
 */

'use strict';

const entries = require('object.entries');
const astUtil = require('../util/ast');
const componentUtil = require('../util/componentUtil');
const docsUrl = require('../util/docsUrl');
const pragmaUtil = require('../util/pragma');
const testReactVersion = require('../util/version').testReactVersion;
const report = require('../util/report');
const getText = require('../util/eslint').getText;

// ------------------------------------------------------------------------------
// Constants
// ------------------------------------------------------------------------------

const MODULES = {
  react: ['React'],
  'react-addons-perf': ['ReactPerf', 'Perf'],
  'react-dom': ['ReactDOM'],
  'react-dom/server': ['ReactDOMServer'],
};

// ------------------------------------------------------------------------------
// Rule Definition
// ------------------------------------------------------------------------------

function getDeprecated(pragma) {
  const deprecated = {};
  // 0.12.0
  deprecated[`${pragma}.renderComponent`] = ['0.12.0', `${pragma}.render`];
  deprecated[`${pragma}.renderComponentToString`] = ['0.12.0', `${pragma}.renderToString`];
  deprecated[`${pragma}.renderComponentToStaticMarkup`] = ['0.12.0', `${pragma}.renderToStaticMarkup`];
  deprecated[`${pragma}.isValidComponent`] = ['0.12.0', `${pragma}.isValidElement`];
  deprecated[`${pragma}.PropTypes.component`] = ['0.12.0', `${pragma}.PropTypes.element`];
  deprecated[`${pragma}.PropTypes.renderable`] = ['0.12.0', `${pragma}.PropTypes.node`];
  deprecated[`${pragma}.isValidClass`] = ['0.12.0'];
  deprecated['this.transferPropsTo'] = ['0.12.0', 'spread operator ({...})'];
  // 0.13.0
  deprecated[`${pragma}.addons.classSet`] = ['0.13.0', 'the npm module classnames'];
  deprecated[`${pragma}.addons.cloneWithProps`] = ['0.13.0', `${pragma}.cloneElement`];
  // 0.14.0
  deprecated[`${pragma}.render`] = ['0.14.0', 'ReactDOM.render'];
  deprecated[`${pragma}.unmountComponentAtNode`] = ['0.14.0', 'ReactDOM.unmountComponentAtNode'];
  deprecated[`${pragma}.findDOMNode`] = ['0.14.0', 'ReactDOM.findDOMNode'];
  deprecated[`${pragma}.renderToString`] = ['0.14.0', 'ReactDOMServer.renderToString'];
  deprecated[`${pragma}.renderToStaticMarkup`] = ['0.14.0', 'ReactDOMServer.renderToStaticMarkup'];
  // 15.0.0
  deprecated[`${pragma}.addons.LinkedStateMixin`] = ['15.0.0'];
  deprecated['ReactPerf.printDOM'] = ['15.0.0', 'ReactPerf.printOperations'];
  deprecated['Perf.printDOM'] = ['15.0.0', 'Perf.printOperations'];
  deprecated['ReactPerf.getMeasurementsSummaryMap'] = ['15.0.0', 'ReactPerf.getWasted'];
  deprecated['Perf.getMeasurementsSummaryMap'] = ['15.0.0', 'Perf.getWasted'];
  // 15.5.0
  deprecated[`${pragma}.createClass`] = ['15.5.0', 'the npm module create-react-class'];
  deprecated[`${pragma}.addons.TestUtils`] = ['15.5.0', 'ReactDOM.TestUtils'];
  deprecated[`${pragma}.PropTypes`] = ['15.5.0', 'the npm module prop-types'];
  // 15.6.0
  deprecated[`${pragma}.DOM`] = ['15.6.0', 'the npm module react-dom-factories'];
  // 16.9.0
  // For now the following life-cycle methods are just legacy, not deprecated:
  // `componentWillMount`, `componentWillReceiveProps`, `componentWillUpdate`
  // https://github.com/yannickcr/eslint-plugin-react/pull/1750#issuecomment-425975934
  deprecated.componentWillMount = [
    '16.9.0',
    'UNSAFE_componentWillMount',
    'https://reactjs.org/docs/react-component.html#unsafe_componentwillmount. '
    + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.',
  ];
  deprecated.componentWillReceiveProps = [
    '16.9.0',
    'UNSAFE_componentWillReceiveProps',
    'https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops. '
    + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.',
  ];
  deprecated.componentWillUpdate = [
    '16.9.0',
    'UNSAFE_componentWillUpdate',
    'https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate. '
    + 'Use https://github.com/reactjs/react-codemod#rename-unsafe-lifecycles to automatically update your components.',
  ];
  // 18.0.0
  // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#deprecations
  deprecated['ReactDOM.render'] = [
    '18.0.0',
    'createRoot',
    'https://reactjs.org/link/switch-to-createroot',
  ];
  deprecated['ReactDOM.hydrate'] = [
    '18.0.0',
    'hydrateRoot',
    'https://reactjs.org/link/switch-to-createroot',
  ];
  deprecated['ReactDOM.unmountComponentAtNode'] = [
    '18.0.0',
    'root.unmount',
    'https://reactjs.org/link/switch-to-createroot',
  ];
  deprecated['ReactDOMServer.renderToNodeStream'] = [
    '18.0.0',
    'renderToPipeableStream',
    'https://reactjs.org/docs/react-dom-server.html#rendertonodestream',
  ];

  return deprecated;
}

const messages = {
  deprecated: '{{oldMethod}} is deprecated since React {{version}}{{newMethod}}{{refs}}',
};

/** @type {import('eslint').Rule.RuleModule} */
module.exports = {
  meta: {
    docs: {
      description: 'Disallow usage of deprecated methods',
      category: 'Best Practices',
      recommended: true,
      url: docsUrl('no-deprecated'),
    },

    messages,

    schema: [],
  },

  create(context) {
    const pragma = pragmaUtil.getFromContext(context);
    const deprecated = getDeprecated(pragma);

    function isDeprecated(method) {
      return (
        deprecated
        && deprecated[method]
        && deprecated[method][0]
        && testReactVersion(context, `>= ${deprecated[method][0]}`)
      );
    }

    function checkDeprecation(node, methodName, methodNode) {
      if (!isDeprecated(methodName)) {
        return;
      }
      const version = deprecated[methodName][0];
      const newMethod = deprecated[methodName][1];
      const refs = deprecated[methodName][2];
      report(context, messages.deprecated, 'deprecated', {
        node: methodNode || node,
        data: {
          oldMethod: methodName,
          version,
          newMethod: newMethod ? `, use ${newMethod} instead` : '',
          refs: refs ? `, see ${refs}` : '',
        },
      });
    }

    function getReactModuleName(node) {
      let moduleName = false;
      if (!node.init) {
        return false;
      }

      entries(MODULES).some((entry) => {
        const key = entry[0];
        const moduleNames = entry[1];
        if (
          node.init.arguments
          && node.init.arguments.length > 0
          && node.init.arguments[0]
          && key === node.init.arguments[0].value
        ) {
          moduleName = MODULES[key][0];
        } else {
          moduleName = moduleNames.find((name) => name === node.init.name);
        }
        return moduleName;
      });

      return moduleName;
    }

    /**
     * Returns life cycle methods if available
     * @param {ASTNode} node The AST node being checked.
     * @returns {Array} The array of methods.
     */
    function getLifeCycleMethods(node) {
      const properties = astUtil.getComponentProperties(node);
      return properties.map((property) => ({
        name: astUtil.getPropertyName(property),
        node: astUtil.getPropertyNameNode(property),
      }));
    }

    /**
     * Checks life cycle methods
     * @param {ASTNode} node The AST node being checked.
     */
    function checkLifeCycleMethods(node) {
      if (
        componentUtil.isES5Component(node, context)
     || componentUtil.isES6Component(node, context)
      ) {
        const methods = getLifeCycleMethods(node);
        methods.forEach((method) => checkDeprecation(node, method.name, method.node));
      }
    }

    // --------------------------------------------------------------------------
    // Public
    // --------------------------------------------------------------------------

    return {
      MemberExpression(node) {
        checkDeprecation(node, getText(context, node));
      },

      ImportDeclaration(node) {
        const isReactImport = typeof MODULES[node.source.value] !== 'undefined';
        if (!isReactImport) {
          return;
        }
        node.specifiers.filter(((s) => 'imported' in s && s.imported)).forEach((specifier) => {
          // TODO, semver-major: remove `in` check as part of jsdoc->tsdoc migration
          checkDeprecation(node, 'imported' in specifier && `${MODULES[node.source.value][0]}.${specifier.imported.name}`, specifier);
        });
      },

      VariableDeclarator(node) {
        const reactModuleName = getReactModuleName(node);
        const isRequire = node.init
          && 'callee' in node.init
          && node.init.callee
          && 'name' in node.init.callee
          && node.init.callee.name === 'require';
        const isReactRequire = node.init
          && 'arguments' in node.init
          && node.init.arguments
          && node.init.arguments.length
          && typeof MODULES['value' in node.init.arguments[0] ? node.init.arguments[0].value : undefined] !== 'undefined';
        const isDestructuring = node.id && node.id.type === 'ObjectPattern';

        if (
          !(isDestructuring && reactModuleName)
          && !(isDestructuring && isRequire && isReactRequire)
        ) {
          return;
        }

        ('properties' in node.id ? node.id.properties : undefined).filter((p) => p.type !== 'RestElement' && p.key).forEach((property) => {
          checkDeprecation(
            node,
            'key' in property && 'name' in property.key && `${reactModuleName || pragma}.${property.key.name}`,
            property
          );
        });
      },

      ClassDeclaration: checkLifeCycleMethods,
      ClassExpression: checkLifeCycleMethods,
      ObjectExpression: checkLifeCycleMethods,
    };
  },
};