Skip to content

Commit be2777c

Browse files
merrywhethermerrywhether
authored
fix(eslint-plugin): [explicit-function-return-type] support JSX attributes in allowTypedFunctionExpressions (#7553)
1 parent eb736bb commit be2777c

3 files changed

Lines changed: 190 additions & 28 deletions

File tree

‎packages/eslint-plugin/docs/rules/explicit-function-return-type.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,10 @@ functionWithObjectArg({
172172
return 1;
173173
},
174174
});
175+
176+
const Comp: FC = () => {
177+
return <button onClick={() => {}} />;
178+
};
175179
```
176180

177181
### `allowHigherOrderFunctions`

‎packages/eslint-plugin/src/util/explicitReturnTypeUtils.ts‎

Lines changed: 49 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,53 @@ function isPropertyDefinitionWithTypeAnnotation(
3737
);
3838
}
3939

40+
/**
41+
* Checks if a node belongs to:
42+
* ```
43+
* foo(() => 1)
44+
* ```
45+
*/
46+
function isFunctionArgument(
47+
parent: TSESTree.Node,
48+
callee?: FunctionExpression,
49+
): parent is TSESTree.CallExpression {
50+
return (
51+
parent.type === AST_NODE_TYPES.CallExpression &&
52+
// make sure this isn't an IIFE
53+
parent.callee !== callee
54+
);
55+
}
56+
57+
/**
58+
* Checks if a node is type-constrained in JSX
59+
* ```
60+
* <Foo x={() => {}} />
61+
* <Bar>{() => {}}</Bar>
62+
* <Baz {...props} />
63+
* ```
64+
*/
65+
function isTypedJSX(
66+
node: TSESTree.Node,
67+
): node is TSESTree.JSXExpressionContainer | TSESTree.JSXSpreadAttribute {
68+
return (
69+
node.type === AST_NODE_TYPES.JSXExpressionContainer ||
70+
node.type === AST_NODE_TYPES.JSXSpreadAttribute
71+
);
72+
}
73+
74+
function isTypedParent(
75+
parent: TSESTree.Node,
76+
callee?: FunctionExpression,
77+
): boolean {
78+
return (
79+
isTypeAssertion(parent) ||
80+
isVariableDeclaratorWithTypeAnnotation(parent) ||
81+
isPropertyDefinitionWithTypeAnnotation(parent) ||
82+
isFunctionArgument(parent, callee) ||
83+
isTypedJSX(parent)
84+
);
85+
}
86+
4087
/**
4188
* Checks if a node belongs to:
4289
* ```
@@ -78,13 +125,7 @@ function isPropertyOfObjectWithType(
78125
return false;
79126
}
80127

81-
return (
82-
isTypeAssertion(parent) ||
83-
isPropertyDefinitionWithTypeAnnotation(parent) ||
84-
isVariableDeclaratorWithTypeAnnotation(parent) ||
85-
isFunctionArgument(parent) ||
86-
isPropertyOfObjectWithType(parent)
87-
);
128+
return isTypedParent(parent) || isPropertyOfObjectWithType(parent);
88129
}
89130

90131
/**
@@ -127,23 +168,6 @@ function doesImmediatelyReturnFunctionExpression({
127168
);
128169
}
129170

130-
/**
131-
* Checks if a node belongs to:
132-
* ```
133-
* foo(() => 1)
134-
* ```
135-
*/
136-
function isFunctionArgument(
137-
parent: TSESTree.Node,
138-
callee?: FunctionExpression,
139-
): parent is TSESTree.CallExpression {
140-
return (
141-
parent.type === AST_NODE_TYPES.CallExpression &&
142-
// make sure this isn't an IIFE
143-
parent.callee !== callee
144-
);
145-
}
146-
147171
/**
148172
* Checks if a function belongs to:
149173
* ```
@@ -194,11 +218,8 @@ function isTypedFunctionExpression(
194218
}
195219

196220
return (
197-
isTypeAssertion(parent) ||
198-
isVariableDeclaratorWithTypeAnnotation(parent) ||
199-
isPropertyDefinitionWithTypeAnnotation(parent) ||
221+
isTypedParent(parent, node) ||
200222
isPropertyOfObjectWithType(parent) ||
201-
isFunctionArgument(parent, node) ||
202223
isConstructorArgument(parent)
203224
);
204225
}

‎packages/eslint-plugin/tests/rules/explicit-function-return-type.test.ts‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,53 @@ class App {
180180
`,
181181
options: [{ allowTypedFunctionExpressions: true }],
182182
},
183+
// https://github.com/typescript-eslint/typescript-eslint/issues/7552
184+
{
185+
code: 'const foo = <button onClick={() => {}} />;',
186+
options: [{ allowTypedFunctionExpressions: true }],
187+
parserOptions: {
188+
ecmaFeatures: {
189+
jsx: true,
190+
},
191+
},
192+
},
193+
{
194+
code: 'const foo = <button on={{ click: () => {} }} />;',
195+
options: [{ allowTypedFunctionExpressions: true }],
196+
parserOptions: {
197+
ecmaFeatures: {
198+
jsx: true,
199+
},
200+
},
201+
},
202+
{
203+
code: 'const foo = <Bar>{() => {}}</Bar>;',
204+
options: [{ allowTypedFunctionExpressions: true }],
205+
parserOptions: {
206+
ecmaFeatures: {
207+
jsx: true,
208+
},
209+
},
210+
},
211+
{
212+
code: 'const foo = <Bar>{{ on: () => {} }}</Bar>;',
213+
options: [{ allowTypedFunctionExpressions: true }],
214+
parserOptions: {
215+
ecmaFeatures: {
216+
jsx: true,
217+
},
218+
},
219+
},
220+
{
221+
code: 'const foo = <button {...{ onClick: () => {} }} />;',
222+
options: [{ allowTypedFunctionExpressions: true }],
223+
parserOptions: {
224+
ecmaFeatures: {
225+
jsx: true,
226+
},
227+
},
228+
},
229+
183230
// https://github.com/typescript-eslint/typescript-eslint/issues/525
184231
{
185232
code: `
@@ -977,6 +1024,96 @@ const x: Foo = {
9771024
},
9781025
],
9791026
},
1027+
{
1028+
code: 'const foo = <button onClick={() => {}} />;',
1029+
options: [{ allowTypedFunctionExpressions: false }],
1030+
parserOptions: {
1031+
ecmaFeatures: {
1032+
jsx: true,
1033+
},
1034+
},
1035+
errors: [
1036+
{
1037+
messageId: 'missingReturnType',
1038+
line: 1,
1039+
endLine: 1,
1040+
column: 33,
1041+
endColumn: 35,
1042+
},
1043+
],
1044+
},
1045+
{
1046+
code: 'const foo = <button on={{ click: () => {} }} />;',
1047+
options: [{ allowTypedFunctionExpressions: false }],
1048+
parserOptions: {
1049+
ecmaFeatures: {
1050+
jsx: true,
1051+
},
1052+
},
1053+
errors: [
1054+
{
1055+
messageId: 'missingReturnType',
1056+
line: 1,
1057+
endLine: 1,
1058+
column: 27,
1059+
endColumn: 34,
1060+
},
1061+
],
1062+
},
1063+
{
1064+
code: 'const foo = <Bar>{() => {}}</Bar>;',
1065+
options: [{ allowTypedFunctionExpressions: false }],
1066+
parserOptions: {
1067+
ecmaFeatures: {
1068+
jsx: true,
1069+
},
1070+
},
1071+
errors: [
1072+
{
1073+
messageId: 'missingReturnType',
1074+
line: 1,
1075+
endLine: 1,
1076+
column: 22,
1077+
endColumn: 24,
1078+
},
1079+
],
1080+
},
1081+
{
1082+
code: 'const foo = <Bar>{{ on: () => {} }}</Bar>;',
1083+
options: [{ allowTypedFunctionExpressions: false }],
1084+
parserOptions: {
1085+
ecmaFeatures: {
1086+
jsx: true,
1087+
},
1088+
},
1089+
errors: [
1090+
{
1091+
messageId: 'missingReturnType',
1092+
line: 1,
1093+
endLine: 1,
1094+
column: 21,
1095+
endColumn: 25,
1096+
},
1097+
],
1098+
},
1099+
{
1100+
code: 'const foo = <button {...{ onClick: () => {} }} />;',
1101+
options: [{ allowTypedFunctionExpressions: false }],
1102+
parserOptions: {
1103+
ecmaFeatures: {
1104+
jsx: true,
1105+
},
1106+
},
1107+
errors: [
1108+
{
1109+
messageId: 'missingReturnType',
1110+
line: 1,
1111+
endLine: 1,
1112+
column: 27,
1113+
endColumn: 36,
1114+
},
1115+
],
1116+
},
9801117
{
9811118
code: '() => () => {};',
9821119
options: [{ allowHigherOrderFunctions: true }],

0 commit comments

Comments
 (0)