Fix props as union types

Author: michaldudak

src/parser.ts

@@ -303,14 +303,16 @@ export function parseFromProgram(
 					if (currentTypeNode === undefined) {
 						currentTypeNode = propNode;
 					} else if (currentTypeNode.$$id !== propNode.$$id) {
+						let mergedPropType = t.unionNode([currentTypeNode.propType, propNode.propType]);
+
 						currentTypeNode = t.propNode(
 							currentTypeNode.name,
 							{
 								description: currentTypeNode.description,
 								defaultValue: currentTypeNode.defaultValue,
 								visibility: currentTypeNode.visibility,
 							},
-							t.unionNode([currentTypeNode.propType, propNode.propType]),
+							mergedPropType.types.length === 1 ? mergedPropType.types[0] : mergedPropType,
 							currentTypeNode.optional || propNode.optional,
 							new Set(Array.from(currentTypeNode.filenames).concat(Array.from(propNode.filenames))),
 							undefined,
@@ -349,10 +351,18 @@ export function parseFromProgram(
 	}
 
 	function parseComponentProps(name: string, type: ts.Type, sourceFile: ts.SourceFile | undefined) {
-		const properties = type
-			.getProperties()
-			.filter((symbol) => shouldInclude({ name: symbol.getName(), depth: 1 }));
-		if (properties.length === 0) {
+		let allProperties: ts.Symbol[];
+		if (type.isUnion()) {
+			allProperties = type.types.flatMap((x) => x.getProperties());
+		} else {
+			allProperties = type.getProperties();
+		}
+
+		const filteredProperties = allProperties.filter((symbol) =>
+			shouldInclude({ name: symbol.getName(), depth: 1 }),
+		);
+
+		if (filteredProperties.length === 0) {
 			return;
 		}
 
@@ -361,7 +371,7 @@ export function parseFromProgram(
 		programNode.body.push(
 			t.componentNode(
 				name,
-				properties.map((x) => checkSymbol(x, new Set([(type as any).id]))),
+				filteredProperties.map((x) => checkSymbol(x, new Set([(type as any).id]))),
 				getDocumentation(checker.getSymbolAtLocation(type.symbol?.valueDeclaration!)),
 				propsFilename,
 			),

test/union-types/input.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+function Component(props: PropsA | PropsB): React.ReactElement {
+	return <div {...props} />;
+}
+
+interface PropsA {
+	matching: boolean;
+	uniqueA: string;
+	conflictingOptionality: string;
+	conflictingType: string;
+}
+
+interface PropsB {
+	matching: boolean;
+	uniqueB: string;
+	conflictingOptionality?: string;
+	conflictingType: number;
+}

test/union-types/output.json

@@ -0,0 +1,79 @@
+{
+	"nodeType": "program",
+	"body": [
+		{
+			"nodeType": "component",
+			"name": "Component",
+			"props": [
+				{
+					"nodeType": "prop",
+					"name": "matching",
+					"propType": {
+						"nodeType": "simpleType",
+						"typeName": "boolean"
+					},
+					"optional": false,
+					"filenames": {}
+				},
+				{
+					"nodeType": "prop",
+					"name": "uniqueA",
+					"propType": {
+						"nodeType": "simpleType",
+						"typeName": "string"
+					},
+					"optional": false,
+					"filenames": {}
+				},
+				{
+					"nodeType": "prop",
+					"name": "conflictingOptionality",
+					"propType": {
+						"nodeType": "union",
+						"types": [
+							{
+								"nodeType": "simpleType",
+								"typeName": "string"
+							},
+							{
+								"nodeType": "simpleType",
+								"typeName": "undefined"
+							}
+						]
+					},
+					"optional": true,
+					"filenames": {}
+				},
+				{
+					"nodeType": "prop",
+					"name": "conflictingType",
+					"propType": {
+						"nodeType": "union",
+						"types": [
+							{
+								"nodeType": "simpleType",
+								"typeName": "string"
+							},
+							{
+								"nodeType": "simpleType",
+								"typeName": "number"
+							}
+						]
+					},
+					"optional": false,
+					"filenames": {}
+				},
+				{
+					"nodeType": "prop",
+					"name": "uniqueB",
+					"propType": {
+						"nodeType": "simpleType",
+						"typeName": "string"
+					},
+					"optional": false,
+					"filenames": {}
+				}
+			]
+		}
+	]
+}