@inficen/eslint-plugin-no-fc/dist/rules/no-fc.js

prefer not using React.VFC or React.FC to type react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _utils = require("./../utils");

var _utils2 = require("@typescript-eslint/utils");

const rule = (0, _utils.ruleCreator)({
  name: "no-fc",
  meta: {
    docs: {
      description: "prevent usage of React.FC and React.VFC when typing react components",
      recommended: "warn"
    },
    messages: {
      noFC: "do not use React.FC to type react component props, use a function parameter type instead",
      noVFC: "do not use React.VFC to type react component props, use a function parameter type instead"
    },
    type: "suggestion",
    schema: []
  },
  defaultOptions: [],

  create(context) {
    let defaultReactImportName = null;
    let vfcName = null;
    let voidFunctionComponentName = null;
    let fcName = null;
    let functionComponentName = null;
    return {
      // Handle Default Import
      'ImportDeclaration[source.value="react"] > ImportDefaultSpecifier': node => {
        defaultReactImportName = node.local.name;
      },
      "VariableDeclarator > Identifier > TSTypeAnnotation > TSTypeReference > TSQualifiedName": node => {
        if (!defaultReactImportName) {
          return;
        }

        if (_utils2.ASTUtils.isIdentifier(node.left) && node.left.name === defaultReactImportName) {
          if (_utils2.ASTUtils.isIdentifier(node.right)) {
            if (node.right.name === "FC" || node.right.name === "FunctionComponent") {
              context.report({
                messageId: "noFC",
                node: node.right
              });
            }

            if (node.right.name === "VFC" || node.right.name === "VoidFunctionComponent") {
              context.report({
                messageId: "noVFC",
                node: node.right
              });
            }
          }
        }
      },
      // Handle Named Imports
      'ImportDeclaration[source.value="react"] > ImportSpecifier': node => {
        if (node.imported.name === "FC") {
          fcName = node.local.name;
        }

        if (node.imported.name === "FunctionComponent") {
          functionComponentName = node.local.name;
        }

        if (node.imported.name === "VFC") {
          vfcName = node.local.name;
        }

        if (node.imported.name === "VoidFunctionComponent") {
          voidFunctionComponentName = node.local.name;
        }
      },
      "VariableDeclarator > Identifier > TSTypeAnnotation > TSTypeReference > Identifier": node => {
        if (node.name === fcName || node.name === functionComponentName) {
          context.report({
            messageId: "noFC",
            node
          });
        }

        if (node.name === vfcName || node.name === voidFunctionComponentName) {
          context.report({
            messageId: "noVFC",
            node
          });
        }
      }
    };
  }

});
var _default = rule;
exports.default = _default;