123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946 |
- /**
- * @fileoverview Utility class and functions for React components detection
- * @author Yannick Croissant
- */
- 'use strict';
- const arrayIncludes = require('array-includes');
- const fromEntries = require('object.fromentries');
- const values = require('object.values');
- const variableUtil = require('./variable');
- const pragmaUtil = require('./pragma');
- const astUtil = require('./ast');
- const componentUtil = require('./componentUtil');
- const propTypesUtil = require('./propTypes');
- const jsxUtil = require('./jsx');
- const usedPropTypesUtil = require('./usedPropTypes');
- const defaultPropsUtil = require('./defaultProps');
- const isFirstLetterCapitalized = require('./isFirstLetterCapitalized');
- const isDestructuredFromPragmaImport = require('./isDestructuredFromPragmaImport');
- function getId(node) {
- return node ? `${node.range[0]}:${node.range[1]}` : '';
- }
- function usedPropTypesAreEquivalent(propA, propB) {
- if (propA.name === propB.name) {
- if (!propA.allNames && !propB.allNames) {
- return true;
- }
- if (Array.isArray(propA.allNames) && Array.isArray(propB.allNames) && propA.allNames.join('') === propB.allNames.join('')) {
- return true;
- }
- return false;
- }
- return false;
- }
- function mergeUsedPropTypes(propsList, newPropsList) {
- const propsToAdd = newPropsList.filter((newProp) => {
- const newPropIsAlreadyInTheList = propsList.some((prop) => usedPropTypesAreEquivalent(prop, newProp));
- return !newPropIsAlreadyInTheList;
- });
- return propsList.concat(propsToAdd);
- }
- const USE_HOOK_PREFIX_REGEX = /^use[A-Z]/;
- const Lists = new WeakMap();
- const ReactImports = new WeakMap();
- /**
- * Components
- */
- class Components {
- constructor() {
- Lists.set(this, {});
- ReactImports.set(this, {});
- }
- /**
- * Add a node to the components list, or update it if it's already in the list
- *
- * @param {ASTNode} node The AST node being added.
- * @param {Number} confidence Confidence in the component detection (0=banned, 1=maybe, 2=yes)
- * @returns {Object} Added component object
- */
- add(node, confidence) {
- const id = getId(node);
- const list = Lists.get(this);
- if (list[id]) {
- if (confidence === 0 || list[id].confidence === 0) {
- list[id].confidence = 0;
- } else {
- list[id].confidence = Math.max(list[id].confidence, confidence);
- }
- return list[id];
- }
- list[id] = {
- node,
- confidence,
- };
- return list[id];
- }
- /**
- * Find a component in the list using its node
- *
- * @param {ASTNode} node The AST node being searched.
- * @returns {Object} Component object, undefined if the component is not found or has confidence value of 0.
- */
- get(node) {
- const id = getId(node);
- const item = Lists.get(this)[id];
- if (item && item.confidence >= 1) {
- return item;
- }
- return null;
- }
- /**
- * Update a component in the list
- *
- * @param {ASTNode} node The AST node being updated.
- * @param {Object} props Additional properties to add to the component.
- */
- set(node, props) {
- const list = Lists.get(this);
- let component = list[getId(node)];
- while (!component || component.confidence < 1) {
- node = node.parent;
- if (!node) {
- return;
- }
- component = list[getId(node)];
- }
- Object.assign(
- component,
- props,
- {
- usedPropTypes: mergeUsedPropTypes(
- component.usedPropTypes || [],
- props.usedPropTypes || []
- ),
- }
- );
- }
- /**
- * Return the components list
- * Components for which we are not confident are not returned
- *
- * @returns {Object} Components list
- */
- list() {
- const thisList = Lists.get(this);
- const list = {};
- const usedPropTypes = {};
- // Find props used in components for which we are not confident
- Object.keys(thisList).filter((i) => thisList[i].confidence < 2).forEach((i) => {
- let component = null;
- let node = null;
- node = thisList[i].node;
- while (!component && node.parent) {
- node = node.parent;
- // Stop moving up if we reach a decorator
- if (node.type === 'Decorator') {
- break;
- }
- component = this.get(node);
- }
- if (component) {
- const newUsedProps = (thisList[i].usedPropTypes || []).filter((propType) => !propType.node || propType.node.kind !== 'init');
- const componentId = getId(component.node);
- usedPropTypes[componentId] = mergeUsedPropTypes(usedPropTypes[componentId] || [], newUsedProps);
- }
- });
- // Assign used props in not confident components to the parent component
- Object.keys(thisList).filter((j) => thisList[j].confidence >= 2).forEach((j) => {
- const id = getId(thisList[j].node);
- list[j] = thisList[j];
- if (usedPropTypes[id]) {
- list[j].usedPropTypes = mergeUsedPropTypes(list[j].usedPropTypes || [], usedPropTypes[id]);
- }
- });
- return list;
- }
- /**
- * Return the length of the components list
- * Components for which we are not confident are not counted
- *
- * @returns {Number} Components list length
- */
- length() {
- const list = Lists.get(this);
- return values(list).filter((component) => component.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) {
- const componentWrapperFunctions = context.settings.componentWrapperFunctions || [];
- // eslint-disable-next-line arrow-body-style
- return componentWrapperFunctions.map((wrapperFunction) => {
- return typeof wrapperFunction === 'string'
- ? { property: wrapperFunction }
- : Object.assign({}, wrapperFunction, {
- object: wrapperFunction.object === '<pragma>' ? pragma : wrapperFunction.object,
- });
- }).concat([
- { property: 'forwardRef', object: pragma },
- { property: 'memo', object: pragma },
- ]);
- }
- // eslint-disable-next-line valid-jsdoc
- /**
- * Merge many eslint rules into one
- * @param {{[_: string]: Function}[]} rules the returned values for eslint rule.create(context)
- * @returns {{[_: string]: Function}} merged rule
- */
- function mergeRules(rules) {
- /** @type {Map<string, Function[]>} */
- const handlersByKey = new Map();
- rules.forEach((rule) => {
- Object.keys(rule).forEach((key) => {
- const fns = handlersByKey.get(key);
- if (!fns) {
- handlersByKey.set(key, [rule[key]]);
- } else {
- fns.push(rule[key]);
- }
- });
- });
- /** @type {{[key: string]: Function}} */
- const rule = {};
- handlersByKey.forEach((fns, key) => {
- rule[key] = function mergedHandler(node) {
- fns.forEach((fn) => {
- fn(node);
- });
- };
- });
- return rule;
- }
- function componentRule(rule, context) {
- const pragma = pragmaUtil.getFromContext(context);
- const sourceCode = context.getSourceCode();
- const components = new Components();
- const wrapperFunctions = getWrapperFunctions(context, pragma);
- // Utilities for component detection
- const utils = {
- /**
- * Check if variable is destructured from pragma import
- *
- * @param {string} variable The variable name to check
- * @returns {Boolean} True if createElement is destructured from the pragma
- */
- isDestructuredFromPragmaImport(variable) {
- return isDestructuredFromPragmaImport(variable, context);
- },
- isReturningJSX(ASTNode, strict) {
- return jsxUtil.isReturningJSX(ASTNode, context, strict, true);
- },
- isReturningJSXOrNull(ASTNode, strict) {
- return jsxUtil.isReturningJSX(ASTNode, context, strict);
- },
- isReturningOnlyNull(ASTNode) {
- return jsxUtil.isReturningOnlyNull(ASTNode, context);
- },
- getPragmaComponentWrapper(node) {
- let isPragmaComponentWrapper;
- let currentNode = node;
- let prevNode;
- do {
- currentNode = currentNode.parent;
- isPragmaComponentWrapper = this.isPragmaComponentWrapper(currentNode);
- if (isPragmaComponentWrapper) {
- prevNode = currentNode;
- }
- } while (isPragmaComponentWrapper);
- return prevNode;
- },
- getComponentNameFromJSXElement(node) {
- if (node.type !== 'JSXElement') {
- return null;
- }
- if (node.openingElement && node.openingElement.name && node.openingElement.name.name) {
- return node.openingElement.name.name;
- }
- return null;
- },
- /**
- * Getting the first JSX element's name.
- * @param {object} node
- * @returns {string | null}
- */
- getNameOfWrappedComponent(node) {
- if (node.length < 1) {
- return null;
- }
- const body = node[0].body;
- if (!body) {
- return null;
- }
- if (body.type === 'JSXElement') {
- return this.getComponentNameFromJSXElement(body);
- }
- if (body.type === 'BlockStatement') {
- const jsxElement = body.body.find((item) => item.type === 'ReturnStatement');
- return jsxElement
- && jsxElement.argument
- && this.getComponentNameFromJSXElement(jsxElement.argument);
- }
- return null;
- },
- /**
- * Get the list of names of components created till now
- * @returns {string | boolean}
- */
- getDetectedComponents() {
- const list = components.list();
- return values(list).filter((val) => {
- if (val.node.type === 'ClassDeclaration') {
- return true;
- }
- if (
- val.node.type === 'ArrowFunctionExpression'
- && val.node.parent
- && val.node.parent.type === 'VariableDeclarator'
- && val.node.parent.id
- ) {
- return true;
- }
- return false;
- }).map((val) => {
- if (val.node.type === 'ArrowFunctionExpression') return val.node.parent.id.name;
- return val.node.id && val.node.id.name;
- });
- },
- /**
- * It will check whether memo/forwardRef is wrapping existing component or
- * creating a new one.
- * @param {object} node
- * @returns {boolean}
- */
- nodeWrapsComponent(node) {
- const childComponent = this.getNameOfWrappedComponent(node.arguments);
- const componentList = this.getDetectedComponents();
- return !!childComponent && arrayIncludes(componentList, childComponent);
- },
- isPragmaComponentWrapper(node) {
- if (!node || node.type !== 'CallExpression') {
- return false;
- }
- return wrapperFunctions.some((wrapperFunction) => {
- if (node.callee.type === 'MemberExpression') {
- return wrapperFunction.object
- && wrapperFunction.object === node.callee.object.name
- && wrapperFunction.property === node.callee.property.name
- && !this.nodeWrapsComponent(node);
- }
- return wrapperFunction.property === node.callee.name
- && (!wrapperFunction.object
- // Functions coming from the current pragma need special handling
- || (wrapperFunction.object === pragma && this.isDestructuredFromPragmaImport(node.callee.name))
- );
- });
- },
- /**
- * Find a return statement in the current node
- *
- * @param {ASTNode} node The AST node being checked
- */
- findReturnStatement: astUtil.findReturnStatement,
- /**
- * Get the parent component node from the current scope
- *
- * @returns {ASTNode} component node, null if we are not in a component
- */
- getParentComponent() {
- return (
- componentUtil.getParentES6Component(context)
- || componentUtil.getParentES5Component(context)
- || utils.getParentStatelessComponent()
- );
- },
- /**
- * @param {ASTNode} node
- * @returns {boolean}
- */
- isInAllowedPositionForComponent(node) {
- switch (node.parent.type) {
- case 'VariableDeclarator':
- case 'AssignmentExpression':
- case 'Property':
- case 'ReturnStatement':
- case 'ExportDefaultDeclaration':
- case 'ArrowFunctionExpression': {
- return true;
- }
- case 'SequenceExpression': {
- return utils.isInAllowedPositionForComponent(node.parent)
- && node === node.parent.expressions[node.parent.expressions.length - 1];
- }
- default:
- return false;
- }
- },
- /**
- * Get node if node is a stateless component, or node.parent in cases like
- * `React.memo` or `React.forwardRef`. Otherwise returns `undefined`.
- * @param {ASTNode} node
- * @returns {ASTNode | undefined}
- */
- getStatelessComponent(node) {
- const parent = node.parent;
- if (
- node.type === 'FunctionDeclaration'
- && (!node.id || isFirstLetterCapitalized(node.id.name))
- && utils.isReturningJSXOrNull(node)
- ) {
- return node;
- }
- if (node.type === 'FunctionExpression' || node.type === 'ArrowFunctionExpression') {
- const isPropertyAssignment = parent.type === 'AssignmentExpression'
- && parent.left.type === 'MemberExpression';
- const isModuleExportsAssignment = isPropertyAssignment
- && parent.left.object.name === 'module'
- && parent.left.property.name === 'exports';
- if (node.parent.type === 'ExportDefaultDeclaration') {
- if (utils.isReturningJSX(node)) {
- return node;
- }
- return undefined;
- }
- if (node.parent.type === 'VariableDeclarator' && utils.isReturningJSXOrNull(node)) {
- if (isFirstLetterCapitalized(node.parent.id.name)) {
- return node;
- }
- return undefined;
- }
- // case: const any = () => { return (props) => null }
- // case: const any = () => (props) => null
- if (
- (node.parent.type === 'ReturnStatement' || (node.parent.type === 'ArrowFunctionExpression' && node.parent.expression))
- && !utils.isReturningJSX(node)
- ) {
- return undefined;
- }
- // case: any = () => { return => null }
- // case: any = () => null
- if (node.parent.type === 'AssignmentExpression' && !isPropertyAssignment && utils.isReturningJSXOrNull(node)) {
- if (isFirstLetterCapitalized(node.parent.left.name)) {
- return node;
- }
- return undefined;
- }
- // case: any = () => () => null
- if (node.parent.type === 'ArrowFunctionExpression' && node.parent.parent.type === 'AssignmentExpression' && !isPropertyAssignment && utils.isReturningJSXOrNull(node)) {
- if (isFirstLetterCapitalized(node.parent.parent.left.name)) {
- return node;
- }
- return undefined;
- }
- // case: { any: () => () => null }
- if (node.parent.type === 'ArrowFunctionExpression' && node.parent.parent.type === 'Property' && !isPropertyAssignment && utils.isReturningJSXOrNull(node)) {
- if (isFirstLetterCapitalized(node.parent.parent.key.name)) {
- return node;
- }
- return undefined;
- }
- // case: any = function() {return function() {return null;};}
- if (node.parent.type === 'ReturnStatement') {
- if (isFirstLetterCapitalized(node.id && node.id.name)) {
- return node;
- }
- const functionExpr = node.parent.parent.parent;
- if (functionExpr.parent.type === 'AssignmentExpression' && !isPropertyAssignment && utils.isReturningJSXOrNull(node)) {
- if (isFirstLetterCapitalized(functionExpr.parent.left.name)) {
- return node;
- }
- return undefined;
- }
- }
- // case: { any: function() {return function() {return null;};} }
- if (node.parent.type === 'ReturnStatement') {
- const functionExpr = node.parent.parent.parent;
- if (functionExpr.parent.type === 'Property' && !isPropertyAssignment && utils.isReturningJSXOrNull(node)) {
- if (isFirstLetterCapitalized(functionExpr.parent.key.name)) {
- return node;
- }
- return undefined;
- }
- }
- // for case abc = { [someobject.somekey]: props => { ... return not-jsx } }
- if (node.parent && node.parent.key && node.parent.key.type === 'MemberExpression' && !utils.isReturningJSX(node) && !utils.isReturningOnlyNull(node)) {
- return undefined;
- }
- if (
- node.parent.type === 'Property' && (
- (node.parent.method && !node.parent.computed) // case: { f() { return ... } }
- || (!node.id && !node.parent.computed) // case: { f: () => ... }
- )
- ) {
- if (isFirstLetterCapitalized(node.parent.key.name) && utils.isReturningJSX(node)) {
- return node;
- }
- return undefined;
- }
- // Case like `React.memo(() => <></>)` or `React.forwardRef(...)`
- const pragmaComponentWrapper = utils.getPragmaComponentWrapper(node);
- if (pragmaComponentWrapper && utils.isReturningJSXOrNull(node)) {
- return pragmaComponentWrapper;
- }
- if (!(utils.isInAllowedPositionForComponent(node) && utils.isReturningJSXOrNull(node))) {
- return undefined;
- }
- if (utils.isParentComponentNotStatelessComponent(node)) {
- return undefined;
- }
- if (node.id) {
- return isFirstLetterCapitalized(node.id.name) ? node : undefined;
- }
- if (
- isPropertyAssignment
- && !isModuleExportsAssignment
- && !isFirstLetterCapitalized(parent.left.property.name)
- ) {
- return undefined;
- }
- if (parent.type === 'Property' && utils.isReturningOnlyNull(node)) {
- return undefined;
- }
- return node;
- }
- return undefined;
- },
- /**
- * Get the parent stateless component node from the current scope
- *
- * @returns {ASTNode} component node, null if we are not in a component
- */
- getParentStatelessComponent() {
- let scope = context.getScope();
- while (scope) {
- const node = scope.block;
- const statelessComponent = utils.getStatelessComponent(node);
- if (statelessComponent) {
- return statelessComponent;
- }
- scope = scope.upper;
- }
- return null;
- },
- /**
- * Get the related component from a node
- *
- * @param {ASTNode} node The AST node being checked (must be a MemberExpression).
- * @returns {ASTNode} component node, null if we cannot find the component
- */
- getRelatedComponent(node) {
- let i;
- let j;
- let k;
- let l;
- let componentNode;
- // Get the component path
- const componentPath = [];
- while (node) {
- if (node.property && node.property.type === 'Identifier') {
- componentPath.push(node.property.name);
- }
- if (node.object && node.object.type === 'Identifier') {
- componentPath.push(node.object.name);
- }
- node = node.object;
- }
- componentPath.reverse();
- const componentName = componentPath.slice(0, componentPath.length - 1).join('.');
- // Find the variable in the current scope
- const variableName = componentPath.shift();
- if (!variableName) {
- return null;
- }
- let variableInScope;
- const variables = variableUtil.variablesInScope(context);
- for (i = 0, j = variables.length; i < j; i++) {
- if (variables[i].name === variableName) {
- variableInScope = variables[i];
- break;
- }
- }
- if (!variableInScope) {
- return null;
- }
- // Try to find the component using variable references
- const refs = variableInScope.references;
- refs.some((ref) => {
- let refId = ref.identifier;
- if (refId.parent && refId.parent.type === 'MemberExpression') {
- refId = refId.parent;
- }
- if (sourceCode.getText(refId) !== componentName) {
- return false;
- }
- if (refId.type === 'MemberExpression') {
- componentNode = refId.parent.right;
- } else if (
- refId.parent
- && refId.parent.type === 'VariableDeclarator'
- && refId.parent.init
- && refId.parent.init.type !== 'Identifier'
- ) {
- componentNode = refId.parent.init;
- }
- return true;
- });
- if (componentNode) {
- // Return the component
- return components.add(componentNode, 1);
- }
- // Try to find the component using variable declarations
- const defs = variableInScope.defs;
- const defInScope = defs.find((def) => (
- def.type === 'ClassName'
- || def.type === 'FunctionName'
- || def.type === 'Variable'
- ));
- if (!defInScope || !defInScope.node) {
- return null;
- }
- componentNode = defInScope.node.init || defInScope.node;
- // Traverse the node properties to the component declaration
- for (i = 0, j = componentPath.length; i < j; i++) {
- if (!componentNode.properties) {
- continue; // eslint-disable-line no-continue
- }
- for (k = 0, l = componentNode.properties.length; k < l; k++) {
- if (componentNode.properties[k].key && componentNode.properties[k].key.name === componentPath[i]) {
- componentNode = componentNode.properties[k];
- break;
- }
- }
- if (!componentNode || !componentNode.value) {
- return null;
- }
- componentNode = componentNode.value;
- }
- // Return the component
- return components.add(componentNode, 1);
- },
- isParentComponentNotStatelessComponent(node) {
- return !!(
- node.parent
- && node.parent.key
- && node.parent.key.type === 'Identifier'
- // custom component functions must start with a capital letter (returns false otherwise)
- && node.parent.key.name.charAt(0) === node.parent.key.name.charAt(0).toLowerCase()
- // react render function cannot have params
- && !!(node.params || []).length
- );
- },
- /**
- * Identify whether a node (CallExpression) is a call to a React hook
- *
- * @param {ASTNode} node The AST node being searched. (expects CallExpression)
- * @param {('useCallback'|'useContext'|'useDebugValue'|'useEffect'|'useImperativeHandle'|'useLayoutEffect'|'useMemo'|'useReducer'|'useRef'|'useState')[]} [expectedHookNames] React hook names to which search is limited.
- * @returns {Boolean} True if the node is a call to a React hook
- */
- isReactHookCall(node, expectedHookNames) {
- if (node.type !== 'CallExpression') {
- return false;
- }
- const defaultReactImports = components.getDefaultReactImports();
- const namedReactImports = components.getNamedReactImports();
- const defaultReactImportName = defaultReactImports
- && defaultReactImports[0]
- && defaultReactImports[0].local.name;
- const reactHookImportSpecifiers = namedReactImports
- && namedReactImports.filter((specifier) => USE_HOOK_PREFIX_REGEX.test(specifier.imported.name));
- const reactHookImportNames = reactHookImportSpecifiers
- && fromEntries(reactHookImportSpecifiers.map((specifier) => [specifier.local.name, specifier.imported.name]));
- const isPotentialReactHookCall = defaultReactImportName
- && node.callee.type === 'MemberExpression'
- && node.callee.object.type === 'Identifier'
- && node.callee.object.name === defaultReactImportName
- && node.callee.property.type === 'Identifier'
- && node.callee.property.name.match(USE_HOOK_PREFIX_REGEX);
- const isPotentialHookCall = reactHookImportNames
- && node.callee.type === 'Identifier'
- && node.callee.name.match(USE_HOOK_PREFIX_REGEX);
- const scope = (isPotentialReactHookCall || isPotentialHookCall) && context.getScope();
- const reactResolvedDefs = isPotentialReactHookCall
- && scope.references
- && scope.references.find(
- (reference) => reference.identifier.name === defaultReactImportName
- ).resolved.defs;
- const isReactShadowed = isPotentialReactHookCall && reactResolvedDefs
- && reactResolvedDefs.some((reactDef) => reactDef.type !== 'ImportBinding');
- const potentialHookReference = isPotentialHookCall
- && scope.references
- && scope.references.find(
- (reference) => reactHookImportNames[reference.identifier.name]
- );
- const hookResolvedDefs = potentialHookReference && potentialHookReference.resolved.defs;
- const localHookName = (isPotentialReactHookCall && node.callee.property.name)
- || (isPotentialHookCall && potentialHookReference && node.callee.name);
- const isHookShadowed = isPotentialHookCall
- && hookResolvedDefs
- && hookResolvedDefs.some(
- (hookDef) => hookDef.name.name === localHookName
- && hookDef.type !== 'ImportBinding'
- );
- const isHookCall = (isPotentialReactHookCall && !isReactShadowed)
- || (isPotentialHookCall && localHookName && !isHookShadowed);
- if (!isHookCall) {
- return false;
- }
- if (!expectedHookNames) {
- return true;
- }
- return arrayIncludes(
- expectedHookNames,
- (reactHookImportNames && reactHookImportNames[localHookName]) || localHookName
- );
- },
- };
- // Component detection instructions
- const detectionInstructions = {
- CallExpression(node) {
- if (!utils.isPragmaComponentWrapper(node)) {
- return;
- }
- if (node.arguments.length > 0 && astUtil.isFunctionLikeExpression(node.arguments[0])) {
- components.add(node, 2);
- }
- },
- ClassExpression(node) {
- if (!componentUtil.isES6Component(node, context)) {
- return;
- }
- components.add(node, 2);
- },
- ClassDeclaration(node) {
- if (!componentUtil.isES6Component(node, context)) {
- return;
- }
- components.add(node, 2);
- },
- ObjectExpression(node) {
- if (!componentUtil.isES5Component(node, context)) {
- return;
- }
- components.add(node, 2);
- },
- FunctionExpression(node) {
- if (node.async) {
- components.add(node, 0);
- return;
- }
- const component = utils.getStatelessComponent(node);
- if (!component) {
- return;
- }
- components.add(component, 2);
- },
- FunctionDeclaration(node) {
- if (node.async) {
- components.add(node, 0);
- return;
- }
- node = utils.getStatelessComponent(node);
- if (!node) {
- return;
- }
- components.add(node, 2);
- },
- ArrowFunctionExpression(node) {
- if (node.async) {
- components.add(node, 0);
- return;
- }
- const component = utils.getStatelessComponent(node);
- if (!component) {
- return;
- }
- components.add(component, 2);
- },
- ThisExpression(node) {
- const component = utils.getParentStatelessComponent();
- if (!component || !/Function/.test(component.type) || !node.parent.property) {
- return;
- }
- // Ban functions accessing a property on a ThisExpression
- components.add(node, 0);
- },
- };
- // 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);
- }
- });
- },
- };
- const ruleInstructions = rule(context, components, utils);
- const propTypesInstructions = propTypesUtil(context, components, utils);
- const usedPropTypesInstructions = usedPropTypesUtil(context, components, utils);
- const defaultPropsInstructions = defaultPropsUtil(context, components, utils);
- const mergedRule = mergeRules([
- detectionInstructions,
- propTypesInstructions,
- usedPropTypesInstructions,
- defaultPropsInstructions,
- reactImportInstructions,
- ruleInstructions,
- ]);
- return mergedRule;
- }
- module.exports = Object.assign(Components, {
- detect(rule) {
- return componentRule.bind(this, rule);
- },
- });
|