Skip to content

Commit

Permalink
[Fix]: detect imports for generic types
Browse files Browse the repository at this point in the history
  • Loading branch information
@vedadeepta
vedadeepta committed Aug 27, 2021
1 parent 9b6289e commit 8c67505
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 8 deletions.
47 changes: 39 additions & 8 deletions lib/util/propTypes.js
View file
Expand Up @@ -100,7 +100,8 @@ module.exports = function propTypesInstructions(context, components, utils) {
const defaults = {customValidators: []};
const configuration = Object.assign({}, defaults, context.options[0] || {});
const customValidators = configuration.customValidators;
const allowedGenericTypes = ['SFC', 'StatelessComponent', 'FunctionComponent', 'FC'];
const allowedGenericTypes = new Set(['SFC', 'StatelessComponent', 'FunctionComponent', 'FC']);
const genericReactTypesImport = new Set();

/**
* Returns the full scope.
Expand Down Expand Up @@ -548,7 +549,7 @@ module.exports = function propTypesInstructions(context, components, utils) {
let typeName;
if (astUtil.isTSTypeReference(node)) {
typeName = node.typeName.name;
const shouldTraverseTypeParams = !typeName || allowedGenericTypes.indexOf(typeName) !== -1;
const shouldTraverseTypeParams = !typeName || genericReactTypesImport.has(typeName);
if (shouldTraverseTypeParams && node.typeParameters && node.typeParameters.length !== 0) {
const nextNode = node.typeParameters.params[0];
this.visitTSNode(nextNode);
Expand Down Expand Up @@ -941,13 +942,20 @@ module.exports = function propTypesInstructions(context, components, utils) {
return;
}

// Accounts for FC<Props> or React.FC<Props>
const typeName = annotation.typeName.name || annotation.typeName.right.name;

if (allowedGenericTypes.indexOf(typeName) === -1) {
return;
if (annotation.typeName.name) { // if FC<Props>
const typeName = annotation.typeName.name;
if (!genericReactTypesImport.has(typeName)) return;
} else if (annotation.typeName.right.name) { // if React.FC<Props>
const right = annotation.typeName.right.name;
const left = annotation.typeName.left.name;

if (!(
genericReactTypesImport.has(left)
&& allowedGenericTypes.has(right)
)) {
return;
}
}

markPropTypesAsDeclared(node, resolveTypeAnnotation(siblingIdentifier));
}
}
Expand Down Expand Up @@ -1038,6 +1046,29 @@ module.exports = function propTypesInstructions(context, components, utils) {
}
},

ImportDeclaration(node) {
// parse `import ... from 'react`
if (node.source.value === 'react') {
node.specifiers.forEach((specifier) => {
if (
// handles import * as X from 'react'
specifier.type === 'ImportNamespaceSpecifier'
// handles import React from 'react'
|| specifier.type === 'ImportDefaultSpecifier'
) {
genericReactTypesImport.add(specifier.local.name);
}

// handles import { FC } from 'react' or import { FC as X } from 'react'
if (specifier.type === 'ImportSpecifier') {
if (allowedGenericTypes.has(specifier.imported.name)) {
genericReactTypesImport.add(specifier.local.name);
}
}
});
}
},

FunctionDeclaration: markAnnotatedFunctionArgumentsAsDeclared,

ArrowFunctionExpression: markAnnotatedFunctionArgumentsAsDeclared,
Expand Down
69 changes: 69 additions & 0 deletions tests/lib/rules/prop-types.js
View file
Expand Up @@ -3150,6 +3150,8 @@ ruleTester.run('prop-types', rule, {
},
{
code: `
import React from 'react';
interface PersonProps {
username: string;
}
Expand All @@ -3161,6 +3163,8 @@ ruleTester.run('prop-types', rule, {
},
{
code: `
import React from 'react';
const Person: React.FunctionComponent<PersonProps> = (props): React.ReactElement => (
<div>{props.username}</div>
);
Expand All @@ -3169,6 +3173,8 @@ ruleTester.run('prop-types', rule, {
},
{
code: `
import React from 'react';
interface PersonProps {
username: string;
}
Expand All @@ -3180,6 +3186,7 @@ ruleTester.run('prop-types', rule, {
},
{
code: `
import React from 'react';
const Person: React.FunctionComponent<{ username: string }> = (props): React.ReactElement => (
<div>{props.username}</div>
);
Expand All @@ -3188,6 +3195,7 @@ ruleTester.run('prop-types', rule, {
},
{
code: `
import React from 'react';
type PersonProps = {
username: string;
}
Expand All @@ -3199,6 +3207,8 @@ ruleTester.run('prop-types', rule, {
},
{
code: `
import { FunctionComponent } from 'react';
type PersonProps = {
username: string;
}
Expand All @@ -3210,6 +3220,7 @@ ruleTester.run('prop-types', rule, {
},
{
code: `
import { FC } from 'react';
type PersonProps = {
username: string;
}
Expand All @@ -3219,6 +3230,30 @@ ruleTester.run('prop-types', rule, {
`,
parser: parsers['@TYPESCRIPT_ESLINT']
},
{
code: `
import { FC as X } from 'react';
interface PersonProps {
username: string;
}
const Person: X<PersonProps> = (props): React.ReactElement => (
<div>{props.username}</div>
);
`,
parser: parsers['@TYPESCRIPT_ESLINT']
},
{
code: `
import * as X from 'react';
interface PersonProps {
username: string;
}
const Person: X.FC<PersonProps> = (props): React.ReactElement => (
<div>{props.username}</div>
);
`,
parser: parsers['@TYPESCRIPT_ESLINT']
},
{
// issue: https://github.com/yannickcr/eslint-plugin-react/issues/2786
code: `
Expand Down Expand Up @@ -6761,6 +6796,40 @@ ruleTester.run('prop-types', rule, {
}
],
parser: parsers['@TYPESCRIPT_ESLINT']
},
{
code: `
interface PersonProps {
username: string;
}
const Person: X.FC<PersonProps> = (props): React.ReactElement => (
<div>{props.username}</div>
);
`,
errors: [
{
messageId: 'missingPropType',
data: {name: 'username'}
}
],
parser: parsers['@TYPESCRIPT_ESLINT']
},
{
code: `
interface PersonProps {
username: string;
}
const Person: FC<PersonProps> = (props): React.ReactElement => (
<div>{props.username}</div>
);
`,
errors: [
{
messageId: 'missingPropType',
data: {name: 'username'}
}
],
parser: parsers['@TYPESCRIPT_ESLINT']
}
])
)
Expand Down

0 comments on commit 8c67505

Please sign in to comment.