Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Fix] display-name: unwrap TS as expressions #3110

Merged
merged 1 commit into from
Oct 22, 2021
Merged

[Fix] display-name: unwrap TS as expressions #3110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,9 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
* [`jsx-fragments`], [`jsx-no-useless-fragment`]: avoid a crash on fragment syntax in `typescript-eslint` parser (@ljharb)
* [`jsx-props-no-multi-spaces`]: avoid a crash on long member chains in tag names in `typescript-eslint` parser (@ljharb)
* [`no-unused-prop-types`], `usedPropTypes`: avoid crash with typescript-eslint parser (@ljharb)
* [`display-name`]: unwrap TS `as` expressions ([#3110][] @ljharb)

[#3110]: https://github.com/yannickcr/eslint-plugin-react/pull/3110
[#3092]: https://github.com/yannickcr/eslint-plugin-react/pull/3092
[#2166]: https://github.com/yannickcr/eslint-plugin-react/pull/2166
[#1980]: https://github.com/yannickcr/eslint-plugin-react/pull/1980
Expand Down
10 changes: 5 additions & 5 deletions lib/rules/display-name.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@

'use strict';

const values = require('object.values');

const Components = require('../util/Components');
const astUtil = require('../util/ast');
const docsUrl = require('../util/docsUrl');
Expand Down Expand Up @@ -122,7 +124,6 @@ module.exports = {
// --------------------------------------------------------------------------

return {

ClassProperty(node) {
if (!propsUtil.isDisplayNameDeclaration(node)) {
return;
Expand All @@ -138,7 +139,7 @@ module.exports = {
if (!component) {
return;
}
markDisplayNameAsDeclared(component.node);
markDisplayNameAsDeclared(component.node.type === 'TSAsExpression' ? component.node.expression : component.node);
},

FunctionExpression(node) {
Expand Down Expand Up @@ -215,7 +216,6 @@ module.exports = {
// This means that we raise a single error for the call to React.memo
// instead of one for React.memo and one for React.forwardRef
const isWrappedInAnotherPragma = utils.getPragmaComponentWrapper(node);

if (
!isWrappedInAnotherPragma
&& (ignoreTranspilerName || !hasTranspilerName(node.arguments[0]))
Expand All @@ -232,8 +232,8 @@ module.exports = {
'Program:exit'() {
const list = components.list();
// Report missing display name for all components
Object.keys(list).filter((component) => !list[component].hasDisplayName).forEach((component) => {
reportMissingDisplayName(list[component]);
values(list).filter((component) => !component.hasDisplayName).forEach((component) => {
reportMissingDisplayName(component);
});
},
};
Expand Down
15 changes: 15 additions & 0 deletions tests/lib/rules/display-name.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -520,6 +520,21 @@ ruleTester.run('display-name', rule, {
};
`,
},
{
// issue 3032
code: `
const Comp = React.forwardRef((props, ref) => <main />);
Comp.displayName = 'MyCompName';
`,
},
{
// issue 3032
code: `
const Comp = React.forwardRef((props, ref) => <main data-as="yes" />) as SomeComponent;
Comp.displayName = 'MyCompNameAs';
`,
features: ['ts', 'no-babel'],
},
]),

invalid: parsers.all([
Expand Down