123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264 |
- 'use strict';
- const values = require('object.values');
- const Components = require('../util/Components');
- const astUtil = require('../util/ast');
- const componentUtil = require('../util/componentUtil');
- const docsUrl = require('../util/docsUrl');
- const testReactVersion = require('../util/version').testReactVersion;
- const propsUtil = require('../util/props');
- const report = require('../util/report');
- const messages = {
- noDisplayName: 'Component definition is missing display name',
- };
- module.exports = {
- meta: {
- docs: {
- description: 'Disallow missing displayName in a React component definition',
- category: 'Best Practices',
- recommended: true,
- url: docsUrl('display-name'),
- },
- messages,
- schema: [{
- type: 'object',
- properties: {
- ignoreTranspilerName: {
- type: 'boolean',
- },
- },
- additionalProperties: false,
- }],
- },
- create: Components.detect((context, components, utils) => {
- const config = context.options[0] || {};
- const ignoreTranspilerName = config.ignoreTranspilerName || false;
-
- function markDisplayNameAsDeclared(node) {
- components.set(node, {
- hasDisplayName: true,
- });
- }
-
- function isNestedMemo(node) {
- const argumentIsCallExpression = node.arguments && node.arguments[0] && node.arguments[0].type === 'CallExpression';
- return node.type === 'CallExpression' && argumentIsCallExpression && utils.isPragmaComponentWrapper(node);
- }
-
- function reportMissingDisplayName(component) {
- if (
- testReactVersion(context, '^0.14.10 || ^15.7.0 || >= 16.12.0')
- && isNestedMemo(component.node)
- ) {
- return;
- }
- report(context, messages.noDisplayName, 'noDisplayName', {
- node: component.node,
- });
- }
-
- function hasTranspilerName(node) {
- const namedObjectAssignment = (
- node.type === 'ObjectExpression'
- && node.parent
- && node.parent.parent
- && node.parent.parent.type === 'AssignmentExpression'
- && (
- !node.parent.parent.left.object
- || node.parent.parent.left.object.name !== 'module'
- || node.parent.parent.left.property.name !== 'exports'
- )
- );
- const namedObjectDeclaration = (
- node.type === 'ObjectExpression'
- && node.parent
- && node.parent.parent
- && node.parent.parent.type === 'VariableDeclarator'
- );
- const namedClass = (
- (node.type === 'ClassDeclaration' || node.type === 'ClassExpression')
- && node.id
- && !!node.id.name
- );
- const namedFunctionDeclaration = (
- (node.type === 'FunctionDeclaration' || node.type === 'FunctionExpression')
- && node.id
- && !!node.id.name
- );
- const namedFunctionExpression = (
- astUtil.isFunctionLikeExpression(node)
- && node.parent
- && (node.parent.type === 'VariableDeclarator' || node.parent.type === 'Property' || node.parent.method === true)
- && (!node.parent.parent || !componentUtil.isES5Component(node.parent.parent, context))
- );
- if (
- namedObjectAssignment || namedObjectDeclaration
- || namedClass
- || namedFunctionDeclaration || namedFunctionExpression
- ) {
- return true;
- }
- return false;
- }
-
-
-
- return {
- 'ClassProperty, PropertyDefinition'(node) {
- if (!propsUtil.isDisplayNameDeclaration(node)) {
- return;
- }
- markDisplayNameAsDeclared(node);
- },
- MemberExpression(node) {
- if (!propsUtil.isDisplayNameDeclaration(node.property)) {
- return;
- }
- const component = utils.getRelatedComponent(node);
- if (!component) {
- return;
- }
- markDisplayNameAsDeclared(component.node.type === 'TSAsExpression' ? component.node.expression : component.node);
- },
- FunctionExpression(node) {
- if (ignoreTranspilerName || !hasTranspilerName(node)) {
- return;
- }
- if (components.get(node)) {
- markDisplayNameAsDeclared(node);
- }
- },
- FunctionDeclaration(node) {
- if (ignoreTranspilerName || !hasTranspilerName(node)) {
- return;
- }
- if (components.get(node)) {
- markDisplayNameAsDeclared(node);
- }
- },
- ArrowFunctionExpression(node) {
- if (ignoreTranspilerName || !hasTranspilerName(node)) {
- return;
- }
- if (components.get(node)) {
- markDisplayNameAsDeclared(node);
- }
- },
- MethodDefinition(node) {
- if (!propsUtil.isDisplayNameDeclaration(node.key)) {
- return;
- }
- markDisplayNameAsDeclared(node);
- },
- ClassExpression(node) {
- if (ignoreTranspilerName || !hasTranspilerName(node)) {
- return;
- }
- markDisplayNameAsDeclared(node);
- },
- ClassDeclaration(node) {
- if (ignoreTranspilerName || !hasTranspilerName(node)) {
- return;
- }
- markDisplayNameAsDeclared(node);
- },
- ObjectExpression(node) {
- if (!componentUtil.isES5Component(node, context)) {
- return;
- }
- if (ignoreTranspilerName || !hasTranspilerName(node)) {
-
- node.properties.forEach((property) => {
- if (!property.key || !propsUtil.isDisplayNameDeclaration(property.key)) {
- return;
- }
- markDisplayNameAsDeclared(node);
- });
- return;
- }
- markDisplayNameAsDeclared(node);
- },
- CallExpression(node) {
- if (!utils.isPragmaComponentWrapper(node)) {
- return;
- }
- if (node.arguments.length > 0 && astUtil.isFunctionLikeExpression(node.arguments[0])) {
-
-
-
-
- const isWrappedInAnotherPragma = utils.getPragmaComponentWrapper(node);
- if (
- !isWrappedInAnotherPragma
- && (ignoreTranspilerName || !hasTranspilerName(node.arguments[0]))
- ) {
- return;
- }
- if (components.get(node)) {
- markDisplayNameAsDeclared(node);
- }
- }
- },
- 'Program:exit'() {
- const list = components.list();
-
- values(list).filter((component) => !component.hasDisplayName).forEach((component) => {
- reportMissingDisplayName(component);
- });
- },
- };
- }),
- };
|