Display type parameters of reference types

Author: michaldudak

src/parsers/componentParser.ts

@@ -12,15 +12,11 @@ import {
 } from '../models';
 import { ParserContext } from '../parser';
 
-const componentReturnTypes = new Set([
-	'Element',
-	'ReactNode',
-	'ReactElement',
-	'JSX.Element',
-	'React.JSX.Element',
-	'React.ReactNode',
-	'React.ReactElement',
-]);
+const componentReturnTypes = [/Element/, /ReactNode/, /ReactElement(<.*>)?/];
+
+function isReactReturnType(type: ReferenceNode) {
+	return componentReturnTypes.some((regex) => regex.test(type.name));
+}
 
 export function augmentComponentNodes(nodes: ExportNode[], context: ParserContext): ExportNode[] {
 	return nodes.map((node) => {
@@ -47,10 +43,10 @@ function hasReactNodeLikeReturnType(type: FunctionNode) {
 	return type.callSignatures.some(
 		(signature) =>
 			(signature.returnValueType instanceof ReferenceNode &&
-				componentReturnTypes.has(signature.returnValueType.name)) ||
+				isReactReturnType(signature.returnValueType)) ||
 			(signature.returnValueType instanceof UnionNode &&
 				signature.returnValueType.types.some(
-					(type) => type instanceof ReferenceNode && componentReturnTypes.has(type.name),
+					(type) => type instanceof ReferenceNode && isReactReturnType(type),
 				)),
 	);
 }

src/parsers/typeResolver.ts

@@ -292,8 +292,18 @@ function getTypeName(type: ts.Type, checker: ts.TypeChecker): string {
 		return checker.typeToString(type);
 	}
 
-	const typeArguments = type.aliasTypeArguments?.map((x) => getTypeName(x, checker));
-	if (typeArguments) {
+	let typeArguments: string[] | undefined;
+	if ('target' in type) {
+		typeArguments = checker
+			.getTypeArguments(type as ts.TypeReference)
+			?.map((x) => getTypeName(x, checker));
+	}
+
+	if (!typeArguments?.length) {
+		typeArguments = type.aliasTypeArguments?.map((x) => getTypeName(x, checker)) ?? [];
+	}
+
+	if (typeArguments && typeArguments.length > 0) {
 		return `${typeName}<${typeArguments.join(', ')}>`;
 	}
 

test/hook-arrow-function/output.json

@@ -76,13 +76,13 @@
 														"name": "externalProps",
 														"type": {
 															"kind": "reference",
-															"name": "HTMLAttributes"
+															"name": "HTMLAttributes<HTMLElement>"
 														}
 													}
 												],
 												"returnValueType": {
 													"kind": "reference",
-													"name": "HTMLAttributes"
+													"name": "HTMLAttributes<HTMLElement>"
 												}
 											}
 										]

test/hook-function-expression/output.json

@@ -77,13 +77,13 @@
 														"name": "externalProps",
 														"type": {
 															"kind": "reference",
-															"name": "HTMLAttributes"
+															"name": "HTMLAttributes<HTMLElement>"
 														}
 													}
 												],
 												"returnValueType": {
 													"kind": "reference",
-													"name": "HTMLAttributes"
+													"name": "HTMLAttributes<HTMLElement>"
 												}
 											}
 										]

test/hook-function/output.json

@@ -77,13 +77,13 @@
 														"name": "externalProps",
 														"type": {
 															"kind": "reference",
-															"name": "HTMLAttributes"
+															"name": "HTMLAttributes<HTMLElement>"
 														}
 													}
 												],
 												"returnValueType": {
 													"kind": "reference",
-													"name": "HTMLAttributes"
+													"name": "HTMLAttributes<HTMLElement>"
 												}
 											}
 										]

test/props-with-callbacks/output.json

@@ -19,7 +19,7 @@
 											"name": "event",
 											"type": {
 												"kind": "reference",
-												"name": "ChangeEvent"
+												"name": "ChangeEvent<HTMLInputElement>"
 											}
 										}
 									],

test/react-refs/output.json

@@ -11,7 +11,7 @@
 						"name": "refObject",
 						"type": {
 							"kind": "reference",
-							"name": "RefObject"
+							"name": "RefObject<HTMLInputElement>"
 						},
 						"optional": false
 					},
@@ -38,7 +38,7 @@
 							"types": [
 								{
 									"kind": "reference",
-									"name": "RefObject"
+									"name": "RefObject<HTMLInputElement>"
 								},
 								{
 									"kind": "intrinsic",
@@ -76,7 +76,7 @@
 								},
 								{
 									"kind": "reference",
-									"name": "RefObject"
+									"name": "RefObject<HTMLInputElement | null>"
 								},
 								{
 									"kind": "intrinsic",