Parse hooks

Author: michaldudak

src/parser.ts

@@ -1,6 +1,5 @@
 import * as ts from 'typescript';
 import * as t from './types';
-import { Documentation } from './types/documentation';
 
 /**
  * Options that specify how the parser should act
@@ -167,8 +166,12 @@ export function parseFromProgram(
 
 	function visit(node: ts.Node) {
 		// function x(props: type) { return <div/> }
-		if (ts.isFunctionDeclaration(node) && node.name && node.parameters.length === 1) {
-			parseFunctionComponent(node, node);
+		if (ts.isFunctionDeclaration(node) && node.name) {
+			if (node.name.getText().startsWith('use')) {
+				parseHook(node);
+			} else if (node.parameters.length === 1) {
+				parseFunctionComponent(node, node);
+			}
 		}
 		// const x = ...
 		else if (ts.isVariableStatement(node)) {
@@ -303,7 +306,7 @@ export function parseFromProgram(
 		const props: Record<string, t.PropNode> = {};
 		const usedPropsPerSignature: Set<String>[] = [];
 		programNode.body = programNode.body.filter((node) => {
-			if (node.name === componentName) {
+			if (node.name === componentName && t.isComponentNode(node)) {
 				const usedProps: Set<string> = new Set();
 				// squash props
 				node.props.forEach((propNode) => {
@@ -397,6 +400,49 @@ export function parseFromProgram(
 		);
 	}
 
+	function parseHook(node: ts.VariableDeclaration | ts.FunctionDeclaration) {
+		if (!node.name) {
+			return;
+		}
+
+		const symbol = checker.getSymbolAtLocation(node.name);
+		if (!symbol) {
+			return;
+		}
+		const hookName = node.name.getText();
+
+		const type = checker.getTypeOfSymbolAtLocation(symbol, symbol.valueDeclaration!);
+		const typeStack = new Set<number>([(type as any).id]);
+
+		const checkedSignatures = type.getCallSignatures().map((signature) => {
+			return {
+				parameters: signature.parameters.map((param) =>
+					t.parameterNode(checkSymbol(param, typeStack)),
+				),
+
+				returnValue: checkType(signature.getReturnType(), typeStack, hookName),
+			};
+		});
+
+		if (checkedSignatures.length === 0) {
+			return;
+		}
+
+		if (checkedSignatures.length === 1) {
+			programNode.body.push(
+				t.hookNode(
+					hookName,
+					checkedSignatures[0].parameters,
+					checkedSignatures[0].returnValue,
+					getDocumentationFromNode(node),
+					node.getSourceFile().fileName,
+				),
+			);
+		}
+
+		// TODO: handle multiple call signatures
+	}
+
 	function checkSymbol(
 		symbol: ts.Symbol,
 		typeStack: Set<number>,
@@ -642,7 +688,7 @@ export function parseFromProgram(
 		return t.simpleTypeNode('any');
 	}
 
-	function getDocumentationFromSymbol(symbol?: ts.Symbol): Documentation | undefined {
+	function getDocumentationFromSymbol(symbol?: ts.Symbol): t.Documentation | undefined {
 		if (!symbol) {
 			return undefined;
 		}
@@ -656,7 +702,7 @@ export function parseFromProgram(
 		return comment ? { description: comment } : undefined;
 	}
 
-	function getDocumentationFromNode(node: ts.Node): Documentation | undefined {
+	function getDocumentationFromNode(node: ts.Node): t.Documentation | undefined {
 		const comments = ts.getJSDocCommentsAndTags(node);
 		if (comments && comments.length === 1) {
 			const commentNode = comments[0];
@@ -681,7 +727,7 @@ function hasFlag(typeFlags: number, flag: number) {
 	return (typeFlags & flag) === flag;
 }
 
-function getVisibilityFromJSDoc(doc: ts.JSDoc): Documentation['visibility'] | undefined {
+function getVisibilityFromJSDoc(doc: ts.JSDoc): t.Documentation['visibility'] | undefined {
 	if (doc.tags?.some((tag) => tag.tagName.text === 'public')) {
 		return 'public';
 	}

src/types/index.ts

@@ -1,6 +1,7 @@
 export * from './nodes/baseNodes';
 export * from './nodes/program';
 export * from './nodes/component';
+export * from './nodes/hook';
 export * from './nodes/prop';
 
 export * from './props/simpleType';
@@ -11,3 +12,5 @@ export * from './props/union';
 export * from './props/literal';
 export * from './props/object';
 export * from './props/array';
+
+export * from './documentation';

src/types/nodes/hook.ts

@@ -0,0 +1,34 @@
+import { Documentation } from '../documentation';
+import { FunctionNode } from '../props/function';
+import { Node } from './baseNodes';
+
+const typeString = 'hook';
+
+export interface HookNode extends FunctionNode {
+	name: string;
+	parametersFilename?: string;
+	description?: string;
+	visibility?: Documentation['visibility'];
+}
+
+export function hookNode(
+	name: string,
+	parameters: Node[],
+	returnValue: Node,
+	documentation: Documentation | undefined,
+	parametersFilename: string | undefined,
+): HookNode {
+	return {
+		nodeType: typeString,
+		name: name,
+		parameters: parameters || [],
+		returnValue,
+		description: documentation?.description,
+		visibility: documentation?.visibility,
+		parametersFilename,
+	};
+}
+
+export function isHookNode(node: Node): node is HookNode {
+	return node.nodeType === typeString;
+}

src/types/nodes/program.ts

@@ -1,13 +1,14 @@
 import { Node } from './baseNodes';
 import { ComponentNode } from './component';
+import { HookNode } from './hook';
 
 const typeString = 'program';
 
 export interface ProgramNode extends Node {
-	body: ComponentNode[];
+	body: (ComponentNode | HookNode)[];
 }
 
-export function programNode(body?: ComponentNode[]): ProgramNode {
+export function programNode(body?: (ComponentNode | HookNode)[]): ProgramNode {
 	return {
 		nodeType: typeString,
 		body: body || [],

src/types/props/function.ts

@@ -2,7 +2,7 @@ import { Node } from '../nodes/baseNodes';
 
 const typeString = 'function';
 
-interface FunctionNode extends Node {
+export interface FunctionNode extends Node {
 	parameters: Node[];
 	returnValue: Node;
 }

src/types/props/parameter.ts

@@ -2,7 +2,7 @@ import { Node } from '../nodes/baseNodes';
 
 const typeString = 'parameter';
 
-interface ParameterNode extends Node {
+export interface ParameterNode extends Node {
 	parameterType: Node;
 }
 

test/hook-function/input.ts

@@ -0,0 +1,24 @@
+/**
+ * A hook defined as a function.
+ *
+ * @internal
+ */
+export function useHook(parameters: HookParameters): HookReturnValue {
+	return {
+		getProps(externalProps) {
+			return externalProps;
+		},
+		ref(element: HTMLElement) {},
+	};
+}
+
+interface HookParameters {
+	value: string;
+	severity: number;
+	onChange: (value: string) => void;
+}
+
+interface HookReturnValue {
+	getProps: (externalProps: React.HTMLAttributes<HTMLElement>) => React.HTMLAttributes<HTMLElement>;
+	ref: React.RefCallback<HTMLElement>;
+}

test/hook-function/output.json

@@ -0,0 +1,108 @@
+{
+	"nodeType": "program",
+	"body": [
+		{
+			"nodeType": "hook",
+			"name": "useHook",
+			"description": "A hook defined as a function.",
+			"visibility": "internal",
+			"parameters": [
+				{
+					"nodeType": "parameter",
+					"parameterType": {
+						"nodeType": "prop",
+						"name": "parameters",
+						"propType": {
+							"nodeType": "interface",
+							"types": [
+								{
+									"nodeType": "prop",
+									"name": "value",
+									"propType": {
+										"nodeType": "simpleType",
+										"typeName": "string"
+									},
+									"optional": false,
+									"filenames": {}
+								},
+								{
+									"nodeType": "prop",
+									"name": "severity",
+									"propType": {
+										"nodeType": "simpleType",
+										"typeName": "number"
+									},
+									"optional": false,
+									"filenames": {}
+								},
+								{
+									"nodeType": "prop",
+									"name": "onChange",
+									"propType": {
+										"nodeType": "function",
+										"parameters": [
+											{
+												"nodeType": "parameter",
+												"parameterType": {
+													"nodeType": "prop",
+													"name": "value",
+													"propType": {
+														"nodeType": "simpleType",
+														"typeName": "string"
+													},
+													"optional": false,
+													"filenames": {}
+												}
+											}
+										],
+										"returnValue": {
+											"nodeType": "simpleType",
+											"typeName": "void"
+										}
+									},
+									"optional": false,
+									"filenames": {}
+								}
+							]
+						},
+						"optional": false,
+						"filenames": {}
+					}
+				}
+			],
+			"returnValue": {
+				"nodeType": "interface",
+				"types": [
+					{
+						"nodeType": "prop",
+						"name": "getProps",
+						"propType": {
+							"nodeType": "function",
+							"parameters": [
+								{
+									"nodeType": "parameter",
+									"parameterType": {
+										"nodeType": "prop",
+										"name": "externalProps",
+										"propType": {
+											"nodeType": "simpleType",
+											"typeName": "React.HTMLAttributes"
+										},
+										"optional": false,
+										"filenames": {}
+									}
+								}
+							],
+							"returnValue": {
+								"nodeType": "simpleType",
+								"typeName": "React.HTMLAttributes"
+							}
+						},
+						"optional": false,
+						"filenames": {}
+					}
+				]
+			}
+		}
+	]
+}

test/index.test.ts

@@ -23,12 +23,20 @@ for (const testCase of testCases) {
 		const ast = rae.parseFromProgram(testCase, program);
 
 		const newAST = rae.programNode(
-			ast.body.map((component) => {
-				expect(component.propsFilename).toBe(testCase);
-				return {
-					...component,
-					propsFilename: undefined,
-				};
+			ast.body.map((componentOrHook) => {
+				if (rae.isComponentNode(componentOrHook)) {
+					expect(componentOrHook.propsFilename).toBe(testCase);
+					return {
+						...componentOrHook,
+						propsFilename: undefined,
+					};
+				} else {
+					expect(componentOrHook.parametersFilename).toBe(testCase);
+					return {
+						...componentOrHook,
+						parametersFilename: undefined,
+					};
+				}
 			}),
 		);