Fix errors from running on Base UI codebase

Author: michaldudak

package.json

@@ -28,7 +28,8 @@
 	},
 	"dependencies": {
 		"lodash": "^4.17.21",
-		"typescript": "^5.7.3"
+		"typescript": "^5.7.3",
+		"yaml": "^2.7.0"
 	},
 	"devDependencies": {
 		"@types/lodash": "^4.17.15",

pnpm-lock.yaml

@@ -2,6 +2,10 @@ import * as fs from 'node:fs';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
 import * as rae from '../src';
+import * as inspector from 'node:inspector';
+import * as yaml from 'yaml';
+
+const isDebug = inspector.url() !== undefined;
 
 interface RunOptions {
 	files?: string[];
@@ -22,14 +26,17 @@ function run(options: RunOptions) {
 	let errorCounter = 0;
 
 	for (const file of files) {
-		console.log(`Processing ${file}`);
-		console.group();
+		if (!isDebug) {
+			console.log(`Processing ${file}`);
+			console.group();
+		}
+
 		try {
 			const ast = rae.parseFromProgram(file, program);
 
 			const componentsApi = ast.body.filter(rae.isComponentNode).map((component) => {
 				return {
-					name: component.name,
+					...component,
 					props: component.props
 						.map((prop) => {
 							return {
@@ -42,41 +49,49 @@ function run(options: RunOptions) {
 								options.includeExternal ||
 								!Array.from(prop.filenames).some((filename) => filename.includes('/node_modules/')),
 						),
+					nodeType: undefined,
 				};
 			});
 
-			const hooksApi = ast.body.filter(rae.isHookNode).map((hook) => {
-				return {
-					name: hook.name,
-					parameters: hook.callSignatures[0].parameters.map((parameter) => {
-						return {
-							...parameter,
-						};
-					}),
-					/*.filter(
-						(prop) =>
-							options.includeExternal ||
-							!Array.from(prop.filenames).some((filename) => filename.includes('/node_modules/')),
-					),*/
-				};
-			});
+			const hooksApi = ast.body
+				.filter(rae.isHookNode)
+				.map((hook) => {
+					return {
+						...hook,
+						parameters: hook.callSignatures[0].parameters.map((parameter) => {
+							return {
+								...parameter,
+							};
+						}),
+						nodeType: undefined,
+					};
+				})
+				.filter((hook) => options.includeExternal || !hook.fileName?.includes('/node_modules/'));
 
 			components.push(...componentsApi);
 			hooks.push(...hooksApi);
 		} catch (e) {
 			console.error(`⛔ Error processing ${file}: ${e.message}`);
 			++errorCounter;
 		} finally {
-			console.groupEnd();
+			if (!isDebug) {
+				console.groupEnd();
+			}
 		}
 	}
 
-	const outputJSON = JSON.stringify({ components, hooks }, null, 2);
 	if (options.out) {
-		fs.writeFileSync(options.out, outputJSON);
+		if (options.out.endsWith('.yaml') || options.out.endsWith('.yml')) {
+			const outputYAML = yaml.stringify({ components, hooks });
+			fs.writeFileSync(options.out, outputYAML);
+		} else {
+			const outputJSON = JSON.stringify({ components, hooks }, null, 2);
+			fs.writeFileSync(options.out, outputJSON);
+		}
+
 		console.log(`Output written to ${options.out}`);
 	} else {
-		console.log(outputJSON);
+		console.log(yaml.stringify({ components, hooks }));
 	}
 
 	console.log(`\nProcessed ${files.length} files.`);

scripts/cli.ts

@@ -264,25 +264,6 @@ export function parseFromProgram(
 		}
 	}
 
-	function isTypeJSXElementLike(type: ts.Type): boolean {
-		if (type.isUnion()) {
-			return type.types.every(
-				(subType) => subType.flags & ts.TypeFlags.Null || isTypeJSXElementLike(subType),
-			);
-		} else if (type.symbol) {
-			const name = checker.getFullyQualifiedName(type.symbol);
-			return (
-				name === 'global.JSX.Element' ||
-				name === 'React.ReactElement' ||
-				name === 'React.JSX.Element' ||
-				name.endsWith('@types/react/jsx-runtime".JSX.Element') || // when `"jsx": "react-jsx"` in tsconfig
-				name.endsWith('@types/react/jsx-dev-runtime".JSX.Element') // when `"jsx": "react-jsxdev"` in tsconfig
-			);
-		}
-
-		return false;
-	}
-
 	function parseFunctionComponent(
 		node: ts.VariableDeclaration | ts.FunctionDeclaration,
 		documentationNode: ts.Node,
@@ -299,10 +280,6 @@ export function parseFromProgram(
 
 		const type = checker.getTypeOfSymbolAtLocation(symbol, node);
 		type.getCallSignatures().forEach((signature) => {
-			if (!isTypeJSXElementLike(signature.getReturnType())) {
-				return;
-			}
-
 			const propsType = checker.getTypeOfSymbolAtLocation(
 				signature.parameters[0],
 				signature.parameters[0].valueDeclaration!,

src/parser.ts

@@ -8,7 +8,7 @@ export interface ComponentNode {
 	nodeType: typeof typeString;
 	name: string;
 	props: MemberNode[];
-	propsFilename?: string;
+	fileName?: string;
 	description?: string;
 	visibility?: Documentation['visibility'];
 }
@@ -17,15 +17,15 @@ export function componentNode(
 	name: string,
 	props: MemberNode[],
 	documentation: Documentation | undefined,
-	propsFilename: string | undefined,
+	fileName: string | undefined,
 ): ComponentNode {
 	return {
 		nodeType: typeString,
 		name: name,
 		props: props || [],
 		description: documentation?.description,
 		visibility: documentation?.visibility,
-		propsFilename,
+		fileName,
 	};
 }
 

src/types/nodes/component.ts

@@ -8,21 +8,21 @@ export interface HookNode extends Omit<FunctionNode, 'nodeType'> {
 	nodeType: typeof typeString;
 	name: string;
 	documentation: Documentation | undefined;
-	parametersFilename?: string;
+	fileName: string | undefined;
 }
 
 export function hookNode(
 	name: string,
 	callSignatures: CallSignature[],
 	documentation: Documentation | undefined,
-	parametersFilename: string | undefined,
+	fileName: string | undefined,
 ): HookNode {
 	return {
 		nodeType: typeString,
 		name: name,
 		callSignatures,
 		documentation,
-		parametersFilename,
+		fileName,
 	};
 }
 

src/types/nodes/hook.ts

@@ -10,20 +10,24 @@
 					"name": "onChange",
 					"type": {
 						"nodeType": "function",
-						"parameters": [
+						"callSignatures": [
 							{
-								"nodeType": "parameter",
-								"name": "event",
-								"type": {
-									"nodeType": "reference",
-									"typeName": "React.ChangeEvent"
+								"parameters": [
+									{
+										"nodeType": "parameter",
+										"name": "event",
+										"type": {
+											"nodeType": "reference",
+											"typeName": "React.ChangeEvent"
+										}
+									}
+								],
+								"returnValueType": {
+									"nodeType": "intrinsic",
+									"type": "void"
 								}
 							}
-						],
-						"returnValueType": {
-							"nodeType": "intrinsic",
-							"type": "void"
-						}
+						]
 					},
 					"optional": false,
 					"filenames": {}
@@ -33,20 +37,24 @@
 					"name": "onClosing",
 					"type": {
 						"nodeType": "function",
-						"parameters": [
+						"callSignatures": [
 							{
-								"nodeType": "parameter",
-								"name": "animated",
-								"type": {
+								"parameters": [
+									{
+										"nodeType": "parameter",
+										"name": "animated",
+										"type": {
+											"nodeType": "intrinsic",
+											"type": "boolean"
+										}
+									}
+								],
+								"returnValueType": {
 									"nodeType": "intrinsic",
 									"type": "boolean"
 								}
 							}
-						],
-						"returnValueType": {
-							"nodeType": "intrinsic",
-							"type": "boolean"
-						}
+						]
 					},
 					"optional": false,
 					"filenames": {}